/** * ============================================================ * HAIKYUU!! THEME - Speed / Teamwork / Verticality / Discipline * ============================================================ * Theme ID: haikyuu * Design: High-energy contrast, athletic structure, volleyball court aesthetic * * HOW THIS THEME FILE WORKS: * -------------------------- * 1. All styles use html[data-color="haikyuu"] selector * 2. Dark/light variants use html[data-theme="dark"][data-color="haikyuu"] * 3. When user selects this theme: * - applyColor('haikyuu') is called (js/theme/colors.js) * - Sets data-color="haikyuu" on element * - These CSS selectors activate * * COLOR PALETTE: * - Deep Navy #0E1A2B - primary surfaces * - Court Blue #1E3A5F - secondary sections * - Court Orange #F26A2E - primary action * - Chalk White #FFFFFF - text * - Muted Gray #C7CCD6 - secondary text * ============================================================ */ /* Fonts - Inter for headings/body, JetBrains Mono for stats */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); html[data-color="haikyuu"]{ --brand-h:18; } /* ===== CSS VARIABLES ===== */ html[data-color="haikyuu"] { --navy: #0E1A2B; --blue: #1E3A5F; --white: #FFFFFF; --gray: #C7CCD6; --orange: #F26A2E; --karasuno: #111111; --nekoma: #B11226; --aoba: #1F7A6E; --shiratorizawa: #5B2C83; --inarizaki: #C9A227; } /* ===== CORE COLOR SYSTEM ===== */ /* Dark Theme (Primary) */ html[data-theme="dark"][data-color="haikyuu"]{ --bg: #0E1A2B; /* Deep Navy */ --bg-primary: #0E1A2B; --bg-secondary: #1E3A5F; /* Court Blue */ --bg-tertiary: #253D5A; --card: rgba(30, 58, 95, 0.9); --text: #FFFFFF; /* Chalk White */ --text-primary: #FFFFFF; --text-secondary: #C7CCD6; --muted: #8A94A6; --line: #C7CCD6; /* Muted Gray */ --surface-2: #1E3A5F; --surface-3: #253D5A; --accent-primary: #F26A2E; /* Court Orange */ --accent-secondary: #FF8C5A; --accent-success: #2ECC71; --accent-warning: #FBC02D; --accent-danger: #B11226; --border-subtle: rgba(199,204,214,0.2); --border-strong: #C7CCD6; } /* Light Theme Variant */ html[data-theme="light"][data-color="haikyuu"]{ --bg: #F0F4F8; --bg-primary: #F0F4F8; --bg-secondary: #E0E8F0; --bg-tertiary: #D0DCE8; --card: rgba(255, 255, 255, 0.95); --text: #0E1A2B; --text-primary: #0E1A2B; --text-secondary: #1E3A5F; --muted: #5A6A80; --line: #1E3A5F; --surface-2: #E0E8F0; --surface-3: #D0DCE8; --accent-primary: #E05A20; --accent-secondary: #C94A15; --accent-success: #27AE60; --accent-warning: #D4A017; --accent-danger: #A0101F; --border-subtle: rgba(14,26,43,0.15); --border-strong: #1E3A5F; } /* ===== BACKGROUND ===== */ html[data-theme="dark"][data-color="haikyuu"] body{ background: linear-gradient(180deg, rgba(14, 26, 43, 0.85) 0%, rgba(21, 37, 53, 0.8) 50%, rgba(14, 26, 43, 0.85) 100%), url('../backrounds/haikyuu-backround.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } html[data-theme="light"][data-color="haikyuu"] body{ background: linear-gradient(180deg, rgba(240, 244, 248, 0.85) 0%, rgba(224, 232, 240, 0.8) 50%, rgba(240, 244, 248, 0.85) 100%), url('../backrounds/haikyuu-backround.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } /* Court line accent at top */ html[data-color="haikyuu"] body::before{ content: ''; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent 10%, #F26A2E 10%, #F26A2E 90%, transparent 90% ); z-index: 9999; } /* ===== TYPOGRAPHY ===== */ /* Headings: Inter 800, uppercase, letter-spacing 0.05em */ html[data-color="haikyuu"] h1, html[data-color="haikyuu"] h2, html[data-color="haikyuu"] h3, html[data-color="haikyuu"] .onboard-title, html[data-color="haikyuu"] .modal-header strong, html[data-color="haikyuu"] .kiosk-modal-title, html[data-color="haikyuu"] .label{ font-family: 'Inter', -apple-system, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } /* Body: Inter 400-500, line-height 1.6 */ html[data-color="haikyuu"], html[data-color="haikyuu"] body{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; line-height: 1.6; } /* Stats/Scores: JetBrains Mono */ html[data-color="haikyuu"] .clock, html[data-color="haikyuu"] #clockOut, html[data-color="haikyuu"] .countdown, html[data-color="haikyuu"] #elapsedOut, html[data-color="haikyuu"] #leftOut, html[data-color="haikyuu"] #nextInOut, html[data-color="haikyuu"] code, html[data-color="haikyuu"] .kbd{ font-family: 'JetBrains Mono', monospace !important; font-weight: 600; } /* Clock styling - Court Orange accent */ html[data-theme="dark"][data-color="haikyuu"] #clockOut{ color: #F26A2E; font-family: 'JetBrains Mono', monospace !important; font-weight: 700; letter-spacing: 0.02em; text-shadow: 0 2px 8px rgba(242, 106, 46, 0.3); } html[data-theme="light"][data-color="haikyuu"] #clockOut{ color: #E05A20; font-family: 'JetBrains Mono', monospace !important; font-weight: 700; } /* ===== CONTAINER ===== */ html[data-color="haikyuu"] .container{ border: 2px solid #C7CCD6; border-radius: 4px; background: rgba(30, 58, 95, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); } html[data-theme="light"][data-color="haikyuu"] .container{ background: rgba(255, 255, 255, 0.9); border-color: #1E3A5F; box-shadow: 0 4px 20px rgba(14, 26, 43, 0.15); } /* ===== CARDS ===== */ /* Sharp corners (0-4px), athletic minimal */ html[data-color="haikyuu"] .card{ border: 2px solid #C7CCD6; border-radius: 4px; background: rgba(30, 58, 95, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: all 140ms ease-out; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } html[data-color="haikyuu"] .card:hover{ border-color: #F26A2E; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } html[data-theme="light"][data-color="haikyuu"] .card{ background: rgba(255, 255, 255, 0.9); border-color: rgba(30, 58, 95, 0.2); box-shadow: 0 2px 8px rgba(14, 26, 43, 0.1); } html[data-theme="light"][data-color="haikyuu"] .card:hover{ border-color: #E05A20; box-shadow: 0 4px 16px rgba(242, 106, 46, 0.15); } /* Themed cards - Court Orange accent */ html[data-color="haikyuu"] .themed-card::before{ background: linear-gradient(135deg, #F26A2E 0%, #D85A20 100%); } html[data-color="haikyuu"] .themed-card{ color: #FFFFFF; border: 2px solid #F26A2E; border-radius: 4px; box-shadow: 0 4px 16px rgba(242, 106, 46, 0.2); } html[data-color="haikyuu"] .themed-card .label, html[data-color="haikyuu"] .themed-card .muted, html[data-color="haikyuu"] .themed-card #currentName, html[data-color="haikyuu"] .themed-card #currentRoom, html[data-color="haikyuu"] .themed-card #currentTimeRange, html[data-color="haikyuu"] .themed-card #elapsedOut, html[data-color="haikyuu"] .themed-card #leftOut, html[data-color="haikyuu"] .themed-card #nextName, html[data-color="haikyuu"] .themed-card #nextRoom, html[data-color="haikyuu"] .themed-card #nextTimeRange, html[data-color="haikyuu"] .themed-card #nextInOut, html[data-color="haikyuu"] .themed-card #untilOut{ color: rgba(255, 255, 255, 0.95) !important; } /* ===== PILLS ===== */ html[data-color="haikyuu"] .pill{ border: 2px solid #C7CCD6; background: rgba(30, 58, 95, 0.8); color: #FFFFFF; font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75em; border-radius: 2px; transition: all 120ms ease-out; } html[data-color="haikyuu"] .pill:hover{ border-color: #F26A2E; color: #F26A2E; } html[data-theme="light"][data-color="haikyuu"] .pill{ background: rgba(30, 58, 95, 0.1); border-color: #1E3A5F; color: #0E1A2B; } /* ===== PROGRESS BAR ===== */ html[data-color="haikyuu"] .progress{ background: linear-gradient(90deg, #F26A2E, #FF8C5A); border-radius: 2px; } html[data-color="haikyuu"] .progress-wrap{ background: rgba(30, 58, 95, 0.5); border: 2px solid #C7CCD6; border-radius: 2px; } /* ===== BUTTONS ===== */ /* Primary: Court Orange, white text */ html[data-color="haikyuu"] .btn{ background: #F26A2E; color: #FFFFFF; border: 2px solid #FFFFFF; font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 2px; transition: all 120ms ease-out; box-shadow: 0 2px 6px rgba(242, 106, 46, 0.3); } html[data-color="haikyuu"] .btn:hover{ background: #D85A20; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(242, 106, 46, 0.4); } html[data-color="haikyuu"] .btn:active{ transform: translateY(0); } /* Secondary buttons */ html[data-color="haikyuu"] .icon-btn{ border: 2px solid transparent; border-radius: 4px; transition: all 120ms ease-out; } html[data-color="haikyuu"] .icon-btn:hover{ background: rgba(255, 255, 255, 0.12); border-color: #C7CCD6; transform: translateY(-2px); } /* ===== STATUS BADGES ===== */ html[data-color="haikyuu"] .status--current{ background: #F26A2E; color: #FFFFFF; border: none; font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px; } html[data-color="haikyuu"] .status--next{ background: rgba(199, 204, 214, 0.15); color: #C7CCD6; border: 2px solid rgba(199, 204, 214, 0.4); font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; border-radius: 2px; } html[data-color="haikyuu"] .status--done{ background: rgba(46, 204, 113, 0.15); color: #2ECC71; } /* ===== CHIPS ===== */ html[data-color="haikyuu"] .chip{ border: 2px solid #C7CCD6; font-family: 'Inter', sans-serif; font-weight: 600; border-radius: 2px; background: transparent; transition: all 120ms ease-out; } html[data-color="haikyuu"] .chip[aria-pressed="true"]{ background: rgba(242, 106, 46, 0.15); border-color: #F26A2E; color: #F26A2E; } html[data-color="haikyuu"] .chip:hover{ border-color: #FF8C5A; color: #FF8C5A; transform: translateY(-2px); } html[data-theme="light"][data-color="haikyuu"] .chip{ background: rgba(255, 255, 255, 0.8); border-color: rgba(30, 58, 95, 0.2); } html[data-theme="light"][data-color="haikyuu"] .chip[aria-pressed="true"]{ background: rgba(242, 106, 46, 0.1); border-color: #E05A20; color: #E05A20; } /* ===== SCHEDULE TABLE ===== */ html[data-color="haikyuu"] .schedule th{ border-bottom: 4px solid #F26A2E; color: #FFFFFF; font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(30, 58, 95, 0.6); } html[data-color="haikyuu"] .schedule tr.active{ background: linear-gradient(90deg, rgba(242, 106, 46, 0.2), rgba(242, 106, 46, 0.08), transparent); border-left: 4px solid #F26A2E; } html[data-color="haikyuu"] .schedule td{ border-bottom: 2px solid rgba(199, 204, 214, 0.2); font-family: 'JetBrains Mono', monospace; } html[data-color="haikyuu"] .schedule tbody tr{ background: rgba(30, 58, 95, 0.4); transition: all 120ms ease-out; } html[data-color="haikyuu"] .schedule tbody tr:hover{ background: rgba(30, 58, 95, 0.6); transform: translateY(-1px); } html[data-theme="light"][data-color="haikyuu"] .schedule th{ color: #0E1A2B; background: rgba(30, 58, 95, 0.05); border-bottom-color: #E05A20; } html[data-theme="light"][data-color="haikyuu"] .schedule td{ border-bottom-color: rgba(30, 58, 95, 0.1); } html[data-theme="light"][data-color="haikyuu"] .schedule tbody tr{ background: rgba(255, 255, 255, 0.6); } /* ===== DIALOGS/MODALS ===== */ html[data-color="haikyuu"] dialog{ border: 2px solid #C7CCD6; border-radius: 4px; background: rgba(14, 26, 43, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); } html[data-theme="light"][data-color="haikyuu"] dialog{ background: rgba(240, 244, 248, 0.98); border-color: #1E3A5F; box-shadow: 0 16px 48px rgba(14, 26, 43, 0.2); } html[data-color="haikyuu"] dialog::backdrop{ background: rgba(14, 26, 43, 0.9); } html[data-color="haikyuu"] .modal-header{ border-bottom: 2px solid #C7CCD6; } html[data-color="haikyuu"] .modal-header strong{ font-family: 'Inter', sans-serif; font-weight: 800; color: #F26A2E; text-transform: uppercase; letter-spacing: 0.05em; } html[data-theme="light"][data-color="haikyuu"] .modal-header strong{ color: #E05A20; } /* ===== ONBOARDING ===== */ html[data-color="haikyuu"] .onboard-title{ font-family: 'Inter', sans-serif !important; font-weight: 800 !important; color: #F26A2E !important; text-transform: uppercase; letter-spacing: 0.05em; } html[data-color="haikyuu"] .onboard-card{ border: 2px solid #C7CCD6; background: rgba(14, 26, 43, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); border-radius: 4px; } html[data-theme="light"][data-color="haikyuu"] .onboard-card{ background: rgba(240, 244, 248, 0.95); border-color: #1E3A5F; } /* ===== INPUTS ===== */ html[data-color="haikyuu"] input, html[data-color="haikyuu"] select, html[data-color="haikyuu"] textarea{ border: 2px solid #C7CCD6; border-radius: 2px; background: rgba(30, 58, 95, 0.8); color: #FFFFFF; font-family: 'Inter', sans-serif; transition: all 120ms ease-out; } html[data-color="haikyuu"] input:focus, html[data-color="haikyuu"] select:focus, html[data-color="haikyuu"] textarea:focus{ border-color: #F26A2E; outline: none; box-shadow: 0 0 0 2px rgba(242, 106, 46, 0.2); } html[data-theme="light"][data-color="haikyuu"] input, html[data-theme="light"][data-color="haikyuu"] select, html[data-theme="light"][data-color="haikyuu"] textarea{ background: rgba(255, 255, 255, 0.9); border-color: rgba(30, 58, 95, 0.25); color: #0E1A2B; } /* ===== TABS ===== */ html[data-color="haikyuu"] .tabs{ border-bottom: 2px solid #C7CCD6; } html[data-color="haikyuu"] .tab{ color: #FFFFFF; font-family: 'Inter', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; transition: all 120ms ease-out; } html[data-color="haikyuu"] .tab:hover{ color: #FF8C5A; } html[data-color="haikyuu"] .tab[aria-selected="true"]{ color: #FFFFFF; border-bottom: 4px solid #F26A2E; } /* ===== QUICK ACTIONS ===== */ html[data-color="haikyuu"] .quick-action{ border: 2px solid #C7CCD6; background: transparent; color: #FFFFFF; font-family: 'Inter', sans-serif; font-weight: 600; border-radius: 2px; transition: all 120ms ease-out; } html[data-color="haikyuu"] .quick-action:hover{ background: rgba(255, 255, 255, 0.12); border-color: #FFFFFF; transform: translateY(-2px); } html[data-color="haikyuu"] .quick-action.danger{ border-color: rgba(177, 18, 38, 0.5); color: #B11226; } html[data-color="haikyuu"] .quick-action.danger:hover{ background: rgba(177, 18, 38, 0.1); border-color: #B11226; } /* ===== SCROLLBAR ===== */ html[data-color="haikyuu"] ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #F26A2E, #D85A20); border-radius: 2px; } html[data-color="haikyuu"] ::-webkit-scrollbar-track{ background: rgba(30, 58, 95, 0.5); } /* ===== KIOSK MODE ===== */ html[data-color="haikyuu"] .kiosk-modal-content{ border: 2px solid #C7CCD6; background: rgba(14, 26, 43, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 4px; } html[data-color="haikyuu"] .kiosk-modal-title{ font-family: 'Inter', sans-serif; font-weight: 800; color: #F26A2E; text-transform: uppercase; letter-spacing: 0.05em; } html[data-color="haikyuu"] .kiosk-key{ background: rgba(30, 58, 95, 0.9); border: 2px solid #C7CCD6; color: #FFFFFF; font-family: 'JetBrains Mono', monospace; font-weight: 600; border-radius: 4px; transition: all 120ms ease-out; } html[data-color="haikyuu"] .kiosk-key:hover{ background: #F26A2E; border-color: #F26A2E; color: #FFFFFF; transform: translateY(-2px); } html[data-color="haikyuu"] .kiosk-pin-dot{ background: rgba(199, 204, 214, 0.2); border: 2px solid #C7CCD6; border-radius: 2px; } html[data-color="haikyuu"] .kiosk-pin-dot.filled{ background: #F26A2E; border-color: #F26A2E; } /* ===== EDITOR ===== */ html[data-color="haikyuu"] .blocks-container{ border: 2px dashed #C7CCD6; background: rgba(30, 58, 95, 0.4); border-radius: 4px; } /* ===== DAY OVER MESSAGE ===== */ html[data-color="haikyuu"] .dayover-message{ border: 2px solid #C7CCD6; background: rgba(14, 26, 43, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; } /* ===== LINKS ===== */ html[data-color="haikyuu"] a{ color: #F26A2E; text-decoration: none; transition: all 120ms ease-out; } html[data-color="haikyuu"] a:hover{ color: #FF8C5A; text-decoration: underline; } html[data-theme="light"][data-color="haikyuu"] a{ color: #E05A20; } html[data-theme="light"][data-color="haikyuu"] a:hover{ color: #C94A15; } /* ===== HELP TEXT ===== */ html[data-color="haikyuu"] .help{ color: #C7CCD6; } /* ===== KBD ===== */ html[data-color="haikyuu"] .kbd{ background: rgba(30, 58, 95, 0.9); border: 2px solid #C7CCD6; color: #FFFFFF; font-family: 'JetBrains Mono', monospace; border-radius: 2px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); } /* ===== SELECTION ===== */ html[data-color="haikyuu"] ::selection{ background: rgba(242, 106, 46, 0.4); color: #FFFFFF; } /* ===== MUTED TEXT COLORS ===== */ html[data-theme="dark"][data-color="haikyuu"] .label{ color: #F26A2E; font-size: 0.8em; } html[data-theme="dark"][data-color="haikyuu"] .muted, html[data-theme="dark"][data-color="haikyuu"] #dateOut{ color: #C7CCD6; } html[data-theme="dark"][data-color="haikyuu"] #schoolState{ color: #2ECC71; border-color: rgba(46, 204, 113, 0.4); } html[data-theme="light"][data-color="haikyuu"] .label{ color: #E05A20; } html[data-theme="light"][data-color="haikyuu"] .muted, html[data-theme="light"][data-color="haikyuu"] #dateOut{ color: #5A6A80; } /* ===== MOTION - Fast, athletic, no bounce ===== */ /* Duration: 100-160ms, easing: ease-out */ /* Effects: color shift, 2px translate only */