/* ============================================ StoryTerra Theme System ============================================ All theme-related colors are defined here as CSS variables. To change colors, simply edit the values below. Dark mode = default Light mode = activated via [data-theme="light"] on ============================================ */ /* ---------- DARK THEME (Default) ---------- */ :root { /* -- Map Colors -- */ --map-background: #050505; /* Map canvas background */ --map-land: #0e0a2e; /* Country/land fill */ --map-land-outline: rgba(70, 70, 100, 0.2); --map-sea: #030117; /* Ocean/water fill */ --map-sea-outline: #040a1c; --map-bg-layer: #0c0520; /* Background layer behind everything */ --map-border: rgba(255, 255, 255, 0.3); --map-border-hover: #3a7acc; --map-label-color: #FFFFFF; --map-label-halo: rgba(0, 0, 0, 0.75); --map-province-label: #e0e0e0; /* -- Side Panel -- */ --panel-bg: #0e0e0e; --panel-text: #e0e0e0; --panel-border: rgba(255, 255, 255, 0.1); --panel-shadow: rgba(0, 0, 0, 0.5); --panel-scrollbar-track: rgba(0, 0, 0, 0.3); --panel-scrollbar-thumb: rgba(58, 122, 204, 0.4); /* -- Tabs -- */ --tab-bg: rgba(41, 41, 41, 0.85); --tab-text: #aaa; --tab-active-bg: #0e0e0e; --tab-active-text: #fff; --tab-border: rgba(255, 255, 255, 0.2); --tab-hover-bg: rgba(26, 26, 26, 0.9); /* -- Map Control Buttons (time slider, time picker, reset, etc.) -- */ --ctrl-btn-bg: linear-gradient(135deg, #1a3a5f, #0d1c2a); --ctrl-btn-border: #3a7acc; --ctrl-btn-text: #ffffff; --ctrl-btn-shadow: rgba(0, 0, 0, 0.4); --ctrl-btn-hover-glow: rgba(99, 198, 255, 0.5); /* -- Map Controls (zoom, compass, etc.) -- */ --map-ctrl-bg: rgba(30, 30, 30, 0.85); --map-ctrl-border: rgba(255, 255, 255, 0.15); --map-ctrl-shadow: rgba(0, 0, 0, 0.3); --map-ctrl-icon-filter: invert(1) brightness(1.2); /* -- Time Slider -- */ --slider-bg: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.85)); --slider-track: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(99, 198, 255, 0.3), rgba(255, 255, 255, 0.1)); /* -- Search -- */ --search-input-bg: rgba(26, 58, 95, 0.2); --search-input-border: #3a7acc; --search-input-text: #ffffff; --search-placeholder: #aaa; /* -- Cards / Items -- */ --card-bg: rgba(0, 0, 0, 0.3); --card-border: rgb(25, 23, 88); --card-text: #e0e0e0; /* -- General UI -- */ --accent-blue: #4a9eff; --accent-blue-bg: rgba(74, 158, 255, 0.1); --accent-blue-border: rgba(74, 158, 255, 0.2); --text-primary: #e0e0e0; --text-secondary: #aaa; --text-muted: #888; --overlay-bg: rgba(0, 0, 0, 0.85); --loading-bg: rgba(0, 0, 0, 0.85); /* -- Toggle Panel Button -- */ --toggle-panel-bg: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); --toggle-panel-text: #e0e0e0; --toggle-panel-border: rgba(255, 255, 255, 0.2); /* -- Popups -- */ --popup-bg-dark: linear-gradient(145deg, #2d2d2d 0%, #1a1a1a 100%); --popup-text: #e0e0e0; --popup-border: rgba(255, 255, 255, 0.1); /* -- Sort Selects -- */ --select-bg: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%); --select-text: #e0e0e0; --select-option-bg: #2d2d2d; /* -- Theme Toggle Button -- */ --theme-toggle-bg: linear-gradient(135deg, #1a3a5f, #0d1c2a); --theme-toggle-border: #3a7acc; --theme-toggle-text: #ffffff; } /* ---------- LIGHT THEME ---------- */ /* Vintage Library Globe Aesthetic: warm umber earth, golden parchment land, sage-teal sea. Panel & buttons use rich dark warm tones from the same family. */ [data-theme="light"] { /* -- Map Colors -- */ --map-background: #96836a; /* earthy umber */ --map-land: #d2a478; /* aged golden parchment */ --map-land-outline: rgba(150, 120, 75, 0.3); --map-sea: #103b39; /* warm sage-teal (vintage globe) */ --map-sea-outline: #4e6966; --map-bg-layer: #96836a; /* earthy umber behind everything */ --map-border: rgb(120, 95, 65); --map-border-hover: #7a9e8e; /* muted eucalyptus */ --map-label-color: #3a2a18; /* espresso brown */ --map-label-halo: rgba(216, 196, 160, 0.85); --map-province-label: #4a3520; /* -- Side Panel (deeper warm tone) -- */ --panel-bg: #251d12; /* dark warm brown */ --panel-text: #ede4d4; /* warm off-white */ --panel-border: rgba(255, 240, 220, 0.12); --panel-shadow: rgba(40, 30, 20, 0.35); --panel-scrollbar-track: rgba(0, 0, 0, 0.15); --panel-scrollbar-thumb: rgba(139, 115, 85, 0.5); /* -- Tabs (dark warm) -- */ --tab-bg: rgba(55, 45, 35, 0.9); --tab-text: #c4b8a4; --tab-active-bg: #3d3229; --tab-active-text: #f0e6d6; --tab-border: rgba(255, 240, 220, 0.15); --tab-hover-bg: rgba(70, 58, 45, 0.95); /* -- Map Control Buttons (warm dark) -- */ --ctrl-btn-bg: linear-gradient(135deg, #4a3d30, #352a20); --ctrl-btn-border: #8b7355; --ctrl-btn-text: #f0e6d6; --ctrl-btn-shadow: rgba(40, 30, 20, 0.3); --ctrl-btn-hover-glow: rgba(139, 115, 85, 0.45); /* -- Map Controls (zoom, compass, etc.) -- */ --map-ctrl-bg: rgba(60, 50, 40, 0.88); --map-ctrl-border: rgba(255, 240, 220, 0.15); --map-ctrl-shadow: rgba(40, 30, 20, 0.25); --map-ctrl-icon-filter: invert(0.9) sepia(0.15) brightness(1.1); /* -- Time Slider (warm dark) -- */ --slider-bg: linear-gradient(to bottom, rgba(55, 45, 35, 0.7), rgba(50, 40, 30, 0.92)); --slider-track: linear-gradient(to right, rgba(255, 240, 220, 0.08), rgba(139, 115, 85, 0.35), rgba(255, 240, 220, 0.08)); /* -- Search (warm dark) -- */ --search-input-bg: rgba(55, 45, 35, 0.7); --search-input-border: #8b7355; --search-input-text: #f0e6d6; --search-placeholder: #a89880; /* -- Cards / Items -- */ --card-bg: rgba(55, 45, 35, 0.6); --card-border: rgba(139, 115, 85, 0.25); --card-text: #ede4d4; /* -- General UI -- */ --accent-blue: #7ba3bd; /* muted warm blue */ --accent-blue-bg: rgba(107, 142, 168, 0.12); --accent-blue-border: rgba(107, 142, 168, 0.2); --text-primary: #ede4d4; --text-secondary: #c4b8a4; --text-muted: #a09080; --overlay-bg: rgba(50, 40, 32, 0.92); --loading-bg: rgba(50, 40, 32, 0.92); /* -- Toggle Panel Button (warm dark) -- */ --toggle-panel-bg: linear-gradient(135deg, #4a3d30 0%, #352a20 100%); --toggle-panel-text: #ede4d4; --toggle-panel-border: rgba(255, 240, 220, 0.15); /* -- Popups (warm dark) -- */ --popup-bg-dark: linear-gradient(145deg, #4a3d30 0%, #352a20 100%); --popup-text: #ede4d4; --popup-border: rgba(255, 240, 220, 0.12); /* -- Sort Selects (warm dark) -- */ --select-bg: linear-gradient(145deg, #3d3229 0%, #4a3d30 100%); --select-text: #ede4d4; --select-option-bg: #3d3229; /* -- Theme Toggle Button (warm dark) -- */ --theme-toggle-bg: linear-gradient(135deg, #4a3d30, #352a20); --theme-toggle-border: #8b7355; --theme-toggle-text: #f0e6d6; } /* ============================================ Apply theme variables to key components ============================================ */ /* --- Map --- */ #map { background-color: var(--map-background); } /* --- Side Panel --- */ #side-panel { background: var(--panel-bg); color: var(--panel-text); border-right-color: var(--panel-border); box-shadow: 2px 0 15px var(--panel-shadow); } /* Side panel scrollbar */ #side-panel::-webkit-scrollbar-track { background: var(--panel-scrollbar-track); } #side-panel::-webkit-scrollbar-thumb { background: var(--panel-scrollbar-thumb); } #side-panel { scrollbar-color: var(--panel-scrollbar-thumb) var(--panel-scrollbar-track); } /* --- Tabs --- */ .tab { background: var(--tab-bg); color: var(--tab-text); border-color: var(--tab-border); } .tab.active { background: var(--tab-active-bg); color: var(--tab-active-text); } .tab:hover:not(.active) { background: var(--tab-hover-bg); color: var(--tab-active-text); } /* --- Toggle Panel Button --- */ #toggle-panel { background: var(--toggle-panel-bg); color: var(--toggle-panel-text); border-color: var(--toggle-panel-border); } /* --- Map Controls --- */ .maplibregl-ctrl-group { background-color: var(--map-ctrl-bg) !important; border-color: var(--map-ctrl-border) !important; box-shadow: 0 2px 10px var(--map-ctrl-shadow) !important; } .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon, .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon, .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon { filter: var(--map-ctrl-icon-filter) !important; } /* --- Time Slider & Picker Buttons --- */ .toggle-time-slider, .time-picker-button, .reset-time-button { background: var(--ctrl-btn-bg); border-color: var(--ctrl-btn-border); color: var(--ctrl-btn-text); box-shadow: 0 2px 10px var(--ctrl-btn-shadow); } .toggle-time-slider:hover, .time-picker-button:hover, .reset-time-button:hover { box-shadow: 0 0 15px var(--ctrl-btn-hover-glow); } /* --- Time Slider Container --- */ .time-slider-container { background: var(--slider-bg); } /* --- Search --- */ #search-input { background-color: var(--search-input-bg); border-color: var(--search-input-border); color: var(--search-input-text); } #search-input::placeholder { color: var(--search-placeholder); } #search-input:focus { border-color: var(--search-input-border); background-color: var(--search-input-bg); } #search-button { background: var(--ctrl-btn-bg); border-color: var(--search-input-border); color: var(--ctrl-btn-text); } /* --- Cards / Items --- */ .video-item { background: var(--card-bg); border-color: var(--card-border); } .video-info { color: var(--card-text); } /* --- Results Summary --- */ #results-summary { color: var(--text-muted); background: var(--accent-blue-bg); border-color: var(--accent-blue-border); } #item-count { color: var(--accent-blue); } /* --- Sort Selects --- */ #sort-select, #history-sort-select, #lists-sort-select { background: var(--select-bg); color: var(--select-text); } #sort-select option, #history-sort-select option, #lists-sort-select option { background: var(--select-option-bg); color: var(--select-text); } /* --- Loading Indicator --- */ #loading-indicator { background: var(--loading-bg); border-color: var(--panel-border); } /* --- Map Popups --- */ .maplibregl-popup-content { background: var(--popup-bg-dark) !important; color: var(--popup-text) !important; border-color: var(--popup-border) !important; } .maplibregl-popup-close-button { color: var(--popup-text) !important; } /* --- Light theme specific overrides --- */ [data-theme="light"] .filter-toggle { background: rgba(255, 240, 220, 0.12); color: #ede4d4; } [data-theme="light"] .filter-toggle:hover { background: rgba(255, 240, 220, 0.2); } [data-theme="light"] .spinner { border-color: rgba(255, 240, 220, 0.15); border-top-color: var(--accent-blue); } [data-theme="light"] .card-backdrop { background: rgba(50, 40, 32, 0.9); } [data-theme="light"] .location-item { background: rgba(255, 240, 220, 0.08); color: #ede4d4; } [data-theme="light"] .location-item:hover { background: rgba(107, 142, 168, 0.15); } [data-theme="light"] .no-videos, [data-theme="light"] .video-library-placeholder { color: #a09080; background: rgba(255, 240, 220, 0.05); } [data-theme="light"] .error-message { background: rgba(180, 60, 50, 0.12); color: #e8a090; border-color: rgba(180, 60, 50, 0.25); } [data-theme="light"] .confirmation-content { background: #3d3229; border-color: rgba(255, 240, 220, 0.12); color: #ede4d4; } [data-theme="light"] .location-message { background: rgba(255, 240, 220, 0.06); border-color: rgba(255, 240, 220, 0.1); } [data-theme="light"] .location-message p { color: #ede4d4; } [data-theme="light"] .video-count-container { background: rgba(255, 240, 220, 0.08); color: #ede4d4; border-color: rgba(255, 240, 220, 0.1); } /* Light mode social links */ [data-theme="light"] .kofi-desktop-container div[style*="color: #aaa"] { color: #c4b8a4 !important; } /* Light mode map attribution */ [data-theme="light"] .maplibregl-ctrl-attrib { background-color: rgba(60, 50, 40, 0.8) !important; color: #ede4d4 !important; } [data-theme="light"] .maplibregl-ctrl-attrib a { color: #c4b8a4 !important; } /* Light mode scale control */ [data-theme="light"] .maplibregl-ctrl-scale { border-color: rgba(255, 240, 220, 0.3) !important; color: #ede4d4 !important; background-color: rgba(60, 50, 40, 0.8) !important; } /* Light mode map top-right links */ [data-theme="light"] .map-top-right-links a { background: rgba(60, 50, 40, 0.8); color: #ede4d4; border-color: rgba(255, 240, 220, 0.12); } [data-theme="light"] .map-top-right-links a:hover { background: rgba(107, 142, 168, 0.9); color: #fff; } /* Theme toggle button styling */ .theme-mode-toggle { background: var(--theme-toggle-bg); border: 2px solid var(--theme-toggle-border); color: var(--theme-toggle-text); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; box-shadow: 0 2px 10px var(--ctrl-btn-shadow); transition: all 0.3s ease; position: fixed; bottom: 310px; /* Above the auth/login button */ right: 20px; z-index: 1000; } .theme-mode-toggle:hover { transform: scale(1.1); box-shadow: 0 0 15px var(--ctrl-btn-hover-glow); } /* Smooth transition for theme switching */ #side-panel, .tab, #toggle-panel, .maplibregl-ctrl-group, .toggle-time-slider, .time-picker-button, .reset-time-button, .time-slider-container, #search-input, #search-button, #sort-select, #history-sort-select, #lists-sort-select, .video-item, #results-summary, #loading-indicator, .maplibregl-popup-content, .maplibregl-ctrl-attrib, .maplibregl-ctrl-scale, .theme-mode-toggle { transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }