/* Comprehend — themeable. Every colour in this file comes from a token below; * a theme is one `[data-theme]` block that redefines the same names, so adding * one never means touching a rule. The picker (app.js) writes data-theme on * ; index.html applies the saved choice before first paint. */ /* ---------- Candlelight (default): dark table, candlelight accents ---------- */ :root, :root[data-theme="candlelight"] { --bg: #141009; --panel: #201811; --panel-2: #2a2015; --line: #3a2d1c; --ink: #ead9b0; --muted: #a08c66; --faint: #6d5d41; --gold: #c9a227; --gold-dim: #8a7020; --on-gold: #1c1503; --unknown: #b7a077; --danger: #c96b4a; --toast-bg: #3a1f14; --toast-ink: #f0c5b0; --warn-bg: #2a2008; --warn-ink: #d8b856; --dot-off: #4a3d28; --dot-on: #7fb069; /* the arcane accent: Comprehend Languages badges, banner and toggle */ --arc-bg: #2a2440; --arc-line: #5a4fa0; --arc-ink: #cdb8ff; --arc-accent: #a58bff; --scrim: rgba(0, 0, 0, .55); color-scheme: dark; --serif: "Iowan Old Style", "Palatino", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ---------- Parchment: candlelight read by daylight ---------- */ :root[data-theme="parchment"] { --bg: #efe4cd; --panel: #f8f1de; --panel-2: #e9dcbf; --line: #cdb894; --ink: #33291b; --muted: #7a6748; --faint: #9b8865; --gold: #9a7511; --gold-dim: #b08f33; --on-gold: #fdf6e3; --unknown: #6f5c3d; --danger: #a8341c; --toast-bg: #f6ddd2; --toast-ink: #7d2a12; --warn-bg: #f4e6bd; --warn-ink: #7a5c0c; --dot-off: #c0ad8b; --dot-on: #4b7f38; --arc-bg: #e8e1f7; --arc-line: #a396d4; --arc-ink: #4b3a8c; --arc-accent: #6b58b8; --scrim: rgba(40, 30, 15, .4); color-scheme: light; } /* ---------- Moonlit: cold night, silver on slate ---------- */ :root[data-theme="moonlit"] { --bg: #0c1119; --panel: #151c27; --panel-2: #1e2735; --line: #2c3646; --ink: #dbe6f3; --muted: #8195ac; --faint: #5b6d84; --gold: #8cbde8; --gold-dim: #4e6f92; --on-gold: #08111c; --unknown: #97abc3; --danger: #e0736a; --toast-bg: #33191c; --toast-ink: #f2c2bd; --warn-bg: #10243a; --warn-ink: #8cbde8; --dot-off: #33465c; --dot-on: #6fc3a6; --arc-bg: #241f3d; --arc-line: #574c9e; --arc-ink: #cfbcff; --arc-accent: #a48eff; --scrim: rgba(0, 0, 0, .6); color-scheme: dark; } /* ---------- Grimoire: violet ink, cyan sigils ---------- */ :root[data-theme="grimoire"] { --bg: #110d1a; --panel: #1a1426; --panel-2: #241c34; --line: #372a4c; --ink: #e7ddf6; --muted: #9a88b6; --faint: #6d5c8a; --gold: #b98cf0; --gold-dim: #7a5aa8; --on-gold: #150f20; --unknown: #b3a0cc; --danger: #e06a8a; --toast-bg: #331624; --toast-ink: #f4bccd; --warn-bg: #241a3a; --warn-ink: #c3a5f5; --dot-off: #43355c; --dot-on: #62c9a8; --arc-bg: #113030; --arc-line: #2f6a63; --arc-ink: #8fe3d8; --arc-accent: #4fbfae; --scrim: rgba(0, 0, 0, .6); color-scheme: dark; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } [v-cloak] { display: none; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overscroll-behavior: none; } #app { height: 100dvh; display: flex; flex-direction: column; } /* ---------- shared ---------- */ .page { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(1rem + env(safe-area-inset-top)) 1.2rem calc(1.5rem + env(safe-area-inset-bottom)); max-width: 34rem; width: 100%; margin: 0 auto; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: .02em; } input, select, button { font-size: 16px; /* prevents iOS zoom-on-focus */ font-family: var(--sans); } input[type="text"], input:not([type]), .code-input { width: 100%; padding: .7rem .8rem; margin-top: .35rem; background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; color: var(--ink); outline: none; } input:focus { border-color: var(--gold-dim); } input::placeholder { color: var(--faint); } label { display: block; margin: 1rem 0 .4rem; color: var(--muted); font-size: .95rem; } .hint { color: var(--muted); font-size: .9rem; line-height: 1.4; } .error { color: var(--danger); font-size: .95rem; } button { cursor: pointer; } .primary { width: 100%; margin-top: 1.2rem; padding: .85rem; background: var(--gold); color: var(--on-gold); font-weight: 700; border: none; border-radius: .7rem; } .primary:disabled { opacity: .4; } .back { background: none; border: none; color: var(--muted); padding: .25rem 0; margin-bottom: .5rem; font-size: 1rem; } /* ---------- landing ---------- */ .landing { display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; } .hero { text-align: center; } .sigil { width: 84px; height: 84px; border-radius: 20px; margin-bottom: .8rem; } .hero h1 { font-size: 2.3rem; margin: 0; color: var(--gold); } .tag { color: var(--muted); margin-top: .4rem; } .cards { display: flex; flex-direction: column; gap: .9rem; } .card { text-align: left; padding: 1.1rem 1.2rem; background: var(--panel); border: 1px solid var(--line); border-radius: .9rem; color: var(--ink); display: flex; flex-direction: column; gap: .25rem; } .card:active { background: var(--panel-2); } .card-title { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); } .card-sub { color: var(--muted); font-size: .92rem; } .boot { display: flex; align-items: center; justify-content: center; color: var(--muted); } /* ---------- join form languages ---------- */ .langs-field { margin-top: 1.1rem; } .langs-label { color: var(--muted); font-size: .95rem; margin-bottom: .5rem; } .common-chip { display: inline-block; padding: .35rem .7rem; border: 1px dashed var(--gold-dim); border-radius: 2rem; color: var(--gold); font-size: .85rem; margin-bottom: .6rem; } .lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .6rem; } .lang-check { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .45rem .55rem; background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); font-size: .95rem; } .lang-check:has(input:checked) { border-color: var(--gold); color: var(--gold); } .lang-check input { accent-color: var(--gold); margin: 0; } .code-input { letter-spacing: .45em; text-transform: uppercase; font-size: 1.4rem; text-align: center; font-family: var(--serif); } /* ---------- chat ---------- */ .chat { flex: 1; display: flex; flex-direction: column; min-height: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(.6rem + env(safe-area-inset-top)) 1rem .6rem; background: var(--panel); border-bottom: 1px solid var(--line); } .room { min-width: 0; } .room-name { font-family: var(--serif); font-size: 1.05rem; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .room-sub { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .8rem; margin-top: .1rem; } .room-code { font-family: var(--serif); letter-spacing: .18em; color: var(--ink); } .room-code.big { font-size: 1.6rem; letter-spacing: .3em; color: var(--gold); } .me-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .badge { font-size: .62rem; font-weight: 700; letter-spacing: .06em; padding: .1rem .35rem; border-radius: .3rem; vertical-align: middle; } .badge.dm { background: var(--gold); color: var(--on-gold); } .badge.comprehend { background: var(--arc-bg); color: var(--arc-ink); border: 1px solid var(--arc-line); letter-spacing: .04em; } .roster-btn { background: none; border: 1px solid var(--line); border-radius: 2rem; color: var(--muted); padding: .35rem .7rem; display: flex; align-items: center; gap: .35rem; } .reconnect { text-align: center; font-size: .82rem; color: var(--warn-ink); background: var(--warn-bg); padding: .3rem; border-bottom: 1px solid var(--line); } .toast { position: fixed; top: calc(3.6rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-ink); border: 1px solid var(--danger); padding: .5rem .9rem; border-radius: .6rem; font-size: .9rem; z-index: 30; max-width: 90%; } .comprehend-banner { text-align: center; font-size: .82rem; line-height: 1.4; color: var(--arc-ink); background: var(--arc-bg); border-bottom: 1px solid var(--arc-line); padding: .4rem .8rem; } .comprehend-banner .spark { color: var(--arc-accent); } .messages { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .9rem .9rem 1.1rem; display: flex; flex-direction: column; gap: .65rem; } .empty-hint { margin: auto; text-align: center; color: var(--muted); line-height: 1.5; } .msg { max-width: 86%; align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: .9rem; border-bottom-left-radius: .25rem; padding: .5rem .75rem .55rem; } .msg.mine { align-self: flex-end; background: var(--panel-2); border-bottom-left-radius: .9rem; border-bottom-right-radius: .25rem; } .meta { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .2rem; flex-wrap: wrap; } .sender { font-weight: 600; font-size: .85rem; color: var(--gold); } .time { color: var(--faint); font-size: .7rem; margin-left: auto; } .lang-pill { font-size: .68rem; padding: .08rem .45rem; border-radius: 2rem; border: 1px solid var(--line); color: var(--muted); } .lang-pill.common { border-color: transparent; color: var(--faint); } .lang-pill.unknown { border-style: dashed; border-color: var(--gold-dim); color: var(--unknown); } .text { line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .msg.unknown .text { font-family: var(--serif); font-style: italic; letter-spacing: .03em; color: var(--unknown); } /* ---------- composer ---------- */ .composer { border-top: 1px solid var(--line); background: var(--panel); padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .45rem; } .compose-row { display: flex; gap: .5rem; } .lang-select { background: var(--panel-2); color: var(--gold); border: 1px solid var(--gold-dim); border-radius: .55rem; padding: .45rem .6rem; min-width: 8.5rem; -webkit-appearance: none; appearance: none; } .lang-select.common { color: var(--muted); border-color: var(--line); } .speak-as { flex: 1; margin-top: 0 !important; } .speak-as::placeholder { font-style: italic; } .draft { flex: 1; margin-top: 0 !important; } .send { width: 3rem; border: none; border-radius: .6rem; background: var(--gold); color: var(--on-gold); font-size: 1.1rem; } .send:disabled { opacity: .35; } /* ---------- roster drawer ---------- */ .drawer-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 40; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(21rem, 85vw); background: var(--panel); border-left: 1px solid var(--line); padding: calc(1rem + env(safe-area-inset-top)) 1.1rem calc(1rem + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: .7rem; } .drawer h3 { margin: 0 0 .4rem; color: var(--gold); } .roster-row { display: flex; align-items: flex-start; gap: .6rem; } .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--dot-off); margin-top: .45rem; flex: none; display: inline-block; } .dot.online { background: var(--dot-on); } .roster-btn .dot { margin-top: 0; } .roster-name { font-weight: 600; } .roster-langs { color: var(--muted); font-size: .8rem; margin-top: .15rem; line-height: 1.35; } .comprehend-toggle { margin-top: .4rem; padding: .3rem .6rem; font-size: .78rem; background: none; border: 1px solid var(--arc-line); color: var(--arc-ink); border-radius: .5rem; } .comprehend-toggle.active { background: var(--arc-bg); border-color: var(--arc-accent); } .leave { margin-top: auto; padding: .7rem; background: none; border: 1px solid var(--danger); color: var(--danger); border-radius: .6rem; } /* ---------- theme picker ---------- */ .theme-picker { margin-top: .2rem; } .theme-picker-label { color: var(--muted); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .5rem; } .swatches { display: flex; flex-wrap: wrap; gap: .5rem; } .swatch { display: flex; align-items: center; gap: .45rem; padding: .35rem .6rem .35rem .4rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 2rem; color: var(--muted); font-size: .82rem; } .swatch.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); font-weight: 600; } /* the chips paint themselves in the theme they name, so the choice is legible without applying it first */ .swatch-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid var(--line); /* bg / accent split diagonally */ background: linear-gradient(135deg, var(--sw-bg) 0 50%, var(--sw-accent) 50% 100%); flex: none; } .swatch.active .swatch-dot { border-color: var(--gold); } .landing .theme-picker { text-align: center; } .landing .swatches { justify-content: center; } .drawer .theme-picker { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .8rem; }