f1293d799f
🔥 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
233 lines
9.3 KiB
HTML
233 lines
9.3 KiB
HTML
<!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 BRANDING
|
|
Fire: #FF6B35 | Frost: #4ECDC4 | Arcane: #A855F7 | Dark: #0F0F1E
|
|
═══════════════════════════════════════════════════════════ */
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════
|
|
🔥 TASKS - Fire Orange (Priority/Action)
|
|
═══════════════════════════════════════════════════════════ */
|
|
|
|
a[href*="/collections/tasks"] {
|
|
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 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, #FF8C42 0%, #FF6B35 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;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════
|
|
❄️ FROST TEAL - Primary Actions (Save, Publish, Create)
|
|
═══════════════════════════════════════════════════════════ */
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════
|
|
💜 ARCANE PURPLE - Selected/Active States
|
|
═══════════════════════════════════════════════════════════ */
|
|
|
|
/* 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 via JS as fallback
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setTimeout(function() {
|
|
// 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%)';
|
|
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.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>
|
|
</body>
|
|
</html>
|