/** * ============================================================ * DEATH NOTE THEME - Gothic / Dark / Suspenseful * ============================================================ * Theme ID: deathnote * Design: Deep blacks, blood reds, muted gold, gothic atmosphere * * HOW THIS THEME FILE WORKS: * -------------------------- * 1. All styles use html[data-color="deathnote"] selector * 2. Dark/light variants use html[data-theme="dark"][data-color="deathnote"] * 3. When user selects this theme: * - applyColor('deathnote') is called (js/theme/colors.js) * - Sets data-color="deathnote" on element * - These CSS selectors activate * ============================================================ */ /* Fonts - Gothic/Serif for headings, clean sans for body */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Crimson+Text:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); html[data-color="deathnote"]{ --brand-h:0; } /* ===== CORE COLOR SYSTEM ===== */ /* Dark Theme (Primary - Death Note is inherently dark) */ html[data-theme="dark"][data-color="deathnote"]{ --bg: #040615; /* Void black */ --bg-primary: #040615; --bg-secondary: #0A0C18; /* Deep navy-black */ --bg-tertiary: #10131F; /* Depth layers */ --card: rgba(10, 12, 24, 0.92); --text: #E2E3DE; /* Off-white parchment */ --text-primary: #E2E3DE; --text-secondary: #A8AAA5; --muted: #6B6D68; --line: rgba(156, 47, 51, 0.15); --surface-2: #0A0C18; --surface-3: #10131F; --accent-primary: #9C2F33; /* Blood Red */ --accent-secondary: #F1C672; /* Muted Gold */ --accent-tertiary: #4A4A52; /* Shinigami Gray */ --border-subtle: rgba(156, 47, 51, 0.2); --border-strong: #9C2F33; } /* Light Theme Variant */ html[data-theme="light"][data-color="deathnote"]{ --bg: #F5F4F0; --bg-primary: #F5F4F0; --bg-secondary: #EBE9E3; --bg-tertiary: #E0DED6; --card: rgba(255, 255, 255, 0.95); --text: #1A1A1C; --text-primary: #1A1A1C; --text-secondary: #3A3A3E; --muted: #6A6A70; --line: rgba(156, 47, 51, 0.12); --surface-2: #EBE9E3; --surface-3: #E0DED6; --accent-primary: #8A2428; --accent-secondary: #C9A855; --accent-tertiary: #5A5A62; --border-subtle: rgba(156, 47, 51, 0.12); --border-strong: #8A2428; } /* ===== TYPOGRAPHY ===== */ /* Headings: Cinzel - Gothic serif, dramatic */ html[data-color="deathnote"] h1, html[data-color="deathnote"] h2, html[data-color="deathnote"] h3, html[data-color="deathnote"] .onboard-title, html[data-color="deathnote"] .modal-header strong, html[data-color="deathnote"] .kiosk-modal-title{ font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.1; } /* Body: Crimson Text - Elegant readable serif */ html[data-color="deathnote"], html[data-color="deathnote"] body{ font-family: 'Crimson Text', Georgia, serif; font-size: 16px; } /* Mono: IBM Plex Mono */ html[data-color="deathnote"] .clock, html[data-color="deathnote"] #clockOut, html[data-color="deathnote"] .countdown, html[data-color="deathnote"] #elapsedOut, html[data-color="deathnote"] #leftOut, html[data-color="deathnote"] #nextInOut, html[data-color="deathnote"] code, html[data-color="deathnote"] .kbd{ font-family: 'IBM Plex Mono', monospace !important; font-weight: 500; } /* Clock - Blood red with subtle glow */ html[data-theme="dark"][data-color="deathnote"] #clockOut{ color: #9C2F33; text-shadow: 0 0 10px rgba(156, 47, 51, 0.6), 0 0 30px rgba(156, 47, 51, 0.3), 0 0 50px rgba(156, 47, 51, 0.15); font-family: 'Cinzel', serif !important; font-weight: 600; letter-spacing: 0.08em; } html[data-theme="light"][data-color="deathnote"] #clockOut{ color: #8A2428; text-shadow: 0 2px 8px rgba(138, 36, 40, 0.25); font-family: 'Cinzel', serif !important; font-weight: 600; } /* ===== BACKGROUND & LAYOUT ===== */ html[data-color="deathnote"] body{ background: linear-gradient(180deg, rgba(4, 6, 21, 0.92) 0%, rgba(10, 12, 24, 0.88) 50%, rgba(4, 6, 21, 0.92) 100% ), url('../backrounds/death-note-backround.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } html[data-theme="light"][data-color="deathnote"] body{ background: linear-gradient(180deg, rgba(245, 244, 240, 0.94) 0%, rgba(235, 233, 227, 0.9) 50%, rgba(245, 244, 240, 0.94) 100% ), url('../backrounds/death-note-backround.jpg'); background-size: cover; background-position: center; background-attachment: fixed; } /* Container - Notebook page style */ html[data-color="deathnote"] .container{ border: 1px solid rgba(156, 47, 51, 0.25); border-radius: 2px; background: rgba(10, 12, 24, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 4px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(156, 47, 51, 0.1), inset 0 1px 0 rgba(241, 198, 114, 0.05); position: relative; } html[data-color="deathnote"] .container::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #9C2F33, #F1C672, #9C2F33, transparent); opacity: 0.7; } html[data-theme="light"][data-color="deathnote"] .container{ background: rgba(255, 255, 255, 0.95); border-color: rgba(156, 47, 51, 0.15); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); } /* ===== CARDS ===== */ html[data-color="deathnote"] .card{ border: 1px solid rgba(156, 47, 51, 0.15); border-radius: 2px; background: rgba(16, 19, 31, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 200ms ease; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } html[data-color="deathnote"] .card:hover{ border-color: rgba(156, 47, 51, 0.4); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(156, 47, 51, 0.1); } html[data-theme="light"][data-color="deathnote"] .card{ background: rgba(255, 255, 255, 0.92); border-color: rgba(156, 47, 51, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } html[data-theme="light"][data-color="deathnote"] .card:hover{ border-color: rgba(156, 47, 51, 0.3); box-shadow: 0 4px 15px rgba(156, 47, 51, 0.1); } /* Themed cards - Blood red gradient */ html[data-color="deathnote"] .themed-card::before{ background: linear-gradient(135deg, rgba(156, 47, 51, 0.95), rgba(120, 35, 38, 0.9)); } html[data-color="deathnote"] .themed-card{ color: #E2E3DE; border: 1px solid rgba(241, 198, 114, 0.4); border-radius: 2px; box-shadow: 0 4px 20px rgba(156, 47, 51, 0.3), inset 0 1px 0 rgba(241, 198, 114, 0.15); } html[data-color="deathnote"] .themed-card .label, html[data-color="deathnote"] .themed-card .muted, html[data-color="deathnote"] .themed-card #currentName, html[data-color="deathnote"] .themed-card #currentRoom, html[data-color="deathnote"] .themed-card #currentTimeRange, html[data-color="deathnote"] .themed-card #elapsedOut, html[data-color="deathnote"] .themed-card #leftOut, html[data-color="deathnote"] .themed-card #nextName, html[data-color="deathnote"] .themed-card #nextRoom, html[data-color="deathnote"] .themed-card #nextTimeRange, html[data-color="deathnote"] .themed-card #nextInOut, html[data-color="deathnote"] .themed-card #untilOut{ color: rgba(255, 255, 255, 0.95) !important; } /* ===== PILLS ===== */ html[data-color="deathnote"] .pill{ border: 1px solid rgba(156, 47, 51, 0.2); background: rgba(16, 19, 31, 0.8); color: #A8AAA5; font-weight: 600; border-radius: 2px; font-family: 'Cinzel', serif; letter-spacing: 0.05em; transition: all 200ms ease; } html[data-color="deathnote"] .pill:hover{ border-color: #F1C672; color: #F1C672; box-shadow: 0 0 12px rgba(241, 198, 114, 0.2); } html[data-theme="light"][data-color="deathnote"] .pill{ background: rgba(255, 255, 255, 0.85); border-color: rgba(156, 47, 51, 0.15); color: #3A3A3E; } /* ===== PROGRESS BAR ===== */ html[data-color="deathnote"] .progress{ background: linear-gradient(90deg, #9C2F33, #B8383C); box-shadow: 0 0 10px rgba(156, 47, 51, 0.4); border-radius: 1px; } html[data-color="deathnote"] .progress-wrap{ background: rgba(16, 19, 31, 0.6); border: 1px solid rgba(156, 47, 51, 0.15); border-radius: 2px; } /* ===== BUTTONS ===== */ html[data-color="deathnote"] .btn{ background: #9C2F33; color: #E2E3DE; border: 1px solid rgba(241, 198, 114, 0.3); font-family: 'Cinzel', serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 2px; transition: all 180ms ease; box-shadow: 0 2px 10px rgba(156, 47, 51, 0.3); } html[data-color="deathnote"] .btn:hover{ background: #B8383C; border-color: #F1C672; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(156, 47, 51, 0.4), 0 0 15px rgba(241, 198, 114, 0.15); } html[data-color="deathnote"] .btn:active{ transform: translateY(0); } /* Icon buttons */ html[data-color="deathnote"] .icon-btn{ border: 1px solid transparent; border-radius: 2px; transition: all 180ms ease; } html[data-color="deathnote"] .icon-btn:hover{ background: rgba(156, 47, 51, 0.15); border-color: rgba(156, 47, 51, 0.4); transform: translateY(-1px); } html[data-color="deathnote"] .icon-btn:hover .icon{ filter: drop-shadow(0 0 4px rgba(156, 47, 51, 0.5)); } /* ===== STATUS BADGES ===== */ html[data-color="deathnote"] .status--current{ background: #9C2F33; color: #E2E3DE; border: 1px solid rgba(241, 198, 114, 0.3); font-family: 'Cinzel', serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 2px; box-shadow: 0 0 12px rgba(156, 47, 51, 0.35); } html[data-color="deathnote"] .status--next{ background: rgba(241, 198, 114, 0.1); color: #F1C672; border: 1px solid rgba(241, 198, 114, 0.35); font-family: 'Cinzel', serif; font-weight: 600; text-transform: uppercase; border-radius: 2px; } html[data-color="deathnote"] .status--done{ background: rgba(107, 109, 104, 0.2); color: #6B6D68; text-decoration: line-through; } /* ===== CHIPS ===== */ html[data-color="deathnote"] .chip{ border: 1px solid rgba(156, 47, 51, 0.2); font-weight: 600; border-radius: 2px; background: rgba(16, 19, 31, 0.6); font-family: 'Cinzel', serif; letter-spacing: 0.03em; transition: all 180ms ease; } html[data-color="deathnote"] .chip[aria-pressed="true"]{ background: rgba(156, 47, 51, 0.2); border-color: #9C2F33; color: #9C2F33; box-shadow: 0 0 10px rgba(156, 47, 51, 0.15); } html[data-color="deathnote"] .chip:hover{ border-color: #F1C672; color: #F1C672; transform: translateY(-1px); } html[data-theme="light"][data-color="deathnote"] .chip{ background: rgba(255, 255, 255, 0.85); border-color: rgba(156, 47, 51, 0.12); } /* ===== SCHEDULE TABLE ===== */ html[data-color="deathnote"] .schedule th{ border-bottom: 2px solid #9C2F33; color: #9C2F33; font-family: 'Cinzel', serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; background: linear-gradient(180deg, rgba(156, 47, 51, 0.08), transparent); } html[data-color="deathnote"] .schedule tr.active{ background: linear-gradient(90deg, rgba(156, 47, 51, 0.2), rgba(156, 47, 51, 0.08), transparent); border-left: 2px solid #F1C672; } html[data-color="deathnote"] .schedule td{ border-bottom: 1px solid rgba(156, 47, 51, 0.08); } html[data-color="deathnote"] .schedule tbody tr{ background: rgba(10, 12, 24, 0.4); transition: all 180ms ease; } html[data-color="deathnote"] .schedule tbody tr:hover{ background: rgba(156, 47, 51, 0.06); } html[data-theme="light"][data-color="deathnote"] .schedule th{ color: #8A2428; } html[data-theme="light"][data-color="deathnote"] .schedule td{ border-bottom-color: rgba(156, 47, 51, 0.08); } /* ===== DIALOGS/MODALS ===== */ html[data-color="deathnote"] dialog{ border: 1px solid rgba(156, 47, 51, 0.3); border-radius: 4px; background: rgba(4, 6, 21, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(156, 47, 51, 0.15), inset 0 1px 0 rgba(241, 198, 114, 0.05); } html[data-theme="light"][data-color="deathnote"] dialog{ background: rgba(255, 255, 255, 0.97); border-color: rgba(156, 47, 51, 0.15); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); } html[data-color="deathnote"] dialog::backdrop{ background: rgba(4, 6, 21, 0.94); backdrop-filter: blur(4px); } html[data-color="deathnote"] .modal-header{ border-bottom: 1px solid rgba(156, 47, 51, 0.25); } html[data-color="deathnote"] .modal-header strong{ font-family: 'Cinzel', serif; color: #9C2F33; text-transform: uppercase; letter-spacing: 0.12em; } /* ===== ONBOARDING ===== */ html[data-color="deathnote"] .onboard-title{ font-family: 'Cinzel', serif !important; color: #9C2F33 !important; text-transform: uppercase; letter-spacing: 0.12em; text-shadow: 0 0 30px rgba(156, 47, 51, 0.4); } html[data-color="deathnote"] .onboard-card{ border: 1px solid rgba(156, 47, 51, 0.3); background: rgba(4, 6, 21, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(241, 198, 114, 0.05); border-radius: 4px; } html[data-theme="light"][data-color="deathnote"] .onboard-card{ background: rgba(255, 255, 255, 0.96); } /* ===== INPUTS ===== */ html[data-color="deathnote"] input, html[data-color="deathnote"] select, html[data-color="deathnote"] textarea{ border: 1px solid rgba(156, 47, 51, 0.2); border-radius: 2px; background: rgba(10, 12, 24, 0.8); color: #E2E3DE; font-family: 'Crimson Text', serif; transition: all 180ms ease; } html[data-color="deathnote"] input:focus, html[data-color="deathnote"] select:focus, html[data-color="deathnote"] textarea:focus{ border-color: #F1C672; outline: none; box-shadow: 0 0 0 2px rgba(241, 198, 114, 0.15), 0 0 15px rgba(241, 198, 114, 0.1); } html[data-theme="light"][data-color="deathnote"] input, html[data-theme="light"][data-color="deathnote"] select, html[data-theme="light"][data-color="deathnote"] textarea{ background: rgba(255, 255, 255, 0.9); border-color: rgba(156, 47, 51, 0.15); color: #1A1A1C; } html[data-theme="light"][data-color="deathnote"] input:focus, html[data-theme="light"][data-color="deathnote"] select:focus, html[data-theme="light"][data-color="deathnote"] textarea:focus{ border-color: #C9A855; box-shadow: 0 0 0 2px rgba(201, 168, 85, 0.12); } /* ===== TABS ===== */ html[data-color="deathnote"] .tabs{ border-bottom: 1px solid rgba(156, 47, 51, 0.15); } html[data-color="deathnote"] .tab{ color: #A8AAA5; font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: 0.05em; transition: all 180ms ease; } html[data-color="deathnote"] .tab:hover{ color: #F1C672; } html[data-color="deathnote"] .tab[aria-selected="true"]{ color: #9C2F33; border-bottom: 2px solid #9C2F33; } /* ===== QUICK ACTIONS ===== */ html[data-color="deathnote"] .quick-action{ border: 1px solid rgba(156, 47, 51, 0.15); background: rgba(16, 19, 31, 0.6); color: #A8AAA5; font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: 0.03em; border-radius: 2px; transition: all 180ms ease; } html[data-color="deathnote"] .quick-action:hover{ background: rgba(241, 198, 114, 0.08); border-color: #F1C672; color: #F1C672; transform: translateY(-1px); } html[data-color="deathnote"] .quick-action.danger{ border-color: rgba(156, 47, 51, 0.4); color: #9C2F33; } html[data-color="deathnote"] .quick-action.danger:hover{ background: rgba(156, 47, 51, 0.12); border-color: #9C2F33; } /* ===== SCROLLBAR ===== */ html[data-color="deathnote"] ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, #9C2F33, #7A2528); border-radius: 1px; } html[data-color="deathnote"] ::-webkit-scrollbar-track{ background: rgba(10, 12, 24, 0.6); } /* ===== KIOSK MODE ===== */ html[data-color="deathnote"] .kiosk-modal-content{ border: 1px solid rgba(156, 47, 51, 0.35); background: rgba(4, 6, 21, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 4px; box-shadow: 0 0 60px rgba(156, 47, 51, 0.15); } html[data-color="deathnote"] .kiosk-modal-title{ font-family: 'Cinzel', serif; color: #9C2F33; text-transform: uppercase; letter-spacing: 0.12em; text-shadow: 0 0 20px rgba(156, 47, 51, 0.3); } html[data-color="deathnote"] .kiosk-key{ background: rgba(16, 19, 31, 0.9); border: 1px solid rgba(156, 47, 51, 0.2); color: #E2E3DE; font-family: 'IBM Plex Mono', monospace; font-weight: 500; border-radius: 4px; transition: all 180ms ease; } html[data-color="deathnote"] .kiosk-key:hover{ background: #9C2F33; border-color: #F1C672; color: #E2E3DE; transform: scale(0.98); box-shadow: 0 0 15px rgba(156, 47, 51, 0.35); } html[data-color="deathnote"] .kiosk-pin-dot{ background: rgba(156, 47, 51, 0.1); border: 2px solid rgba(156, 47, 51, 0.4); border-radius: 50%; } html[data-color="deathnote"] .kiosk-pin-dot.filled{ background: #9C2F33; border-color: #F1C672; box-shadow: 0 0 10px rgba(156, 47, 51, 0.4); } /* ===== EDITOR ===== */ html[data-color="deathnote"] .blocks-container{ border: 1px dashed rgba(156, 47, 51, 0.3); background: rgba(10, 12, 24, 0.5); border-radius: 2px; } /* ===== DAY OVER MESSAGE ===== */ html[data-color="deathnote"] .dayover-message{ border: 1px solid rgba(156, 47, 51, 0.35); background: rgba(4, 6, 21, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 4px; box-shadow: 0 0 40px rgba(156, 47, 51, 0.12); } /* ===== LINKS ===== */ html[data-color="deathnote"] a{ color: #F1C672; text-decoration: none; transition: all 180ms ease; } html[data-color="deathnote"] a:hover{ color: #9C2F33; text-decoration: underline; } /* ===== HELP TEXT ===== */ html[data-color="deathnote"] .help{ color: #6B6D68; font-style: italic; } /* ===== KBD ===== */ html[data-color="deathnote"] .kbd{ background: rgba(16, 19, 31, 0.9); border: 1px solid rgba(156, 47, 51, 0.2); color: #F1C672; font-family: 'IBM Plex Mono', monospace; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } /* ===== SELECTION ===== */ html[data-color="deathnote"] ::selection{ background: rgba(156, 47, 51, 0.4); color: #E2E3DE; } /* ===== MUTED TEXT COLORS ===== */ html[data-theme="dark"][data-color="deathnote"] .label, html[data-theme="dark"][data-color="deathnote"] .muted, html[data-theme="dark"][data-color="deathnote"] #dateOut{ color: #A8AAA5; } html[data-theme="dark"][data-color="deathnote"] #schoolState{ color: #F1C672; border-color: rgba(241, 198, 114, 0.3); } html[data-theme="light"][data-color="deathnote"] .label, html[data-theme="light"][data-color="deathnote"] .muted, html[data-theme="light"][data-color="deathnote"] #dateOut{ color: #6A6A70; } /* ===== BOTTOM ACCENT LINE ===== */ html[data-color="deathnote"] .container::after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #9C2F33, #F1C672, #9C2F33, transparent); opacity: 0.5; } /* ===== NOTEBOOK LINES EFFECT ===== */ html[data-theme="dark"][data-color="deathnote"]::before{ content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 30px, rgba(156, 47, 51, 0.02) 30px, rgba(156, 47, 51, 0.02) 31px ); z-index: 9998; } /* Subtle vignette */ html[data-theme="dark"][data-color="deathnote"]::after{ content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(4, 6, 21, 0.4) 100%); z-index: 9999; }