/* ===================================================================== editor/editor-night.css Dark theme for all editor pages. Activated by: ===================================================================== */ /* ───────────────────────────────────────────────────────────────────── PALETTE (for reference — not used as vars, just inline) bg: #13161c page background surface: #1e2229 cards, panels, headers surface2: #252b34 secondary surfaces, hover border: #343b48 borders, dividers text: #dde5f0 primary text muted: #7c8b9e secondary / muted text accent: #2596be (unchanged) input-bg: #181c23 form inputs ───────────────────────────────────────────────────────────────────── */ /* ===================================================================== THEME TOGGLE BUTTON (shared across all pages) ===================================================================== */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid #dfe6e9; background: transparent; color: #555; cursor: pointer; padding: 0; margin: 0; line-height: 1; transition: background 0.18s, border-color 0.18s, color 0.18s; } .theme-toggle-btn:hover { background: #f0f0f0; border-color: #bbb; } html[data-theme="dark"] .theme-toggle-btn { border-color: #343b48; color: #dde5f0; background: #252b34; } html[data-theme="dark"] .theme-toggle-btn:hover { background: #2e3540; border-color: #4a5566; } /* ===================================================================== SHARED: html / body ===================================================================== */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: #13161c; color: #dde5f0; } /* ===================================================================== SHARED: version badge ===================================================================== */ html[data-theme="dark"] .version-badge { background: #252b34; border-color: #343b48; color: #7c8b9e; } /* ===================================================================== SHARED: dev banner ===================================================================== */ html[data-theme="dark"] .dev-banner { background: #2d2200; color: #e0b840; border-color: #584800; } /* ===================================================================== SHARED: status message toast ===================================================================== */ html[data-theme="dark"] #status-message.success { background: #1a3c2a; color: #7ee2a8; border-color: #2a5e40; } html[data-theme="dark"] #status-message.error { background: #3c1a1e; color: #f8a8a8; border-color: #5a282e; } html[data-theme="dark"] #status-message.warning { background: #382d0d; color: #f5d87a; border-color: #584810; } html[data-theme="dark"] #status-message.info { background: #1a2d3c; color: #7dd0e8; border-color: #284858; } /* ===================================================================== SHARED: docs-link pill badge ===================================================================== */ html[data-theme="dark"] .docs-link { background: #1a2d3c; border-color: #284858; color: #5ab4cc; } html[data-theme="dark"] .docs-link:hover { background: #2596be; border-color: #2596be; color: #fff; } /* ===================================================================== LANDING PAGE (editor/index.html) ===================================================================== */ html[data-theme="dark"] .landing-header h1 { color: #dde5f0; } html[data-theme="dark"] .landing-header p { color: #7c8b9e; } html[data-theme="dark"] .landing-card { background: #1e2229; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .landing-card:hover { border-color: #2596be; box-shadow: 0 8px 24px rgba(37,150,190,0.10); } html[data-theme="dark"] .landing-card h2 { color: #dde5f0; } html[data-theme="dark"] .landing-card p { color: #7c8b9e; } html[data-theme="dark"] .landing-card .card-icon { color: #2596be; } html[data-theme="dark"] .docs-strip { background: #1e2229; border-color: #343b48; } html[data-theme="dark"] .docs-strip:hover { background: #1a2f40; border-color: #2596be; } html[data-theme="dark"] .docs-strip-title { color: #dde5f0; } html[data-theme="dark"] .docs-strip-desc { color: #7c8b9e; } html[data-theme="dark"] .docs-strip-arrow { color: #4a5566; } html[data-theme="dark"] .docs-strip:hover .docs-strip-arrow { color: #2596be; } html[data-theme="dark"] .back-home-btn { background: #1e2229; color: #dde5f0; border-color: #343b48; } html[data-theme="dark"] .back-home-btn:hover { background: #1a2f40; border-color: #2596be; color: #2596be; } /* fixed theme toggle on landing page */ html[data-theme="dark"] .landing-theme-toggle { border-color: #343b48; background: #1e2229; color: #dde5f0; } html[data-theme="dark"] .landing-theme-toggle:hover { background: #252b34; border-color: #4a5566; } /* ===================================================================== CONTENT EDITOR (content-editor.html / content-editor.css) ===================================================================== */ /* Header */ html[data-theme="dark"] .editor-header { background: #1e2229; border-bottom-color: #2596be; box-shadow: 0 2px 8px rgba(0,0,0,0.35); } html[data-theme="dark"] .editor-header h1 { color: #dde5f0; } /* Body */ html[data-theme="dark"] .editor-body { background: #1e2229; } /* Pane header */ html[data-theme="dark"] .pane-header { background: #13161c; border-bottom-color: #343b48; color: #dde5f0; } /* Side-by-side container */ html[data-theme="dark"] .side-by-side-container { border-color: #343b48; } html[data-theme="dark"] .editor-pane { border-right-color: #343b48; } /* Lang toggle */ html[data-theme="dark"] .lang-toggle { background: #13161c; } html[data-theme="dark"] .lang-btn { color: #7c8b9e; } html[data-theme="dark"] .lang-btn:not(.active):hover { background: #252b34; color: #dde5f0; } /* File selector row */ html[data-theme="dark"] .file-selector-row label { color: #dde5f0; } html[data-theme="dark"] .file-selector-row select { background: #181c23; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .file-selector-row select:focus { border-color: #2596be; } html[data-theme="dark"] .upload-limit-text { color: #7c8b9e; } html[data-theme="dark"] .latest-image-md { background: #252b34; color: #dde5f0; } html[data-theme="dark"] #file-size-warning { background: #3c1a1e; color: #f8a8a8; border-color: #5a282e; } /* Preview pane now embeds the real page in an iframe (content-editor.js) — it renders with the site's own styling/dark-mode handling, independent of the editor's theme. */ /* EasyMDE toolbar */ html[data-theme="dark"] .editor-pane .editor-toolbar { background: #181c23; border-bottom-color: #343b48; } html[data-theme="dark"] .editor-pane .editor-toolbar button { color: #7c8b9e !important; border-color: transparent; } html[data-theme="dark"] .editor-pane .editor-toolbar button:hover, html[data-theme="dark"] .editor-pane .editor-toolbar button.active { background: #2596be !important; color: #fff !important; border-color: #2596be !important; } html[data-theme="dark"] .editor-pane .editor-toolbar i.separator { border-right-color: #343b48 !important; } /* CodeMirror */ html[data-theme="dark"] .editor-pane .CodeMirror { background: #181c23 !important; color: #dde5f0 !important; } html[data-theme="dark"] .editor-pane .CodeMirror-scroll { background: #181c23; } html[data-theme="dark"] .editor-pane .CodeMirror-gutters { background: #13161c; border-right-color: #343b48; } html[data-theme="dark"] .editor-pane .CodeMirror-linenumber { color: #4a5566; } html[data-theme="dark"] .editor-pane .CodeMirror-cursor { border-left-color: #dde5f0; } html[data-theme="dark"] .editor-pane .CodeMirror-selected, html[data-theme="dark"] .editor-pane .CodeMirror-focused .CodeMirror-selected { background: rgba(37,150,190,0.28) !important; } html[data-theme="dark"] .editor-pane .CodeMirror-activeline-background { background: rgba(255,255,255,0.03) !important; } /* Markdown token colours */ html[data-theme="dark"] .editor-pane .cm-header { color: #5ab4cc !important; } html[data-theme="dark"] .editor-pane .cm-strong { color: #f0c8a0 !important; } html[data-theme="dark"] .editor-pane .cm-em { color: #a0d0a0 !important; } html[data-theme="dark"] .editor-pane .cm-link { color: #7dd0e8 !important; } html[data-theme="dark"] .editor-pane .cm-url { color: #5ab4cc !important; } html[data-theme="dark"] .editor-pane .cm-comment { color: #7c8b9e !important; } html[data-theme="dark"] .editor-pane .cm-code { color: #f0c8a0 !important; } /* EasyMDE status bar */ html[data-theme="dark"] .editor-pane .editor-statusbar { border-top-color: #343b48; color: #7c8b9e; background: #181c23; } /* Autosave indicator */ html[data-theme="dark"] .autosave-indicator { background: #252b34; color: #7c8b9e; } html[data-theme="dark"] .autosave-indicator.saved { background: #1a3c2a; color: #7ee2a8; } html[data-theme="dark"] .autosave-indicator.saving { background: #382d0d; color: #f5d87a; } /* Help toggle button */ html[data-theme="dark"] .help-toggle-btn { background: #252b34; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .help-toggle-btn:hover { background: #2e3540; } /* Help panel */ html[data-theme="dark"] .help-panel { background: #1e2229; box-shadow: -4px 0 20px rgba(0,0,0,0.45); } html[data-theme="dark"] .help-panel h3, html[data-theme="dark"] .help-panel h4 { color: #dde5f0; } html[data-theme="dark"] .help-panel p { color: #a0b4c8; } html[data-theme="dark"] .help-panel code { background: #252b34; color: #dde5f0; } html[data-theme="dark"] .help-panel hr { border-top-color: #343b48; } html[data-theme="dark"] .help-panel .close-btn { color: #7c8b9e; } html[data-theme="dark"] .help-panel .close-btn:hover { color: #dde5f0; } html[data-theme="dark"] .cheatsheet-alert { background: #1a2d3c; border-color: #284858; color: #7dd0e8; } /* Footer */ html[data-theme="dark"] .editor-footer { background: #1e2229; border-top-color: #343b48; } html[data-theme="dark"] .footer-row label { color: #dde5f0; } html[data-theme="dark"] .footer-row input[type="text"] { background: #181c23; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .footer-row input[type="text"]:focus { border-color: #2596be; } html[data-theme="dark"] .home-link { background: #1e2229; color: #dde5f0; border-color: #343b48; } html[data-theme="dark"] .home-link:hover { background: #1a2f40; border-color: #2596be; color: #2596be; } /* Draft modal */ html[data-theme="dark"] .modal-content { background: #1e2229; } html[data-theme="dark"] .modal-content h3 { color: #dde5f0; } html[data-theme="dark"] .modal-content p { color: #a0b4c8; } html[data-theme="dark"] #discard-draft-btn { background: #252b34; color: #dde5f0; } html[data-theme="dark"] #discard-draft-btn:hover { background: #2e3540; } /* Image browser */ html[data-theme="dark"] .image-browser { background: #1e2229; } html[data-theme="dark"] .image-browser-header h3 { color: #dde5f0; } html[data-theme="dark"] .image-browser-header .close-btn { color: #7c8b9e; } html[data-theme="dark"] .image-browser-header .close-btn:hover { color: #dde5f0; } html[data-theme="dark"] .image-browser-search { border-bottom-color: #343b48; } html[data-theme="dark"] .image-browser-search input { background: #181c23; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .image-card { border-color: #343b48; } html[data-theme="dark"] .image-card:hover { border-color: #2596be; } html[data-theme="dark"] .image-card .thumb { background: #252b34; } html[data-theme="dark"] .image-card .card-info { border-top-color: #343b48; } html[data-theme="dark"] .image-card .card-name { color: #dde5f0; } html[data-theme="dark"] .image-browser-status { border-top-color: #343b48; color: #7c8b9e; } /* Linked content banner */ html[data-theme="dark"] .linked-content-banner { background: #2d2200; color: #f0d080; border-color: #584800; } /* Mobile tab bar */ html[data-theme="dark"] .mobile-editor-tab-bar { background: #1e2229; border-bottom-color: #343b48; } /* Frontmatter collapse/expand (OKF metadata) */ html[data-theme="dark"] .fm-collapsed-widget { background: #18233a; border-left-color: #3a5a8a; color: #7a9cc8; } html[data-theme="dark"] .fm-collapsed-widget:hover { background: #1e2c48; } html[data-theme="dark"] .fm-lang-tag { background: #3a5a8a; } html[data-theme="dark"] .fm-q-btn { background: #1a2235; border-color: #3a5a8a; color: #7a9cc8; } html[data-theme="dark"] .fm-q-btn:hover { background: #3a5a8a; color: #dde5f0; border-color: #3a5a8a; } html[data-theme="dark"] .fm-box-textarea { background: #16233d; color: #a8c8e8; border-left-color: #3a5a8a; border-bottom-color: #2a3a52; } html[data-theme="dark"] .fm-box-textarea:focus { background: #1a2848; } html[data-theme="dark"] .fm-info-panel { background: #16203a; border-bottom-color: #3a5a8a; border-left-color: #3a5a8a; } html[data-theme="dark"] .fm-info-text { color: #8ab0d8; } html[data-theme="dark"] .fm-info-text strong { color: #a8c8e8; } html[data-theme="dark"] .fm-info-text code { background: #1e2e48; color: #a8c8e8; } html[data-theme="dark"] .fm-info-close { color: #4a6888; } html[data-theme="dark"] .fm-info-close:hover { color: #a8c8e8; background: #1e2e48; } html[data-theme="dark"] .mobile-tab { color: #7c8b9e; } html[data-theme="dark"] .mobile-tab.active { color: #2596be; border-bottom-color: #2596be; background: #1e2229; } /* ===================================================================== PAGE MANAGER (page-manager.html / page-manager.css) ===================================================================== */ /* Header */ html[data-theme="dark"] .manager-header { background: #1e2229; border-bottom-color: #2596be; box-shadow: 0 2px 8px rgba(0,0,0,0.35); } html[data-theme="dark"] .manager-header h1 { color: #dde5f0; } /* Section panels */ html[data-theme="dark"] .section-panel { background: #1e2229; border-color: #343b48; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } html[data-theme="dark"] .section-panel h2 { color: #dde5f0; } html[data-theme="dark"] .section-panel .section-desc { color: #7c8b9e; } /* Product selector */ html[data-theme="dark"] .product-selector-row label { color: #dde5f0; } html[data-theme="dark"] .product-selector-row select { background: #181c23; border-color: #343b48; color: #dde5f0; } /* Page cards */ html[data-theme="dark"] .page-card { background: #252b34; border-color: #343b48; } html[data-theme="dark"] .page-card:hover { border-color: #2596be; } html[data-theme="dark"] .page-card-title { color: #dde5f0; } html[data-theme="dark"] .page-card-nl { color: #7c8b9e; } html[data-theme="dark"] .page-card-id { background: #1e2229; color: #7c8b9e; } /* Badges */ html[data-theme="dark"] .badge-default { background: #343b48; color: #a0b0c0; } html[data-theme="dark"] .badge-custom { background: #1a2d3c; color: #7dd0e8; } html[data-theme="dark"] .badge-linked { background: #2d2200; color: #f0d080; } html[data-theme="dark"] .linked-source-info { color: #f0d080; } /* Page card create form */ html[data-theme="dark"] .page-card-create-title { color: #5ab4cc; } html[data-theme="dark"] .page-card-field-label { color: #7c8b9e; } html[data-theme="dark"] .page-card-create-info { color: #7c8b9e; border-top-color: #343b48; } html[data-theme="dark"] .page-card-field-warn { color: #f08080; } html[data-theme="dark"] .page-card-link-target { background: #2d2200; border-color: #584800; } html[data-theme="dark"] .link-target-select { background: #181c23; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .link-target-sep { color: #7c8b9e; } html[data-theme="dark"] .source-radio-desc { color: #7c8b9e; } /* Page card inline edit */ html[data-theme="dark"] .page-card-edit-input { background: #181c23; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .page-card-edit-input:focus { border-color: #2596be; } html[data-theme="dark"] .btn-cancel-edit { background: #252b34; color: #dde5f0; } html[data-theme="dark"] .btn-cancel-edit:hover { background: #2e3540; } /* Add new page card */ html[data-theme="dark"] .page-card-add-new { border-color: #343b48; color: #4a5566; } html[data-theme="dark"] .page-card-add-new:hover { border-color: #2596be; color: #2596be; } /* Cards editor (home page) */ html[data-theme="dark"] .card-section { border-color: #343b48; } html[data-theme="dark"] .card-section-title { background: #252b34; border-bottom-color: #343b48; } html[data-theme="dark"] .card-section-title input { background: #181c23; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .card-section-title .section-lang-label { color: #7c8b9e; } html[data-theme="dark"] .card-item { background: #252b34; border-color: #343b48; } html[data-theme="dark"] .card-item:hover { background: #2e3540; } html[data-theme="dark"] .card-item .drag-handle { color: #4a5566; } html[data-theme="dark"] .card-field-label { color: #7c8b9e; } html[data-theme="dark"] .card-item input { background: #181c23; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .card-item input:focus { border-color: #2596be; } html[data-theme="dark"] .card-item .btn-remove-card { background: #343b48; color: #f08080; } html[data-theme="dark"] .card-item .btn-remove-card:hover { background: #3c1a1e; } html[data-theme="dark"] .btn-add-card { background: #252b34; color: #dde5f0; border-color: #343b48; } html[data-theme="dark"] .btn-add-card:hover { background: #2e3540; } html[data-theme="dark"] .card-item input.changed, html[data-theme="dark"] .card-section-title input.changed { color: #5ab4cc; border-color: #2596be; } html[data-theme="dark"] .card-item-new { border-left-color: #2596be; background: #1a2d3c; } /* Save section */ html[data-theme="dark"] .save-section label { color: #dde5f0; } html[data-theme="dark"] .save-section input[type="text"] { background: #181c23; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .save-section input[type="text"]:focus { border-color: #2596be; } /* Confirm modal */ html[data-theme="dark"] .confirm-box { background: #1e2229; } html[data-theme="dark"] .confirm-box h3 { color: #dde5f0; } html[data-theme="dark"] .confirm-box p { color: #a0b4c8; } html[data-theme="dark"] .btn-confirm-no { background: #252b34; color: #dde5f0; } html[data-theme="dark"] .btn-confirm-no:hover { background: #2e3540; } /* Floating back button */ html[data-theme="dark"] .pm-fab-back { background: #1e2229; color: #dde5f0; border-color: #343b48; } html[data-theme="dark"] .pm-fab-back:hover { background: #1a2f40; border-color: #2596be; color: #2596be; } /* Icon picker */ html[data-theme="dark"] .icon-picker-trigger { background: #181c23; border-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .icon-picker-trigger:hover, html[data-theme="dark"] .icon-picker-trigger:focus { border-color: #2596be; } html[data-theme="dark"] .picker-caret { color: #4a5566; } html[data-theme="dark"] .icon-picker-dropdown { background: #1e2229; border-color: #2596be; box-shadow: 0 8px 32px rgba(0,0,0,0.55); } html[data-theme="dark"] .icon-picker-search { background: #181c23; border-bottom-color: #343b48; color: #dde5f0; } html[data-theme="dark"] .icon-picker-item { color: #7c8b9e; } html[data-theme="dark"] .icon-picker-item:hover { background: #1a2f40; color: #2596be; } html[data-theme="dark"] .icon-picker-item.selected { background: #1a2d3c; border-color: #2596be; color: #2596be; } /* Help tips */ html[data-theme="dark"] .help-tip { background: #1a2d3c; color: #5ab4cc; } html[data-theme="dark"] .help-tip:hover { background: #2596be; color: #fff; } /* ===================================================================== ADMIN DOCS (admin-docs.html) ===================================================================== */ html[data-theme="dark"] .docs-page { background: #13161c; } html[data-theme="dark"] .docs-header { background: #1e2229; border-bottom-color: #2596be; box-shadow: 0 2px 8px rgba(0,0,0,0.35); } html[data-theme="dark"] .docs-header h1 { color: #dde5f0; } html[data-theme="dark"] .docs-body { background: #1e2229; border-color: #343b48; color: #c8d8e8; } /* Headings */ html[data-theme="dark"] .docs-body h1 { color: #dde5f0; border-bottom-color: #2596be; } html[data-theme="dark"] .docs-body h2 { color: #5ab4cc; } html[data-theme="dark"] .docs-body h3 { color: #b8c8d8; } html[data-theme="dark"] .docs-body h4 { color: #9aa8b8; } /* Body text */ html[data-theme="dark"] .docs-body p { color: #c0d0e0; } html[data-theme="dark"] .docs-body li { color: #c0d0e0; } html[data-theme="dark"] .docs-body strong { color: #dde5f0; } html[data-theme="dark"] .docs-body a { color: #5ab4cc; } html[data-theme="dark"] .docs-body hr { border-top-color: #343b48; } /* Inline code */ html[data-theme="dark"] .docs-body code { background: #252b34; border-color: #343b48; color: #f0c8a0; } /* Code block */ html[data-theme="dark"] .docs-body pre { background: #181c23; border-color: #343b48; } html[data-theme="dark"] .docs-body pre code { color: #dde5f0; background: none; border: none; } /* Blockquote */ html[data-theme="dark"] .docs-body blockquote { background: #1a2d3c; border-left-color: #2596be; color: #a0b4c8; } html[data-theme="dark"] .docs-body blockquote p { color: #a0b4c8; } /* Table */ html[data-theme="dark"] .docs-body th { background: #252b34; color: #dde5f0; border-color: #343b48; } html[data-theme="dark"] .docs-body td { border-color: #343b48; } /* Back link + scroll-to-top */ html[data-theme="dark"] .back-link { background: #1e2229; color: #dde5f0; border-color: #343b48; } html[data-theme="dark"] .back-link:hover { background: #1a2f40; border-color: #2596be; color: #2596be; } html[data-theme="dark"] .cm-change-added { background-color: #4ade80; } html[data-theme="dark"] .cm-change-ai { background-color: #c084fc; }