fix: Simplify Decap CSS - target href selectors + JS fallback
Previous CSS selectors weren't catching Decap's dynamic class names. Now using: - href attribute selectors for Tasks link - JavaScript fallback after DOM load - Removed complex selectors that weren't working Signed-off-by: claude@firefrostgaming.com
This commit is contained in:
Claude (Chronicler #59)
151
admin/index.html
151
admin/index.html
@@ -9,132 +9,93 @@
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
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.
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* Login screen background - dark with subtle gradient */
|
||||
[class*="AuthenticationPage"] {
|
||||
background: linear-gradient(135deg, #0F0F1E 0%, #1a1a2e 50%, #0F0F1E 100%) !important;
|
||||
/* Hide any weird floating decorations */
|
||||
body::before, body::after,
|
||||
#nc-root::before, #nc-root::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Logo on login screen - make it bigger */
|
||||
[class*="AuthenticationPage"] img {
|
||||
max-width: 280px !important;
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
|
||||
/* Login button - Fire orange */
|
||||
[class*="AuthenticationPage"] button {
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
SIDEBAR TASKS HIGHLIGHT
|
||||
Target the first collection link in sidebar
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Target links containing "tasks" in href */
|
||||
a[href*="/collections/tasks"] {
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%) !important;
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 12px 32px !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
[class*="AuthenticationPage"] button:hover {
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
SIDEBAR - Make TASKS stand out
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Tasks collection - Fire orange highlight */
|
||||
[data-testid="sidebar"] a[href*="/collections/tasks"],
|
||||
nav a[href*="/collections/tasks"] {
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%) !important;
|
||||
color: white !important;
|
||||
border-radius: 6px !important;
|
||||
font-weight: bold !important;
|
||||
margin: 8px !important;
|
||||
padding: 10px 14px !important;
|
||||
box-shadow: 0 2px 10px rgba(255, 107, 53, 0.35) !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;
|
||||
}
|
||||
|
||||
[data-testid="sidebar"] a[href*="/collections/tasks"]:hover,
|
||||
nav a[href*="/collections/tasks"]:hover {
|
||||
a[href*="/collections/tasks"]:hover {
|
||||
background: linear-gradient(135deg, #FF8C42 0%, #FF6B35 100%) !important;
|
||||
transform: scale(1.02) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 5px 16px rgba(255, 107, 53, 0.5) !important;
|
||||
}
|
||||
|
||||
/* Sidebar header - Firefrost branding */
|
||||
[class*="Sidebar"] > div:first-child,
|
||||
nav > div:first-child {
|
||||
background: linear-gradient(180deg, #0F0F1E 0%, #1a1a2e 100%) !important;
|
||||
border-bottom: 2px solid #4ECDC4 !important;
|
||||
a[href*="/collections/tasks"] span,
|
||||
a[href*="/collections/tasks"] * {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
HEADER BAR
|
||||
GENERAL BUTTON STYLING
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Top header bar */
|
||||
header, [class*="AppHeader"] {
|
||||
background: #0F0F1E !important;
|
||||
border-bottom: 1px solid rgba(78, 205, 196, 0.3) !important;
|
||||
/* Publish/Save buttons - Frost teal */
|
||||
button[type="button"]:not([disabled]),
|
||||
button[type="submit"]:not([disabled]) {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
BUTTONS & ACCENTS
|
||||
CLEAN UP - Remove any unintended decorations
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Primary buttons - Frost teal */
|
||||
button[class*="primary"],
|
||||
[class*="ToolbarButton"],
|
||||
[class*="PublishButton"] {
|
||||
background: linear-gradient(135deg, #4ECDC4 0%, #3DBDB5 100%) !important;
|
||||
border: none !important;
|
||||
color: #0F0F1E !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* Save/Publish button */
|
||||
[class*="PublishButton"]:not(:disabled) {
|
||||
background: linear-gradient(135deg, #4ECDC4 0%, #3DBDB5 100%) !important;
|
||||
}
|
||||
|
||||
/* Active/selected states - Arcane purple */
|
||||
[class*="active"], [aria-current="true"] {
|
||||
border-left: 3px solid #A855F7 !important;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a:not([class*="sidebar"]):not([href*="/collections"]) {
|
||||
color: #4ECDC4;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #FF6B35;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
FOOTER BRANDING
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Add Firefrost branding text at bottom of sidebar */
|
||||
[class*="Sidebar"]::after,
|
||||
nav::after {
|
||||
content: "🔥 Fire + Frost + Foundation ❄️";
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
border-top: 1px solid rgba(78, 205, 196, 0.2);
|
||||
margin-top: auto;
|
||||
/* If there are floating emojis/decorations, hide them */
|
||||
[style*="position: absolute"],
|
||||
[style*="position:absolute"] {
|
||||
/* Only hide if they look decorative */
|
||||
}
|
||||
</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
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Wait for Decap to render
|
||||
setTimeout(function() {
|
||||
// Find and style the 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';
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user