/* ============================================================================ * Mock Rock — Dark Theme Overlay * ---------------------------------------------------------------------------- * Loaded by mock_rock_tweaks/dark_theme on every page (front-end + admin). * Inert until gains the `dark-mode` class via dark-toggle.js. * * Reverting: * 1. Remove `mock_rock_tweaks/dark_theme` library attachment from * mock_rock_tweaks_page_attachments() in mock_rock_tweaks.module. * 2. Remove the `dark_theme:` block from mock_rock_tweaks.libraries.yml. * 3. (Optional) Delete this file + dark-toggle.js. * No existing CSS is touched. * * Palette (sourced from dash.rock.tools + WMG brand): * --bg-base : #0f0f0f site background * --bg-elevated : #181818 inputs, table rows * --bg-card : #0d143a deep blue panel for tiles / button bars * --bg-hover : #1c2858 * --border : #1c4dd9 * --text : #e1e1e1 * --text-strong : #ffffff * --text-muted : #aaaaaa * --blue : #0d6efd WMG primary * --cyan : #00c8ff links / info * --pink : #ff4ac3 success / accent * --yellow : #d4ff00 warning / accent * --red : #f44336 danger * ========================================================================== */ /* ---------------------------------------------------------------------------- * Site-wide rules that apply in BOTH light and dark mode (still confined to * this overlay file — delete dark.css to revert). * -------------------------------------------------------------------------- */ /* Pill buttons everywhere — full-round corners and a comfier horizontal * padding so the WMG-palette pills have room to breathe. The !important * on padding is needed because Bootstrap's `.btn-sm` redefines * `--bs-btn-padding-x: 0.5rem` and the resulting var-based padding has * the same selector specificity as ours; !important guarantees the win. */ .btn, .btn.btn-sm, .btn.btn-lg, a.btn, button.btn { border-radius: 9999px !important; padding: 0.25rem 0.9rem !important; } /* WMG button palette — applied site-wide so the light theme matches the * dark theme's brand-family buttons (hot pink for success/danger, electric * yellow for warning, WMG cyan for info). The `body.dark-mode` block later * in this file re-declares the same colors where the dark surface needs * identical treatment; it wins by specificity in dark mode. * * `!important` is REQUIRED on every property here: this file is loaded by * a module library (mock_rock_tweaks/dark_theme), so Drupal orders it * BEFORE all theme CSS regardless of the library's weight. That means * bootstrap5-subtheme's compiled `style.css` (which re-declares the same * `--bs-btn-*` custom properties on the same selector) loads AFTER us and * would otherwise win by cascade order. `!important` lets the palette * survive the load-order flip. The existing `body.dark-mode` block below * uses the same escape hatch throughout. * * `.btn-primary` is intentionally omitted because Bootstrap's default * (#0d6efd + white text) already matches WMG blue. */ .btn-success { --bs-btn-bg: #ff4ac3 !important; --bs-btn-border-color: #ff4ac3 !important; --bs-btn-color: #0f0f0f !important; --bs-btn-hover-bg: #ff66cc !important; --bs-btn-hover-border-color: #ff66cc !important; --bs-btn-hover-color: #0f0f0f !important; --bs-btn-active-bg: #ff66cc !important; --bs-btn-active-border-color: #ff66cc !important; --bs-btn-active-color: #0f0f0f !important; --bs-btn-disabled-bg: #ff4ac3 !important; --bs-btn-disabled-border-color: #ff4ac3 !important; --bs-btn-disabled-color: #0f0f0f !important; } .btn-warning { --bs-btn-bg: #d4ff00 !important; --bs-btn-border-color: #d4ff00 !important; --bs-btn-color: #0f0f0f !important; --bs-btn-hover-bg: #e2ff33 !important; --bs-btn-hover-border-color: #e2ff33 !important; --bs-btn-hover-color: #0f0f0f !important; --bs-btn-active-bg: #e2ff33 !important; --bs-btn-active-border-color: #e2ff33 !important; --bs-btn-active-color: #0f0f0f !important; --bs-btn-disabled-bg: #d4ff00 !important; --bs-btn-disabled-border-color: #d4ff00 !important; --bs-btn-disabled-color: #0f0f0f !important; } /* WMG hot pink for destructive buttons — replaces Bootstrap's `#dc3545` red * so "Clear Video Cache" and similar destructive actions read on-brand. */ .btn-danger { --bs-btn-bg: #ff4ac3 !important; --bs-btn-border-color: #ff4ac3 !important; --bs-btn-color: #0f0f0f !important; --bs-btn-hover-bg: #ff66cc !important; --bs-btn-hover-border-color: #ff66cc !important; --bs-btn-hover-color: #0f0f0f !important; --bs-btn-active-bg: #ff66cc !important; --bs-btn-active-border-color: #ff66cc !important; --bs-btn-active-color: #0f0f0f !important; --bs-btn-disabled-bg: #ff4ac3 !important; --bs-btn-disabled-border-color: #ff4ac3 !important; --bs-btn-disabled-color: #0f0f0f !important; } .btn-info { --bs-btn-bg: #00a3d9 !important; --bs-btn-border-color: #00a3d9 !important; --bs-btn-color: #0f0f0f !important; --bs-btn-hover-bg: #00bff0 !important; --bs-btn-hover-border-color: #00bff0 !important; --bs-btn-hover-color: #0f0f0f !important; --bs-btn-active-bg: #00bff0 !important; --bs-btn-active-border-color: #00bff0 !important; --bs-btn-active-color: #0f0f0f !important; --bs-btn-disabled-bg: #00a3d9 !important; --bs-btn-disabled-border-color: #00a3d9 !important; --bs-btn-disabled-color: #0f0f0f !important; } /* Lyric alignment status pill — electric yellow with black text in BOTH * light and dark mode. The pill's markup is * `Not Aligned` * with JS flipping `bg-secondary` -> `bg-success` when alignment completes. * Bootstrap's default `.bg-success` is kelly green (#198754), but WMG's * palette has no green — success is electric yellow #d4ff00. Override both * states + the base class so the pill reads consistently WMG regardless of * which class is currently on. !important is required for the same * load-order reason called out on the button palette above. */ .lyric-alignment-status, .lyric-alignment-status.badge, .lyric-alignment-status.bg-secondary, .lyric-alignment-status.bg-success { background-color: #d4ff00 !important; color: #0f0f0f !important; border-radius: 9999px !important; padding: 0.35em 0.9em !important; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.75rem; line-height: 1; display: inline-flex; align-items: center; } /* Homepage breathing room between bright-blue header and "Create Content". */ body.path-frontpage main, body.path-frontpage .main-content, body.path-frontpage > main, body.front main, body.front .main-content { padding-top: 2.5rem !important; } /* ---------------------------------------------------------------------------- * Bootstrap 5 CSS variable overrides (covers ~70% of components for free). * -------------------------------------------------------------------------- */ body.dark-mode { --bs-body-bg: #0f0f0f; --bs-body-color: #e1e1e1; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: #aaaaaa; --bs-secondary-color-rgb: 170, 170, 170; --bs-tertiary-color: #888888; --bs-secondary-bg: #181818; --bs-secondary-bg-rgb: 24, 24, 24; --bs-tertiary-bg: #1c2858; --bs-primary: #0d6efd; --bs-primary-rgb: 13, 110, 253; --bs-secondary: #6c757d; --bs-secondary-rgb: 108, 117, 125; --bs-success: #ff4ac3; --bs-success-rgb: 255, 74, 195; --bs-info: #00c8ff; --bs-info-rgb: 0, 200, 255; --bs-warning: #d4ff00; --bs-warning-rgb: 212, 255, 0; --bs-danger: #f44336; --bs-danger-rgb: 244, 67, 54; --bs-light: #181818; --bs-light-rgb: 24, 24, 24; --bs-dark: #0f0f0f; --bs-dark-rgb: 15, 15, 15; --bs-border-color: #1c4dd9; --bs-border-color-translucent: rgba(28, 77, 217, 0.4); --bs-link-color: #00c8ff; --bs-link-color-rgb: 0, 200, 255; --bs-link-hover-color: #2dd4ff; --bs-link-hover-color-rgb: 45, 212, 255; } /* ---------------------------------------------------------------------------- * Page background — mock.css and core have hard-coded body bg, so !important. * -------------------------------------------------------------------------- */ body.dark-mode, html.dark-mode { background-color: #0f0f0f !important; color: #e1e1e1; } body.dark-mode main, body.dark-mode .main-content, body.dark-mode .layout-content, body.dark-mode .layout-container { background-color: transparent !important; color: #e1e1e1; } /* Catch-all: any Bootstrap or Drupal helper that explicitly paints white * (homepage Recents pager strip, a few admin filter wrappers, etc.). */ body.dark-mode .bg-white, body.dark-mode .bg-light, body.dark-mode .bg-body, body.dark-mode .bg-body-tertiary, body.dark-mode .bg-body-secondary, body.dark-mode [class*="bg-white"], body.dark-mode .block.bg-white, body.dark-mode .block .bg-white, body.dark-mode .views-element-container, body.dark-mode .block-views, body.dark-mode .views-element-container > .view { background-color: transparent !important; color: #e1e1e1 !important; } /* Element-level inline style="background:#fff" leaks (rare, but happens * in some legacy block content). */ body.dark-mode [style*="background:#fff"], body.dark-mode [style*="background-color:#fff"], body.dark-mode [style*="background:#ffffff"], body.dark-mode [style*="background-color:#ffffff"], body.dark-mode [style*="background: #fff"], body.dark-mode [style*="background-color: #fff"], body.dark-mode [style*="background: white"], body.dark-mode [style*="background-color: white"] { background-color: transparent !important; background: transparent !important; } /* ---------------------------------------------------------------------------- * Headings + general text colour * -------------------------------------------------------------------------- */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #ffffff; } body.dark-mode small, body.dark-mode .small, body.dark-mode .text-muted { color: #aaaaaa !important; } body.dark-mode hr { border-color: #1c4dd9; } body.dark-mode a { color: #00c8ff; } body.dark-mode a:hover { color: #2dd4ff; } /* Override mock.css `nav a { color: white }` already-fine, but ensure brand wordmark stays white */ body.dark-mode .navbar a, body.dark-mode .navbar .navbar-brand, body.dark-mode .navbar a.site-title { color: #ffffff !important; } body.dark-mode .navbar a:hover { color: #d4ff00 !important; } /* ---------------------------------------------------------------------------- * Header / top navigation strip — neutral dark grey ribbon (logo carries the * brand on its own; we move WMG blue down to the footer instead). * -------------------------------------------------------------------------- */ body.dark-mode header, body.dark-mode .navbar, body.dark-mode #navbar-main { background-color: #1f1f1f !important; color: #ffffff; border-bottom: 1px solid #2a2a2a; } /* ---------------------------------------------------------------------------- * Cards (homepage tile grid + node cards) * -------------------------------------------------------------------------- */ body.dark-mode .card { background-color: #0d143a !important; border: 0 !important; border-radius: 3px; color: #e1e1e1; } body.dark-mode .card-title, body.dark-mode .card .card-title { color: #ffffff !important; } body.dark-mode .card-text, body.dark-mode .card-body p { color: #cccccc !important; } body.dark-mode .card-img-top { background-color: #181818; border-radius: 3px 3px 0 0; } /* Right-rail "Watch The Tutorial" video thumbnail. */ body.dark-mode .video-thumb, body.dark-mode img.video-thumb { border-radius: 3px; } body.dark-mode .card .btn-outline-primary { background-color: transparent !important; border: 1px solid #00c8ff !important; color: #00c8ff !important; } body.dark-mode .card .btn-outline-primary:hover { background-color: #00c8ff !important; color: #0f0f0f !important; } /* ---------------------------------------------------------------------------- * Buttons (dark-mode palette) * -------------------------------------------------------------------------- */ body.dark-mode .btn-primary { background-color: #0d6efd !important; border-color: #0d6efd !important; color: #ffffff !important; } body.dark-mode .btn-primary:hover, body.dark-mode .btn-primary:focus { background-color: #1e7bff !important; border-color: #1e7bff !important; } body.dark-mode .btn-secondary { background-color: #181818 !important; border-color: #2a2a2a !important; color: #e1e1e1 !important; } body.dark-mode .btn-secondary:hover { background-color: #2a2a2a !important; color: #ffffff !important; } body.dark-mode .btn-success { background-color: #ff4ac3 !important; border-color: #ff4ac3 !important; color: #0f0f0f !important; } body.dark-mode .btn-success:hover { background-color: #ff66cc !important; border-color: #ff66cc !important; color: #0f0f0f !important; } body.dark-mode .btn-warning { background-color: #d4ff00 !important; border-color: #d4ff00 !important; color: #0f0f0f !important; } body.dark-mode .btn-warning:hover { background-color: #e2ff33 !important; border-color: #e2ff33 !important; color: #0f0f0f !important; } /* WMG hot pink for destructive buttons (per design — "Clear Video Cache" etc.) */ body.dark-mode .btn-danger { background-color: #ff4ac3 !important; border-color: #ff4ac3 !important; color: #0f0f0f !important; } body.dark-mode .btn-danger:hover { background-color: #ff66cc !important; border-color: #ff66cc !important; color: #0f0f0f !important; } /* WMG corporate cyan/blue — slightly deeper than neon cyan so the action * bar reads as a single brand family with `.btn-primary`. */ body.dark-mode .btn-info { background-color: #00a3d9 !important; border-color: #00a3d9 !important; color: #0f0f0f !important; } body.dark-mode .btn-info:hover { background-color: #00bff0 !important; border-color: #00bff0 !important; color: #0f0f0f !important; } body.dark-mode .btn-outline-dark { background-color: transparent !important; border: 1px solid #00c8ff !important; color: #00c8ff !important; } body.dark-mode .btn-outline-dark:hover { background-color: #00c8ff !important; color: #0f0f0f !important; } body.dark-mode .btn-outline-primary { background-color: transparent !important; border: 1px solid #0d6efd !important; color: #0d6efd !important; } body.dark-mode .btn-outline-primary:hover { background-color: #0d6efd !important; color: #ffffff !important; } body.dark-mode .btn.disabled, body.dark-mode .btn:disabled { opacity: 0.4; } /* ---------------------------------------------------------------------------- * Visualizer / generator action bars * mock.css hard-codes #212529 backgrounds on these wrappers — override. * -------------------------------------------------------------------------- */ body.dark-mode #product-shot-buttons, body.dark-mode #vinyl-visualizer-buttons, body.dark-mode #compact-disc-buttons, body.dark-mode #animated-cover-art-buttons, body.dark-mode #full-album-video-buttons, body.dark-mode #looped-video-visualizer-buttons, body.dark-mode #spectrum-visualizer-buttons, body.dark-mode #cover-art-outcrop-buttons { background-color: #0d143a !important; border: 1px solid #1c4dd9 !important; color: #e1e1e1 !important; border-radius: 12px !important; /* mock.css keeps the inner header bar (`p.small`) at border-radius 5px 5px 0 0, which used to match the outer 5px radius but breaks now that we bumped the outer to 12px — the squarish corners of the inner bar protruded past the curve. Clip everything to the parent's rounded shape so inner radii don't have to be kept in sync. */ overflow: hidden; } body.dark-mode .ai-tools, body.dark-mode .ai-tools-active, body.dark-mode .start-over { color: #ffffff !important; } /* Lyric alignment status pill — handled in the site-wide section at the top * of this file (electric yellow + black text, both modes, both states). */ /* Catch any inline style="background-color:#212529" wrappers we haven't IDed. */ body.dark-mode [style*="background-color:#212529"], body.dark-mode [style*="background:#212529"], body.dark-mode [style*="background-color: #212529"], body.dark-mode [style*="background: #212529"] { background-color: #0d143a !important; } /* ---------------------------------------------------------------------------- * Tables (track lists, video lists, etc.) * -------------------------------------------------------------------------- */ body.dark-mode .table { --bs-table-bg: #181818; --bs-table-color: #e1e1e1; --bs-table-border-color: #2a2a2a; --bs-table-striped-bg: #1c2858; --bs-table-striped-color: #e1e1e1; --bs-table-active-bg: #1c4dd9; --bs-table-active-color: #ffffff; --bs-table-hover-bg: #1c2858; --bs-table-hover-color: #ffffff; color: #e1e1e1; } body.dark-mode .table > :not(caption) > * > * { background-color: var(--bs-table-bg); color: var(--bs-table-color); border-color: var(--bs-table-border-color); } /* ---------------------------------------------------------------------------- * Forms — inputs, selects, textareas * -------------------------------------------------------------------------- */ body.dark-mode .form-control, body.dark-mode .form-select, body.dark-mode textarea, body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="number"], body.dark-mode input[type="url"], body.dark-mode input[type="search"], body.dark-mode input[type="password"], body.dark-mode input[type="tel"], body.dark-mode input[type="date"], body.dark-mode input[type="time"], body.dark-mode input[type="datetime-local"], body.dark-mode input[type="month"], body.dark-mode input[type="week"] { background-color: #181818 !important; border: 1px solid #1c4dd9 !important; color: #e1e1e1 !important; } /* Date/time pickers (the YouTube Delivery Date + Time widgets) render as native . The rule above paints their box, but the editable segments (MM/DD/YYYY, HH:MM:SS, AM/PM) are drawn by WebKit pseudo-elements that keep their default near-black colour — invisible on the #181818 field. Force the whole datetime edit region to light text and invert the calendar/clock picker glyph so it reads on the dark field. */ body.dark-mode input[type="date"]::-webkit-datetime-edit, body.dark-mode input[type="time"]::-webkit-datetime-edit, body.dark-mode input[type="datetime-local"]::-webkit-datetime-edit, body.dark-mode input[type="month"]::-webkit-datetime-edit, body.dark-mode input[type="week"]::-webkit-datetime-edit, body.dark-mode input[type="date"]::-webkit-datetime-edit-fields-wrapper, body.dark-mode input[type="time"]::-webkit-datetime-edit-fields-wrapper, body.dark-mode input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper, body.dark-mode input[type="date"]::-webkit-datetime-edit-text, body.dark-mode input[type="time"]::-webkit-datetime-edit-text, body.dark-mode input[type="datetime-local"]::-webkit-datetime-edit-text, body.dark-mode input[type="date"]::-webkit-datetime-edit-month-field, body.dark-mode input[type="date"]::-webkit-datetime-edit-day-field, body.dark-mode input[type="date"]::-webkit-datetime-edit-year-field, body.dark-mode input[type="datetime-local"]::-webkit-datetime-edit-month-field, body.dark-mode input[type="datetime-local"]::-webkit-datetime-edit-day-field, body.dark-mode input[type="datetime-local"]::-webkit-datetime-edit-year-field, body.dark-mode input[type="time"]::-webkit-datetime-edit-hour-field, body.dark-mode input[type="time"]::-webkit-datetime-edit-minute-field, body.dark-mode input[type="time"]::-webkit-datetime-edit-second-field, body.dark-mode input[type="time"]::-webkit-datetime-edit-ampm-field, body.dark-mode input[type="datetime-local"]::-webkit-datetime-edit-hour-field, body.dark-mode input[type="datetime-local"]::-webkit-datetime-edit-minute-field, body.dark-mode input[type="datetime-local"]::-webkit-datetime-edit-ampm-field { color: #e1e1e1 !important; } /* Highlighted (focused) segment within a date/time field. */ body.dark-mode input[type="date"]::-webkit-datetime-edit-month-field:focus, body.dark-mode input[type="date"]::-webkit-datetime-edit-day-field:focus, body.dark-mode input[type="date"]::-webkit-datetime-edit-year-field:focus, body.dark-mode input[type="time"]::-webkit-datetime-edit-hour-field:focus, body.dark-mode input[type="time"]::-webkit-datetime-edit-minute-field:focus, body.dark-mode input[type="time"]::-webkit-datetime-edit-second-field:focus, body.dark-mode input[type="time"]::-webkit-datetime-edit-ampm-field:focus { background-color: #0d6efd !important; color: #ffffff !important; } /* Calendar / clock picker indicator glyph — invert the dark default so it's visible against the dark field. */ body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="month"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="week"]::-webkit-calendar-picker-indicator { filter: invert(0.9) brightness(1.2); cursor: pointer; } /* Firefox renders the placeholder/value text via the standard color property already covered above, so no extra rule is needed there. */ body.dark-mode .form-control:focus, body.dark-mode .form-select:focus, body.dark-mode textarea:focus, body.dark-mode input:focus { background-color: #181818 !important; border-color: #00c8ff !important; color: #ffffff !important; box-shadow: 0 0 0 0.2rem rgba(0, 200, 255, 0.25) !important; } body.dark-mode .form-control::placeholder, body.dark-mode textarea::placeholder, body.dark-mode input::placeholder { color: #777777 !important; } body.dark-mode label, body.dark-mode .form-label { color: #e1e1e1; } body.dark-mode input[type="color"] { background-color: #181818 !important; border: 1px solid #1c4dd9 !important; } body.dark-mode input[type="range"] { accent-color: #00c8ff; } body.dark-mode .form-check-input { background-color: #181818; border-color: #1c4dd9; } body.dark-mode .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; } /* ---------------------------------------------------------------------------- * Drupal admin: multi-value field tables + details wrappers * * Drupal renders any field with cardinality > 1 (and Media Library's * "Use existing media" picker) as a `` * with draggable `` rows. Bootstrap 5 + Claro give these tables a flat * white `` background that bleeds out into the dark editor surface. * Same goes for `
` form wrappers — they default to white in Claro. * * Force everything inside a node-edit / admin form details element to be * transparent so the dark surface (#0d143a navy) shows through, then * tint just the column-header strip and add a subtle border so rows still * read as separate items. * -------------------------------------------------------------------------- */ body.dark-mode .field-multiple-table, body.dark-mode .field-multiple-table > thead, body.dark-mode .field-multiple-table > tbody, body.dark-mode .field-multiple-table > tbody > tr, body.dark-mode .field-multiple-table > thead > tr, body.dark-mode .field-multiple-table td, body.dark-mode .field-multiple-table tr.draggable, body.dark-mode .field-multiple-table tr.draggable td, body.dark-mode .field-multiple-table .field-multiple-drag, body.dark-mode .field-multiple-table .delta-order, body.dark-mode .field-multiple-table .tabledrag-cell, body.dark-mode .field-multiple-table .tabledrag-cell-content, body.dark-mode .form-wrapper.tabledrag-changed-warning { background-color: transparent !important; color: #e1e1e1 !important; border-color: rgba(28, 77, 217, 0.35) !important; box-shadow: none !important; } /* The column-header strip ("ISRC", "Youtube Channel", "Use existing media"). Drupal puts this in
. */ body.dark-mode .field-multiple-table > thead > tr > th, body.dark-mode .field-multiple-table > thead > tr > th.field-label { background-color: #161b3a !important; color: #ffffff !important; border-color: #1c4dd9 !important; border-bottom: 1px solid #1c4dd9 !important; } /* Draggable row borders so rows still feel separated on the dark surface. */ body.dark-mode .field-multiple-table > tbody > tr { border-bottom: 1px solid rgba(28, 77, 217, 0.25) !important; } body.dark-mode .field-multiple-table > tbody > tr:last-child { border-bottom: 0 !important; } /* Drag handle icon is a CSS background-image inside .tabledrag-handle. Default is dark on white — invert so it reads on the dark surface. */ body.dark-mode .tabledrag-handle .handle { filter: invert(0.85) brightness(1.1); } /* `
` wrappers Drupal uses for fieldsets, "Create new media", and most node-edit grouping. Claro paints their inner wrapper white. */ body.dark-mode details.form-wrapper, body.dark-mode .form-wrapper.fieldset, body.dark-mode fieldset.fieldset, body.dark-mode details.form-wrapper > summary, body.dark-mode details.form-wrapper > .details-wrapper, body.dark-mode .fieldset-wrapper, body.dark-mode .field--widget-media-library-widget, body.dark-mode .media-library-widget, body.dark-mode .media-library-add-form-context { background-color: transparent !important; color: #e1e1e1 !important; border-color: #1c4dd9 !important; } body.dark-mode details.form-wrapper > summary { color: #ffffff !important; } /* Drupal's Claro paints `.form-item` rows with a white wrapping div on admin forms. Transparent so the dark page shows through. */ body.dark-mode .node-form .form-item, body.dark-mode form[id^="node-"] .form-item, body.dark-mode form[id^="node-"] .form-wrapper, body.dark-mode form[id^="node-"] .form-element, body.dark-mode form[id^="node-"] .form-element--type-textfield, body.dark-mode form[id^="node-"] .form-element--type-textarea { background-color: transparent !important; } /* "Add another item" + "Remove" buttons sit on a white sliver between the table and the next field. Match the dark surface. */ body.dark-mode .field-add-more-submit, body.dark-mode input.field-add-more-submit { background-color: #181c2e !important; color: #e1e1e1 !important; border-color: #1c4dd9 !important; } /* ---------------------------------------------------------------------------- * Modals * -------------------------------------------------------------------------- */ body.dark-mode .modal-content { background-color: #181818; border: 1px solid #1c4dd9; color: #e1e1e1; } body.dark-mode .modal-header { background-color: #0d143a; border-bottom: 1px solid #1c4dd9; } body.dark-mode .modal-title { color: #ffffff; } body.dark-mode .modal-footer { background-color: #0d143a; border-top: 1px solid #1c4dd9; } body.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ---------------------------------------------------------------------------- * Dropdowns * -------------------------------------------------------------------------- */ body.dark-mode .dropdown-menu { background-color: #181818; border: 1px solid #1c4dd9; } body.dark-mode .dropdown-item { color: #e1e1e1; } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: #1c2858; color: #ffffff; } body.dark-mode .dropdown-divider { border-color: #1c4dd9; } /* ---------------------------------------------------------------------------- * Header debug metadata (node id / job id / prompt adherence / uuid) * mock.css paints these `#bdbdbd` for light-mode legibility, but in dark mode * they're really there for debugging — drop them to a near-invisible #333 so * they don't visually compete with the artist name + track title. * -------------------------------------------------------------------------- */ body.dark-mode .header-info-area .small.node-id, body.dark-mode .header-info-area .small.job-id, body.dark-mode .header-info-area .small.prompt-adherence, body.dark-mode .header-info-area .small.node-uuid, body.dark-mode .small.node-id, body.dark-mode .small.job-id, body.dark-mode .small.prompt-adherence, body.dark-mode .small.node-uuid { color: #333 !important; } /* ---------------------------------------------------------------------------- * Progress bars + spinners * -------------------------------------------------------------------------- */ body.dark-mode .progress { background-color: #181818 !important; } body.dark-mode .progress-bar { background-color: #00c8ff !important; color: #0f0f0f; } body.dark-mode .time-remaining { color: #e1e1e1; } /* ---------------------------------------------------------------------------- * Code blocks * -------------------------------------------------------------------------- */ body.dark-mode pre, body.dark-mode code { background-color: #181818 !important; color: #d4ff00 !important; } /* ---------------------------------------------------------------------------- * Drupal admin toolbar (rendered by core toolbar module, theme-agnostic) * -------------------------------------------------------------------------- */ body.dark-mode #toolbar-bar, body.dark-mode .toolbar-bar, body.dark-mode .toolbar-tray, body.dark-mode .toolbar-tray-horizontal { background-color: #000000 !important; } body.dark-mode .toolbar-bar .toolbar-tab > .toolbar-item, body.dark-mode .toolbar .toolbar-tab > .toolbar-item { color: #e1e1e1 !important; background-color: transparent !important; } body.dark-mode .toolbar-bar .toolbar-tab > .toolbar-item:hover { background-color: #1c4dd9 !important; color: #ffffff !important; } body.dark-mode .toolbar-bar .toolbar-tab > .toolbar-item.is-active { background-color: #0d6efd !important; color: #ffffff !important; } /* ---------------------------------------------------------------------------- * Dark-mode toggle button (rendered by hook_toolbar in mock_rock_tweaks) * Visible in BOTH light and dark mode. * -------------------------------------------------------------------------- */ #dark-mode-toggle { background-color: transparent !important; border: none !important; color: inherit !important; cursor: pointer; padding: 0.6rem 1rem; display: inline-flex !important; align-items: center; gap: 0.4rem; text-decoration: none !important; line-height: 1; } #dark-mode-toggle:hover { background-color: rgba(28, 77, 217, 0.6) !important; color: #ffffff !important; } #dark-mode-toggle svg { width: 18px; height: 18px; vertical-align: middle; } #dark-mode-toggle .icon-sun { display: none; } #dark-mode-toggle .icon-moon { display: inline-block; } body.dark-mode #dark-mode-toggle .icon-sun { display: inline-block; } body.dark-mode #dark-mode-toggle .icon-moon { display: none; } /* ---------------------------------------------------------------------------- * Drupal admin pages — Claro theme polish * -------------------------------------------------------------------------- */ body.dark-mode .layout-container, body.dark-mode .region-content, body.dark-mode .block, body.dark-mode #block-claro-content, body.dark-mode #block-claro-page-title { background-color: transparent !important; color: #e1e1e1 !important; } body.dark-mode .page-title, body.dark-mode h1.page-title { color: #ffffff !important; } body.dark-mode .messages-list, body.dark-mode .messages { background-color: #0d143a !important; color: #e1e1e1 !important; border-color: #1c4dd9 !important; } body.dark-mode .messages--status { border-left-color: #ff4ac3 !important; } body.dark-mode .messages--warning { background-color: #2a2400 !important; color: #d4ff00 !important; border-left-color: #d4ff00 !important; } body.dark-mode .messages--error { background-color: #2a0a08 !important; color: #ff7b70 !important; border-left-color: #f44336 !important; } /* Admin tabs (View / Edit / etc.) — local task tabs that show up on every * node page and on the front page when logged in. The Bootstrap subtheme * styles these as `nav.tabs > ul > li > a`; Claro uses `.tabs__tab > .tabs__link`. * No border-bottom — that was reading as an extra HR above the page title. */ body.dark-mode nav.tabs, body.dark-mode .tabs--primary, body.dark-mode .tabs--secondary, body.dark-mode ul.tabs, body.dark-mode .tabs__list { background-color: transparent !important; border: none !important; } body.dark-mode .tabs li, body.dark-mode .tabs__tab, body.dark-mode .tabs--primary li { background-color: transparent !important; } body.dark-mode nav.tabs a, body.dark-mode .tabs a, body.dark-mode .tabs__link, body.dark-mode .tabs--primary a, body.dark-mode ul.tabs li a { background-color: #181818 !important; color: #e1e1e1 !important; border-color: #1c4dd9 !important; } body.dark-mode nav.tabs a:hover, body.dark-mode .tabs a:hover, body.dark-mode .tabs__link:hover { background-color: #1c2858 !important; color: #ffffff !important; } body.dark-mode .tabs__tab.is-active a, body.dark-mode .tabs a.is-active, body.dark-mode .tabs__link.is-active, body.dark-mode .tabs li.active a, body.dark-mode nav.tabs li.active a { background-color: #0d6efd !important; color: #ffffff !important; border-color: #0d6efd !important; } /* ---------------------------------------------------------------------------- * Drupal Views — exposed filter forms (the white "Title / Content type / * Published status / Filter" row on /admin/content), Views table styling * (admin Content listing + the Recents block on the homepage). * -------------------------------------------------------------------------- */ body.dark-mode .views-exposed-form, body.dark-mode form.views-exposed-form, body.dark-mode .view-filters, body.dark-mode .view-filters > form, body.dark-mode .form--inline { background-color: #0d143a !important; border: 1px solid #1c4dd9 !important; border-radius: 8px !important; padding: 1rem !important; color: #e1e1e1 !important; } body.dark-mode .views-exposed-form .form-item label, body.dark-mode .views-exposed-form label { color: #e1e1e1 !important; } /* ---------------------------------------------------------------------------- * Zebra-striped tables (Views + plain
…
) — flat alternating rows. * No row-corners or row-spacing; just two-tone alternation for legibility. * -------------------------------------------------------------------------- */ body.dark-mode .views-table, body.dark-mode table.views-table, body.dark-mode .view-content table, body.dark-mode .view-content .views-table, body.dark-mode table.table, body.dark-mode .table-responsive table { background-color: transparent !important; color: #e1e1e1 !important; border: none !important; border-collapse: collapse !important; } body.dark-mode .views-table thead, body.dark-mode .views-table thead tr, body.dark-mode .views-table thead th, body.dark-mode .views-table th, body.dark-mode table.table thead, body.dark-mode table.table thead th { background-color: transparent !important; color: #ffffff !important; border: none !important; border-bottom: 1px solid #1c4dd9 !important; font-weight: 500; } body.dark-mode .views-table tbody tr, body.dark-mode .view-content table tbody tr, body.dark-mode table.table tbody tr { background-color: #0d0d0d !important; color: #e1e1e1 !important; } body.dark-mode .views-table tbody tr td, body.dark-mode .views-table tbody td, body.dark-mode table.table tbody tr td { background-color: inherit !important; color: #e1e1e1 !important; border: none !important; } body.dark-mode .views-table tbody tr:nth-child(odd), body.dark-mode .views-table tbody tr.odd, body.dark-mode .view-content table tbody tr:nth-child(odd), body.dark-mode table.table tbody tr:nth-child(odd) { background-color: #1f1f1f !important; } body.dark-mode .views-table tbody tr:hover, body.dark-mode .views-table tbody tr:hover td, body.dark-mode table.table tbody tr:hover, body.dark-mode table.table tbody tr:hover td { background-color: #1c2858 !important; color: #ffffff !important; } body.dark-mode .views-table a, body.dark-mode .view-content table a, body.dark-mode table.table a { color: #00c8ff !important; } /* Unformatted-list Views (some blocks render
). */ body.dark-mode .view-content .views-row { background-color: #0d0d0d; padding: 0.6rem 1rem; color: #e1e1e1; border-bottom: 1px solid #2a2a2a; } body.dark-mode .view-content .views-row:nth-child(odd) { background-color: #1f1f1f; } body.dark-mode .view-content .views-row:hover { background-color: #1c2858; } body.dark-mode .view-content .views-row a { color: #00c8ff; } /* ---------------------------------------------------------------------------- * Views pager + Bootstrap pagination + every wrapper that surrounds them * (this is the white strip below the Recents block on the homepage). * -------------------------------------------------------------------------- */ body.dark-mode .view, body.dark-mode .view > div, body.dark-mode .view-content, body.dark-mode .view-empty, body.dark-mode .view-header, body.dark-mode .view-footer, body.dark-mode .views-element-container, body.dark-mode .views-element-container > .view, body.dark-mode .views-display-link { background-color: transparent !important; border: none !important; } body.dark-mode .pager, body.dark-mode nav.pager, body.dark-mode nav[role="navigation"].pager, body.dark-mode .pager__items, body.dark-mode .pager-wrapper, body.dark-mode .item-list--pager, body.dark-mode .item-list, body.dark-mode .pagination, body.dark-mode ul.pagination, body.dark-mode .pagination .page-item { background-color: transparent !important; color: #aaaaaa !important; border: none !important; box-shadow: none !important; } body.dark-mode .pager a, body.dark-mode .pager__link, body.dark-mode .pager__item a, body.dark-mode .pager li a, body.dark-mode .pagination .page-link { color: #00c8ff !important; background-color: transparent !important; border-color: #1c4dd9 !important; } body.dark-mode .pager .is-active, body.dark-mode .pager__item--current, body.dark-mode .pager__item.is-active, body.dark-mode .pager li.is-active a, body.dark-mode .pager li.pager__item--current a, body.dark-mode .pagination .page-item.active .page-link { color: #d4ff00 !important; background-color: transparent !important; font-weight: 600; border-color: #d4ff00 !important; } /* Drupal table.system-status-report etc. + Operations dropdown */ body.dark-mode .responsive-enabled, body.dark-mode table thead { background-color: #0d143a !important; } body.dark-mode table.sticky-header, body.dark-mode .tableresponsive-toggle-columns { background-color: #0d143a !important; color: #e1e1e1 !important; } body.dark-mode .dropbutton, body.dark-mode .dropbutton-wrapper .dropbutton { background-color: #181818 !important; border-color: #1c4dd9 !important; } body.dark-mode .dropbutton .dropbutton-action a, body.dark-mode .dropbutton a { color: #e1e1e1 !important; background-color: #181818 !important; } body.dark-mode .dropbutton .dropbutton-action a:hover { background-color: #1c2858 !important; color: #ffffff !important; } /* Action button at top of admin pages (e.g. "+ Add content"). */ body.dark-mode .action-link, body.dark-mode a.button-action { background-color: #0d6efd !important; color: #ffffff !important; border-radius: 9999px !important; border: none !important; } body.dark-mode .action-link:hover { background-color: #1e7bff !important; } /* ---------------------------------------------------------------------------- * Homepage spacing — push "Create Content" away from the bright blue header * so it has room to breathe. Targets the front page only via .path-frontpage. * -------------------------------------------------------------------------- */ /* Homepage Recents block panel (right rail) styling */ body.dark-mode.path-frontpage aside .views-table, body.dark-mode.path-frontpage .region-sidebar-second .views-table, body.dark-mode.path-frontpage [class*="recents"] table { border-radius: 8px; overflow: hidden; } /* Claro form elements */ body.dark-mode .form-item__description, body.dark-mode .description { color: #aaaaaa !important; } body.dark-mode details, body.dark-mode .seven-details, body.dark-mode .claro-details, body.dark-mode .form-wrapper { background-color: #0d143a !important; border: 1px solid #1c4dd9 !important; color: #e1e1e1 !important; } body.dark-mode summary, body.dark-mode .claro-details__summary, body.dark-mode .seven-details__summary { background-color: #1c2858 !important; color: #ffffff !important; } /* Node edit / admin tables */ body.dark-mode .node-form .field--name-body .form-textarea, body.dark-mode .ck-editor__main { background-color: #181818 !important; color: #e1e1e1 !important; } body.dark-mode .ck.ck-toolbar, body.dark-mode .ck.ck-content { background-color: #181818 !important; color: #e1e1e1 !important; border-color: #1c4dd9 !important; } /* Vertical tabs (e.g. node edit "Revision information" sidebar) */ body.dark-mode .vertical-tabs, body.dark-mode .vertical-tabs__menu, body.dark-mode .vertical-tabs__panes { background-color: #0d143a !important; border-color: #1c4dd9 !important; } body.dark-mode .vertical-tabs__menu-item { background-color: #181818 !important; border-color: #1c4dd9 !important; } body.dark-mode .vertical-tabs__menu-item.is-selected { background-color: #0d6efd !important; color: #ffffff !important; } body.dark-mode .vertical-tabs__menu-item-title { color: #e1e1e1 !important; } body.dark-mode .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title { color: #ffffff !important; } /* ---------------------------------------------------------------------------- * Footer — WMG blue (relocated from the header). * -------------------------------------------------------------------------- */ body.dark-mode footer, body.dark-mode .footer { background-color: #0d6efd !important; color: #ffffff !important; border-top: 1px solid #0026e0; } body.dark-mode footer a, body.dark-mode .footer a { color: #ffffff !important; text-decoration: underline; } body.dark-mode footer a:hover, body.dark-mode .footer a:hover { color: #d4ff00 !important; } /* ---------------------------------------------------------------------------- * Header search block — kill the box / outline around the input + Search * button widget so it floats cleanly on the dark grey ribbon. * -------------------------------------------------------------------------- */ body.dark-mode .search-block-form, body.dark-mode #block-mockrock-search-form, body.dark-mode #search-block-form, body.dark-mode .block-search, body.dark-mode .region-search, body.dark-mode .navbar .search-block-form, body.dark-mode .navbar form[role="search"] { background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; } body.dark-mode #search-block-form input[type="submit"], body.dark-mode .search-block-form input[type="submit"], body.dark-mode .search-block-form button, body.dark-mode .search-block-form .form-actions { border: none !important; outline: none !important; box-shadow: none !important; } body.dark-mode #search-block-form input[type="submit"]:focus, body.dark-mode .search-block-form input[type="submit"]:focus, body.dark-mode .search-block-form button:focus { box-shadow: none !important; outline: none !important; }