/* ============================================================ THEMES - v2 5 light themes + 1 universal dark ============================================================ */ /* ── UNIVERSAL DARK ──────────────────────────────────────── One dark mode that works with any light theme. Toggle via data-mode="dark" on . ---------------------------------------------------------- */ [data-mode="dark"]{ --bg:#0E0E12;--sf:#18181F;--sf2:#22222C;--sf3:#2C2C3A; --pr:#A78BFA;--pr2:#C4B5FD;--se:#818CF8; --tx:#F0EEFF;--tx2:#A89CC8;--tx3:#6B6288; --bd:#2E2B42;--bd2:#252236; --dg:#F87171;--ok:#34D399;--wn:#FBBF24; --sh:0 1px 3px rgba(0,0,0,.5);--shl:0 4px 20px rgba(0,0,0,.65); --gw:0 0 28px rgba(167,139,250,.2); } /* ── WINDOWS XP LUNA ─────────────────────────────────────── Authentic Luna blue. Sidebar: #245EDC blue. Content: cream. ---------------------------------------------------------- */ [data-theme="xp-luna"][data-mode="light"]{ --bg:#EFEEE1;--sf:#FFFFFF;--sf2:#F5F4EE;--sf3:#EAE9DC; --pr:#245EDC;--pr2:#1A47B0;--se:#3A6EA5; --tx:#000000;--tx2:#1A1A1A;--tx3:#4A4A4A; --bd:#919B9C;--bd2:#C8C5BB; --dg:#CC0000;--ok:#40A040;--wn:#CC6600; --sh:inset 1px 1px 0 rgba(255,255,255,.9),inset -1px -1px 0 rgba(0,0,0,.2); --shl:2px 2px 4px rgba(0,0,0,.3);--gw:0 0 0 2px #245EDC; } /* ── WINDOWS XP SILVER ───────────────────────────────────── Silver/Olive variant - warm greys ---------------------------------------------------------- */ [data-theme="xp-silver"][data-mode="light"]{ --bg:#ACA899;--sf:#D4D0C8;--sf2:#E8E4DC;--sf3:#F5F2EC; --pr:#6A6A8A;--pr2:#505070;--se:#8888AA; --tx:#000000;--tx2:#1A1A1A;--tx3:#505050; --bd:#848278;--bd2:#B0ACA4; --dg:#CC0000;--ok:#006400;--wn:#CC6600; --sh:1px 1px 0 rgba(255,255,255,.7),-1px -1px 0 rgba(0,0,0,.2); --shl:0 3px 8px rgba(0,0,0,.4);--gw:0 0 0 2px #6A6A8A; } /* ── WINAMP CLASSIC ──────────────────────────────────────── Dark grey + black + lime green. Nostalgia. ---------------------------------------------------------- */ [data-theme="winamp"][data-mode="light"]{ --bg:#1A1A1A;--sf:#252525;--sf2:#2F2F2F;--sf3:#383838; --pr:#00FF00;--pr2:#88FF88;--se:#00CC00; --tx:#CCCCCC;--tx2:#999999;--tx3:#666666; --bd:#444444;--bd2:#333333; --dg:#FF4444;--ok:#00FF00;--wn:#FFAA00; --sh:0 1px 3px rgba(0,0,0,.8);--shl:0 4px 16px rgba(0,0,0,.9); --gw:0 0 12px rgba(0,255,0,.3); } /* ── Y2K AQUA ────────────────────────────────────────────── iMac G4 era. Glossy teal, candy colours. ---------------------------------------------------------- */ [data-theme="y2k-aqua"][data-mode="light"]{ --bg:#E8F8FF;--sf:#FFFFFF;--sf2:#D6F0FF;--sf3:#C0E8FF; --pr:#0088CC;--pr2:#0066AA;--se:#00BBDD; --tx:#001833;--tx2:#003366;--tx3:#336699; --bd:#88CCEE;--bd2:#BBDDF5; --dg:#DD2222;--ok:#009944;--wn:#CC7700; --sh:0 2px 6px rgba(0,100,200,.15),inset 0 1px 0 rgba(255,255,255,.9); --shl:0 6px 20px rgba(0,100,200,.2);--gw:0 0 16px rgba(0,136,204,.25); } /* ── MSN / HOTMAIL ───────────────────────────────────────── Early 2000s Microsoft web. Butterfly logo energy. ---------------------------------------------------------- */ [data-theme="msn"][data-mode="light"]{ --bg:#F0F4FF;--sf:#FFFFFF;--sf2:#E8EEFF;--sf3:#D8E4FF; --pr:#0033CC;--pr2:#0022AA;--se:#FF6600; --tx:#000033;--tx2:#333366;--tx3:#6666AA; --bd:#AABBDD;--bd2:#CCd4EE; --dg:#CC0000;--ok:#006600;--wn:#FF6600; --sh:0 1px 3px rgba(0,0,100,.12);--shl:0 4px 14px rgba(0,0,100,.18); --gw:0 0 14px rgba(0,51,204,.2); } /* Font size scale */ html[data-fontsize="small"] { font-size: 12px; } html[data-fontsize="medium"] { font-size: 14px; } html[data-fontsize="large"] { font-size: 16px; }