/* FlatCap Desktop-inspired website appearance. Applied only when has .flatcap-desktop-look. The existing/classic website remains the default. */ html.flatcap-desktop-look { --bg: #14181f; --fg: #f5f5ff; --panel: #24243a; --panel-2: #1f2937; --accent: #2563eb; --highlight: #ffd84d; --hover: rgba(255,255,255,.09); --border: rgba(255,255,255,.14); --muted: #a3a3b8; --danger: #ef4444; --warning: #f59e0b; --button-radius: 9px; } html.flatcap-desktop-look body { background: radial-gradient(circle at 50% -18%, rgba(91,72,160,.24), transparent 34rem), #14181f !important; color: var(--fg) !important; font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif !important; min-height: 100%; } /* Desktop-style sticky navigation */ html.flatcap-desktop-look body > nav, html.flatcap-desktop-look nav { position: sticky; top: 0; z-index: 1200; background: rgba(20,24,31,.97) !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 8px 24px rgba(0,0,0,.22); padding: 7px 10px !important; backdrop-filter: blur(12px); } html.flatcap-desktop-look nav .nav-links { gap: .35rem !important; } html.flatcap-desktop-look nav a, html.flatcap-desktop-look nav .collapsible-btn { margin: 0 !important; padding: 7px 10px !important; border-radius: 8px !important; color: #ddd !important; font-weight: 700 !important; transition: background .16s ease, color .16s ease !important; } html.flatcap-desktop-look nav a:hover, html.flatcap-desktop-look nav .collapsible-btn:hover, html.flatcap-desktop-look nav .profile-toggle.active { background: rgba(255,255,255,.10) !important; color: #fff !important; } html.flatcap-desktop-look nav a > i, html.flatcap-desktop-look nav button > i { color: var(--highlight); } html.flatcap-desktop-look nav .separator { opacity: .2; } html.flatcap-desktop-look .desktop-look-active-badge { display: inline-block; margin-left: 7px; padding: 2px 6px; border: 1px solid rgba(255,216,77,.35); border-radius: 999px; color: #ffd84d; font-size: .65rem; font-weight: 900; } /* Modal/dropdown treatment matching Desktop panels */ html.flatcap-desktop-look .dropdown-content { background: #1f2937 !important; color: #fff !important; border: 1px solid rgba(255,216,77,.38) !important; border-radius: 14px !important; box-shadow: 0 18px 55px rgba(0,0,0,.5) !important; } html.flatcap-desktop-look #popup-backdrop.show { background: rgba(0,0,0,.58) !important; } /* Heading bars become compact Desktop-style card headings */ html.flatcap-desktop-look h1, html.flatcap-desktop-look h2 { width: min(1180px, calc(100% - 24px)); margin: 12px auto !important; padding: 12px 16px !important; background: rgba(36,36,58,.86) !important; color: #fff !important; border: 1px solid rgba(255,216,77,.28) !important; border-radius: 13px !important; box-shadow: 0 8px 24px rgba(0,0,0,.16); } html.flatcap-desktop-look h3 { color: var(--highlight); } /* General panels/cards already used throughout the site */ html.flatcap-desktop-look .section, html.flatcap-desktop-look .card, html.flatcap-desktop-look .panel, html.flatcap-desktop-look .container, html.flatcap-desktop-look .content-box { background: rgba(30,30,30,.72) !important; border-color: rgba(255,255,255,.14) !important; border-radius: 14px !important; box-shadow: 0 8px 24px rgba(0,0,0,.15); } /* Tables retain functionality while adopting Desktop surfaces */ html.flatcap-desktop-look .table-container { border-radius: 14px !important; } html.flatcap-desktop-look table { background: rgba(30,30,30,.72) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.13); } html.flatcap-desktop-look th { background: #24243a !important; color: #ffd84d !important; border-color: rgba(255,255,255,.12) !important; } html.flatcap-desktop-look td { border-color: rgba(255,255,255,.09) !important; } html.flatcap-desktop-look tr:nth-child(even) { background: rgba(255,255,255,.025) !important; } html.flatcap-desktop-look tr:hover { background: rgba(255,255,255,.07) !important; } html.flatcap-desktop-look td.dance-name a, html.flatcap-desktop-look .dance-link, html.flatcap-desktop-look .dance-name-link { color: #f5f5ff !important; font-weight: 800 !important; } /* Controls */ html.flatcap-desktop-look input, html.flatcap-desktop-look select, html.flatcap-desktop-look textarea { background: #111827 !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 8px !important; } html.flatcap-desktop-look button:not(.close-popup):not(.play-btn):not(.add-btn):not(.delete-btn):not(.tube-btn), html.flatcap-desktop-look input[type="submit"] { border-radius: 8px !important; } html.flatcap-desktop-look button[type="submit"], html.flatcap-desktop-look input[type="submit"] { background: #2563eb !important; color: #fff !important; border: 1px solid rgba(255,216,77,.42) !important; padding: 8px 12px !important; font-weight: 800; } html.flatcap-desktop-look button[type="submit"]:hover, html.flatcap-desktop-look input[type="submit"]:hover { filter: brightness(1.12); } /* Familiar Desktop play/action colours */ html.flatcap-desktop-look .play-btn, html.flatcap-desktop-look .track-btn { background: #3b82f6 !important; border-radius: 8px !important; } html.flatcap-desktop-look .add-btn { border-radius: 8px !important; } html.flatcap-desktop-look .delete-btn { background: #ef4444 !important; border-radius: 8px !important; } /* Playlist containers map closely to the Desktop app */ html.flatcap-desktop-look #playlist-container, html.flatcap-desktop-look .live-playlist, html.flatcap-desktop-look #playlist { border-radius: 14px !important; border-color: rgba(255,255,255,.14) !important; } html.flatcap-desktop-look #playlist li { background: rgba(38,38,38,.94) !important; border-radius: 10px !important; } /* Footer is no longer a heavy visual bar in Desktop mode */ html.flatcap-desktop-look footer { background: rgba(20,24,31,.94) !important; color: #a3a3b8 !important; border-top: 1px solid rgba(255,255,255,.10); } /* Profile appearance option */ html.flatcap-desktop-look .appearance-choice { background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 12px; } .appearance-choice { max-width: 620px; margin: 16px auto; padding: 14px 16px; border: 1px solid var(--border, #3a3a3a); border-radius: 10px; background: rgba(255,255,255,.03); } .appearance-choice-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; } .appearance-choice-copy strong { display: block; font-size: .95rem; } .appearance-choice-copy small { display: block; margin-top: 4px; color: var(--muted, #888); line-height: 1.4; } .appearance-switch { position: relative; width: 48px; height: 27px; flex: 0 0 auto; } .appearance-switch input { opacity: 0; width: 1px; height: 1px; position: absolute; } .appearance-switch span { position: absolute; inset: 0; border-radius: 999px; background: #475569; border: 1px solid rgba(255,255,255,.20); cursor: pointer; transition: .18s ease; } .appearance-switch span::after { content: ""; position: absolute; width: 21px; height: 21px; left: 2px; top: 2px; border-radius: 50%; background: #fff; transition: .18s ease; } .appearance-switch input:checked + span { background: #2563eb; border-color: rgba(255,216,77,.6); } .appearance-switch input:checked + span::after { transform: translateX(21px); } .appearance-choice-actions { margin-top: 10px; text-align: right; } @media (max-width: 760px) { html.flatcap-desktop-look nav { padding-inline: 6px !important; } html.flatcap-desktop-look h1, html.flatcap-desktop-look h2 { width: calc(100% - 16px); } .appearance-choice-row { align-items: flex-start; } }