@import url("beml-tokens.css"); /* The palette and type live in assets/css/beml-tokens.css -- imported above, one place for the whole site. This file used to carry its own copy of 30 tokens. */ /* ===================================================================== BEML — "Console" theme ===================================================================== ONE stylesheet, loaded LAST (after vendors.bundle.css and styles.bundle.css) so it wins without touching either. The bundles are the third-party "Listen App" template; editing them means losing the changes the next time anyone regenerates them, and they are 62KB and 313KB of minified rules nobody here wrote. So this file overrides instead. WHY THIS EXISTS. The template ships a purple-on-grey dark mode. BEML is a licensing library: the product is a 14,210-cue catalogue and the screen people actually work in is a dense table. This restyles it for that -- near-black ground, one blue accent, monospace for every filename, BPM, key and duration so columns align and a stem set reads as a set. HOW TO SWITCH IT OFF. Set $beml_console_theme = false in admin/config.php. Every page's gates the link on that flag, so the site returns to the stock template in one edit and one reload. SPECIFICITY. The template's dark rules are ".theme-dark X". Ours are "body.theme-dark X", one class heavier, so they win without !important. !important appears only where the MARKUP carries an inline style -- the results table is printed with style="color:#FFFFFF" from PHP, and an inline style beats any stylesheet. Those spots are commented. PERFORMANCE. No gradients, no box-shadows, no blur, no transitions, no animations. That is a deliberate choice, not an omission: this catalogue is browsed by people auditioning hundreds of cues, and every one of those costs a repaint. The one exception is the loading spinner, which has to move to mean anything. ===================================================================== */ /* --------------------------------------------------------------------- 1. NO MOTION Kill the template's transitions and animations everywhere except the loader. Hover feedback still happens -- it just happens immediately. --------------------------------------------------------------------- */ body.theme-dark *, body.theme-dark *::before, body.theme-dark *::after { transition: none !important; animation: none !important; } body.theme-dark .eq-bar, body.theme-dark .loader .eq-bar { animation: eq 0.8s ease-in-out infinite alternate !important; } /* --------------------------------------------------------------------- 2. GROUND AND TYPE --------------------------------------------------------------------- */ body.theme-dark, body.theme-dark #wrapper, body.theme-dark #pageWrapper, body.theme-dark #appRoute { background: var(--beml-bg); color: var(--beml-ink); font-family: var(--beml-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6 { font-family: var(--beml-head); font-weight: 500; letter-spacing: -0.01em; color: var(--beml-ink); } body.theme-dark a, body.theme-dark .link { color: var(--beml-accent); text-decoration: none; } body.theme-dark a:hover, body.theme-dark .link:hover { color: var(--beml-accent-hi); } body.theme-dark .text-muted, body.theme-dark small, body.theme-dark .font-sm { color: var(--beml-ink-3) !important; /* template sets .text-muted inline-ish at high specificity */ } /* Anything that is a VALUE rather than prose goes mono: filenames, BPM, keys, durations, counts. This is the single change that makes a catalogue table readable -- proportional digits do not line up. */ body.theme-dark .beml-mono, body.theme-dark .custom-card--inline-desc p, body.theme-dark td[data-title="Length"], body.theme-dark td[data-title="Version"], body.theme-dark td[data-title="Genre"], body.theme-dark td[data-title="Price"], body.theme-dark .amplitude-current-time, body.theme-dark .amplitude-duration-time { font-family: var(--beml-mono); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- 3. LEFT SIDEBAR --------------------------------------------------------------------- */ body.theme-dark #sidebar, body.theme-dark #sidebar.sidebar-primary { background: var(--beml-rail); border-right: 1px solid var(--beml-line); } body.theme-dark #sidebar .sidebar-header { background: var(--beml-rail); border-bottom: 1px solid var(--beml-line); } body.theme-dark #sidebar .navbar-nav .nav-header { font-family: var(--beml-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--beml-ink-4); } body.theme-dark #sidebar .navbar-nav .nav-link { color: var(--beml-ink-2); border-radius: var(--beml-radius); font-size: 13px; } body.theme-dark #sidebar .navbar-nav .nav-link:hover, body.theme-dark #sidebar .navbar-nav .nav-link:focus { background: var(--beml-raise); color: var(--beml-ink); } body.theme-dark #sidebar .navbar-nav .nav-link.active { background: var(--beml-accent-bg); color: var(--beml-accent); } body.theme-dark #sidebar .toggle-menu span { background: var(--beml-ink-3); } /* --------------------------------------------------------------------- 4. TOP HEADER --------------------------------------------------------------------- */ body.theme-dark #header, body.theme-dark #header.bg-dark { background: var(--beml-panel) !important; /* .bg-dark is a Bootstrap utility, already !important-ish */ border-bottom: 1px solid var(--beml-line); } body.theme-dark #header .form-control, body.theme-dark #header input[type="search"], body.theme-dark #header input[type="text"] { font-family: var(--beml-mono); font-size: 13px; } /* The banner strip. Its background images 404 (a known, separate issue), so it is a flat fill -- which also means one fewer request per page. */ body.theme-dark .banner, body.theme-dark .banner.bg-artists, body.theme-dark .banner.bg-albums, body.theme-dark .banner.bg-labels { background-image: none !important; background-color: var(--beml-panel); border-bottom: 1px solid var(--beml-line); } body.theme-dark .banner:before, body.theme-dark .banner:after { display: none; } body.theme-dark .banner-content { background: transparent; } /* --------------------------------------------------------------------- 5. SECTIONS AND PANELS --------------------------------------------------------------------- */ body.theme-dark .main-container, body.theme-dark .section { background: var(--beml-bg); } body.theme-dark .card, body.theme-dark .search-card { background: var(--beml-panel); border: 1px solid var(--beml-line); border-radius: var(--beml-radius); box-shadow: none; } body.theme-dark [class^="border-"], body.theme-dark [class*=" border-"] { border-color: var(--beml-line) !important; /* utility classes carry !important upstream */ } /* --------------------------------------------------------------------- 6. THE RESULTS TABLE — the screen people work in --------------------------------------------------------------------- */ /* PHP prints , and an inline style beats any stylesheet. Hence !important here, and only here, on colour. */ body.theme-dark .table { color: var(--beml-ink) !important; border-color: var(--beml-line); margin-bottom: 0; } body.theme-dark .table > thead > tr, body.theme-dark .table > thead > tr.active { background: var(--beml-rail); } body.theme-dark .table > thead > tr > th { border-top: none; border-bottom: 1px solid var(--beml-line); padding: 9px 12px; vertical-align: middle; } body.theme-dark .table > thead > tr > th strong { font-family: var(--beml-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--beml-ink-4); } body.theme-dark .table > thead > tr > th .toogle_arrow, body.theme-dark .table > thead > tr > th i { color: var(--beml-ink-4); font-size: 13px !important; /* markup sets font-size:18px inline */ } body.theme-dark .table > tbody > tr > td { border-top: none; border-bottom: 1px solid #16191d; padding: 8px 12px; vertical-align: middle; } body.theme-dark .table.table-hover > tbody > tr:hover > td { background: #101317; } /* The track cell: art, title, subtitle */ body.theme-dark .custom-card--inline { color: var(--beml-ink) !important; /* template uses .text-dark on a dark row */ } body.theme-dark .custom-card--inline-img img, body.theme-dark .card-img--radius-sm { border-radius: 3px; border: 1px solid var(--beml-line); background: var(--beml-raise); } body.theme-dark .custom-card--inline-desc p { color: var(--beml-ink); font-weight: 500; font-size: 13px; margin-bottom: 1px; } body.theme-dark .custom-card--inline-desc span, body.theme-dark .custom-card--inline-desc small { color: var(--beml-ink-4); font-family: var(--beml-mono); font-size: 10px; } body.theme-dark .custom-card .text-dark, body.theme-dark .text-dark.custom-card--inline, body.theme-dark .custom-card .custom-card--link h6 { color: var(--beml-ink) !important; /* .text-dark is a utility with !important upstream */ } /* Row action icons */ body.theme-dark .dropdown-link { color: var(--beml-ink-4); display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; border-radius: var(--beml-radius); } body.theme-dark .dropdown-link:hover { color: var(--beml-accent); background: var(--beml-raise); } body.theme-dark .dropdown-link .la, body.theme-dark .dropdown-link .fa { font-size: 16px; } /* a favourited heart keeps its own red, set inline by the JS */ body.theme-dark .dropdown-link .fa-heart[style*="red"] { color: var(--beml-danger) !important; } /* Nested version/stem table: mark it as belonging to the row above */ body.theme-dark .table-nested { background: transparent; } body.theme-dark .table-nested > tbody > tr > td { border-left: 2px solid var(--beml-accent-line); background: #0a0c0f; } /* --------------------------------------------------------------------- 7. BUTTONS --------------------------------------------------------------------- */ body.theme-dark .btn { font-family: var(--beml-ui); font-weight: 500; font-size: 13px; border-radius: var(--beml-radius); box-shadow: none; min-height: 34px; } body.theme-dark .btn-pill { border-radius: 17px; } body.theme-dark .btn-primary { background: var(--beml-accent); border-color: var(--beml-accent); color: var(--beml-on-accent); font-weight: 600; } body.theme-dark .btn-primary:hover, body.theme-dark .btn-primary:focus, body.theme-dark .btn-primary:active { background: var(--beml-accent-dim); border-color: var(--beml-accent-dim); color: #eaf3ff; } body.theme-dark .btn-default, body.theme-dark .btn-secondary { background: var(--beml-raise); border: 1px solid var(--beml-edge); color: var(--beml-ink); } body.theme-dark .btn-default:hover, body.theme-dark .btn-secondary:hover { background: #1b1f24; border-color: var(--beml-edge-hi); color: var(--beml-ink); } body.theme-dark .btn-danger { background: var(--beml-danger-bg); border: 1px solid var(--beml-danger-line); color: var(--beml-danger-ink); } body.theme-dark .btn:disabled, body.theme-dark .btn.disabled { background: var(--beml-raise); border-color: var(--beml-line); color: #4d545d; opacity: 1; } /* --------------------------------------------------------------------- 8. FORMS --------------------------------------------------------------------- */ body.theme-dark .form-control, body.theme-dark .custom-select, body.theme-dark .custom-file-label, body.theme-dark textarea, body.theme-dark select { background: var(--beml-bg); border: 1px solid var(--beml-edge); border-radius: var(--beml-radius); color: var(--beml-ink); font-family: var(--beml-ui); font-size: 13px; box-shadow: none; } body.theme-dark .form-control:focus, body.theme-dark .custom-select:focus, body.theme-dark .custom-file-label:focus, body.theme-dark textarea:focus, body.theme-dark select:focus { background: var(--beml-bg); border-color: var(--beml-accent); color: var(--beml-ink); box-shadow: none; outline: none; } body.theme-dark .form-control::placeholder { color: var(--beml-ink-4); } body.theme-dark .form-control.is-invalid, body.theme-dark .form-control.error { border-color: var(--beml-danger-line); } body.theme-dark label, body.theme-dark .control-label { color: var(--beml-ink-3); font-size: 11px; font-weight: 500; } /* checkbox / radio: recolour the template's drawn box */ body.theme-dark .custom-control-label::before { background: var(--beml-bg); border: 1px solid var(--beml-edge); } body.theme-dark .custom-control-input:checked ~ .custom-control-label::before { background: var(--beml-accent); border-color: var(--beml-accent); } body.theme-dark input[type="checkbox"], body.theme-dark input[type="radio"], body.theme-dark input[type="range"] { accent-color: var(--beml-accent); } /* --------------------------------------------------------------------- 9. LIST GROUPS (the filter menus) --------------------------------------------------------------------- */ body.theme-dark .list-group { background: transparent; } body.theme-dark .list-group-item { background: transparent; border-color: var(--beml-line); color: var(--beml-ink-2); font-size: 12px; padding: 7px 10px; } body.theme-dark .list-group-item:hover { background: var(--beml-raise); color: var(--beml-ink); } body.theme-dark .list-group-item.active { background: var(--beml-accent-bg); border-color: var(--beml-accent-line); color: var(--beml-accent); } /* --------------------------------------------------------------------- 10. MODALS --------------------------------------------------------------------- */ body.theme-dark .modal-content { background: var(--beml-raise); border: 1px solid var(--beml-edge-hi); border-radius: 6px; box-shadow: none; } body.theme-dark .modal-header { background: var(--beml-raise); border-bottom: 1px solid var(--beml-edge); padding: 13px 16px; } body.theme-dark .modal-title { font-family: var(--beml-head); font-weight: 500; font-size: 15px; color: var(--beml-ink); } body.theme-dark .modal-body { background: var(--beml-raise); color: var(--beml-ink-2); font-size: 13px; } body.theme-dark .modal-body h4 { font-size: 15px; } body.theme-dark .modal-footer { background: var(--beml-raise); border-top: 1px solid var(--beml-edge); } body.theme-dark .modal-header .close { color: var(--beml-ink-3) !important; /* markup sets style="color:#ffffff" inline */ opacity: 1; text-shadow: none; } body.theme-dark .modal-backdrop, body.theme-dark .backdrop { background: #000; opacity: 0.72; } /* the login prompt added for anonymous playback */ body.theme-dark #login_prompt_reason { background: var(--beml-accent-bg); border: 1px solid var(--beml-accent-line); border-radius: var(--beml-radius); color: #a8d0ff; font-size: 12px; padding: 10px 12px; } body.theme-dark .nav-tabs { border-bottom: 1px solid var(--beml-line); } body.theme-dark .nav-tabs > li > a { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--beml-ink-3); font-size: 13px; border-radius: 0; } body.theme-dark .nav-tabs > li > a.active { background: transparent; border-bottom-color: var(--beml-accent); color: var(--beml-ink); } /* alerts */ body.theme-dark .alert { border-radius: var(--beml-radius); font-size: 12px; border-width: 1px; } body.theme-dark .alert-success { background: #0d2117; border-color: #1f4a33; color: var(--beml-ok); } body.theme-dark .alert-danger { background: var(--beml-danger-bg); border-color: var(--beml-danger-line); color: var(--beml-danger-ink); } body.theme-dark .alert-warning { background: var(--beml-warn-bg); border-color: var(--beml-warn-line); color: var(--beml-warn-ink); } body.theme-dark .alert-info { background: var(--beml-accent-bg); border-color: var(--beml-accent-line); color: #a8d0ff; } /* --------------------------------------------------------------------- 11. DROPDOWN MENUS --------------------------------------------------------------------- */ body.theme-dark .dropdown-menu { background: var(--beml-raise); border: 1px solid var(--beml-edge-hi); border-radius: 5px; box-shadow: none; padding: 4px; } body.theme-dark .dropdown-menu .dropdown-item { color: var(--beml-ink-2); border-radius: 3px; font-size: 12px; padding: 7px 9px; } body.theme-dark .dropdown-menu .dropdown-item:hover { background: var(--beml-accent-bg); color: var(--beml-accent); } body.theme-dark .dropdown-divider { border-color: var(--beml-edge); } /* --------------------------------------------------------------------- 12. BADGES AND CHIPS --------------------------------------------------------------------- */ body.theme-dark .badge { font-family: var(--beml-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.04em; border-radius: 3px; padding: 3px 6px; background: var(--beml-accent-bg); border: 1px solid var(--beml-accent-line); color: #a8d0ff; } body.theme-dark .badge-danger { background: var(--beml-danger-bg); border-color: var(--beml-danger-line); color: var(--beml-danger-ink); } /* --------------------------------------------------------------------- 13. PLAYER BAR --------------------------------------------------------------------- */ body.theme-dark #audioPlayer, body.theme-dark #footer_content, body.theme-dark #footer { background: var(--beml-panel); border-top: 1px solid var(--beml-edge); } body.theme-dark #footer:before, body.theme-dark #footer:after { display: none; } body.theme-dark #audioPlayer .btn { background: transparent; border: none; color: var(--beml-ink-3); min-height: 0; } body.theme-dark #audioPlayer .btn:hover { color: var(--beml-ink); } /* the play/pause control is the one filled thing in the bar */ body.theme-dark #audioPlayer .amplitude-play-pause { background: var(--beml-accent); color: var(--beml-on-accent); border-radius: 50%; } body.theme-dark #progress-container .audio-progress--played, body.theme-dark #audioPlayer progress.amplitude-song-played-progress { color: var(--beml-accent); } body.theme-dark #progress-container .audio-progress--played::-webkit-progress-value, body.theme-dark #audioPlayer progress.amplitude-song-played-progress::-webkit-progress-value { background: var(--beml-accent); } body.theme-dark #progress-container .audio-progress--played::-moz-progress-bar, body.theme-dark #audioPlayer progress.amplitude-song-played-progress::-moz-progress-bar { background: var(--beml-accent); } body.theme-dark #progress-container .audio-progress--buffered::-webkit-progress-value { background: var(--beml-edge); } body.theme-dark #progress-container .audio-progress, body.theme-dark #audioPlayer progress { background: var(--beml-edge); border: none; } body.theme-dark #audioPlayer .amplitude-song-slider { accent-color: var(--beml-accent); } body.theme-dark .progress { background: var(--beml-edge); } body.theme-dark .progress-bar { background: var(--beml-accent); } /* --------------------------------------------------------------------- 14. SCROLLBARS Thin and dark, so a long catalogue does not get a bright gutter. --------------------------------------------------------------------- */ body.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; } body.theme-dark ::-webkit-scrollbar-track { background: var(--beml-bg); } body.theme-dark ::-webkit-scrollbar-thumb { background: var(--beml-edge); border-radius: 5px; border: 2px solid var(--beml-bg); } body.theme-dark ::-webkit-scrollbar-thumb:hover { background: var(--beml-edge-hi); } body.theme-dark { scrollbar-color: var(--beml-edge) var(--beml-bg); scrollbar-width: thin; } /* --------------------------------------------------------------------- 15. LOADER --------------------------------------------------------------------- */ body.theme-dark #loading { background: var(--beml-bg); } body.theme-dark #loading .eq-bar { background: var(--beml-accent); } body.theme-dark #loading .text { font-family: var(--beml-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--beml-ink-4); } /* --------------------------------------------------------------------- 16. NARROW SCREENS The template turns the table into stacked blocks under 768px via #no-more-tables. Those rules hardcode light greys, which look wrong on a black ground, so they are restated here. Same structure, our colours. --------------------------------------------------------------------- */ @media only screen and (max-width: 767px) { body.theme-dark #no-more-tables > table > tbody > tr { border: 1px solid var(--beml-line); border-radius: var(--beml-radius); margin-bottom: 8px; background: var(--beml-panel); } body.theme-dark #no-more-tables > table > tbody > tr > td { border-bottom: 1px solid var(--beml-line); } body.theme-dark #no-more-tables > table > tbody > tr > td:last-child { border-bottom: none; } body.theme-dark #no-more-tables > table > tbody > tr > td:before { background-color: var(--beml-rail); color: var(--beml-ink-4); font-family: var(--beml-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; } body.theme-dark .btn { min-height: 40px; /* touch target */ } } /* --------------------------------------------------------------------- 17. SELECT2 AND jQuery-UI Both are linked AFTER this sheet -- select2 later in the same , jQuery-UI's theme from modal.php in the body -- so equal-specificity rules would lose. Every selector here carries the body.theme-dark prefix, which outweighs their own, so order stops mattering. These are not decoration: select2 draws the album and genre pickers and jQuery-UI draws the search autocomplete, so left stock they are two white boxes in the middle of a black screen. --------------------------------------------------------------------- */ /* --- select2 closed control --- */ body.theme-dark .select2-container--default .select2-selection--single, body.theme-dark .select2-container--default .select2-selection--multiple { background: var(--beml-bg); border: 1px solid var(--beml-edge); border-radius: var(--beml-radius); min-height: 34px; } body.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--beml-ink); font-family: var(--beml-ui); font-size: 13px; line-height: 32px; } body.theme-dark .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--beml-ink-4); } body.theme-dark .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--beml-ink-3) transparent transparent transparent; } body.theme-dark .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--beml-accent); } /* --- select2 multi-value chips --- */ body.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--beml-accent-bg); border: 1px solid var(--beml-accent-line); border-radius: 3px; color: #a8d0ff; font-family: var(--beml-mono); font-size: 11px; } body.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #a8d0ff; } /* --- select2 open dropdown --- */ body.theme-dark .select2-container--default .select2-dropdown, body.theme-dark .select2-dropdown { background: var(--beml-raise); border: 1px solid var(--beml-edge-hi); border-radius: 5px; } body.theme-dark .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--beml-bg); border: 1px solid var(--beml-edge); border-radius: 3px; color: var(--beml-ink); font-family: var(--beml-mono); font-size: 12px; } body.theme-dark .select2-container--default .select2-results__option { background: transparent; color: var(--beml-ink-2); font-family: var(--beml-mono); font-size: 12px; padding: 6px 9px; } body.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected], body.theme-dark .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--beml-accent-bg); color: var(--beml-accent); } body.theme-dark .select2-container--default .select2-results__option[aria-selected="true"], body.theme-dark .select2-container--default .select2-results__option[data-selected="true"] { background: var(--beml-raise); color: var(--beml-ink); } /* group headers -- the ingest album picker leans on these */ body.theme-dark .select2-container--default .select2-results__group { color: var(--beml-ink-4); font-family: var(--beml-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } /* --- jQuery-UI autocomplete (the header search suggestions) --- */ body.theme-dark .ui-autocomplete, body.theme-dark .ui-menu, body.theme-dark .ui-widget-content { background: var(--beml-raise); border: 1px solid var(--beml-edge-hi); border-radius: 5px; color: var(--beml-ink-2); font-family: var(--beml-ui); font-size: 13px; } body.theme-dark .ui-menu .ui-menu-item-wrapper { color: var(--beml-ink-2); border: none; padding: 6px 9px; } body.theme-dark .ui-menu .ui-menu-item-wrapper.ui-state-active, body.theme-dark .ui-state-active, body.theme-dark .ui-widget-content .ui-state-active { background: var(--beml-accent-bg); border: none; color: var(--beml-accent); margin: 0; }