/* ====================================================================== BLACKPINK THEME Luxury + Aggression + Minimalism ====================================================================== HOW TO CREATE A NEW THEME (Use this file as a template): -------------------------------------------------------- STEP 1: Create your theme CSS file ----------------------------------- - Copy this file and rename it (e.g., themes/yourtheme.css) - Replace all "blackpink" with "yourtheme" - Replace all "--bp-" prefixes with "--yt-" (your initials) STEP 2: Set your brand hue -------------------------- - Change --brand-h value (0-360 color wheel degrees) - Example: 336 = pink, 0 = red, 120 = green, 240 = blue STEP 3: Define your color palette --------------------------------- - Update the color values in both dark and light theme blocks - Define your custom token variables (--yt-primary, --yt-accent, etc.) STEP 4: Set your background image --------------------------------- - Add your background image to /backrounds/ folder - Update the body background url() path STEP 5: Register your theme in script.js ----------------------------------------- - Add 'yourtheme' to the valid array in applyColor() function - Add your playlist URL to themeMusicMap (if you have music) STEP 6: Add theme to index.html -------------------------------- - Add to your CSS in - Add theme button chip in the Custom Themes section After these steps, your theme will work with "Save changes"! ====================================================================== */ html[data-color="blackpink"]{ --brand-h:336; } html[data-theme="dark"][data-color="blackpink"]{ --bg: #000000; --card: #0B0B0B; --text: #FFFFFF; --muted: #A6A6A6; --line: #1A1A1A; --surface-2: #0D0D0D; --surface-3: #141414; --brand: #FF2E88; --brand-2: #FF5DA2; --brand-3: #FF7AB3; --brand-4: #FF9AC6; --danger: #FF3B3B; } html[data-theme="light"][data-color="blackpink"]{ --bg: #000000; --card: #0B0B0B; --text: #FFFFFF; --muted: #A6A6A6; --line: #1A1A1A; --surface-2: #0D0D0D; --surface-3: #141414; --brand: #FF2E88; --brand-2: #FF5DA2; --brand-3: #FF7AB3; --brand-4: #FF9AC6; --danger: #FF3B3B; } /* BP Core Brand Tokens */ html[data-color="blackpink"]{ /* Primary Palette */ --bp-black: #000000; --bp-soft-black: #0B0B0B; --bp-pink: #FF2E88; --bp-pink-hover: #FF5DA2; /* Secondary Palette */ --bp-white: #FFFFFF; --bp-muted-gray: #A6A6A6; --bp-divider-gray: #1A1A1A; /* Utility Colors */ --bp-success: #3DFF9E; --bp-warning: #FFD23F; --bp-error: #FF3B3B; /* Text Hierarchy */ --bp-text-primary: #FFFFFF; --bp-text-secondary: #E0E0E0; --bp-text-muted: #A6A6A6; /* Shadows with neon pink glow */ --bp-shadow: 0 8px 32px rgba(0, 0, 0, 0.7); --bp-shadow-glow: 0 0 20px rgba(255, 46, 136, 0.35); --bp-shadow-glow-intense: 0 0 30px rgba(255, 46, 136, 0.5); } /* BLACKPINK light mode body background */ html[data-theme="light"][data-color="blackpink"] body{ background: url('../backrounds/blackgroup-photo.png') center center / cover no-repeat fixed #000000; color: var(--text); } /* BLACKPINK dark mode body background */ html[data-theme="dark"][data-color="blackpink"] body{ background: url('../backrounds/blackgroup-photo.png') center center / cover no-repeat fixed #000000; color: var(--text); } /* Container styling */ html[data-color="blackpink"] .container{ border: 1px solid var(--bp-divider-gray); border-radius: 4px; padding-top: 28px; padding-bottom: 28px; box-shadow: var(--bp-shadow); background: rgba(11,11,11,0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); position: relative; z-index: 1; } /* Card styling */ html[data-color="blackpink"] .card{ border-color: var(--bp-divider-gray); box-shadow: var(--bp-shadow); background: var(--bp-soft-black); border-radius: 4px; transition: all 120ms ease-out; } html[data-color="blackpink"] .card:hover{ border-color: var(--bp-pink); box-shadow: var(--bp-shadow-glow); transform: translateY(-4px); } /* Themed cards with BP gradient */ html[data-color="blackpink"] .themed-card::before{ background: linear-gradient(135deg, rgba(255,46,136,0.15), rgba(11,11,11,0.95)); opacity: 1; } html[data-color="blackpink"] .themed-card{ color: var(--bp-text-primary); border-color: rgba(255,46,136,0.35); border-radius: 4px; } html[data-color="blackpink"] .themed-card .label, html[data-color="blackpink"] .themed-card .muted{ color: var(--bp-text-muted); } /* Primary buttons */ html[data-color="blackpink"] button, html[data-color="blackpink"] .btn{ background: var(--bp-pink); border: none; color: var(--bp-black); border-radius: 4px; font-weight: 600; transition: all 120ms ease-out; } html[data-color="blackpink"] button:hover, html[data-color="blackpink"] .btn:hover{ background: var(--bp-pink-hover); box-shadow: var(--bp-shadow-glow); transform: translateY(-2px); } html[data-color="blackpink"] button:focus, html[data-color="blackpink"] .btn:focus{ box-shadow: 0 0 0 2px rgba(255,46,136,0.4); } /* Chips */ html[data-color="blackpink"] .chip{ border-color: rgba(255,46,136,0.4); background: rgba(255,46,136,0.1); color: var(--bp-pink); border-radius: 4px; transition: all 120ms ease-out; } html[data-color="blackpink"] .chip:hover{ border-color: var(--bp-pink); box-shadow: 0 0 10px rgba(255,46,136,0.25); } html[data-color="blackpink"] .chip[aria-pressed="true"]{ background: var(--bp-pink); border-color: var(--bp-pink); color: var(--bp-black); box-shadow: var(--bp-shadow-glow); } /* Pills */ html[data-color="blackpink"] .pill{ border-color: rgba(255,46,136,0.4); background: rgba(255,46,136,0.15); color: var(--bp-pink); border-radius: 4px; } /* Status badges */ html[data-color="blackpink"] .status{ border-radius: 4px; } html[data-color="blackpink"] .status--current{ background: var(--bp-pink); border-color: var(--bp-pink); color: var(--bp-black); font-weight: 800; box-shadow: var(--bp-shadow-glow); } html[data-color="blackpink"] .status--next{ background: rgba(255,46,136,0.2); border-color: rgba(255,46,136,0.5); color: var(--bp-pink); font-weight: 700; } html[data-color="blackpink"] .status--done{ background: rgba(26,26,26,0.6); border-color: var(--bp-divider-gray); color: var(--bp-muted-gray); } /* Progress bar */ html[data-color="blackpink"] .progress{ background: linear-gradient(90deg, var(--bp-pink), var(--bp-pink-hover)); box-shadow: 0 0 12px rgba(255,46,136,0.5); border-radius: 4px; } /* Clock styling */ html[data-color="blackpink"] .clock{ color: var(--bp-text-primary); text-shadow: 0 0 30px rgba(255,46,136,0.4); } html[data-color="blackpink"] .countdown{ color: var(--bp-text-primary); } html[data-color="blackpink"] #clockOut{ color: var(--bp-pink); } html[data-color="blackpink"] #schoolState, html[data-color="blackpink"] #tzOut, html[data-color="blackpink"] #dateOut{ color: var(--bp-text-muted); } /* Schedule table */ html[data-color="blackpink"] .schedule tr.active{ background: rgba(255,46,136,0.12); } html[data-color="blackpink"] .schedule tr.active::before{ background: var(--bp-pink); box-shadow: 0 0 10px rgba(255,46,136,0.6); } /* Links */ html[data-color="blackpink"] a{ color: var(--bp-pink); transition: all 120ms ease-out; } html[data-color="blackpink"] a:hover{ color: var(--bp-pink-hover); text-shadow: 0 0 8px rgba(255,46,136,0.4); } /* Quick action buttons */ html[data-color="blackpink"] .quick-action{ border-color: rgba(255,46,136,0.4); background: transparent; color: var(--bp-pink); border-radius: 4px; } html[data-color="blackpink"] .quick-action:hover{ background: rgba(255,46,136,0.1); border-color: var(--bp-pink); box-shadow: var(--bp-shadow-glow); } /* Add block button */ html[data-color="blackpink"] .add-block-btn{ background: var(--bp-pink); border: none; color: var(--bp-black); } /* Modal and dialog styling */ html[data-color="blackpink"] dialog{ background: rgba(11,11,11,0.98); border-color: var(--bp-divider-gray); border-radius: 4px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-color="blackpink"] dialog::backdrop{ background: rgba(0,0,0,0.9); } /* Tabs */ html[data-color="blackpink"] .tab{ background: transparent; color: var(--bp-text-muted); border-radius: 4px 4px 0 0; } html[data-color="blackpink"] .tab:hover{ color: var(--bp-pink); } html[data-color="blackpink"] .tab[aria-selected="true"]{ background: rgba(255,46,136,0.15); color: var(--bp-pink); border-bottom: 2px solid var(--bp-pink); } /* Select inputs */ html[data-color="blackpink"] select, html[data-color="blackpink"] input[type="text"], html[data-color="blackpink"] input, html[data-color="blackpink"] textarea{ background: var(--bp-soft-black); border-color: var(--bp-divider-gray); color: var(--bp-text-primary); border-radius: 4px; } html[data-color="blackpink"] select:focus, html[data-color="blackpink"] input:focus, html[data-color="blackpink"] textarea:focus{ border-color: var(--bp-pink); box-shadow: 0 0 0 2px rgba(255,46,136,0.2); } /* Icon buttons */ html[data-color="blackpink"] .icon-btn:hover{ background: rgba(255,46,136,0.15); } /* Block items in editor */ html[data-color="blackpink"] .block-item{ background: var(--bp-soft-black); border-color: var(--bp-divider-gray); } html[data-color="blackpink"] .block-item:hover{ background: #0D0D0D; border-color: var(--bp-pink); } /* Toast */ html[data-color="blackpink"] .toast{ background: var(--bp-soft-black); border: 1px solid var(--bp-pink); color: var(--bp-text-primary); box-shadow: var(--bp-shadow-glow); } /* Onboarding */ html[data-color="blackpink"] .onboard{ background: linear-gradient(180deg, #000000 0%, rgba(255,46,136,0.1) 50%, #000000 100%); } html[data-color="blackpink"] .onboard-card{ background: rgba(11,11,11,0.98); border-color: var(--bp-divider-gray); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; } html[data-color="blackpink"] .onboard-title{ color: var(--bp-pink); } /* Scrollbar */ html[data-color="blackpink"] ::-webkit-scrollbar{ width: 8px; height: 8px; } html[data-color="blackpink"] ::-webkit-scrollbar-track{ background: var(--bp-black); } html[data-color="blackpink"] ::-webkit-scrollbar-thumb{ background: var(--bp-divider-gray); border-radius: 4px; } html[data-color="blackpink"] ::-webkit-scrollbar-thumb:hover{ background: var(--bp-pink); box-shadow: var(--bp-shadow-glow); } /* Text styling */ html[data-color="blackpink"] h1, html[data-color="blackpink"] h2, html[data-color="blackpink"] h3, html[data-color="blackpink"] .title, html[data-color="blackpink"] .heading{ color: var(--bp-text-primary); } html[data-color="blackpink"] .muted, html[data-color="blackpink"] .secondary, html[data-color="blackpink"] .caption, html[data-color="blackpink"] .label{ color: var(--bp-text-muted); } /* Tables */ html[data-color="blackpink"] table{ border-color: var(--bp-divider-gray); } html[data-color="blackpink"] th{ background: var(--bp-divider-gray); color: var(--bp-text-primary); } html[data-color="blackpink"] td{ background: var(--bp-soft-black); color: var(--bp-text-primary); border-color: var(--bp-divider-gray); } html[data-color="blackpink"] tr:hover td{ background: rgba(255,46,136,0.08); } /* Dividers */ html[data-color="blackpink"] hr, html[data-color="blackpink"] .divider{ border-color: var(--bp-divider-gray); background: var(--bp-divider-gray); } /* Tooltips */ html[data-color="blackpink"] .tooltip, html[data-color="blackpink"] [data-tooltip]::after{ background: var(--bp-soft-black); color: var(--bp-text-primary); border: 1px solid var(--bp-divider-gray); border-radius: 4px; } /* Nav/Header */ html[data-color="blackpink"] nav, html[data-color="blackpink"] header, html[data-color="blackpink"] .header{ background: rgba(0,0,0,0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: none; } /* Footer */ html[data-color="blackpink"] footer, html[data-color="blackpink"] .footer{ background: rgba(0,0,0,0.95); border-top: 1px solid var(--bp-divider-gray); color: var(--bp-text-muted); } /* Badges & Tags */ html[data-color="blackpink"] .badge, html[data-color="blackpink"] .tag{ background: var(--bp-pink); color: var(--bp-black); border-radius: 4px; font-weight: 700; } /* Danger states */ html[data-color="blackpink"] .warning{ color: var(--bp-warning); } html[data-color="blackpink"] .danger{ color: var(--bp-error); } html[data-color="blackpink"] .btn.danger, html[data-color="blackpink"] button.danger, html[data-color="blackpink"] .quick-action.danger, html[data-color="blackpink"] .block-action.danger{ background: var(--bp-error); color: var(--bp-black); border: none; } html[data-color="blackpink"] .btn.danger:hover, html[data-color="blackpink"] button.danger:hover, html[data-color="blackpink"] .quick-action.danger:hover, html[data-color="blackpink"] .block-action.danger:hover{ box-shadow: 0 0 15px rgba(255,59,59,0.5); } /* Ghost button */ html[data-color="blackpink"] .ghost{ background: transparent; border: 1px dashed var(--bp-divider-gray); color: var(--bp-text-secondary); } html[data-color="blackpink"] .ghost:hover{ border-color: var(--bp-pink); color: var(--bp-pink); } /* KBD elements */ html[data-color="blackpink"] .kbd{ background: var(--bp-divider-gray); border: 1px solid #2A2A2A; color: var(--bp-text-primary); border-radius: 4px; } /* Editor controls */ html[data-color="blackpink"] .editor-controls{ background: var(--bp-soft-black); border: 1px solid var(--bp-divider-gray); border-radius: 4px; } html[data-color="blackpink"] .blocks-header{ background: var(--bp-divider-gray); border-bottom: 1px solid var(--bp-divider-gray); } html[data-color="blackpink"] .blocks-container{ background: var(--bp-soft-black); border: 1px solid var(--bp-divider-gray); border-radius: 4px; } /* Quick actions container */ html[data-color="blackpink"] .quick-actions{ background: var(--bp-soft-black); border: 1px solid var(--bp-divider-gray); border-radius: 4px; } /* Kiosk mode */ html[data-color="blackpink"] .kiosk-exit-btn{ background: var(--bp-soft-black); border: 1px solid var(--bp-divider-gray); color: var(--bp-muted-gray); } html[data-color="blackpink"] .kiosk-exit-btn:hover{ background: var(--bp-black); border-color: var(--bp-pink); color: var(--bp-pink); } html[data-color="blackpink"] .kiosk-modal{ background: rgba(0,0,0,0.95); } html[data-color="blackpink"] .kiosk-modal-content{ background: var(--bp-soft-black); border: 2px solid var(--bp-pink); box-shadow: 0 25px 80px rgba(0,0,0,0.8), var(--bp-shadow-glow-intense); } html[data-color="blackpink"] .kiosk-pin-dot{ border-color: var(--bp-pink); } html[data-color="blackpink"] .kiosk-pin-dot.filled{ background: var(--bp-pink); box-shadow: 0 0 12px rgba(255,46,136,0.6); } html[data-color="blackpink"] .kiosk-key{ background: var(--bp-soft-black); border-color: var(--bp-divider-gray); color: var(--bp-text-primary); } html[data-color="blackpink"] .kiosk-key:hover{ background: rgba(255,46,136,0.15); border-color: var(--bp-pink); } html[data-color="blackpink"] .kiosk-key:active{ background: rgba(255,46,136,0.25); } /* Special accent elements */ html[data-color="blackpink"] .accent, html[data-color="blackpink"] .highlight{ color: var(--bp-pink); } /* Success states */ html[data-color="blackpink"] .success{ color: var(--bp-success); } /* Chip theme icon filter */ html[data-color="blackpink"] .chip-theme[aria-pressed="true"] img{ filter: brightness(0); } html[data-color="blackpink"] .chip-theme[aria-pressed="false"] img{ filter: brightness(0) saturate(100%) invert(35%) sepia(99%) saturate(2500%) hue-rotate(320deg) brightness(100%) contrast(100%); } /* Select dropdown menu */ html[data-color="blackpink"] .select-menu{ background: var(--bp-soft-black); border: 1px solid var(--bp-divider-gray); border-radius: 4px; box-shadow: var(--bp-shadow); } html[data-color="blackpink"] .select-menu .opt:hover{ background: rgba(255,46,136,0.15); } /* Password modal */ html[data-color="blackpink"] .password-modal{ background: rgba(0,0,0,0.9); } html[data-color="blackpink"] .password-modal-content{ background: var(--bp-soft-black); border: 1px solid var(--bp-pink); } /* Progress wrap */ html[data-color="blackpink"] .progress-wrap{ background: var(--bp-divider-gray); border: 1px solid var(--bp-divider-gray); border-radius: 4px; }