feat: Full dark mode for Decap CMS
DARK THEME: - Background: #0F0F1E (Dark) - Sidebar: Gradient dark with subtle borders - Content area: Dark with lighter cards - Inputs/editors: Dark with visible borders - Scrollbars: Dark themed BRAND COLORS PRESERVED: 🔥 Fire Orange - Tasks collection ❄️ Frost Teal - Buttons, links, header accent 💜 Arcane Purple - Active states, focus rings, hover 🌑 Dark - Everything else Using CSS custom properties for consistency. Signed-off-by: claude@firefrostgaming.com
This commit is contained in:
Claude (Chronicler #59)
375
admin/index.html
375
admin/index.html
@@ -7,12 +7,97 @@
|
||||
<title>Firefrost CMS</title>
|
||||
<style>
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
FIREFROST GAMING - DECAP CMS BRANDING
|
||||
FIREFROST GAMING - DECAP CMS DARK MODE
|
||||
Fire: #FF6B35 | Frost: #4ECDC4 | Arcane: #A855F7 | Dark: #0F0F1E
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
--ff-fire: #FF6B35;
|
||||
--ff-fire-light: #FF8C42;
|
||||
--ff-frost: #4ECDC4;
|
||||
--ff-frost-dark: #3DBDB5;
|
||||
--ff-arcane: #A855F7;
|
||||
--ff-arcane-dim: rgba(168, 85, 247, 0.3);
|
||||
--ff-dark: #0F0F1E;
|
||||
--ff-dark-mid: #1a1a2e;
|
||||
--ff-dark-light: #252540;
|
||||
--ff-dark-lighter: #2f2f4a;
|
||||
--ff-text: #e0e0e0;
|
||||
--ff-text-dim: #a0a0a0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--ff-dark) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
GLOBAL DARK BACKGROUND
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
#nc-root,
|
||||
[class*="App"],
|
||||
[class*="Container"],
|
||||
main,
|
||||
section {
|
||||
background: var(--ff-dark) !important;
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
HEADER - Dark with Frost accent
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
header,
|
||||
[class*="AppHeader"],
|
||||
nav[class*="Header"] {
|
||||
background: var(--ff-dark) !important;
|
||||
border-bottom: 2px solid var(--ff-frost) !important;
|
||||
}
|
||||
|
||||
header *,
|
||||
[class*="AppHeader"] * {
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
a[href*="firefrostgaming.com"] {
|
||||
color: var(--ff-frost) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
a[href*="firefrostgaming.com"]:hover {
|
||||
color: var(--ff-fire) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
SIDEBAR - Dark gradient
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
aside,
|
||||
[class*="Sidebar"],
|
||||
nav:not([class*="Header"]) {
|
||||
background: linear-gradient(180deg, var(--ff-dark-mid) 0%, var(--ff-dark) 100%) !important;
|
||||
border-right: 1px solid var(--ff-dark-lighter) !important;
|
||||
}
|
||||
|
||||
/* Sidebar text */
|
||||
aside *,
|
||||
[class*="Sidebar"] *,
|
||||
[class*="Collection"] {
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
/* Search box */
|
||||
input[type="search"],
|
||||
input[placeholder*="Search"],
|
||||
[class*="Search"] input {
|
||||
background: var(--ff-dark-light) !important;
|
||||
border: 1px solid var(--ff-dark-lighter) !important;
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
input[type="search"]::placeholder {
|
||||
color: var(--ff-text-dim) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
@@ -20,7 +105,7 @@
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
a[href*="/collections/tasks"] {
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%) !important;
|
||||
background: linear-gradient(135deg, var(--ff-fire) 0%, var(--ff-fire-light) 100%) !important;
|
||||
color: white !important;
|
||||
border-radius: 8px !important;
|
||||
font-weight: 700 !important;
|
||||
@@ -32,7 +117,7 @@
|
||||
}
|
||||
|
||||
a[href*="/collections/tasks"]:hover {
|
||||
background: linear-gradient(135deg, #FF8C42 0%, #FF6B35 100%) !important;
|
||||
background: linear-gradient(135deg, var(--ff-fire-light) 0%, var(--ff-fire) 100%) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 5px 16px rgba(255, 107, 53, 0.5) !important;
|
||||
}
|
||||
@@ -43,153 +128,215 @@
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
❄️ FROST TEAL - Primary Actions (Save, Publish, Create)
|
||||
CONTENT AREA - Dark
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Publish/Save buttons */
|
||||
button[class*="PublishButton"],
|
||||
button[class*="ToolbarButton"],
|
||||
div[class*="ToolbarButton"] > button,
|
||||
button:not([disabled])[class*="Button"]:not([class*="Delete"]):not([class*="Cancel"]) {
|
||||
background: linear-gradient(135deg, #4ECDC4 0%, #3DBDB5 100%) !important;
|
||||
color: #0F0F1E !important;
|
||||
border: none !important;
|
||||
font-weight: 600 !important;
|
||||
[class*="EntryEditor"],
|
||||
[class*="Collection"],
|
||||
[class*="Content"],
|
||||
[class*="Pane"],
|
||||
[class*="Panel"] {
|
||||
background: var(--ff-dark) !important;
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
button[class*="PublishButton"]:hover,
|
||||
button[class*="ToolbarButton"]:hover {
|
||||
background: linear-gradient(135deg, #3DBDB5 0%, #4ECDC4 100%) !important;
|
||||
box-shadow: 0 3px 12px rgba(78, 205, 196, 0.4) !important;
|
||||
/* Collection header */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
/* Quick Add dropdown button */
|
||||
button[class*="DropdownButton"],
|
||||
[class*="QuickAdd"] button {
|
||||
background: linear-gradient(135deg, #4ECDC4 0%, #3DBDB5 100%) !important;
|
||||
color: #0F0F1E !important;
|
||||
/* Entry list items */
|
||||
[class*="ListCard"],
|
||||
[class*="EntryCard"],
|
||||
li[class*="Entry"],
|
||||
[class*="ObjectWidgetTopBar"],
|
||||
ul[class*="List"] > li {
|
||||
background: var(--ff-dark-mid) !important;
|
||||
border: 1px solid var(--ff-dark-lighter) !important;
|
||||
color: var(--ff-text) !important;
|
||||
border-radius: 6px !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
[class*="ListCard"]:hover,
|
||||
[class*="EntryCard"]:hover,
|
||||
li[class*="Entry"]:hover {
|
||||
border-left: 3px solid var(--ff-arcane) !important;
|
||||
background: var(--ff-dark-light) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
EDITOR AREA
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Editor panes */
|
||||
[class*="ControlPane"],
|
||||
[class*="PreviewPane"] {
|
||||
background: var(--ff-dark) !important;
|
||||
}
|
||||
|
||||
/* Text inputs and textareas */
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
[class*="TextField"],
|
||||
[class*="TextArea"],
|
||||
[contenteditable="true"] {
|
||||
background: var(--ff-dark-light) !important;
|
||||
border: 1px solid var(--ff-dark-lighter) !important;
|
||||
color: var(--ff-text) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
[contenteditable="true"]:focus {
|
||||
border-color: var(--ff-arcane) !important;
|
||||
box-shadow: 0 0 0 3px var(--ff-arcane-dim) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Markdown editor */
|
||||
[class*="Editor"],
|
||||
[class*="Markdown"],
|
||||
.cm-editor,
|
||||
.CodeMirror {
|
||||
background: var(--ff-dark-light) !important;
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
.cm-content,
|
||||
.CodeMirror-code,
|
||||
.cm-line {
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
/* Editor toolbar */
|
||||
[class*="Toolbar"],
|
||||
[class*="EditorToolbar"] {
|
||||
background: var(--ff-dark-mid) !important;
|
||||
border-bottom: 1px solid var(--ff-dark-lighter) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
❄️ BUTTONS - Frost Teal
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
button:not([disabled]):not([class*="Delete"]):not([class*="Cancel"]) {
|
||||
background: linear-gradient(135deg, var(--ff-frost) 0%, var(--ff-frost-dark) 100%) !important;
|
||||
color: var(--ff-dark) !important;
|
||||
border: none !important;
|
||||
font-weight: 600 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
button:not([disabled]):not([class*="Delete"]):not([class*="Cancel"]):hover {
|
||||
background: linear-gradient(135deg, var(--ff-frost-dark) 0%, var(--ff-frost) 100%) !important;
|
||||
box-shadow: 0 3px 12px rgba(78, 205, 196, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Cancel/secondary buttons */
|
||||
button[class*="Cancel"],
|
||||
button[class*="Secondary"] {
|
||||
background: transparent !important;
|
||||
border: 2px solid var(--ff-frost) !important;
|
||||
color: var(--ff-frost) !important;
|
||||
}
|
||||
|
||||
/* Delete buttons - keep red */
|
||||
button[class*="Delete"] {
|
||||
background: #dc3545 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Disabled buttons */
|
||||
button[disabled] {
|
||||
background: var(--ff-dark-lighter) !important;
|
||||
color: var(--ff-text-dim) !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
💜 ARCANE PURPLE - Selected/Active States
|
||||
💜 ACTIVE STATES - Arcane Purple
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Active sidebar item */
|
||||
a[aria-current="true"],
|
||||
a[class*="active"],
|
||||
li[class*="active"] > a {
|
||||
border-left: 4px solid #A855F7 !important;
|
||||
background: rgba(168, 85, 247, 0.1) !important;
|
||||
border-left: 4px solid var(--ff-arcane) !important;
|
||||
background: var(--ff-arcane-dim) !important;
|
||||
}
|
||||
|
||||
/* Selected/focused inputs */
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
[class*="Editor"]:focus-within {
|
||||
border-color: #A855F7 !important;
|
||||
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
|
||||
/* Dropdown/menu items */
|
||||
[class*="Dropdown"],
|
||||
[class*="Menu"],
|
||||
[role="listbox"],
|
||||
[role="menu"] {
|
||||
background: var(--ff-dark-mid) !important;
|
||||
border: 1px solid var(--ff-dark-lighter) !important;
|
||||
}
|
||||
|
||||
/* Dropdown active items */
|
||||
[class*="DropdownItem"]:hover,
|
||||
[class*="MenuItem"]:hover,
|
||||
[role="option"]:hover,
|
||||
[role="menuitem"]:hover {
|
||||
background: rgba(168, 85, 247, 0.15) !important;
|
||||
background: var(--ff-arcane-dim) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
🌑 DARK THEME - Headers & Containers
|
||||
LINKS
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Top header bar */
|
||||
header,
|
||||
[class*="AppHeader"],
|
||||
nav[class*="Header"] {
|
||||
background: #0F0F1E !important;
|
||||
border-bottom: 2px solid #4ECDC4 !important;
|
||||
}
|
||||
|
||||
/* Header text */
|
||||
header *,
|
||||
[class*="AppHeader"] * {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Site link in header */
|
||||
a[href*="firefrostgaming.com"] {
|
||||
color: #4ECDC4 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
a[href*="firefrostgaming.com"]:hover {
|
||||
color: #FF6B35 !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
SIDEBAR POLISH
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Sidebar background subtle gradient */
|
||||
aside,
|
||||
[class*="Sidebar"],
|
||||
nav:not([class*="Header"]) {
|
||||
background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%) !important;
|
||||
border-right: 1px solid rgba(78, 205, 196, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Collection headers */
|
||||
[class*="SidebarHeading"],
|
||||
[class*="CollectionLabel"] {
|
||||
color: #0F0F1E !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
LINKS & ACCENTS
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* General links - Frost teal */
|
||||
a:not([href*="/collections"]):not([class*="Button"]) {
|
||||
color: #4ECDC4 !important;
|
||||
color: var(--ff-frost) !important;
|
||||
}
|
||||
|
||||
a:not([href*="/collections"]):not([class*="Button"]):hover {
|
||||
color: #FF6B35 !important;
|
||||
}
|
||||
|
||||
/* Entry cards hover */
|
||||
[class*="ListCard"]:hover,
|
||||
[class*="EntryCard"]:hover,
|
||||
li[class*="Entry"]:hover {
|
||||
border-left: 3px solid #A855F7 !important;
|
||||
background: rgba(168, 85, 247, 0.05) !important;
|
||||
color: var(--ff-fire) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
BUTTONS - SECONDARY ACTIONS
|
||||
SCROLLBARS - Dark themed
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Cancel/secondary buttons - subtle */
|
||||
button[class*="Cancel"],
|
||||
button[class*="Secondary"] {
|
||||
background: transparent !important;
|
||||
border: 2px solid #4ECDC4 !important;
|
||||
color: #4ECDC4 !important;
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
button[class*="Cancel"]:hover,
|
||||
button[class*="Secondary"]:hover {
|
||||
background: rgba(78, 205, 196, 0.1) !important;
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--ff-dark);
|
||||
}
|
||||
|
||||
/* Delete buttons - keep red for danger */
|
||||
button[class*="Delete"] {
|
||||
background: #dc3545 !important;
|
||||
color: white !important;
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--ff-dark-lighter);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--ff-frost);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
MISC
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Dividers and borders */
|
||||
hr, [class*="Divider"] {
|
||||
border-color: var(--ff-dark-lighter) !important;
|
||||
}
|
||||
|
||||
/* Tooltips */
|
||||
[class*="Tooltip"] {
|
||||
background: var(--ff-dark-mid) !important;
|
||||
color: var(--ff-text) !important;
|
||||
border: 1px solid var(--ff-dark-lighter) !important;
|
||||
}
|
||||
|
||||
/* Loading spinner area */
|
||||
[class*="Loading"] {
|
||||
background: var(--ff-dark) !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -197,10 +344,9 @@
|
||||
<body>
|
||||
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
|
||||
<script>
|
||||
// After CMS loads, apply additional styling via JS as fallback
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setTimeout(function() {
|
||||
// Style Tasks link
|
||||
// Force Tasks link styling
|
||||
const tasksLinks = document.querySelectorAll('a[href*="/collections/tasks"]');
|
||||
tasksLinks.forEach(function(link) {
|
||||
link.style.background = 'linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%)';
|
||||
@@ -210,21 +356,10 @@
|
||||
link.style.padding = '12px 16px';
|
||||
link.style.margin = '4px 8px';
|
||||
link.style.boxShadow = '0 3px 12px rgba(255, 107, 53, 0.4)';
|
||||
link.style.display = 'block';
|
||||
link.style.textDecoration = 'none';
|
||||
// Style all children too
|
||||
link.querySelectorAll('*').forEach(function(child) {
|
||||
child.style.color = 'white';
|
||||
});
|
||||
});
|
||||
|
||||
// Style header
|
||||
const headers = document.querySelectorAll('header, [class*="AppHeader"]');
|
||||
headers.forEach(function(header) {
|
||||
header.style.background = '#0F0F1E';
|
||||
header.style.borderBottom = '2px solid #4ECDC4';
|
||||
});
|
||||
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user