/*
* cms-core/admin/css/admin-theme.css — gismc-core Admin Dark Mode Overrides
*
* Framework-owned. Do not edit directly.
* Contains all [data-theme="dark"] overrides for admin panel components:
* - Admin layout (body, sidebar, cards, modals, overlays)
* - Settings panel (theme card active state)
* - Quill WYSIWYG editor (toolbar, editor area, picker dropdowns)
* - MediaPicker modal (pool selector cards, library image cards)
*
* Load order in admin HTML :
*
*
*
* All var() references use --gismc-color-* / --gismc-shadow-* namespace.
* All specificity follows: [data-theme="dark"] .class = (0,2,0).
*/
/* =============================================================================
ADMIN LAYOUT — dark surface overrides
============================================================================= */
[data-theme="dark"] body { background-color: var(--gismc-color-bg-page); }
[data-theme="dark"] aside { background-color: var(--gismc-color-bg-surface); border-color: var(--gismc-color-border); }
[data-theme="dark"] .bg-white\/95 { background-color: rgba(30, 41, 59, 0.95); }
/* Top bar / sticky header */
[data-theme="dark"] .sticky.bg-white\/95 { background-color: rgba(30, 41, 59, 0.95); border-color: var(--gismc-color-border); }
/* Stat cards */
[data-theme="dark"] .stat-card { background-color: var(--gismc-color-bg-surface); border-color: var(--gismc-color-border); }
/* Post cards */
[data-theme="dark"] .post-card { background-color: var(--gismc-color-bg-surface); border-color: var(--gismc-color-border); }
/* Table headers */
[data-theme="dark"] .bg-gray-50 { background-color: var(--gismc-color-bg-page); }
/* Sidebar nav hover */
[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--gismc-color-bg-surface-alt); }
/* Sidebar border separators */
[data-theme="dark"] .border-t.border-gray-100 { border-color: var(--gismc-color-border); }
[data-theme="dark"] .border-b.border-gray-100 { border-color: var(--gismc-color-border); }
[data-theme="dark"] .border-b.border-gray-200 { border-color: var(--gismc-color-border); }
[data-theme="dark"] .border-r.border-gray-200 { border-color: var(--gismc-color-border); }
/* Delete / bulk-delete / session modals */
[data-theme="dark"] #delete-modal .bg-white,
[data-theme="dark"] #bulk-delete-modal .bg-white,
[data-theme="dark"] #project-delete-modal .bg-white,
[data-theme="dark"] #session-expired-modal .bg-white,
[data-theme="dark"] #media-picker-modal .bg-white {
background-color: var(--gismc-color-bg-surface);
border-color: var(--gismc-color-border);
}
/* App loading + login overlay */
[data-theme="dark"] #app-loading { background-color: var(--gismc-color-bg-page); }
[data-theme="dark"] #login-overlay { background-color: var(--gismc-color-bg-page); }
/* Pagination / misc utility overrides */
[data-theme="dark"] .text-gray-400 { color: var(--gismc-color-text-muted); }
[data-theme="dark"] .text-gray-500 { color: var(--gismc-color-text-muted); }
/* =============================================================================
SETTINGS PANEL — theme-card dark state
============================================================================= */
/* Text labels inside theme cards */
[data-theme="dark"] .admin-theme-card span:not(.theme-check) { color: var(--gismc-color-text-secondary); }
/* Card surface */
[data-theme="dark"] .admin-theme-card { border-color: var(--gismc-color-border); background-color: var(--gismc-color-bg-surface); }
/* Active card — uses .is-active (semantic) instead of .border-blue-500 (Tailwind) */
[data-theme="dark"] .admin-theme-card.is-active { background-color: var(--gismc-color-bg-surface-alt); }
/* =============================================================================
QUILL WYSIWYG EDITOR — dark mode (Option A: theme-aware editor)
============================================================================= */
/* Toolbar background */
[data-theme="dark"] .ql-toolbar.ql-snow {
background-color: var(--gismc-color-bg-surface-alt);
border-color: var(--gismc-color-border);
}
/* Container border */
[data-theme="dark"] .ql-container.ql-snow {
border-color: var(--gismc-color-border);
}
/* Editor content area */
[data-theme="dark"] .ql-editor {
background-color: var(--gismc-color-bg-surface);
color: var(--gismc-color-text-primary);
}
/* Placeholder text */
[data-theme="dark"] .ql-editor.ql-blank::before {
color: var(--gismc-color-text-muted);
}
/* SVG stroke icons (bold, italic, etc.) */
[data-theme="dark"] .ql-toolbar.ql-snow .ql-stroke {
stroke: var(--gismc-color-text-secondary);
}
[data-theme="dark"] .ql-toolbar.ql-snow .ql-fill,
[data-theme="dark"] .ql-toolbar.ql-snow .ql-stroke.ql-fill {
fill: var(--gismc-color-text-secondary);
}
/* Toolbar button hover/active */
[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-stroke,
[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active .ql-stroke {
stroke: var(--gismc-color-primary);
}
[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-fill,
[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active .ql-fill {
fill: var(--gismc-color-primary);
}
/* Picker labels (font, size, header dropdowns) */
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-label {
color: var(--gismc-color-text-secondary);
border-color: var(--gismc-color-border);
}
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-label::before {
color: var(--gismc-color-text-secondary);
}
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-label .ql-stroke {
stroke: var(--gismc-color-text-secondary);
}
/* Picker dropdown */
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-options {
background-color: var(--gismc-color-bg-surface);
border-color: var(--gismc-color-border);
}
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-item {
color: var(--gismc-color-text-secondary);
}
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-item:hover,
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-item.ql-selected {
color: var(--gismc-color-primary);
}
/* Editor focus ring */
[data-theme="dark"] .ql-container.ql-snow:focus-within {
box-shadow: 0 0 0 3px var(--gismc-color-focus-ring);
border-color: var(--gismc-color-border-focus);
}
/* =============================================================================
MEDIAPICKER MODAL — dark mode overrides
============================================================================= */
/* Pool selector — checked blue card (Blog Images) */
[data-theme="dark"] #media-picker-modal .peer:checked ~ .peer-checked\:bg-blue-50 {
background-color: var(--gismc-color-primary-light);
}
/* Pool selector — checked green card (Project Images) */
[data-theme="dark"] #media-picker-modal .peer:checked ~ .peer-checked\:bg-green-50 {
background-color: rgba(20, 83, 45, 0.45);
}
/* Icon container — green pool */
[data-theme="dark"] #media-picker-modal .bg-green-100 {
background-color: rgba(20, 83, 45, 0.55);
}
/* Icon color — green pool */
[data-theme="dark"] #media-picker-modal .text-green-600 {
color: #4ade80;
}
/* Checked green card border */
[data-theme="dark"] #media-picker-modal .peer:checked ~ .peer-checked\:border-green-600 {
border-color: #4ade80;
}
/* Library image cards */
[data-theme="dark"] #media-picker-modal .picker-image-card {
background-color: var(--gismc-color-bg-surface);
border-color: var(--gismc-color-border);
}