pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 16:31:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix markdown editor CSS

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 17:54:46 +00:00
parent 7339c97085
commit babac8f49d
1 changed files with 36 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/styles/markdown-editor.css
View File

@@ -1,117 +1,63 @@
/* MDEditor theme integration with shadcn/ui */
/* MDEditor theme integration with shadcn/ui using data-color-mode */
/* Container */
.w-md-editor {
@apply rounded-lg border border-input bg-background;
box-shadow: none !important;
font-family: inherit;
/* Light mode variables */
[data-color-mode="light"] {
--color-fg-default: hsl(var(--foreground));
--color-canvas-default: hsl(var(--background));
--color-border-default: hsl(var(--border));
--color-neutral-muted: hsl(var(--muted));
}
/* Toolbar */
/* Dark mode variables */
[data-color-mode="dark"] {
--color-fg-default: hsl(var(--foreground));
--color-canvas-default: hsl(var(--background));
--color-border-default: hsl(var(--border));
--color-neutral-muted: hsl(var(--muted));
}
/* Container styling */
.w-md-editor {
@apply rounded-lg border;
border-color: hsl(var(--border)) !important;
background-color: hsl(var(--background)) !important;
font-family: inherit;
}
/* Toolbar styling */
.w-md-editor-toolbar {
@apply border-b border-border bg-muted/50;
background-color: hsl(var(--muted)) !important;
border-color: hsl(var(--border)) !important;
padding: 8px;
}
.w-md-editor-toolbar button,
.w-md-editor-toolbar-divider {
@apply text-foreground;
}
.w-md-editor-toolbar button:hover {
@apply bg-accent text-accent-foreground;
}
.w-md-editor-toolbar button[data-active="true"] {
@apply bg-primary/10 text-primary;
}
.w-md-editor-toolbar ul > li > button {
.w-md-editor-toolbar button {
color: hsl(var(--foreground)) !important;
border-radius: 4px;
}
/* Editor content area */
.w-md-editor-toolbar button:hover {
@apply bg-accent;
}
/* Editor area - let library handle text colors via CSS variables */
.w-md-editor-content {
@apply bg-background;
background-color: hsl(var(--background)) !important;
}
.w-md-editor-text-pre,
.w-md-editor-text-input {
@apply bg-background text-foreground;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
.w-md-editor-text-pre > code,
.w-md-editor-text-input {
font-size: 14px !important;
line-height: 1.6 !important;
}
/* Light mode text visibility */
.w-md-editor-text-pre > code {
color: hsl(var(--foreground)) !important;
}
.w-md-editor textarea.w-md-editor-text-input {
color: hsl(var(--foreground)) !important;
background-color: hsl(var(--background)) !important;
caret-color: hsl(var(--foreground)) !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
/* Preview area */
.w-md-editor-preview {
@apply bg-background;
background-color: hsl(var(--background)) !important;
}
.wmde-markdown {
@apply bg-background text-foreground;
}
.wmde-markdown-color {
@apply bg-background;
}
/* Dark mode specific overrides */
.dark .w-md-editor {
@apply bg-background border-border;
--color-fg-default: hsl(var(--foreground));
--color-canvas-default: hsl(var(--background));
--color-border-default: hsl(var(--border));
}
.dark .w-md-editor-toolbar {
@apply bg-muted/50 border-border;
}
.dark .w-md-editor-text-pre,
.dark .w-md-editor-text-input {
@apply bg-background text-foreground;
color: hsl(var(--foreground)) !important;
}
.dark .w-md-editor-text-pre > code {
color: hsl(var(--foreground)) !important;
}
.dark .w-md-editor textarea.w-md-editor-text-input {
color: hsl(var(--foreground)) !important;
background-color: hsl(var(--background)) !important;
caret-color: hsl(var(--foreground)) !important;
}
.dark .wmde-markdown {
@apply bg-background text-foreground;
}
.dark .wmde-markdown code {
@apply bg-muted text-foreground;
}
.dark .wmde-markdown pre {
@apply bg-muted border border-border;
}
/* Scrollbar styling */
@@ -136,42 +82,15 @@
@apply bg-muted-foreground/50;
}
/* Typography in preview matches MarkdownRenderer */
.w-md-editor-preview .wmde-markdown {
max-width: none;
}
/* Typography in preview */
.w-md-editor-preview .wmde-markdown h1,
.w-md-editor-preview .wmde-markdown h2,
.w-md-editor-preview .wmde-markdown h3,
.w-md-editor-preview .wmde-markdown h4,
.w-md-editor-preview .wmde-markdown h5,
.w-md-editor-preview .wmde-markdown h6 {
.w-md-editor-preview .wmde-markdown h3 {
@apply font-bold tracking-tight;
}
.w-md-editor-preview .wmde-markdown h1 {
@apply text-4xl;
}
.w-md-editor-preview .wmde-markdown h2 {
@apply text-3xl;
}
.w-md-editor-preview .wmde-markdown h3 {
@apply text-2xl;
}
.w-md-editor-preview .wmde-markdown p {
@apply text-base leading-relaxed;
}
.w-md-editor-preview .wmde-markdown a {
@apply text-primary no-underline hover:underline;
}
.w-md-editor-preview .wmde-markdown strong {
@apply text-foreground font-semibold;
@apply text-primary hover:underline;
}
.w-md-editor-preview .wmde-markdown code {
@@ -181,23 +100,3 @@
.w-md-editor-preview .wmde-markdown pre {
@apply bg-muted border border-border rounded;
}
.w-md-editor-preview .wmde-markdown blockquote {
@apply border-l-4 border-primary italic;
}
.w-md-editor-preview .wmde-markdown img {
@apply rounded-lg shadow-lg;
}
.w-md-editor-preview .wmde-markdown hr {
@apply border-border;
}
.w-md-editor-preview .wmde-markdown ul {
@apply list-disc;
}
.w-md-editor-preview .wmde-markdown ol {
@apply list-decimal;
}