Remove all dark mode CSS from Decap CMS - mobile-only optimizations
Removed entire dark mode theming (Fire/Frost/Arcane colors, dark backgrounds, all custom styling). Keeping ONLY mobile-responsive optimizations: - Larger touch targets (44px buttons/inputs) - Single-column layout on mobile - Stacked editor panes - Better spacing for small screens - 16px font size to prevent iOS zoom Result: Clean, default Decap CMS styling with mobile improvements only. This should resolve mobile display issues.
This commit is contained in:
Claude
459
admin/index.html
459
admin/index.html
@@ -7,412 +7,14 @@
|
||||
<title>Firefrost CMS</title>
|
||||
<style>
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
FIREFROST GAMING - DECAP CMS DARK MODE
|
||||
Fire: #FF6B35 | Frost: #4ECDC4 | Arcane: #A855F7 | Dark: #0F0F1E
|
||||
FIREFROST GAMING - DECAP CMS MOBILE OPTIMIZATIONS
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
/* Basic mobile viewport setup */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Ensure all text inside cards is light */
|
||||
[class*="ListCard"] *,
|
||||
[class*="EntryCard"] *,
|
||||
[class*="ListItemTopBar"] *,
|
||||
[class*="NestedCollection"] *,
|
||||
[class*="ListCard"] span,
|
||||
[class*="ListCard"] div,
|
||||
[class*="ListCard"] a,
|
||||
[class*="ListCard"] h2,
|
||||
[class*="ListCard"] h3,
|
||||
[class*="ListCard"] p {
|
||||
color: var(--ff-text) !important;
|
||||
background: transparent !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);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
PREVIEW PANE - Rendered Markdown
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
[class*="Preview"],
|
||||
[class*="preview"],
|
||||
[class*="WidgetPreview"],
|
||||
[class*="PreviewPane"],
|
||||
[class*="frame-content"] {
|
||||
background: var(--ff-dark) !important;
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
[class*="Preview"] *,
|
||||
[class*="preview"] *,
|
||||
[class*="PreviewPane"] *,
|
||||
[class*="WidgetPreview"] *,
|
||||
[class*="frame-content"] * {
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
[class*="Preview"] h1,
|
||||
[class*="Preview"] h2,
|
||||
[class*="Preview"] h3,
|
||||
[class*="Preview"] h4,
|
||||
[class*="Preview"] h5,
|
||||
[class*="Preview"] h6 {
|
||||
color: var(--ff-frost) !important;
|
||||
}
|
||||
|
||||
[class*="Preview"] a {
|
||||
color: var(--ff-fire) !important;
|
||||
}
|
||||
|
||||
[class*="Preview"] code,
|
||||
[class*="Preview"] pre {
|
||||
background: var(--ff-dark-light) !important;
|
||||
color: var(--ff-frost) !important;
|
||||
}
|
||||
|
||||
[class*="Preview"] blockquote {
|
||||
border-left: 3px solid var(--ff-arcane) !important;
|
||||
color: var(--ff-text-dim) !important;
|
||||
}
|
||||
|
||||
/* iframe preview if Decap uses one */
|
||||
iframe[class*="preview"],
|
||||
iframe[class*="Preview"] {
|
||||
background: var(--ff-dark) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
MISC
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Catch-all text colors - ensure nothing stays black */
|
||||
p, span, label, div, li, td, th, dt, dd, figcaption, legend, summary {
|
||||
color: var(--ff-text) !important;
|
||||
}
|
||||
|
||||
/* Dimmed/secondary text */
|
||||
small, .text-muted, [class*="subtle"], [class*="secondary"], [class*="hint"], [class*="description"] {
|
||||
color: var(--ff-text-dim) !important;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
@@ -420,26 +22,6 @@
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Sidebar - Collapsible on mobile */
|
||||
aside,
|
||||
[class*="Sidebar"] {
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
height: 100vh !important;
|
||||
z-index: 1000 !important;
|
||||
transform: translateX(-100%) !important;
|
||||
transition: transform 0.3s ease !important;
|
||||
width: 80% !important;
|
||||
max-width: 300px !important;
|
||||
}
|
||||
|
||||
/* Show sidebar when open */
|
||||
aside.open,
|
||||
[class*="Sidebar"].open {
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
|
||||
/* Main content takes full width */
|
||||
main,
|
||||
[class*="MainContent"],
|
||||
@@ -566,12 +148,6 @@
|
||||
margin-bottom: 8px !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Scrollbars - Thinner on mobile */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@@ -588,13 +164,6 @@
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
/* Sidebar - Full width on tiny screens */
|
||||
aside,
|
||||
[class*="Sidebar"] {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* Reduce all padding */
|
||||
main,
|
||||
[class*="MainContent"] {
|
||||
@@ -611,25 +180,5 @@
|
||||
</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
Block a user