/* * dark_mode.css * CSS custom properties for BJJ Combos dark/light theme system. * Dark is the DEFAULT theme. Light mode overrides are in [data-theme="light"]. * Toggle is controlled via data-theme attribute on the element. * Palette: #000000 (bg), #1a1a1a (cards), #2a2a2a (elevated), #e42526 (accent red). */ /* ========================== DARK THEME (default) ========================== */ :root { /* Backgrounds */ --bg-primary: #000000; --bg-secondary: #1a1a1a; --bg-card: #2a2a2a; --bg-card-hover: #333333; /* Text */ --text-primary: #f0f0f0; --text-muted: #aaaaaa; --text-heading: #ffffff; /* Borders */ --border-color: #333333; --border-light: #444444; /* Accent */ --accent: #e42526; --accent-hover: #c41f20; --accent-light: #ff6b6b; /* Forms */ --input-bg: #2a2a2a; --input-border: #444444; --input-text: #f0f0f0; --input-placeholder:#888888; /* Tables */ --table-bg: #1a1a1a; --table-stripe: #222222; --table-hover: #2a2a2a; --table-border: #333333; --table-header-bg: #0d0d0d; --table-header-text:#f0f0f0; /* Navbar */ --navbar-bg: #0d0d0d; --navbar-text: #f0f0f0; --navbar-link: #ffffff; --navbar-link-hover:#ffffff; --navbar-active-bg: #e7e7e7; /* Dropdowns */ --dropdown-bg: #1a1a1a; --dropdown-text: #f0f0f0; --dropdown-hover: #2a2a2a; --dropdown-border: #333333; /* Panels / Wells */ --panel-bg: #1a1a1a; --panel-border: #333333; --panel-header-bg: #0d0d0d; --panel-header-text:#f0f0f0; --well-bg: #1a1a1a; /* Page header */ --page-header-border: #333333; /* Badges */ --badge-bg: #e42526; --badge-text: #ffffff; } /* ========================== LIGHT THEME OVERRIDES ========================== */ [data-theme="light"] { /* Backgrounds */ --bg-primary: #f8f9fa; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f5f5f5; /* Text */ --text-primary: #000000; --text-muted: #666666; --text-heading: #000000; /* Borders */ --border-color: #dddddd; --border-light: #eeeeee; /* Accent unchanged */ --accent: #e42526; --accent-hover: #c41f20; --accent-light: #e42526; /* Forms */ --input-bg: #ffffff; --input-border: #cccccc; --input-text: #000000; --input-placeholder:#999999; /* Tables */ --table-bg: #ffffff; --table-stripe: #f9f9f9; --table-hover: #f5f5f5; --table-border: #dddddd; --table-header-bg: #f5f5f5; --table-header-text:#000000; /* Navbar */ --navbar-bg: #f8f8f8; --navbar-text: #000000; --navbar-link: #555555; --navbar-link-hover:#333333; --navbar-active-bg: #e7e7e7; /* Dropdowns */ --dropdown-bg: #ffffff; --dropdown-text: #000000; --dropdown-hover: #f5f5f5; --dropdown-border: #cccccc; /* Panels / Wells */ --panel-bg: #ffffff; --panel-border: #dddddd; --panel-header-bg: #f5f5f5; --panel-header-text:#000000; --well-bg: #f5f5f5; /* Page header */ --page-header-border: #eeeeee; /* Badges */ --badge-bg: #e42526; --badge-text: #ffffff; } /* ========================== BASE ELEMENTS ========================== */ body { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; } h1, h2, h3, h4, h5, h6 { color: var(--text-heading); } a { color: var(--accent-light); } a:hover { color: var(--accent-hover); } p:not(#quick-notes-bubble *):not(.ip-card *):not(.bc *), label:not(#quick-notes-bubble *):not(.ip-card *):not(.bc *), td:not(#quick-notes-bubble *):not(.ip-card *):not(.bc *), th:not(#quick-notes-bubble *):not(.ip-card *):not(.bc *), li:not(#quick-notes-bubble *):not(.ip-card *):not(.bc *) { color: var(--text-primary) !important; } /* Glyphicons inside colored buttons inherit button color */ .btn-danger span, .btn-primary span, .btn-success span, .btn-info span, .btn-warning span { color: inherit !important; } /* ========================== NAVBAR Uses #admin-nav prefix for higher specificity than Bootstrap. ========================== */ #admin-nav.navbar-default { background-color: var(--navbar-bg) !important; border-color: var(--border-color) !important; } #admin-nav .navbar-default .navbar-brand { color: var(--navbar-text) !important; } /* Nav links */ #admin-nav .navbar-default .navbar-nav > li { display: flex !important; align-items: stretch !important; } #admin-nav .navbar-default .navbar-nav > li > a { color: #ffffff !important; display: flex !important; align-items: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Fix grey sliver between navbar and dropdown on all navs */ #admin-nav .navbar-nav > li > .dropdown-menu { margin-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .navbar-default .navbar-nav > li > a { color: #ffffff !important; } [data-theme="light"] .navbar-default .navbar-nav > li > a { color: #000000 !important; } #admin-nav .navbar-default .navbar-nav > li:hover > a { color: #ffffff !important; background-color: #e42526 !important; } #admin-nav .navbar-default .navbar-nav > li.active > a, #admin-nav .navbar-default .navbar-nav > li.active > a:hover, #admin-nav .navbar-default .navbar-nav > li.active > a:focus, #admin-nav.navbar-default .navbar-nav > li.active > a, #admin-nav.navbar-default .navbar-nav > li.active > a:hover, #admin-nav.navbar-default .navbar-nav > li.active > a:focus { color: #ffffff !important; background-color: #e42526 !important; } #admin-nav .navbar-default .navbar-nav > li:hover > a, #admin-nav.navbar-default .navbar-nav > li:hover > a { color: #ffffff !important; background-color: #e42526 !important; } [data-theme="light"] #admin-nav .navbar-default .navbar-nav > li:hover > a, [data-theme="light"] #admin-nav.navbar-default .navbar-nav > li:hover > a { color: #ffffff !important; background-color: #e42526 !important; } [data-theme="light"] #admin-nav .navbar-default .navbar-nav > li.active > a, [data-theme="light"] #admin-nav .navbar-default .navbar-nav > li.active > a:hover, [data-theme="light"] #admin-nav .navbar-default .navbar-nav > li.active > a:focus, [data-theme="light"] #admin-nav.navbar-default .navbar-nav > li.active > a, [data-theme="light"] #admin-nav.navbar-default .navbar-nav > li.active > a:hover, [data-theme="light"] #admin-nav.navbar-default .navbar-nav > li.active > a:focus { color: #ffffff !important; background-color: #e42526 !important; } /* Mobile nav panel - dark mode handled via CSS variables in layout_head.php */ /* Fix pull-right ul width to match its contents */ #admin-nav .navbar-default .navbar-nav.pull-right { width: fit-content !important; } #admin-nav .navbar-default .navbar-nav.pull-right:hover { background-color: #e42526 !important; } /* Make notification bell li fill height with red on dropdown hover */ #admin-nav .navbar-default .navbar-nav.pull-right > li { display: flex !important; align-items: stretch !important; } #admin-nav .navbar-default .navbar-nav.pull-right > li > a { display: flex !important; align-items: center !important; } #admin-nav .container { background-color: var(--navbar-bg) !important; } /* ========================== DROPDOWN MENUS ========================== */ .dropdown-menu { background-color: var(--dropdown-bg) !important; border-color: var(--dropdown-border) !important; } .dropdown-menu > li > a { color: var(--dropdown-text) !important; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--dropdown-hover) !important; color: var(--text-heading) !important; } .dropdown-menu .divider { background-color: var(--border-color) !important; } /* Fix subscription section in profile dropdown - override inline styles in dark mode */ html:not([data-theme="light"]) .dropdown-menu > li.dropdown-subscription-free { background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important; border-bottom: 2px solid #444444 !important; } html:not([data-theme="light"]) .dropdown-menu > li.dropdown-subscription-free a { color: #a0aaff !important; } html:not([data-theme="light"]) .dropdown-menu > li.dropdown-subscription-active { background: linear-gradient(135deg, #1a3a24 0%, #163020 100%) !important; border-bottom: 2px solid #2d7a4a !important; } html:not([data-theme="light"]) .dropdown-menu > li.dropdown-subscription-active span { color: #52c77a !important; } [data-theme="light"] .dropdown-menu > li.dropdown-subscription-free { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important; border-bottom: 2px solid #dee2e6 !important; } [data-theme="light"] .dropdown-menu > li.dropdown-subscription-free a { color: #667eea !important; } [data-theme="light"] .dropdown-menu > li.dropdown-subscription-active { background: linear-gradient(135deg, #d4f4dd 0%, #c3e6cb 100%) !important; border-bottom: 2px solid #52c77a !important; } [data-theme="light"] .dropdown-menu > li.dropdown-subscription-active span { color: #27ae60 !important; } /* Instructor public profile - force detail table to dark card background on both modes */ .ip-card .table, [data-theme="light"] .ip-card .table { background-color: #141414 !important; color: #ffffff !important; } .ip-card .table > tbody > tr > td, .ip-card .table > tbody > tr > th, [data-theme="light"] .ip-card .table > tbody > tr > td, [data-theme="light"] .ip-card .table > tbody > tr > th { background-color: transparent !important; color: #ffffff !important; border-color: rgba(255,255,255,0.07) !important; } .ip-card .table > tbody > tr > td.ip-detail-key, [data-theme="light"] .ip-card .table > tbody > tr > td.ip-detail-key { color: #777777 !important; } .page-header { border-bottom-color: var(--page-header-border) !important; } .page-header h1 { color: var(--text-heading) !important; } /* ========================== PANELS ========================== */ .panel { background-color: var(--panel-bg) !important; border-color: var(--panel-border) !important; } .panel-default > .panel-heading { background-color: var(--panel-header-bg) !important; border-color: var(--panel-border) !important; color: var(--panel-header-text) !important; } .panel-body { background-color: var(--panel-bg) !important; } /* ========================== TABLES ========================== */ .table { background-color: var(--table-bg) !important; color: var(--text-primary) !important; } .table > thead > tr > th { background-color: var(--table-header-bg) !important; color: var(--table-header-text) !important; border-color: var(--table-border) !important; } .table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--table-border) !important; color: var(--text-primary) !important; } .table-bordered { border-color: var(--table-border) !important; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--table-stripe) !important; } .table-hover > tbody > tr:hover { background-color: var(--bg-card-hover) !important; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: var(--bg-card-hover) !important; } /* ========================== FORMS & INPUTS ========================== */ .form-control { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; } .form-control:focus { background-color: var(--input-bg) !important; border-color: var(--accent) !important; color: var(--input-text) !important; box-shadow: 0 0 6px rgba(228, 37, 38, 0.3) !important; } .form-control::placeholder { color: var(--input-placeholder) !important; } select.form-control option { background-color: var(--input-bg); color: var(--input-text); } /* ========================== WELLS ========================== */ .well { background-color: var(--well-bg) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } /* ========================== BUTTONS ========================== */ .btn-default { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .btn-default:hover, .btn-default:focus { background-color: var(--bg-card-hover) !important; border-color: var(--border-light) !important; color: var(--text-heading) !important; } /* ========================== MODALS ========================== */ .modal-content { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .modal-header { border-bottom-color: var(--border-color) !important; } .modal-footer { border-top-color: var(--border-color) !important; } /* ========================== LIST GROUPS ========================== */ .list-group-item { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .list-group-item:hover { background-color: var(--bg-card-hover) !important; } /* ========================== ALERTS ========================== */ .alert { color: var(--text-primary); } /* Override Bootstrap alert colors for dark mode */ .alert-success, .modal-content .alert-success, [data-theme="dark"] .alert-success, [data-theme="dark"] .modal-content .alert-success { background-color: #1a3a24 !important; border-color: #2d7a4a !important; color: #52c77a !important; } .alert-danger, .modal-content .alert-danger, [data-theme="dark"] .alert-danger, [data-theme="dark"] .modal-content .alert-danger { background-color: #3a1a1a !important; border-color: #7a2d2d !important; color: #ff6b6b !important; } .alert-warning, .modal-content .alert-warning, [data-theme="dark"] .alert-warning, [data-theme="dark"] .modal-content .alert-warning { background-color: #3a2e1a !important; border-color: #7a5c2d !important; color: #f0a840 !important; } .alert-info, .modal-content .alert-info, [data-theme="dark"] .alert-info, [data-theme="dark"] .modal-content .alert-info { background-color: #1a2a3a !important; border-color: #2d5a7a !important; color: #6bb5ff !important; } .alert-danger { background-color: #3a1a1a !important; border-color: #7a2d2d !important; color: #ff6b6b !important; } .alert-warning { background-color: #3a2e1a !important; border-color: #7a5c2d !important; color: #f0a840 !important; } .alert-info { background-color: #1a2a3a !important; border-color: #2d5a7a !important; color: #6bb5ff !important; } /* Light mode - restore Bootstrap defaults */ [data-theme="light"] .alert-success { background-color: #dff0d8 !important; border-color: #d6e9c6 !important; color: #3c763d !important; } [data-theme="light"] .alert-danger { background-color: #f2dede !important; border-color: #ebccd1 !important; color: #a94442 !important; } [data-theme="light"] .alert-warning { background-color: #fcf8e3 !important; border-color: #faebcc !important; color: #8a6d3b !important; } [data-theme="light"] .alert-info { background-color: #d9edf7 !important; border-color: #bce8f1 !important; color: #31708f !important; } /* ========================== PAGINATION ========================== */ .pagination > li > a, .pagination > li > span { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--accent-light) !important; } .pagination > li > a:hover { background-color: var(--bg-card-hover) !important; color: var(--text-heading) !important; } .pagination > .active > a, .pagination > .active > span { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; } /* ========================== PAGE HEADER THUMBNAILS Dark versions are default. Light versions swap in on light theme. ========================== */ .hdr-thumbnail[src*="thumb-moves.png"], .hdr-thumbnail[src*="thumb_moves.png"] { content: url('images/thumb-moves-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb-moves.png"], [data-theme="light"] .hdr-thumbnail[src*="thumb_moves.png"] { content: url('images/thumb-moves.png'); } .hdr-thumbnail[src*="thumb_combos.png"] { content: url('images/thumb_combos-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_combos.png"] { content: url('images/thumb_combos.png'); } .hdr-thumbnail[src*="thumb_systems.png"] { content: url('images/thumb_systems-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_systems.png"] { content: url('images/thumb_systems.png'); } .hdr-thumbnail[src*="thumb_gameplans.png"] { content: url('images/thumb_gameplans-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_gameplans.png"] { content: url('images/thumb_gameplans.png'); } .hdr-thumbnail[src*="thumb_flashcards.png"] { content: url('images/thumb_flashcards-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_flashcards.png"] { content: url('images/thumb_flashcards.png'); } .hdr-thumbnail[src*="thumb_vocabulary.png"] { content: url('images/thumb_vocabulary-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_vocabulary.png"] { content: url('images/thumb_vocabulary.png'); } .hdr-thumbnail[src*="thumb_badges.png"] { content: url('images/thumb_badges-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_badges.png"] { content: url('images/thumb_badges.png'); } .hdr-thumbnail[src*="thumb_myVideos.png"] { content: url('images/thumb_myVideos-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_myVideos.png"] { content: url('images/thumb_myVideos.png'); } .hdr-thumbnail[src*="thumb-payments.png"] { content: url('images/thumb-payments-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb-payments.png"] { content: url('images/thumb-payments.png'); } .hdr-thumbnail[src*="thumb_students.png"] { content: url('images/thumb_students-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_students.png"] { content: url('images/thumb_students.png'); } .hdr-thumbnail[src*="thumb_user_profile.png"] { content: url('images/thumb_user_profile-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_user_profile.png"] { content: url('images/thumb_user_profile.png'); } .hdr-thumbnail[src*="thumb-reports.png"] { content: url('images/thumb-reports-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb-reports.png"] { content: url('images/thumb-reports.png'); } .hdr-thumbnail[src*="thumb_journal.png"] { content: url('images/thumb_journal-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_journal.png"] { content: url('images/thumb_journal.png'); } .hdr-thumbnail[src*="thumb_instructors.png"] { content: url('images/thumb_instructors-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_instructors.png"] { content: url('images/thumb_instructors.png'); } .hdr-thumbnail[src*="thumb_mental_training.png"] { content: url('images/thumb_mental_training-dark.png'); } [data-theme="light"] .hdr-thumbnail[src*="thumb_mental_training.png"] { content: url('images/thumb_mental_training.png'); } /* ========================== DARK MODE TOGGLE ========================== */ #dark-mode-toggle-item { padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; cursor: default; } #dark-mode-toggle-item label { margin: 0; font-size: 14px; color: var(--dropdown-text); cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between; } .dm-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .dm-switch input { opacity: 0; width: 0; height: 0; } .dm-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; border-radius: 24px; transition: 0.3s; } .dm-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s; } input:checked + .dm-slider { background-color: var(--accent); } input:checked + .dm-slider:before { transform: translateX(20px); } /* Mobile dark mode row */ .mobile-dark-mode-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--border-color); } .mobile-dark-mode-label { font-size: 14px; color: var(--text-primary); } /* ========================== FOOTER ========================== */ footer hr { border-color: var(--border-color) !important; margin-top: 0 !important; } footer { background-color: var(--bg-primary); } [data-theme="light"] footer .copyright, [data-theme="light"] footer .quicklinks li a { color: #000000 !important; } [data-theme="dark"] footer .copyright, [data-theme="dark"] footer .quicklinks li a { color: #ffffff !important; } footer .quicklinks li a:hover { color: var(--text-primary) !important; } /* Back to top button - fix alignment, centering and color */ #back-to-top { display: flex; align-items: center; justify-content: center; padding-top: 18px; } #back-to-top ul.social-buttons { display: flex; justify-content: center; align-items: center; padding: 0 !important; margin: 0 !important; list-style: none; } #back-to-top ul.social-buttons li { display: flex; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; } #back-to-top ul.social-buttons li a { width: 36px; height: 36px; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50%; background-color: #e42526 !important; color: #ffffff !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; font-size: 16px; } #back-to-top ul.social-buttons li a:hover { background-color: #c41f20 !important; color: #ffffff !important; } [data-theme="light"] #back-to-top ul.social-buttons li a { background-color: #cccccc !important; color: #ffffff !important; } [data-theme="light"] #back-to-top ul.social-buttons li a:hover { background-color: #aaaaaa !important; } /* Light mode - nav links black */ [data-theme="light"] .navbar-default .navbar-nav > li > a, [data-theme="light"] .navbar-default .navbar-nav > li > a:hover, [data-theme="light"] .navbar-default .navbar-nav > li > a:focus { color: #000000 !important; } /* Light mode - footer text black */ [data-theme="light"] footer .copyright, [data-theme="light"] footer .quicklinks li a, [data-theme="light"] footer .quicklinks li a:hover { color: #000000 !important; }