firefrost-gaming/firefrost-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4a4afe92b8fc1fb747186318cad50360adb0a85a
firefrost-website/admin/index.html
Claude (Chronicler #59) 4a4afe92b8 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
2026-04-04 03:41:19 +00:00

368 lines
13 KiB
HTML
Raw Blame History

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex" />
<title>Firefrost CMS</title>
<style>
/* ═══════════════════════════════════════════════════════════
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;
}
/* ═══════════════════════════════════════════════════════════
🔥 TASKS - Fire Orange (Priority/Action)
═══════════════════════════════════════════════════════════ */
a[href*="/collections/tasks"] {
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;
padding: 12px 16px !important;
margin: 4px 8px !important;
box-shadow: 0 3px 12px rgba(255, 107, 53, 0.4) !important;
display: block !important;
text-decoration: none !important;
}
a[href*="/collections/tasks"]:hover {
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;
}
a[href*="/collections/tasks"] span,
a[href*="/collections/tasks"] * {
color: white !important;
}
/* ═══════════════════════════════════════════════════════════
CONTENT AREA - Dark
═══════════════════════════════════════════════════════════ */
[class*="EntryEditor"],
[class*="Collection"],
[class*="Content"],
[class*="Pane"],
[class*="Panel"] {
background: var(--ff-dark) !important;
color: var(--ff-text) !important;
}
/* Collection header */
h1, h2, h3, h4, h5, h6 {
color: var(--ff-text) !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;
}
/* ═══════════════════════════════════════════════════════════
💜 ACTIVE STATES - Arcane Purple
═══════════════════════════════════════════════════════════ */
a[aria-current="true"],
a[class*="active"],
li[class*="active"] > a {
border-left: 4px solid var(--ff-arcane) !important;
background: var(--ff-arcane-dim) !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;
}
[class*="DropdownItem"]:hover,
[class*="MenuItem"]:hover,
[role="option"]:hover,
[role="menuitem"]:hover {
background: var(--ff-arcane-dim) !important;
}
/* ═══════════════════════════════════════════════════════════
LINKS
═══════════════════════════════════════════════════════════ */
a:not([href*="/collections"]):not([class*="Button"]) {
color: var(--ff-frost) !important;
}
a:not([href*="/collections"]):not([class*="Button"]):hover {
color: var(--ff-fire) !important;
}
/* ═══════════════════════════════════════════════════════════
SCROLLBARS - Dark themed
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--ff-dark);
}
::-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>
</head>
<body>
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
// 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%)';
link.style.color = 'white';
link.style.borderRadius = '8px';
link.style.fontWeight = '700';
link.style.padding = '12px 16px';
link.style.margin = '4px 8px';
link.style.boxShadow = '0 3px 12px rgba(255, 107, 53, 0.4)';
link.querySelectorAll('*').forEach(function(child) {
child.style.color = 'white';
});
});
}, 500);
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink