/** * Theme System CSS * Theme is applied via data-theme attribute on the element * Available themes: light (default), dark, ocean, forest, sunset */ /* CSS Variables for theming */ :root { /* Light theme (default) */ --bg-primary: #f8f9fa; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-navbar: #ffffff; --text-primary: #212529; --text-secondary: #6c757d; --text-muted: #6c757d; --border-color: #dee2e6; --link-color: #0d6efd; --link-hover: #0a58ca; --btn-outline-color: #6c757d; --input-bg: #ffffff; --input-border: #ced4da; --card-shadow: rgba(0, 0, 0, 0.075); --navbar-text: #212529; } /* Dark Theme */ [data-theme="dark"] { --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-card: #0f3460; --bg-navbar: #0f3460; --text-primary: #eaeaea; --text-secondary: #b8b8b8; --text-muted: #9a9a9a; --border-color: #2d4a6f; --link-color: #64b5f6; --link-hover: #90caf9; --btn-outline-color: #b8b8b8; --input-bg: #16213e; --input-border: #2d4a6f; --card-shadow: rgba(0, 0, 0, 0.3); --navbar-text: #eaeaea; } /* Ocean Theme */ [data-theme="ocean"] { --bg-primary: #e0f7fa; --bg-secondary: #b2ebf2; --bg-card: #ffffff; --bg-navbar: #006064; --text-primary: #004d40; --text-secondary: #00796b; --text-muted: #26a69a; --border-color: #80deea; --link-color: #0097a7; --link-hover: #00838f; --btn-outline-color: #00796b; --input-bg: #ffffff; --input-border: #80deea; --card-shadow: rgba(0, 150, 167, 0.1); --navbar-text: #ffffff; } /* Forest Theme */ [data-theme="forest"] { --bg-primary: #e8f5e9; --bg-secondary: #c8e6c9; --bg-card: #ffffff; --bg-navbar: #2e7d32; --text-primary: #1b5e20; --text-secondary: #388e3c; --text-muted: #66bb6a; --border-color: #a5d6a7; --link-color: #43a047; --link-hover: #2e7d32; --btn-outline-color: #388e3c; --input-bg: #ffffff; --input-border: #a5d6a7; --card-shadow: rgba(46, 125, 50, 0.1); --navbar-text: #ffffff; } /* Sunset Theme */ [data-theme="sunset"] { --bg-primary: #fff3e0; --bg-secondary: #ffe0b2; --bg-card: #ffffff; --bg-navbar: #e65100; --text-primary: #bf360c; --text-secondary: #e65100; --text-muted: #ff8a65; --border-color: #ffcc80; --link-color: #f57c00; --link-hover: #e65100; --btn-outline-color: #e65100; --input-bg: #ffffff; --input-border: #ffcc80; --card-shadow: rgba(230, 81, 0, 0.1); --navbar-text: #ffffff; } /* Midnight Theme */ [data-theme="midnight"] { --bg-primary: #0d0d0d; --bg-secondary: #1a1a1a; --bg-card: #262626; --bg-navbar: #1a1a1a; --text-primary: #ffffff; --text-secondary: #cccccc; --text-muted: #999999; --border-color: #404040; --link-color: #bb86fc; --link-hover: #d4b4ff; --btn-outline-color: #cccccc; --input-bg: #1a1a1a; --input-border: #404040; --card-shadow: rgba(0, 0, 0, 0.5); --navbar-text: #ffffff; } /* Apply CSS Variables to elements */ body { background-color: var(--bg-primary) !important; color: var(--text-primary); } /* Card styling */ .card { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; box-shadow: 0 0.125rem 0.25rem var(--card-shadow) !important; } .card-body { color: var(--text-primary); } /* Navbar styling */ .bg-navbar { background-color: var(--bg-navbar) !important; border-color: var(--border-color) !important; } .navbar-dark .navbar-nav .nav-link { color: var(--navbar-text); } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: var(--navbar-text); opacity: 0.8; } .navbar-dark .navbar-brand { color: var(--navbar-text); } .navbar-dark .navbar-text, .navbar-text { color: var(--navbar-text) !important; } /* Override bg-light for themed pages */ .bg-light { background-color: var(--bg-primary) !important; } .bg-white { background-color: var(--bg-secondary) !important; } /* Text colors */ .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } /* Links */ a { color: var(--link-color); } a:hover { color: var(--link-hover); } /* Form controls */ .form-control { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } .form-control:focus { background-color: var(--input-bg); border-color: var(--link-color); color: var(--text-primary); } .form-control::placeholder { color: var(--text-muted); } .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } /* Tables */ .table { color: var(--text-primary); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--bg-secondary); color: var(--text-primary); } .table > :not(caption) > * > * { background-color: transparent; border-color: var(--border-color); } /* Alerts */ .alert-info { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } /* Description box */ .description-box { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary); } /* Pagination */ .page-link { background-color: var(--bg-card); border-color: var(--border-color); color: var(--link-color); } .page-link:hover { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--link-hover); } .page-item.disabled .page-link { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); } /* Dropdown menus */ .dropdown-menu { background-color: var(--bg-card); border-color: var(--border-color); } .dropdown-item { color: var(--text-primary); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-secondary); color: var(--text-primary); } .dropdown-item-text { color: var(--text-primary); } /* Modal */ .modal-content { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } .modal-header { border-color: var(--border-color); } .modal-footer { border-color: var(--border-color); } /* Button outline adjustments for dark themes */ [data-theme="dark"] .btn-outline-secondary, [data-theme="midnight"] .btn-outline-secondary { color: var(--btn-outline-color); border-color: var(--btn-outline-color); } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="midnight"] .btn-outline-secondary:hover { color: var(--bg-primary); background-color: var(--btn-outline-color); } [data-theme="dark"] .btn-outline-dark, [data-theme="midnight"] .btn-outline-dark { color: var(--text-secondary); border-color: var(--text-secondary); } [data-theme="dark"] .btn-outline-dark:hover, [data-theme="midnight"] .btn-outline-dark:hover { color: var(--bg-primary); background-color: var(--text-secondary); } /* Level thumb background for dark themes */ [data-theme="dark"] .level-thumb, [data-theme="midnight"] .level-thumb { background-color: #1a1a2e !important; } /* Lightbox overlay */ .lightbox-overlay { background: var(--bg-primary); background: rgba(0, 0, 0, 0.9); } /* Form labels */ .form-label { color: var(--text-primary); } /* List groups */ .list-group-item { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } /* Borders */ .border, .border-bottom { border-color: var(--border-color) !important; } /* Badge adjustments */ [data-theme="dark"] .badge.bg-secondary, [data-theme="midnight"] .badge.bg-secondary { background-color: #4a4a4a !important; } /* Theme preview cards */ .theme-preview { width: 100%; height: 80px; border-radius: 8px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; } .theme-preview:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .theme-preview.active { outline: 3px solid var(--link-color); outline-offset: 2px; } .theme-preview-light { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #dee2e6 100%); } .theme-preview-dark { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); } .theme-preview-ocean { background: linear-gradient(135deg, #e0f7fa 0%, #006064 50%, #004d40 100%); } .theme-preview-forest { background: linear-gradient(135deg, #e8f5e9 0%, #2e7d32 50%, #1b5e20 100%); } .theme-preview-sunset { background: linear-gradient(135deg, #fff3e0 0%, #e65100 50%, #bf360c 100%); } .theme-preview-midnight { background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #262626 100%); } .theme-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px; background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; font-size: 0.75rem; font-weight: 600; } /* Navbar specific buttons */ .btn-outline-navbar { color: var(--navbar-text) !important; border-color: var(--navbar-text) !important; } .btn-outline-navbar:hover { color: var(--bg-navbar) !important; background-color: var(--navbar-text) !important; border-color: var(--navbar-text) !important; } .btn-navbar { color: var(--bg-navbar) !important; background-color: var(--navbar-text) !important; border-color: var(--navbar-text) !important; } .btn-navbar:hover { color: var(--bg-navbar) !important; background-color: var(--navbar-text) !important; opacity: 0.9; border-color: var(--navbar-text) !important; } /* Navbar links */ .navbar-dark .navbar-text a, .navbar-light .navbar-text a, .navbar-text a { color: var(--navbar-text) !important; text-decoration: underline; } /* Navbar brand and nav links */ .navbar .navbar-brand, .navbar .nav-link { color: var(--navbar-text) !important; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--navbar-text) !important; opacity: 0.8; } /* Navbar text */ .navbar .navbar-text { color: var(--navbar-text) !important; }