ZDDC
8c2e65e4a2
Two issues from one session: * File tree: ZDDC-conforming filenames render as a single line even though the JS already produced two-div markup (filename-main + filename-secondary). Cause: .tree-row__label was display:flex (row-direction), so the two divs laid out side-by-side. Fix: wrap each label's text in a new .tree-row__name span styled flex-direction:column. Both file and folder code paths use the same wrapper now; non-ZDDC entries collapse to a single .filename-main line so typography stays consistent across the tree. Tested by injecting a ZDDC filename into a mock directory and asserting filename-secondary's bounding-box top is below filename-main's bottom. * Toast UI Editor was unreadable in dark mode. Toast UI ships with light-only chrome; its .toastui-editor-md-container has color #222 on a transparent bg, so when mdedit's dark theme rendered the surrounding pane in #1e1e1e the editor text fell on near-black background → effectively invisible. Fix: add CSS overrides in mdedit/css/editor.css that target the editor's load-bearing surfaces (md-container, md-preview, ww-container, ProseMirror, toolbar, mode-switch tabs, popups) and apply var(--bg) / var(--text). Toolbar icons get a filter:invert(0.85) hue-rotate to flip the sprite-baked dark glyphs. Both manual override (data-theme="dark") and OS-pref auto fallback (prefers-color-scheme) are covered. Tested by computing contrast ratios on every editor surface in dark mode — all came in at 10:1+ (well above WCAG AA's 4.5:1). Embedded snapshots refreshed to current main HEAD's dev build label. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
119 lines
4.4 KiB
CSS
119 lines
4.4 KiB
CSS
/* Toast UI Editor styles */
|
|
#markdown-editor {
|
|
display: block !important;
|
|
height: 100% !important;
|
|
min-height: 500px !important;
|
|
width: 100% !important;
|
|
position: relative !important;
|
|
z-index: 10;
|
|
}
|
|
|
|
.editor-instance {
|
|
height: 100% !important;
|
|
min-height: 500px !important;
|
|
}
|
|
|
|
.toastui-editor-defaultUI {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.toastui-editor-defaultUI-toolbar,
|
|
.toastui-editor-main,
|
|
.toastui-editor-main .ProseMirror,
|
|
.toastui-editor-main .toastui-editor-md-preview {
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* ── Toast UI Editor — dark-theme overrides ───────────────────────────────
|
|
Toast UI ships with light-mode chrome and edit surfaces by default. In
|
|
mdedit's dark mode the editor's text (#222) falls onto the transparent
|
|
md-container, which inherits var(--bg) dark = #1e1e1e → effectively
|
|
black-on-black. Override the load-bearing surfaces with mdedit's tokens
|
|
so the editor harmonises with the rest of the chrome.
|
|
The selectors target both manual override (data-theme="dark") and the
|
|
OS-pref auto fallback (prefers-color-scheme + no data-theme="light"). */
|
|
|
|
/* Manual dark override */
|
|
[data-theme="dark"] .toastui-editor-defaultUI,
|
|
[data-theme="dark"] .toastui-editor-md-container,
|
|
[data-theme="dark"] .toastui-editor-md-preview,
|
|
[data-theme="dark"] .toastui-editor-ww-container,
|
|
[data-theme="dark"] .toastui-editor-mode-switch,
|
|
[data-theme="dark"] .toastui-editor-main,
|
|
[data-theme="dark"] .ProseMirror {
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
[data-theme="dark"] .toastui-editor-defaultUI-toolbar {
|
|
background-color: var(--bg-secondary);
|
|
border-bottom-color: var(--border);
|
|
}
|
|
[data-theme="dark"] .toastui-editor-md-splitter {
|
|
background-color: var(--border);
|
|
}
|
|
[data-theme="dark"] .toastui-editor-toolbar-icons {
|
|
/* Toast UI's icons are sprite-baked dark; invert flips them to light. */
|
|
filter: invert(0.85) hue-rotate(180deg);
|
|
}
|
|
[data-theme="dark"] .toastui-editor-toolbar-divider {
|
|
background-color: var(--border);
|
|
}
|
|
[data-theme="dark"] .toastui-editor-mode-switch {
|
|
border-top-color: var(--border);
|
|
}
|
|
[data-theme="dark"] .toastui-editor-mode-switch .tab-item {
|
|
color: var(--text-muted);
|
|
}
|
|
[data-theme="dark"] .toastui-editor-mode-switch .tab-item.active {
|
|
color: var(--text);
|
|
background-color: var(--bg);
|
|
}
|
|
[data-theme="dark"] .toastui-editor-popup,
|
|
[data-theme="dark"] .toastui-editor-context-menu {
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* OS-pref auto fallback (matches every selector above) */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) .toastui-editor-defaultUI,
|
|
:root:not([data-theme="light"]) .toastui-editor-md-container,
|
|
:root:not([data-theme="light"]) .toastui-editor-md-preview,
|
|
:root:not([data-theme="light"]) .toastui-editor-ww-container,
|
|
:root:not([data-theme="light"]) .toastui-editor-mode-switch,
|
|
:root:not([data-theme="light"]) .toastui-editor-main,
|
|
:root:not([data-theme="light"]) .ProseMirror {
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
:root:not([data-theme="light"]) .toastui-editor-defaultUI-toolbar {
|
|
background-color: var(--bg-secondary);
|
|
border-bottom-color: var(--border);
|
|
}
|
|
:root:not([data-theme="light"]) .toastui-editor-md-splitter {
|
|
background-color: var(--border);
|
|
}
|
|
:root:not([data-theme="light"]) .toastui-editor-toolbar-icons {
|
|
filter: invert(0.85) hue-rotate(180deg);
|
|
}
|
|
:root:not([data-theme="light"]) .toastui-editor-toolbar-divider {
|
|
background-color: var(--border);
|
|
}
|
|
:root:not([data-theme="light"]) .toastui-editor-mode-switch {
|
|
border-top-color: var(--border);
|
|
}
|
|
:root:not([data-theme="light"]) .toastui-editor-mode-switch .tab-item {
|
|
color: var(--text-muted);
|
|
}
|
|
:root:not([data-theme="light"]) .toastui-editor-mode-switch .tab-item.active {
|
|
color: var(--text);
|
|
background-color: var(--bg);
|
|
}
|
|
:root:not([data-theme="light"]) .toastui-editor-popup,
|
|
:root:not([data-theme="light"]) .toastui-editor-context-menu {
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
}
|
|
}
|