/* EdenSec themes --------------------------------------------------------------------------- The base look lives in styles.css and is the "Midnight" theme. Everything here is layered on top via [data-theme="…"] on . The retro themes come from the "EdenSec Retro Skeuomorphic" design study. Its four surface recipes are reproduced as reusable variables so the same rules serve every skin: --chrome glass chrome : blurred gradient bar, double inset highlight --sunken beveled inset : 1px dark→light frame + inner shadow (fields) --gloss-* glossy pill : white top-half gradient + bottom inner shadow --orb-online orb : radial highlight at 45%/22% (presence) Only colour/depth changes here — never layout — so every theme keeps the responsive behaviour and hit targets of the base app. ------------------------------------------------------------------------ */ /* ===================== shared skeuomorphic primitives ===================== */ :root { /* neutral defaults so base (Midnight) stays perfectly flat */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Lucida Console", Consolas, ui-monospace, monospace; --chrome: var(--panel); --chrome-line: var(--line); --sunken: var(--panel-2); --sunken-shadow: none; --raised: var(--panel-2); --raised-shadow: none; --bubble-mine: var(--mine); --bubble-theirs: var(--theirs); --bubble-mine-border: transparent; --bubble-theirs-border: transparent; --gloss: none; /* overlay painted on bubbles/buttons */ --gloss-strength: 0; --send-bg: var(--accent); --send-shadow: none; --orb-online: #22c55e; --orb-glow: none; --avatar-gloss: none; --text-emboss: none; --bubble-radius: 16px; --sidebar-bg: var(--panel); --app-bg: var(--bg); --chat-bg: var(--panel-2); --wallpaper: none; } /* Gloss cap shared by bubbles and the send button. Painted as a pseudo element so it sits above the gradient but below the text. */ /* Kept short and semi-transparent: the design's tall 46% cap looks right on a mock-up with fixed copy, but real one-line messages then sit under it and white-on-pale-blue becomes unreadable. 34% + reduced alpha keeps the highlight while leaving the text on the darker part of the gradient. */ [data-theme] .bubble::before, [data-theme] .send-btn::before { content: ""; position: absolute; inset: 1px 1px auto 1px; height: 34%; border-radius: inherit; background: var(--gloss); opacity: var(--gloss-strength); pointer-events: none; } [data-theme] .send-btn { position: relative; overflow: hidden; } /* Lift bubble content above the gloss pseudo-element (a positioned ::before otherwise paints over static inline content). The react/menu buttons are deliberately excluded — they are position:absolute, and making them relative pulled them into flow and grew every bubble by ~33px. */ [data-theme] .bubble > *:not(.react-btn):not(.menu-btn) { position: relative; } /* ===================== 1a — Aero Glass (light) ===================== */ [data-theme="aero"] { --font-ui: Tahoma, "Trebuchet MS", Verdana, Geneva, sans-serif; --bg: #dbe6f1; --app-bg: #dbe6f1; --panel: #eaf2fb; --panel-2: #ffffff; --line: #9ab5cd; --text: #10365d; --muted: #41618a; --accent: #2c78bd; --accent-2: #1a5c9c; --danger: #c0392b; --radius: 8px; --shadow: 0 12px 28px rgba(2, 14, 32, .28); --wallpaper: radial-gradient(140% 100% at 22% 8%, #7fc4f0 0%, #2f7fc4 38%, #14406f 74%, #0a2242 100%); --sidebar-bg: linear-gradient(180deg, #eaf2fb, #cfdeee); --chrome: linear-gradient(180deg, #fdfeff, #dfe9f4 55%, #cddcea); --chrome-line: rgba(120, 150, 180, .5); --sunken: linear-gradient(180deg, #ffffff, #f8fbff); --sunken-shadow: inset 0 3px 4px rgba(60, 100, 140, .22); --raised: linear-gradient(180deg, #ffffff, #dceaf8 50%, #bcd6ee); --raised-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(30, 70, 110, .35); --bubble-theirs: linear-gradient(180deg, #ffffff, #eaf1f9 60%, #dbe7f4); --bubble-theirs-border: #b9cde0; --bubble-mine: linear-gradient(180deg, #4a9fe0 0%, #2b86d8 26%, #175ba8 56%, #0d3d75 100%); --bubble-mine-border: #0a3563; --gloss: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); --gloss-strength: 1; --gloss-mine: .3; --bubble-radius: 12px; --chat-bg: linear-gradient(180deg, #f2f7fc, #dfe9f4); --send-bg: linear-gradient(180deg, #6ccbfb 0%, #2b86d8 46%, #155ba8 54%, #0a3568 100%); --send-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -4px 8px rgba(0, 12, 32, .6), 0 2px 6px rgba(0, 0, 0, .35); --orb-online: radial-gradient(circle at 40% 28%, #f0ffee, #6ce06a 45%, #1f8a2a 100%); --orb-glow: 0 0 6px rgba(110, 240, 110, .7); --avatar-gloss: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); --text-emboss: 0 1px 0 rgba(255, 255, 255, .85); /* greentext (white glass 4.5:1 / deep-blue plate 5.2:1) */ --quote: #4f7a1f; --quote-mine: #c8ef95; } /* ===================== 2a — Aero Midnight (dark) ===================== */ [data-theme="aero-midnight"] { --font-ui: Tahoma, "Trebuchet MS", Verdana, Geneva, sans-serif; --bg: #0a1420; --app-bg: #0a1420; --panel: #152538; --panel-2: #0d1c2c; --line: #2c4762; --text: #dceaf7; --muted: #7b9ab5; --accent: #2f74b4; --accent-2: #1a4c80; --danger: #d8442a; --radius: 8px; --shadow: 0 34px 70px -14px rgba(0, 0, 0, .9); --wallpaper: radial-gradient(130% 100% at 20% 6%, #1b3f63 0%, #102843 34%, #08172a 70%, #030910 100%); --sidebar-bg: linear-gradient(180deg, #152538, #0b1522); --chrome: linear-gradient(180deg, #22364c, #16253a 55%, #0f1c2c); --chrome-line: rgba(0, 0, 0, .6); --sunken: linear-gradient(180deg, #0b1725, #122236); --sunken-shadow: inset 0 3px 7px rgba(0, 0, 0, .8); --raised: linear-gradient(180deg, #33506e, #1d334c 50%, #132437); --raised-shadow: inset 0 1px 0 rgba(190, 230, 255, .35), 0 1px 2px rgba(0, 0, 0, .5); --bubble-theirs: linear-gradient(180deg, #2b4360 0%, #1e3348 48%, #152537 100%); --bubble-theirs-border: #3c5f80; --bubble-mine: linear-gradient(180deg, #3f9ada 0%, #2b86d8 26%, #175ba8 56%, #0d3d75 100%); --bubble-mine-border: #0a3563; --gloss: linear-gradient(180deg, rgba(190, 230, 255, .38), rgba(255, 255, 255, 0)); --gloss-strength: 1; --gloss-mine: .35; --bubble-radius: 12px; --chat-bg: linear-gradient(180deg, #0d1c2c, #08121e); --send-bg: linear-gradient(180deg, #6ccbfb 0%, #2b86d8 46%, #155ba8 54%, #0a3568 100%); --send-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -4px 8px rgba(0, 12, 32, .6), 0 0 26px rgba(40, 150, 240, .4); --orb-online: radial-gradient(circle at 40% 28%, #f4fff2, #62e86a 45%, #12722a 100%); --orb-glow: 0 0 9px rgba(90, 235, 110, .8); --avatar-gloss: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); --text-emboss: 0 -1px 0 rgba(0, 0, 0, .7); /* greentext (navy glass 6.3:1 / deep-blue plate 5.2:1) */ --quote: #9dc06a; --quote-mine: #c8ef95; } /* ===================== 1b — Candy Plastic ===================== */ [data-theme="candy"] { --font-ui: Tahoma, "Trebuchet MS", Verdana, Geneva, sans-serif; --bg: #f6ecd9; --app-bg: #f6ecd9; --panel: #fffdf6; --panel-2: #fffaf0; --line: #cfb68e; --text: #4a3410; --muted: #8a6a2c; --accent: #e0862c; --accent-2: #cd7412; --danger: #cc3a22; --radius: 11px; --shadow: 0 30px 60px -16px rgba(90, 50, 0, .5); --wallpaper: linear-gradient(180deg, #ffd98a, #e0862c 60%, #a95a12); --sidebar-bg: linear-gradient(180deg, #fffdf6, #f0e3cb); --chrome: linear-gradient(180deg, #ffe9b8 0%, #ffc35e 46%, #f09a25 54%, #cd7412 100%); --chrome-line: rgba(180, 150, 100, .6); --sunken: linear-gradient(180deg, #fff, #fffaf0); --sunken-shadow: inset 0 3px 5px rgba(150, 110, 50, .25); --raised: linear-gradient(180deg, #ffffff, #f0e2c6); --raised-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(140, 100, 40, .3); --bubble-theirs: linear-gradient(180deg, #ffffff, #f5ecdb); --bubble-theirs-border: #d8c3a0; --bubble-mine: linear-gradient(180deg, #7fca5c 0%, #5cb43a 26%, #3f9a2b 56%, #2b7a1e 100%); --bubble-mine-border: #2a6f1c; --gloss: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); --gloss-strength: 1; --gloss-mine: .32; --bubble-radius: 14px; --chat-bg: linear-gradient(180deg, #fffdf7, #f6ecd9); --send-bg: linear-gradient(180deg, #ffd88a 0%, #f5a52f 46%, #d97d10 54%, #a75a08 100%); --send-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -4px 8px rgba(90, 45, 0, .45), 0 3px 6px rgba(90, 50, 0, .4); --orb-online: radial-gradient(circle at 45% 25%, #fff, #b8e8a8 35%, #3f9c2e 100%); --orb-glow: 0 0 7px rgba(90, 200, 60, .6); --avatar-gloss: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); --text-emboss: 0 1px 0 rgba(255, 255, 255, .7); /* greentext (cream 4.3:1 / the GREEN outgoing plate 3.5:1) */ --quote: #4f7a1f; --quote-mine: #123d05; } /* ========================================================================= Component treatments — applied to every theme that opts in by defining the variables above. The base theme leaves them neutral, so these rules are inert there. ====================================================================== */ [data-theme="aero"], [data-theme="aero-midnight"], [data-theme="candy"] { /* the skeuo skins are Tahoma-first, per the design */ font-family: var(--font-ui); } [data-theme="aero"] body, [data-theme="aero-midnight"] body, [data-theme="candy"] body { font-family: var(--font-ui); background: var(--wallpaper) fixed; } /* app shell reads as a floating window on the wallpaper */ [data-theme="aero"] #app, [data-theme="aero-midnight"] #app, [data-theme="candy"] #app { background: var(--app-bg); } [data-theme="aero"] #sidebar, [data-theme="aero-midnight"] #sidebar, [data-theme="candy"] #sidebar { background: var(--sidebar-bg); box-shadow: inset -1px 0 0 var(--chrome-line), inset 1px 0 0 rgba(255, 255, 255, .5); } /* chrome bars: side header, chat header, composer */ [data-theme="aero"] .side-head, [data-theme="aero-midnight"] .side-head, [data-theme="candy"] .side-head, [data-theme="aero"] .chat-head, [data-theme="aero-midnight"] .chat-head, [data-theme="candy"] .chat-head, [data-theme="aero"] .side-foot, [data-theme="aero-midnight"] .side-foot, [data-theme="candy"] .side-foot, [data-theme="aero"] .composer, [data-theme="aero-midnight"] .composer, [data-theme="candy"] .composer { background: var(--chrome); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 var(--chrome-line); border-bottom-color: var(--chrome-line); border-top-color: var(--chrome-line); } [data-theme="aero"] .chat-head strong, [data-theme="candy"] .chat-head strong, [data-theme="aero"] .side-head strong, [data-theme="candy"] .side-head strong { text-shadow: var(--text-emboss); } /* message bubbles: gradient + 1px frame + gloss cap (see ::before above) */ [data-theme="aero"] .bubble, [data-theme="aero-midnight"] .bubble, [data-theme="candy"] .bubble { border-radius: var(--bubble-radius); background: var(--bubble-theirs); border: 1px solid var(--bubble-theirs-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 8px rgba(0, 0, 0, .28); } [data-theme="aero"] .msg.mine .bubble, [data-theme="aero-midnight"] .msg.mine .bubble, [data-theme="candy"] .msg.mine .bubble { background: var(--bubble-mine); border-color: var(--bubble-mine-border); color: #fff; } [data-theme="aero"] .msg.mine .bubble .text, [data-theme="aero-midnight"] .msg.mine .bubble .text, [data-theme="candy"] .msg.mine .bubble .text, [data-theme="aero"] .msg.mine .bubble .caption, [data-theme="aero-midnight"] .msg.mine .bubble .caption, [data-theme="candy"] .msg.mine .bubble .caption { color: #fff; text-shadow: 0 1px 2px rgba(2, 20, 44, .85), 0 0 1px rgba(2, 20, 44, .6); } [data-theme="aero"] .msg.theirs .bubble .text, [data-theme="candy"] .msg.theirs .bubble .text { color: var(--text); } [data-theme="aero"] .msg.mine .bubble { border-bottom-right-radius: 3px; } [data-theme="aero-midnight"] .msg.mine .bubble { border-bottom-right-radius: 3px; } [data-theme="candy"] .msg.mine .bubble { border-bottom-right-radius: 4px; } [data-theme="aero"] .msg.theirs .bubble { border-bottom-left-radius: 3px; } [data-theme="aero-midnight"] .msg.theirs .bubble { border-bottom-left-radius: 3px; } [data-theme="candy"] .msg.theirs .bubble { border-bottom-left-radius: 4px; } /* timestamps sit on light bubbles in the light skins */ [data-theme="aero"] .msg.theirs .bubble .time, [data-theme="candy"] .msg.theirs .bubble .time { color: rgba(0, 0, 0, .45); } [data-theme="aero"] .msg.mine .bubble .time, [data-theme="aero-midnight"] .msg.mine .bubble .time, [data-theme="candy"] .msg.mine .bubble .time { color: rgba(255, 255, 255, .8); } /* reply quote inside a bubble */ [data-theme="aero"] .reply-quote, [data-theme="aero-midnight"] .reply-quote, [data-theme="candy"] .reply-quote { background: rgba(0, 0, 0, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); } [data-theme="aero"] .msg.theirs .reply-quote, [data-theme="candy"] .msg.theirs .reply-quote { background: rgba(0, 0, 0, .07); } /* beveled inset fields: composer input, search-like surfaces */ [data-theme="aero"] .composer textarea#msgInput, [data-theme="aero-midnight"] .composer textarea#msgInput, [data-theme="candy"] .composer textarea#msgInput { background: var(--sunken); box-shadow: var(--sunken-shadow); border: 1px solid var(--line); color: var(--text); } /* glossy pill: the send button */ [data-theme="aero"] .send-btn, [data-theme="aero-midnight"] .send-btn, [data-theme="candy"] .send-btn { background: var(--send-bg); box-shadow: var(--send-shadow); border: 1px solid var(--bubble-mine-border); color: #fff; text-shadow: 0 -1px 0 rgba(2, 22, 48, .7); } [data-theme="aero"] .send-btn:hover, [data-theme="aero-midnight"] .send-btn:hover, [data-theme="candy"] .send-btn:hover { filter: brightness(1.08); } /* raised chrome buttons */ [data-theme="aero"] .icon-btn, [data-theme="aero-midnight"] .icon-btn, [data-theme="candy"] .icon-btn, [data-theme="aero"] .notify-btn, [data-theme="aero-midnight"] .notify-btn, [data-theme="candy"] .notify-btn, [data-theme="aero"] .chip, [data-theme="aero-midnight"] .chip, [data-theme="candy"] .chip { background: var(--raised); box-shadow: var(--raised-shadow); border: 1px solid var(--line); color: var(--text); } /* contact rows read as a sunken list */ [data-theme="aero"] .contacts, [data-theme="aero-midnight"] .contacts, [data-theme="candy"] .contacts { background: var(--sunken); box-shadow: var(--sunken-shadow); border-top: 1px solid var(--chrome-line); border-bottom: 1px solid var(--chrome-line); } [data-theme="aero"] .contact:hover, [data-theme="aero-midnight"] .contact:hover, [data-theme="candy"] .contact:hover { background: rgba(127, 176, 224, .18); } [data-theme="aero"] .contact.active, [data-theme="aero-midnight"] .contact.active, [data-theme="candy"] .contact.active { background: var(--raised); box-shadow: var(--raised-shadow); } /* avatars become beveled tiles with a gloss cap */ [data-theme="aero"] .avatar, [data-theme="aero-midnight"] .avatar, [data-theme="candy"] .avatar { border-radius: 7px; border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3); overflow: visible; position: relative; } [data-theme="aero"] .avatar::after, [data-theme="aero-midnight"] .avatar::after, [data-theme="candy"] .avatar::after { content: ""; position: absolute; inset: 2px 2px auto 2px; height: 38%; border-radius: 5px 5px 8px 8px; background: var(--avatar-gloss); pointer-events: none; } [data-theme="candy"] .avatar { border-radius: 50%; } [data-theme="candy"] .avatar::after { border-radius: 50% 50% 40% 40%; } /* presence orb: radial highlight + glow */ [data-theme="aero"] .online-dot, [data-theme="aero-midnight"] .online-dot, [data-theme="candy"] .online-dot { background: var(--orb-online); box-shadow: var(--orb-glow), inset 0 1px 1px rgba(255, 255, 255, .85); } /* unread badge as a glossy capsule */ [data-theme="aero"] .badge, [data-theme="aero-midnight"] .badge, [data-theme="candy"] .badge { background: linear-gradient(180deg, #ff9d86, #d8442a 55%, #8b1a0c); border: 1px solid #66120a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 10px rgba(220, 70, 40, .35); color: #fff; text-shadow: 0 -1px 0 rgba(90, 0, 0, .6); } /* menus / pickers pick up the chrome */ [data-theme="aero"] .msg-menu, [data-theme="aero-midnight"] .msg-menu, [data-theme="candy"] .msg-menu, [data-theme="aero"] .emoji-picker, [data-theme="aero-midnight"] .emoji-picker, [data-theme="candy"] .emoji-picker { background: var(--chrome); border: 1px solid var(--line); box-shadow: var(--shadow); } /* day separators / system lines as engraved chips */ [data-theme="aero"] .day.sys, [data-theme="aero-midnight"] .day.sys, [data-theme="candy"] .day.sys { background: var(--raised); box-shadow: var(--raised-shadow); border: 1px solid var(--line); } /* The login card is a window *body*, not a titlebar — using --chrome here made Candy's whole card the orange titlebar gradient and sank the fine print to an unreadable contrast. The panel gradient is the correct surface. */ [data-theme="aero"] .login-card, [data-theme="aero-midnight"] .login-card, [data-theme="candy"] .login-card { background: var(--sidebar-bg); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .8); } /* fine print is deliberately low-emphasis, but must still be legible */ [data-theme="aero"] .fine, [data-theme="aero-midnight"] .fine, [data-theme="candy"] .fine { opacity: 1; color: var(--muted); } [data-theme="aero"] .login-card input, [data-theme="aero-midnight"] .login-card input, [data-theme="candy"] .login-card input { background: var(--sunken); box-shadow: var(--sunken-shadow); border: 1px solid var(--line); color: var(--text); } [data-theme="aero"] .login-card button, [data-theme="aero-midnight"] .login-card button, [data-theme="candy"] .login-card button { background: var(--send-bg); box-shadow: var(--send-shadow); border: 1px solid var(--bubble-mine-border); color: #fff; text-shadow: 0 -1px 0 rgba(2, 22, 48, .7); } /* typing indicator dots as small orbs */ [data-theme="aero"] .typing-dots i, [data-theme="aero-midnight"] .typing-dots i, [data-theme="candy"] .typing-dots i { background: var(--orb-online); box-shadow: var(--orb-glow); } /* ===================== theme picker (left sidebar) ===================== */ /* The sidebar footer mirrors the chat composer: same padding, same min-height, same top border — so the two bottom bars line up across the divide. Without it the themed composer read as a chrome band with no counterpart opposite. */ .side-foot { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); min-height: var(--footer-h); border-top: 1px solid var(--line); background: var(--panel); } .side-foot .notify-btn { margin: 0; } .theme-row { display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; } .theme-row label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex: 0 0 auto; } #themeSelect { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; } #themeSelect:focus { outline: 2px solid var(--accent); border-color: transparent; } [data-theme="aero"] #themeSelect, [data-theme="aero-midnight"] #themeSelect, [data-theme="candy"] #themeSelect { background: var(--raised); box-shadow: var(--raised-shadow); } /* chat surface + per-side gloss tuning (added after visual review) */ [data-theme="aero"] #chat, [data-theme="aero-midnight"] #chat, [data-theme="candy"] #chat { background: var(--chat-bg); } [data-theme="aero"] .messages, [data-theme="aero-midnight"] .messages, [data-theme="candy"] .messages { background: var(--chat-bg); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .18); } /* saturated "mine" bubbles carry white text, so their highlight is softer */ [data-theme="aero"] .msg.mine .bubble::before, [data-theme="aero-midnight"] .msg.mine .bubble::before, [data-theme="candy"] .msg.mine .bubble::before { opacity: var(--gloss-mine, .5); } /* Muted text on a saturated chrome bar needs its own tone — the sidebar's --muted is tuned for pale panels and drops to ~2.4:1 on Candy's orange. */ [data-theme="candy"] .chat-head .presence, [data-theme="candy"] .side-head .presence { color: #5a3d0c; } [data-theme="aero-midnight"] .chat-head .presence, [data-theme="aero-midnight"] .side-head .presence { color: #a8c8e4; } [data-theme="aero"] .chat-head .presence, [data-theme="aero"] .side-head .presence { color: #35567c; } /* ========================================================================= 3a — Liquid Glass (translucent, specular, light-bending) ====================================================================== */ [data-theme="liquid"] { --font-ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --bg: #3d64ff; --app-bg: transparent; --panel: rgba(255, 255, 255, .14); --panel-2: rgba(255, 255, 255, .10); --line: rgba(255, 255, 255, .22); --text: #ffffff; --muted: rgba(255, 255, 255, .72); --accent: #ffffff; --accent-2: rgba(255, 255, 255, .8); --danger: #ff9ad0; --radius: 18px; --shadow: 0 26px 60px -18px rgba(4, 10, 32, .6); --wallpaper: radial-gradient(90% 80% at 12% 4%, #ff9ad0 0%, #a06bff 32%, #3d64ff 62%, #0b1a4d 100%); --sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); --chrome: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); --chrome-line: rgba(255, 255, 255, .22); --sunken: rgba(255, 255, 255, .14); --sunken-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 2px 8px rgba(4, 10, 32, .12); --raised: rgba(255, 255, 255, .16); --raised-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); --bubble-theirs: rgba(255, 255, 255, .20); --bubble-theirs-border: rgba(255, 255, 255, .22); --bubble-mine: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(232, 238, 255, .78)); --bubble-mine-border: rgba(255, 255, 255, .5); --gloss: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); --gloss-strength: .5; --gloss-mine: 0; /* the mine bubble is already near-white */ --bubble-radius: 22px; --chat-bg: transparent; --send-bg: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(226, 234, 255, .8)); --send-shadow: inset 0 1px 0 #fff, 0 8px 20px -8px rgba(4, 10, 32, .55); --orb-online: #8effc0; --orb-glow: 0 0 8px rgba(140, 255, 190, .9); --avatar-gloss: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); --text-emboss: none; /* greentext (frosted-dark 3.4:1 / near-white plate 4.6:1) */ --quote: #c8ef95; --quote-mine: #4f7a1f; } /* the whole shell floats on the wallpaper, frosted */ [data-theme="liquid"] body { background: var(--wallpaper) fixed; font-family: var(--font-ui); } [data-theme="liquid"] #app, [data-theme="liquid"] #chat, [data-theme="liquid"] .messages { background: transparent; } [data-theme="liquid"] #sidebar { background: var(--sidebar-bg); backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .2); border-right: 0; } [data-theme="liquid"] .side-head, [data-theme="liquid"] .chat-head, [data-theme="liquid"] .composer, [data-theme="liquid"] .side-foot { background: var(--chrome); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22); border-color: transparent; } [data-theme="liquid"] .bubble { border-radius: var(--bubble-radius); background: var(--bubble-theirs); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 18px -8px rgba(4, 10, 32, .4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; } [data-theme="liquid"] .msg.mine .bubble { background: var(--bubble-mine); box-shadow: inset 0 1px 0 #fff, 0 10px 26px -10px rgba(4, 10, 32, .5); color: #161d33; } [data-theme="liquid"] .msg.mine .bubble .text, [data-theme="liquid"] .msg.mine .bubble .caption { color: #161d33; text-shadow: none; } [data-theme="liquid"] .msg.mine .bubble .time { color: #7b84a3; } [data-theme="liquid"] .msg.theirs .bubble .time { color: rgba(255, 255, 255, .65); } [data-theme="liquid"] .msg.mine .bubble { border-bottom-right-radius: 8px; } [data-theme="liquid"] .msg.theirs .bubble { border-bottom-left-radius: 8px; } [data-theme="liquid"] .msg.mine .reply-quote { background: rgba(60, 90, 220, .1); box-shadow: inset 0 0 0 1px rgba(60, 90, 220, .14); border-left-color: #3f56b8; } [data-theme="liquid"] .msg.mine .rq-who { color: #3f56b8; } [data-theme="liquid"] .msg.mine .rq-text { color: #4a5578; } [data-theme="liquid"] .msg.theirs .reply-quote { background: rgba(255, 255, 255, .18); border-left-color: rgba(255, 255, 255, .7); } [data-theme="liquid"] .contact { border-radius: 16px; } [data-theme="liquid"] .contact:hover { background: rgba(255, 255, 255, .22); } [data-theme="liquid"] .contact.active { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); } [data-theme="liquid"] .avatar { border-radius: 50%; border: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .28)) !important; color: #25315e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); } [data-theme="liquid"] .avatar::after { border-radius: 50%; } [data-theme="liquid"] .composer textarea#msgInput, [data-theme="liquid"] #themeSelect, [data-theme="liquid"] .login-card input { background: var(--sunken); box-shadow: var(--sunken-shadow); border: 0; border-radius: 20px; color: #fff; } [data-theme="liquid"] .composer textarea#msgInput::placeholder { color: rgba(255, 255, 255, .6); } [data-theme="liquid"] #themeSelect option { color: #161d33; } [data-theme="liquid"] .send-btn, [data-theme="liquid"] .login-card button { background: var(--send-bg); box-shadow: var(--send-shadow); border: 0; color: #2a3768; text-shadow: none; } [data-theme="liquid"] .icon-btn, [data-theme="liquid"] .notify-btn, [data-theme="liquid"] .chip, [data-theme="liquid"] .day.sys { background: var(--raised); box-shadow: var(--raised-shadow); border: 0; color: #fff; } [data-theme="liquid"] .login-card { background: rgba(255, 255, 255, .16); backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .22), var(--shadow); border-radius: 26px; } [data-theme="liquid"] .msg-menu, [data-theme="liquid"] .emoji-picker { background: rgba(30, 40, 90, .72); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), var(--shadow); } [data-theme="liquid"] .badge { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .75)); border: 0; color: #2a1230; text-shadow: none; box-shadow: 0 2px 5px rgba(4, 10, 32, .28); } [data-theme="liquid"] .typing-dots i { background: rgba(255, 255, 255, .9); box-shadow: none; } /* ========================================================================= 3b — Futaba (imageboard: flat, bordered, cream + maroon) ====================================================================== */ [data-theme="futaba"] { --font-ui: Arial, Helvetica, sans-serif; --bg: #ffffee; --app-bg: #ffffee; --panel: #ffffee; --panel-2: #ffffff; --line: #d9bfb7; --text: #800000; --muted: #5c5c5c; --accent: #af0a0f; --accent-2: #800000; --danger: #af0a0f; --radius: 0px; --shadow: 0 4px 14px rgba(0, 0, 0, .25); --wallpaper: #ffffee; --sidebar-bg: #ffffee; --chrome: #ea8; --chrome-line: #800000; --sunken: #ffffff; --sunken-shadow: none; --raised: #e0e0e0; --raised-shadow: none; --bubble-theirs: #ffffee; --bubble-theirs-border: #ffffee; --bubble-mine: #f0e0d6; --bubble-mine-border: #d9bfb7; --gloss: none; --gloss-strength: 0; --gloss-mine: 0; --bubble-radius: 0px; --chat-bg: #ffffee; --send-bg: #e0e0e0; --send-shadow: none; --orb-online: #117743; --orb-glow: none; --avatar-gloss: none; --text-emboss: none; /* greentext (board green darkened to clear 4.5:1 on cream) */ --quote: #61801b; --quote-mine: #527015; } [data-theme="futaba"] body { background: #ffffee; font-family: var(--font-ui); } [data-theme="futaba"] #app, [data-theme="futaba"] #chat, [data-theme="futaba"] .messages, [data-theme="futaba"] #sidebar { background: #ffffee; } [data-theme="futaba"] #sidebar { box-shadow: none; border-right: 1px solid var(--line); } /* section headers use the board's tan title bar */ [data-theme="futaba"] .side-head, [data-theme="futaba"] .chat-head { background: #ea8; box-shadow: none; border-bottom: 1px solid #800000; } [data-theme="futaba"] .composer, [data-theme="futaba"] .side-foot { background: #f0e0d6; box-shadow: none; border-top: 1px solid var(--line); } /* Board posts: square and flat, but still a real chat — recipient left on a pale-green plate, you right on the pink one. (An earlier pass left every post left-aligned with a transparent incoming plate, so incoming messages were invisible against the cream background.) */ [data-theme="futaba"] .msg { max-width: min(74%, 560px); } [data-theme="futaba"] .bubble { border-radius: 0; box-shadow: none; padding: 8px 10px; color: #000; background: #e9f0e2; /* theirs — pale green */ border: 1px solid #b7c9a8; } [data-theme="futaba"] .msg.mine .bubble { background: #f0e0d6; /* mine — pink */ border: 1px solid #d9bfb7; } [data-theme="futaba"] .msg.mine .bubble, [data-theme="futaba"] .msg.theirs .bubble { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* attachment thumbnails pick up the incoming plate's green tint */ [data-theme="futaba"] .msg.theirs .media { border: 1px solid #b7c9a8; } [data-theme="futaba"] .bubble .text, [data-theme="futaba"] .msg.mine .bubble .text { color: #000; text-shadow: none; } [data-theme="futaba"] .bubble .time, [data-theme="futaba"] .msg.mine .bubble .time { color: #5c5c5c; font-family: "Courier New", monospace; } [data-theme="futaba"] .reply-quote { background: transparent; border: 0; border-left: 0; border-radius: 0; padding: 0 0 2px; color: #0000ee; } [data-theme="futaba"] .rq-who { color: #0000ee; text-decoration: underline; } [data-theme="futaba"] .rq-text { color: #5c5c5c; } [data-theme="futaba"] .contact { border-radius: 0; border-bottom: 1px dotted var(--line); margin: 0; } [data-theme="futaba"] .contact:hover { background: #f0e0d6; } [data-theme="futaba"] .contact.active { background: #f0e0d6; box-shadow: none; } [data-theme="futaba"] .contact strong { color: #117743; } [data-theme="futaba"] .avatar { border-radius: 2px; border: 1px solid var(--line); box-shadow: none; color: #800000; } [data-theme="futaba"] .avatar::after { display: none; } [data-theme="futaba"] .online-dot { background: #117743; box-shadow: none; } [data-theme="futaba"] .composer textarea#msgInput, [data-theme="futaba"] #themeSelect, [data-theme="futaba"] .login-card input { background: #fff; border: 1px solid #aaa; border-radius: 0; box-shadow: none; color: #000; } [data-theme="futaba"] .send-btn, [data-theme="futaba"] .icon-btn, [data-theme="futaba"] .notify-btn, [data-theme="futaba"] .login-card button { background: #e0e0e0; border: 1px solid #8a8a8a; border-radius: 0; box-shadow: none; color: #000; text-shadow: none; } [data-theme="futaba"] .send-btn { border-radius: 0; width: auto; padding: 0 14px; } [data-theme="futaba"] .chip { background: #ffffee; border: 1px solid var(--line); border-radius: 0; box-shadow: none; color: #800000; } [data-theme="futaba"] .day.sys { background: #f0e0d6; border: 1px solid var(--line); border-radius: 0; box-shadow: none; color: #800000; } [data-theme="futaba"] .badge { background: transparent; border: 0; box-shadow: none; color: #af0a0f; text-shadow: none; font-weight: bold; } [data-theme="futaba"] .login-card { background: #ffffee; border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); } [data-theme="futaba"] .msg-menu, [data-theme="futaba"] .emoji-picker { background: #ffffee; border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); } [data-theme="futaba"] a { color: #0000ee; } [data-theme="futaba"] .typing-dots i { background: #5c5c5c; box-shadow: none; } /* Base has `.msg.mine .rq-who` (specificity 0,3,0), which outranks a plain `[data-theme=x] .rq-who` (0,2,0) — that left Futaba's quote label at 1.03:1, i.e. invisible. These selectors match the base's weight and then some. */ /* The quote plate was the same colour as the outgoing post, so it vanished into the bubble. Explicit teal, per spec. Selectors carry .msg.mine/.theirs because the base `.msg.mine .rq-who` rule (0,3,0) outranks a plainer one. */ /* The quote plate must read as a nested quote inside a post, and stay in the board palette: #d9bfb7 is the theme's own border/inset tone, so it sits between the cream page, the pink outgoing post and the green incoming one without introducing a foreign colour. Maroon rule + blue backlink, as a board would. */ /* Quote plate = the board's own header tan (#eeaa88, already used by the sidebar/chat headers), so it belongs to the palette while stepping clearly away in hue from BOTH the pink outgoing post and the green incoming one — the earlier rose-brown sat at 1.35 against pink, i.e. nearly invisible. A hard border plus the maroon rule makes the boundary unambiguous. */ [data-theme="futaba"] .msg.mine .reply-quote, [data-theme="futaba"] .msg.theirs .reply-quote { background: #eeaa88; border: 1px solid #b5763f; border-left: 3px solid #800000; border-radius: 0; } [data-theme="futaba"] .msg.mine .reply-quote:hover, [data-theme="futaba"] .msg.theirs .reply-quote:hover { background: #e79a72; } [data-theme="futaba"] .msg.mine .rq-who, [data-theme="futaba"] .msg.theirs .rq-who { color: #0000ee; text-decoration: underline; } [data-theme="futaba"] .msg.mine .rq-text, [data-theme="futaba"] .msg.theirs .rq-text { color: #4a2410; opacity: 1; } /* On the saturated "mine" gradients the quote label was only ~2.5-3:1. A darker plate plus white text is legible on all of them regardless of where the gradient happens to be behind it. */ [data-theme="aero"] .msg.mine .reply-quote, [data-theme="aero-midnight"] .msg.mine .reply-quote, [data-theme="candy"] .msg.mine .reply-quote { background: rgba(0, 0, 0, .34); border-left-color: rgba(255, 255, 255, .75); } [data-theme="aero"] .msg.mine .rq-who, [data-theme="aero-midnight"] .msg.mine .rq-who, [data-theme="candy"] .msg.mine .rq-who { color: #ffffff; } [data-theme="aero"] .msg.mine .rq-text, [data-theme="aero-midnight"] .msg.mine .rq-text, [data-theme="candy"] .msg.mine .rq-text { color: rgba(255, 255, 255, .92); opacity: 1; } /* ========================================================================= 4a — Zoailsa (cute pastel, light) Chat wallpaper: public/rat.jpg, referenced below as /rat.jpg (installed 2026-09-09). It stays optional by design — with the file absent the .messages rule falls back to its pale --chat-bg plate and the skin still reads correctly — which is why /rat.jpg is deliberately NOT in sw.js's SHELL list: cache.addAll() rejects atomically on a 404 and one missing image would stop the service worker installing for every user. The network-first fetch handler caches the picture on first view anyway. ====================================================================== */ [data-theme="zoailsa"] { --font-ui: "Trebuchet MS", "Avenir Next", "Segoe UI", Verdana, sans-serif; --bg: #f6ecf3; --app-bg: #f6ecf3; --panel: #fdf5fa; --panel-2: #fffafd; --line: #f0d7e5; --text: #6a4a5b; --muted: #94707f; --accent: #d1729a; --accent-2: #b0567f; --danger: #c9506a; --radius: 16px; --shadow: 0 26px 60px -20px rgba(120, 70, 100, .38); --wallpaper: linear-gradient(180deg, #fbeaf3, #f2ddec 60%, #e6d3e8); --sidebar-bg: linear-gradient(180deg, #fdf5fa, #f7e7f0); --chrome: linear-gradient(180deg, #fffdfe, #fbe9f2); --chrome-line: #f0d7e5; --sunken: linear-gradient(180deg, #ffffff, #fffafd); --sunken-shadow: inset 0 2px 4px rgba(190, 140, 170, .18); --raised: linear-gradient(180deg, #ffffff, #fbe9f2); --raised-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(160, 110, 140, .18); --bubble-theirs: rgba(255, 255, 255, .84); --bubble-theirs-border: rgba(255, 255, 255, .9); --bubble-mine: linear-gradient(180deg, #fbd3e4, #f6bcd5); --bubble-mine-border: #f2aecc; --gloss: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); --gloss-strength: .8; --gloss-mine: .55; --bubble-radius: 20px; --chat-bg: #fffafd; --send-bg: linear-gradient(180deg, #fcd9e7, #f4aecb); --send-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px rgba(160, 110, 140, .32); --orb-online: radial-gradient(circle at 42% 28%, #f2fff6, #a8e6c0 45%, #5cb98a 100%); --orb-glow: 0 0 6px rgba(120, 215, 165, .65); --avatar-gloss: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); --text-emboss: 0 1px 0 rgba(255, 255, 255, .8); /* greentext (white 5.1:1 / pink plate 4.9:1) */ --quote: #4f7a1f; --quote-mine: #2f5d0e; } [data-theme="zoailsa"] { font-family: var(--font-ui); } [data-theme="zoailsa"] body { font-family: var(--font-ui); background: var(--wallpaper) fixed; } [data-theme="zoailsa"] a { color: var(--accent); } [data-theme="zoailsa"] #app { background: var(--app-bg); } [data-theme="zoailsa"] #sidebar { background: var(--sidebar-bg); box-shadow: inset -1px 0 0 var(--chrome-line); border-right: 0; } /* chrome bars */ [data-theme="zoailsa"] .side-head, [data-theme="zoailsa"] .chat-head, [data-theme="zoailsa"] .side-foot, [data-theme="zoailsa"] .composer { background: var(--chrome); box-shadow: inset 0 1px 0 #fff; border-bottom-color: var(--chrome-line); border-top-color: var(--chrome-line); } [data-theme="zoailsa"] .chat-head strong, [data-theme="zoailsa"] .side-head strong { text-shadow: var(--text-emboss); } /* ---- the chat wallpaper: rat.jpg behind a soft veil so text stays legible. Both layers are on .messages (the scroll container), whose background does not scroll with the thread, so the picture stays put while you read. ---- */ [data-theme="zoailsa"] #chat { background: var(--chat-bg); } [data-theme="zoailsa"] .messages { background-image: linear-gradient(rgba(255, 250, 253, .5), rgba(255, 246, 251, .5)), url("/rat.jpg"); background-size: cover, cover; background-position: center 70%, center 70%; background-repeat: no-repeat, no-repeat; } /* bubbles: frosted white incoming, pastel pink outgoing */ [data-theme="zoailsa"] .bubble { border-radius: var(--bubble-radius); background: var(--bubble-theirs); border: 1px solid var(--bubble-theirs-border); box-shadow: inset 0 1px 0 #fff, 0 4px 12px -4px rgba(150, 100, 130, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #5b4653; } [data-theme="zoailsa"] .msg.mine .bubble { background: var(--bubble-mine); border-color: var(--bubble-mine-border); backdrop-filter: none; -webkit-backdrop-filter: none; color: #5f3a4d; } [data-theme="zoailsa"] .msg.mine .bubble .text, [data-theme="zoailsa"] .msg.mine .bubble .caption { color: #5f3a4d; text-shadow: none; } [data-theme="zoailsa"] .msg.theirs .bubble .text, [data-theme="zoailsa"] .msg.theirs .bubble .caption { color: #5b4653; } [data-theme="zoailsa"] .msg.mine .bubble { border-bottom-right-radius: 7px; } [data-theme="zoailsa"] .msg.theirs .bubble { border-bottom-left-radius: 7px; } /* base sets the stamp to white-on-dark; both plates are pale here */ [data-theme="zoailsa"] .msg.theirs .bubble .time { color: #9a7a89; } [data-theme="zoailsa"] .msg.mine .bubble .time { color: rgba(95, 58, 77, .6); } /* reply quote */ [data-theme="zoailsa"] .msg.mine .reply-quote, [data-theme="zoailsa"] .msg.theirs .reply-quote { background: rgba(246, 188, 213, .42); border-left-color: var(--accent); border-radius: 9px; } [data-theme="zoailsa"] .msg.mine .reply-quote:hover, [data-theme="zoailsa"] .msg.theirs .reply-quote:hover { background: rgba(240, 165, 197, .5); } [data-theme="zoailsa"] .msg.mine .rq-who, [data-theme="zoailsa"] .msg.theirs .rq-who { color: var(--accent-2); } [data-theme="zoailsa"] .msg.mine .rq-text, [data-theme="zoailsa"] .msg.theirs .rq-text { color: #7a6270; opacity: 1; } /* fields */ [data-theme="zoailsa"] .composer textarea#msgInput, [data-theme="zoailsa"] .login-card input, [data-theme="zoailsa"] .tv-nav input { background: var(--sunken); box-shadow: var(--sunken-shadow); border: 1px solid var(--line); color: var(--text); } [data-theme="zoailsa"] .composer textarea#msgInput::placeholder { color: #b394a2; } /* the send button keeps dark mauve ink — white on a pastel pill is unreadable */ [data-theme="zoailsa"] .send-btn, [data-theme="zoailsa"] .login-card button { background: var(--send-bg); box-shadow: var(--send-shadow); border: 1px solid var(--bubble-mine-border); color: #6b3a52; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); } [data-theme="zoailsa"] .send-btn:hover, [data-theme="zoailsa"] .login-card button:hover { filter: brightness(1.04); } /* raised chrome buttons + chips */ [data-theme="zoailsa"] .icon-btn, [data-theme="zoailsa"] .notify-btn, [data-theme="zoailsa"] .chip, [data-theme="zoailsa"] #themeSelect, [data-theme="zoailsa"] .day.sys, [data-theme="zoailsa"] .jump-latest { background: var(--raised); box-shadow: var(--raised-shadow); border: 1px solid var(--line); color: var(--text); } [data-theme="zoailsa"] .icon-btn { border: 0; box-shadow: none; background: transparent; color: var(--muted); } [data-theme="zoailsa"] .icon-btn:hover { color: var(--text); background: #fdeef6; } [data-theme="zoailsa"] .chip.own { border-color: var(--accent); background: #fce3ee; } [data-theme="zoailsa"] .jump-latest.has-new { background: var(--bubble-mine); border-color: var(--bubble-mine-border); color: #5f3a4d; } [data-theme="zoailsa"] .day.date-sep { background: rgba(255, 255, 255, .86); border: 1px solid var(--line); color: #8a6a7a; box-shadow: 0 1px 3px rgba(160, 110, 140, .14); } /* contact list */ [data-theme="zoailsa"] .contacts { background: var(--sunken); box-shadow: inset 0 2px 6px rgba(190, 140, 170, .12); border-top: 1px solid var(--chrome-line); border-bottom: 1px solid var(--chrome-line); } [data-theme="zoailsa"] .contact { border-radius: 14px; } [data-theme="zoailsa"] .contact:hover { background: #fdeef6; } [data-theme="zoailsa"] .contact.active { background: linear-gradient(180deg, #fdeaf3, #f8d9e8); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(160, 110, 140, .18); outline: 0; } /* avatars: JS assigns a saturated hsl() per user, which fights the palette — wash them to one pastel plate and keep the initials in the ink colour. */ [data-theme="zoailsa"] .avatar { border-radius: 50%; border: 0; background: linear-gradient(160deg, #f7dcec, #e6c6de) !important; color: var(--text); box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(150, 100, 130, .25); overflow: visible; position: relative; } [data-theme="zoailsa"] .avatar::after { content: ""; position: absolute; inset: 2px 2px auto 2px; height: 38%; border-radius: 50% 50% 40% 40%; background: var(--avatar-gloss); pointer-events: none; } [data-theme="zoailsa"] .online-dot { background: var(--orb-online); border-color: var(--panel); box-shadow: var(--orb-glow); } [data-theme="zoailsa"] .typing-dots i { background: var(--orb-online); box-shadow: var(--orb-glow); } /* unread badge: dark ink on a pink capsule (white would be ~2:1 here) */ [data-theme="zoailsa"] .badge { background: linear-gradient(180deg, #fbc8dc, #f4a7c6); border: 1px solid var(--bubble-mine-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); color: #6b2340; text-shadow: none; } /* menus, pickers, cards */ [data-theme="zoailsa"] .msg-menu, [data-theme="zoailsa"] .emoji-picker, [data-theme="zoailsa"] .tv-card, [data-theme="zoailsa"] .tv-toast { background: var(--chrome); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); } [data-theme="zoailsa"] .msg-menu button:hover, [data-theme="zoailsa"] .emoji-picker button:hover { background: #fdeef6; } [data-theme="zoailsa"] .login-card { background: var(--sidebar-bg); border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 #fff; } [data-theme="zoailsa"] #login { background: radial-gradient(1200px 600px at 50% -10%, #fbe4f0 0%, var(--bg) 60%); } [data-theme="zoailsa"] .fine { opacity: 1; color: var(--muted); } [data-theme="zoailsa"] .install-hint { background: #fffafd; border-color: var(--line); } [data-theme="zoailsa"] .g-cell { background: #fdeef6; } [data-theme="zoailsa"] .gallery { background: var(--bg); } /* the message flash (tapping a reply quote) is blue in the base */ [data-theme="zoailsa"] .msg.flash .bubble { animation: flash-zoailsa 1.1s ease; } @keyframes flash-zoailsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(209, 114, 154, 0); } 15% { box-shadow: 0 0 0 3px rgba(209, 114, 154, .65); } 70% { box-shadow: 0 0 0 3px rgba(209, 114, 154, .35); } } /* Theater chrome stays on the palette; the fullscreen/immersive overlay is deliberately identical in every theme (id-based rules in styles.css win). */ [data-theme="zoailsa"] #theater { border-right-color: var(--line); } [data-theme="zoailsa"] .tv-head, [data-theme="zoailsa"] .tv-controls, [data-theme="zoailsa"] .tv-foot { background: var(--chrome); border-color: var(--line); } [data-theme="zoailsa"] .tv-nav button, [data-theme="zoailsa"] .tv-card-actions button { background: var(--send-bg); border: 1px solid var(--bubble-mine-border); color: #6b3a52; } [data-theme="zoailsa"] .tv-toggle, [data-theme="zoailsa"] .tv-keys button, [data-theme="zoailsa"] .tv-icon, [data-theme="zoailsa"] .tv-leave, [data-theme="zoailsa"] .tv-quality { background: var(--raised); box-shadow: var(--raised-shadow); border: 1px solid var(--line); color: var(--text); } [data-theme="zoailsa"] .tv-end { background: var(--danger); color: #fff; } /* ========================================================================= 3c — Futaba Max Opsec (imageboard after hours) The dark counterpart to 3b Futaba: the same flat, square, bordered construction, with the plates inverted — cream page to charcoal, tan title bars to graphite, maroon ink to pale grey — while the board's blue backlinks stay blue, the one colour a dark imageboard keeps. Authored as "Futaba Dark"; renamed on install 2026-09-09. Greentext arrived with this skin but is no longer part of it: the base rules moved to styles.css and every skin now sets --quote / --quote-mine, so a ">" run is green in Midnight and Zoailsa too. ====================================================================== */ [data-theme="futaba-max-opsec"] { --font-ui: Arial, Helvetica, sans-serif; --bg: #1d1f21; --app-bg: #1d1f21; --panel: #1d1f21; --panel-2: #282a2e; --line: #3a3d42; --text: #c5c8c6; --muted: #969896; --accent: #81a2be; --accent-2: #5f89ac; --danger: #cc6666; --radius: 0px; --shadow: 0 4px 14px rgba(0, 0, 0, .6); --wallpaper: #1d1f21; --sidebar-bg: #1d1f21; --chrome: #282a2e; --chrome-line: #111214; --sunken: #16181a; --sunken-shadow: none; --raised: #33363b; --raised-shadow: none; --bubble-theirs: #26302b; /* the pale-green incoming plate, inverted */ --bubble-theirs-border: #3a4a3f; --bubble-mine: #332b30; /* the pink outgoing plate, inverted */ --bubble-mine-border: #4a3b42; --gloss: none; --gloss-strength: 0; --gloss-mine: 0; --bubble-radius: 0px; --chat-bg: #1d1f21; --send-bg: #33363b; --send-shadow: none; --orb-online: #99c794; --orb-glow: none; --avatar-gloss: none; --text-emboss: none; /* greentext (charcoal plates, 6.6:1 both sides) */ --quote: #9dc06a; --quote-mine: #9dc06a; } [data-theme="futaba-max-opsec"] body { background: #1d1f21; font-family: var(--font-ui); } [data-theme="futaba-max-opsec"] #app, [data-theme="futaba-max-opsec"] #chat, [data-theme="futaba-max-opsec"] .messages, [data-theme="futaba-max-opsec"] #sidebar { background: #1d1f21; } [data-theme="futaba-max-opsec"] #sidebar { box-shadow: none; border-right: 1px solid var(--line); } /* section headers: the board's title bar, in graphite */ [data-theme="futaba-max-opsec"] .side-head, [data-theme="futaba-max-opsec"] .chat-head { background: #282a2e; box-shadow: none; border-bottom: 1px solid #111214; } [data-theme="futaba-max-opsec"] .composer, [data-theme="futaba-max-opsec"] .side-foot { background: #232528; box-shadow: none; border-top: 1px solid var(--line); } /* posts: square and flat, incoming on the green plate, yours on the mauve one */ [data-theme="futaba-max-opsec"] .msg { max-width: min(74%, 560px); } [data-theme="futaba-max-opsec"] .bubble { border-radius: 0; box-shadow: none; padding: 8px 10px; color: var(--text); background: var(--bubble-theirs); border: 1px solid var(--bubble-theirs-border); } [data-theme="futaba-max-opsec"] .msg.mine .bubble { background: var(--bubble-mine); border: 1px solid var(--bubble-mine-border); } [data-theme="futaba-max-opsec"] .msg.mine .bubble, [data-theme="futaba-max-opsec"] .msg.theirs .bubble { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } [data-theme="futaba-max-opsec"] .msg.theirs .media { border: 1px solid var(--bubble-theirs-border); } [data-theme="futaba-max-opsec"] .bubble .text, [data-theme="futaba-max-opsec"] .msg.mine .bubble .text { color: var(--text); text-shadow: none; } [data-theme="futaba-max-opsec"] .bubble .time, [data-theme="futaba-max-opsec"] .msg.mine .bubble .time { color: var(--muted); font-family: "Courier New", monospace; } /* quote plate: a nested quote inside a post — graphite step-up, blue backlink */ [data-theme="futaba-max-opsec"] .msg.mine .reply-quote, [data-theme="futaba-max-opsec"] .msg.theirs .reply-quote { background: #202225; border: 1px solid #43474d; border-left: 3px solid #6f7378; border-radius: 0; } [data-theme="futaba-max-opsec"] .msg.mine .reply-quote:hover, [data-theme="futaba-max-opsec"] .msg.theirs .reply-quote:hover { background: #191b1d; } [data-theme="futaba-max-opsec"] .msg.mine .rq-who, [data-theme="futaba-max-opsec"] .msg.theirs .rq-who { color: #81a2be; text-decoration: underline; } [data-theme="futaba-max-opsec"] .msg.mine .rq-text, [data-theme="futaba-max-opsec"] .msg.theirs .rq-text { color: #a1a4a2; opacity: 1; } [data-theme="futaba-max-opsec"] .contact { border-radius: 0; border-bottom: 1px dotted var(--line); margin: 0; } [data-theme="futaba-max-opsec"] .contact:hover { background: #26282b; } [data-theme="futaba-max-opsec"] .contact.active { background: #2e3135; box-shadow: none; outline: 0; } [data-theme="futaba-max-opsec"] .contact strong { color: #99c794; } /* the board's green name */ [data-theme="futaba-max-opsec"] .avatar { border-radius: 2px; border: 1px solid var(--line); box-shadow: none; color: var(--text); } [data-theme="futaba-max-opsec"] .avatar::after { display: none; } [data-theme="futaba-max-opsec"] .online-dot { background: #99c794; box-shadow: none; border-color: #282a2e; } [data-theme="futaba-max-opsec"] .composer textarea#msgInput, [data-theme="futaba-max-opsec"] #themeSelect, [data-theme="futaba-max-opsec"] .login-card input, [data-theme="futaba-max-opsec"] .tv-nav input { background: var(--sunken); border: 1px solid #4a4e54; border-radius: 0; box-shadow: none; color: var(--text); } [data-theme="futaba-max-opsec"] .composer textarea#msgInput::placeholder { color: #7c7f7d; } [data-theme="futaba-max-opsec"] .send-btn, [data-theme="futaba-max-opsec"] .icon-btn, [data-theme="futaba-max-opsec"] .notify-btn, [data-theme="futaba-max-opsec"] .login-card button, [data-theme="futaba-max-opsec"] .tv-nav button, [data-theme="futaba-max-opsec"] .tv-toggle, [data-theme="futaba-max-opsec"] .tv-keys button, [data-theme="futaba-max-opsec"] .tv-icon, [data-theme="futaba-max-opsec"] .tv-leave { background: var(--raised); border: 1px solid #4a4e54; border-radius: 0; box-shadow: none; color: var(--text); text-shadow: none; } [data-theme="futaba-max-opsec"] .send-btn { border-radius: 0; width: auto; padding: 0 14px; } [data-theme="futaba-max-opsec"] .icon-btn { background: transparent; border: 0; color: var(--muted); } [data-theme="futaba-max-opsec"] .icon-btn:hover { background: #2e3135; color: var(--text); } [data-theme="futaba-max-opsec"] .chip { background: #26282b; border: 1px solid var(--line); border-radius: 0; box-shadow: none; color: var(--text); } [data-theme="futaba-max-opsec"] .chip.own { border-color: #81a2be; background: #23303a; } [data-theme="futaba-max-opsec"] .day.sys, [data-theme="futaba-max-opsec"] .day.date-sep, [data-theme="futaba-max-opsec"] .jump-latest { background: #26282b; border: 1px solid var(--line); border-radius: 0; box-shadow: none; color: var(--muted); } [data-theme="futaba-max-opsec"] .jump-latest.has-new { background: #33363b; color: var(--text); border-color: #4a4e54; } [data-theme="futaba-max-opsec"] .badge { background: transparent; border: 0; box-shadow: none; color: #cc6666; text-shadow: none; font-weight: bold; } [data-theme="futaba-max-opsec"] .login-card, [data-theme="futaba-max-opsec"] .msg-menu, [data-theme="futaba-max-opsec"] .emoji-picker, [data-theme="futaba-max-opsec"] .tv-card, [data-theme="futaba-max-opsec"] .tv-toast { background: #232528; border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); color: var(--text); } [data-theme="futaba-max-opsec"] .msg-menu button:hover, [data-theme="futaba-max-opsec"] .emoji-picker button:hover { background: #2e3135; } [data-theme="futaba-max-opsec"] #login { background: #1d1f21; } [data-theme="futaba-max-opsec"] .fine { opacity: 1; color: var(--muted); } [data-theme="futaba-max-opsec"] .install-hint { background: #232528; border-color: var(--line); } [data-theme="futaba-max-opsec"] .g-cell { background: #26282b; } [data-theme="futaba-max-opsec"] .gallery { background: #1d1f21; } [data-theme="futaba-max-opsec"] a { color: #81a2be; } [data-theme="futaba-max-opsec"] .typing-dots i { background: var(--muted); box-shadow: none; } /* Greentext is an app-wide feature now, not a Futaba trait — the base rules live in styles.css and every skin supplies --quote / --quote-mine. */ /* the reply flash is blue in the base — keep it, just quieter on charcoal */ [data-theme="futaba-max-opsec"] .msg.flash .bubble { animation: flash-futaba-max-opsec 1.1s ease; } @keyframes flash-futaba-max-opsec { 0%, 100% { box-shadow: 0 0 0 0 rgba(129, 162, 190, 0); } 15% { box-shadow: 0 0 0 3px rgba(129, 162, 190, .6); } 70% { box-shadow: 0 0 0 3px rgba(129, 162, 190, .3); } } /* theater chrome (the immersive overlay stays neutral in every theme) */ [data-theme="futaba-max-opsec"] #theater { border-right-color: var(--line); } [data-theme="futaba-max-opsec"] .tv-head, [data-theme="futaba-max-opsec"] .tv-controls, [data-theme="futaba-max-opsec"] .tv-foot { background: #282a2e; border-color: var(--line); } [data-theme="futaba-max-opsec"] .tv-end { background: var(--danger); color: #1d1f21; border: 0; border-radius: 0; } [data-theme="futaba-max-opsec"] .tv-card-actions button { background: var(--raised); color: var(--text); border: 1px solid #4a4e54; border-radius: 0; }