feat: Full Firefrost color palette in Decap CMS
🔥 Fire Orange (#FF6B35) - Tasks collection, hover accents ❄️ Frost Teal (#4ECDC4) - Primary buttons, links, header border 💜 Arcane Purple (#A855F7) - Active states, focus rings, selections 🌑 Dark (#0F0F1E) - Header background Color usage follows brand guidelines: - Fire = Priority/Action items - Frost = Primary actions (Save, Publish) - Arcane = Selected/Active states - Dark = Header/containers Signed-off-by: claude@firefrostgaming.com
This commit is contained in:
Claude (Chronicler #59)
183
admin/index.html
183
admin/index.html
@@ -8,28 +8,17 @@
|
||||
<style>
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
FIREFROST GAMING - DECAP CMS BRANDING
|
||||
Fire: #FF6B35 | Frost: #4ECDC4 | Arcane: #A855F7
|
||||
|
||||
Note: Decap uses dynamic class names, so we target by
|
||||
structure and attributes rather than class names.
|
||||
Fire: #FF6B35 | Frost: #4ECDC4 | Arcane: #A855F7 | Dark: #0F0F1E
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* Hide any weird floating decorations */
|
||||
body::before, body::after,
|
||||
#nc-root::before, #nc-root::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
SIDEBAR TASKS HIGHLIGHT
|
||||
Target the first collection link in sidebar
|
||||
🔥 TASKS - Fire Orange (Priority/Action)
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Target links containing "tasks" in href */
|
||||
a[href*="/collections/tasks"] {
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%) !important;
|
||||
color: white !important;
|
||||
@@ -54,34 +43,164 @@
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
GENERAL BUTTON STYLING
|
||||
❄️ FROST TEAL - Primary Actions (Save, Publish, Create)
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Publish/Save buttons - Frost teal */
|
||||
button[type="button"]:not([disabled]),
|
||||
button[type="submit"]:not([disabled]) {
|
||||
/* 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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* Quick Add dropdown button */
|
||||
button[class*="DropdownButton"],
|
||||
[class*="QuickAdd"] button {
|
||||
background: linear-gradient(135deg, #4ECDC4 0%, #3DBDB5 100%) !important;
|
||||
color: #0F0F1E !important;
|
||||
border: none !important;
|
||||
font-weight: 600 !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
CLEAN UP - Remove any unintended decorations
|
||||
💜 ARCANE PURPLE - Selected/Active States
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* If there are floating emojis/decorations, hide them */
|
||||
[style*="position: absolute"],
|
||||
[style*="position:absolute"] {
|
||||
/* Only hide if they look decorative */
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 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 active items */
|
||||
[class*="DropdownItem"]:hover,
|
||||
[class*="MenuItem"]:hover,
|
||||
[role="option"]:hover,
|
||||
[role="menuitem"]:hover {
|
||||
background: rgba(168, 85, 247, 0.15) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
🌑 DARK THEME - Headers & Containers
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
BUTTONS - SECONDARY ACTIONS
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Cancel/secondary buttons - subtle */
|
||||
button[class*="Cancel"],
|
||||
button[class*="Secondary"] {
|
||||
background: transparent !important;
|
||||
border: 2px solid #4ECDC4 !important;
|
||||
color: #4ECDC4 !important;
|
||||
}
|
||||
|
||||
button[class*="Cancel"]:hover,
|
||||
button[class*="Secondary"]:hover {
|
||||
background: rgba(78, 205, 196, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Delete buttons - keep red for danger */
|
||||
button[class*="Delete"] {
|
||||
background: #dc3545 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
|
||||
<script>
|
||||
// After CMS loads, apply additional styling
|
||||
// After CMS loads, apply additional styling via JS as fallback
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Wait for Decap to render
|
||||
setTimeout(function() {
|
||||
// Find and style the Tasks link
|
||||
// Style Tasks link
|
||||
const tasksLinks = document.querySelectorAll('a[href*="/collections/tasks"]');
|
||||
tasksLinks.forEach(function(link) {
|
||||
link.style.background = 'linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%)';
|
||||
@@ -93,8 +212,20 @@
|
||||
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';
|
||||
});
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
// 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>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user