/* Bag Chat: one layout, seven looks. The look is (BANTOWN.fyi, Glass, Channel and Bold build on Clean's rules: data-fam="clean"); every screen is the same markup and only the skin changes (keep it that way: a feature added to one look gets styled in all seven). All original: no app's or game's art. */ @font-face { font-family: 'Cinzel'; src: url('/fonts/Cinzel.ttf') format('truetype'); font-weight: 400 900; font-display: swap; } /* BANTOWN.fyi's type, the guild site's own (Barlow and Barlow Condensed, The Barlow Project; JetBrains Mono, JetBrains; SIL Open Font License, public/fonts/OFL-*.txt), cut down to Latin and served from here, never a font host. Each face answers a range of weights, so nothing is ever drawn fake-bold. */ @font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-500.woff') format('woff'); font-weight: 100 500; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-600.woff') format('woff'); font-weight: 600 900; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('/fonts/BarlowCondensed-700.woff') format('woff'); font-weight: 100 700; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('/fonts/BarlowCondensed-800.woff') format('woff'); font-weight: 800 900; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('/fonts/BarlowCondensed-800i.woff') format('woff'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-500.woff') format('woff'); font-weight: 100 500; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-700.woff') format('woff'); font-weight: 600 900; font-display: swap; } /* ---------------------------------------------------------------- tokens */ :root { --sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif; --app-h: 100dvh; --sai: env(safe-area-inset-top, 0px); /* the phone's top safe area (read by look.js: the app runs under the clock) */ --sab: env(safe-area-inset-bottom, 0px); /* the bottom one, under every screen (0 while raid voice's bar is there: it keeps it) */ --sat: var(--sai); /* the top of every screen: what it pads by ("the top", below: more when it's lowered) */ color-scheme: dark; /* One spacing and type scale for the whole app, iMessage-sized (Zbo, Oct 31: "it should feel expansive like iMessage, Slack or the Claude app"). Every look reads these; Retro sets its own, 2006-dense values below (but keeps the taps). Text follows the phone's text size (effortless, pass 5; Zbo, Nov 3; T7): 1rem is the phone's body size, 17 px at its default ("the root", below), and every size of text is written from it. `calc(15rem / 17)` is 15 px at the default and grows or shrinks with the phone's setting, by its ratio (Retro's are its own, smaller ratios, so it stays 2006-dense at every size); a display size (24 px and up: a page's big title, the Hub's countdown) grows by as much as the body does, not as many times (`calc(1rem + 17px)` is 34 px at the default), as an iPhone's own big titles do; the bar, the rail and a page's top grow only so far (`--cap`, below). Pictures stay in px: a face's initial, an emoji, a badge. So do spacing and taps: 44 pt is a fingertip, whatever the text. */ --gut: 16px; /* side margins */ --tap: 44px; /* the smallest tap anywhere */ --fs-msg: 1rem; --lh-msg: 1.38; /* the Bags' words (17 px at the phone's default text size) */ --fs-body: 1rem; /* everything else you read (17) */ --fs-sub: calc(15rem / 17); /* second lines, notes, hints (15) */ --fs-foot: calc(13rem / 17); /* times and counts (13) */ --fs-lab: calc(13rem / 17); /* labels: a section's name, chips, the bar's words (13; effortless, T7: never under 13 px; BANTOWN.fyi's mono 12, Retro 11) */ --fs-title: calc(1rem + 17px); /* a page's big title (34; small in the bar once it scrolls away) */ --fs-bar: 1rem; /* a page's top: its small title and Back (17) */ --hr: min(1rem, 19.55px); /* the root, grown to 115% at most: what the bar's, the rail's and a top's words are written from */ --bub-y: 9px; --bub-x: 14px; /* inside a bubble */ --run: 2px; /* between messages in one run (one Bag, one stretch of time) */ --runs: 16px; /* between runs */ --box: 44px; /* the message box */ --row: 52px; /* a row in a grouped list */ --grp-r: 14px; /* a group's corners */ --edge: var(--bg); /* the band's color, when the top is lowered ("the top", below) */ --fade: linear-gradient(transparent, transparent); /* the faint white fills and lines on a dark look (light mode, #14: a light version redefines each, below) */ --w045: rgba(255,255,255,.045); --w05: rgba(255,255,255,.05); --w055: rgba(255,255,255,.055); --w06: rgba(255,255,255,.06); --w07: rgba(255,255,255,.07); --w08: rgba(255,255,255,.08); --w09: rgba(255,255,255,.09); --w10: rgba(255,255,255,.1); --w11: rgba(255,255,255,.11); --w12: rgba(255,255,255,.12); --w13: rgba(255,255,255,.13); --w14: rgba(255,255,255,.14); --w16: rgba(255,255,255,.16); --w17: rgba(255,255,255,.17); --w18: rgba(255,255,255,.18); --w20: rgba(255,255,255,.2); --w24: rgba(255,255,255,.24); } :root, [data-look="clean"] { --bg: #0a0a0c; --fg: #f4f4f6; --dim: #9a9aa3; --line: #1f1f25; --card: #141418; --card2: #1d1d22; --accent: #d8b25a; --btn: #f6df9a; --btn-fg: #1f1a0a; --font: var(--sys); --title: var(--sys); --prs: var(--w10); --prs-card: #34343c; /* pressed: a row (over whatever is under it), a card (app.css "pressed") */ } [data-look="night"] { --bg: #0b0d14; --fg: #e9e6dc; --dim: #9b9aa6; --line: #3a3424; --card: #121624; --card2: #1b2033; --accent: #d8b25a; --btn: #d8b25a; --btn-fg: #1d1508; --font: var(--sys); --title: 'Cinzel', Georgia, serif; --prs: rgba(216,178,90,.17); --prs-card: #343c66; } [data-look="glass"] { --frost: linear-gradient(var(--edge), var(--edge)) top / 100% var(--sat) no-repeat, rgba(11,11,16,.74); /* a top bar: solid under the clock, frosted below */ --bg: #0b0b10; --fg: #f4f4f6; --dim: #a9a9b4; --line: var(--w09); --card: #15151b; --card2: var(--w09); --accent: #efcf7a; --btn: #f2d888; --btn-fg: #1f1a0a; --font: var(--sys); --title: var(--sys); --prs: var(--w13); --prs-card: var(--w24); } [data-look="channel"] { --bg: #0e0e11; --fg: #f2f2f5; --dim: #9c9ca7; --line: #1e1e24; --card: #16161a; --card2: #1d1d22; --accent: #f6df9a; --btn: #f6df9a; --btn-fg: #1f1a0a; --font: var(--sys); --title: var(--sys); --prs: var(--w09); --prs-card: #34343c; } [data-look="bold"] { --bg: #f4efe5; --fg: #18161b; --dim: #5f5b57; --line: #18161b; --card: #fffdf8; --card2: #ece5d6; --accent: #ff7a45; --btn: #ffd35a; --btn-fg: #18161b; --font: var(--sys); --title: var(--sys); --ink: #18161b; --prs: #ffeeae; --prs-card: #ffeeae; color-scheme: light; } [data-look="retro"] { --bg: #d6dfee; --fg: #000; --dim: #444; --line: #8ea4c6; --card: #fff; --card2: #eef3fb; --accent: #2a58bd; --btn: #2a58bd; --btn-fg: #fff; --gloss: linear-gradient(#4470d2, #3563c9 50%, #2a58bd 51%, #3463c8); --font: Verdana, Tahoma, 'DejaVu Sans', sans-serif; --title: Verdana, Tahoma, 'DejaVu Sans', sans-serif; --prs: #316ac5; --prs-card: #c3d1ea; /* (a row or a card: 2006's selection blue, its words white; a button: pushed in) */ /* (the gloss and the title bars' blue: deep enough at their lightest that white words on them read at 4.5:1: effortless, T6) */ color-scheme: light; /* 2006-dense on purpose (Zbo, Oct 31): small Verdana, tight windows; only the taps grow */ /* (its sizes, at the phone's default: 14, 15, 13, 11, 11, 20, 20; each grows by its own ratio, so it stays dense) */ --gut: 8px; --fs-msg: calc(14rem / 17); --lh-msg: 1.38; --fs-body: calc(15rem / 17); --fs-sub: calc(13rem / 17); --fs-foot: calc(11rem / 17); --fs-lab: calc(11rem / 17); --fs-title: calc(20rem / 17); --fs-bar: calc(20rem / 17); --run: 4px; --runs: 4px; --row: 44px; --grp-r: 0px; --edge: var(--accent); /* (the blue band over every window) */ } /* BANTOWN.fyi: the guild site's look (sentinelcommand/BANTOWN-site, src/assets/site.css: keep these in step with it) */ [data-look="fyi"] { --bg: #050608; --fg: #f4f6f8; --dim: #9aa3ad; --line: #22262d; --card: #0e1013; --card2: #14171c; --accent: #4fc3ff; --btn: #4fc3ff; --btn-fg: #050608; --sys: Barlow, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --font: var(--sys); --title: 'Barlow Condensed', 'Arial Narrow', var(--sys); --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --soft: #c4cad1; --faint: #7c858f; --line2: #2e333b; --hi: #8fd9ff; --mine: #4fc3ff; --ink: #050608; --prs: rgba(79,195,255,.12); --prs-card: #1b2129; --grp-r: 0px; --cut: 5.7px; /* (a beveled corner: an 8 px cut, the site's .bevel-s) */ --fs-mono: calc(12rem / 17); /* (the site's mono labels, chips and the bar's words: 12 px, tracked a little less than the site's) */ } /* The bar, the rail, Home's bottom bar and the top of a chat or a page (effortless, pass 5): their words grow with the phone's text size to 115% at most (`--hr`), as an iPhone's own bars keep theirs, so four places and Search, a chat's name, who's here, Back and "not encrypted" always fit. The same tokens, from the capped root (each look's own ratios). */ :is(header.hd, .tabbar, .hdock) { --fs-msg: var(--hr); --fs-body: var(--hr); --fs-sub: calc(15 * var(--hr) / 17); --fs-foot: calc(13 * var(--hr) / 17); --fs-lab: calc(13 * var(--hr) / 17); --fs-title: calc(var(--hr) + 17px); --fs-bar: var(--hr); --fs-mono: calc(12 * var(--hr) / 17); font-size: var(--fs-body); } /* (Night's party frame at the top of a chat keeps its size at any text size: as crowded as it gets, five Bags and "‹ Search" with 12 new, it has no more room) */ [data-look="night"] :is(.chat, .guild) > header.hd { --hr: 17px; } [data-look="retro"] :is(header.hd, .tabbar, .hdock) { --fs-msg: calc(14 * var(--hr) / 17); --fs-body: calc(15 * var(--hr) / 17); --fs-sub: calc(13 * var(--hr) / 17); --fs-foot: calc(11 * var(--hr) / 17); --fs-lab: calc(11 * var(--hr) / 17); --fs-title: calc(20 * var(--hr) / 17); --fs-bar: calc(20 * var(--hr) / 17); } /* ---------------------------------------------------------------- light mode (#14; Zbo, Nov 5: the canvas, row 30). BANTOWN.fyi, Clean and Glass each have a light version, on (look.js and store.js `paintMode`: Me → Look → Light and dark, Automatic following the phone, the start). Bold and Retro are light already; Night and Channel stay dark, so data-mode is never on with them. Each light version redefines its look's tokens, and the faint white fills and lines of a dark look turn to faint ink (`--w…`); the rules that draw a dark color of their own get a light one in "light mode, the rest", at the end. The top stays the black bar under the clock (Zbo's pick: A, the start; Privacy and this phone → The top bar, light, once the app is added again). Every word reads at 4.5:1 as rendered (`contrastIn`), the Bags' names deepened to read on white (util.js `deep`). */ [data-mode="light"] { color-scheme: light; --w045: rgba(0,0,0,0.027); --w05: rgba(0,0,0,0.03); --w055: rgba(0,0,0,0.033); --w06: rgba(0,0,0,0.036); --w07: rgba(0,0,0,0.042); --w08: rgba(0,0,0,0.048); --w09: rgba(0,0,0,0.054); --w10: rgba(0,0,0,0.06); --w11: rgba(0,0,0,0.066); --w12: rgba(0,0,0,0.072); --w13: rgba(0,0,0,0.078); --w14: rgba(0,0,0,0.084); --w16: rgba(0,0,0,0.096); --w17: rgba(0,0,0,0.102); --w18: rgba(0,0,0,0.108); --w20: rgba(0,0,0,0.12); --w24: rgba(0,0,0,0.144); } /* BANTOWN.fyi by day: the site's black and signal blue turned over: an off-white page, white cards, ink, and the blue deepened for words and lines (5:1 on the page); yours and what's switched on keep the site's own blue, ink on it */ [data-mode="light"][data-look="fyi"] { --bg: #eef1f4; --fg: #050608; --dim: #4f5863; --line: #c9d0d8; --card: #ffffff; --card2: #e3e8ee; --accent: #0a6aa1; --btn: #4fc3ff; --btn-fg: #050608; --soft: #2e353d; --faint: #5f6973; --line2: #b8c1cb; --hi: #0a6aa1; --mine: #4fc3ff; --ink: #050608; --prs: rgba(10,106,161,.1); --prs-card: #d5e3ee; } /* Clean by day: iMessage's own light, your bubbles still in your color */ [data-mode="light"][data-look="clean"] { --bg: #ffffff; --fg: #0a0a0c; --dim: #5e5e66; --line: #e3e3e8; --card: #f2f2f7; --card2: #e9e9ee; --accent: #7d5a00; --btn: #f6df9a; --btn-fg: #1f1a0a; --prs: rgba(0,0,0,.06); --prs-card: #dcdce2; } /* Glass by day: frosted white over the Bags' soft glows */ [data-mode="light"][data-look="glass"] { --frost: linear-gradient(var(--edge), var(--edge)) top / 100% var(--sat) no-repeat, rgba(255,255,255,.74); --bg: #f3f3f7; --fg: #111116; --dim: #5e5e69; --line: rgba(0,0,0,.08); --card: #ffffff; --card2: rgba(0,0,0,.05); --accent: #7d5a00; --btn: #f2d888; --btn-fg: #1f1a0a; --prs: rgba(0,0,0,.07); --prs-card: rgba(0,0,0,.1); } /* the Bags' names (util.js `bagInk`, the class `bcn`): his color; his deeper one in a light version; ink when Me → Look says names in ink (the color then only on his face). A quote's line goes with it. */ [data-mode="light"] .bcn { --name: var(--ncd); } [data-names="ink"] .bcn { --name: var(--fg); } [data-mode="light"] .rq { --ql: var(--qcd); } [data-names="ink"] .rq { --ql: var(--dim); } /* ---------------------------------------------------------------- the root: the phone's own text size (effortless, pass 5; Zbo, Nov 3; T7; docs/UX.md, N3). 1rem, what every size of text is written from (tokens, above), is the phone's body size: 17 px at its default. An iPhone or an iPad gives its Text Size (Settings → Display & Brightness, or Accessibility → Larger Text) through `-apple-system-body`; a Mac's Safari knows it too but at a Mac's small size, so only where touch callouts exist (an iPhone, an iPad). Android gives its font size to Chrome through index.html's `text-scale`: the browser's own 16 px becomes the phone's, and 106.25% of it is the body. A computer's browser set to bigger text scales it the same way. Nothing else sets the root's size. */ html { font-size: 106.25%; } @supports (-webkit-touch-callout: none) { html { font: -apple-system-body; } } /* ---------------------------------------------------------------- base */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; } body { font: var(--fs-body)/1.42 var(--font); } html, body { overscroll-behavior: none; } html { touch-action: manipulation; } /* a stray double tap doesn't zoom the app (pinching still can) */ body { -webkit-tap-highlight-color: transparent; } [hidden] { display: none !important; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea { font: inherit; color: inherit; } .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ic.ok { color: #3ee27f; width: 18px; height: 18px; } .ic.inl { width: 16px; height: 16px; vertical-align: -3px; } /* (the box its screens size from, a join screen's too, and where it starts: look.js `--vvt`, app.css "sheets") */ #app { position: relative; top: var(--vvt, 0px); height: var(--app-h); } /* ---------------------------------------------------------------- the top (Zbo, Nov 1 and 2: titles, Back and buttons at the top "smear and bleed up into the clock area"). Since iOS 26 a Home Screen app that runs under the clock (the status bar "black-translucent") gets iOS's blur over its top, the clock and about 48 pt under it, and nothing on the page turns it off: a solid bar there only fixes its color, not the blur (build c84e4e tried; others found the same on iOS 27). So the app starts below an opaque black bar (index.html: "black"; the safe area is then 0, and every screen's top sits right under the clock), where iOS blurs nothing. iOS reads that once, when the app is added to the Home Screen, so one added before Nov 2 still runs under the clock. There, and wherever Me → This phone says so, the top is lowered (`.lowtop`, look.js, the Home Screen app only): `--sat`, what every screen pads its top by, is the clock's band and 48 pt more, all of it one color, the look's `--edge`, and every title and button below it, so iOS's blur has nothing to smear (the canvas, row 7). Night's and Glass's glows fade in below the band (`--fade`), Glass's frosted bars are solid in it (`--frost`), and Retro's blue window bars sit under its blue band. A sheet reaches no higher than the band. */ .lowtop { --sat: calc(var(--sai) + 48px); --fade: linear-gradient(var(--edge) var(--sat), transparent calc(var(--sat) + 72px)); } /* ---------------------------------------------------------------- the shell: Home and the screens opened from it, one at a time */ .shell { height: var(--app-h); display: flex; flex-direction: column; } .screens { flex: 1; min-height: 0; position: relative; overflow: clip; } .screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); background: var(--bg); } /* moving around like an iPhone app (Zbo, Nov 1; nav.js): a screen slides in from the right over the one it came from, which sits a little to the left, dimmed, and slides back out the same way (a chat's details too, over their chat). Nothing on the screens pans sideways on its own, so a finger moving sideways from the left edge is the swipe back (and a message's is the swipe to reply); up and down still scroll. Me's row of looks still scrolls sideways (it scrolls, so it keeps its own). While a screen slides, taps wait. */ .screen, .screen :is(.hbody, .pgs, .me-body, .fr-body, .ml, .cdbody, .cdet) { touch-action: pan-y; touch-action: pan-y pinch-zoom; } .screens > .navunder { z-index: 1; } .screens > .navdim { z-index: 2; } .screens > .navover { z-index: 3; } .navover { box-shadow: -10px 0 30px rgba(0,0,0,.34); will-change: transform; } .navunder { will-change: transform; } .navdim { position: absolute; inset: 0; background: rgba(0,0,0,.2); pointer-events: none; } .navdim.navin { z-index: 7; } /* (a chat's details: between the chat and them) */ .screens.moving, .screens.moving * { pointer-events: none !important; } [data-look="retro"] .navover { box-shadow: -3px 0 0 rgba(10,30,80,.35), -10px 0 22px rgba(10,30,80,.25); } [data-look="bold"] .navover { box-shadow: -3px 0 0 var(--ink), -12px 0 24px rgba(24,22,27,.18); } [data-look="bold"] .navdim { background: rgba(24,22,27,.12); } /* no tab bar under them: a chat keeps its message box above the phone's bottom edge (the home bar), and right on the keyboard while that's up (look.js "kb") */ :is(.chat, .guild) { padding-bottom: var(--sab); } .kb :is(.chat, .guild) { padding-bottom: 0; } /* page titles (Me), the iPhone way: big at the top of the page, and once that has scrolled up under the bar, small in the bar (util.js pageHead puts "scrolled" on the screen). Retro keeps its title in its blue bar. */ .hd.page { flex: none; position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; min-height: calc(44px + var(--sat)); padding: var(--sat) var(--gut) 0; border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s; } .hd.page .pt { margin: 0; font: 600 var(--fs-bar)/1.3 var(--title); letter-spacing: -.01em; opacity: 0; transition: opacity .18s; } .scrolled > .hd.page { border-bottom-color: var(--line); } .scrolled > .hd.page .pt { opacity: 1; } .ptl { padding: 0 0 12px; font: 700 var(--fs-title)/1.2 var(--title); letter-spacing: -.02em; overflow-wrap: anywhere; } .pgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 0 var(--gut); } /* ---------------------------------------------------------------- chat: layout */ :is(.chat, .guild) .hd { flex: none; padding-top: var(--sat); } /* the line over the chat: one at a time (chat.js drawBanners picks the one that matters most) */ .banners { flex: none; display: flex; flex-direction: column; padding: 0 var(--gut); } .banners:empty { display: none; } .bn { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 16px; font-size: var(--fs-sub); line-height: 1.38; text-align: left; margin: 10px 0 2px; } .bn .ic { width: 20px; height: 20px; flex: none; } .bn.wait { background: var(--card2); color: var(--dim); } .bn.warn { background: #3a1818; color: #ffb3a8; } .bn.inst { background: var(--card); border: 1px solid var(--line); color: var(--fg); width: 100%; } .bn .mc, .code.mc { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .04em; white-space: nowrap; } .bn.ask { width: 100%; background: var(--card); border: 1px solid var(--accent); color: var(--fg); } .bn.ask .grow { flex: 1; } .bn.ask .go { flex: none; padding: 8px 14px; border-radius: 11px; background: var(--btn); color: var(--btn-fg); font-size: calc(15rem / 17); } /* the end of a Bag's first night: a nudge to say hi (Say hi puts him in the message box; × puts it away) */ .bn.hi { width: 100%; gap: 10px; padding-right: 8px; background: var(--card); border: 1px solid var(--accent); color: var(--fg); } .bn.hi > .ic { color: var(--accent); } .bn.hi .ok2.bx, [data-look] .bn.hi .ok2.bx { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 16px; background: none; box-shadow: none; text-shadow: none; color: var(--dim); } .bn.hi .ok2.bx .ic { width: 15px; height: 15px; } /* the Home Screen and alerts offers, and a one-time tip (Zbo, Nov 1): one quiet line, no card (a tap on its words does nothing; Show me / Turn on and × do), its words always whole: two lines where one won't hold them (a big text size) */ .bn.quiet { gap: 8px; min-height: 44px; margin: 2px 0 0; padding: 0 0 0 2px; border: 0; border-radius: 0; background: none; color: var(--dim); font-size: var(--fs-sub); line-height: 1.3; box-shadow: none; } .bn.quiet > .ic { width: 16px; height: 16px; color: var(--accent); } .bn.quiet .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; } .bn.quiet .ok2.on { padding: 6px 4px; border: 0; background: none; color: var(--accent); font-size: calc(14rem / 17); font-weight: 700; } .bn.quiet .ok2.bx { width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 15px; background: none; color: var(--dim); } .bn.quiet .ok2.bx .ic { width: 15px; height: 15px; } .mlw { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; } .ml { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; } .ml .m { touch-action: pan-y; touch-action: pan-y pinch-zoom; } /* sideways is the swipe to reply; zooming the page still works where it can */ .m.swiping { position: relative; z-index: 1; } .swr { position: absolute; left: -38px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: var(--card2); color: var(--fg); opacity: 0; transition: background .12s, color .12s, transform .12s; pointer-events: none; } .swr .ic { width: 16px; height: 16px; } .swr.go { background: var(--accent); color: var(--btn-fg); transform: scale(1.08); } [data-look="night"] .swr { background: rgba(29,21,8,.9); border: 1px solid #a8905a; color: #ffd479; } [data-look="night"] .swr.go { background: linear-gradient(#5a4418, #2a1e0a); border-color: #d8b25a; } [data-look="retro"] .swr { border-radius: 6px; background: linear-gradient(#ffffff, #dfe7f2); border: 1px solid #9fb2cf; color: #1d3d7a; } [data-look="retro"] .swr.go { background: var(--gloss); border-color: #23458c; color: #fff; } .jump { position: absolute; right: var(--gut); bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 9px 11px; border-radius: 22px; background: var(--card2); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: calc(14rem / 17); font-weight: 600; } .jump .ic { width: 20px; height: 20px; } .jump .jt { display: none; } .jump.new { padding-right: 14px; border-color: var(--accent); } .jump.new .jt { display: inline; } .newmark { display: flex; align-items: center; gap: 10px; margin: 18px 2px 6px; color: var(--accent); font-size: var(--fs-lab); font-weight: 700; letter-spacing: .02em; } .newmark::before, .newmark::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .45; } .m button.nm, .m button.sn, .m button.wn { text-align: left; } .mli { margin-top: auto; display: flex; flex-direction: column; padding-bottom: 8px; } .ml .m { position: relative; } /* (a later message sits over the edge of an earlier one's reaction taps, so it keeps its own) */ .tm { align-self: center; margin: 22px 0 6px; font-size: var(--fs-foot); color: var(--dim); } .rd { align-self: flex-end; margin-top: 4px; padding-right: 6px; font-size: var(--fs-foot); color: var(--dim); } .tx { white-space: pre-wrap; overflow-wrap: anywhere; } .tx a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; -webkit-tap-highlight-color: rgba(127,127,127,.25); } /* each name and each message is its own island for right-to-left text: direction marks typed into one can't flip the name, the colon or the next part around it (the words themselves are untouched) */ .m .tx, .m .nm, .m .sn, .m .wn, .m .gc, .m .rqn, .m .rqt, .mprev b, .mprev span { unicode-bidi: isolate; } .lockd { font-style: italic; color: var(--dim); } .photo { position: relative; display: block; width: min(256px, 64vw, calc(340px * var(--ar, 1))); max-height: 340px; border-radius: 18px; overflow: hidden; background: rgba(127,127,127,.2); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .pimg { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: none; -webkit-user-drag: none; pointer-events: none; } [data-fam="clean"] .photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--w14); pointer-events: none; } .pimg.blur { filter: blur(10px); transform: scale(1.1); } .pimg.broken { opacity: .3; } .m.sending { opacity: .55; } .retry { align-self: flex-end; min-height: 32px; margin: 2px 6px 0 0; font-size: var(--fs-sub); color: #ff6b5b; } .retry { position: relative; } .retry::before { content: ''; position: absolute; inset: min(0px, calc((100% - 44px) / 2)) 0; } /* ("Not sent. Tap to retry.": 44 pt) */ .cmp { position: relative; flex: none; display: flex; align-items: flex-end; gap: 10px; } .cmp .fd { flex: 1; min-width: 0; resize: none; max-height: calc(140rem / 17); outline: none; } /* (about five lines, at any text size) */ .cmp .pl, .cmp .sd { flex: none; display: flex; align-items: center; justify-content: center; } .cmp .party { display: none; } .sd .sdt { display: none; } /* ---------------------------------------------------------------- look A: Clean */ [data-fam="clean"] :is(.chat, .guild) .hd { display: flex; justify-content: center; padding: calc(10px + var(--sat)) 6px 12px; border-bottom: 1px solid var(--line); } [data-fam="clean"] .hm { display: flex; flex-direction: column; align-items: center; gap: 5px; } [data-fam="clean"] .gt { font: 600 var(--hr)/calc(22 * var(--hr) / 17) var(--sys); } [data-fam="clean"] .gs { display: flex; align-items: center; gap: 5px; font: 500 calc(13rem / 17)/1rem var(--sys); color: var(--dim); } [data-fam="clean"] .gs .ic { width: 12px; height: 12px; stroke-width: 2.4; } [data-fam="clean"] .ml { padding: 8px var(--gut) 10px 12px; } [data-fam="clean"] .m { display: flex; margin-top: var(--run); } [data-fam="clean"] .m.first { margin-top: var(--runs); } [data-fam="clean"] .m.in { align-items: flex-end; gap: 8px; } [data-fam="clean"] .m .av { flex: none; width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font: 700 13px var(--sys); color: #16161a; } [data-fam="clean"] .m .mb { max-width: 76%; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } [data-fam="clean"] .m .nm { padding: 0 0 1px var(--bub-x); font: 600 calc(13rem / 17)/1rem var(--sys); } [data-fam="clean"] .m .bb { max-width: 100%; min-width: 0; padding: var(--bub-y) var(--bub-x); border-radius: 20px 20px 20px 6px; background: var(--card2); color: #f1f1f4; font: 400 var(--fs-msg)/var(--lh-msg) var(--sys); display: flex; flex-direction: column; gap: 6px; } [data-fam="clean"] .m .bb:has(.photo:only-child) { padding: 0; background: none !important; } [data-fam="clean"] .m.out { justify-content: flex-end; flex-wrap: wrap; } [data-fam="clean"] .m.out .bb { max-width: 78%; border-radius: 20px 20px 6px 20px; color: #1f1a0a; } [data-fam="clean"] .m.out .retry { flex-basis: 100%; text-align: right; } [data-fam="clean"] .cmp { padding: 8px var(--gut) 10px 12px; border-top: 1px solid var(--line); background: var(--bg); } [data-fam="clean"] .cmp .pl { width: 40px; height: 40px; margin-bottom: 2px; border-radius: 20px; background: var(--card2); color: #c9c9d1; } [data-fam="clean"] .cmp .pl .ic { width: 21px; height: 21px; } [data-fam="clean"] .cmp .fd { min-height: var(--box); padding: 10px 16px; border: 1px solid #4a4a55; border-radius: 22px; background: transparent; font-size: var(--fs-msg); line-height: calc(22rem / 17); } [data-fam="clean"] .cmp .fd:focus-visible { border-color: #8d8d99; } [data-fam="clean"] .cmp .sd { width: 40px; height: 40px; margin-bottom: 2px; border-radius: 20px; background: var(--btn); color: var(--btn-fg); } [data-fam="clean"] .cmp .sd .ic { width: 21px; height: 21px; stroke-width: 2.4; } /* ---------------------------------------------------------------- look B: BANTOWN Night (the throne room on every tab) */ [data-look="night"] body, [data-look="night"] .screen { background: var(--fade), radial-gradient(ellipse at 50% 0%, #1a1f33, #0b0d14 70%); } [data-look="night"] :is(.chat, .guild) .hd { display: flex; align-items: center; gap: 12px; padding: calc(12px + var(--sat)) var(--gut) 14px; border-bottom: 1px solid var(--line); } [data-look="night"] .cr .crest { width: 40px; height: 40px; display: block; } [data-look="night"] .gt { font: 700 calc(var(--hr) + 7px)/calc(28 * var(--hr) / 17) 'Cinzel', serif; letter-spacing: .08em; color: #d8b25a; text-shadow: 0 0 14px rgba(242,193,78,.35); } [data-look="night"] .gs { display: flex; align-items: center; gap: 5px; font: 600 var(--fs-lab)/calc(16rem / 17) var(--sys); letter-spacing: .08em; color: #a8905a; } [data-look="night"] .gs .ic { width: 11px; height: 11px; stroke-width: 2.4; } [data-look="night"] .ml { margin: 12px 12px 10px; padding: 10px 16px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,6,12,.86); box-shadow: inset 0 0 30px rgba(0,0,0,.65); } [data-look="night"] .m { --lg: max(8px, calc(44px - 1.45 * var(--fs-msg))); margin-top: var(--lg); font: 600 var(--fs-msg)/1.45 var(--sys); color: #aaaaff; text-shadow: 0 1px 0 #000; } /* (lines 44 apart: "touch areas") */ [data-look="night"] .m .wn { font-weight: 800; } [data-look="night"] .jump { background: linear-gradient(#4a3814, #1d1508); color: #ffd479; border-color: #d8b25a; font-family: 'Cinzel', serif; letter-spacing: .06em; } [data-look="night"] .newmark { color: #ff9d2e; font-family: 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-lab); } [data-look="night"] .m .photo { margin: 6px 0 2px; border: 1px solid var(--line); border-radius: 6px; } [data-look="night"] .tm { color: #8a7650; font-family: 'Cinzel', serif; letter-spacing: .1em; } [data-look="night"] .rd { color: #8a7650; } [data-look="night"] .lockd { color: #8a7650; } [data-look="night"] .bn.ask, [data-look="night"] .bn.hi { background: rgba(18,22,36,.92); border-color: #d8b25a; } [data-look="night"] .bn.hi > .ic { color: #ffd479; } [data-look="night"] .bn.ask .go { border: 1px solid #d8b25a; background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase; } [data-look="night"] .cmp { margin: 0 12px 12px; padding: 4px 6px 4px 8px; align-items: center; gap: 8px; border: 1px solid #a8905a; border-radius: 8px; background: rgba(4,6,12,.92); color: #aaaaff; } [data-look="night"] .cmp .party { display: block; font: 600 calc(15rem / 17) var(--sys); color: #aaaaff; } [data-look="night"] .cmp .fd { min-height: var(--box); padding: 11px 2px; border: 0; background: transparent; font: 600 var(--fs-msg)/calc(22rem / 17) var(--sys); color: #aaaaff; caret-color: #aaaaff; } [data-look="night"] .cmp .pl { width: 36px; height: 36px; color: #a8905a; } [data-look="night"] .cmp .sd { min-height: 36px; padding: 6px 14px; border: 1px solid #d8b25a; border-radius: 6px; background: linear-gradient(#4a3814, #1d1508); color: #ffd479; font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .06em; } [data-look="night"] .cmp .sd .ic { display: none; } [data-look="night"] .cmp .sd .sdt { display: inline; } [data-look="night"] .hd.page .pt { color: #d8b25a; letter-spacing: .08em; font-weight: 700; } [data-look="night"] .ptl { color: #d8b25a; font-size: calc(1rem + 13px); letter-spacing: .05em; text-shadow: 0 0 18px rgba(242,193,78,.3); } /* ---------------------------------------------------------------- look C: 2006 Retro */ [data-look="retro"] :is(.chat, .guild) .hd { padding: var(--sat) 0 0; background: linear-gradient(var(--accent), var(--accent)) top / 100% var(--sat) no-repeat; } [data-look="retro"] .gate { background: linear-gradient(var(--accent), var(--accent)) top / 100% var(--sat) no-repeat; } [data-look="retro"] .tbar { height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; border-bottom: 1px solid #16357a; background: linear-gradient(#4472d5, #3566cc 50%, #2a58bd 51%, #3a6ad2); color: #fff; font: 700 calc(12 * var(--hr) / 17) var(--font); text-shadow: 0 1px 0 #13306e; } [data-look="retro"] .wb { display: flex; gap: 4px; pointer-events: none; } [data-look="retro"] .wb i { width: 17px; height: 15px; border-radius: 3px; border: 1px solid #23458c; background: linear-gradient(#ffffff, #c4d2ea); } [data-look="retro"] .wb i.x { background: linear-gradient(#ff9d8a, #d9381e); border-color: #8c1f0e; } [data-look="retro"] .bud { margin: 6px 6px 0; border: 1px solid #7f9dc9; background: #fff; } [data-look="retro"] .bh { height: 20px; display: flex; align-items: center; padding: 0 6px; border-bottom: 1px solid #9fb6d8; background: linear-gradient(#ffffff, #d9e3f2); font: 700 var(--fs-lab) var(--font); color: #1d3d7a; } [data-look="retro"] .ml { margin: 6px; padding: 6px 8px; background: #fff; border: 2px solid; border-color: #8a9bb8 #e8eef8 #e8eef8 #8a9bb8; } [data-look="retro"] .m { --lg: 14px; margin-top: var(--lg); font: 400 calc(14rem / 17)/1.38 var(--font); } /* (lines 33 apart, still dense: "touch areas") */ [data-look="retro"] .m .sn { font-weight: 700; } [data-look="retro"] .m.out .sn { color: #d00000; } [data-look="retro"] .m.in .sn { color: #0018c8; } [data-look="retro"] .jump { border-radius: 8px; border: 1px solid #23458c; background: var(--gloss); color: #fff; text-shadow: 0 1px 0 #1d3d7a; font-family: var(--font); } [data-look="retro"] .newmark { color: #d00000; font-family: var(--font); } [data-look="retro"] .m .photo { margin: 4px 0; border-radius: 0; border: 1px solid #6f8fc2; } [data-look="retro"] .banners { padding: 0 6px; } [data-look="retro"] .banners .bn { min-height: 44px; margin-top: 6px; padding: 6px 10px; gap: 8px; border-radius: 0; line-height: 1.35; } [data-look="retro"] .banners .bn .ic { width: 18px; height: 18px; } [data-look="retro"] .bn.wait, [data-look="retro"] .bn.inst { background: #fff7c2; border: 1px solid #e3c34b; color: #3a2a00; } [data-look="retro"] .bn.warn { background: #ffe3de; border: 1px solid #d9381e; color: #7a1200; } [data-look="retro"] .bn.ask, [data-look="retro"] .bn.hi { background: #fff; border: 1px solid #6f8fc2; color: #000; } [data-look="retro"] .bn.hi > .ic { color: #2a58bd; } [data-look="retro"] .bn.ask .go { border: 1px solid #23458c; border-radius: 6px; background: var(--gloss); color: #fff; font: 700 calc(11rem / 17) var(--font); text-shadow: 0 1px 0 #1d3d7a; } [data-look="retro"] .cmp { margin: 0 6px 6px; align-items: stretch; gap: 6px; } [data-look="retro"] .cmp .fd { min-height: 44px; padding: 6px; background: #fff; border: 2px solid; border-color: #8a9bb8 #e8eef8 #e8eef8 #8a9bb8; border-radius: 0; font: 400 calc(16rem / 17)/calc(20rem / 17) var(--font); color: #000; } [data-look="retro"] .cmp .pl { width: 40px; border: 1px solid #9fb2cf; border-radius: 7px; background: linear-gradient(#ffffff, #dfe7f2); color: #23458c; } [data-look="retro"] .cmp .sd { width: 64px; border: 1px solid #23458c; border-radius: 7px; background: var(--gloss); color: #fff; font: 700 calc(12rem / 17) var(--font); text-shadow: 0 1px 0 #1d3d7a; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } [data-look="retro"] .cmp .sd .ic { display: none; } [data-look="retro"] .cmp .sd .sdt { display: inline; } [data-look="retro"] .hd.page { justify-content: flex-start; min-height: calc(46px + var(--sat)); padding-left: 12px; background: linear-gradient(var(--accent), var(--accent)) top / 100% var(--sat) no-repeat, linear-gradient(#36599f, #1b3570) bottom / 100% calc(100% - var(--sat)) no-repeat; border-bottom: 1px solid #13285a; color: #fff; } [data-look="retro"] .hd.page .pt { opacity: 1; font: 700 var(--fs-bar) var(--font); letter-spacing: -.6px; } [data-look="retro"] .ptl { display: none; } [data-look="retro"] .pgs { padding-top: 8px; } /* ---------------------------------------------------------------- gates (setup, join, sign in, unlock) */ /* (centered by its own margins, not the screen's: taller than the room, with the keyboard up, it starts at the top and scrolls, where centering it pushed its top out of reach) */ .gate { overflow-y: auto; align-items: center; justify-content: flex-start; } .gate-in { margin: auto 0; width: min(440px, 100%); padding: calc(32px + var(--sat)) 24px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; } .brand { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .brand .crest { width: 48px; height: 48px; } .brand b { display: block; font: 700 calc(22rem / 17)/1.15 var(--title); } .brand small { color: var(--dim); font-size: calc(13rem / 17); } .gate h1 { margin: 6px 0 2px; font: 700 calc(1rem + 13px)/1.15 var(--title); letter-spacing: -.01em; } .gate p { margin: 0; color: var(--dim); } .stack { display: flex; flex-direction: column; gap: 16px; } .stack label { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sub); color: var(--dim); } .inp { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); color: var(--fg); font-size: 1rem; outline: none; } /* where you're typing shows (every look its own way) */ [data-fam="clean"] .inp:focus-visible, [data-look="night"] .inp:focus-visible { border-color: var(--accent); } [data-look="retro"] .inp:focus-visible, [data-look="retro"] .cmp .fd:focus-visible { outline: 1px dotted #23458c; outline-offset: -4px; } [data-look="night"] .cmp .fd:focus-visible { outline: none; } .inp:focus { border-color: var(--accent); } .btn { min-height: 50px; padding: 0 20px; border-radius: 14px; background: var(--btn); color: var(--btn-fg); font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; } .btn:disabled { opacity: .45; } .btn.ghost { background: var(--card2); color: var(--fg); } .btn.small { min-height: 44px; padding: 0 16px; font-size: calc(15rem / 17); border-radius: 12px; } .btn.danger { color: #ff6b5b; } .btns { display: flex; gap: 10px; flex-wrap: wrap; } .or { text-align: center; color: var(--dim); font-size: var(--fs-sub); } .code { text-wrap: balance; padding: 18px; border: 1px dashed var(--accent); border-radius: 14px; font: 700 calc(20rem / 17)/1.4 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; text-align: center; overflow-wrap: anywhere; user-select: all; background: var(--card); } .code > span { display: inline-block; } .code.mc { white-space: normal; } .check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 1rem; } .check input { width: 24px; height: 24px; } .hint { margin: 0; color: var(--dim); font-size: var(--fs-sub); line-height: 1.42; } .warn { margin: 0; color: #ff8f80; font-size: var(--fs-sub); } .warn.said { margin-top: -4px; text-align: center; overflow-wrap: anywhere; } [data-look="night"] .gate h1, [data-look="night"] .brand b { color: #d8b25a; letter-spacing: .04em; } [data-look="night"] .btn { background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; border: 1px solid #d8b25a; } [data-look="night"] .btn.ghost { background: var(--card2); color: var(--fg); border: 1px solid var(--line); } [data-look="retro"] .btn { min-height: 44px; padding: 0 16px; border: 1px solid #23458c; border-radius: 8px; background: var(--gloss); font-size: calc(14rem / 17); text-shadow: 0 1px 0 #1d3d7a; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } [data-look="retro"] .btn.small { padding: 0 12px; font-size: calc(12.5rem / 17); } [data-look="retro"] .gate-in { gap: 12px; padding-top: calc(20px + var(--sat)); } [data-look="retro"] .gate h1 { font-size: calc(22rem / 17); letter-spacing: -.02em; } [data-look="retro"] .inp { min-height: 44px; padding: 8px 10px; } [data-look="retro"] .btn.ghost { color: #1d3d7a; text-shadow: none; background: linear-gradient(#ffffff, #dfe7f2); border-color: #9fb2cf; } [data-look="retro"] .inp { border-radius: 0; border: 2px solid; border-color: #8a9bb8 #e8eef8 #e8eef8 #8a9bb8; background: #fff; } [data-look="retro"] .code { border-radius: 0; background: #fff; } a.btn { text-decoration: none; text-align: center; } /* words for VoiceOver only */ .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------------------------------------------------------------- a Bag's first night (first.js; Zbo, Nov 1): each screen has the small step list (Join · Save your code · Home Screen · Zbo lets you in · Alerts) over its title, the step he's on lit and the ones done ticked, and asks for one thing with one big button; why is a quiet line that opens */ .gate.first .brand { margin-bottom: 0; } .fsteps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; } .fs { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; } /* the line from one step to the next, between their circles */ .fs + .fs::before { content: ''; position: absolute; top: 12px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; border-radius: 1px; background: var(--line); } .fs:is(.done, .skip) + .fs::before { background: var(--accent); opacity: .7; } .fsn { flex: none; width: 26px; height: 26px; border-radius: 13px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); color: var(--dim); font: 700 var(--fs-lab)/1 var(--sys); } .fsn > i { display: flex; font-style: normal; } .fsn .ic { width: 15px; height: 15px; stroke-width: 2.8; } .fsl { max-width: 100%; color: var(--dim); font-size: var(--fs-lab); font-weight: 600; line-height: 1.25; overflow-wrap: break-word; text-wrap: balance; } .fs.done .fsn { border-color: var(--accent); color: var(--accent); } .fs.skip .fsn { border-style: dashed; } .fs.now .fsn { border-color: var(--btn); background: var(--btn); color: var(--btn-fg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--btn) 22%, transparent); } .fs.now .fsl { color: var(--fg); font-weight: 700; } /* why, a tap away (the big button's quiet line) */ details.why { margin-top: -4px; } details.why summary { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--dim); font-size: var(--fs-sub); cursor: pointer; list-style: none; } details.why summary::-webkit-details-marker { display: none; } details.why summary::after { content: ''; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform .2s; } details.why[open] summary::after { margin-top: 3px; transform: rotate(-135deg); } details.why p { margin: 2px 0 8px; padding: 0 4px; font-size: var(--fs-sub); line-height: 1.45; text-align: center; } .gate.first details.zbo summary { justify-content: center; } /* a quiet way out (Keep going in Safari, Show me again) */ .fquiets { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; } .fquiet { min-height: 44px; padding: 0 6px; color: var(--dim); font-size: var(--fs-sub); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; } a.fquiet { display: inline-flex; align-items: center; justify-content: center; text-align: center; } /* the recovery code's Copy, under it */ .fcopy { align-self: center; gap: 6px; margin-top: -6px; } .fcopy .ic { width: 17px; height: 17px; } /* the Home Screen step: where to tap, then the app's icon to look for */ .fhow { gap: 12px; font-size: var(--fs-body); line-height: 1.4; } .fhow li::marker { color: var(--accent); font-weight: 700; } .fhow b { color: var(--fg); } .fhow .nw { white-space: nowrap; } .fhint { margin-top: -6px; padding-left: 22px; font-size: var(--fs-sub); } .fapp { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0 2px; } .fico { width: 76px; height: 76px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #0b0d14; box-shadow: 0 8px 26px rgba(0,0,0,.4), inset 0 0 0 1px var(--w08); } .fico .crest { width: 50px; height: 50px; } .fnm { color: var(--fg); font-size: calc(13rem / 17); font-weight: 600; } /* the wait for Zbo: the code to read him, the button that texts it, and a line that says it moves on by itself */ .fcode { padding: 20px 12px; font-size: calc(1rem + 10px); letter-spacing: .07em; } .fwt { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--dim); font-size: var(--fs-sub); text-align: left; } .fdot { flex: none; width: 9px; height: 9px; border-radius: 5px; background: var(--accent); } @media (prefers-reduced-motion: no-preference) { .fdot { animation: fpulse 1.6s ease-in-out infinite; } } @keyframes fpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } /* Night: the steps as the game's gold diamonds, its words in small capitals */ [data-look="night"] .fsn { width: 21px; height: 21px; margin: 2px 0; border-radius: 3px; transform: rotate(45deg); border: 1px solid #5a4a2a; background: rgba(4,6,12,.85); color: #8a7650; font: 700 var(--fs-lab)/1 'Cinzel', Georgia, serif; } [data-look="night"] .fsn > i { transform: rotate(-45deg); } [data-look="night"] .fsn .ic { width: 13px; height: 13px; } [data-look="night"] .fs + .fs::before { height: 1px; background: #3a3424; } [data-look="night"] .fs:is(.done, .skip) + .fs::before { background: #a8905a; } [data-look="night"] .fs.done .fsn { border-color: #a8905a; background: linear-gradient(#2a1e0a, #120d04); color: #ffd479; } [data-look="night"] .fs.now .fsn { border-color: #ffd479; background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; box-shadow: 0 0 12px rgba(242,193,78,.55); } [data-look="night"] .fsl { color: #8a7650; font: 600 var(--fs-lab)/1.3 var(--sys); letter-spacing: .03em; text-transform: uppercase; } [data-look="night"] .fs.done .fsl { color: #a8905a; } [data-look="night"] .fs.now .fsl { color: #ffd479; } [data-look="night"] .fcode { color: #ffd479; border-color: #a8905a; background: rgba(4,6,12,.86); text-shadow: 0 0 12px rgba(242,193,78,.3); } [data-look="night"] .fhow li::marker { color: #d8b25a; } [data-look="night"] .fdot { background: #ffd479; box-shadow: 0 0 10px rgba(242,193,78,.7); } /* Retro: a 2006 setup wizard's list of steps, in its own little window */ [data-look="retro"] .fsteps { flex-direction: column; padding-bottom: 3px; border: 1px solid #7f9dc9; background: #fff; } [data-look="retro"] .fsteps::before { content: 'Getting in'; content: 'Getting in' / ''; display: block; padding: 3px 8px; border-bottom: 1px solid #9fb6d8; background: linear-gradient(#ffffff, #d9e3f2); color: #1d3d7a; font: 700 calc(11rem / 17) var(--font); } [data-look="retro"] .fs { flex-direction: row; gap: 8px; padding: 3px 8px; text-align: left; } [data-look="retro"] .fs + .fs::before { display: none; } [data-look="retro"] .fsn { width: 16px; height: 16px; border-radius: 0; border: 1px solid #9fb2cf; background: linear-gradient(#ffffff, #e3eaf5); color: #444; font: 700 var(--fs-lab)/1 var(--font); } [data-look="retro"] .fsn .ic { width: 12px; height: 12px; } [data-look="retro"] .fs.done .fsn { border-color: #1f5e1f; background: linear-gradient(#2b842a, #1f6e1f); color: #fff; } [data-look="retro"] .fs.now { background: #316ac5; } [data-look="retro"] .fs.now .fsn { border-color: #fff; background: #fff; color: #316ac5; box-shadow: none; } [data-look="retro"] .fsl { color: #444; font: 400 calc(12rem / 17)/1.3 var(--font); } [data-look="retro"] .fs.done .fsl { color: #000; } [data-look="retro"] .fs.now .fsl { color: #fff; font-weight: 700; } [data-look="retro"] .fcode { font-size: calc(22rem / 17); color: #d00000; } [data-look="retro"] .fhow { font: 400 calc(13rem / 17)/1.4 var(--font); } [data-look="retro"] .fhow b, [data-look="retro"] .fnm { color: #000; } [data-look="retro"] details.why summary, [data-look="retro"] .fquiet { color: #0018c8; font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] details.why summary { text-decoration: underline; } [data-look="retro"] details.why p { color: #000; font-size: calc(12rem / 17); } [data-look="retro"] .fwt { color: #333; font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] .fdot { border-radius: 0; background: #2f8f2f; } [data-look="retro"] .fico { border-radius: 14px; background: linear-gradient(#36599f, #1b3570); } /* Glass: the list in a frosted capsule, the step he's on glowing */ [data-look="glass"] .fsteps { padding: 12px 4px 10px; border-radius: 20px; background: var(--w06); box-shadow: inset 0 0 0 1px var(--w09); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); } [data-look="glass"] .fsn { border-color: var(--w18); background: var(--w05); } [data-look="glass"] .fs.done .fsn { border-color: rgba(239,207,122,.65); background: rgba(239,207,122,.12); } [data-look="glass"] .fs.now .fsn { border-color: transparent; box-shadow: 0 0 18px rgba(242,216,136,.6), inset 0 1px 0 rgba(255,255,255,.5); } [data-look="glass"] .fs + .fs::before { background: var(--w12); } [data-look="glass"] .fcode { border-style: solid; border-color: rgba(239,207,122,.4); background: var(--w06); } /* Channel: Slack's way, a bar for each step and its name under it */ [data-look="channel"] .fsteps { gap: 5px; } [data-look="channel"] .fs { align-items: stretch; gap: 7px; text-align: left; } [data-look="channel"] .fs + .fs::before { display: none; } [data-look="channel"] .fsn { width: auto; height: 5px; border: 0; border-radius: 3px; background: #26262d; } [data-look="channel"] .fsn > i { display: none; } [data-look="channel"] .fs:is(.done, .skip) .fsn { background: var(--accent); opacity: .5; } [data-look="channel"] .fs.now .fsn { background: var(--accent); box-shadow: none; } [data-look="channel"] .fsl { font-size: var(--fs-lab); } [data-look="channel"] .fcode { border-style: solid; border-color: #26262d; border-radius: 10px; background: #16161a; } /* Bold: ink circles with their shadow; the step he's on in yellow, the ones done in orange */ [data-look="bold"] .fsn { width: 28px; height: 28px; border-radius: 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-weight: 900; box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .fs + .fs::before { top: 13px; height: 3px; background: var(--ink); opacity: .18; } [data-look="bold"] .fs:is(.done, .skip) + .fs::before { background: var(--ink); opacity: 1; } [data-look="bold"] .fs.done .fsn { background: var(--accent); color: var(--ink); } [data-look="bold"] .fs.now .fsn { background: var(--btn); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .fsl { color: var(--dim); font-weight: 800; } [data-look="bold"] .fs.now .fsl { color: var(--ink); } [data-look="bold"] .fcode { border: 2px solid var(--ink); background: var(--card); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .fico { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .fhow li::marker { color: var(--ink); } [data-look="bold"] .fdot { background: var(--accent); } /* ---------------------------------------------------------------- Me: a grouped list, the iPhone Settings way (a small header, the rows on one card, a short note under it), with room between the groups */ .me-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gut) calc(36px + var(--sab)); display: flex; flex-direction: column; gap: 28px; } .me-sec { display: flex; flex-direction: column; gap: 8px; } .me-sec > .sh { padding: 0 16px; font: 600 calc(13rem / 17)/calc(18rem / 17) var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); } .grp { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-radius: var(--grp-r); background: var(--card); overflow: hidden; } .gr { position: relative; width: 100%; display: flex; align-items: center; gap: 14px; min-height: var(--row); padding: 11px 16px; text-align: left; } /* rows apart by a hairline that starts where the words do */ .grp > * + .gr::before, .grp > * + .grw::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); pointer-events: none; } .grp > * + .gr:has(> .gi)::before, .grp > * + .gr:has(> .grh > .gi)::before { left: 60px; } .gr.stack { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 13px; padding-bottom: 15px; } .grh { display: flex; align-items: center; gap: 14px; } .gr.stack:has(> .grh > .gi) > :not(.grh) { margin-left: 44px; } /* (under its label, not under its icon) */ .grw { position: relative; margin: 0; padding: 0 16px 13px 60px; } .gr + .grw::before { display: none; } .gi { flex: none; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; } .gi .ic { width: 18px; height: 18px; stroke-width: 2; } .gi-red { background: #e5483f; } .gi-green { background: #2db45c; } .gi-blue { background: #2f78ec; } .gi-purple { background: #8466e8; } .gi-orange { background: #ec8a2b; } .gi-gray { background: #74747f; } .gl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gl .gn { font-size: var(--fs-body); line-height: 1.3; } .gl small { color: var(--dim); font-size: var(--fs-sub); line-height: 1.38; } .gv { flex: none; color: var(--dim); } .ic.gc { flex: none; width: 17px; height: 17px; color: var(--dim); opacity: .55; stroke-width: 2.6; } .gr.act { cursor: pointer; } .gr.act.plain .gn { color: var(--accent); } .gr.act.danger .gn { color: #ff6b5b; } .gr.act.center { justify-content: center; } .gr.act.center .gl { flex: none; align-items: center; } .gr.act.prs { background: var(--prs); } .gft { margin: 0; padding: 0 16px; color: var(--dim); font-size: var(--fs-sub); line-height: 1.45; } /* a footnote's More (Me → Look and This phone, Zbo's canvas rows 8 and 11: one line, More for the rest): a word in the line, its tap 44 pt */ .gft button.more { position: relative; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; } .gft button.more::before { content: ''; position: absolute; left: -10px; right: -10px; top: -6px; height: 44px; } /* (44 pt, reaching down into the room under its note, never up over the rows it's about) */ .gft.morenote:focus { outline: none; } [data-look="night"] .gft button.more { color: #ffd479; } [data-look="retro"] .gft button.more { color: #0018c8; text-decoration: underline; font-weight: 400; } [data-look="retro"] .gft button.more::before { left: -12px; right: -12px; top: -4px; } [data-look="bold"] .gft button.more { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 800; } .gr .code.mc { padding: 0; border: 0; background: none; text-align: left; font-size: calc(22rem / 17); } /* you */ .yourow { gap: 16px; padding-top: 16px; padding-bottom: 16px; } .av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 15px; color: #16161a; font-weight: 700; flex: none; } .av.big { width: 64px; height: 64px; border-radius: 32px; font-size: 27px; } .yn { font: 700 calc(22rem / 17)/1.2 var(--title); overflow-wrap: anywhere; } .ys { color: var(--dim); font-size: var(--fs-sub); line-height: 1.38; } .nickrow { gap: 10px; padding-top: 4px; padding-bottom: 4px; } .nickrow .gk { flex: none; color: var(--dim); font-size: var(--fs-sub); } .nickrow .inp { flex: 1; min-width: 0; min-height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: none; text-align: right; } .nickrow .inp:focus, .nickrow .inp:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); } .grp > .warn.grw { padding-left: 16px; } /* the look: a row of small pictures of each look's chat, the one picked ringed and ticked (its words under the group) */ .lookrow { padding: 14px 0 12px; } .looks { position: relative; width: 100%; display: flex; gap: 10px; padding: 4px 16px 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .looks::-webkit-scrollbar { display: none; } .look { position: relative; flex: none; width: 82px; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0; border: 0; background: none; text-align: center; } .look .lt b { display: block; font-size: calc(13rem / 17); font-weight: 600; line-height: 1.25; color: var(--dim); } .look.on .lt b { color: var(--fg); } .look .ic.ok { position: absolute; top: -4px; right: -1px; z-index: 1; width: 22px; height: 22px; padding: 4px; border-radius: 11px; background: var(--accent); color: var(--btn-fg); stroke-width: 3.4; box-shadow: 0 0 0 2px var(--card); } .lp { position: relative; display: block; width: 76px; height: 108px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(127,127,127,.35); } .look.on .lp { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); } .lp i { position: absolute; display: block; } .lp .p1 { left: 0; right: 0; top: 0; height: 18px; } .lp .p2 { left: 7px; top: 27px; width: 40px; height: 13px; border-radius: 7px; } .lp .p3 { right: 7px; top: 46px; width: 36px; height: 13px; border-radius: 7px; } .lp .p4 { left: 7px; top: 65px; width: 30px; height: 13px; border-radius: 7px; } .lp .p5 { left: 7px; right: 7px; bottom: 8px; height: 13px; border-radius: 7px; } .lp-clean { background: #0a0a0c; } .lp-clean .p1 { border-bottom: 1px solid #26262d; background: radial-gradient(circle at 50% 9px, #f6df9a 0 4px, transparent 4.5px); } .lp-clean .p2, .lp-clean .p4 { background: #2a2a31; } .lp-clean .p3 { background: #f6df9a; } .lp-clean .p5 { border: 1px solid #4a4a55; } .lp-night { background: radial-gradient(ellipse at 50% 0%, #1d2440, #0b0d14 72%); } .lp-night .p1 { border-bottom: 1px solid #3a3424; background: radial-gradient(circle at 12px 9px, #d8b25a 0 3.5px, transparent 4px), linear-gradient(#d8b25a, #d8b25a) 21px 7px / 30px 4px no-repeat; } .lp-night .p2, .lp-night .p3, .lp-night .p4 { left: 7px; right: auto; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #8b8bd0 0 11px, transparent 11px 13px, #c69b6d 13px 25px, transparent 25px 27px, #aaaaff 27px); } .lp-night .p2 { top: 30px; width: 58px; } .lp-night .p3 { top: 44px; width: 48px; } .lp-night .p4 { top: 58px; width: 62px; } .lp-night .p5 { border: 1px solid #a8905a; border-radius: 3px; background: rgba(4,6,12,.9); } .lp-retro { background: #d6dfee; } .lp-retro::before { content: ''; position: absolute; left: 4px; right: 4px; top: 19px; bottom: 27px; background: #fff; border: 1px solid #8a9bb8; } .lp-retro::after { content: ''; position: absolute; right: 4px; bottom: 6px; width: 17px; height: 15px; border-radius: 3px; background: linear-gradient(#6f97e6, #3d6dd4 50%, #2a58bd 51%, #3463c8); } .lp-retro .p1 { height: 13px; background: linear-gradient(#6f9cf0, #3a69cf 50%, #2a58bd 51%, #3d6fd6); } .lp-retro .p2, .lp-retro .p3, .lp-retro .p4 { left: 9px; right: auto; height: 4px; border-radius: 0; background: linear-gradient(90deg, #0018c8 0 12px, transparent 12px 14px, #555 14px); } .lp-retro .p3 { background: linear-gradient(90deg, #d00000 0 10px, transparent 10px 12px, #555 12px); } .lp-retro .p2 { top: 27px; width: 52px; } .lp-retro .p3 { top: 39px; width: 44px; } .lp-retro .p4 { top: 51px; width: 56px; } .lp-retro .p5 { left: 4px; right: 25px; bottom: 6px; height: 15px; border-radius: 0; background: #fff; border: 1px solid #8a9bb8; } .lp-glass { background: radial-gradient(48px 48px at 10% 22%, rgba(246,223,154,.34), transparent 70%), radial-gradient(56px 56px at 100% 64%, rgba(191,231,224,.24), transparent 70%), #0b0b10; } .lp-glass .p1 { background: var(--w07); border-bottom: 1px solid var(--w10); } .lp-glass .p2, .lp-glass .p4 { background: var(--w13); box-shadow: inset 0 0 0 1px var(--w10); } .lp-glass .p3 { background: linear-gradient(180deg, #f9e6aa, #efcf7a); box-shadow: 0 2px 8px rgba(239,207,122,.35); } .lp-glass .p5 { left: 5px; right: 5px; bottom: 6px; height: 16px; border-radius: 8px; background: var(--w10); box-shadow: inset 0 0 0 1px var(--w14); } .lp-channel { background: #0e0e11; } .lp-channel .p1 { height: 16px; border-bottom: 1px solid #1e1e24; background: linear-gradient(#f2f2f5, #f2f2f5) 7px 6px / 24px 5px no-repeat; } .lp-channel .p2, .lp-channel .p3, .lp-channel .p4 { left: 7px; right: auto; width: 62px; height: 12px; border-radius: 0; background: linear-gradient(#bfe7e0, #bfe7e0) 0 0 / 11px 11px no-repeat, linear-gradient(#e9e9ee, #e9e9ee) 15px 1px / 18px 3px no-repeat, linear-gradient(#5d5d68, #5d5d68) 15px 7px / 44px 3px no-repeat; } .lp-channel .p3 { background: linear-gradient(#f6df9a, #f6df9a) 0 0 / 11px 11px no-repeat, linear-gradient(#e9e9ee, #e9e9ee) 15px 1px / 14px 3px no-repeat, linear-gradient(#5d5d68, #5d5d68) 15px 7px / 36px 3px no-repeat; } .lp-channel .p2 { top: 25px; } .lp-channel .p3 { top: 45px; } .lp-channel .p4 { top: 65px; } .lp-channel .p5 { border-radius: 4px; border: 1px solid #2a2a31; background: #16161a; } .lp-bold { background: #f4efe5; } .lp-bold .p1 { height: 19px; border-bottom: 2px solid #18161b; background: linear-gradient(#18161b, #18161b) 7px 6px / 26px 7px no-repeat; } .lp-bold .p2, .lp-bold .p3, .lp-bold .p4 { height: 15px; border: 2px solid #18161b; box-shadow: 2px 2px 0 #18161b; } .lp-bold .p2 { background: #7ff0dc; } .lp-bold .p3 { background: #ffd35a; } .lp-bold .p4 { background: #ffb8d0; } .lp-bold .p5 { height: 14px; border: 2px solid #18161b; background: #fffdf8; } .lp-fyi { background: #050608; } .lp-fyi .p1 { border-bottom: 1px solid #22262d; background: linear-gradient(#f4f6f8, #f4f6f8) 7px 6px / 30px 6px no-repeat; } .lp-fyi .p2, .lp-fyi .p3, .lp-fyi .p4, .lp-fyi .p5 { border-radius: 0; } .lp-fyi .p2, .lp-fyi .p4 { background: #14171c; } .lp-fyi .p3 { background: #4fc3ff; } .lp-fyi .p4 { width: 44px; height: 16px; background: #0e1013; border-top: 2px solid #4fc3ff; } .lp-fyi .p5 { border: 1px solid #2e333b; } /* the Bags (Friends, a chat's details) */ .bags li.gr { padding: 0 16px 0 0; gap: 10px; } .bags .bagrow { flex: 1; min-width: 0; min-height: 60px; display: flex; align-items: center; gap: 14px; padding: 10px 6px 10px 16px; text-align: left; } .bags li.gr > .btn { flex: none; } .grp > * + li.gr::before { left: 66px; } .bags .av { width: 36px; height: 36px; border-radius: 18px; font-size: 15px; } .bags b { font-weight: 600; font-size: var(--fs-body); } .bags small { color: var(--dim); font-size: var(--fs-sub); } .bags .grow > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row { display: flex; align-items: center; gap: 10px; } .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; } .hs { font: 700 calc(23rem / 17)/1.32 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; text-align: left; padding: 2px 0; } .hs span { display: block; } .dim { color: var(--dim); } /* invite links (Friends' invite sheet, a link back in) and Zbo's key link (Friends) */ .inv-form { display: flex; flex-direction: column; gap: 10px; } .inv-row { display: flex; gap: 10px; } .inv-row .inp { flex: 1; min-width: 0; } /* Zbo's number, optional (item 13): its box, what's wrong with it, and why, under it */ .invn { display: flex; flex-direction: column; gap: 6px; } .invn .hint, .invn .warn { margin: 0; } .inv-out { display: flex; flex-direction: column; gap: 10px; } .inv-out:empty { display: none; } .inp.link { font-size: calc(15rem / 17); } .ver { margin: 4px 0 0; text-align: center; color: var(--dim); font-size: var(--fs-sub); } /* Night: the throne room's cards, gold for the icons */ [data-look="night"] .grp { background: rgba(18,22,36,.86); box-shadow: inset 0 0 0 1px #2c2a2c; } [data-look="night"] .me-sec > .sh { font: 700 var(--fs-lab)/calc(18rem / 17) 'Cinzel', Georgia, serif; letter-spacing: .08em; color: #a8905a; } [data-look="night"] .gi { background: rgba(40,30,10,.7); box-shadow: inset 0 0 0 1px #5a4a24; color: #ffd479; } [data-look="night"] .gr.act.plain .gn { color: #ffd479; } [data-look="night"] .gr.act.danger .gn { color: #ff9a85; } [data-look="night"] .yn { color: #d8b25a; letter-spacing: .02em; } [data-look="night"] .look .ic.ok { background: #d8b25a; color: #1d1508; } /* Retro: each group a little window with an orange title, dense rows, small icons, no colored squares */ [data-look="retro"] .me-body { gap: 10px; padding-top: 8px; } [data-look="retro"] .me-sec { gap: 0; border: 1px solid #6f8fc2; background: #fff; } [data-look="retro"] .me-sec > .sh { padding: 4px 7px; background: linear-gradient(#ffd48f, #f6a63e); color: #4a2400; text-shadow: 0 1px 0 rgba(255,255,255,.45); font: 700 calc(12rem / 17) var(--font); letter-spacing: 0; text-transform: none; } [data-look="retro"] .me-sec.you, [data-look="retro"] .me-sec.outsec { border: 0; background: none; } [data-look="retro"] .me-sec.you .grp, [data-look="retro"] .me-sec.outsec .grp { border: 1px solid #6f8fc2; } [data-look="retro"] .me-sec.you .gft { padding: 4px 2px 0; border: 0; background: none; } [data-look="retro"] .nickrow .inp { min-height: var(--box); margin: 4px 0; padding: 4px 6px; border: 2px solid; border-color: #8a9bb8 #e8eef8 #e8eef8 #8a9bb8; background: #fff; text-align: left; font-size: calc(16rem / 17); } [data-look="retro"] .nickrow .inp:focus, [data-look="retro"] .nickrow .inp:focus-visible { box-shadow: none; } [data-look="retro"] .grp { background: #fff; } [data-look="retro"] .gr { gap: 8px; padding: 6px 8px; font-size: calc(13rem / 17); } [data-look="retro"] .gr.stack { gap: 6px; padding: 8px; } [data-look="retro"] .grh { gap: 8px; } [data-look="retro"] .grp > * + .gr::before, [data-look="retro"] .grp > * + .grw::before { left: 0; background: #d5deec; } [data-look="retro"] .gi { width: 18px; height: 18px; border-radius: 0; background: none; color: #2a58bd; } [data-look="retro"] .gi .ic { width: 16px; height: 16px; } [data-look="retro"] .gl .gn { font-size: calc(13rem / 17); font-weight: 700; } [data-look="retro"] .gl small, [data-look="retro"] .gft, [data-look="retro"] .ys { font-size: calc(11rem / 17); color: #444; } [data-look="retro"] .gft { padding: 4px 8px 6px; background: #f3f6fb; border-top: 1px solid #d5deec; } [data-look="retro"] .gr.act.plain .gn { color: #0018c8; text-decoration: underline; font-weight: 400; } [data-look="retro"] .gr.act.danger .gn { color: #b3200a; } [data-look="retro"] .gr.act.prs { background: #316ac5; } [data-look="retro"] .grw { padding: 0 8px 6px; font-size: calc(11rem / 17); } [data-look="retro"] .yourow { gap: 10px; padding: 8px; } [data-look="retro"] .av.big, [data-look="retro"] .facebtn { border-radius: 4px; } [data-look="retro"] .av.big { width: 52px; height: 52px; font-size: 22px; } [data-look="retro"] .yn { font-size: calc(16rem / 17); } [data-look="retro"] .gr .code.mc { font-size: 1rem; } [data-look="retro"] .hs { font-size: 1rem; } [data-look="retro"] .lookrow { padding: 8px 0; } [data-look="retro"] .looks { gap: 6px; padding: 2px 8px; } [data-look="retro"] .look { width: 70px; gap: 5px; } [data-look="retro"] .lp { width: 64px; height: 92px; border-radius: 3px; } [data-look="retro"] .look.on .lp { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #2a58bd; } [data-look="retro"] .look .lt b { font: 400 calc(11rem / 17) var(--font); color: #000; } [data-look="retro"] .look.on .lt b { font-weight: 700; } [data-look="retro"] .look .ic.ok { border-radius: 3px; background: #2a58bd; color: #fff; box-shadow: none; } [data-look="retro"] .bags .bagrow { min-height: 44px; gap: 8px; padding: 4px 6px 4px 8px; } [data-look="retro"] .bags li.gr { padding-right: 8px; } [data-look="retro"] .bags .av { width: 28px; height: 28px; border-radius: 3px; font-size: 12px; } [data-look="retro"] .bags b { font-size: calc(13rem / 17); color: #0018c8; } [data-look="retro"] .bags small { font-size: calc(11rem / 17); } [data-look="retro"] .nickrow .gk { font-size: calc(12rem / 17); } /* ---------------------------------------------------------------- replies and reactions (every look) */ .chat .m .bb, .chat .m.line { cursor: default; } .rq { max-width: 100%; text-align: left; } .rx { display: inline-flex; flex-wrap: wrap; gap: 4px; } .rc { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 9px 2px 8px; border-radius: 13px; font-size: calc(14rem / 17); line-height: calc(20rem / 17); } .rc .rn { font-size: var(--fs-lab); font-weight: 700; } .rr, .rc .re, .rwho .re { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-style: normal; } .rbar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px var(--gut) 6px 16px; font-size: var(--fs-sub); } .rbar > .ic { width: 17px; height: 17px; } .rbar .rbt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rbar .rbq { margin-left: 6px; color: var(--dim); unicode-bidi: isolate; } .rbar .rbn { unicode-bidi: isolate; } .rbar .rbx { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 15px; } .rbar .rbx .ic { width: 14px; height: 14px; } .msheet .mprev { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--card2); } .msheet .mprev span { color: var(--dim); overflow-wrap: anywhere; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .msheet .mprev .mwhen { margin-top: 4px; color: var(--dim); font-size: calc(13rem / 17); opacity: .85; } button.rd { text-align: right; } .rrow { display: flex; gap: 8px; } .rr { flex: 1; height: 54px; border-radius: 16px; background: var(--card2); font-size: 26px; display: flex; align-items: center; justify-content: center; } .rr.on { outline: 2px solid var(--accent); outline-offset: -2px; } .rwho { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sub); color: var(--dim); } .rwho .re { margin-right: 6px; } .mact { display: flex; gap: 10px; } .mact .btn { flex: 1; gap: 8px; } .mact .btn .ic { width: 18px; height: 18px; } .m.flash { animation: flash 1.7s ease-out; } @keyframes flash { 0%, 35% { background: rgba(216,178,90,.28); } 100% { background: transparent; } } .vmore { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 22px; background: rgba(38,38,42,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--w14); color: #fff; font-weight: 600; font-size: calc(14rem / 17); white-space: nowrap; } .vmore .ic { width: 18px; height: 18px; } .sheet .askimg { display: block; max-width: 100%; max-height: 38vh; margin: 2px auto 14px; border-radius: 12px; object-fit: contain; } [data-look="night"] .sheet .askimg { border: 1px solid #a8905a; border-radius: 6px; } [data-look="retro"] .sheet .askimg { border: 1px solid #6f8fc2; border-radius: 0; } /* the photos about to be sent: one big, several in a grid, each with a × to take it out */ .askgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 0 12px; } .askgrid.one { grid-template-columns: minmax(0, 1fr); } .askph { position: relative; aspect-ratio: 1; } .askgrid.one .askph { aspect-ratio: auto; } .askgrid .askimg { width: 100%; height: 100%; max-height: none; margin: 0; object-fit: cover; } .askgrid.one .askimg { height: auto; max-height: 38vh; object-fit: contain; } .askx { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 5px; background: none; border: 0; color: #fff; } .askx .ic { width: 22px; height: 22px; padding: 4px; border-radius: 11px; background: rgba(0,0,0,.62); box-shadow: 0 0 0 1px rgba(255,255,255,.3); } .askwith { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 12px; font-size: var(--fs-sub); color: var(--dim); overflow-wrap: anywhere; } .asknote { margin: 0 0 10px; font-size: var(--fs-sub); color: var(--dim); } [data-look="night"] .askx .ic { background: rgba(29,21,8,.88); box-shadow: 0 0 0 1px #d8b25a; color: #ffd479; } [data-look="retro"] .askx .ic { border-radius: 4px; background: var(--gloss); box-shadow: 0 0 0 1px #23458c; } .vbar { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 10px; padding: 0 12px; } .vbar .vmore { position: static; transform: none; min-height: 44px; } .vbar { flex-wrap: wrap; } .vbar .vmore.vdel { color: #ff6b5e; } [data-look="night"] .vbar .vmore.vdel { color: #ff8a6b; border-color: #b4543a; } [data-look="retro"] .vbar .vmore.vdel { background: linear-gradient(#f08a7e, #d9483a 50%, #c9372a 51%, #d94a3c); border-color: #8c2a20; text-shadow: 0 1px 0 #7a1d12; color: #fff; } [data-fam="clean"] .m .bb .rq { display: flex; flex-direction: column; gap: 2px; margin: 0 0 2px; padding: 6px 10px; border-left: 3px solid #888; border-radius: 8px; background: rgba(0,0,0,.2); font-size: var(--fs-sub); line-height: 1.32; } [data-fam="clean"] .m .rq .rqn { font-weight: 700; font-size: calc(13rem / 17); } [data-fam="clean"] .m .rq .rqt { color: #c9c9d1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-fam="clean"] .m.out .bb .rq { background: rgba(0,0,0,.08); border-left-color: rgba(0,0,0,.35) !important; } [data-fam="clean"] .m.out .rq .rqn { color: rgba(0,0,0,.72) !important; } [data-fam="clean"] .m.out .rq .rqt { color: rgba(0,0,0,.62); } [data-fam="clean"] .m.out .mb { max-width: 80%; align-items: flex-end; } [data-fam="clean"] .m.out .mb .bb { max-width: 100%; } [data-fam="clean"] .rc { background: var(--card2); border: 1px solid var(--line); color: var(--fg); } [data-fam="clean"] .rc.mine { border-color: var(--accent); background: #2a2516; } [data-fam="clean"] .rbar { border-top: 1px solid var(--line); background: var(--bg); } [data-fam="clean"] .rbar:not([hidden]) + .cmp { border-top: 0; padding-top: 2px; } [data-fam="clean"] .rbar > .ic { color: var(--accent); } [data-fam="clean"] .rbar .rbx { background: var(--card2); } [data-look="night"] .m .rq { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-sub)/1.4 var(--sys); color: #7d7a93; } [data-look="night"] .m .rq .rqn { color: #a7a2c8; margin-right: 5px; } [data-look="night"] .rx { margin-left: 6px; vertical-align: 1px; } [data-look="night"] .rc { padding: 0 6px; border: 1px solid #5a4a24; border-radius: 4px; background: rgba(40,30,10,.75); color: #ffd479; font: 700 var(--fs-lab)/calc(18rem / 17) var(--sys); text-shadow: none; } [data-look="night"] .rc.mine { border-color: #d8b25a; box-shadow: 0 0 6px rgba(242,193,78,.4); } [data-look="night"] .rbar { margin: 0 10px 6px; border: 1px solid #5a4a24; border-radius: 6px; background: rgba(4,6,12,.92); color: #aaaaff; font-weight: 600; } [data-look="night"] .rbar .rbn { color: #ffd479; } [data-look="night"] .rbar > .ic { color: #a8905a; } [data-look="night"] .rbar .rbq { color: #7d7a93; } [data-look="night"] .rbar .rbx { border: 1px solid #5a4a24; color: #a8905a; } [data-look="night"] .m.flash { animation-name: flashNight; } @keyframes flashNight { 0%, 35% { background: rgba(242,193,78,.18); } 100% { background: transparent; } } [data-look="night"] .msheet .mprev b { color: #d8b25a; } [data-look="night"] .rr { background: rgba(4,6,12,.7); border: 1px solid #3a3424; } [data-look="night"] .rr.on { outline-color: #d8b25a; } [data-look="retro"] .m .rq { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: italic 400 calc(12rem / 17)/1.4 var(--font); color: #666; } [data-look="retro"] .m .rq .rqn { font-weight: 700; color: #555; } [data-look="retro"] .rx { margin-left: 6px; } [data-look="retro"] .rc { padding: 0 6px; border: 1px solid #9fb2cf; border-radius: 9px; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; font: 700 calc(11rem / 17)/1rem var(--font); } [data-look="retro"] .rc.mine { border-color: #23458c; background: var(--gloss); color: #fff; text-shadow: 0 1px 0 #1d3d7a; } [data-look="retro"] .rbar { margin: 0 6px 4px; border: 1px solid #e3c34b; background: #fff7c2; color: #3a2a00; font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] .rbar > .ic { color: #8a6d00; } [data-look="retro"] .rbar .rbq { color: #6b5a20; } [data-look="retro"] .rbar .rbx { border: 1px solid #9fb2cf; border-radius: 4px; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; } [data-look="retro"] .m.flash { animation-name: flashRetro; } @keyframes flashRetro { 0%, 35% { background: #fff3a8; } 100% { background: transparent; } } [data-look="retro"] .msheet .mprev { border-radius: 0; border: 1px solid #9fb6d8; background: #eef3fb; } [data-look="retro"] .rr { border-radius: 8px; border: 1px solid #9fb2cf; background: linear-gradient(#ffffff, #dfe7f2); } [data-look="retro"] .rr.on { outline-color: #2a58bd; } /* ---------------------------------------------------------------- a long press on a message: its menu (chat.js openHold; Zbo, Oct 31, the canvas's Menu). The chat blurs; the message lifts out where it was (a copy of it, a little bigger); the six reactions over it; under it when it was sent, who pinned it, who reacted and what it said before an edit; then Reply · Copy · Edit · Pin · Delete. A tap on a message stays quiet; a double tap pops a ❤️. Every look its own way: Clean, Glass and Bold iMessage's, Channel Slack's, Night the game's action bar and right-click menu, Retro a 2006 emoticon toolbar, tooltip and right-click menu. */ /* on a phone, holding a message never selects its words or brings up the phone's own menu (Copy is in ours) */ @media (hover: none) { .chat .ml .m { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } } /* while a finger is held on it: it sinks a little (a bubble), or lights up (a row, a line) */ [data-fam="clean"]:not([data-look="channel"]) .m.pressing .bb { transform: scale(.965); transition: transform .35s ease-out; } [data-look="channel"] .m.pressing { background: var(--w045); } [data-look="night"] .m.line.pressing { border-radius: 4px; background: rgba(216,178,90,.12); } [data-look="retro"] .m.line.pressing { background: #dfe8f7; } /* a double tap: a ❤️ pops where it landed */ .hpop { position: absolute; z-index: 2; width: 0; height: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font: 44px/1 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; animation: hpop .85s ease-out forwards; } @keyframes hpop { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.2); } 45% { transform: scale(.94); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-26px); } } /* the menu over everything (a sheet: one at a time, the app behind it out of reach); the safe areas are its padding */ body > .sheet.hold { display: block; padding: var(--sat) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow: hidden; touch-action: none; background: rgba(6,6,9,.42); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); } .hold .hcol { position: absolute; inset: 0; } .hold .hrx, .hold .hlift, .hold .hunder { position: absolute; } .hold .sh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* (read out, not shown) */ /* the six reactions: a pill over the message (the one I gave lit) */ .hold .hrx { display: flex; gap: 2px; padding: 4px 6px; border-radius: 28px; background: #26262c; border: 1px solid var(--w10); box-shadow: 0 10px 30px rgba(0,0,0,.45); } .hold .hrx .rr { flex: none; width: 44px; height: 44px; border: 0; border-radius: 22px; background: none; font-size: 25px; outline: none; } .hold .hrx .rr.on { background: var(--w17); } .hold .hrx .rr.prs, .hold .hrx .rr:focus-visible { background: var(--w11); } /* the message, lifted where it was: its bubble alone (Clean, Glass, Bold), the row as a card (Channel), the line in its frame (Night, Retro) */ .hold .hlift { pointer-events: none; } .hold.measuring .hlift * { transform: none !important; animation: none !important; transition: none !important; } .hold .hlift > .m { margin: 0 !important; opacity: 1; animation: none; } .hold .hlift :is(.rx, .retry, .hpop) { display: none; } [data-fam="clean"]:not([data-look="channel"]) .hold .hlift :is(.av, .nm, .pinm) { visibility: hidden !important; } .hold .hlift .m .bb { transform: scale(1.03); transform-origin: left center; box-shadow: 0 12px 34px rgba(0,0,0,.5); } .hold .hlift .m.out .bb { transform-origin: right center; } [data-look="channel"] .hold .hlift .m .bb { transform: none; box-shadow: none; } .hold .hlift.clip { overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); } /* under it: when it was sent and the rest, then what can be done (at the message's side) */ .hold .hunder { width: min(264px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; } .hold .hmeta { display: flex; flex-direction: column; gap: 4px; max-height: 26vh; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 0 6px; color: #d4d4dc; font-size: var(--fs-sub); line-height: 1.35; text-shadow: 0 1px 2px rgba(0,0,0,.5); } .hold.right .hmeta { text-align: right; } .hold .hmeta small { font-size: inherit; } .hold .hmeta .mpin { display: flex; align-items: center; gap: 5px; } .hold.right .hmeta .mpin { justify-content: flex-end; } .hold .hmeta .mpin .ic { flex: none; width: 13px; height: 13px; stroke-width: 2.2; color: var(--accent); } .hold .rwho { gap: 2px; font-size: inherit; color: inherit; } .hold .rwho > div { overflow-wrap: anywhere; } .hold .mhist { display: flex; flex-direction: column; gap: 2px; } .hold .mhist small { opacity: .8; } .hold .mhist span { opacity: .95; overflow-wrap: anywhere; white-space: pre-wrap; unicode-bidi: isolate; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hold .hmenu { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #26262c; border: 1px solid var(--w10); box-shadow: 0 16px 40px rgba(0,0,0,.5); } .hold .hmt { display: none; } .hold .hmi { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-top: 1px solid var(--w08); color: var(--fg); font-size: 1rem; line-height: 1.25; text-align: left; } .hold .hmi:first-of-type { border-top: 0; } .hold .hmi .ic { width: 20px; height: 20px; } .hold .hmi.prs, .hold .hmi:focus-visible { background: var(--prs); outline: none; } .hold .hmw { display: flex; flex-direction: column; min-width: 0; } .hold .hms { display: none; font-size: var(--fs-foot); line-height: calc(15rem / 17); } .hold .hmi.delete { color: #ff6b5b; } /* Delete asks for a second tap: the row stays where it is (the same height), red, and says so */ .hold .hmi.delete.armed { background: #d63b2c; color: #fff; } .hold .hmi.delete.armed .hml { font-size: calc(16rem / 17); line-height: calc(19rem / 17); font-weight: 600; } .hold .hmi.delete.armed .hms { display: block; } .hold .hmi.hcx { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* (Night shows it) */ /* a screen too short for it all (an iPhone on its side): one column that scrolls */ .hold.stack .hcol { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: calc(12px + var(--sat)) calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); } .hold.stack.right .hcol { align-items: flex-end; } .hold.stack :is(.hrx, .hlift, .hunder) { position: static; flex: none; } .hold.stack .hlift { width: 100%; max-height: 40vh; overflow: hidden; } @media (prefers-reduced-motion: no-preference) { body > .sheet.hold { animation: hfade .18s ease-out; } .hold .hrx { animation: hpopin .22s cubic-bezier(.2,.9,.3,1.15) both; transform-origin: 30px 100%; } .hold .hunder { animation: hpopin .22s cubic-bezier(.2,.9,.3,1.15) .03s both; transform-origin: 30px 0; } .hold.right .hrx { transform-origin: calc(100% - 30px) 100%; } .hold.right .hunder { transform-origin: calc(100% - 30px) 0; } [data-fam="clean"]:not([data-look="channel"]) .hold .hlift .bb { animation: hlift .22s ease-out both; } } @keyframes hfade { from { opacity: 0; } } @keyframes hpopin { from { opacity: 0; transform: scale(.82); } } @keyframes hlift { from { transform: none; box-shadow: none; } } /* Glass: frosted, like the rest of it */ /* (Clean and Glass: when it was sent and the rest on a soft backing of their own, so they read whatever is behind them, a bright bubble or a photo dimmed under the menu, as Bold's and Retro's cards do: 4.5:1 or better on any of it) */ :is([data-look="clean"], [data-look="glass"]) .hold .hmeta { padding: 4px 8px; border-radius: 10px; background: rgba(10,10,14,.62); } [data-look="glass"] body > .sheet.hold { background: rgba(5,5,8,.36); -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); } [data-look="glass"] .hold .hrx { background: rgba(40,40,48,.9); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); } [data-look="glass"] .hold .hlift .m.out .bb { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 34px rgba(0,0,0,.5); } [data-look="glass"] .hold .hmenu { background: rgba(40,40,48,.88); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); } /* (the red that's read in Glass is a lighter one: over its frost, whatever bubble shows through, still 4.5:1 or better) */ [data-look="glass"] :is(.hold .hmi.delete:not(.armed), .btn.ghost.danger, .gr.act.danger .gn, .ptake) { color: #ff9688; } /* Channel: the row lifted as a card; Slack's quick reactions and its list (the icons first) */ [data-look="channel"] body > .sheet.hold { background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } [data-look="channel"] .hold .hlift { padding: 8px 0 10px; border-radius: 12px; background: #16161a; border: 1px solid #2a2a31; box-shadow: 0 14px 36px rgba(0,0,0,.5); } [data-look="channel"] .hold .hlift > .m { padding-left: 7px; padding-right: 7px; } [data-look="channel"] .hold .hrx { gap: 4px; padding: 5px; border-radius: 14px; background: #1a1a1f; border-color: #2a2a31; } [data-look="channel"] .hold .hrx .rr { border-radius: 10px; background: #222228; } [data-look="channel"] .hold .hrx .rr.on { background: #3a3220; box-shadow: inset 0 0 0 1px #6b5a2a; } [data-look="channel"] .hold .hunder { width: min(300px, calc(100vw - 32px)); } [data-look="channel"] .hold .hmenu { border-radius: 12px; background: #1a1a1f; border-color: #2a2a31; } [data-look="channel"] .hold .hmi { flex-direction: row-reverse; justify-content: flex-end; gap: 14px; border-top: 0; font-size: calc(16rem / 17); } [data-look="channel"] .hold .hmi .ic { color: #b5b5bf; } [data-look="channel"] .hold .hmi.delete .ic, [data-look="channel"] .hold .hmi.armed .ic { color: inherit; } /* Bold: ink and stickers (the bubble lifts at a tilt) */ [data-look="bold"] body > .sheet.hold { background: rgba(24,22,27,.3); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); } [data-look="bold"] .hold .hrx { background: var(--card); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .hold .hrx .rr.on { background: #ffd35a; box-shadow: inset 0 0 0 2px var(--ink); transform: rotate(-6deg); } [data-look="bold"] .hold .hrx .rr.prs { background: var(--prs); } [data-look="bold"] .hold .hlift .m .bb { transform: scale(1.03) rotate(-1.5deg); box-shadow: 5px 5px 0 var(--ink); } [data-look="bold"] .hold .hlift .m.out .bb { transform: scale(1.03) rotate(1.5deg); } [data-look="bold"] .hold .hmeta { padding: 6px 10px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font-weight: 600; text-shadow: none; } [data-look="bold"] .hold .hmeta .mpin .ic { color: #a63c0c; } [data-look="bold"] .hold .hmenu { border: 2px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 4px 4px 0 var(--ink); } [data-look="bold"] .hold .hmi { border-top: 1.5px solid rgba(24,22,27,.18); color: var(--ink); font-weight: 700; } [data-look="bold"] .hold .hmi.prs, [data-look="bold"] .hold .hmi:focus-visible { background: var(--prs); } [data-look="bold"] .hold .hmi.delete { color: #c22d12; } [data-look="bold"] .hold .hmi.delete.armed { background: #e8573c; color: var(--ink); } /* BANTOWN Night: the reactions an action bar (the one you gave glows), the line in its party-chat frame, and the game's right-click menu (the name in gold over it, Cancel at the bottom, no pictures) */ [data-look="night"] body > .sheet.hold { background: rgba(2,3,8,.55); -webkit-backdrop-filter: blur(8px) saturate(.9); backdrop-filter: blur(8px) saturate(.9); } [data-look="night"] .hold .hrx { gap: 3px; padding: 4px; border-radius: 6px; background: linear-gradient(#1b2033, #0b0d14); border: 1px solid #a8905a; box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.6); } [data-look="night"] .hold .hrx .rr { border-radius: 4px; border: 1px solid #3a3424; background: radial-gradient(circle at 50% 35%, #1d2338, #07090f 75%); box-shadow: inset 0 0 8px rgba(0,0,0,.8); } [data-look="night"] .hold .hrx .rr.on { border-color: #ffd479; box-shadow: inset 0 0 8px rgba(0,0,0,.8), 0 0 9px rgba(242,193,78,.7); } [data-look="night"] .hold .hrx .rr.prs { border-color: #d8b25a; } [data-look="night"] .hold .hlift { padding: 8px 14px 10px; border: 1px solid #a8905a; border-radius: 10px; background: rgba(4,6,12,.95); box-shadow: inset 0 0 24px rgba(0,0,0,.65), 0 14px 36px rgba(0,0,0,.6); } [data-look="night"] .hold .hlift:has(.wsp) { border-color: #b35cb3; } [data-look="night"] .hold .hmeta { color: #c9b98a; text-shadow: 0 1px 0 #000; } [data-look="night"] .hold .hunder { width: min(244px, calc(100vw - 32px)); } [data-look="night"] .hold .hmenu { padding: 4px 0 6px; border-radius: 6px; background: rgba(6,8,14,.96); border: 1px solid #a8905a; box-shadow: 0 0 0 1px #000, inset 0 0 18px rgba(0,0,0,.7), 0 12px 30px rgba(0,0,0,.6); } [data-look="night"] .hold .hmt { display: block; padding: 7px 14px 5px; font: 700 calc(14rem / 17)/1.2 'Cinzel', serif; letter-spacing: .06em; color: #ffd479; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } [data-look="night"] .hold .hmi { min-height: 44px; padding: 0 14px; border-top: 0; color: #f2efe4; font: 600 calc(15rem / 17)/1.25 var(--sys); text-shadow: 0 1px 0 #000; } [data-look="night"] .hold .hmi .ic { display: none; } [data-look="night"] .hold .hmi.prs, [data-look="night"] .hold .hmi:focus-visible { background: linear-gradient(90deg, rgba(120,150,255,.38), rgba(120,150,255,.06)); } [data-look="night"] .hold .hmi.delete { color: #ff8a6b; } [data-look="night"] .hold .hmi.delete.armed { background: linear-gradient(90deg, rgba(200,40,30,.75), rgba(200,40,30,.2)); color: #fff; } [data-look="night"] .hold .hmi.delete.armed .hml { font-size: calc(15rem / 17); } [data-look="night"] .hold .hmi.hcx { position: static; width: 100%; height: auto; min-height: 44px; padding: 0 14px; overflow: visible; clip-path: none; white-space: normal; } /* 2006 Retro: an emoticon toolbar, the line in the IM window's sunken white box, a yellow tooltip and a right-click menu */ [data-look="retro"] body > .sheet.hold { background: rgba(10,22,52,.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } [data-look="retro"] .hold .hrx { gap: 1px; padding: 2px; border-radius: 0; border: 1px solid #7f9dc9; background: linear-gradient(#ffffff, #dfe7f2); box-shadow: 2px 2px 3px rgba(0,0,0,.35); } [data-look="retro"] .hold .hrx .rr { border: 1px solid transparent; border-radius: 3px; background: none; font-size: 22px; } [data-look="retro"] .hold .hrx .rr.on { border-color: #316ac5; background: #c1d2ee; } [data-look="retro"] .hold .hrx .rr.prs { border-color: #316ac5; background: #98b5e2; } [data-look="retro"] .hold .hlift { padding: 4px 8px; background: #fff; border: 2px solid; border-color: #8a9bb8 #e8eef8 #e8eef8 #8a9bb8; box-shadow: 2px 2px 3px rgba(0,0,0,.35); } [data-look="retro"] .hold .hunder { width: min(236px, calc(100vw - 16px)); gap: 4px; } [data-look="retro"] .hold .hmeta { padding: 3px 6px; border: 1px solid #000; background: #ffffe1; color: #000; font: 400 calc(11rem / 17)/1.35 var(--font); text-shadow: none; } [data-look="retro"] .hold .hmeta .mpin .ic { color: #8a6d00; } [data-look="retro"] .hold .hmenu { padding: 2px; border-radius: 0; border: 1px solid #808080; background: linear-gradient(90deg, #eef3fb 0 28px, #fff 28px); box-shadow: 2px 2px 3px rgba(0,0,0,.4); } [data-look="retro"] .hold .hmi { flex-direction: row-reverse; justify-content: flex-end; gap: 10px; min-height: 44px; padding: 0 10px 0 6px; border-top: 0; color: #000; font: 400 calc(12rem / 17)/1.3 var(--font); } [data-look="retro"] .hold .hmi .ic { width: 16px; height: 16px; color: #23458c; } [data-look="retro"] .hold .hmi.prs, [data-look="retro"] .hold .hmi:focus-visible { background: #316ac5; color: #fff; } [data-look="retro"] .hold .hmi.prs .ic, [data-look="retro"] .hold .hmi:focus-visible .ic { color: #fff; } [data-look="retro"] .hold .hmi.delete { margin-top: 3px; border-top: 1px solid #c5c5c5; color: #b3200a; } [data-look="retro"] .hold .hmi.delete .ic { color: #b3200a; } [data-look="retro"] .hold .hmi.delete.armed { background: #c9372a; color: #fff; } [data-look="retro"] .hold .hmi.delete.armed .ic { color: #fff; } [data-look="retro"] .hold .hmi.delete.armed .hml { font: 700 calc(12rem / 17)/calc(14rem / 17) var(--font); } [data-look="retro"] .hold .hms { font: 400 var(--fs-lab)/calc(13rem / 17) var(--font); } /* ---------------------------------------------------------------- the + in the message box: what you can add to the chat (chat.js ADD; Zbo, Oct 31, the canvas's Plus). A menu over the box, the chat dimmed behind it, the + turned to ×. Only what's built shows (Photo now; Voice, Poll, Roll and Raid event as each lands). Every look its own way. */ .pdim { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.5); } .chat.plusing > .cmp, [data-look] .chat.plusing > .cmp { z-index: 6; } .cmp .pl .ic { transition: transform .2s ease; } .cmp .pl.on .ic { transform: rotate(45deg); } :is(.plusm, .atm) { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #1f1f25; border: 1px solid var(--w10); box-shadow: 0 16px 40px rgba(0,0,0,.5); } .pmi { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 14px; border-top: 1px solid var(--w07); color: var(--fg); text-align: left; } .pmi:first-child { border-top: 0; } .pmi.prs, .pmi:focus-visible { background: var(--prs); outline: none; } .pmic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #16161a; } .pmic .ic { width: 22px; height: 22px; } .pmt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pmt b { font-size: 1rem; font-weight: 600; line-height: 1.25; } .pmt small { font-size: var(--fs-sub); line-height: 1.3; color: var(--dim); } @media (prefers-reduced-motion: no-preference) { :is(.plusm, .atm):not([hidden]) { animation: hpopin .2s cubic-bezier(.2,.9,.3,1.15); transform-origin: 30px 100%; } .pdim:not([hidden]) { animation: hfade .16s ease-out; } } @media (prefers-reduced-motion: reduce) { .cmp .pl .ic { transition: none; } } [data-fam="clean"] .cmp .pl.on { background: var(--btn); color: var(--btn-fg); } [data-look="clean"] :is(.plusm, .atm), [data-look="fyi"] :is(.plusm, .atm), [data-look="bold"] :is(.plusm, .atm) { left: 12px; right: var(--gut); } [data-look="glass"] .cmp .pl.on { background: linear-gradient(180deg, #f9e6aa, #efcf7a); color: #1f1a0a; } [data-look="glass"] :is(.plusm, .atm) { border-radius: 22px; background: rgba(28,28,35,.92); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); } [data-look="glass"] .pdim { background: rgba(5,5,8,.55); } /* Channel: Slack's list of things to add */ [data-look="channel"] .cmp .pl.on { background: #f6df9a; color: #1f1a0a; } [data-look="channel"] :is(.plusm, .atm) { left: 8px; right: var(--gut); border-radius: 12px; background: #1a1a1f; border-color: #2a2a31; } [data-look="channel"] .pmic { border-radius: 9px; } /* Bold: an ink card, the tiles stickers */ [data-look="bold"] .cmp .pl.on { background: #ffd35a; box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] :is(.plusm, .atm) { border: 2px solid var(--ink); border-radius: 20px; background: var(--card); box-shadow: 4px 4px 0 var(--ink); } [data-look="bold"] .pmi { border-top: 1.5px solid rgba(24,22,27,.18); color: var(--ink); } [data-look="bold"] .pmi.prs { background: var(--prs); } [data-look="bold"] .pmic { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); } [data-look="bold"] .pmt b { font-weight: 800; } [data-look="bold"] .pdim { background: rgba(24,22,27,.28); } /* BANTOWN Night: the game's menu over the party box, each thing in an action-bar slot */ [data-look="night"] .cmp .pl.on { border: 1px solid #d8b25a; border-radius: 6px; background: linear-gradient(#4a3814, #1d1508); color: #ffd479; } [data-look="night"] :is(.plusm, .atm) { right: auto; width: min(290px, 100%); border-radius: 6px; background: rgba(6,8,14,.96); border: 1px solid #a8905a; box-shadow: 0 0 0 1px #000, inset 0 0 18px rgba(0,0,0,.7), 0 12px 30px rgba(0,0,0,.6); } [data-look="night"] .pmi { border-top: 0; color: #f2efe4; text-shadow: 0 1px 0 #000; } [data-look="night"] .pmi.prs, [data-look="night"] .pmi:focus-visible { background: linear-gradient(90deg, rgba(120,150,255,.38), rgba(120,150,255,.06)); } [data-look="night"] .pmic { border-radius: 4px; border: 1px solid #a8905a; background: radial-gradient(circle at 50% 35%, #1d2338, #07090f 75%) !important; color: #ffd479; box-shadow: inset 0 0 8px rgba(0,0,0,.8); } [data-look="night"] .pmt b { font: 700 calc(15rem / 17)/1.25 'Cinzel', serif; letter-spacing: .05em; color: #ffd479; } [data-look="night"] .pmt small { color: #a8a2b8; } [data-look="night"] .pdim { background: rgba(2,3,8,.6); } /* 2006 Retro: a right-click menu over the box (a pressed button, the pictures in its gutter) */ [data-look="retro"] .cmp .pl.on { border-color: #23458c; background: linear-gradient(#dfe7f2, #ffffff); box-shadow: inset 1px 1px 2px rgba(0,0,0,.3); } [data-look="retro"] :is(.plusm, .atm) { right: auto; width: min(260px, 100%); bottom: calc(100% + 4px); padding: 2px; border-radius: 0; border: 1px solid #808080; background: linear-gradient(90deg, #eef3fb 0 30px, #fff 30px); box-shadow: 2px 2px 3px rgba(0,0,0,.4); } [data-look="retro"] .pmi { gap: 12px; min-height: 44px; padding: 4px 10px 4px 6px; border-top: 0; color: #000; } [data-look="retro"] .pmi.prs, [data-look="retro"] .pmi:focus-visible { background: #316ac5; color: #fff; } [data-look="retro"] .pmic { width: 18px; height: 18px; border-radius: 0; background: none !important; color: #23458c; } [data-look="retro"] .pmic .ic { width: 16px; height: 16px; } [data-look="retro"] .pmi.prs .pmic, [data-look="retro"] .pmi:focus-visible .pmic { color: #fff; } [data-look="retro"] .pmt b { font: 700 calc(12rem / 17)/1.3 var(--font); } [data-look="retro"] .pmt small { font: 400 calc(11rem / 17)/1.3 var(--font); color: #555; } [data-look="retro"] .pmi.prs small, [data-look="retro"] .pmi:focus-visible small { color: #dfe8f7; } [data-look="retro"] .pdim { background: rgba(10,22,52,.3); } /* ---------------------------------------------------------------- unsent messages (every look) */ .unsent { font-style: italic; color: var(--dim); } .btn.unsend, .btn.delete { gap: 8px; } .btn.unsend .ic, .btn.delete .ic { width: 18px; height: 18px; } /* a message its sender deleted: the line where it was (no taps, nothing of it left) */ .m.deleted { cursor: default; } .m.deleted .unsent { white-space: nowrap; } [data-fam="clean"] .m .bb.gone { background: transparent !important; border: 1px dashed #3a3a42; color: var(--dim); font-size: var(--fs-sub); } [data-fam="clean"] .m.out .bb.gone { color: var(--dim); } [data-look="night"] .m .unsent { color: #7d7a93; font-weight: 600; } [data-look="retro"] .m .unsent { color: #777; } /* ---------------------------------------------------------------- edited messages (every look) */ .m .edited { font-size: .78em; opacity: .72; white-space: nowrap; } .rq .rqe { font-size: .85em; opacity: .7; white-space: nowrap; } .rq .rqt.gone { font-style: italic; } /* (its words say it; never dimmed below 4.5:1) */ [data-look="bold"] .rq .rqt.gone { font-style: normal; font-weight: 600; color: #55524e; opacity: 1; } [data-fam="clean"] .m .bb .edited { align-self: flex-end; margin-top: -4px; } [data-look="night"] .m .edited, [data-look="retro"] .m .edited { margin-left: 6px; font-style: italic; } .msheet .mhist { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: 12px; background: var(--card2); } .msheet .mhist small { color: var(--dim); font-size: var(--fs-foot); } .msheet .mhist span { color: var(--fg); opacity: .85; overflow-wrap: anywhere; white-space: pre-wrap; unicode-bidi: isolate; } [data-look="night"] .msheet .mhist { border: 1px solid var(--line); } [data-look="retro"] .msheet .mhist { border-radius: 0; border: 1px solid #9fb6d8; background: #fff; } /* ---------------------------------------------------------------- search (this phone's own copy; every look) */ .chat .hd { position: relative; } [data-fam="clean"] .chat .hd { padding-left: max(52px, calc(var(--bkw, 40px) + 12px)); padding-right: max(52px, calc(var(--bkw, 40px) + 12px)); } [data-look="night"] .chat .hd { padding-right: var(--gut); } /* Night's header: nothing runs under the button at its right (Whisper; the guild chat's connection), and if the title would get less than its least room (each title's own rule), Back gives way: its name goes, the arrow and the count stay (util.js fitBack) */ [data-look="night"] :is(.chat, .guild) .hd:has(> .hset) { padding-right: 58px; } [data-look="night"] :is(.chat, .guild) .hd > .hback { flex: 0 1 auto; } .sheet.findv { bottom: auto; height: var(--app-h, 100%); } /* (a tall sheet, like New message: what's found scrolls inside it; the box over it stays put) */ .sheet.findv > .sheet-in.findv-in { height: calc(100% - max(var(--sat), 34px) - 10px); max-height: none; overflow: hidden; gap: 10px; border-radius: 16px 16px 0 0; background: var(--bg); padding: 22px calc(var(--gut) + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(var(--gut) + env(safe-area-inset-left)); } .kb .sheet.findv > .sheet-in.findv-in { padding-bottom: 10px; } .fhead { display: flex; align-items: center; gap: 8px; } .fhead > .ic { flex: none; width: 20px; height: 20px; color: var(--dim); } .fhead .fq { flex: 1; min-width: 0; min-height: 44px; } .fnote { margin: 0 2px; } .fres { list-style: none; margin: 0; padding: 0 0 8px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; } .fhit { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--card); } .fhit .fwho { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .fhit .fwho b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } .fhit .fwho small { flex: none; color: var(--dim); font-size: calc(13rem / 17); } .fhit .ftx { color: var(--fg); overflow-wrap: anywhere; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; unicode-bidi: isolate; } [data-look="night"] .sheet.findv > .sheet-in { background: radial-gradient(120% 70% at 50% 0%, #1a1f33, #0b0d14 70%); } [data-look="night"] .fhit { border: 1px solid var(--line); } [data-look="night"] .fhit b { color: #d8b25a; letter-spacing: .02em; } [data-look="retro"] .sheet.findv > .sheet-in { padding-top: 20px; border-radius: 0; background: #d6dfee; } [data-look="retro"] .sheet.findv > .sheet-in > .sh.rtonly:first-child { margin: -20px calc(-1 * (var(--gut) + env(safe-area-inset-right))) 0 calc(-1 * (var(--gut) + env(safe-area-inset-left))); } [data-look="glass"] .sheet.findv > .sheet-in { background: rgba(20,20,26,.96); } [data-look="bold"] .sheet.findv > .sheet-in { border-radius: 18px 18px 0 0; } [data-look="retro"] .fhit { border-radius: 0; border: 1px solid #9fb6d8; background: #fff; font-family: var(--font); } [data-look="retro"] .fhit b { color: #0018c8; } [data-look="retro"] .fhead > .ic { color: #23458c; } /* ---------------------------------------------------------------- BANTOWN: guild chat (not encrypted, and it says so) */ .guild .hd { position: relative; } .hset { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: var(--dim); background: var(--card2); } .hset .ic { width: 19px; height: 19px; } .bn.open { background: var(--card); border: 1px solid var(--line); color: var(--fg); } .guild .bn.open { font-size: var(--fs-sub); } .bn .grow { flex: 1; } .bn .ok2 { flex: none; align-self: center; padding: 8px 13px; border-radius: 11px; background: var(--card2); color: var(--fg); font-size: calc(14rem / 17); font-weight: 700; } .bn .ok2.on { background: var(--btn); color: var(--btn-fg); } [data-look="night"] .bn .ok2.on { background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; } [data-look="retro"] .bn .ok2.on { background: var(--gloss); border-color: #23458c; color: #fff; text-shadow: 0 1px 0 #1d3d7a; } .bn.warn .ok2 { background: #5a2222; color: #ffd0c8; } .gx { margin: auto; max-width: 32ch; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--dim); font-size: var(--fs-sub); line-height: 1.45; } .gx .ic { width: 44px; height: 44px; color: var(--accent); stroke-width: 1.4; } .gx b { color: var(--fg); font-size: calc(20rem / 17); } .gx.quiet { margin: auto auto 12px; padding: 16px; font-size: var(--fs-sub); } .mli:has(> .gx:only-child:not(.quiet)) { margin-bottom: auto; } .gcard { padding: 18px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; } .gcard > .sh { font: 600 calc(13rem / 17)/calc(18rem / 17) var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); } [data-look="night"] .gcard { background: rgba(18,22,36,.86); } [data-look="night"] .gcard > .sh { font-family: 'Cinzel', Georgia, serif; color: #a8905a; letter-spacing: .12em; } [data-look="retro"] .gcard { padding: 0; gap: 0; border-radius: 0; border: 1px solid #6f8fc2; } [data-look="retro"] .gcard > * { margin: 8px; } [data-look="retro"] .gcard > .sh { margin: 0; padding: 4px 7px; background: linear-gradient(#ffd48f, #f6a63e); color: #4a2400; text-shadow: 0 1px 0 rgba(255,255,255,.45); font: 700 calc(12rem / 17) var(--font); letter-spacing: 0; text-transform: none; } [data-look="glass"] .gcard { background: var(--w05); border-color: var(--w08); } [data-look="bold"] .gcard { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } .gset { margin: 12px 2px; } .gset .steps, .gsheet .steps { font-size: var(--fs-sub); } .gset p, .gsheet p { margin: 0; } .gsheet { max-height: 88vh; overflow-y: auto; } .inp.secret { -webkit-text-security: disc; } .guild .m .sn.g, .guild .m .nm.g, .guild .m .wn { cursor: default; } [data-fam="clean"] .guild .m .av.g { background: #34343c; color: #c9c9d1; } [data-fam="clean"] .guild .m .nm.g { color: var(--dim); } [data-fam="clean"] .guild .cmp { padding-left: 12px; } [data-fam="clean"] .guild .hm { max-width: 100%; } /* (the header keeps it clear of Back and the connection button) */ [data-fam="clean"] .guild .gs { max-width: 100%; } .guild .gs .gch { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guild .gs .gne { flex: none; white-space: nowrap; } /* (the guild chat's "not encrypted" at the top: its size at any text size, so it always fits whole beside Back: effortless, pass 5) */ .guild > header.hd .gs { font-size: 13px; line-height: 17px; } :is([data-look="night"], [data-look="bold"]) .guild > header.hd .gs { line-height: 16px; } [data-look="retro"] .bh > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Night: the title has the room between the crest and the connection button, at least enough for BANTOWN (Night's header, below, keeps clear of the button); "GUILD CHAT ·" steps aside when it doesn't fit beside "NOT ENCRYPTED", which always shows (a wrapping row whose second line is out of sight; the lock stays at the front) */ [data-look="night"] .guild .ht { flex: 1 1 0; } /* (its least: BANTOWN's own width) */ [data-look="night"] .guild .gs { position: relative; padding-left: 16px; flex-flow: row-reverse wrap; justify-content: flex-end; gap: 24px 5px; height: 14px; overflow: hidden; } [data-look="night"] .guild .gs > .ic { position: absolute; left: 0; top: 1.5px; } [data-look="night"] .guild .gs .gne { order: -1; } [data-look="night"] .guild .m { color: #40ff40; } [data-look="night"] .guild .m .gc { color: #40ff40; } [data-look="night"] .guild .cmp { border-color: #3d8a3d; color: #40ff40; } [data-look="night"] .guild .cmp .party, [data-look="night"] .guild .cmp .fd { color: #40ff40; caret-color: #40ff40; } [data-look="night"] .guild .cmp .fd::placeholder { color: #2e8a2e; } [data-look="night"] .hset { width: 38px; height: 38px; bottom: 13px; background: linear-gradient(#4a3814, #1d1508); color: #ffd479; border: 1px solid #d8b25a; } [data-look="night"] .bn.open { background: rgba(18,22,36,.92); border-color: #a8905a; color: #e9e6dc; } [data-look="night"] .bn.open .ic { color: #ffd479; } [data-look="night"] .bn .ok2 { border: 1px solid #d8b25a; background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .05em; text-transform: uppercase; } [data-look="night"] .gx b { color: #d8b25a; font-family: 'Cinzel', serif; letter-spacing: .04em; } [data-look="night"] .gx.quiet { color: #8a7650; } [data-look="retro"] .guild .m .sn.g { color: #0a7d1e; } [data-look="retro"] .bh .bhb { margin-left: auto; padding-left: 8px; position: relative; color: #0018c8; text-decoration: underline; font: 400 var(--fs-lab) var(--font); } [data-look="retro"] .bh .bhb::before { content: ''; position: absolute; inset: min(-12px, calc((100% - 44px) / 2)) -8px; } /* a full-size tap on a small link */ [data-look="retro"] .gnote { display: flex; align-items: center; gap: 5px; padding: 4px 7px 5px; font: 400 var(--fs-lab) var(--font); color: #7a1200; } [data-look="retro"] .gnote .ic { width: 12px; height: 12px; stroke-width: 2.2; } [data-look="retro"] .bn.open { background: #fff7c2; border: 1px solid #e3c34b; color: #3a2a00; } [data-look="retro"] .bn .ok2 { border: 1px solid #9fb2cf; border-radius: 6px; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; font: 700 calc(11rem / 17) var(--font); } [data-look="retro"] .gx { color: #333; } [data-look="retro"] .gx b { color: #1d3d7a; font-size: calc(15rem / 17); } [data-look="retro"] .gx .ic { color: #2a58bd; } [data-look="retro"] .gset { margin: 4px 0; background: #fff; } /* ---------------------------------------------------------------- key changes, Bags taken out, your phones (every look) */ /* (system lines are small and quiet: the Bags' words are what the chat is for) */ .kl { align-self: center; display: flex; align-items: center; gap: 6px; max-width: 86%; margin: 20px 0 8px; padding: 0 8px; text-align: center; font-size: var(--fs-sub); line-height: 1.4; color: var(--dim); opacity: .85; } .kl .ic { width: 12px; height: 12px; flex: none; stroke-width: 2.2; } .kl span { unicode-bidi: isolate; } [data-look="night"] .kl { align-self: stretch; justify-content: flex-start; max-width: none; margin: 10px 0 4px; padding: 0; text-align: left; font: 600 var(--fs-sub)/1.45 var(--sys); color: #dcd36e; text-shadow: 0 1px 0 #000; } [data-look="retro"] .kl { margin: 8px 0 4px; padding: 0; font: italic 400 calc(11rem / 17)/1.4 var(--font); color: #666; opacity: 1; } .av.gone { filter: grayscale(1); opacity: .55; } .btn.danger:not(.ghost) { background: #c8402f; color: #fff; } [data-look="night"] .btn.danger:not(.ghost) { background: linear-gradient(#7a2a1c, #3a120a); color: #ffd0c4; border-color: #d0705a; } [data-look="night"] .btn.ghost.danger { color: #ff9a85; } [data-look="retro"] .btn.danger:not(.ghost) { border-color: #8c1f0e; background: linear-gradient(#cf4530, #c13a24 50%, #ab2d18 51%, #bd3822); text-shadow: 0 1px 0 #7a1200; } [data-look="retro"] .btn.ghost.danger { color: #b3200a; } /* ---------------------------------------------------------------- refinement: time stamps, arrivals, taps */ [data-fam="clean"] .tm { font-weight: 600; } [data-look="night"] .tm::before, [data-look="night"] .tm::after { content: '—'; margin: 0 8px; opacity: .55; } [data-look="retro"] .tm { font: 400 var(--fs-foot) var(--font); color: #5b6a86; } [data-look="retro"] :is(.retry, .warn) { color: #b3200a; } [data-look="retro"] .ic.ok { color: #1f8f3a; } [data-look="retro"] .tm::before { content: '['; } [data-look="retro"] .tm::after { content: ']'; } @media (prefers-reduced-motion: no-preference) { .m.pop { animation: pop .22s ease-out; } } @keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes bcfade { to { opacity: 0; } } /* ---------------------------------------------------------------- sheets, toasts, the photo viewer */ .sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); } /* The keyboard (Zbo, Nov 5: "when you try to type and it opens the keyboard it doesn't pan to the appropriate area"): every sheet takes the room the app has (look.js `--app-h`), so with the keyboard up it ends at the keyboard and everything in it scrolls into sight above it, the box being typed in brought up (look.js `reveal`); it used to reach down behind the keyboard, its box and Save there. Where iPhone leaves the visible part moved (iOS 26 and 27 can, after the keyboard goes: look.js `--vvt`), the app and everything over it move with it. The app is what its own screens size from (a join screen too, which used to take the whole screen behind the keyboard). */ .sheet:not(.hold) { bottom: auto; height: var(--app-h, 100%); } /* (the long-press menu places itself by the visible part already: chat.js `place`) */ .sheet:not(.hold), .viewer, .lockscr { top: var(--vvt, 0px); } /* Every sheet the iPhone way (Zbo, Nov 1; sheets.js): it glides up over a backdrop that dims in, has a grabber, follows a finger dragging it down (the backdrop lightening with it), and glides back down as it closes (.closing). The long-press menu (.hold) keeps its own pop-in. Nothing glides with Reduce Motion. */ .sheet:not(.hold) { background: none; } .sheet:not(.hold)::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.55); opacity: var(--dim, 1); transition: opacity .26s ease-out; animation: sheetdim .3s ease-out; } .sheet:not(.hold) > .sheet-in { position: relative; animation: sheetup .32s cubic-bezier(.22, .9, .3, 1); } .sheet.dragging::before { transition: none; } .sheet.closing { pointer-events: none; } .sheet.closing::before { opacity: 0 !important; transition: opacity .28s ease-in !important; } .sheet.closing > .sheet-in { transform: translate3d(0, 105%, 0) !important; transition: transform .28s cubic-bezier(.4, 0, 1, 1) !important; animation: none; } @keyframes sheetdim { from { opacity: 0; } } @keyframes sheetup { from { transform: translate3d(0, 100%, 0); } } @media (prefers-reduced-motion: reduce) { .sheet:not(.hold)::before, .sheet:not(.hold) > .sheet-in { animation: none; } } /* the grabber: a little bar at the top middle (Retro: a 2006 grip on its window's title bar), drawn by the sheet itself (::before: nothing is added to what's in it); not on a sheet that stays put (data-keep) */ .sheet:not(.hold):not([data-keep]) > .sheet-in::before { content: ''; position: absolute; top: 8px; left: 50%; z-index: 1; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 26%, transparent); pointer-events: none; } [data-look="glass"] .sheet:not(.hold) > .sheet-in::before { background: rgba(255,255,255,.3); } [data-look="channel"] .sheet:not(.hold) > .sheet-in::before { background: #5b5b66; } [data-look="bold"] .sheet:not(.hold) > .sheet-in::before { top: 9px; width: 40px; height: 6px; margin-left: -20px; background: var(--ink); opacity: .32; } [data-look="night"] .sheet:not(.hold) > .sheet-in::before { background: linear-gradient(90deg, rgba(216,178,90,.25), rgba(242,193,78,.7), rgba(216,178,90,.25)); } [data-look="retro"] .sheet:not(.hold) > .sheet-in::before { top: 3px; width: 34px; height: 5px; margin-left: -17px; border-radius: 0; background: repeating-linear-gradient(#fff 0 1px, rgba(10,30,80,.45) 1px 2px); opacity: .85; } .sheet-in { width: min(480px, 100%); max-height: calc(100% - var(--sat) - 8px); overflow-y: auto; overscroll-behavior: contain; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--card); color: var(--fg); display: flex; flex-direction: column; gap: 14px; } .sheet-in > * { flex: none; } .sheet .sh { font: 700 calc(20rem / 17)/1.25 var(--title); letter-spacing: -.01em; color: var(--fg); overflow-wrap: anywhere; } [data-look="night"] .sheet-in { border-top: 1px solid #a8905a; } [data-look="night"] .sheet .sh { font-family: 'Cinzel', Georgia, serif; font-size: calc(19rem / 17); color: #d8b25a; letter-spacing: .06em; } [data-look="retro"] .sheet-in { padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); gap: 12px; border-radius: 0; border: 1px solid #23458c; border-bottom: 0; background: #eef3fb; } [data-look="retro"] .sheet .sh { font: 700 calc(15rem / 17) var(--font); letter-spacing: 0; } [data-look="retro"] .sheet-in > .sh:first-child { margin: -20px -18px 0; padding: 7px 10px; border-bottom: 1px solid #16357a; background: linear-gradient(#4472d5, #3566cc 50%, #2a58bd 51%, #3a6ad2); color: #fff; font: 700 calc(12rem / 17) var(--font); letter-spacing: 0; text-transform: none; text-shadow: 0 1px 0 #13306e; } [data-look="retro"] .sheet-in > .sh:first-child + * { margin-top: 2px; } .sheet .sh.rtonly { display: none; } /* a window title in Retro only (its sheets are little windows) */ [data-look="retro"] .sheet .sh.rtonly { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; } .sheet-in p { margin: 0; color: var(--dim); } .steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; } /* The hard moments in steps (effortless, Zbo Nov 3: the canvas, row 16, E1LostPhone): the reassurance first, then numbered steps, one thing each, then the line for after (util.js `steps`). In every look its own way. */ .nback { display: flex; flex-direction: column; gap: 14px; } .safe { margin: 0; color: var(--accent) !important; font: 600 calc(var(--fs-body) + 2rem / 17)/1.3 var(--font); } .nsteps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .nsteps li { display: flex; align-items: flex-start; gap: 12px; color: var(--fg); font-size: var(--fs-body); line-height: 1.35; text-align: left; } .nsn { flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: 700 var(--fs-sub)/1 var(--sys); } .nst { min-width: 0; overflow-wrap: anywhere; } .nthen { margin: 0; color: var(--dim); font-size: var(--fs-sub); line-height: 1.4; text-align: left; } .fhow1 { margin-top: -6px !important; text-align: center; } /* (the phone's own unlock, said under the big button where the word alone doesn't: Android, Windows) */ .lockscr .nsteps li, .gate .nsteps li { text-align: left; } [data-look="night"] .safe { color: #ffd479 !important; font-family: 'Cinzel', Georgia, serif; letter-spacing: .03em; } [data-look="night"] .nsn { width: 24px; height: 24px; border-radius: 4px; border: 1px solid #a8905a; background: linear-gradient(#2a2416, #0b0d14); color: #ffd479; font: 700 var(--fs-sub)/1 'Cinzel', Georgia, serif; } [data-look="night"] .nsteps li { color: #e9e6dc; } [data-look="retro"] .nback { gap: 8px; } [data-look="retro"] .safe { color: #1a5a1a !important; font: 700 var(--fs-body) var(--font); } [data-look="retro"] .nsteps { gap: 6px; } [data-look="retro"] .nsteps li { gap: 8px; color: #000; font-size: var(--fs-sub); } [data-look="retro"] .nsn { width: 18px; height: 18px; margin: 0; border-radius: 0; border: 1px solid #9fb2cf; background: linear-gradient(#ffffff, #e3eaf5); color: #23458c; font: 700 var(--fs-lab)/1 var(--font); } [data-look="retro"] .nthen { color: #444; font-size: var(--fs-sub); } [data-look="fyi"] .safe { color: var(--accent) !important; font: 800 calc(var(--fs-body) + 4rem / 17)/1.05 var(--title); font-style: italic; text-transform: uppercase; } [data-look="fyi"] .nsn { width: 26px; height: 26px; border-radius: 0; border: 1px solid var(--line2); background: none; color: var(--soft); font: 700 var(--fs-mono)/1 var(--mono); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); } [data-look="bold"] .safe { color: var(--ink) !important; font-weight: 800; } [data-look="bold"] .nsn { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); font-weight: 900; } [data-look="bold"] .nsteps li { color: var(--ink); } .profile .prow { display: flex; align-items: center; gap: 16px; padding-bottom: 2px; } .profile .pn { font: 700 calc(1rem + 7px)/1.2 var(--title); overflow-wrap: anywhere; } .profile .ps { color: var(--dim); font-size: var(--fs-sub); } .pdl { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--card2); } .pdl dt { color: var(--dim); font-size: var(--fs-sub); } /* Zbo's "Take him out": the very last thing on a Bag's profile, quiet, well away from Message (it asks again first) */ .ptake { align-self: center; min-height: 44px; margin-top: 8px; padding: 0 12px; color: #ff7a6b; font-size: calc(15rem / 17); font-weight: 600; } [data-look="night"] .ptake { color: #d98a76; font-family: var(--sys); } [data-look="retro"] .ptake { margin-top: 2px; color: #b3200a; font: 400 calc(12rem / 17) var(--font); text-decoration: underline; } [data-look="bold"] .ptake { color: #c22d12; font-weight: 700; } .pdl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .pdl dd.mc { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .04em; } [data-look="night"] .profile .pn { color: #d8b25a; letter-spacing: .03em; } [data-look="retro"] .pdl { gap: 6px 12px; padding: 8px 10px; border-radius: 0; border: 1px solid #9fb6d8; background: #eef3fb; } [data-look="retro"] .pdl dt { font-size: calc(12rem / 17); } .bagrow { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; } details.zbo summary { min-height: 44px; display: flex; align-items: center; padding: 8px 0; color: var(--dim); font-size: var(--fs-sub); cursor: pointer; } .toasts { position: fixed; left: 0; right: 0; top: calc(10px + var(--sat) + var(--vvt, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; } .toast { max-width: 90vw; padding: 12px 16px; border-radius: 14px; background: #26262c; color: #f4f4f6; font-size: calc(15rem / 17); box-shadow: 0 8px 30px rgba(0,0,0,.4); transition: opacity .3s, transform .3s; } .toast.out { opacity: 0; transform: translateY(-8px); } .viewer { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; align-items: center; justify-content: center; } .viewer { touch-action: none; } .viewer img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; -webkit-user-drag: none; user-select: none; } .viewer.zoomed .vbar { opacity: 0; pointer-events: none; transition: opacity .2s; } .vclose { position: absolute; z-index: 1; top: calc(12px + var(--sat)); right: calc(12px + env(safe-area-inset-right)); width: 40px; height: 40px; border-radius: 20px; background: rgba(38,38,42,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--w14); color: #fff; display: flex; align-items: center; justify-content: center; } [data-look="night"] .vmore { background: linear-gradient(rgba(74,56,20,.92), rgba(29,21,8,.92)); box-shadow: none; border: 1px solid #d8b25a; color: #ffd479; font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .06em; } [data-look="night"] .vclose { background: rgba(29,21,8,.85); box-shadow: none; border: 1px solid #d8b25a; color: #ffd479; } [data-look="retro"] .viewer { background: #0d1a33; } [data-look="retro"] .vmore { border-radius: 8px; border: 1px solid #23458c; background: var(--gloss); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); color: #fff; text-shadow: 0 1px 0 #1d3d7a; font: 700 calc(13rem / 17) var(--font); } [data-look="retro"] .vclose { border-radius: 8px; border: 1px solid #23458c; background: var(--gloss); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); color: #fff; } /* ---------------------------------------------------------------- touch areas: compact controls keep their look, but every one answers a 44 x 44 pt tap (the area grows around the button, never shrinks it) */ .cmp .pl, .cmp .sd, .rbar .rbx, .m button.av, .bn .ok2 { position: relative; } /* (.jump, .hset, .vclose are positioned already) */ .rbar .rbx::before, .jump::before, .hset::before, .vclose::before, .m button.av::before, .bn .ok2::before, .dmback::before { content: ''; position: absolute; inset: min(0px, calc((100% - 44px) / 2)); } /* (Send and the +, used most, answer a 48 pt tap: effortless, T5) */ .cmp .pl::before, .cmp .sd::before { content: ''; position: absolute; inset: min(0px, calc((100% - 48px) / 2)); } .rc { position: relative; } .rc::before { content: ''; position: absolute; inset: min(-9px, calc((100% - 44px) / 2)) -3px; } /* (44 tall at least, its chip any size) */ /* a sender's name over his bubble or row opens his profile: its tap is 44 pt tall, reaching up into the space between runs and on over the end of the message above (never down over his own bubble). Bubbles, reactions, faces and retry lines sit over any name's reach (inside the chat, which keeps these to itself), so a tap on one of them is always its own (effortless, pass 2: T5, "neighbors never overlap") */ .m button.nm { position: relative; } .m button.nm::before { content: ''; position: absolute; left: -10px; right: -10px; bottom: -2px; top: calc(100% - 42px); } [data-look="channel"] .m button.nm::before { bottom: -3px; top: calc(100% - 41px); } /* (Slack's rows: only the room between them) */ .mli { isolation: isolate; } [data-fam="clean"] .ml .m :is(.bb, .rx, .retry), [data-fam="clean"] .ml .m button.av, [data-fam="clean"] .ml .hubline { position: relative; z-index: 1; } /* Night's and Retro's lines, a name at the start of each (Zbo, Nov 3: "Space them a little"): Night's sit 44 apart, so a name's tap is a full 44, its line and half the room above and below it; 2006 Retro's, dense on purpose, 33 apart, so a name's tap fills its line and half the room each side. Either way at least 44 wide, and never into another message (its name and words are its own). A roll's name, the same. (`--lg`: the room between lines, on each look's .m) */ [data-look="night"] .m.line button.wn, [data-look="retro"] .m.line button.sn { position: relative; } :is([data-look="night"], [data-look="retro"]) .m.line :is(button.wn, button.sn, .rln)::before { content: ''; position: absolute; top: calc(var(--lg) / -2); bottom: calc(var(--lg) / -2); left: min(-6px, calc((100% - 44px) / 2)); right: min(-6px, calc((100% - 44px) / 2)); } /* (a reply's quote, the line above its words there: up into the room above, never down over the words; the name under it, down into the room below, never up over its quote) */ :is([data-look="night"], [data-look="retro"]) .m.line button.rq { position: relative; } :is([data-look="night"], [data-look="retro"]) .m.line button.rq::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--lg) / -2); } :is([data-look="night"], [data-look="retro"]) .m.line:has(> button.rq) :is(button.wn, button.sn, .rln)::before { top: 0; } /* (rolls one after another sit closer than a fingertip in the other looks: each name's tap fills its line, never over the next roll's) */ [data-fam="clean"] .mli .m.roll.rcont .rln::before { top: -1px; } [data-fam="clean"] .mli .m.roll:has(+ .m.roll.rcont) .rln::before { bottom: -1px; } /* "Read by …" under my latest message: its tap reaches down to the chat's bottom edge and up over the end of that same message (a tap on it opens that message's menu), 44 pt in all */ .rd { position: relative; } .rd::before { content: ''; position: absolute; left: -8px; right: -6px; bottom: -6px; top: calc(100% - 38px); } .cmp :disabled { opacity: .45; cursor: default; } @media (prefers-reduced-motion: reduce) { .m.flash { animation: none; outline: 2px solid var(--accent); outline-offset: 2px; } .toast { transition: none; } } /* ================================================================ look D: Glass (Clean made deeper: frosted glass and a soft glow; the chat scrolls under its header and floating message box) */ [data-look="glass"] body, [data-look="glass"] .screen { background: var(--fade), radial-gradient(420px 340px at 8% 12%, rgba(246,223,154,.12), transparent 70%), radial-gradient(460px 420px at 104% 58%, rgba(191,231,224,.09), transparent 70%), radial-gradient(380px 320px at 30% 104%, rgba(220,207,244,.08), transparent 70%), var(--bg); } [data-look="glass"] :is(.chat, .guild) .hd { background: var(--frost); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border-bottom: 1px solid var(--w07); } [data-look="glass"] .chat > .hd { position: absolute; top: 0; left: 0; right: 0; z-index: 4; } [data-look="glass"] .chat > .banners { position: absolute; top: var(--gh, 0); left: 0; right: 0; z-index: 4; } [data-look="glass"] .chat > .banners:not(:empty) { padding-bottom: 8px; background: rgba(16,16,22,.74); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border-bottom: 1px solid var(--w07); } [data-look="glass"] .chat .ml { padding-top: calc(var(--gt, 110px) + 8px); padding-bottom: calc(var(--gb, 64px) + 16px); } [data-look="glass"] .chat > .cmp { position: absolute; left: 12px; right: 12px; bottom: calc(10px + var(--sab)); z-index: 4; } .kb[data-look="glass"] .chat > .cmp { bottom: 10px; } [data-look="glass"] .chat > .rbar { position: absolute; left: 12px; right: 12px; bottom: calc(var(--gc, 56px) + 16px + var(--sab)); z-index: 4; border-radius: 18px; } .kb[data-look="glass"] .chat > .rbar { bottom: calc(var(--gc, 56px) + 16px); } [data-look="glass"] .chat .jump { bottom: calc(var(--gb, 64px) + 22px); } [data-look="glass"] .hset { background: var(--w08); box-shadow: 0 0 0 1px var(--w10); color: #e4e4ea; } [data-look="glass"] .m .bb { background: var(--w09); border: 1px solid var(--w07); border-radius: 20px 20px 20px 6px; } [data-look="glass"] .m.out .bb { border: 0; border-radius: 20px 20px 6px 20px; background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(239,207,122,.14); } [data-look="glass"] .m .bb.gone { border: 1px dashed rgba(255,255,255,.26) !important; background-image: none; box-shadow: none; } [data-look="glass"] .m .mb .rx { position: relative; z-index: 1; margin-top: -10px; padding: 0 8px; } [data-look="glass"] .rc { background: #202027; border: 2px solid var(--bg); color: #e6e6ec; } [data-look="glass"] .rc.mine { background: #3a3220; border-color: var(--bg); } [data-look="glass"] .cmp { padding: 6px; gap: 8px; align-items: center; border: 1px solid var(--w10); border-top: 1px solid var(--w10); border-radius: 28px; background: rgba(28,28,35,.7); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); } [data-look="glass"] .cmp .fd { border: 0; padding: 11px 6px; } [data-look="glass"] .cmp .pl, [data-look="glass"] .cmp .sd { margin-bottom: 0; } [data-look="glass"] .cmp .pl { background: var(--w09); } [data-look="glass"] .cmp .sd { background: linear-gradient(180deg, #f9e6aa, #efcf7a); } [data-look="glass"] .rbar { border: 1px solid var(--w10); background: rgba(28,28,35,.78); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); } [data-look="glass"] .rbar:not([hidden]) + .cmp { border-top: 1px solid var(--w10); padding-top: 5px; } [data-look="glass"] .bn.inst, [data-look="glass"] .bn.ask, [data-look="glass"] .bn.open, [data-look="glass"] .bn.wait { background: var(--w06); border: 1px solid var(--w10); } [data-look="glass"] .bn.hi { background: var(--w06); border: 1px solid rgba(239,207,122,.38); } [data-look="channel"] .banners .bn.hi { border-radius: 12px; background: #16161a; border-color: color-mix(in srgb, var(--accent) 55%, #26262d); } [data-look="glass"] .grp, [data-look="glass"] .fhit { background: var(--w055); border-color: var(--w08); box-shadow: inset 0 0 0 1px var(--w06); } [data-look="glass"] .grp > * + .gr::before, [data-look="glass"] .grp > * + .grw::before { background: var(--w08); } [data-look="glass"] .look .ic.ok { background: linear-gradient(180deg, #f9e6aa, #efcf7a); } [data-look="glass"] .guild .cmp { margin: 0 10px 8px; } /* (a page scrolls under its bar here too: the bar frosts once the big title has gone up under it) */ [data-look="glass"] .me > .hd.page { position: absolute; top: 0; left: 0; right: 0; } [data-look="glass"] .me.scrolled > .hd.page { background: var(--frost); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border-bottom-color: var(--w07); } [data-look="glass"] .me-body { padding-top: calc(44px + var(--sat)); } [data-look="glass"] .sheet:not(.hold)::before { background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } [data-look="glass"] .sheet-in { background: rgba(24,24,31,.94); border-top: 1px solid var(--w10); } [data-look="glass"] .btn.ghost, [data-look="glass"] .rr { background: var(--w08); } /* ================================================================ look E: Channel (no bubbles: each message a row with the sender's name and the time, like a guild channel; the chat's name and faces up top) */ [data-look="channel"] .chat .hd { display: block; padding: calc(12px + var(--sat)) var(--gut) 10px; border-bottom: 1px solid var(--line); } [data-look="channel"] .hm { align-items: flex-start; gap: 2px; } [data-look="channel"] .chat .gt { font: 700 calc(var(--hr) + 11px)/calc(34 * var(--hr) / 17) var(--sys); letter-spacing: -.02em; } [data-look="channel"] .gs { font-size: calc(13rem / 17); line-height: 1rem; } [data-look="channel"] .guild .hd { display: block; padding: calc(12px + var(--sat)) 60px 14px var(--gut); border-bottom: 1px solid var(--line); } [data-look="channel"] .guild .gt { font: 700 calc(var(--hr) + 11px)/calc(34 * var(--hr) / 17) var(--sys); letter-spacing: -.02em; } [data-look="channel"] .guild .hset { top: calc(14px + var(--sat)); bottom: auto; right: 12px; background: none; color: #d6d6dd; } [data-look="channel"] .guild .hm, [data-look="bold"] .guild .hm { max-width: none; } [data-look="channel"] .ml { padding: 6px 0 12px; } [data-look="channel"] .m { padding: 0 var(--gut); margin-top: 3px; } [data-look="channel"] .m.in.first { margin-top: 20px; } [data-look="channel"] .m.in { align-items: flex-start; gap: 12px; } [data-look="channel"] .m .av { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; margin-top: 2px; } [data-look="channel"] .m.in:not(.first) .av { height: 0; margin: 0; } [data-look="channel"] .m .mb { flex: 1; min-width: 0; max-width: none; gap: 2px; } [data-look="channel"] .m .rh { display: flex; align-items: baseline; gap: 8px; } [data-look="channel"] .m .nm { padding: 0; font: 700 calc(16rem / 17)/calc(21rem / 17) var(--sys); } [data-look="channel"] .m .rt { font-size: calc(13rem / 17); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-look="channel"] .m .bb { max-width: 100%; padding: 1px 0; border-radius: 0; background: none !important; color: var(--fg); font: 400 var(--fs-msg)/1.45 var(--sys); gap: 4px; } [data-look="channel"] .m .bb .rq { margin: 2px 0 2px; border-left: 0; border-radius: 10px; background: #18181d; padding: 6px 10px; } [data-look="channel"] .m .bb.gone { border: 0; padding: 0; font-size: var(--fs-sub); } [data-look="channel"] .m .bb .edited { align-self: flex-start; margin-top: 0; } [data-look="channel"] .m .photo { margin: 4px 0 2px; border-radius: 12px; } [data-look="channel"] .m .retry { align-self: flex-start; margin: 2px 0 0 52px; } [data-look="channel"] .rx { padding-top: 2px; } [data-look="channel"] .rc { min-height: 26px; padding: 1px 9px 1px 7px; border: 1px solid #2a2a31; border-radius: 999px; background: #17171b; } [data-look="channel"] .rc.mine { border-color: #6b5a2a; background: #211d12; color: #f2e2b0; } [data-look="channel"] .tm { display: flex; align-items: center; gap: 10px; align-self: stretch; margin: 22px var(--gut) 2px; padding: 0; background: none; font-weight: 600; font-size: var(--fs-foot); } [data-look="channel"] .tm::before, [data-look="channel"] .tm::after { content: ''; flex: 1; height: 1px; background: #24242b; } [data-look="channel"] .rd { padding-right: var(--gut); } [data-look="channel"] .cmp { padding: 8px var(--gut) 10px 8px; } [data-look="channel"] .cmp .pl { width: 40px; height: 40px; border-radius: 12px; background: none; color: #cfcfd7; } [data-look="channel"] .cmp .pl .ic { width: 22px; height: 22px; } [data-look="channel"] .cmp .fd { min-height: var(--box); border-radius: 12px; border-color: #2a2a31; background: #16161a; } [data-look="channel"] .grp { border-radius: 12px; box-shadow: inset 0 0 0 1px #1e1e24; } [data-look="channel"] .gi { border-radius: 8px; } [data-look="channel"] .cmp .sd { width: 40px; height: 40px; border-radius: 12px; } /* ================================================================ look F: Bold (light and loud: every Bag's bubbles in his own color, thick ink outlines, sticker reactions) */ [data-look="bold"] :is(.chat, .guild) .hd { display: block; padding: calc(10px + var(--sat)) 64px 0 18px; border-bottom: 2px solid var(--ink); } [data-look="bold"] .hm { align-items: flex-start; gap: 2px; } [data-look="bold"] .gt { font: 900 calc(var(--hr) + 23px)/calc(44 * var(--hr) / 17) var(--sys); letter-spacing: -.045em; } [data-look="bold"] .guild .gt { font-size: calc(var(--hr) + 15px); line-height: calc(38 * var(--hr) / 17); } [data-look="bold"] .gs { font-size: var(--fs-lab); line-height: calc(16rem / 17); font-weight: 600; color: var(--dim); } [data-look="bold"] .guild .hd { padding-bottom: 12px; } [data-look="bold"] .hset { top: calc(14px + var(--sat)); bottom: auto; right: 12px; width: 42px; height: 42px; border-radius: 21px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .ml { background: #efe8db; padding: 8px var(--gut) 14px 12px; } [data-look="bold"] .m { margin-top: 6px; } [data-look="bold"] .m.first { margin-top: 20px; } [data-look="bold"] .m.in { align-items: flex-start; } [data-look="bold"] .m .av { width: 34px; height: 34px; border-radius: 17px; border: 2px solid var(--ink); color: var(--ink); font: 900 15px var(--sys); } [data-look="bold"] .m .nm { padding-left: 2px; color: var(--ink) !important; font: 800 calc(14rem / 17)/calc(18rem / 17) var(--sys); } [data-look="bold"] .m .bb, [data-look="bold"] .m.out .bb { padding: 10px 16px; border: 2px solid var(--ink); border-radius: 22px; background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: var(--fs-msg); line-height: var(--lh-msg); } [data-look="bold"] .m .bb:has(.photo:only-child) { padding: 0; border: 0; box-shadow: none; } [data-look="bold"] .m .photo { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 18px; } [data-look="bold"] .m .bb .photo { box-shadow: none; } [data-look="bold"] .m .bb.gone { border: 2px dashed rgba(24,22,27,.5) !important; box-shadow: none; color: #55524e; font-weight: 600; font-size: var(--fs-sub); } [data-look="bold"] .unsent { color: #55524e; font-style: normal; } [data-look="bold"] .m .bb .rq, [data-look="bold"] .m.out .bb .rq { border: 1.5px solid var(--ink) !important; border-radius: 12px; background: rgba(255,255,255,.6); } [data-look="bold"] .m .rq .rqn { color: var(--ink) !important; font-weight: 800; } [data-look="bold"] .m .rq .rqt, [data-look="bold"] .m.out .rq .rqt { color: #3b3833; } [data-look="bold"] .m .mb .rx { position: relative; z-index: 1; margin-top: -6px; padding: 0 6px; } [data-look="bold"] .rc { border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-4deg); } [data-look="bold"] .rc.mine { background: #ffd35a; border-color: var(--ink); } [data-look="bold"] .tm { background: none; padding: 0; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } [data-look="bold"] .rd { color: var(--dim); font-weight: 700; } [data-look="bold"] .kl { font-weight: 600; color: var(--dim); } [data-look="bold"] .photo::after { display: none; } [data-look="bold"] .cmp { padding: 10px var(--gut) 12px 10px; align-items: center; border-top: 2px solid var(--ink); background: var(--bg); } [data-look="bold"] .cmp .pl { width: 44px; height: 44px; margin-bottom: 0; border-radius: 22px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); } [data-look="bold"] .cmp .fd { min-height: 48px; padding: 11px 16px; border: 2px solid var(--ink); border-radius: 24px; background: var(--card); color: var(--ink); } [data-look="bold"] .cmp .fd:focus-visible { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .cmp .sd { width: 46px; height: 46px; margin-bottom: 0; border-radius: 23px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .rbar { border-top: 2px solid var(--ink); background: var(--bg); } [data-look="bold"] .rbar > .ic { color: var(--ink); } [data-look="bold"] .rbar .rbx { border: 2px solid var(--ink); background: var(--card); } [data-look="bold"] .banners .bn { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); background: var(--card); color: var(--ink); } [data-look="bold"] .bn.warn { background: #ffe1d6; color: #7a1d00; } [data-look="bold"] .bn .ok2, [data-look="bold"] .bn.ask .go { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); } [data-look="bold"] .jump { border: 2px solid var(--ink); background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .newmark { color: #a63c0c; } [data-look="bold"] .btn { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .btn.ghost { background: var(--card); } [data-look="bold"] .btn.danger:not(.ghost) { background: #e8573c; color: var(--ink); } [data-look="bold"] .btn.ghost.danger { color: #c22d12; } [data-look="bold"] .inp { border: 2px solid var(--ink); background: var(--card); } [data-look="bold"] .nickrow .inp { border: 0; background: none; } [data-look="bold"] .grp { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .grp > * + .gr::before, [data-look="bold"] .grp > * + .grw::before { height: 1.5px; background: rgba(24,22,27,.28); } [data-look="bold"] .me-sec > .sh { font-weight: 800; color: var(--ink); letter-spacing: .08em; } [data-look="bold"] .gi { border: 2px solid var(--ink); } [data-look="bold"] .gi-red { background: #ff7a45; } [data-look="bold"] .gi-green { background: #35d072; } [data-look="bold"] .gi-blue { background: #6fb2ff; } [data-look="bold"] .gi-purple { background: #b79bff; } [data-look="bold"] .gi-orange { background: #ffd35a; } [data-look="bold"] .gi-gray { background: #d9d2c4; } [data-look="bold"] .gi { color: var(--ink); } [data-look="bold"] .gr.act.plain .gn { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } [data-look="bold"] .gr.act.danger .gn { color: #c22d12; } [data-look="bold"] .yn { font-weight: 900; letter-spacing: -.02em; } [data-look="bold"] .lp { box-shadow: 0 0 0 2px var(--ink); } [data-look="bold"] .look.on .lp { box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); } [data-look="bold"] .look .ic.ok { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); box-shadow: none; } [data-look="bold"] .hd.page { border-bottom: 2px solid transparent; } [data-look="bold"] .scrolled > .hd.page { border-bottom-color: var(--ink); } [data-look="bold"] .hd.page .pt { font-weight: 900; letter-spacing: -.035em; } [data-look="bold"] .ptl { font-size: calc(1rem + 23px); font-weight: 900; letter-spacing: -.045em; } [data-look="bold"] .sheet-in { border: 2px solid var(--ink); border-bottom: 0; } [data-look="bold"] .rr { border: 2px solid var(--ink); background: var(--card); } [data-look="bold"] .msheet .mprev, [data-look="bold"] .msheet .mhist, [data-look="bold"] .pdl { border: 2px solid var(--ink); background: var(--card); } [data-look="bold"] .fhit { border: 2px solid var(--ink); } [data-look="bold"] .code { border-color: var(--ink); } [data-look="bold"] .guild .m .av.g { background: #d9d2c4; color: var(--ink); } [data-look="bold"] .guild .m .nm.g { color: var(--dim) !important; } [data-look="bold"] .gx .ic { color: var(--ink); } [data-look="bold"] .askx .ic { background: var(--ink); box-shadow: none; } [data-look="bold"] .sheet .askimg { border: 2px solid var(--ink); } [data-look="bold"] .toast { background: var(--ink); color: var(--bg); } [data-look="bold"] .swr { border: 2px solid var(--ink); background: var(--card); color: var(--ink); } [data-look="bold"] .vmore, [data-look="bold"] .vclose { background: #fffdf8; color: #18161b; border: 2px solid #18161b; box-shadow: 2px 2px 0 #18161b; -webkit-backdrop-filter: none; backdrop-filter: none; } [data-look="bold"] .vbar .vmore.vdel { color: #c22d12; } /* ================================================================ pictures (each Bag's avatar, every look): his picture over his initial on his color, wherever his face shows */ .haspic { position: relative; } .haspic > .pic { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; pointer-events: none; } .av.gone > .pic { filter: grayscale(1); } .bpic { display: none; } .bpic.haspic { display: inline-block; width: 16px; height: 16px; border: 1px solid #9fb2cf; border-radius: 2px; background: #eef3fb; } .facebtn { position: relative; flex: none; border-radius: 50%; } .facebtn .facecam { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--card2); border: 2px solid var(--card); color: var(--fg); } .facebtn .facecam .ic { width: 13px; height: 13px; stroke-width: 2.2; } .picprev { display: flex; justify-content: center; padding: 4px 0 6px; } .picprev .av, .picprev > img { width: 132px; height: 132px; border-radius: 66px; font-size: 52px; object-fit: cover; } [data-look="night"] .picprev .av, [data-look="night"] .picprev > img, [data-look="night"] .av.big { box-shadow: 0 0 0 2px #a8905a; } [data-look="night"] .facebtn .facecam { background: linear-gradient(#4a3814, #1d1508); border-color: #a8905a; color: #ffd479; } [data-look="retro"] .picprev .av, [data-look="retro"] .picprev > img { border-radius: 4px; border: 1px solid #6f8fc2; } [data-look="retro"] .facebtn, [data-look="retro"] .facebtn .av.big { border-radius: 4px; } [data-look="retro"] .facebtn .facecam { border-radius: 4px; background: var(--gloss); border-color: #23458c; color: #fff; } [data-look="bold"] .picprev .av, [data-look="bold"] .picprev > img, [data-look="bold"] .av.big { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .facebtn .facecam { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); } [data-look="glass"] .facebtn .facecam { background: rgba(40,40,48,.9); border-color: var(--w18); } /* ================================================================ one-to-one chats (every look): the same chat screen with its own header (back to Home, the other Bag: a tap opens the details); a dot on a Bag who has something new for you. Night shows them as whispers, the way the game does. */ .dmback { position: relative; flex: none; min-width: 44px; max-width: 46vw; height: 40px; padding: 0 10px 0 4px; border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 1px; color: var(--accent); font: 400 var(--hr)/calc(22 * var(--hr) / 17) var(--sys); } .dmback .ic { width: 24px; height: 24px; stroke-width: 2.2; } .dmn { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--btn-fg); font: 700 var(--fs-lab)/calc(18 * var(--hr) / 17) var(--sys); font-style: normal; text-align: center; } .bk .dmn { flex: none; margin-left: 5px; } .dmh { display: flex; align-items: center; gap: 4px; min-width: 0; } .dmwho { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; text-align: left; } .dmav { position: relative; flex: none; width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font: 700 15px var(--sys); font-style: normal; color: #16161a; } .dmav.on::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 5px; background: #3ee27f; border: 2px solid var(--bg); z-index: 1; } .dmt { display: flex; flex-direction: column; min-width: 0; } .dmt b { font: 600 calc(16rem / 17)/calc(20rem / 17) var(--sys); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } .dmt small { display: flex; align-items: center; gap: 4px; font: 500 var(--fs-lab)/calc(15rem / 17) var(--sys); color: var(--dim); white-space: nowrap; overflow: hidden; } .dmt small .ic { width: 11px; height: 11px; stroke-width: 2.4; } .dmt small span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* a one-to-one chat in Clean and Glass: the header says who, so his face and name don't repeat over his messages */ [data-look="clean"] .chat.dm .m.in .av, [data-look="fyi"] .chat.dm .m.in .av, [data-look="glass"] .chat.dm .m.in .av { display: none; } [data-fam="clean"] .chat.dm .hd { justify-content: flex-start; padding: calc(8px + var(--sat)) 56px 8px 4px; } /* the dot: on a face or a row */ .dmdot { position: absolute; top: -4px; right: -4px; z-index: 2; width: 13px; height: 13px; border-radius: 7px; background: #ff5a4e; border: 2px solid var(--bg); pointer-events: none; } .bn .dmdot { position: static; flex: none; } .bn.ask.dmold { border-color: var(--line); } .btn.pmsg { display: flex; align-items: center; justify-content: center; gap: 8px; } .btn.pmsg .ic { width: 20px; height: 20px; } .wsheet .wlist { display: flex; flex-direction: column; gap: 6px; } .wb2 { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 40px 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); text-align: left; font-weight: 700; } .wb2 span { unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wb2 > .dmdot { top: 50%; right: 14px; margin-top: -6px; } .wav { position: relative; flex: none; width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font: 700 14px var(--sys); font-style: normal; color: #16161a; } /* Glass */ [data-look="glass"] .dmback { padding-right: 13px; color: var(--fg); font-weight: 500; background: var(--w08); box-shadow: 0 0 0 1px var(--w10); } [data-look="glass"] .dmav.on::after, [data-look="glass"] .dmdot { border-color: rgba(16,16,22,.9); } /* Channel: the name big, the face a rounded square, like its rows */ [data-look="channel"] .chat.dm .hd { display: flex; align-items: center; padding: calc(8px + var(--sat)) var(--gut) 10px 4px; } [data-look="channel"] .dmav { width: 38px; height: 38px; border-radius: 11px; } [data-look="channel"] .dmt b { font: 700 calc(20rem / 17)/calc(24rem / 17) var(--sys); letter-spacing: -.01em; } /* Bold: a big face in ink, the name loud */ [data-look="bold"] .chat.dm .hd { display: flex; align-items: center; padding: calc(10px + var(--sat)) 18px 12px 8px; } [data-look="bold"] .dmh { gap: 8px; } [data-look="bold"] .dmback { min-width: 46px; height: 42px; padding: 0 14px 0 6px; border-radius: 21px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 800 calc(16 * var(--hr) / 17)/calc(20 * var(--hr) / 17) var(--sys); letter-spacing: -.01em; } [data-look="bold"] .dmback .ic { width: 22px; height: 22px; stroke-width: 2.6; } [data-look="bold"] .dmn { border: 2px solid var(--ink); background: #ff7a45; color: var(--ink); line-height: calc(14 * var(--hr) / 17); } [data-look="bold"] .dmav { width: 46px; height: 46px; border-radius: 23px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font: 900 19px var(--sys); } [data-look="bold"] .dmav.on::after { width: 14px; height: 14px; border-radius: 7px; border: 2px solid var(--ink); background: #35d072; } [data-look="bold"] .dmt b { font: 900 calc(1rem + 9px)/calc(30rem / 17) var(--sys); letter-spacing: -.04em; } [data-look="bold"] .dmt small { font-weight: 600; } [data-look="bold"] .dmdot { width: 15px; height: 15px; border-radius: 8px; border: 2px solid var(--ink); background: #ff7a45; } [data-look="bold"] .wb2 { border: 2px solid var(--ink); background: var(--card); box-shadow: 2px 2px 0 var(--ink); } /* Night: whispers, in whisper pink */ [data-look="night"] .chat.dm .hd { padding-left: 10px; } [data-look="night"] .dmback { min-width: 40px; height: 36px; padding: 0 12px 0 6px; border-radius: 18px; background: linear-gradient(#4a3814, #1d1508); color: #ffd479; border: 1px solid #d8b25a; font: 700 calc(13 * var(--hr) / 17)/calc(18 * var(--hr) / 17) 'Cinzel', Georgia, serif; letter-spacing: .06em; } [data-look="night"] .dmback .ic { width: 20px; height: 20px; } [data-look="night"] .dmn { background: #ff9d2e; color: #1d1508; } [data-look="night"] .m.wsp, [data-look="night"] .m.wsp .wn, [data-look="night"] .m.wsp .pc { color: #ff80ff; } [data-look="night"] .chat.dm .cmp { border-color: #b35cb3; color: #ff80ff; } [data-look="night"] .chat.dm .cmp .party, [data-look="night"] .chat.dm .cmp .fd { color: #ff80ff; caret-color: #ff80ff; } [data-look="night"] .chat.dm .cmp .fd::placeholder { color: #a65ca6; } [data-look="night"] .chat.dm .cmp .party { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-look="night"] .chat.dm .rbar { border-color: #6b3a6b; color: #ff80ff; } [data-look="night"] .chat.dm .rbar .rbn { color: #ffc8ff; } [data-look="night"] .chat.dm .rbar > .ic, [data-look="night"] .chat.dm .rbar .rbx { color: #b97ab9; border-color: #6b3a6b; } [data-look="night"] .btn.pmsg, [data-look="night"] .bn.dmhist .ok2, [data-look="night"] .bn.dmpass .go { border-color: #ff80ff; background: linear-gradient(#5a1a5a, #2a0a2a); color: #ffc8ff; } [data-look="night"] .chat:not(.dm) .hd { padding-right: 58px; } [data-look="night"] .hset.hwsp { right: 12px; color: #ff9cff; border-color: #b35cb3; background: linear-gradient(#4a1a4a, #1d081d); } [data-look="night"] .bn.wsp { width: 100%; background: rgba(40,12,40,.9); border: 1px solid #b35cb3; color: #ff80ff; font: 600 var(--fs-sub)/1.35 var(--sys); text-shadow: 0 1px 0 #000; } [data-look="night"] .bn.wsp .go { flex: none; padding: 5px 11px; border-radius: 6px; border: 1px solid #ff80ff; background: linear-gradient(#5a1a5a, #2a0a2a); color: #ffc8ff; font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase; } [data-look="night"] .dmdot { background: #ff80ff; border-color: #0b0d14; } [data-look="night"] .wb2 { background: rgba(18,22,36,.92); border-color: #a8905a; color: #ff80ff; } /* Retro: an instant message window (a bar with Back, and the buddy: a tap, the chat's details) */ [data-look="retro"] .imbar { display: flex; align-items: center; gap: 8px; margin: 6px 6px 0; padding: 3px 7px 3px 4px; border: 1px solid #7f9dc9; background: linear-gradient(#ffffff, #d9e3f2); font: 400 calc(11 * var(--hr) / 17) var(--font); } [data-look="retro"] .imbar .dmback { width: auto; height: 28px; gap: 2px; padding: 0 9px 0 4px; border: 1px solid #9fb2cf; border-radius: 6px; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; font: 700 calc(11 * var(--hr) / 17) var(--font); } [data-look="retro"] .imbar .dmback .ic { width: 15px; height: 15px; stroke-width: 2.6; } [data-look="retro"] .imbar .dmback::before { inset: min(0px, calc((100% - 44px) / 2)) -4px; } [data-look="retro"] .dmn { position: static; min-width: 16px; height: 16px; margin-left: 3px; padding: 0 4px; background: #e8231b; color: #fff; font: 700 var(--fs-lab)/calc(16 * var(--hr) / 17) var(--font); } [data-look="retro"] .imwho { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 28px; font: 700 calc(11 * var(--hr) / 17) var(--font); color: #000; } [data-look="retro"] .imwho::before { content: ''; position: absolute; inset: -8px -4px; } [data-look="retro"] .imwho i { flex: none; width: 8px; height: 8px; border-radius: 4px; background: radial-gradient(circle at 35% 35%, #eee, #999); } [data-look="retro"] .imwho.on i { background: radial-gradient(circle at 35% 35%, #c8ffb0, #2ea51b); } [data-look="retro"] .imsub { flex: none; color: #5b6a86; font: italic 400 var(--fs-lab) var(--font); } [data-look="retro"] .dmdot { border-color: #fff; background: #e8231b; } [data-look="retro"] .wb2 { border-radius: 0; border-color: #9fb6d8; background: #fff; } /* ================================================================ the Face ID lock (lock.js), every look: over everything while it's up (the app behind keeps its place, just isn't shown or read out), and a plain cover (the crest and the name) as the app goes to the background, so the app switcher shows no chat */ [data-lock] body > :not(.lockscr), [data-lock] body > :not(.lockscr) * { visibility: hidden !important; } .lockscr { position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--fg); } .lockscr .gate-in { align-items: center; text-align: center; } .lockscr .brand { margin-bottom: 0; text-align: left; } .lockscr.cover .lkin { display: none; } .lkin { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } .lkin h1 { margin: 0; } .lkic { width: 76px; height: 76px; margin-top: 18px; border-radius: 38px; display: flex; align-items: center; justify-content: center; background: var(--card2); color: var(--accent); } .lkic .ic { width: 36px; height: 36px; stroke-width: 1.6; } .lkgo { align-self: stretch; gap: 8px; margin-top: 6px; } .lkgo .ic { width: 20px; height: 20px; stroke-width: 2.2; } .lkin .said, .lkin details.zbo { align-self: stretch; } .lkin details.zbo .hint { margin-bottom: 10px; } [data-look="night"] .lkic { border: 1px solid #a8905a; background: radial-gradient(circle, rgba(242,193,78,.2), rgba(18,22,36,.92) 70%); color: #ffd479; box-shadow: 0 0 26px rgba(242,193,78,.25); } [data-look="night"] .lkin h1 { letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 14px rgba(242,193,78,.35); } /* Retro: a little window titled "Locked" */ [data-look="retro"] .lkin { padding: 0 12px 14px; border: 1px solid #6f8fc2; background: #fff; box-shadow: 2px 2px 0 rgba(29,61,122,.18); } [data-look="retro"] .lkin h1 { order: -1; align-self: stretch; margin: 0 -12px; padding: 7px 10px; border-bottom: 1px solid #16357a; background: linear-gradient(#4472d5, #3566cc 50%, #2a58bd 51%, #3a6ad2); color: #fff; font: 700 calc(12rem / 17) var(--font); letter-spacing: 0; text-align: left; text-shadow: 0 1px 0 #13306e; } [data-look="retro"] .lkic { width: 64px; height: 64px; margin-top: 4px; border: 1px solid #9fb2cf; border-radius: 10px; background: linear-gradient(#ffffff, #dfe7f2); color: #23458c; } [data-look="retro"] .lkin p { color: #000; font-size: calc(13rem / 17); } [data-look="glass"] .lkic { border: 1px solid var(--w12); background: var(--w07); color: #f2d888; box-shadow: 0 12px 40px rgba(239,207,122,.14), inset 0 1px 0 var(--w18); } [data-look="channel"] .lkic { border-radius: 24px; border: 1px solid #26262d; background: #16161a; } [data-look="bold"] .lkic { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .lkin h1 { font-weight: 900; letter-spacing: -.03em; } /* Me → Face ID lock: off, or how long away (one pressed at a time) */ .lopts { display: flex; flex-wrap: wrap; gap: 6px; } .lopt { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--card2); color: var(--fg); font-size: calc(14rem / 17); font-weight: 600; } .lopt[aria-pressed="true"] { border-color: var(--btn); background: var(--btn); color: var(--btn-fg); } .lopt:disabled { opacity: .5; } [data-look="night"] .lopt { border-color: #a8905a; background: rgba(4,6,12,.7); color: #e9e6dc; font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .04em; } [data-look="night"] .lopt[aria-pressed="true"] { border-color: #d8b25a; background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; text-shadow: 0 0 8px rgba(242,193,78,.5); } [data-look="retro"] .lopt { border-color: #9fb2cf; border-radius: 7px; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; font: 700 calc(12rem / 17) var(--font); } [data-look="retro"] .lopt[aria-pressed="true"] { border-color: #23458c; background: var(--gloss); color: #fff; text-shadow: 0 1px 0 #1d3d7a; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } [data-look="glass"] .lopt { border-color: var(--w10); background: var(--w06); } [data-look="glass"] .lopt[aria-pressed="true"] { border-color: transparent; background: linear-gradient(180deg, #f9e6aa, #efcf7a); color: #1f1a0a; } [data-look="channel"] .lopt { border-radius: 10px; } [data-look="bold"] .lopt { border: 2px solid var(--ink); background: var(--card); color: var(--ink); } [data-look="bold"] .lopt[aria-pressed="true"] { background: #ffd35a; box-shadow: 2px 2px 0 var(--ink); } /* ================================================================ the quiet line over the chat (the Home Screen or alerts offer, when nothing else needs saying), in every look: no card, small words, the one link */ [data-look] .banners .bn.quiet { min-height: 44px; margin: 2px 0 0; padding: 0 0 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none; } [data-look] .bn.quiet .ok2 { border: 0; background: none; box-shadow: none; text-shadow: none; } [data-look="night"] .banners .bn.quiet { color: #b9b3a2; } [data-look="night"] .bn.quiet > .ic, [data-look="night"] .bn.quiet .ok2.on { color: #ffd479; } [data-look="night"] .bn.quiet .ok2.on { font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .05em; text-transform: uppercase; } [data-look="night"] .bn.quiet .ok2.bx { color: #a8905a; } [data-look="retro"] .banners .bn.quiet { color: #333; font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] .bn.quiet > .ic { color: #2a58bd; } [data-look="retro"] .bn.quiet .ok2.on { color: #0018c8; text-decoration: underline; font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] .bn.quiet .ok2.bx { color: #555; } [data-look="retro"] .bn.quiet .ok2.bx::before { left: -8px; right: -6px; } /* (Retro's notices reach the screen's edge: its room is to its left) */ [data-look="bold"] .banners .bn.quiet { color: var(--dim); font-weight: 600; } [data-look="bold"] .bn.quiet > .ic { color: var(--ink); } [data-look="bold"] .bn.quiet .ok2.on { color: #a63c0c; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } /* (canvas row 17: words in an ink-dark orange, 4.5:1 on the cream) */ /* (and every other word or small sign the other looks draw in their accent: Bold's is a fill, its words this orange) */ [data-look="bold"] :is(.bn.hi > .ic, .rbar > .ic, .msheet .mprev .mpin .ic, .sopt .ic.sck, .rba, .rblink, .tipsagain, .pwedit, .cdmute.on .ic) { color: #a63c0c; } [data-look="bold"] .hpdet > summary > span::after { color: #a63c0c; } [data-look="bold"] .bn.quiet .ok2.on { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } [data-look="bold"] .bn.quiet .ok2.bx { color: var(--ink); } /* ================================================================ "Kbag is typing…" (chat.js drawTyping): only the dots, under the latest message, each look in its own voice; still dots with Reduce Motion */ .typing { flex: none; display: flex; align-items: center; gap: 8px; } .typing[hidden] { display: none !important; } .typing .tyd { display: inline-flex; align-items: center; gap: 4px; } .typing .tyd i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; animation: tydot 1.3s ease-in-out infinite; } .typing .tyd i:nth-child(2) { animation-delay: .16s; } .typing .tyd i:nth-child(3) { animation-delay: .32s; } @keyframes tydot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .typing .tyd i { animation: none; opacity: .6; } } .typing .tyt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } /* Clean, Glass, Bold: his face and a bubble with the dots, like iMessage, and who in small words */ [data-fam="clean"] .typing { margin-top: var(--runs); align-items: flex-end; } [data-fam="clean"] .typing .tyav { flex: none; width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font: normal 700 13px var(--sys); color: #16161a; } [data-fam="clean"] .typing .tyb { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 20px 20px 20px 6px; background: var(--card2); color: #c9c9d1; } [data-fam="clean"] .typing .tyt { align-self: center; font: 500 var(--fs-foot)/1rem var(--sys); color: var(--dim); } /* (a one-to-one chat: just the dots, as in iMessage; the words are still read out) */ [data-fam="clean"]:not([data-look="channel"]) .chat.dm .typing .tyt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-look="glass"] .typing .tyb { background: var(--w09); border: 1px solid var(--w07); } [data-look="bold"] .typing .tyav { width: 34px; height: 34px; border-radius: 17px; border: 2px solid var(--ink); color: var(--ink); font: normal 900 15px var(--sys); } [data-look="bold"] .typing .tyb { height: 40px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 22px; background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .typing .tyt { font-weight: 700; } /* Channel: one quiet line under the last message, lined up with the words, like Slack */ [data-look="channel"] .typing { margin-top: 10px; padding: 0 var(--gut) 0 calc(var(--gut) + 52px); align-items: center; font: 400 var(--fs-foot)/calc(18rem / 17) var(--sys); color: var(--dim); } [data-look="channel"] .typing .tyd i { width: 5px; height: 5px; } /* BANTOWN Night: "[Kbag] is typing…", a quiet party line (whisper pink in a whisper chat) */ [data-look="night"] .typing { display: block; margin-top: 8px; font: italic 600 calc(14rem / 17)/1.45 var(--sys); color: #8c89bd; text-shadow: 0 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-look="night"] .typing .tyn { font-style: normal; font-weight: 800; unicode-bidi: isolate; } [data-look="night"] .chat.dm .typing { color: #d07ad0; } /* 2006 Retro: a small italic line in the IM window */ [data-look="retro"] .typing { display: block; margin-top: 4px; font: italic 400 calc(12rem / 17)/1.4 var(--font); color: #666; } /* ================================================================ pinned messages (roadmap #3, chat.js pinBar): the newest pin in the line over the chat (a tap goes to it; "All" lists every pin), a small tag by a pinned message, and Pin or Unpin in the message sheet, in every look */ .bn.pin { width: 100%; padding: 0 6px 0 0; gap: 2px; background: var(--card); border: 1px solid var(--line); color: var(--fg); } .bn.pin .pinj { flex: 1; min-width: 0; min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; text-align: left; } .bn.pin .pinj > .ic { width: 19px; height: 19px; color: var(--accent); } .bn.pin .pinw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bn.pin .pinl { font: 600 var(--fs-foot)/calc(16rem / 17) var(--font); color: var(--accent); } .bn.pin .pinb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sub); line-height: calc(20rem / 17); } .bn.pin .pinn { font-weight: 700; unicode-bidi: isolate; } .bn.pin .pint { unicode-bidi: isolate; } .bn.pin .pinall { margin-right: 2px; } /* a pinned message: who pinned it, small, over its bubble (Channel: under the words; Night and Retro: a tag on the line) */ [data-fam="clean"] .m .pinm { display: flex; align-items: center; gap: 4px; padding: 0 var(--bub-x) 1px; font: 500 var(--fs-foot)/1rem var(--sys); color: var(--dim); white-space: nowrap; } [data-fam="clean"] .m .pinm .ic { width: 13px; height: 13px; stroke-width: 2.2; color: var(--accent); } [data-look="channel"] .m .pinm { padding: 1px 0 0; } [data-look="night"] .m .pinm { margin-left: 6px; color: #ffd479; font-size: .8em; font-weight: 700; white-space: nowrap; } [data-look="retro"] .m .pinm { margin-left: 6px; color: #8a6d00; font-size: .86em; font-style: italic; white-space: nowrap; } /* the message sheet: who pinned it, and with four things to do (Reply, Copy, Edit, Pin), two rows of two */ .msheet .mprev .mpin { display: flex; align-items: center; gap: 5px; color: var(--dim); font-size: calc(13rem / 17); } .msheet .mprev .mpin .ic { width: 13px; height: 13px; stroke-width: 2.2; color: var(--accent); } .mact:has(> :nth-child(4)) { display: grid; grid-template-columns: 1fr 1fr; } /* every pin, newest first */ .pinlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pinsheet .fhit .fwho small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; } [data-look="clean"] .pinsheet .fhit, [data-look="fyi"] .pinsheet .fhit, [data-look="channel"] .pinsheet .fhit { background: var(--card2); } /* BANTOWN Night: "[Pinned] [Kbag]: words", a gold-edged line like the game's own notices */ [data-look="night"] .banners .bn.pin { background: rgba(18,22,36,.92); border-color: #a8905a; } [data-look="night"] .bn.pin .pinj > .ic { color: #ffd479; } [data-look="night"] .bn.pin .pinw { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-sub)/1.4 var(--sys); text-shadow: 0 1px 0 #000; } [data-look="night"] .bn.pin .pinl { font: inherit; color: #ffd479; } [data-look="night"] .bn.pin .pinb { display: inline; font: inherit; overflow: visible; } [data-look="night"] .bn.pin .pinn { font-weight: 800; } [data-look="night"] .bn.pin .pint { color: #e9e6dc; } [data-look="night"] .msheet .mprev .mpin .ic { color: #ffd479; } /* 2006 Retro: a pale yellow info bar, with "All" as a blue link */ [data-look="retro"] .banners .bn.pin { padding: 0 4px 0 0; background: #fff7c2; border: 1px solid #e3c34b; color: #3a2a00; } [data-look="retro"] .bn.pin .pinj { min-height: 44px; gap: 8px; padding: 4px 4px 4px 10px; } [data-look="retro"] .bn.pin .pinj > .ic { width: 16px; height: 16px; color: #8a6d00; } [data-look="retro"] .bn.pin .pinw { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 calc(12rem / 17)/1.35 var(--font); } [data-look="retro"] .bn.pin .pinl { font: inherit; font-weight: 700; color: #3a2a00; } [data-look="retro"] .bn.pin .pinb { display: inline; font: inherit; overflow: visible; } [data-look="retro"] .bn.pin .pinn { color: #0018c8; } [data-look="retro"] .bn.pin .pinall { padding: 4px 6px; border: 0; background: none; color: #0018c8; text-decoration: underline; text-shadow: none; font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] .msheet .mprev .mpin .ic { color: #8a6d00; } /* Glass: frosted, like the rest of the line over the chat */ [data-look="glass"] .bn.pin { background: var(--w06); border: 1px solid var(--w10); } /* Channel: a quiet strip, like a channel's topic */ [data-look="channel"] .banners .bn.pin { border-radius: 12px; background: #16161a; border-color: #26262d; } [data-look="channel"] .m.pinned { background: rgba(246,223,154,.045); } /* Bold: a sticky-note yellow, thick edges */ [data-look="bold"] .banners .bn.pin { background: #fff1b8; } [data-look="bold"] .bn.pin .pinl { color: #a63c0c; font-weight: 800; } [data-look="bold"] .bn.pin .pinj > .ic { color: var(--ink); } [data-look="bold"] .m .pinm { color: var(--dim); font-weight: 700; } [data-look="bold"] .m .pinm .ic { color: #a63c0c; } /* ================================================================ To answer (effortless, pass 3; Zbo, Nov 3; canvas row 19, chat.js dueBar): a slim strip in the line over a chat with an open poll or a raid event coming up that he hasn't answered: "To answer · 2", then what they are, in their own words; each tap goes to the next one. Every look draws it its own way, in the same place. */ .bn.due { width: 100%; gap: 10px; min-height: 48px; padding: 4px 10px 4px 14px; background: var(--card); border: 1px solid var(--line); color: var(--fg); } .bn.due > .ic { width: 19px; height: 19px; color: var(--accent); } .bn.due .dueh { flex: none; font: 700 var(--fs-sub)/calc(20rem / 17) var(--font); color: var(--accent); white-space: nowrap; } .bn.due .duew { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sub); line-height: calc(20rem / 17); unicode-bidi: isolate; } .bn.due > .ic.duec { width: 16px; height: 16px; color: var(--dim); } /* BANTOWN Night: the game's quest tracker, gold on the dark glass: "[To answer · 2] Launch night" */ [data-look="night"] .banners .bn.due { background: rgba(18,22,36,.92); border-color: #a8905a; font: 600 var(--fs-sub)/1.4 var(--sys); text-shadow: 0 1px 0 #000; } [data-look="night"] .bn.due > .ic, [data-look="night"] .bn.due .dueh { color: #ffd479; } [data-look="night"] .bn.due .dueh { font: 700 var(--fs-lab)/calc(20rem / 17) 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase; } [data-look="night"] .bn.due .duew { color: #e9e6dc; } [data-look="night"] .bn.due > .ic.duec { color: #a8905a; } /* 2006 Retro: the IM window's pale yellow notice, its count in bold */ [data-look="retro"] .banners .bn.due { padding: 4px 8px 4px 10px; gap: 8px; background: #fff7c2; border: 1px solid #e3c34b; color: #3a2a00; } [data-look="retro"] .bn.due > .ic { width: 16px; height: 16px; color: #8a6d00; } [data-look="retro"] .bn.due .dueh { font: 700 calc(12rem / 17)/1.35 var(--font); color: #3a2a00; } [data-look="retro"] .bn.due .duew { font: 400 calc(12rem / 17)/1.35 var(--font); color: #3a2a00; } [data-look="retro"] .bn.due > .ic.duec { width: 14px; height: 14px; color: #8a6d00; } /* Glass: frosted, like the rest of the line over the chat */ [data-look="glass"] .bn.due { background: var(--w06); border: 1px solid var(--w10); } /* Channel: Slack's quiet strip, its label in the accent */ [data-look="channel"] .banners .bn.due { border-radius: 12px; background: #16161a; border-color: #26262d; } /* Bold: an ink card, its count in the ink-dark orange */ [data-look="bold"] .banners .bn.due { background: var(--card); } [data-look="bold"] .bn.due > .ic { color: var(--ink); } [data-look="bold"] .bn.due .dueh { color: #a63c0c; font-weight: 800; } [data-look="bold"] .bn.due > .ic.duec { color: var(--ink); } /* BANTOWN.fyi: the site's panel, its label in spaced mono capitals and signal blue */ [data-look="fyi"] .bn.due { border-color: var(--line2); } [data-look="fyi"] .bn.due .dueh { font: 700 var(--fs-mono)/calc(16rem / 17) var(--mono); letter-spacing: .1em; text-transform: uppercase; } /* ================================================================ While you were away (effortless, pass 6; Zbo, Nov 3; canvas row 19, E4Catchup and E4Channel; chat.js `awayCard`): after time away, a card at the "New messages" line: what's for him in what came in (decisions locked, raid events to answer, mentions and replies, photos, new polls), a row each, each a tap to it. Every look draws it its own way, in the same place; Channel calls it Catch up, as Slack does. A row's second line (the Bags' own words: questions, names) wraps, never cut short. */ .away { align-self: stretch; margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--fg); overflow: hidden; } .awh { padding: 10px 14px 8px; font: 500 var(--fs-sub)/1.35 var(--sys); color: var(--dim); } .awh b { color: var(--accent); font-weight: 700; } .awh span, .aws { unicode-bidi: isolate; } .awr { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px 6px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; } .awr.prs, .awr:focus-visible { background: var(--prs); outline: none; } .awl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .awk { font: 600 var(--fs-body)/1.3 var(--sys); } .aws { font: 400 var(--fs-sub)/1.35 var(--sys); color: var(--dim); overflow-wrap: anywhere; } .awr > .ic.awc { flex: none; width: 16px; height: 16px; color: var(--dim); } /* BANTOWN Night: the game's quest log, gold on the dark glass */ [data-look="night"] .away { border-color: #a8905a; border-radius: 6px; background: rgba(18,22,36,.92); text-shadow: 0 1px 0 #000; } [data-look="night"] .awh { color: #c9c3b2; } [data-look="night"] .awh b { font: 700 var(--fs-lab)/1.35 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase; color: #ffd479; } [data-look="night"] .awr { border-top-color: #3a3424; color: #e9e6dc; } [data-look="night"] .awr.prs, [data-look="night"] .awr:focus-visible { background: linear-gradient(90deg, rgba(120,150,255,.38), rgba(120,150,255,.06)); } [data-look="night"] .aws { color: #c9c3b2; } [data-look="night"] .awr > .ic.awc { color: #a8905a; } /* 2006 Retro: the IM window's pale yellow notice, like To answer */ [data-look="retro"] .away { margin: 8px 0 4px; border-color: #e3c34b; border-radius: 0; background: #fff7c2; color: #3a2a00; } [data-look="retro"] .awh { padding: 4px 8px; font: 400 calc(12rem / 17)/1.35 var(--font); color: #3a2a00; } [data-look="retro"] .awh b { color: #3a2a00; } [data-look="retro"] .awr { min-height: 44px; gap: 8px; padding: 2px 8px; border-top-color: #e3c34b; } [data-look="retro"] .awr.prs, [data-look="retro"] .awr:focus-visible { background: #316ac5; color: #fff; } [data-look="retro"] .awr.prs :is(.aws, .ic), [data-look="retro"] .awr:focus-visible :is(.aws, .ic) { color: #fff; } [data-look="retro"] .awk { font: 700 calc(12rem / 17)/1.35 var(--font); } [data-look="retro"] .aws { font: 400 calc(11rem / 17)/1.35 var(--font); color: #574710; } [data-look="retro"] .awr > .ic.awc { width: 14px; height: 14px; color: #8a6d00; } /* Glass: frosted, like the line over the chat */ [data-look="glass"] .away { border-color: var(--w10); border-radius: 18px; background: var(--w06); } [data-look="glass"] .awr { border-top-color: var(--w09); } /* Channel: Slack's Catch up, each row's words on one line where they fit */ [data-look="channel"] .away { margin: 12px 12px 4px; border-color: #2a2a31; border-radius: 10px; background: #16161a; } [data-look="channel"] .awh b { color: var(--fg); font-weight: 800; } [data-look="channel"] .awr { min-height: 44px; padding: 4px 12px; border-top-color: #222228; } [data-look="channel"] .awl { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; } [data-look="channel"] .awk { font: 700 var(--fs-sub)/1.35 var(--sys); } /* Bold: an ink card, its name in the ink-dark orange */ [data-look="bold"] .away { border: 2px solid var(--ink); border-radius: 18px; background: var(--card); color: var(--ink); } [data-look="bold"] .awh b { color: #a63c0c; font-weight: 800; } [data-look="bold"] .awr { border-top: 2px solid var(--ink); } [data-look="bold"] .awk { font-weight: 800; } [data-look="bold"] .awr > .ic.awc { color: var(--ink); } /* BANTOWN.fyi: the site's panel, its name in spaced mono capitals and signal blue */ [data-look="fyi"] .away { border-color: var(--line2); border-radius: 0; } [data-look="fyi"] .awh { padding: 10px 12px 6px; font: 500 var(--fs-mono)/1.35 var(--mono); letter-spacing: .03em; } [data-look="fyi"] .awh b { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } [data-look="fyi"] .awr { min-height: 46px; padding: 6px 12px; } [data-look="fyi"] .awr > .ic.awc { color: var(--faint); } /* a raid event's time on this phone's own clock, under its Pacific time (effortless, pass 6; chat.js `raidCard`) */ .rvw + .rvy { margin-top: -10px; } [data-look="retro"] .rvw + .rvy { margin-top: -4px; } /* ================================================================ Home (home.js), every look: every chat on one screen (Clean, Glass and Bold as rows, Channel a sidebar, Night the game's social window, Retro a buddy list), your face for Me; and Back to Home on every screen opened from it */ .home .hhd { flex: none; display: flex; align-items: center; gap: 12px; padding: calc(8px + var(--sat)) var(--gut) 8px; } .home .htl { flex: 1; min-width: 0; margin: 0; font: 700 var(--fs-title)/1.2 var(--title); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hme { position: relative; flex: none; width: 44px; height: 44px; border-radius: 22px; } .hface { position: relative; width: 100%; height: 100%; border-radius: inherit; display: flex; align-items: center; justify-content: center; font: 700 18px var(--sys); font-style: normal; color: #16161a; } .hbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(24px + var(--sab)); } .hnotes:empty { display: none; } .hnote { display: flex; align-items: center; gap: 10px; width: calc(100% - 2 * var(--gut)); margin: 4px var(--gut) 6px; min-height: 52px; padding: 10px 12px 10px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--accent); color: var(--fg); text-align: left; font-size: var(--fs-sub); line-height: 1.35; } .hnote > .ic:first-child { width: 20px; height: 20px; color: var(--accent); } .hnote > span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .hnote > .ic:last-child { width: 16px; height: 16px; color: var(--dim); stroke-width: 2.4; } .hnote.warn { background: #3a1818; border-color: #7a2a22; color: #ffb3a8; } .hnote.warn > .ic:first-child { color: #ff8a7a; } .hsec { padding: 20px var(--gut) 4px; font: 600 var(--fs-foot)/calc(18rem / 17) var(--sys); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } .hrow { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 72px; padding: 0 var(--gut); text-align: left; } .hav { position: relative; flex: none; width: 52px; height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; } .hav .hface { font-size: 20px; } .hav.hone.here::after { content: ''; position: absolute; right: -1px; bottom: -1px; z-index: 1; width: 13px; height: 13px; border-radius: 7px; background: #3ee27f; border: 2.5px solid var(--bg); } .hgrp { background: var(--card2); } .hgrp .hmini { position: absolute; width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 700 11px var(--sys); font-style: normal; color: #16161a; border: 2px solid var(--bg); } .hgrp .hmini:nth-child(1) { left: 0; top: 0; } .hgrp .hmini:nth-child(2) { right: 0; top: 0; } .hgrp .hmini:nth-child(3) { left: 0; bottom: 0; } .hgrp .hmini:nth-child(4) { right: 0; bottom: 0; } .hgrp .hmini:only-child { position: static; width: 100%; height: 100%; border-radius: 26px; border: 0; font-size: 20px; } .hgrp .hmini:first-child:nth-last-child(2), .hgrp .hmini:first-child:nth-last-child(2) ~ .hmini { top: 13px; } .hgrp .hmini:first-child:nth-last-child(3) ~ .hmini:nth-child(3) { left: 13px; } .htile { border-radius: 15px; background: var(--card2); color: var(--dim); } .htile .ic { width: 26px; height: 26px; } .htx { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line); } .hrow:last-child .htx, .hrow:has(+ .hsec) .htx { border-bottom: 0; } .htop { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .hnm { flex: 1; min-width: 0; font: 600 var(--fs-body)/calc(22rem / 17) var(--sys); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; } .htm { flex: none; font-size: calc(14rem / 17); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .hchip { flex: none; font-size: var(--fs-lab); font-weight: 600; line-height: calc(18rem / 17); color: var(--dim); border: 1px solid var(--line); border-radius: 7px; padding: 0 6px; white-space: nowrap; } .hsub { display: flex; align-items: center; gap: 10px; min-width: 0; } .hpv { flex: 1; min-width: 0; font-size: var(--fs-sub); line-height: calc(20rem / 17); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hpv b { color: var(--fg); font-weight: 600; } .hpv b, .hpv span, .hl2 { unicode-bidi: isolate; } .hpv.hhi { font-style: italic; } .hcnt { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: var(--btn-fg); font: 700 calc(13rem / 17)/calc(22rem / 17) var(--sys); text-align: center; } .hdot { flex: none; width: 11px; height: 11px; border-radius: 6px; background: var(--accent); } .hrow.unread .hnm { font-weight: 700; } .hrow.unread .hpv { color: var(--fg); } /* Glass: frosted rows on the glow */ [data-look="glass"] .hgrp { background: #1d1d24; } [data-look="glass"] .hgrp .hmini { border-color: #15151b; } [data-look="glass"] .htx { border-bottom-color: var(--w07); } [data-look="glass"] .htile { background: #1d1d24; color: #a9a9b4; box-shadow: inset 0 0 0 1px var(--w10); } [data-look="glass"] .hav.hone.here::after { border-color: #0b0b10; } [data-look="glass"] .hchip { border-color: var(--w14); } [data-look="glass"] .hnote:not(.warn) { background: var(--w06); border-color: rgba(239,207,122,.45); } /* Bold: each chat a card in ink */ [data-look="bold"] .home .htl { font-size: calc(1rem + 23px); font-weight: 900; letter-spacing: -.045em; } [data-look="bold"] .hme { border: 2px solid var(--ink); } [data-look="bold"] .hme .hface { color: var(--ink); font-weight: 900; } [data-look="bold"] .hrow { width: calc(100% - 32px); min-height: 70px; margin: 0 16px 10px; padding: 8px 12px; gap: 12px; border: 2px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .htx { padding: 0; border-bottom: 0; } [data-look="bold"] .hav { width: 46px; height: 46px; border-radius: 23px; border: 2px solid var(--ink); } [data-look="bold"] .hav .hface { color: var(--ink); font-weight: 900; font-size: 19px; } [data-look="bold"] .hav.hone.here::after { right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 8px; border: 2px solid var(--ink); background: #35d072; } [data-look="bold"] .hword { background: #ffd35a; color: var(--ink); font: 900 calc(12rem / 17) var(--sys); } [data-look="bold"] .htile { border-radius: 12px; background: #ece5d6; color: var(--ink); } [data-look="bold"] .hnm { font-weight: 800; } [data-look="bold"] .htm { font-size: calc(13rem / 17); font-weight: 600; color: var(--dim); } [data-look="bold"] .hpv { font-size: var(--fs-sub); font-weight: 600; color: var(--dim); } [data-look="bold"] .hpv b, [data-look="bold"] .hrow.unread .hpv { color: var(--ink); } [data-look="bold"] .hsec { padding: 8px 18px 6px; font-weight: 800; letter-spacing: .08em; color: var(--ink); } [data-look="bold"] .hcnt { min-width: 26px; height: 26px; border: 2px solid var(--ink); background: #ff7a45; color: var(--ink); font: 800 var(--fs-lab)/calc(22rem / 17) var(--sys); } [data-look="bold"] .hdot { width: 15px; height: 15px; border-radius: 8px; border: 2px solid var(--ink); background: #ff7a45; } [data-look="bold"] .hchip { border: 2px solid var(--ink); color: var(--ink); font-weight: 700; } [data-look="bold"] .hnote { border: 2px solid var(--ink); background: #fff3c4; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .hnote > .ic:first-child { color: var(--ink); } [data-look="bold"] .hnote.warn { background: #ffd9cf; } /* Channel: a sidebar, the Slack way (no previews; bold with a count when there's something new) */ [data-look="channel"] .home .hhd { padding-bottom: 10px; border-bottom: 1px solid var(--line); } [data-look="channel"] .home .htl { font: 800 calc(1rem + 7px)/calc(30rem / 17) var(--sys); letter-spacing: -.01em; } [data-look="channel"] .hme { padding: 4px; border-radius: 13px; } [data-look="channel"] .hme .hface { border-radius: 9px; font-size: 15px; } [data-look="channel"] .hsec { padding: 18px var(--gut) 4px; font: 600 calc(15rem / 17)/calc(20rem / 17) var(--sys); letter-spacing: 0; text-transform: none; } [data-look="channel"] .hrow.hit { min-height: 44px; gap: 10px; font-size: 1rem; color: var(--dim); } [data-look="channel"] .hit .hnm { flex: 0 1 auto; font-weight: 400; color: inherit; } [data-look="channel"] .hit.unread { color: var(--fg); } [data-look="channel"] .hit.unread .hnm { font-weight: 700; } [data-look="channel"] .hhash { flex: none; width: 26px; text-align: center; font-size: calc(19rem / 17); line-height: calc(22rem / 17); color: var(--dim); } [data-look="channel"] .hit .hav { width: 26px; height: 26px; border-radius: 7px; } [data-look="channel"] .hit .hav .hface { font-size: 12px; } [data-look="channel"] .hit .hav.hone.here::after { right: -3px; bottom: -3px; width: 9px; height: 9px; border-width: 2px; } [data-look="channel"] .hit :is(.hcnt, .hdot) { margin-left: auto; } [data-look="channel"] .hit .hcnt { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: var(--fs-lab); line-height: calc(20rem / 17); } [data-look="channel"] .hit .hchip { font-weight: 500; border-color: #2a2a31; } [data-look="channel"] .hnote { border-radius: 12px; border-color: #3a3a42; } /* Night: the game's social window */ [data-look="night"] .home .cr .crest { width: 40px; height: 40px; display: block; } [data-look="night"] .home .htl { font: 700 calc(1rem + 7px)/calc(28rem / 17) 'Cinzel', serif; letter-spacing: .08em; color: #d8b25a; text-shadow: 0 0 14px rgba(242,193,78,.35); } [data-look="night"] .hme { border: 1px solid #d8b25a; } [data-look="night"] .hme .hface { font-weight: 800; } [data-look="night"] .hwin { margin: 10px 12px 0; padding: 10px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,6,12,.86); box-shadow: inset 0 0 30px rgba(0,0,0,.65); } [data-look="night"] .hwt { text-align: center; font: 700 calc(13rem / 17) 'Cinzel', serif; letter-spacing: .18em; color: #d8b25a; } [data-look="night"] .hlab { margin: 14px 0 2px; font: 700 var(--fs-lab)/1 'Cinzel', serif; letter-spacing: .1em; color: #a8905a; } [data-look="night"] .hrow.hln { display: block; min-height: 44px; padding: 6px 0; font: 600 calc(15rem / 17)/1.4 var(--sys); text-shadow: 0 1px 0 #000; } [data-look="night"] .hln.bags { color: #aaaaff; } [data-look="night"] .hln.dm { color: #d07ad0; } [data-look="night"] .hln.dm.unread { color: #ff80ff; } [data-look="night"] .hln.guild { color: #40ff40; } [data-look="night"] .hl1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-look="night"] .hl2 { display: block; font-size: var(--fs-sub); color: #8f8ca6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-look="night"] .hnew { float: right; margin: 2px 0 0 8px; padding: 1px 6px; border: 1px solid #d8b25a; border-radius: 4px; background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .08em; text-shadow: none; } [data-look="night"] .hln .hon { display: inline-block; width: 8px; height: 8px; margin-left: 7px; border-radius: 4px; background: #40ff40; box-shadow: 0 0 6px #40ff40; vertical-align: 1px; } [data-look="night"] .hnote { background: rgba(18,22,36,.92); border-color: #d8b25a; margin-top: 10px; width: calc(100% - 24px); margin-left: 12px; margin-right: 12px; } /* 2006 Retro: a buddy list window */ [data-look="retro"] .home .hhd { display: block; padding: var(--sat) 0 0; background: linear-gradient(var(--accent), var(--accent)) top / 100% var(--sat) no-repeat; } [data-look="retro"] .tbar .tbt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-look="retro"] .hme.hmerow { display: flex; align-items: center; gap: 8px; width: 100%; height: auto; min-height: 50px; padding: 6px 8px; border-radius: 0; font: 400 calc(12rem / 17) var(--font); text-align: left; } [data-look="retro"] .hsq { flex: none; width: 34px; height: 34px; border: 1px solid #6f8fc2; background: #fff; } [data-look="retro"] .hsq .hface { border-radius: 0; font: 700 15px var(--font); } [data-look="retro"] .hmn { display: flex; flex-direction: column; min-width: 0; } [data-look="retro"] .hmn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } [data-look="retro"] .hmn small { color: #2b8a2b; font-size: calc(11rem / 17); } [data-look="retro"] .hbody { padding-bottom: var(--sab); } [data-look="retro"] .hlst { margin: 2px 6px 6px; padding: 4px 0 8px; border: 1px solid #9fb6d8; background: #fff; font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] .hgh { padding: 6px 8px 2px; font: 700 calc(12rem / 17) var(--font); color: #1d3d7a; } [data-look="retro"] .hrow.hbd { min-height: 44px; gap: 6px; padding: 0 8px 0 18px; font: 400 calc(12rem / 17) var(--font); color: #000; } [data-look="retro"] .hbd.dm:not(.here):not(.unread) { color: #777; } [data-look="retro"] .hbd b, [data-look="retro"] .hbd > span { unicode-bidi: isolate; white-space: nowrap; } [data-look="retro"] .hbd .hon { flex: none; width: 8px; height: 8px; border-radius: 4px; background: radial-gradient(circle at 35% 35%, #eee, #999); } [data-look="retro"] .hbd.here .hon { background: radial-gradient(circle at 35% 35%, #c8ffb0, #2ea51b); } [data-look="retro"] .hbd .hcnt { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: #d00000; font: 700 calc(12rem / 17) var(--font); } [data-look="retro"] .hbd .hpv { flex: 1; min-width: 0; color: #666; font: italic 400 calc(12rem / 17) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; } [data-look="retro"] .hburst { flex: none; padding: 0 4px; border: 1px solid #d00000; background: #fff35a; color: #d00000; font: 700 var(--fs-lab) var(--font); transform: rotate(-4deg); } [data-look="retro"] .hne { color: #666; } [data-look="retro"] .hnote { width: calc(100% - 12px); min-height: 44px; margin: 6px 6px 2px; padding: 6px 10px; gap: 8px; border-radius: 0; border: 1px solid #e3c34b; background: #fff7c2; color: #3a2a00; font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] .hnote > .ic:first-child { width: 18px; height: 18px; color: #8a6d00; } [data-look="retro"] .hnote.warn { border-color: #d9381e; background: #ffe3de; color: #7a1200; } /* Back: a chevron and the name of where it goes ("‹ Home", "‹ Friends", "‹ Bags", "‹ Search"; Zbo, Nov 1), and what's new elsewhere as a count, at the left of every chat's header and every page's bar. A long name is cut short. Where the back button sits on its own at a header's left (.hback), the header keeps its title clear of it (--bkw: its width, util.js fitBack). */ .bk .bkl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } .dmback .bkl { max-width: 8.5em; } .pback .bkl { max-width: 9em; } .bk.bare .bkl { display: none; } /* (no room beside the title for the name: the arrow and the count, as iPhone does) */ [data-fam="clean"] :is(.chat, .guild) .hback { position: absolute; left: 6px; top: calc(12px + var(--sat)); z-index: 2; } [data-fam="clean"] .guild .hd { padding-left: max(52px, calc(var(--bkw, 40px) + 12px)); padding-right: max(52px, calc(var(--bkw, 40px) + 12px)); } [data-look="channel"] :is(.chat:not(.dm), .guild) .hd { padding-left: max(56px, calc(var(--bkw, 40px) + 14px)); padding-right: 52px; } [data-look="channel"] .dmback { color: #d6d6dd; font-size: calc(16 * var(--hr) / 17); } [data-look="channel"] :is(.chat, .guild) .hback { left: 6px; top: calc(9px + var(--sat)); } [data-look="bold"] :is(.chat:not(.dm), .guild) .hd { padding-left: max(64px, calc(var(--bkw, 42px) + 20px)); } [data-look="bold"] :is(.chat, .guild) .hback { left: 10px; top: calc(11px + var(--sat)); } [data-look="retro"] .tbar .dmback { width: auto; height: 22px; gap: 1px; margin-right: 6px; padding: 0 7px 0 3px; border: 1px solid #16357a; border-radius: 5px; background: linear-gradient(#ffffff, #c4d2ea); color: #1d3d7a; font: 700 calc(11 * var(--hr) / 17) var(--font); text-shadow: none; } [data-look="retro"] .tbar .dmback .ic { width: 13px; height: 13px; stroke-width: 2.8; } .pback { position: absolute; left: 4px; bottom: 0; z-index: 1; max-width: 48%; height: 44px; display: flex; align-items: center; gap: 1px; padding: 0 10px 0 2px; color: var(--accent); font: 400 var(--fs-bar) var(--sys); } .pback .ic { width: 26px; height: 26px; stroke-width: 2.2; } [data-look="night"] .pback { color: #ffd479; font-family: 'Cinzel', serif; letter-spacing: .04em; } [data-look="bold"] .pback { color: var(--ink); font-weight: 700; } [data-look="retro"] .hd.page .pback { position: relative; height: 26px; margin-right: 10px; padding: 0 8px 0 3px; border: 1px solid #13285a; border-radius: 5px; background: linear-gradient(#ffffff, #c4d2ea); color: #1d3d7a; font: 700 calc(12 * var(--hr) / 17) var(--font); } [data-look="retro"] .hd.page .pback::before { content: ''; position: absolute; inset: min(0px, calc((100% - 44px) / 2)) -4px; } [data-look="retro"] .hd.page .pback .ic { width: 15px; height: 15px; stroke-width: 2.8; } /* Me → Open Bag Chat on: one of three, ticked */ .sopt .ic.sck { flex: none; width: 20px; height: 20px; color: var(--accent); stroke-width: 2.6; } [data-look="bold"] .sopt .ic.sck { color: var(--ink); stroke-width: 3; } [data-look="retro"] .sopt .ic.sck { color: #1f8f3a; } /* ================================================================ a chat's header and details (Zbo, Oct 31: the Slack and iMessage hybrid). The header is one tap: the Bags' faces and "Bags ›" (a one-to-one chat: his face and name). It opens the chat's details over the chat: the faces and who can read it, Search and Pins, who's in it (each with Message), and safety (the handshake, the safety codes). Every look draws both its own way. */ .chd { position: relative; display: flex; align-items: center; min-width: 0; min-height: 44px; color: var(--fg); text-align: left; } .chf { flex: none; display: flex; } .chf > i { position: relative; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; color: #16161a; } .cht { display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; } .cht b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } .cht .chv { flex: none; width: 14px; height: 14px; stroke-width: 2.6; color: var(--dim); } .chs { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; color: var(--dim); } .chs > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chi { display: none; } /* Clean and Glass: the iPhone way, centered (the faces, the name under them, small) */ [data-fam="clean"] .chat .chd { flex-direction: column; justify-content: center; gap: 3px; padding: 0 6px; } [data-fam="clean"] .chat .chf > i { width: 30px; height: 30px; margin-left: -9px; border-radius: 15px; border: 2px solid var(--bg); font: 700 12.5px var(--sys); } [data-fam="clean"] .chat .chf > i:first-child { margin-left: 0; } [data-fam="clean"] .chat .chf.one > i { width: 38px; height: 38px; border: 0; border-radius: 19px; font-size: 16px; } [data-fam="clean"] .chat .chf.one > i.on::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 6px; background: #3ee27f; border: 2px solid var(--bg); } [data-fam="clean"] .chat .cht b { font: 600 calc(13 * var(--hr) / 17)/var(--hr) var(--sys); } [data-fam="clean"] .chat .cht .chv { width: 12px; height: 12px; } :is([data-look="clean"], [data-look="fyi"], [data-look="glass"]) .chat.dm .hd { justify-content: center; padding: calc(10px + var(--sat)) max(52px, calc(var(--bkw, 40px) + 12px)) 12px; } :is([data-look="clean"], [data-look="fyi"], [data-look="glass"]) .chat .hback { top: calc(50% + var(--sat) / 2 - 1px); transform: translateY(-50%); } [data-look="glass"] .chat .chf > i, [data-look="glass"] .chat .chf.one > i.on::after { border-color: rgba(16,16,22,.95); } /* Channel: Slack's "# bags ›", with the faces and who's here under it */ :is([data-look="channel"], [data-look="bold"]) .chat .chd { padding: 0; } :is([data-look="channel"], [data-look="bold"]) .chat.dm .chd { flex-direction: row; justify-content: flex-start; gap: 10px; } [data-look="channel"] .chat.dm .cht b { font: 700 calc(20 * var(--hr) / 17)/calc(24 * var(--hr) / 17) var(--sys); letter-spacing: -.01em; } [data-look="bold"] .chat.dm .cht b { font: 900 calc(var(--hr) + 9px)/calc(30 * var(--hr) / 17) var(--sys); letter-spacing: -.04em; color: var(--ink); } [data-look="channel"] .chat:not(.dm) .chd { flex-direction: column; align-items: flex-start; gap: 2px; } [data-look="channel"] .chat:not(.dm) .cht b { font: 700 calc(22 * var(--hr) / 17)/calc(28 * var(--hr) / 17) var(--sys); letter-spacing: -.015em; } [data-look="channel"] .chat .chh { flex: none; margin-right: 4px; font: 400 calc(22 * var(--hr) / 17)/calc(28 * var(--hr) / 17) var(--sys); color: var(--dim); } [data-look="channel"] .chat .cht .chv { width: 16px; height: 16px; } [data-look="channel"] .chat .chs { font: 500 calc(13 * var(--hr) / 17)/calc(18 * var(--hr) / 17) var(--sys); } [data-look="channel"] .chat .chf > i { width: 20px; height: 20px; margin-left: -4px; border-radius: 6px; border: 2px solid var(--bg); font: 700 9.5px var(--sys); } [data-look="channel"] .chat .chf > i:first-child { margin-left: 0; } /* Bold: the name loud, the faces as stickers under it */ [data-look="bold"] .chat:not(.dm) .hd { padding-right: 18px; padding-bottom: 12px; } [data-look="bold"] .chat:not(.dm) .chd { flex-direction: column; align-items: flex-start; gap: 6px; } [data-look="bold"] .chat:not(.dm) .cht b { font: 900 calc(var(--hr) + 17px)/calc(40 * var(--hr) / 17) var(--sys); letter-spacing: -.045em; color: var(--ink); } [data-look="bold"] .chat .cht .chv { width: 20px; height: 20px; stroke-width: 3.2; color: var(--ink); } [data-look="bold"] .chat .chs { gap: 10px; font: 700 13px/18px var(--sys); color: var(--dim); } /* (its size at any text size: beside the faces there is no more room, effortless pass 5) */ [data-look="bold"] .chat .chf > i { width: 30px; height: 30px; margin-left: -8px; border-radius: 15px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font: 900 13px var(--sys); } [data-look="bold"] .chat .chf > i:first-child { margin-left: 0; } /* Night: the party's frame (its name in gold, each Bag's portrait, lit while he's online); a whisper in pink */ [data-look="night"] .chat .chd { flex: 1; min-width: 120px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; } [data-look="night"] .chat .cht b { font: 700 calc(var(--hr) + 7px)/calc(28 * var(--hr) / 17) 'Cinzel', serif; letter-spacing: .08em; color: #d8b25a; text-shadow: 0 0 14px rgba(242,193,78,.35); } [data-look="night"] .chat .cht b.wsp { font-size: calc(20 * var(--hr) / 17); line-height: calc(26 * var(--hr) / 17); letter-spacing: .04em; color: #ff80ff; text-shadow: 0 0 14px rgba(255,128,255,.35); } [data-look="night"] .chat .cht .chv { width: 16px; height: 16px; stroke-width: 2.4; color: #a8905a; } [data-look="night"] .chat.dm .cht .chv { color: #b97ab9; } [data-look="night"] .chat .chs { gap: 7px; font: 600 13px/16px var(--sys); letter-spacing: .06em; color: #a8905a; } /* (its size at any text size: the party frame has no more room beside Back and Whisper, effortless pass 5) */ [data-look="night"] .chat.dm .chs { color: #b97ab9; } [data-look="night"] .chat .chf > i { width: 20px; height: 20px; margin-left: -4px; border-radius: 10px; border: 1px solid #5a4a24; font: 800 9px var(--sys); filter: grayscale(.85) brightness(.6); } [data-look="night"] .chat .chf > i:first-child { margin-left: 0; } [data-look="night"] .chat .chf > i.on { border-color: #d8b25a; filter: none; box-shadow: 0 0 6px rgba(242,193,78,.45); } /* (the Bags' portraits step aside when they don't fit beside the count, which says it too: a wrapping row whose second line is out of sight, with room around it for the portraits' glow) */ [data-look="night"] .chat:not(.dm) .chs { flex-flow: row-reverse wrap; justify-content: flex-end; gap: 24px 7px; height: 32px; max-width: calc(100% + 12px); margin: -6px; padding: 6px; overflow: hidden; } [data-look="night"] .chat:not(.dm) .chs > span:last-child { order: -1; line-height: 20px; } /* Retro: a bar in the IM window (the buddy pictures, who's online, Info) */ [data-look="retro"] .imbar .chd { flex: 1; gap: 5px; min-height: 30px; font: 400 calc(11 * var(--hr) / 17) var(--font); color: #000; } [data-look="retro"] .imbar .chd::before { content: ''; position: absolute; inset: -7px -4px; } [data-look="retro"] .imbar .chd.prs { opacity: 1; background: #316ac5; color: #fff; } [data-look="retro"] .imbar .chf { gap: 2px; } [data-look="retro"] .imbar .chf > i { width: 16px; height: 16px; border: 1px solid #6f8fc2; border-radius: 0; font: 700 9px var(--font); } [data-look="retro"] .imbar .imn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; font-weight: 700; } [data-look="retro"] .imbar .chd .imsub { flex: none; } [data-look="retro"] .chi { display: inline; flex: none; margin-left: auto; padding-left: 8px; color: #0018c8; text-decoration: underline; font: 400 var(--fs-lab) var(--font); } [data-look="retro"] .imbar .chd.prs .chi { color: #fff; } /* the details, over the chat (a page of its own: "‹ Bags" goes back to the chat) */ .cdet { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .cdbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 28px; padding: 0 var(--gut) calc(36px + var(--sab)); } .cdhero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 6px; text-align: center; } .cdfaces { display: flex; padding-left: 14px; } .cdfaces > i { position: relative; flex: none; width: 56px; height: 56px; margin-left: -14px; border-radius: 28px; border: 3px solid var(--bg); display: flex; align-items: center; justify-content: center; font: 700 22px var(--sys); font-style: normal; color: #16161a; } .cdfaces.one { padding-left: 0; } .cdfaces.one > i { width: 80px; height: 80px; margin: 0; border: 0; border-radius: 40px; font-size: 32px; } .cdfaces.one > i.on::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; border-radius: 8px; background: #3ee27f; border: 3px solid var(--bg); } .cdname { max-width: 100%; margin-top: 6px; font: 700 calc(1rem + 7px)/1.2 var(--title); letter-spacing: -.01em; overflow-wrap: anywhere; unicode-bidi: isolate; } .cdsub { display: flex; align-items: center; gap: 5px; color: var(--dim); font-size: var(--fs-foot); line-height: 1.4; } .cdsub .ic { flex: none; width: 12px; height: 12px; stroke-width: 2.4; } .cdacts { display: flex; gap: 10px; margin-top: -10px; } .cdact { flex: 1; min-width: 0; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 14px; background: var(--card); color: var(--accent); font-size: calc(13rem / 17); font-weight: 600; } .cdact .ic { width: 22px; height: 22px; } .cdact span { color: var(--fg); } .cdet .bags .av { position: relative; } .cdet .bags .av.on::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 6px; background: #3ee27f; border: 2px solid var(--card); } .cdet .bags .av .dmdot { border-color: var(--card); } .cdet .bags li.gr { padding-right: 8px; } .cdmsg.btn.small { padding: 0 10px; background: none; color: var(--accent); font-weight: 600; } .cdet .bags .bagrow > .ic.gc { margin-left: auto; } /* the safety codes, each Bag's, as this phone has them */ .codes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .codes li { display: flex; align-items: center; gap: 12px; min-width: 0; } .codes .av { width: 36px; height: 36px; border-radius: 18px; font-size: 15px; } .codes .grow { gap: 2px; } .codes .grow b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } .codes .mc { font: 600 calc(15rem / 17)/1.35 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .04em; color: var(--fg); overflow-wrap: anywhere; } .hssheet .hs { color: var(--fg); } /* Glass: the glow under it, the bar frosting once the top has gone up under it */ [data-look="glass"] .cdet { background: var(--fade), radial-gradient(420px 340px at 8% 12%, rgba(246,223,154,.12), transparent 70%), radial-gradient(460px 420px at 104% 58%, rgba(191,231,224,.09), transparent 70%), radial-gradient(380px 320px at 30% 104%, rgba(220,207,244,.08), transparent 70%), var(--bg); } [data-look="glass"] .cdet > .hd.page { position: absolute; top: 0; left: 0; right: 0; } [data-look="glass"] .cdet.scrolled > .hd.page { background: var(--frost); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border-bottom-color: var(--w07); } [data-look="glass"] .cdbody { padding-top: calc(44px + var(--sat)); } [data-look="glass"] .cdfaces > i { border-color: #0b0b10; } [data-look="glass"] .cdact { background: var(--w07); box-shadow: inset 0 0 0 1px var(--w08); } [data-look="glass"] .cdet .bags .av.on::after, [data-look="glass"] .cdet .bags .av .dmdot { border-color: #17171d; } /* Channel: rounded squares, like its rows */ [data-look="channel"] .cdfaces > i { border-radius: 14px; } [data-look="channel"] .cdfaces.one > i { border-radius: 20px; } [data-look="channel"] .cdname { font-weight: 800; } [data-look="channel"] .cdact { border-radius: 12px; box-shadow: inset 0 0 0 1px #1e1e24; } /* Bold: ink and stickers */ [data-look="bold"] .cdfaces > i { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font-weight: 900; } [data-look="bold"] .cdfaces { padding-left: 12px; } [data-look="bold"] .cdfaces > i { margin-left: -12px; } [data-look="bold"] .cdfaces.one > i { margin: 0; border-width: 3px; box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .cdfaces.one > i.on::after { border: 2px solid var(--ink); background: #35d072; } [data-look="bold"] .cdname { font-size: calc(1rem + 15px); font-weight: 900; letter-spacing: -.045em; color: var(--ink); } [data-look="bold"] .cdsub { font-weight: 700; } [data-look="bold"] .cdact { border: 2px solid var(--ink); background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 800; } [data-look="bold"] .cdet .bags .av { border: 2px solid var(--ink); color: var(--ink); font-weight: 900; } [data-look="bold"] .cdet .bags .av.on::after { border: 2px solid var(--ink); background: #35d072; } [data-look="bold"] .cdmsg.btn.small { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } [data-look="bold"] .codes .av { border: 2px solid var(--ink); color: var(--ink); font-weight: 900; } /* Night: the throne room's cards; the party's name in gold, a whisper's in pink */ [data-look="night"] .cdet { background: var(--fade), radial-gradient(ellipse at 50% 0%, #1a1f33, #0b0d14 70%); } [data-look="night"] .cdfaces > i { border-color: #0f1220; box-shadow: 0 0 0 1px #d8b25a; } [data-look="night"] .cdname { font: 700 calc(1rem + 9px)/1.2 'Cinzel', serif; letter-spacing: .08em; color: #d8b25a; text-shadow: 0 0 16px rgba(242,193,78,.35); } [data-look="night"] .cdname.dm { color: #ff80ff; letter-spacing: .03em; text-shadow: 0 0 16px rgba(255,128,255,.35); } [data-look="night"] .cdsub { color: #a8905a; letter-spacing: .04em; } [data-look="night"] .cdact { background: rgba(18,22,36,.86); box-shadow: inset 0 0 0 1px #3a3424; color: #ffd479; } [data-look="night"] .cdact span { font-family: 'Cinzel', serif; letter-spacing: .06em; color: #e9e6dc; } [data-look="night"] .cdmsg.btn.small { color: #ff9cff; font-family: 'Cinzel', serif; letter-spacing: .06em; } [data-look="night"] .cdet .bags .av.on::after { border-color: #121624; } /* Retro: a Chat Info window (the buddy pictures, the name, two glossy buttons, the little windows under it) */ [data-look="retro"] .cdet { background: #d6dfee; } [data-look="retro"] .cdbody { gap: 10px; padding: 8px 6px calc(10px + var(--sab)); } [data-look="retro"] .cdhero { gap: 3px; padding: 10px 8px; border: 1px solid #6f8fc2; background: #fff; } [data-look="retro"] .cdfaces { gap: 3px; padding-left: 0; } [data-look="retro"] .cdfaces > i { width: 32px; height: 32px; margin: 0; border: 1px solid #6f8fc2; border-radius: 0; font: 700 14px var(--font); } [data-look="retro"] .cdfaces.one > i { width: 52px; height: 52px; font-size: 22px; } [data-look="retro"] .cdfaces.one > i.on::after { right: -4px; bottom: -4px; width: 12px; height: 12px; border: 1px solid #1f6e14; border-radius: 6px; background: radial-gradient(circle at 35% 35%, #c8ffb0, #2ea51b); } [data-look="retro"] .cdname { margin-top: 4px; font: 700 calc(15rem / 17) var(--font); letter-spacing: 0; } [data-look="retro"] .cdsub { font: 400 calc(11rem / 17) var(--font); color: #444; } [data-look="retro"] .cdacts { gap: 6px; margin-top: 0; } [data-look="retro"] .cdact { min-height: 44px; flex-direction: row; gap: 6px; border-radius: 6px; border: 1px solid #9fb2cf; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; font: 700 calc(12rem / 17) var(--font); } [data-look="retro"] .cdact .ic { width: 16px; height: 16px; } [data-look="retro"] .cdact span { color: #1d3d7a; } [data-look="retro"] .cdet .bags .av { border-radius: 0; border: 1px solid #6f8fc2; } [data-look="retro"] .cdet .bags .av.on::after { border: 1px solid #1f6e14; background: radial-gradient(circle at 35% 35%, #c8ffb0, #2ea51b); } [data-look="retro"] .cdmsg.btn.small { padding: 0 10px; border-color: #9fb2cf; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; text-shadow: none; font: 700 calc(11rem / 17) var(--font); } [data-look="retro"] .codes .av { border-radius: 0; border: 1px solid #6f8fc2; } [data-look="retro"] .codes .mc { font-size: calc(13rem / 17); } /* ================================================================ Home: search, every chat on this phone at once (the matches show in place of the chats; Cancel brings them back). Every look. */ .hsrch { display: flex; align-items: center; gap: 4px; margin: 2px var(--gut) 6px; } .hsf { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--w08); color: var(--dim); cursor: text; } .hsf > .ic { flex: none; width: 18px; height: 18px; } .hsf:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); } .hsin { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; outline: none; background: none; color: var(--fg); font: 400 1rem var(--sys); -webkit-appearance: none; appearance: none; } .hsin::placeholder { color: var(--dim); opacity: 1; } .hsin::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } .hsx { flex: none; min-width: 44px; min-height: 44px; padding: 0 4px 0 8px; color: var(--accent); font-size: 1rem; } .hfn { margin: 4px var(--gut) 2px; color: var(--dim); font-size: var(--fs-sub); line-height: 1.4; } .hhit { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 76px; padding: 0 var(--gut); text-align: left; } .hhit:last-child .htx { border-bottom: 0; } .hhit .hpv { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .hhit .hpv span { white-space: pre-wrap; } [data-look="glass"] .hsf { box-shadow: inset 0 0 0 1px var(--w06); } [data-look="glass"] .hsf:focus-within { box-shadow: inset 0 0 0 1.5px rgba(239,207,122,.7); } [data-look="glass"] .hhit .htx { border-bottom-color: var(--w07); } [data-look="channel"] .hsrch { margin-top: 10px; } [data-look="channel"] .hsf { border-radius: 8px; background: #16161a; box-shadow: inset 0 0 0 1px #2a2a31; } [data-look="channel"] .hhit .hav { border-radius: 12px; } [data-look="channel"] .hhit .hav .hface { border-radius: inherit; } [data-look="bold"] .hsrch { margin-bottom: 14px; } [data-look="bold"] .hsf { border: 2px solid var(--ink); background: var(--card); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); } [data-look="bold"] .hsf:focus-within { box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .hsin { color: var(--ink); font-weight: 600; } [data-look="bold"] .hsin::placeholder { color: var(--dim); } [data-look="bold"] .hsx { color: var(--ink); font-weight: 800; } [data-look="bold"] .hfn { margin: 6px 18px 8px; color: var(--ink); font-weight: 700; } [data-look="bold"] .hhit { width: calc(100% - 32px); min-height: 70px; margin: 0 16px 10px; padding: 8px 12px; gap: 12px; border: 2px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .hhit .htx { padding: 0; border-bottom: 0; } [data-look="night"] .hsrch { margin: 10px 12px 2px; } [data-look="night"] .hsf { border-radius: 8px; border: 1px solid #a8905a; background: rgba(4,6,12,.86); color: #a8905a; } [data-look="night"] .hsf:focus-within { box-shadow: 0 0 10px rgba(242,193,78,.3); } [data-look="night"] .hsin { color: #e9e6dc; } [data-look="night"] .hsin::placeholder { color: #8a7650; } [data-look="night"] .hsx { color: #ffd479; font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase; } [data-look="night"] .hres { margin: 8px 12px 0; padding: 8px 14px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,6,12,.86); box-shadow: inset 0 0 30px rgba(0,0,0,.65); } [data-look="night"] .hfn { margin: 0 0 4px; color: #8a7650; font-size: var(--fs-sub); } [data-look="night"] .hhit { min-height: 52px; padding: 6px 0; gap: 0; text-shadow: 0 1px 0 #000; } [data-look="night"] .hhit .hav { display: none; } [data-look="night"] .hhit .htx { padding: 2px 0 6px; border-bottom: 1px solid rgba(216,178,90,.14); } [data-look="night"] .hhit .hnm { font: 700 calc(15rem / 17)/1.35 var(--sys); } [data-look="night"] .hhit.bags .hnm { color: #aaaaff; } [data-look="night"] .hhit.dm .hnm { color: #ff80ff; } [data-look="night"] .hhit.guild .hnm { color: #40ff40; } [data-look="night"] .hhit .htm { color: #8a7650; font-size: var(--fs-foot); } [data-look="night"] .hhit .hpv { color: #c9c6d8; font: 600 var(--fs-sub)/1.4 var(--sys); } [data-look="night"] .hhit .hpv b { color: #e9e6dc; } [data-look="night"] .hhit .hchip { border-color: #2e8a2e; color: #40ff40; } [data-look="retro"] .hsrch { margin: 4px 6px 2px; gap: 2px; } [data-look="retro"] .hsf { padding: 0 6px; border-radius: 0; border: 2px solid; border-color: #8a9bb8 #e8eef8 #e8eef8 #8a9bb8; background: #fff; color: #23458c; } [data-look="retro"] .hsf:focus-within { box-shadow: none; outline: 1px dotted #23458c; outline-offset: 1px; } [data-look="retro"] .hsin { font: 400 calc(16rem / 17) var(--font); color: #000; } [data-look="retro"] .hsin::placeholder { color: #777; } [data-look="retro"] .hsx { color: #0018c8; text-decoration: underline; font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] .hres { margin: 2px 6px 6px; padding: 4px 0 6px; border: 1px solid #9fb6d8; background: #fff; } [data-look="retro"] .hfn { margin: 2px 8px 4px; color: #1d3d7a; font: 700 calc(12rem / 17) var(--font); } [data-look="retro"] .hhit { min-height: 44px; gap: 0; padding: 0 8px; font: 400 calc(12rem / 17) var(--font); color: #000; } [data-look="retro"] .hhit .hav { display: none; } [data-look="retro"] .hhit .htx { gap: 1px; padding: 4px 0; border-bottom: 1px solid #e3e9f3; } [data-look="retro"] .hhit .hnm { font: 700 calc(12rem / 17) var(--font); color: #0018c8; } [data-look="retro"] .hhit .htm { font: 400 calc(11rem / 17) var(--font); color: #555; } [data-look="retro"] .hhit .hpv { font: 400 calc(12rem / 17)/1.35 var(--font); color: #333; } [data-look="retro"] .hhit .hpv b { color: #000; font-weight: 700; } [data-look="retro"] .hhit .hchip { border-radius: 0; border-color: #e3c34b; background: #fff7c2; color: #7a1200; font: 400 var(--fs-lab) var(--font); } /* ================================================================ getting around (Zbo, Nov 2; the canvas, rows 14 and 15; main.js, home.js, nav.js): what's tapped often sits at the bottom, by the thumb, and the top holds what you read. B, the default (): a bar at the bottom with Chats, Hub, Friends and Me, each a place of its own, and a round Search beside it that brings Home's search box up at the bottom in its place. It floats over the page (the page keeps room under its last row: --barh), steps aside in a chat, stays still while a page slides over the place it belongs to (`.navkeep`), and the keyboard covers it as on iPhone. A (data-nav="home", Me → Getting around): Home is the hub, with its own bar at its bottom (`.hdock`): the search box, Friends, New message and your face (Me); typing in the box, the three step aside for Cancel (`.hdtyping`). Every tap at least 44 pt; each look draws both its own way (the canvas, NavLooks): Clean, Glass and Bold float a pill, BANTOWN.fyi, Retro and Channel run a bar edge to edge, Night a panel of the game. */ :root { --barb: max(12px, calc(var(--sab) - 8px)); --barh: calc(70px + var(--barb)); } .tabbar { position: absolute; left: 12px; right: 12px; bottom: var(--barb); z-index: 2; display: flex; align-items: center; gap: 10px; } .screens > .tabbar.navkeep { z-index: 4; } .kb:not(.wide) .tabbar { display: none; } /* (as on iPhone; an iPad's rail stays: pass 3) */ .tbs { flex: 1; min-width: 0; display: flex; height: 62px; padding: 4px; border-radius: 31px; background: rgba(30,30,35,.92); border: 1px solid var(--w08); box-shadow: 0 10px 30px rgba(0,0,0,.4); } .tab { position: relative; flex: 1; min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 27px; color: #c9c9d1; font: 600 var(--fs-lab)/1.15 var(--sys); } .tab .ic { width: 25px; height: 25px; } .tabbar :is(.tab, .tsrch)::before { content: ''; position: absolute; inset: min(0px, calc((100% - 48px) / 2)); } /* (the bar's places: 48 pt, effortless T5) */ .tab .tl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab.on { color: var(--accent); background: var(--w08); } .tbf { position: relative; flex: none; width: 26px; height: 26px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font: 700 12px var(--sys); font-style: normal; color: #16161a; } .tab.on .tbf { box-shadow: 0 0 0 2px var(--accent); } .tbn { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; min-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--btn-fg); font: 700 var(--fs-lab)/1.38 var(--sys); font-style: normal; text-align: center; } .tbd { position: absolute; top: 8px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 5px; background: var(--accent); } .tsrch { position: relative; flex: none; width: 62px; height: 62px; border-radius: 31px; display: flex; align-items: center; justify-content: center; background: rgba(30,30,35,.92); border: 1px solid var(--w08); color: var(--fg); box-shadow: 0 10px 30px rgba(0,0,0,.4); } .tsrch .ic { width: 24px; height: 24px; } /* the room a page keeps under its last row for the bar (B) */ [data-nav="bar"] .screen:not(.chat):not(.guild) :is(.me-body, .fr-body) { padding-bottom: calc(16px + var(--barh)); } [data-nav="bar"] .home .hbody { padding-bottom: calc(16px + var(--barh)); } [data-nav="bar"] .home.seeking .hbody { padding-bottom: 16px; } /* Home's bottom: A's bar (the search box, Friends, New message, your face), and B's search box while it's up */ .hdock { flex: none; padding: 6px 12px var(--barb); } .kb .hdock { padding-bottom: 6px; } [data-nav="bar"] .home:not(.seeking) .hdock { display: none; } .hdin { display: flex; align-items: center; gap: 6px; min-height: 62px; padding: 5px; border-radius: 31px; background: rgba(30,30,35,.92); border: 1px solid var(--w08); box-shadow: 0 10px 30px rgba(0,0,0,.35); } .hdock .hsrch { flex: 1; min-width: 0; margin: 0; } .hdock .hsf { min-height: 50px; border-radius: 25px; } .hdock .hsx { padding: 0 10px 0 6px; } .hdbtns { flex: none; display: flex; gap: 6px; } .hdbtns :is(.hbtn, .hme) { width: 50px; height: 50px; border-radius: 25px; } .hdbtns .hbtn { background: var(--w08); } .hdock.hdtyping .hdbtns { display: none; } [data-nav="home"] .home .hbody { padding-bottom: 12px; } @media (prefers-reduced-motion: no-preference) { [data-look] :where(.tsrch).prs { transform: scale(.96); } } /* Glass: frosted, over the glow */ [data-look="glass"] :is(.tbs, .tsrch, .hdin) { background: rgba(28,28,35,.74); border-color: var(--w10); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); } [data-look="glass"] .tab.on { background: var(--w11); } [data-look="glass"] .hdbtns .hbtn { background: var(--w09); } /* Bold: an ink card, the place you're in a yellow sticker */ [data-look="bold"] :is(.tbs, .tsrch, .hdin) { background: var(--card); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .tab { color: var(--ink); font-weight: 800; } [data-look="bold"] .tab.on { background: #ffd35a; box-shadow: inset 0 0 0 2px var(--ink); } [data-look="bold"] .tbf { border: 2px solid var(--ink); color: var(--ink); font-weight: 900; } [data-look="bold"] .tab.on .tbf { box-shadow: none; } [data-look="bold"] :is(.tbn, .tbd) { border: 2px solid var(--ink); background: #ff7a45; color: var(--ink); } [data-look="bold"] .tbn { line-height: 1.08; } [data-look="bold"] .tsrch { color: var(--ink); } [data-look="bold"] .tsrch .ic { stroke-width: 2.3; } [data-look="bold"] .hdbtns .hbtn { border: 2px solid var(--ink); background: var(--card); } [data-look="bold"] .hdock .hsrch { margin: 0; } [data-look="bold"] .hdock .hsf { box-shadow: none; } @media (prefers-reduced-motion: no-preference) { [data-look="bold"] :where(.tsrch).prs { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); } } /* Night: a panel of the game, the place you're in framed in gold */ [data-look="night"] .tabbar { left: 6px; right: 6px; gap: 6px; padding: 5px; border-radius: 10px; background: #121624; box-shadow: inset 0 0 0 1px #3a3424, 0 0 0 1px #000, 0 8px 26px rgba(0,0,0,.55); } [data-look="night"] .tbs { height: 56px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } [data-look="night"] .tab { border: 1px solid transparent; border-radius: 6px; color: #9b9aa6; font: 700 var(--fs-lab)/1.15 'Cinzel', serif; letter-spacing: .02em; } [data-look="night"] .tab.on { border-color: #d8b25a; background: #1b2033; color: #d8b25a; } [data-look="night"] .tbf { border: 1px solid #d8b25a; } [data-look="night"] .tab.on .tbf { box-shadow: 0 0 6px rgba(242,193,78,.45); } [data-look="night"] :is(.tbn, .tbd) { background: #d8b25a; color: #1d1508; } [data-look="night"] .tsrch { width: 52px; height: 52px; border: 1px solid #d8b25a; border-radius: 6px; background: #1b2033; color: #d8b25a; box-shadow: none; } [data-look="night"] .hdock { padding-left: 6px; padding-right: 6px; } [data-look="night"] .hdin { border: 0; border-radius: 10px; background: #121624; box-shadow: inset 0 0 0 1px #3a3424, 0 0 0 1px #000, 0 8px 26px rgba(0,0,0,.55); } [data-look="night"] .hdock .hsf { border-color: #3a3424; border-radius: 6px; } [data-look="night"] .hdock .hsin::placeholder { font-family: 'Cinzel', serif; letter-spacing: .08em; } [data-look="night"] .hdbtns :is(.hbtn, .hme) { border-radius: 6px; } [data-look="night"] .hdbtns .hbtn { border: 1px solid #d8b25a; background: #1b2033; color: #d8b25a; } /* BANTOWN.fyi: the site's bottom bar, edge to edge; the place you're in in signal blue, with its edge on top */ [data-look="fyi"] { --barb: max(8px, var(--sab)); --barh: calc(62px + var(--barb)); } [data-look="fyi"] .tabbar { left: 0; right: 0; bottom: 0; gap: 6px; padding: 8px 8px var(--barb); background: var(--card); border-top: 1px solid var(--line); } [data-look="fyi"] .tbs { height: 54px; padding: 0; border: 0; background: none; box-shadow: none; } [data-look="fyi"] .tab { border-top: 2px solid transparent; color: var(--dim); font: 700 var(--fs-mono)/1.15 var(--mono); letter-spacing: .06em; text-transform: uppercase; } [data-look="fyi"] .tab.on { border-top-color: var(--accent); background: none; color: var(--accent); } [data-look="fyi"] .tbf { font: 800 14px var(--title); color: var(--ink); } [data-look="fyi"] :is(.tbn, .tbd) { background: var(--accent); color: var(--ink); font-family: var(--mono); } [data-look="fyi"] .tsrch { width: 54px; height: 54px; border: 1px solid var(--line2); background: transparent; color: var(--soft); box-shadow: none; } [data-look="fyi"] .hdock { padding: 8px 8px var(--barb); background: var(--card); border-top: 1px solid var(--line); } [data-look="fyi"] .hdin { min-height: 54px; padding: 0; border: 0; background: none; box-shadow: none; gap: 5px; } [data-look="fyi"] .hdock .hsf { border: 1px solid var(--line2); background: transparent; } [data-look="fyi"] .hdock .hsin::placeholder { font: 500 var(--fs-mono) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } [data-look="fyi"] .hdbtns .hbtn { border: 1px solid var(--line2); background: transparent; color: var(--soft); } [data-look="fyi"] .hdock .hsx { font: 700 calc(16rem / 17) var(--title); letter-spacing: .04em; text-transform: uppercase; } /* Channel: Slack's bar, edge to edge (Chats is its Home, a house), the place you're in white and bolder */ [data-look="channel"] { --barb: max(8px, var(--sab)); --barh: calc(62px + var(--barb)); } [data-look="channel"] .tabbar { left: 0; right: 0; bottom: 0; gap: 4px; padding: 6px 8px var(--barb); background: #16161a; border-top: 1px solid var(--line); } [data-look="channel"] .tbs { height: 54px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } [data-look="channel"] .tab { border-radius: 10px; color: var(--dim); font-weight: 600; } [data-look="channel"] .tab.on { background: none; color: #fff; font-weight: 800; } [data-look="channel"] .tab.on .ic { stroke-width: 2.4; } [data-look="channel"] .tbf { border-radius: 7px; } [data-look="channel"] .tab.on .tbf { box-shadow: 0 0 0 2px #fff; } [data-look="channel"] .tsrch { width: 48px; height: 54px; border: 0; border-radius: 10px; background: none; color: #d6d6dd; box-shadow: none; } [data-look="channel"] .hdock { padding: 6px 8px var(--barb); background: #16161a; border-top: 1px solid var(--line); } [data-look="channel"] .hdin { min-height: 50px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 4px; } [data-look="channel"] .hdock .hsrch { margin: 0; } [data-look="channel"] .hdock .hsf { min-height: 44px; border-radius: 8px; background: #1d1d22; box-shadow: none; } [data-look="channel"] .hdbtns :is(.hbtn, .hme) { width: 44px; height: 44px; border-radius: 10px; } [data-look="channel"] .hdbtns .hbtn { background: none; } [data-look="channel"] .hdbtns .hme { padding: 5px; } [data-look="channel"] .hdbtns .hme .hface { border-radius: 8px; font-size: 15px; } /* Retro: the buddy list window's toolbar at its foot, each place a 2006 folder tab (the one you're in white and bold) */ [data-look="retro"] { --barb: max(6px, var(--sab)); --barh: calc(58px + var(--barb)); } [data-look="retro"] .tabbar { left: 0; right: 0; bottom: 0; gap: 4px; padding: 6px 6px var(--barb); background: linear-gradient(#eef3fb, #c9d6ee); border-top: 1px solid #8ea4c6; } [data-look="retro"] .tbs { height: 46px; gap: 3px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } [data-look="retro"] .tab { min-height: 46px; gap: 2px; border: 1px solid #8ea4c6; border-radius: 4px 4px 0 0; background: linear-gradient(#f3f6fb, #d5dff0); color: #000; font: 400 var(--fs-lab)/1.1 var(--font); } [data-look="retro"] .tab .ic { width: 18px; height: 18px; color: #2a58bd; } [data-look="retro"] .tab.on { background: #fff; color: #000; font-weight: 700; } [data-look="retro"] .tbf { width: 18px; height: 18px; border: 1px solid #8ea4c6; border-radius: 0; font: 700 10px var(--font); } [data-look="retro"] .tab.on .tbf { box-shadow: none; } [data-look="retro"] .tbn { min-width: 0; min-height: 0; height: auto; padding: 0 3px; border-radius: 0; background: #fff35a; border: 1px solid #d00000; color: #d00000; font: 700 var(--fs-lab)/1.1 var(--font); } [data-look="retro"] .tbd { border: 1px solid #d00000; background: #fff35a; } [data-look="retro"] .tsrch { width: 44px; height: 46px; border: 1px solid #8ea4c6; border-radius: 4px; background: linear-gradient(#fff, #dde6f5); color: #2a58bd; box-shadow: none; } [data-look="retro"] .tsrch .ic { width: 18px; height: 18px; stroke-width: 2.2; } [data-look="retro"] .hdock { padding: 4px 6px var(--barb); background: linear-gradient(#eef3fb, #c9d6ee); border-top: 1px solid #8ea4c6; } [data-look="retro"] .hdin { min-height: 46px; gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } [data-look="retro"] .hdock .hsrch { margin: 0; } [data-look="retro"] .hdock .hsf { min-height: 44px; border-radius: 0; } [data-look="retro"] .hdbtns { gap: 4px; } [data-look="retro"] .hdbtns .hbtn { flex: none; width: auto; padding: 0 8px; background: none; font-size: calc(12 * var(--hr) / 17); } [data-look="retro"] .hdbtns .hme { width: 44px; height: 44px; border-radius: 0; } [data-look="retro"] .hdbtns .hme .hface { width: 30px; height: 30px; margin: 7px; border: 1px solid #6f8fc2; border-radius: 0; font: 700 13px var(--font); } /* B: New message at the top right of Chats (Retro: New IM in its title bar) */ [data-nav="bar"] .home .hacts { margin-right: -6px; } /* pressed (app.css, "pressed"): a place or Search lights under the finger in every look, the one you're in too; A's buttons beside the search box the same */ [data-look] .tabbar :is(.tab, .tsrch).prs, [data-look] .hdbtns .hbtn.prs { opacity: 1; background-color: var(--prs-card); } [data-look="retro"] .tabbar :is(.tab, .tsrch).prs { background: #316ac5; color: #fff; } [data-look="retro"] .tabbar :is(.tab, .tsrch).prs .ic { color: #fff; } /* ================================================================ Friends and New message (Zbo, Oct 31 evening; friends.js): the buttons on Home (getting around, above), the Friends page (here now, away; Zbo's waiting to get in, invites, and the card while he's alone), the New message sheet ("To:", the Bags under it), and a Bag first in Home's search. Every look: Retro an IM buddy list, Night the game's Friends tab, Channel Slack's, Bold ink cards. */ .home .hacts { flex: none; display: flex; gap: 2px; margin-right: -6px; } .hbtn { position: relative; flex: none; min-width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--accent); } .hbtn .ic { width: 25px; height: 25px; } .hbtn.hnm .ic { width: 24px; height: 24px; } .hbl, .frmt { display: none; } [data-look="channel"] .hbtn { border-radius: 10px; color: #d6d6dd; } [data-look="bold"] .hbtn { color: var(--ink); } [data-look="bold"] .hbtn .ic { stroke-width: 2.3; } [data-look="night"] .hbtn { color: #ffd479; } [data-look="retro"] .hbtn { flex: 1; isolation: isolate; border-radius: 0; gap: 5px; color: #1d3d7a; font: 700 calc(12rem / 17) var(--font); } [data-look="retro"] .hbtn::before { content: ''; position: absolute; inset: 7px 0; z-index: -1; border: 1px solid #9fb2cf; border-radius: 6px; background: linear-gradient(#ffffff, #dfe7f2); } [data-look="retro"] .hbtn.prs { background: none; color: #fff; } [data-look="retro"] .hbtn.prs::before { border-color: #16357a; background: #316ac5; } [data-look="retro"] .hbtn .ic { width: 15px; height: 15px; stroke-width: 2.2; } [data-look="retro"] .hbl { display: inline; } /* ---- the Friends page (a page like Me: "‹ Home", a big title; Find a friend and Invite at its bottom: pass 2, below) */ .fr-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 0 var(--gut) calc(36px + var(--sab)); } .fr-body .hsrch { margin: 0 0 4px; } .frlist { display: flex; flex-direction: column; gap: 24px; padding-top: 16px; } .frlist:empty { display: none; } .friends .bags li.gr { padding: 0 10px 0 0; gap: 8px; } .friends .bags .bagrow { min-height: 64px; gap: 12px; padding: 10px 4px 10px 14px; } .friends .bags .av, .frempty .av { width: 44px; height: 44px; border-radius: 22px; font-size: 17px; } .friends .grp > * + li.gr::before { left: 70px; } .friends .bags small { font-size: var(--fs-sub); } .friends .bags li.frw { min-height: 64px; padding-left: 14px; gap: 12px; } .frw .frwho { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; } .friends .bags .frw .grow small { white-space: normal; } .frlet.btn.small { flex: none; border-radius: 22px; padding: 0 16px; } .frmsg { position: relative; flex: none; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--w08); box-shadow: inset 0 0 0 1px var(--w10); } .frmsg .ic { width: 21px; height: 21px; } .frmsg.prs { opacity: 1; background: var(--prs-card); } /* a face: a green dot while he's here; dimmed while he's away */ :is(.friends, .nmsheet) .av { position: relative; } :is(.friends, .nmsheet) .av.on::after { content: ''; position: absolute; right: -1px; bottom: -1px; z-index: 1; width: 13px; height: 13px; border-radius: 7px; background: #3ee27f; border: 2.5px solid var(--card); } .nmsheet .av.on::after { border-color: var(--card2); } :is(.friends, .nmsheet) .av.off { filter: saturate(.55) brightness(.85); } /* online is a dot inside a ring, as well as its green (effortless, pass 2: never color alone, so it's never taken for an unread dot; canvas row 17, E2Colors): each look's dot keeps its size, place and the gap around it (its border), and gains a green ring outside that gap */ :is(.dmav.on, .hav.hone.here, .chat .chf.one > i.on, .cdfaces.one > i.on, .cdet .bags .av.on, :is(.friends, .nmsheet) .av.on)::after { box-shadow: 0 0 0 1.5px #3ee27f; } [data-look="bold"] :is(.dmav.on, .hav.hone.here, .chat .chf.one > i.on, .cdfaces.one > i.on, .cdet .bags .av.on, :is(.friends, .nmsheet) .av.on)::after { box-shadow: 0 0 0 2px #35d072; } [data-look="retro"] :is(.dmav.on, .hav.hone.here, .cdfaces.one > i.on, .cdet .bags .av.on, :is(.friends, .nmsheet) .av.on)::after, [data-look="retro"] .hbd.here .hon { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #2ea51b; } [data-look="night"] .hln .hon { box-shadow: 0 0 0 2px #0b0d14, 0 0 0 3.5px #40ff40; } /* Zbo, while nobody else is in: his face and four empty places, and Invite a Bag */ .frempty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 24px 26px; border-radius: 20px; background: var(--card); text-align: center; } .frfaces { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .frempty .frfaces .av { width: 56px; height: 56px; border-radius: 28px; font-size: 22px; } .frph { flex: none; width: 44px; height: 44px; border-radius: 22px; border: 2px dashed var(--w20); } .frh { font: 700 calc(20rem / 17)/calc(25rem / 17) var(--title); letter-spacing: -.01em; } .frempty p { margin: 0; max-width: 290px; color: var(--dim); font-size: var(--fs-sub); line-height: 1.4; } .frinvite.btn { margin-top: 14px; gap: 8px; border-radius: 25px; padding: 0 22px; } .frinvite .ic, .nminv .ic { width: 20px; height: 20px; stroke-width: 2.1; } .frnone { margin: 4px 16px; color: var(--dim); font-size: var(--fs-sub); text-align: center; } /* Glass: the bar frosts once the big title has gone up under it, as in Me */ [data-look="glass"] .friends > .hd.page { position: absolute; top: 0; left: 0; right: 0; } [data-look="glass"] .friends.scrolled > .hd.page { background: var(--frost); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border-bottom-color: var(--w07); } [data-look="glass"] .fr-body { padding-top: calc(44px + var(--sat)); } [data-look="glass"] .frmsg { color: #efcf7a; } [data-look="glass"] .frempty { background: var(--w055); box-shadow: inset 0 0 0 1px var(--w06); } [data-look="glass"] .friends .av.on::after { border-color: #17171d; } /* Channel: Slack's People: rounded squares, a green dot here, a hollow one away (no dimming) */ [data-look="channel"] :is(.friends, .nmsheet) .av { border-radius: 10px; } [data-look="channel"] :is(.friends, .nmsheet) .av.off { filter: none; } [data-look="channel"] :is(.friends, .nmsheet) .av.on::after, [data-look="channel"] :is(.friends, .nmsheet) .av.off::after { right: -3px; bottom: -3px; width: 13px; height: 13px; } [data-look="channel"] :is(.friends, .nmsheet) .av.off::after { content: ''; position: absolute; z-index: 1; border-radius: 7px; background: #9c9ca7; border: 2.5px solid var(--card); box-shadow: inset 0 0 0 2.5px var(--card); } [data-look="channel"] .nmsheet .av.off::after { border-color: var(--card2); box-shadow: inset 0 0 0 2.5px var(--card2); } [data-look="channel"] .frmsg { border-radius: 10px; color: #d6d6dd; background: #1d1d22; box-shadow: inset 0 0 0 1px #2a2a31; } [data-look="channel"] .frempty { border-radius: 12px; box-shadow: inset 0 0 0 1px #1e1e24; } [data-look="channel"] .frempty .frfaces .av, [data-look="channel"] .frph { border-radius: 12px; } /* Bold: each Bag an ink card */ [data-look="bold"] :is(.friends, .nmsheet) .grp { gap: 10px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; } [data-look="bold"] :is(.friends, .nmsheet) .grp > .gr { overflow: hidden; border: 2px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] :is(.friends, .nmsheet) .grp > * + .gr::before { display: none; } [data-look="bold"] :is(.friends, .nmsheet, .frempty) .av { border: 2px solid var(--ink); color: var(--ink); font-weight: 900; } [data-look="bold"] :is(.friends, .nmsheet) .av.on::after { right: -5px; bottom: -5px; width: 15px; height: 15px; border-radius: 8px; border: 2px solid var(--ink); background: #35d072; } [data-look="bold"] :is(.friends, .nmsheet) .grow b { font-weight: 800; } [data-look="bold"] :is(.friends, .nmsheet) .grow small { font-weight: 600; } [data-look="bold"] .frmsg { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .frmsg .ic { stroke-width: 2.3; } [data-look="bold"] .frinv { color: var(--ink); } [data-look="bold"] .frinv .ic { stroke-width: 2.3; } [data-look="bold"] .frempty { border: 2px solid var(--ink); background: var(--card); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .frph { border-color: rgba(24,22,27,.32); } [data-look="bold"] .frh { font-size: calc(1rem + 7px); font-weight: 900; letter-spacing: -.03em; color: var(--ink); } [data-look="bold"] .frempty p { font-weight: 600; } /* Night: the game's Friends tab: no portraits, each name in its class color (a lit dot while online), the offline grey */ [data-look="night"] :is(.frrow, .nmrow) .av { display: none; } [data-look="night"] .friends .grp > * + li.gr::before, [data-look="night"] .nmsheet .grp > * + .gr::before { left: 16px; } [data-look="night"] .friends .bags .bagrow { min-height: 56px; padding-left: 16px; } [data-look="night"] .friends .bags li.frw { min-height: 56px; padding-left: 16px; } [data-look="night"] :is(.frrow, .nmrow) .grow b { font-weight: 700; text-shadow: 0 1px 0 #000; } [data-look="night"] :is(.frrow, .nmrow) .grow b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 4px; background: #5a5866; vertical-align: 1px; } [data-look="night"] :is(.frrow.on, .nmrow.on) .grow b::before { background: #40ff40; box-shadow: 0 0 6px #40ff40; } [data-look="night"] :is(.frrow.off, .nmrow.off) .grow b { color: #8d8a98; } [data-look="night"] .frw .grow b::before { display: none; } [data-look="night"] .frmsg { border: 1px solid #ff80ff; background: linear-gradient(#5a1a5a, #2a0a2a); box-shadow: none; color: #ffc8ff; } [data-look="night"] .frinv { color: #ffd479; } [data-look="night"] .frempty { background: rgba(18,22,36,.86); box-shadow: inset 0 0 0 1px #3a3424; } [data-look="night"] .frempty .frfaces .av { box-shadow: 0 0 0 2px #a8905a; } [data-look="night"] .frph { border-color: rgba(216,178,90,.4); } [data-look="night"] .frh { font: 700 calc(19rem / 17)/1.3 'Cinzel', Georgia, serif; letter-spacing: .05em; color: #d8b25a; } /* Retro: a buddy list: each group a little window, small square faces, names in blue (the offline in grey), a glossy "Send IM" on each */ [data-look="retro"] .fr-body { padding: 8px 6px calc(10px + var(--sab)); } [data-look="retro"] .frlist { gap: 10px; padding-top: 6px; } [data-look="retro"] .friends .bags li.gr { padding-right: 6px; gap: 4px; } [data-look="retro"] .friends .bags .bagrow { min-height: 44px; gap: 8px; padding: 4px 6px 4px 8px; } [data-look="retro"] .friends .bags li.frw { min-height: 44px; padding-left: 8px; gap: 8px; } [data-look="retro"] .friends .bags .av, [data-look="retro"] .nmsheet .av { width: 28px; height: 28px; border-radius: 3px; border: 1px solid #6f8fc2; font: 700 12px var(--font); } [data-look="retro"] .friends .grp > * + li.gr::before { left: 0; } [data-look="retro"] :is(.friends, .nmsheet) .av.on::after { right: -4px; bottom: -4px; width: 10px; height: 10px; border: 1px solid #1f6e14; background: radial-gradient(circle at 35% 35%, #c8ffb0, #2ea51b); } [data-look="retro"] :is(.friends, .nmsheet) .av.off { filter: grayscale(.7) opacity(.7); } [data-look="retro"] :is(.frrow.off, .nmrow.off) .grow b { color: #777; } [data-look="retro"] .friends .bags small { font-size: calc(11rem / 17); } [data-look="retro"] .frmsg { width: auto; min-width: 44px; border-radius: 0; isolation: isolate; padding: 0 2px; background: none; box-shadow: none; color: #1d3d7a; font: 700 calc(11rem / 17) var(--font); } [data-look="retro"] .frmsg::before { content: ''; position: absolute; inset: 9px 0; z-index: -1; border: 1px solid #9fb2cf; border-radius: 6px; background: linear-gradient(#ffffff, #dfe7f2); } [data-look="retro"] .frmsg.prs { background: none; color: #fff; } [data-look="retro"] .frmsg.prs::before { border-color: #16357a; background: #316ac5; } [data-look="retro"] .frmsg .ic { display: none; } [data-look="retro"] .frmt { display: inline; padding: 0 8px; } [data-look="retro"] .frinv .ic { width: 16px; height: 16px; stroke-width: 2.4; } [data-look="retro"] .frempty { gap: 4px; padding: 14px 10px 12px; border-radius: 0; border: 1px solid #6f8fc2; background: #fff; } [data-look="retro"] .frfaces { gap: 6px; margin-bottom: 8px; } [data-look="retro"] .frempty .frfaces .av { width: 40px; height: 40px; border-radius: 3px; border: 1px solid #6f8fc2; font: 700 16px var(--font); } [data-look="retro"] .frph { width: 32px; height: 32px; border-radius: 3px; border: 1px dashed #8ea4c6; } [data-look="retro"] .frh { font: 700 calc(14rem / 17) var(--font); letter-spacing: 0; } [data-look="retro"] .frempty p { color: #444; font: 400 calc(12rem / 17)/1.4 var(--font); } [data-look="retro"] .frinvite.btn { margin-top: 8px; border-radius: 8px; padding: 0 14px; } [data-look="retro"] .frinvite .ic { width: 15px; height: 15px; } [data-look="retro"] .frnone { font: 400 calc(12rem / 17) var(--font); color: #444; } /* ---- Zbo's lists in Friends (Zbo, Oct 31: one place for the Bags, Me only about you): a Bag's new phone to check (his face, Check), the invites still open (a link in a dashed circle, Cancel), the Bags taken out (greyed, Make a link back in), and his key link (one row, opening a sheet). Their buttons are pills like Let in, in every look */ .frcancel.btn.small, .frback.btn.small { flex: none; border-radius: 22px; padding: 0 14px; } .friends .bags .av.frinvav { background: none; border: 2px dashed var(--w24); color: var(--dim); } .frinvav .ic { width: 19px; height: 19px; stroke-width: 2.1; } .friends .bags .frgone .grow b { color: var(--dim); } .friends .bags :is(.frgone, .frinvrow, .frphone) .grow small { white-space: normal; } .keysheet .btns .btn.small { border-radius: 22px; } .frkeyrow .gl small { white-space: normal; } [data-look="glass"] .friends .bags .av.frinvav { border-color: var(--w20); } [data-look="bold"] .friends .bags .av.frinvav { border: 2px dashed var(--ink); background: #fffdf8; color: var(--ink); } [data-look="night"] .frgone .grow b::before { display: none; } [data-look="night"] .friends .bags .frgone .grow b { color: #8d8a98; } [data-look="retro"] .friends .bags .av.frinvav { border: 1px dashed #8ea4c6; background: #fff; color: #2a58bd; } [data-look="retro"] .frinvav .ic { width: 14px; height: 14px; stroke-width: 2.4; } [data-look="retro"] .friends .bags .frgone .grow b { color: #777; } [data-look="retro"] .keysheet .btns { gap: 6px; } /* ---- New message: a sheet that comes up over Home, "To:" with the keyboard up and the Bags under it; it fits the space above the keyboard (its list scrolls), and glides up and drags down like every sheet (with its grabber) */ .sheet.nmsheet { bottom: auto; height: var(--app-h, 100%); } .nmsheet .sheet-in { position: relative; height: calc(100% - max(var(--sat), 34px) - 10px); max-height: none; padding: 15px 0 0; gap: 0; overflow: hidden; border-radius: 16px 16px 0 0; } .nmhd { display: flex; align-items: center; min-height: 44px; padding: 2px 8px 4px; } .nmx { min-width: 72px; height: 44px; display: flex; align-items: center; padding: 0 8px; color: var(--accent); font-size: 1rem; } .nmsheet .sh.nmt { flex: 1; min-width: 0; text-align: center; font: 600 1rem/calc(22rem / 17) var(--sys); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nmsp { min-width: 72px; } .nmto { display: flex; align-items: center; gap: 8px; min-height: 50px; margin: 0 16px; border-bottom: 1px solid var(--line); cursor: text; } .nmtl { flex: none; color: var(--dim); font-size: 1rem; } .nmq { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; outline: none; background: none; color: var(--fg); font: 400 1rem var(--sys); caret-color: var(--accent); -webkit-appearance: none; appearance: none; } .nmq::placeholder { color: var(--dim); opacity: 1; } .nmlist { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding: 16px 16px 12px; } .nmsh { padding: 0 16px 6px; font: 600 var(--fs-lab)/calc(18rem / 17) var(--sys); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } .nmsheet .grp { background: var(--card2); } .nmrow { min-height: 62px; gap: 12px; padding: 9px 14px; } .nmrow.top { background: color-mix(in srgb, var(--accent) 12%, transparent); } .nmrow .av { width: 42px; height: 42px; border-radius: 21px; font-size: 17px; } .nmrow .grow b { font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } .nmrow .grow small { color: var(--dim); font-size: var(--fs-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nmsheet .grp > * + .gr::before { left: 68px; } .nmnone { margin: 8px 16px; text-align: center; } .nmalone { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 24px; } .nmalone p { margin: 0; text-align: center; } .nminv.btn.small { gap: 8px; border-radius: 22px; } .nmfoot { flex: none; margin: 0; padding: 10px 28px calc(14px + env(safe-area-inset-bottom)); text-align: center; text-wrap: balance; font-size: var(--fs-sub); line-height: calc(20rem / 17); } .nmfoot .nw { white-space: nowrap; } .sheet-in .nmfoot { color: var(--dim); } .kb .nmfoot { padding-bottom: 10px; } .nmfoot .ic { display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -1px; stroke-width: 2.2; } [data-look="glass"] .nmsheet .grp { background: var(--w055); box-shadow: inset 0 0 0 1px var(--w06); } [data-look="glass"] .nmsheet .av.on::after { border-color: #232329; } [data-look="glass"] .nmto { border-bottom-color: var(--w10); } [data-look="channel"] .nmsheet .sheet-in { border-radius: 12px 12px 0 0; } [data-look="channel"] .nmsheet .sh.nmt { font-weight: 700; } [data-look="channel"] .nmsheet .grp { border-radius: 12px; box-shadow: inset 0 0 0 1px #26262d; } [data-look="channel"] .nmsh { font: 600 calc(15rem / 17)/calc(20rem / 17) var(--sys); letter-spacing: 0; text-transform: none; color: var(--dim); } [data-look="channel"] .nmrow .av { width: 36px; height: 36px; font-size: 15px; } [data-look="channel"] .nmrow .grow b { font-weight: 700; } [data-look="channel"] .nmsheet .grp > * + .gr::before { left: 62px; } [data-look="bold"] .nmx { color: var(--ink); font-weight: 700; } [data-look="bold"] .nmsheet .sh.nmt { font-weight: 900; letter-spacing: -.02em; color: var(--ink); } [data-look="bold"] .nmto { border-bottom: 2px solid var(--ink); } [data-look="bold"] .nmtl { color: var(--ink); font-weight: 800; } [data-look="bold"] .nmq { color: var(--ink); font-weight: 600; caret-color: var(--ink); } [data-look="bold"] .nmsh { font-weight: 800; letter-spacing: .08em; color: var(--ink); } [data-look="bold"] .nmsheet .grp > .nmrow:is(.top, .prs) { background: var(--prs); } [data-look="bold"] .nmfoot { font-weight: 600; } [data-look="night"] .nmx { color: #ffd479; font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase; } [data-look="night"] .nmsheet .sh.nmt { font: 700 1rem/calc(22rem / 17) 'Cinzel', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #d8b25a; } [data-look="night"] .nmto { border-bottom-color: #3a3424; } [data-look="night"] .nmtl { color: #a8905a; } [data-look="night"] .nmq { color: #ff80ff; caret-color: #ff80ff; } [data-look="night"] .nmq::placeholder { color: #7d6a8a; } [data-look="night"] .nmsh { font: 700 var(--fs-lab)/calc(16rem / 17) 'Cinzel', Georgia, serif; letter-spacing: .1em; color: #a8905a; } [data-look="night"] .nmsheet .grp { background: rgba(4,6,12,.7); box-shadow: inset 0 0 0 1px #3a3424; } [data-look="night"] .nmrow { min-height: 54px; padding-left: 16px; } [data-look="night"] .nmrow.top { background: rgba(255,128,255,.1); } [data-look="night"] .nmrow .ic.gc { color: #a8905a; } /* Retro: a little "Send Instant Message" window: its blue title bar, "To:" in a sunken box, the buddies grouped under it */ [data-look="retro"] .nmsheet .sheet-in { padding: 0; border-radius: 0; } [data-look="retro"] .nmsheet .sheet-in > .sh.rtonly:first-child { margin: 0; } [data-look="retro"] .nmsheet .sh.nmt, [data-look="retro"] .nmsp { display: none; } [data-look="retro"] .nmhd { order: 1; justify-content: flex-end; min-height: 0; padding: 0 8px calc(8px + env(safe-area-inset-bottom)); } .kb[data-look="retro"] .nmhd { padding-bottom: 8px; } [data-look="retro"] .nmx { min-width: 0; padding: 0 16px; border: 1px solid #9fb2cf; border-radius: 8px; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; font: 700 calc(12.5rem / 17) var(--font); } [data-look="retro"] .nmto { margin: 8px 8px 0; gap: 6px; border: 0; } [data-look="retro"] .nmtl { color: #000; font: 700 calc(12rem / 17) var(--font); } [data-look="retro"] .nmq { height: var(--box); padding: 0 6px; border: 2px solid; border-color: #8a9bb8 #e8eef8 #e8eef8 #8a9bb8; background: #fff; color: #000; font: 400 calc(16rem / 17) var(--font); caret-color: #000; } [data-look="retro"] .nmq:focus-visible { outline: 1px dotted #23458c; outline-offset: 1px; } [data-look="retro"] .nmlist { gap: 6px; padding: 8px 8px 6px; } [data-look="retro"] .nmsh { padding: 2px 2px 2px; font: 700 calc(12rem / 17) var(--font); letter-spacing: 0; text-transform: none; color: #1d3d7a; } [data-look="retro"] .nmsh::before { content: '▾ '; } [data-look="retro"] .nmsheet .grp { border: 1px solid #9fb6d8; background: #fff; } [data-look="retro"] .nmrow { min-height: 44px; gap: 8px; padding: 4px 8px; } [data-look="retro"] .nmrow .grow b { font: 700 calc(12.5rem / 17) var(--font); color: #0018c8; } [data-look="retro"] .nmrow .grow small { font: 400 calc(11rem / 17) var(--font); color: #444; } [data-look="retro"] .nmsheet .grp > .nmrow:is(.top, .prs) { background: #316ac5; } [data-look="retro"] .nmrow.top .grow :is(b, small), [data-look="retro"] .nmrow.prs .grow :is(b, small) { color: #fff; } [data-look="retro"] .nmsheet .grp > * + .gr::before { left: 0; background: #e3e9f3; } [data-look="retro"] .nmfoot { padding: 4px 10px 8px; font: 400 calc(11rem / 17) var(--font); color: #444; } [data-look="retro"] .nmnone, [data-look="retro"] .nmalone p { font: 400 calc(12rem / 17) var(--font); color: #444; } /* ---- Home's search: a Bag whose name matches, first (the whole row a tap: your chat with him), then the messages */ .hfrow { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 72px; padding: 0 var(--gut); text-align: left; } .hfrow .htx { border-bottom: 0; } .hmsg { flex: none; min-height: 36px; padding: 0 14px; border-radius: 18px; background: var(--btn); color: var(--btn-fg); font: 700 calc(15rem / 17)/calc(36rem / 17) var(--sys); white-space: nowrap; } [data-look="glass"] .hmsg { background: linear-gradient(180deg, #f9e6aa, #efcf7a); } [data-look="channel"] .hfrow .hav { border-radius: 12px; } [data-look="channel"] .hfrow .hav .hface { border-radius: inherit; } [data-look="channel"] .hmsg { border-radius: 8px; background: none; color: var(--fg); box-shadow: inset 0 0 0 1px #3a3a42; font-weight: 600; } [data-look="bold"] .hfrow { width: calc(100% - 32px); min-height: 70px; margin: 0 16px 10px; padding: 8px 12px; gap: 12px; border: 2px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .hfrow .htx { padding: 0; } [data-look="bold"] .hmsg { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); line-height: calc(32rem / 17); box-shadow: 2px 2px 0 var(--ink); font-weight: 800; } [data-look="night"] .hres .hsec { padding: 8px 0 2px; font: 700 var(--fs-lab)/1 'Cinzel', serif; letter-spacing: .1em; color: #a8905a; } [data-look="night"] .hfrow { min-height: 52px; padding: 6px 0; gap: 10px; text-shadow: 0 1px 0 #000; border-bottom: 1px solid rgba(216,178,90,.14); } [data-look="night"] .hfrow .hav { display: none; } [data-look="night"] .hfrow .htx { padding: 2px 0; } [data-look="night"] .hfrow .hnm { font: 700 calc(15rem / 17)/1.35 var(--sys); } [data-look="night"] .hfrow .hpv { color: #8a7650; font: 600 var(--fs-sub)/1.35 var(--sys); } [data-look="night"] .hmsg { min-height: 32px; padding: 0 12px; border: 1px solid #ff80ff; border-radius: 6px; background: linear-gradient(#5a1a5a, #2a0a2a); color: #ffc8ff; font: 700 var(--fs-lab)/calc(30rem / 17) 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; } [data-look="retro"] .hres .hsec { padding: 6px 8px 2px; font: 700 calc(12rem / 17) var(--font); letter-spacing: 0; text-transform: none; color: #1d3d7a; } [data-look="retro"] .hfrow { min-height: 44px; gap: 6px; padding: 0 8px; font: 400 calc(12rem / 17) var(--font); color: #000; border-bottom: 1px solid #e3e9f3; } [data-look="retro"] .hfrow .hav { display: none; } [data-look="retro"] .hfrow .htx { gap: 1px; padding: 4px 0; } [data-look="retro"] .hfrow .hnm { font: 700 calc(12rem / 17) var(--font); color: #0018c8; } [data-look="retro"] .hfrow .hpv { font: 400 calc(11rem / 17) var(--font); color: #2b8a2b; } [data-look="retro"] .hmsg { min-height: 26px; padding: 0 10px; border: 1px solid #23458c; border-radius: 6px; background: var(--gloss); color: #fff; font: 700 calc(11rem / 17)/calc(24rem / 17) var(--font); text-shadow: 0 1px 0 #1d3d7a; } /* ================================================================ pressed (Zbo, Oct 31: taps that feel right on iPhone) press.js puts .prs on the row or button a finger is down on: at once out in the open, a beat later inside something that scrolls, and off again the moment it scrolls or the finger moves away (iPhone Safari's own :active stays lit through a scroll, so nothing here uses it). Lighting up is instant; going out fades. Each look has its own pressed colors (--prs on a row, --prs-card on a card or a tile, at the top of this file): a row or a card lights, a word or an icon dims the iPhone way, a filled button darkens and gives a little. Bold's ink cards sink into their own shadow, Retro's buttons go in like a 2006 button, and Retro's rows take 2006's selection blue with white words. */ :where(button, a[href], summary, label.check, [role="button"]) { transition: background-color .25s ease-out, opacity .25s ease-out, filter .25s ease-out, color .25s ease-out, border-color .25s ease-out, box-shadow .25s ease-out, transform .2s ease-out; } .prs, .prs::before, .prs::after, .prs * { transition-duration: 0s !important; } /* a word or an icon (a back button, ×, Cancel, a face, a name): dims */ :where(button, a[href], summary, label.check, [role="button"]).prs { opacity: .45; } /* a row in a list (Home, its search, Me, Friends, New message, the + menu, the long-press menu): lights */ [data-look] :where(.hrow, .hfrow, .hhit, .gr.act, .bagrow, .nmrow, .pmi, .hmi, .hme.hmerow, .hbtn).prs { opacity: 1; background-color: var(--prs); } /* a Bag's row with a button of its own at the end (Message, Check, Let in): the whole row lights, not just up to the button */ [data-look] :where(li.gr):has(> .bagrow.prs) { background-color: var(--prs); } [data-look] :where(li.gr > .bagrow).prs { background-color: transparent; } /* a card or a tile, or a button on a dark fill (a pill, a round button, a ghost button): lights */ [data-look] :where(.fhit, .cdact, .wb2, .hnote, .bn.ask, .bn.wsp, .lopt, .hset, .frmsg, .jump, .rr, .btn.ghost, .vclose, .vmore, .cmp .pl, .voxopen, .voxmic:not(.ptt):not(.off), .voxsg:not(.on)).prs { opacity: 1; background-color: var(--prs-card); } /* a filled button (gold, or the look's own color): darkens */ [data-look] :where(.btn:not(.ghost), .cmp .sd, .voxjn, .voxmic.ptt, .voxmic.off).prs { opacity: 1; filter: brightness(.82); } @media (prefers-reduced-motion: no-preference) { [data-look] :where(.btn, .cmp .sd, .cmp .pl, .jump, .frmsg, .lopt, .hset, .rr, .rc, .vclose, .bn.ask, .hbtn, .look, .hme, .facebtn, .av).prs { transform: scale(.96); } } /* Bold: an ink card or button sinks into its own shadow */ [data-look="bold"] :where(.btn, .cmp .sd, .cmp .pl, .jump, .hset, .rc, .banners .bn, .dmback, .wb2, .lopt, .hrow, .hfrow, .hhit, .hnote, .cdact, .frmsg, .friends .grp > .gr, .nmsheet .grp > .gr).prs { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); } [data-look="bold"] .rc.prs { transform: translate(2px, 2px) rotate(-4deg); } /* the + in the message box: each look gives it its own fill, which lights while pressed (Channel's has none: it takes one, Slack's way) */ [data-look] .cmp .pl.prs { background-color: var(--prs-card); } /* (fills a look sets more particularly than the rules above: a ghost button, a lock-time pill; the one picked keeps its own fill and darkens) */ [data-look] :is(.btn.ghost, .lopt).prs { background-color: var(--prs-card); } [data-look] .lopt[aria-pressed="true"].prs { background-color: var(--btn); filter: brightness(.85); } [data-look="bold"] :where(.friends .grp > .gr, .nmsheet .grp > .gr):has(> .bagrow.prs) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); } /* Retro: rows take the selection blue with white words; buttons go in */ [data-look="retro"] :where(.hrow, .hfrow, .hhit, .gr.act, .bagrow, .nmrow, .hme.hmerow, .fhit, .cdact, .hnote, .wb2, .bn.ask, .bn.wsp).prs, [data-look="retro"] :where(li.gr):has(> .bagrow.prs) { background-color: var(--prs); background-image: none; } [data-look="retro"] :where(li.gr > .bagrow).prs { background-color: transparent; } [data-look="retro"] :where(.hrow, .hfrow, .hhit, .gr.act, .bagrow, .nmrow, .hme.hmerow, .fhit, .cdact, .hnote, .wb2, .bn.ask, .bn.wsp).prs, [data-look="retro"] :where(.hrow, .hfrow, .hhit, .gr.act, .bagrow, .nmrow, .hme.hmerow, .fhit, .cdact, .hnote, .wb2, .bn.ask, .bn.wsp).prs * { color: #fff !important; } [data-look="retro"] :where(.btn, .cmp .sd, .cmp .pl, .jump, .lopt, .hset, .bn .ok2).prs { opacity: 1; filter: brightness(.9); box-shadow: inset 1px 2px 3px rgba(0,0,0,.4); transform: translateY(1px); } /* Night: the game's pushed button */ [data-look="night"] :where(.btn, .cmp .sd, .bn .ok2, .hset).prs { opacity: 1; filter: brightness(.78); transform: translateY(1px); } /* ---- the BANTOWN Hub (Brief item 5; the canvas, rows 5 and 6): Home's one-line row, the line in the Bags' chat, Today and the pages one tap deeper, Publish (Zbo), each Bag's WoW card on his profile, and the Status labels. Every look. */ .hrow.hub .htx.hone { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; } .hrow.hub .hnm { flex: none; } .hrow.hub .hcd { flex: 1; min-width: 0; font-size: var(--fs-sub); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; } .hrow.hub.unread .hcd { color: var(--fg); font-weight: 600; } .htile.hhub { color: var(--accent); } [data-look="bold"] .htile.hhub { background: #ffd35a; color: var(--ink); } [data-look="channel"] .hit .hcd { margin-left: 6px; min-width: 0; font-size: var(--fs-sub); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-look="channel"] .hhash.hhubi .ic { width: 18px; height: 18px; vertical-align: -3px; } [data-look="night"] .hln.hub { color: #ffd479; } [data-look="night"] .hln.hub .hl2 { color: #a8905a; } [data-look="retro"] .hbd.hub b { color: #1d3d7a; } /* the line in the Bags' chat: "Zbo posted today's update · Check it out" (opens the Hub) */ .hubline { align-self: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; max-width: 90%; margin: 16px 0 8px; padding: 0 8px; text-align: center; font-size: var(--fs-sub); line-height: 1.4; color: var(--dim); } .hubline > .ic { width: 12px; height: 12px; flex: none; fill: var(--accent); stroke: none; } .hubline span { unicode-bidi: isolate; } .hlgo { position: relative; font: inherit; font-weight: 700; color: var(--accent); } .hlgo::before { content: ''; position: absolute; inset: -14px -10px; } [data-look="night"] .hubline { align-self: stretch; justify-content: flex-start; max-width: none; margin: 10px 0 4px; padding: 0; text-align: left; font: 600 var(--fs-sub)/1.45 var(--sys); color: #ffd479; text-shadow: 0 1px 0 #000; } [data-look="night"] .hlgo { color: #ffd479; text-decoration: underline; text-underline-offset: 2px; } [data-look="retro"] .hubline { margin: 8px 0 4px; padding: 0; font: italic 400 calc(11rem / 17)/1.4 var(--font); color: #444; } [data-look="retro"] .hlgo { color: #0000ee; font-style: normal; font-weight: 700; text-decoration: underline; } [data-look="bold"] .hubline { font-weight: 700; color: var(--ink); } [data-look="bold"] .hubline > .ic { fill: #ff7a45; } [data-look="bold"] .hlgo { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; } [data-look="channel"] .hubline { font-size: var(--fs-sub); } /* the pages (Me's page, with the Hub's own pieces) */ .hb-body { gap: 20px; } .hb-body > * { flex-shrink: 0; } /* (a page longer than the screen scrolls; nothing in it is squeezed, the video least of all) */ [data-look="retro"] .hb-body { gap: 10px; } [data-look="glass"] .hubpg > .hd.page { position: absolute; top: 0; left: 0; right: 0; } [data-look="glass"] .hubpg.scrolled > .hd.page { background: var(--frost); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border-bottom-color: var(--w07); } .hb-body > .ptl { padding-bottom: 0; } .hubpg .gx { margin: 24px auto; } /* Today: the countdown */ .hcount { display: flex; align-items: center; gap: 14px; padding: 0 4px; } .hcn { flex: none; font: 800 calc(1rem + 47px)/1 var(--title); letter-spacing: -.04em; color: var(--accent); font-variant-numeric: tabular-nums; } .hct { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hct b { font: 700 calc(22rem / 17)/1.2 var(--title); overflow-wrap: anywhere; } .hct span { font-size: var(--fs-sub); color: var(--dim); } [data-look="night"] .hcn { font: 700 calc(1rem + 47px)/1 'Cinzel', Georgia, serif; color: #f2c14e; text-shadow: 0 0 22px rgba(242,193,78,.45), 0 2px 0 #000; } [data-look="night"] .hct b { font: 700 calc(19rem / 17)/1.25 'Cinzel', Georgia, serif; letter-spacing: .04em; color: #d8b25a; } [data-look="retro"] .hcount { padding: 8px 10px; border: 1px solid #6f8fc2; background: #fff; } [data-look="retro"] .hcn { font: 700 calc(1rem + 23px)/1 var(--font); letter-spacing: -1px; color: #2a58bd; } [data-look="retro"] .hct b { font: 700 calc(14rem / 17) var(--font); } [data-look="retro"] .hct span { font-size: calc(11rem / 17); color: #444; } [data-look="bold"] .hcn { font-size: calc(1rem + 59px); font-weight: 900; letter-spacing: -.06em; color: var(--ink); text-shadow: 3px 3px 0 #ff7a45; } [data-look="bold"] .hct b { font-weight: 900; letter-spacing: -.02em; } [data-look="channel"] .hcn { font-weight: 900; color: var(--fg); } /* Today: the cards (a draft for Zbo, your next step, the latest update) */ .hcard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--card); text-align: left; color: inherit; } .hcic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .hcic.warn { background: rgba(255,170,90,.15); color: #ffc28a; } .hcic .ic { width: 22px; height: 22px; } .hctx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hctx small { font-size: var(--fs-lab); font-weight: 600; line-height: calc(16rem / 17); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } .hctx b { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .hctx > span { font-size: var(--fs-sub); line-height: 1.35; color: var(--dim); } .hcbtn { flex: none; min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--btn); color: var(--btn-fg); font: 700 calc(15rem / 17)/calc(44rem / 17) var(--sys); text-decoration: none; white-space: nowrap; } .hcard .gc { flex: none; width: 16px; height: 16px; color: var(--dim); stroke-width: 2.2; } .hthumb { position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--card2); } .hthumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .hthp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .hthp .ic { width: 24px; height: 24px; fill: #fff; stroke: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); } .hai { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sub); line-height: 1.35; color: var(--dim); } .hcard .hai { flex-wrap: nowrap; font-size: var(--fs-foot); min-width: 0; } .hcard .hai > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hubmore .gl .gn { white-space: nowrap; } .hubmore .gl { min-width: min-content; } /* (its name stays whole: a long line beside it, Next up's, gives way and ends in "…"; Zbo's iPhone, Nov 5) */ .hubmore .gv { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hfoot { margin: 0 4px; } .aitag { font: 700 var(--fs-lab)/calc(16rem / 17) var(--sys); font-style: normal; letter-spacing: .06em; padding: 0 5px; border-radius: 5px; background: var(--btn); color: var(--btn-fg); } [data-look] :where(.hcard).prs { opacity: 1; background-color: var(--prs-card); } [data-look="glass"] :is(.hcard, .hpost) { background: var(--w055); box-shadow: inset 0 0 0 1px var(--w06); } [data-look="glass"] .hthumb { background: #1d1d24; } [data-look="night"] :is(.hcard, .hpost) { border: 1px solid var(--line); border-radius: 12px; background: rgba(4,6,12,.86); box-shadow: inset 0 0 30px rgba(0,0,0,.6); } [data-look="night"] .hctx small { font: 700 var(--fs-lab)/calc(16rem / 17) 'Cinzel', Georgia, serif; letter-spacing: .08em; color: #a8905a; } [data-look="night"] .hctx b { color: #ffd479; } [data-look="night"] .hcbtn { border: 1px solid #d8b25a; border-radius: 6px; background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; font: 700 var(--fs-lab)/calc(42rem / 17) 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase; } [data-look="night"] .hcic { border-radius: 8px; background: rgba(216,178,90,.14); color: #f2c14e; } [data-look="night"] .aitag { background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; border: 1px solid #d8b25a; } [data-look="retro"] :is(.hcard, .hpost) { border: 1px solid #6f8fc2; border-radius: 0; background: #fff; font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] .hcard { padding: 6px 8px; gap: 8px; } [data-look="retro"] .hctx small { font: 700 var(--fs-lab) var(--font); letter-spacing: 0; text-transform: none; color: #2a58bd; } [data-look="retro"] .hctx b { font: 700 calc(12rem / 17)/1.3 var(--font); } [data-look="retro"] .hctx > span, [data-look="retro"] .hai { font-size: calc(11rem / 17); color: #444; } [data-look="retro"] .hcic { width: 30px; height: 30px; border-radius: 0; background: #eef3fb; border: 1px solid #9fb2cf; color: #2a58bd; } [data-look="retro"] .hcic.warn { background: #fff7c2; border-color: #e3c34b; color: #8a6d00; } [data-look="retro"] .hcbtn { position: relative; min-height: 26px; padding: 0 10px; border: 1px solid #23458c; border-radius: 5px; background: var(--gloss); color: #fff; font: 700 calc(12rem / 17)/calc(24rem / 17) var(--font); } [data-look="retro"] .hcbtn::before { content: ''; position: absolute; inset: min(0px, calc((100% - 44px) / 2)) -4px; } [data-look="retro"] .hthumb { width: 54px; height: 54px; border-radius: 0; border: 1px solid #9fb2cf; } [data-look="retro"] .aitag { border-radius: 0; background: #ffd48f; color: #4a2400; font: 700 var(--fs-lab)/calc(14rem / 17) var(--font); } [data-look="bold"] :is(.hcard, .hpost) { border: 2px solid var(--ink); background: var(--card); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .hcic { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); } [data-look="bold"] .hcic.warn { background: #ffd9cf; color: var(--ink); } [data-look="bold"] .hctx small { font-weight: 800; color: var(--ink); } [data-look="bold"] .hctx b { font-weight: 800; } [data-look="bold"] .hcbtn { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); font-weight: 800; line-height: calc(40rem / 17); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .hthumb { border: 2px solid var(--ink); } [data-look="bold"] .aitag { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); line-height: calc(13rem / 17); } [data-look="bold"] .hcard.prs { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); } [data-look="channel"] :is(.hcard, .hpost) { border: 1px solid #2a2a31; border-radius: 10px; background: #16161a; } [data-look="channel"] .hcbtn { border-radius: 8px; background: #f6df9a; } /* Updates: the videos, newest first, and the news */ .hpost { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--card); } .hvid { position: relative; width: 100%; max-height: 62vh; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hubpub .hvid { max-height: 34vh; border-radius: 16px; } /* (Publish: the title, the caption and what it sends stay in view) */ .hvid .hpimg, .hvid .hvv { width: 100%; height: 100%; object-fit: contain; display: block; } .hvid .hpimg.broken { visibility: hidden; } .hplay { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 32px; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hplay .ic { width: 28px; height: 28px; margin-left: 3px; fill: #fff; stroke: none; } .hplay.busy { opacity: .55; } .hdur { position: absolute; right: 10px; bottom: 10px; padding: 1px 7px; border-radius: 8px; background: rgba(0,0,0,.62); color: #fff; font: 600 var(--fs-lab)/calc(18rem / 17) var(--sys); font-variant-numeric: tabular-nums; pointer-events: none; } .hpbody { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; } .hpt { margin: 0; font: 700 calc(19rem / 17)/1.25 var(--title); overflow-wrap: anywhere; } .hpc { margin: 0; font-size: var(--fs-body); line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; } .hnl { gap: 4px; } .hns { color: var(--dim); font-size: calc(13rem / 17); } .hnt { font-size: var(--fs-body); line-height: 1.38; overflow-wrap: anywhere; } .hnmore { position: relative; display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--accent); font-size: var(--fs-sub); font-weight: 600; text-decoration: none; } .hnmore::before { content: ''; position: absolute; inset: min(-12px, calc((100% - 44px) / 2)) -8px; } .hnmore .ic { width: 15px; height: 15px; } [data-look="night"] .hpt { font: 700 calc(18rem / 17)/1.3 'Cinzel', Georgia, serif; letter-spacing: .03em; color: #ffd479; } [data-look="retro"] .hvid { max-height: 60vh; } [data-look="retro"] .hpbody { padding: 6px 8px 8px; gap: 3px; } [data-look="retro"] .hpt { font: 700 calc(13rem / 17) var(--font); color: #1d3d7a; } [data-look="retro"] .hpc { font: 400 calc(12rem / 17)/1.4 var(--font); } [data-look="retro"] .hplay { border-radius: 0; width: 60px; height: 44px; border: 2px solid #fff; background: rgba(42,88,189,.85); } [data-look="retro"] :is(.hns, .hnt, .hnmore) { font-family: var(--font); font-size: calc(12rem / 17); } [data-look="retro"] .hnmore::before { top: calc(100% - 40px); bottom: -4px; } /* (44 pt, up over its own news line: the row's bottom edge cuts what reaches down) */ [data-look="bold"] .hpt { font-weight: 900; letter-spacing: -.02em; } [data-look="bold"] .hvid { border-bottom: 2px solid var(--ink); } [data-look="bold"] .hplay { border: 2px solid #fff; } [data-look="bold"] .hnmore { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; } /* Next up: a calendar leaf for each date */ .hcal { flex: none; min-width: 44px; min-height: 48px; padding: 0 4px; border-radius: 10px; background: var(--card2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .hcal small { font: 700 var(--fs-lab)/1.2 var(--sys); letter-spacing: .08em; color: #ff6b5b; } /* (the month and the day never touch, at any text size, in any look's type) */ .hcal b { font: 700 calc(20rem / 17)/1.12 var(--sys); } .hrel { font-size: var(--fs-sub); white-space: nowrap; } [data-look="night"] .hcal { border: 1px solid #a8905a; border-radius: 6px; background: rgba(29,21,8,.8); } [data-look="night"] .hcal small { color: #ff9d2e; font-family: 'Cinzel', serif; } [data-look="night"] .hcal b { color: #ffd479; font-family: 'Cinzel', serif; } [data-look="retro"] .hcal { min-width: 38px; min-height: 40px; padding: 0; border: 1px solid #6f8fc2; border-radius: 0; background: #fff; } [data-look="retro"] .hcal small { width: 100%; padding: 2px 0; background: #d9381e; color: #fff; font: 700 var(--fs-lab) var(--font); text-align: center; } [data-look="retro"] .hcal b { font: 700 calc(15rem / 17) var(--font); } [data-look="bold"] .hcal { border: 2px solid var(--ink); background: #fffdf8; } [data-look="bold"] .hcal b { font-weight: 900; color: var(--ink); } /* (the month in each look's own readable red, its Delete's: 4.5:1 or better as drawn, a raid event's tile in Next up too) */ [data-look="glass"] .hcal small { color: #ff9688; } [data-look="bold"] .hcal small { color: #c22d12; } /* Ready check: faces, then the party, classes and professions as chips */ .hlead { margin: 0 4px; font-size: var(--fs-body); line-height: 1.4; color: var(--dim); } .hlead b { color: var(--fg); } .hfaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 4px; } .hf { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 44px; padding: 6px 2px; border-radius: 12px; text-align: center; color: inherit; } .hfa { position: relative; width: 48px; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--card2); color: #16161a; font: 700 19px var(--sys); font-style: normal; } .hfa.ok { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #3ee27f; overflow: visible; } .hf b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-lab); font-weight: 600; unicode-bidi: isolate; } .hf .y { font-size: var(--fs-lab); font-weight: 600; color: #3ee27f; } .hf .w { max-width: 100%; overflow-wrap: break-word; text-wrap: balance; font-size: var(--fs-lab); line-height: 1.2; color: #ffb36b; } /* (what he still needs, in words: “needs a 2nd name” on two lines) */ .hrsec > .sh { display: flex; align-items: baseline; gap: 8px; } .hrsec > .sh em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; } .rchips { display: flex; flex-wrap: wrap; gap: 8px; } .rchip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border-radius: 16px; background: var(--card); font-size: calc(15rem / 17); } .rchip.ok { color: #3ee27f; } .rchip:is(.gap, .miss) { background: transparent; outline: 1px dashed rgba(255,179,107,.85); outline-offset: -1px; color: #ffb36b; } /* (missing: dashed as well as colored, effortless T6) */ .rchip small { font-size: var(--fs-foot); font-weight: 700; letter-spacing: .06em; color: var(--dim); } [data-look="night"] .rchip { border: 1px solid #3a3424; border-radius: 4px; background: rgba(4,6,12,.86); color: #e9e6dc; } [data-look="night"] .rchip.ok { color: #40ff40; } [data-look="night"] .rchip:is(.gap, .miss) { border-color: #ff9d2e; border-style: dashed; outline: 0; color: #ff9d2e; } [data-look="retro"] .hrsec .rchips { padding: 6px; gap: 4px; } [data-look="retro"] .rchip { min-height: 22px; padding: 0 6px; border: 1px solid #9fb2cf; border-radius: 0; background: #eef3fb; font: 400 calc(11rem / 17) var(--font); } [data-look="retro"] .rchip.ok { color: #1a7a1a; } [data-look="retro"] .rchip:is(.gap, .miss) { border-color: #b8962a; border-style: dashed; background: #fff7c2; outline: 0; color: #7a1200; } [data-look="retro"] :is(.hf .y, .rchip.ok) { color: #1a7a1a; } [data-look="retro"] .hf .w { color: #b3200a; } [data-look="retro"] .hfa { border-radius: 0; border: 1px solid #6f8fc2; } [data-look="bold"] .rchip { border: 2px solid var(--ink); background: var(--card); font-weight: 700; } [data-look="bold"] .rchip.ok { background: #c8f0d2; color: var(--ink); } [data-look="bold"] .rchip:is(.gap, .miss) { border-style: dashed; outline: 0; background: #ffd9cf; color: var(--ink); } [data-look="bold"] .hfa { border: 2px solid var(--ink); color: var(--ink); font-weight: 900; } [data-look="bold"] .hf .y { color: #1d7a3c; } [data-look="bold"] .hf .w { color: #b33a12; font-weight: 700; } [data-look="bold"] .hfa.ok { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #35d072; } .hans { font-weight: 600; color: var(--fg); } /* the Rulebook: the doc's own words, laid out */ .rbody { display: flex; flex-direction: column; gap: 14px; padding: 0 4px; font-size: var(--fs-body); line-height: 1.5; } .rbp { margin: 0; overflow-wrap: anywhere; } .rbh { margin: 8px 0 0; font: 700 calc(19rem / 17)/1.3 var(--title); } .rbl { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .rbpills { display: flex; flex-wrap: wrap; gap: 8px; } .rbnote { margin: 0; font-size: var(--fs-sub); color: var(--dim); } .rba { color: var(--accent); } .rblinks { display: flex; flex-direction: column; border-radius: var(--grp-r); background: var(--card); overflow: hidden; } .rblink { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 16px; color: var(--accent); text-decoration: none; } .rblink + .rblink { border-top: 1px solid var(--line); } .rblink .ic, .hrba .ic { flex: none; width: 18px; height: 18px; } .rbtw { overflow-x: auto; touch-action: pan-x pan-y; border-radius: 12px; background: var(--card); } .rbt { min-width: 100%; border-collapse: collapse; font-size: calc(15rem / 17); line-height: 1.35; } .rbt :is(th, td) { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .rbt th { font-size: calc(13rem / 17); font-weight: 600; color: var(--dim); white-space: nowrap; } .rbt tr:last-child td { border-bottom: 0; } [data-look="night"] .rbh { font-family: 'Cinzel', Georgia, serif; letter-spacing: .04em; color: #d8b25a; } [data-look="night"] .rbody b { color: #ffd479; } [data-look="night"] :is(.rbtw, .rblinks) { border: 1px solid var(--line); background: rgba(4,6,12,.86); } [data-look="retro"] .rbody { gap: 8px; padding: 8px; border: 1px solid #6f8fc2; background: #fff; font: 400 calc(12rem / 17)/1.5 var(--font); } [data-look="retro"] .rbh { font: 700 calc(13rem / 17) var(--font); color: #1d3d7a; } [data-look="retro"] :is(.rbtw, .rblinks) { border: 1px solid #9fb2cf; border-radius: 0; background: #fff; } [data-look="retro"] .rbt { font: 400 calc(11rem / 17)/1.35 var(--font); } [data-look="retro"] .rbt th { background: #eef3fb; color: #1d3d7a; font: 700 calc(11rem / 17) var(--font); } [data-look="retro"] :is(.rba, .rblink) { color: #0000ee; text-decoration: underline; } [data-look="bold"] .rbh { font-weight: 900; } [data-look="bold"] :is(.rbtw, .rblinks) { border: 2px solid var(--ink); } [data-look="bold"] .rbt :is(th, td) { border-bottom-color: var(--ink); } [data-look="bold"] :is(.rba, .rblink) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; } /* a pick's Status: the Rulebook's word, in its color (gray, blue, orange, gold, green) */ .pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 12px; font: 600 calc(13rem / 17)/calc(24rem / 17) var(--sys); white-space: nowrap; } .st-undecided { background: rgba(160,160,172,.18); color: #c0c0c8; } .st-proposed { background: rgba(80,140,255,.18); color: #8db6ff; } .st-contested { background: rgba(255,150,60,.18); color: #ffad66; } .st-reserved { background: rgba(240,200,90,.2); color: #f2d16b; } .st-locked { background: rgba(70,200,110,.18); color: #72de93; } :is([data-look="bold"], [data-look="retro"]) .st-undecided { background: #e2e2e6; color: #3e3e46; } :is([data-look="bold"], [data-look="retro"]) .st-proposed { background: #d6e4ff; color: #1f4fb0; } :is([data-look="bold"], [data-look="retro"]) .st-contested { background: #ffe0c7; color: #a24a00; } :is([data-look="bold"], [data-look="retro"]) .st-reserved { background: #fff0b8; color: #7a5a00; } :is([data-look="bold"], [data-look="retro"]) .st-locked { background: #cfeed9; color: #16653a; } [data-look="bold"] .pill { border: 2px solid var(--ink); font-weight: 800; } [data-look="retro"] .pill { min-height: 18px; padding: 0 5px; border-radius: 0; font: 400 calc(11rem / 17)/calc(18rem / 17) var(--font); } [data-look="night"] .pill { border-radius: 4px; font-family: var(--sys); } /* each link's site, beside it (a paragraph's own words stay the doc's: the site is drawn here, not written in) */ .rba[data-site]::after { content: " (" attr(data-site) ")"; font-size: .82em; color: var(--dim); } .rbsite { font-size: var(--fs-foot); font-weight: 400; color: var(--dim); } .rblt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hnmore .rbsite { margin-left: 4px; } /* Publish (Zbo) */ .hpf { display: flex; flex-direction: column; gap: 6px; } .hpf > span { padding: 0 4px; font-size: calc(13rem / 17); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); } .hpcap { min-height: 92px; resize: vertical; font: inherit; line-height: 1.4; } .hpmeta { margin: -6px 4px 0; } .hpbtns { display: flex; flex-direction: column; gap: 10px; } .hpdis.sure { color: #ff6b5b; } /* Zbo's Delete on an update (two taps: it turns red and asks again) */ .hpdel.btn.small { align-self: flex-start; margin-top: 4px; } .hpdel.sure { color: #ff6b5b; } [data-look="retro"] .hpdel.sure { color: #c00; } [data-look="bold"] .hpdel.sure { color: #d42a12; } /* Zbo holds his update line in the Bags' chat to delete it: no words selected, no iPhone menu */ .hubline { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .hkey { margin-top: 2px; } /* Publish: read it first, word for word (a changed Rulebook page opens in place) */ .hpch { gap: 4px; } .hpch small, .hpdet > summary small { display: flex; align-items: center; gap: 6px; font-size: var(--fs-lab); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); } .hpch > span, .hpdet > summary > span { font-size: var(--fs-sub); line-height: 1.4; overflow-wrap: anywhere; } .hpcl { color: var(--dim); } .hpl { display: block; font-size: var(--fs-sub); line-height: 1.4; overflow-wrap: anywhere; } .hpl .hpnew { margin-right: 6px; vertical-align: 1px; } .hpnew { padding: 0 5px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font: 700 var(--fs-lab)/calc(16rem / 17) var(--sys); letter-spacing: .06em; text-transform: uppercase; } .hpdet { display: block; } .hpdet > summary { display: flex; flex-direction: column; gap: 4px; min-height: 44px; justify-content: center; list-style: none; cursor: pointer; } .hpdet > summary::-webkit-details-marker { display: none; } .hpdet > summary > span::after { content: " ›"; color: var(--accent); } .hpdet[open] > summary > span::after { content: " ⌄"; } .hpdet[open] > summary { margin-bottom: 10px; } .hpdet .rbody { padding: 0; font-size: var(--fs-sub); } [data-look="retro"] :is(.hpch small, .hpdet > summary small) { font: 700 var(--fs-lab) var(--font); letter-spacing: 0; text-transform: none; color: #1d3d7a; } [data-look="retro"] .hpnew { border-radius: 0; background: #fff35a; color: #d00000; font: 700 var(--fs-lab)/calc(14rem / 17) var(--font); } [data-look="bold"] .hpnew { border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); line-height: calc(12rem / 17); } [data-look="night"] .hpnew { border: 1px solid #d8b25a; border-radius: 3px; background: none; color: #ffd479; font-family: 'Cinzel', serif; } [data-look="night"] .hpf > span { font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .08em; color: #a8905a; } [data-look="retro"] .hpf > span { font: 700 calc(11rem / 17) var(--font); letter-spacing: 0; text-transform: none; color: #1d3d7a; } [data-look="bold"] .hpf > span { font-weight: 800; color: var(--ink); } /* each Bag's WoW card, on his profile */ .pwow { display: flex; flex-direction: column; gap: 8px; } .pwh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; } .pwh b { font-size: calc(13rem / 17); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } .pwh span { font-size: calc(13rem / 17); color: var(--dim); } .pwl { margin: 0; padding: 0; list-style: none; border-radius: 14px; background: var(--card2); } .pwc { display: flex; align-items: center; gap: 12px; padding: 11px 14px; } .pwc + .pwc { border-top: 1px solid var(--line); } .pws { flex: none; width: 44px; font-size: var(--fs-lab); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); } .pwt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pwt b { font-size: var(--fs-body); overflow-wrap: anywhere; } .pwt small { font-size: var(--fs-sub); line-height: 1.35; color: var(--dim); } .pwn { font-style: italic; } .pwf { margin: 0; padding: 0 4px; font-size: var(--fs-sub); color: var(--dim); } [data-look="night"] .pwh b { font: 700 var(--fs-lab) 'Cinzel', serif; letter-spacing: .08em; color: #a8905a; } [data-look="night"] .pwl { border: 1px solid var(--line); background: rgba(4,6,12,.86); } [data-look="night"] .pwt b { color: #ffd479; } [data-look="retro"] .pwl { border: 1px solid #9fb2cf; border-radius: 0; background: #fff; } [data-look="retro"] :is(.pwh b, .pwh span, .pws, .pwt small, .pwf) { font-family: var(--font); font-size: calc(11rem / 17); letter-spacing: 0; } [data-look="retro"] .pwt b { font: 700 calc(12rem / 17) var(--font); } [data-look="bold"] .pwl { border: 2px solid var(--ink); background: var(--card); } [data-look="bold"] .pwc + .pwc { border-top: 2px solid var(--ink); } [data-look="bold"] .pwh b { font-weight: 800; color: var(--ink); } .frwow { margin: 6px 4px 0; } /* ---- no stray selection (Zbo, Oct 31): holding a row, a button or a header never selects its words or brings up the phone's copy and look-up bubble (or a link's). A message keeps its own long-press menu (chat.js), the links in the Bags' words keep the phone's own, and what you type into, or a code that's there to be copied, stays selectable. */ :where(button, a[href]:not(.tx a), summary, label, [role="button"], header, h1, h2, h3, .ptl, .sh, .hsec, .nmsh, .gr, .grh, .gft, .tm, .newmark, .typing, .rbar, .party), :where(button, a[href]:not(.tx a), summary, label, [role="button"], header, h1, h2, h3, .ptl, .sh, .hsec, .nmsh, .gr, .grh, .gft, .tm, .newmark, .typing, .rbar, .party) * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } :where(input, textarea, [contenteditable]) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .code, .code * { -webkit-user-select: all; user-select: all; } /* ---- the keyboard going away (dragging the chat, a tap beside the messages): the app grows back to the whole screen with the keyboard, not at once (look.js puts "kbgo" on for that moment), so the chat and its message box slide down with it instead of jumping (Zbo, Oct 31) */ @media (prefers-reduced-motion: no-preference) { .kbgo :is(#app, .shell, .sheet:not(.hold)) { transition: height .26s cubic-bezier(.2, .8, .25, 1); } .kbgo :is(.chat, .guild) { transition: padding-bottom .26s cubic-bezier(.2, .8, .25, 1); } } /* ---------------------------------------------------------------- @mentions and muting (roadmap #4; Zbo, Nov 1). Mute on a chat's details (mute.js: its sheet has the four choices, and Unmute while it's muted); a muted chat's row on Home: a bell with a line through it, its count or dot in gray; an @ for what's new in it that's for you (it mentions you or answers you, so it still alerted); the @ picker over the message box (the + menu's card, mentions.js); and a message that mentions you, marked around its words, never on them (they stay exactly as typed). Every look. */ .cdmute.on .ic { color: var(--accent); } .cdact small.cdmu { margin-top: -3px; font-size: var(--fs-lab); font-weight: 500; line-height: 1.2; color: var(--dim); text-align: center; } .mutesheet .grp { background: var(--card2); } .mutesheet .sh.msub { margin: 2px 0 -6px; font: 600 calc(13rem / 17)/1.3 var(--sys); letter-spacing: .02em; color: var(--dim); } [data-look="glass"] .mutesheet .grp { background: var(--w055); box-shadow: inset 0 0 0 1px var(--w06); } [data-look="channel"] .mutesheet .grp { border-radius: 12px; box-shadow: inset 0 0 0 1px #26262d; } [data-look="night"] .mutesheet .sh.msub { font: 700 var(--fs-lab)/1.3 'Cinzel', serif; letter-spacing: .08em; color: #a8905a; } [data-look="night"] .cdact small.cdmu { color: #a8a2b8; } [data-look="retro"] .mutesheet .grp { background: #fff; border: 1px solid #9fb6d8; } [data-look="retro"] .mutesheet .sh.msub { font: 700 calc(11rem / 17) var(--font); letter-spacing: 0; color: #1d3d7a; } [data-look="retro"] .cdact small.cdmu { margin: 0; font: 400 var(--fs-lab) var(--font); color: #444; } [data-look="bold"] .cdact small.cdmu { color: var(--ink); font-weight: 700; } [data-look="bold"] .mutesheet .sh.msub { font-weight: 800; color: var(--ink); } /* Home: a muted chat */ .hmute { flex: none; display: inline-flex; align-items: center; color: var(--dim); } .hmute .ic { width: 15px; height: 15px; stroke-width: 2; } .hrow.muted .hcnt, .hrow.muted .hdot { background: #4a4a52; color: #e6e6ea; } .hat { flex: none; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--accent); color: var(--btn-fg); font: 800 calc(14rem / 17)/calc(21rem / 17) var(--sys); text-align: center; } [data-look="glass"] .hrow.muted .hcnt, [data-look="glass"] .hrow.muted .hdot { background: var(--w20); } [data-look="bold"] .hrow.muted .hcnt, [data-look="bold"] .hrow.muted .hdot { background: #d9d2c3; color: var(--ink); } [data-look="bold"] .hat { min-width: 26px; height: 26px; border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); font: 900 calc(14rem / 17)/calc(22rem / 17) var(--sys); } [data-look="bold"] .hmute { color: var(--ink); } [data-look="channel"] .hit.muted:not(.unread) { color: #6f6f7a; } [data-look="channel"] .hit .hat { margin-left: auto; height: 20px; border-radius: 10px; font-size: calc(13rem / 17); line-height: calc(20rem / 17); } [data-look="channel"] .hit .hat + :is(.hcnt, .hdot) { margin-left: 6px; } [data-look="channel"] .hit .hmute .ic { width: 14px; height: 14px; } [data-look="night"] .hln .hmute { margin-left: 6px; vertical-align: -2px; color: #7d7a93; } [data-look="night"] .hln.muted .hnew { border-color: #5a5a66; background: #1c1c24; color: #9b9aa6; } [data-look="night"] .hln .hat { float: right; min-width: 0; height: auto; margin: 2px 0 0 6px; padding: 1px 6px; border: 1px solid #ffd479; border-radius: 4px; background: linear-gradient(#7a5a10, #3a2a08); color: #fff3c4; font: 800 var(--fs-lab)/1.3 var(--sys); text-shadow: none; } [data-look="retro"] .hbd .hmute .ic { width: 13px; height: 13px; color: #777; } [data-look="retro"] .hbd.muted .hcnt { background: none; color: #777; } [data-look="retro"] .hbd.muted .hburst { border-color: #999; background: #eee; color: #777; } [data-look="retro"] .hbd .hat { min-width: 0; height: auto; padding: 0 4px; border: 1px solid #0018c8; border-radius: 0; background: #fff35a; color: #0018c8; font: 700 calc(11rem / 17) var(--font); transform: rotate(-4deg); } /* the @ picker: the + menu's card, a Bag a row */ .chat.ating > .cmp, [data-look] .chat.ating > .cmp { z-index: 6; } .atm { max-height: min(264px, 40vh); overflow-y: auto; overscroll-behavior: contain; } .pmi.atr { min-height: 52px; gap: 12px; } .pmi.atr.on { background: var(--prs); } .atav { flex: none; position: relative; width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #16161a; font: 700 15px var(--sys); } [data-look="channel"] .atav { border-radius: 9px; } [data-look="bold"] .atav { border: 2px solid var(--ink); color: var(--ink); font-weight: 900; } [data-look="night"] .atav { border: 1px solid #a8905a; box-shadow: inset 0 0 6px rgba(0,0,0,.6); } [data-look="night"] .pmi.atr.on { background: linear-gradient(90deg, rgba(120,150,255,.38), rgba(120,150,255,.06)); } [data-look="night"] .atr .pmt b { font: 700 calc(15rem / 17)/1.25 var(--sys); letter-spacing: 0; } [data-look="retro"] .pmi.atr { min-height: 44px; gap: 8px; } [data-look="retro"] .pmi.atr.on { background: #316ac5; color: #fff; } [data-look="retro"] .pmi.atr.on small { color: #dfe8f7; } [data-look="retro"] .atav { width: 22px; height: 22px; border-radius: 2px; border: 1px solid #6f8fc2; font: 700 11px var(--font); } /* a message that mentions you */ [data-fam="clean"] .m.in.forme .bb { box-shadow: inset 0 0 0 1.5px var(--accent); } [data-look="glass"] .m.in.forme .bb { border-color: rgba(239,207,122,.75); box-shadow: 0 0 16px rgba(239,207,122,.16); } [data-look="channel"] .m.in.forme .bb { box-shadow: none; } [data-look="channel"] .m.forme { background: rgba(242,201,76,.09); box-shadow: inset 3px 0 0 #f2c94c; } [data-look="bold"] .m.in.forme .bb { box-shadow: 4px 4px 0 var(--accent); } [data-look="night"] .m.line.forme { border-radius: 4px; background: rgba(216,178,90,.11); box-shadow: inset 2px 0 0 #d8b25a; } [data-look="retro"] .m.line.forme { background: #ffffe1; box-shadow: inset 2px 0 0 #e0b400; } /* ---------------------------------------------------------------- voice messages (roadmap #5): the mic in Send's place while the box is empty, the strip over the box while recording, and a voice message in each look's own way (play, the waveform lit as it plays, how long, the speed) */ .cmp .sd.mic { display: none; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .cmp.vmic .sd.mic { display: flex; } .cmp.vmic .sd:not(.mic) { display: none; } .cmp .sd.mic .ic { stroke-width: 2.1; } .cmp.rec .pl, .cmp.rec .party { display: none; } .cmp.rec .fd { color: transparent !important; caret-color: transparent !important; pointer-events: none; } .cmp.rec .fd::placeholder { color: transparent !important; } /* held: the mic lights up under the finger */ .cmp.rec:not(.vfree) .sd.mic { background: #ff3b30; color: #fff; transform: scale(1.12); transition: transform .12s; } .cmp.rec.vaway:not(.vfree) .sd.mic { background: #5a5a62; transform: none; } .vrec { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 0 14px; overflow: hidden; color: var(--fg); font: 600 calc(15rem / 17)/1 var(--sys); white-space: nowrap; } .vrd { flex: none; width: 10px; height: 10px; border-radius: 5px; background: #ff3b30; animation: vrdot 1.1s ease-in-out infinite; } @keyframes vrdot { 50% { opacity: .25; } } .vask .vrd, .vkept .vrd { background: var(--dim); animation: none; } .vrt { flex: none; min-width: 34px; font-variant-numeric: tabular-nums; } .vrb, .vrw svg { display: block; height: 24px; fill: #ff3b30; } .vrb { flex: 1; min-width: 24px; } .vrw { display: none; flex: 1; min-width: 24px; } .vrw svg { width: 100%; fill: currentColor; opacity: .75; } .vkept .vrb { display: none; } .vkept .vrw { display: block; } .vaway .vrb { fill: var(--dim); opacity: .5; } .vrh { flex: none; max-width: 62%; overflow: hidden; text-overflow: ellipsis; color: var(--dim); font-weight: 500; font-size: calc(14rem / 17); } .vrh:empty { display: none; } .vaway .vrh { color: #ff453a; font-weight: 700; } .vrx { position: relative; flex: none; display: none; width: 32px; height: 32px; margin-left: -6px; align-items: center; justify-content: center; color: #ff453a; } .vfree .vrx { display: flex; } .vrx .ic { width: 21px; height: 21px; } @media (prefers-reduced-motion: reduce) { .vrd { animation: none; } .cmp.rec .sd.mic { transition: none; } } .vc { --p: 0%; display: flex; align-items: center; gap: 10px; width: min(232px, 57vw); min-height: 40px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .vc .vcp { position: relative; flex: none; width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, currentColor 16%, transparent); } .vc .vcp .ic { width: 15px; height: 15px; fill: currentColor; stroke: none; } .vc .vcp .vpl { margin-left: 2px; } .vc .vpa, .vc.on .vpl { display: none; } .vc.on .vpa { display: block; } .vc.ld .vcp { animation: vcwait 1s ease-in-out infinite; } @keyframes vcwait { 50% { opacity: .45; } } .vc .vcw { position: relative; flex: 1; min-width: 56px; height: 28px; } .vc .vcw svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; pointer-events: none; } .vc .vw0 { opacity: .36; } .vc .vw1 { clip-path: inset(0 calc(100% - var(--p)) 0 0); } .vc .vct { flex: none; min-width: 30px; font: 500 calc(13rem / 17)/1 var(--sys); font-variant-numeric: tabular-nums; opacity: .78; text-align: right; } .vc.er .vct { opacity: 1; font-size: var(--fs-foot); } .vc.er .vcp { opacity: .5; } .vc .vcs { position: relative; flex: none; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 12px; font: 700 var(--fs-lab)/calc(24rem / 17) var(--sys); text-align: center; background: color-mix(in srgb, currentColor 14%, transparent); } .vc .vcp::before, .vc .vcs::before, .vc .vcw::before, .vrx::before { content: ''; position: absolute; inset: min(0px, calc((100% - 44px) / 2)); } @media (prefers-reduced-motion: reduce) { .vc.ld .vcp { animation: none; opacity: .6; } } /* Clean and Glass (iMessage): in the bubble, a little tighter round it */ [data-fam="clean"] .m .bb:has(> .vc) { padding: 6px 12px 6px 7px; } [data-look="glass"] .vrec { color: #f4f4f6; } /* Channel (Slack): a clip card under the name */ [data-look="channel"] .m .bb:has(> .vc) { padding: 4px 0 2px; } [data-look="channel"] .vc { width: min(300px, 72vw); padding: 6px 10px 6px 6px; border: 1px solid #2a2a31; border-radius: 12px; background: #16161a; } [data-look="channel"] .vc .vcp { width: 36px; height: 36px; border-radius: 18px; background: var(--accent); color: #1f1a0a; } [data-look="channel"] .vc .vw0 { opacity: .3; } [data-look="channel"] .vc .vcs { border: 1px solid #2a2a31; border-radius: 7px; background: #1d1d22; } /* Bold (ink cards): ink play button, ink bars, a chunky speed tag */ [data-look="bold"] .m .bb:has(> .vc) { padding: 7px 12px 7px 8px; } [data-look="bold"] .vc .vcp { width: 36px; height: 36px; border-radius: 18px; background: var(--ink); color: var(--card); } [data-look="bold"] .vc .vw0 { opacity: .3; } [data-look="bold"] .vc .vct { font-weight: 800; opacity: 1; } [data-look="bold"] .vc .vcs { border: 2px solid var(--ink); border-radius: 10px; background: rgba(255,255,255,.55); line-height: calc(20rem / 17); } [data-look="bold"] .cmp.rec:not(.vfree) .sd.mic { background: #ff5a4f; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .vrec { color: var(--ink); } [data-look="bold"] .vrb { fill: #e0281c; } /* BANTOWN Night: a small frame in the line, gold play, the party's own color in the bars, the gold lighting up as it plays */ [data-look="night"] .m .vc { display: inline-flex; vertical-align: middle; width: min(224px, 58vw); min-height: 36px; margin: 2px 0; padding: 2px 8px 2px 3px; gap: 8px; border: 1px solid #a8905a; border-radius: 5px; background: rgba(6,8,14,.9); box-shadow: inset 0 0 10px rgba(0,0,0,.7); text-shadow: none; } [data-look="night"] .vc .vcp { width: 30px; height: 30px; border: 1px solid #d8b25a; border-radius: 4px; background: radial-gradient(circle at 50% 35%, #2a2414, #07090f 75%); color: #ffd479; } [data-look="night"] .vc .vcw { height: 24px; } [data-look="night"] .vc .vw1 { fill: #ffd479; } [data-look="night"] .vc .vct { font: 700 var(--fs-lab)/1 'Cinzel', serif; letter-spacing: .06em; color: #a8905a; opacity: 1; } [data-look="night"] .vc .vcs { min-width: 30px; height: 20px; border: 1px solid #a8905a; border-radius: 3px; background: linear-gradient(#4a3814, #1d1508); color: #ffd479; font: 700 var(--fs-lab)/calc(18rem / 17) 'Cinzel', serif; } [data-look="night"] .cmp .sd.mic .ic { display: none; } [data-look="night"] .cmp .sd.mic .sdt { display: inline; } [data-look="night"] .cmp.rec:not(.vfree) .sd.mic { border-color: #ff6b5b; background: linear-gradient(#7a1d14, #3a0c08); color: #ffb1a6; transform: none; } [data-look="night"] .vrec { color: #aaaaff; font: 600 calc(15rem / 17)/1 var(--sys); text-shadow: 0 1px 0 #000; } [data-look="night"] .chat.dm .vrec { color: #ff80ff; } [data-look="night"] .vrt { font: 700 calc(13rem / 17)/1 'Cinzel', serif; letter-spacing: .06em; color: #ffd479; } [data-look="night"] .vrh { color: #a8905a; font: 600 calc(13rem / 17)/1 var(--sys); } [data-look="night"] .vaway .vrh { color: #ff6b5b; } /* 2006 Retro: a little media player in the line, a glossy blue play button, Verdana everywhere */ [data-look="retro"] .m .vc { display: inline-flex; vertical-align: middle; width: min(214px, 60vw); min-height: 32px; margin: 2px 0; padding: 2px 6px 2px 3px; gap: 6px; border: 1px solid #7f9dc9; border-radius: 3px; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; } [data-look="retro"] .vc .vcp { width: 26px; height: 26px; border: 1px solid #23458c; border-radius: 13px; background: var(--gloss); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } [data-look="retro"] .vc .vcp .ic { width: 12px; height: 12px; } [data-look="retro"] .vc .vcw { height: 20px; } [data-look="retro"] .vc .vw0 { opacity: .45; fill: #6f8fc2; } [data-look="retro"] .vc .vw1 { fill: #2a58bd; } [data-look="retro"] .vc .vct { min-width: 28px; font: 400 calc(11rem / 17)/1 var(--font); opacity: 1; } [data-look="retro"] .vc .vcs { min-width: 28px; height: 18px; padding: 0 4px; border: 1px solid #9fb2cf; border-radius: 3px; background: linear-gradient(#ffffff, #dfe7f2); color: #23458c; font: 700 var(--fs-lab)/calc(16rem / 17) var(--font); } [data-look="retro"] .cmp.rec:not(.vfree) .sd.mic { border-color: #8c1f0e; background: linear-gradient(#ff9d8a, #d9381e); transform: none; } [data-look="retro"] .vrec { gap: 6px; padding: 0 8px; color: #000; font: 400 calc(13rem / 17)/1 var(--font); } [data-look="retro"] .vrt { font: 700 calc(12rem / 17)/1 var(--font); } [data-look="retro"] .vrb { fill: #d9381e; } [data-look="retro"] .vrh { padding: 3px 5px; border: 1px solid #e3c34b; background: #fff7c2; color: #3a2a00; font: 400 calc(11rem / 17)/1.2 var(--font); } [data-look="retro"] .vaway .vrh { border-color: #d9381e; background: #ffe3de; color: #7a1200; font-weight: 700; } [data-look="retro"] .vrx { color: #d9381e; } /* ---------------------------------------------------------------- /roll (roadmap #6): "Kbag rolls 87 (1-100)", the game's way, a line of its own across the chat (chat.js rollNode), his name a tap from his profile. Clean, Glass and Bold: a pill in the middle (the part that lifts when it's held), the die and the number in the look's own color; Channel: a row with a die where the face goes, Slack's way; Night: the game's own yellow line; Retro: a line between stars, like the IM window's other notices. */ .m.roll .rln { position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; unicode-bidi: isolate; } .m.roll .rln::before { content: ''; position: absolute; inset: min(-13px, calc((100% - 46px) / 2)) min(-6px, calc((100% - 46px) / 2)); } .m.roll .rlv { font-weight: 800; font-variant-numeric: tabular-nums; } .m.roll .rlt { unicode-bidi: isolate; } [data-fam="clean"] .m.roll { justify-content: center; flex-wrap: wrap; margin-top: var(--runs); } [data-fam="clean"] .m.roll .mb { max-width: 92%; align-items: center; } [data-fam="clean"] .m.roll .bb.rlb { padding: 7px 16px 7px 12px; border-radius: 999px; background: var(--card2); color: var(--fg); font: 500 calc(15rem / 17)/1.35 var(--sys); text-align: center; } [data-fam="clean"] .m.roll .bb.rlb:has(> .rq) { border-radius: 18px; text-align: left; } [data-fam="clean"] .m.roll .rld { width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; color: var(--accent); stroke-width: 2; } [data-fam="clean"] .m.roll .rlv { color: var(--accent); } [data-fam="clean"] .m.roll .retry { flex-basis: 100%; text-align: center; } [data-fam="clean"] .m.roll.rcont { margin-top: 6px; } [data-look="glass"] .m.roll .bb.rlb { background: var(--w09); border: 1px solid var(--w10); box-shadow: inset 0 1px 0 var(--w08); } [data-look="bold"] .m.roll .bb.rlb { padding: 8px 18px 8px 14px; border: 2px solid var(--ink); background: #ffd35a; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; } [data-look="bold"] .m.roll .rld, [data-look="bold"] .m.roll .rlv { color: var(--ink); } [data-look="bold"] .m.roll .rlv { font-weight: 900; } .hold .hlift .m.roll .bb { transform-origin: center; } /* Channel: Slack's way, a row with a die in the face's place, the words in one line with the time after them */ [data-look="channel"] .m.roll.in { margin-top: 14px; } [data-look="channel"] .m.roll .mb { align-items: flex-start; } [data-look="channel"] .m.roll .rldie { display: flex; align-items: center; justify-content: center; background: #2a2416; color: #f6df9a; } [data-look="channel"] .m.roll .rldie .ic { width: 24px; height: 24px; } [data-look="channel"] .m.roll .bb.rlb { padding: 9px 0 0; border: 0; border-radius: 0; color: var(--fg); font-size: calc(16rem / 17); line-height: 1.4; text-align: left; } [data-look="channel"] .m.roll .rt { margin-left: 8px; } /* (one roll after another: the die once, the rest close under it, as Slack runs one app's messages together) */ [data-look="channel"] .m.roll.rcont { margin-top: 0; } [data-look="channel"] .m.roll.rcont .rldie { height: 0; margin: 0; visibility: hidden; } [data-look="channel"] .m.roll.rcont .bb.rlb { padding-top: 2px; } /* Night: the game's system yellow; Retro: a notice between stars */ [data-look="night"] .m.line.roll { color: #ffff00; } [data-look="night"] .m.line.roll .rln, [data-look="night"] .m.line.roll .rlv { font-weight: 600; } [data-look="retro"] .m.line.roll { color: #6b4e00; } [data-look="retro"] .m.line.roll .rls { color: #8a8a8a; } /* ---------------------------------------------------------------- Activity (roadmap #7): what a Bag is up to, until a time he picks (activity.js). On his face: the emoji in a little badge at its bottom left (the top right is for something new, the bottom right for being here), where his face is big enough to hold one: messages, Home, Friends, New message, a chat's members and details, his profile, Me. Each look its own: a round sticker in Clean and Glass, a rounded square in Channel, an ink sticker in Bold, the game's buff icon in Night, a 2006 buddy icon's badge in Retro. Where a row has no face to speak of (Channel's sidebar, Night's and Retro's lists) the emoji follows his name, and on his row in Friends and on his profile it's in words, with until when. */ .hasact { position: relative; } .actb { display: none; position: absolute; left: -4px; bottom: -4px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; background: #26262d; box-shadow: 0 0 0 2px var(--actring, var(--bg)); font: 400 11px/1 var(--sys); font-style: normal; letter-spacing: 0; text-shadow: none; pointer-events: none; overflow: hidden; } /* (where a face shows it: each of these sets its size and place, never its shape: that's the look's, below) */ .chat .m .av > .actb, .hrow .hav.hone > .hface > .actb, .hme .hface > .actb, .bags .av > .actb, .nmrow .av > .actb, .prow .av > .actb, .yourow .av > .actb, .chf.one > i > .actb, .dmav > .actb, .cdfaces.one > i > .actb, .wav > .actb { display: flex; } .chat .m .av > .actb { width: 14px; height: 14px; left: -5px; bottom: -4px; font-size: 9px; } .hrow .hav.hone > .hface > .actb { width: 22px; height: 22px; left: -3px; bottom: -3px; font-size: 13px; } .hme .hface > .actb { width: 16px; height: 16px; left: -4px; bottom: -4px; font-size: 10px; } .tbf > .actb { display: flex; width: 14px; height: 14px; left: -5px; bottom: -4px; font-size: 9px; } /* (your face on Me in the bar at the bottom) */ .prow .av > .actb, .yourow .av > .actb { width: 26px; height: 26px; left: -3px; bottom: -3px; font-size: 15px; } .cdfaces.one > i > .actb { width: 30px; height: 30px; left: 0; bottom: 0; font-size: 18px; } .grp, .sheet-in, .nmsheet { --actring: var(--card); } .nmsheet { --actring: var(--card2); } /* Channel's sidebar and the lists in Night and Retro: after his name (Channel's little sidebar faces don't wear it) */ .hact { flex: none; margin-left: 6px; font-size: calc(14rem / 17); line-height: 1; font-style: normal; } [data-look="channel"] .hrow.hit .hav.hone > .hface > .actb { display: none; } [data-look="channel"] .hit .hact { margin-left: 4px; } [data-look="night"] .hln .hact { vertical-align: 1px; } [data-look="retro"] .hbd .hact { font-size: calc(12rem / 17); margin-left: 4px; } /* in words: his row in Friends, his profile, Me */ .pact { margin-top: 6px; color: var(--fg); font-size: var(--fs-sub); line-height: 1.38; overflow-wrap: anywhere; unicode-bidi: isolate; } .fract, .actv { unicode-bidi: isolate; } :is(.actrow, .cardrow) { gap: 10px; padding-top: 4px; padding-bottom: 4px; } :is(.actrow, .cardrow) .gk { flex: none; color: var(--dim); font-size: var(--fs-sub); } :is(.actrow, .cardrow) .actv { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--fg); } :is(.actrow, .cardrow) .actv.none { color: var(--dim); } /* the sheet: a few to pick from, his own words and an emoji, how long, Set (and Clear it) */ .actsheet .grp { background: var(--card2); } .actsheet .sh.msub { margin: 2px 0 -6px; font: 600 calc(13rem / 17)/1.3 var(--sys); letter-spacing: .02em; color: var(--dim); } .actsheet .apre { min-height: 52px; gap: 12px; } .actsheet .ape { flex: none; width: 30px; text-align: center; font-size: calc(22rem / 17); line-height: 1; } .actsheet .apre .gv { font-size: calc(14rem / 17); } .actnow { margin: 0; color: var(--fg); font-weight: 600; overflow-wrap: anywhere; unicode-bidi: isolate; } .actown { display: flex; align-items: center; gap: 10px; } .acte { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--card2); font-size: 24px; line-height: 1; } .acte.none { opacity: .45; } .actown .actw { flex: 1; min-width: 0; } .actemo { display: flex; gap: 4px; margin: 0 -4px; padding: 0 4px 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .actemo::-webkit-scrollbar { display: none; } .aem { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: calc(22rem / 17); line-height: 1; } .aem[aria-pressed="true"] { background: var(--prs-card); box-shadow: inset 0 0 0 2px var(--accent); } /* Glass */ [data-look="glass"] .hasact > .actb { background: rgba(42,42,52,.94); } [data-look="glass"] .actsheet .grp { background: var(--w055); box-shadow: inset 0 0 0 1px var(--w06); } [data-look="glass"] .acte { background: var(--w08); } /* Channel: rounded squares, like its faces */ [data-look="channel"] .hasact > .actb { border-radius: 28%; background: #222228; } [data-look="channel"] .actsheet .grp { border-radius: 12px; box-shadow: inset 0 0 0 1px #26262d; } [data-look="channel"] .acte, [data-look="channel"] .aem { border-radius: 10px; } /* Bold: an ink sticker */ [data-look="bold"] .hasact > .actb { background: #fffdf8; box-shadow: 0 0 0 1.5px var(--ink), 1.5px 1.5px 0 1.5px var(--ink); } [data-look="bold"] .pact { display: inline-block; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 12px; background: #ffd35a; color: var(--ink); font-weight: 700; box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .acte { border: 2px solid var(--ink); background: var(--card); } [data-look="bold"] .aem[aria-pressed="true"] { background: #ffd35a; box-shadow: inset 0 0 0 2px var(--ink); } [data-look="bold"] .actsheet .sh.msub { font-weight: 800; color: var(--ink); } /* Night: the game's buff icon, gold-edged, on the portrait */ [data-look="night"] .hasact > .actb { border-radius: 3px; background: radial-gradient(circle at 50% 35%, #1d2338, #07090f 75%); box-shadow: 0 0 0 1px #a8905a, 0 0 6px rgba(0,0,0,.8); } [data-look="night"] .pact, [data-look="night"] .actnow { color: #ffd479; } [data-look="night"] .fract { color: #c9c3a8; } [data-look="night"] .actsheet .sh.msub { font: 700 var(--fs-lab)/1.3 'Cinzel', serif; letter-spacing: .08em; color: #a8905a; } [data-look="night"] .acte, [data-look="night"] .aem { border-radius: 4px; } [data-look="night"] .acte { border: 1px solid #a8905a; background: radial-gradient(circle at 50% 35%, #1d2338, #07090f 75%); } [data-look="night"] .aem[aria-pressed="true"] { background: rgba(120,150,255,.22); box-shadow: inset 0 0 0 1px #ffd479, 0 0 8px rgba(242,193,78,.4); } /* Retro: a buddy icon's square badge; the words an away message, in italics */ [data-look="retro"] .hasact > .actb { border-radius: 0; background: #fff; box-shadow: 0 0 0 1px #6f8fc2; } [data-look="retro"] :is(.bags, .nmsheet) .av > .actb { width: 13px; height: 13px; left: -4px; bottom: -4px; font-size: 9px; } [data-look="retro"] :is(.fract, .pact, .actnow) { font-style: italic; } [data-look="retro"] .pact { font: italic 400 calc(12rem / 17)/1.4 var(--font); color: #000; } [data-look="retro"] .actsheet .grp { background: #fff; border: 1px solid #9fb6d8; } [data-look="retro"] .actsheet .sh.msub { font: 700 calc(11rem / 17) var(--font); letter-spacing: 0; color: #1d3d7a; } [data-look="retro"] .acte, [data-look="retro"] .aem { border-radius: 2px; } [data-look="retro"] .acte { border: 2px solid; border-color: #8a9bb8 #e8eef8 #e8eef8 #8a9bb8; background: #fff; } [data-look="retro"] .aem[aria-pressed="true"] { background: #c3d1ea; box-shadow: inset 0 0 0 1px #316ac5; } /* ---------------------------------------------------------------- Help (Zbo, Nov 1; the canvas, row 9): Me → Help (Tips, a switch, with Show all tips again under it while they're on; the How-to guide), the guide's page (a group per area, each closed until tapped; a search over it), and its lines in Home's search. Every look: Clean and Glass like the iPhone's Settings, Channel like Slack's help, Bold as ink cards, Night as the game's own help window, Retro as a 2006 Help Topics window (a book for each group, + and − to open it). Every tap at least 44 pt. */ .gi-yellow { background: #e3a20f; } .gi-teal { background: #1d9e96; } .gi-gold { background: #b98f33; } [data-look="bold"] .gi-yellow { background: #ffd35a; } [data-look="bold"] .gi-teal { background: #5fd6c9; } [data-look="bold"] .gi-gold { background: #f0c25a; } /* the switch (the iPhone's: a track and a knob; Night and Retro: their own check box), a 44 pt tap */ .tsw { position: relative; flex: none; width: 63px; height: 44px; margin: -7px -6px -7px 0; display: flex; align-items: center; justify-content: center; } .tsk { position: relative; display: block; width: 51px; height: 31px; border-radius: 16px; background: #39393d; transition: background-color .2s; } .tsk::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .2s ease; } .tsw[aria-checked="true"] .tsk { background: var(--btn); } .tsw[aria-checked="true"] .tsk::after { transform: translateX(20px); } /* pressed: a little darker, and (the iPhone's) the knob stretches toward where it's going */ [data-look] .tsw.prs { opacity: 1; filter: brightness(.86); } :is([data-look="clean"], [data-look="fyi"], [data-look="glass"], [data-look="channel"]) .tsw.prs .tsk::after { width: 31px; } :is([data-look="clean"], [data-look="fyi"], [data-look="glass"], [data-look="channel"]) .tsw.prs[aria-checked="true"] .tsk::after { transform: translateX(16px); } @media (prefers-reduced-motion: reduce) { .tsk, .tsk::after { transition: none; } } .gr.stack.tipset { gap: 2px; padding-bottom: 4px; } .tipsagain { align-self: flex-start; min-height: 44px; color: var(--accent); font-size: var(--fs-body); text-align: left; } /* Me at one part of it (a line of the guide): that part lit for a moment */ .me-sec.flash > .grp, .me-sec.flash > .looks, .me-sec.flash > .lookrow { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .4s; } [data-look="glass"] .tsw[aria-checked="true"] .tsk { background: linear-gradient(180deg, #f9e6aa, #efcf7a); } [data-look="glass"] .tsk { background: var(--w16); } [data-look="channel"] .tsk { background: #3a3a44; } [data-look="bold"] .tsk { background: var(--card); box-shadow: inset 0 0 0 2px var(--ink); } [data-look="bold"] .tsk::after { top: 5px; left: 5px; width: 21px; height: 21px; background: var(--ink); box-shadow: none; } [data-look="bold"] .tsw[aria-checked="true"] .tsk { background: var(--btn); box-shadow: inset 0 0 0 2px var(--ink), 2px 2px 0 var(--ink); } [data-look="night"] .tsk { width: 24px; height: 24px; border-radius: 3px; background: linear-gradient(#1a1f33, #0c0f1a); box-shadow: inset 0 0 0 1px #8a6d2c, 0 0 0 1px #000; } [data-look="night"] .tsk::after { top: 3px; left: 8px; width: 6px; height: 12px; border-radius: 0; background: none; border: solid #ffd100; border-width: 0 3px 3px 0; box-shadow: none; transform: rotate(45deg) scale(0); } [data-look="night"] .tsw[aria-checked="true"] .tsk { background: linear-gradient(#1a1f33, #0c0f1a); box-shadow: inset 0 0 0 1px #c9a24a, 0 0 0 1px #000, 0 0 8px rgba(255,209,0,.3); } [data-look="night"] .tsw[aria-checked="true"] .tsk::after { transform: rotate(45deg) scale(1); } [data-look="retro"] .tsk { width: 15px; height: 15px; border-radius: 0; background: linear-gradient(135deg, #dcdcd7, #fff); box-shadow: inset 0 0 0 1px #1c5180; } [data-look="retro"] .tsk::after { top: 2px; left: 5px; width: 3px; height: 7px; border-radius: 0; background: none; border: solid #21a121; border-width: 0 2px 2px 0; box-shadow: none; transform: rotate(45deg) scale(0); } [data-look="retro"] .tsw[aria-checked="true"] .tsk { background: linear-gradient(135deg, #dcdcd7, #fff); } [data-look="retro"] .tsw[aria-checked="true"] .tsk::after { transform: rotate(45deg) scale(1); } [data-look="retro"] .tipsagain { font: 400 calc(12rem / 17) var(--font); color: #0018c8; text-decoration: underline; } /* the guide's page */ .howto .hw-body { gap: 0; } .hwsf { display: flex; align-items: center; gap: 8px; height: 44px; padding-left: 12px; border-radius: 12px; background: var(--card2); color: var(--dim); } .hwsf > .ic { width: 18px; height: 18px; } .hwsf:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); } .hwq { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--fg); font-size: var(--fs-body); -webkit-appearance: none; appearance: none; } .hwq::placeholder { color: var(--dim); opacity: 1; } .hwq::-webkit-search-cancel-button { display: none; } .hwx { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--dim); } .hwx .ic { width: 18px; height: 18px; } .hwsaid { margin: 10px 16px 0; color: var(--dim); font-size: var(--fs-foot); line-height: calc(18rem / 17); } .hwgs { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .hwg { border-radius: var(--grp-r); background: var(--card); overflow: hidden; } .hwh { width: 100%; display: flex; align-items: center; gap: 14px; min-height: var(--row); padding: 11px 16px; text-align: left; } .hwpm, .hwbk, .hwpg { display: none; } .hwn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-body); line-height: 1.3; } .hwn small { color: var(--dim); font-size: var(--fs-sub); line-height: 1.38; } .hwc { flex: none; color: var(--dim); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; } .hwtw { flex: none; width: 16px; height: 16px; color: var(--dim); transition: transform .2s ease; } .hwg.open .hwtw { transform: rotate(90deg); } .hwls { display: flex; flex-direction: column; } .hwln { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 11px 16px 12px; text-align: left; } .hwln::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); pointer-events: none; } .hwtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hww { font-size: var(--fs-body); line-height: 1.3; color: var(--fg); } .hwhow { font-size: var(--fs-sub); line-height: 1.38; color: var(--dim); } .hwui { font-weight: 500; color: var(--fg); } .hwhit { padding: 0; background: none; color: var(--accent); font-weight: 600; } .hwln > .gc { flex: none; width: 16px; height: 16px; color: var(--dim); } .hwln.flash { animation: hwflash 1.8s ease-out; } @keyframes hwflash { 0%, 45% { background-color: var(--prs); } 100% { background-color: transparent; } } @media (prefers-reduced-motion: reduce) { .hwtw { transition: none; } .hwln.flash { animation: none; background-color: var(--prs); } } [data-look] :where(.hwh, .hwln.go, .hhow, .hhowmore).prs { opacity: 1; background-color: var(--prs); } /* Glass: its frosted bar over the page, as on Me */ [data-look="glass"] .howto > .hd.page { position: absolute; top: 0; left: 0; right: 0; } [data-look="glass"] .howto.scrolled > .hd.page { background: var(--frost); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border-bottom-color: var(--w07); } [data-look="glass"] .hw-body { padding-top: calc(44px + var(--sat)); } [data-look="glass"] .hwsf { background: var(--w08); } [data-look="glass"] .hwg { background: var(--w055); box-shadow: inset 0 0 0 1px var(--w06); } [data-look="glass"] .hwln::before { background: var(--w08); } /* Channel: Slack's help: a plain search box, each group a section with its caret first, matches in yellow */ [data-look="channel"] .hwsf { border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px #3a3a44; } [data-look="channel"] .hwsf:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(246,223,154,.2); } [data-look="channel"] .hwgs { gap: 2px; margin-top: 14px; } [data-look="channel"] .hwg { border-radius: 0; background: none; overflow: visible; } [data-look="channel"] .hwh { gap: 8px; min-height: 44px; padding: 8px 8px 8px 4px; border-radius: 8px; } [data-look="channel"] .hwh .gi { display: none; } [data-look="channel"] .hwtw { order: -1; width: 14px; height: 14px; color: var(--fg); } [data-look="channel"] .hwn { font: 700 calc(15rem / 17)/calc(20rem / 17) var(--sys); } [data-look="channel"] .hwc { font-size: calc(13rem / 17); } [data-look="channel"] .hwln { padding: 8px 8px 9px 26px; border-radius: 8px; } [data-look="channel"] .hwln::before { display: none; } [data-look="channel"] .hww { font: 700 calc(15rem / 17)/1.35 var(--sys); } [data-look="channel"] .hwhow { font-size: var(--fs-sub); } [data-look="channel"] .hwhit { border-radius: 3px; background: rgba(246,223,154,.24); color: var(--fg); } /* Bold: each group an ink card; what you searched for marked like a highlighter */ [data-look="bold"] .hwsf { border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .hwq { height: calc(100% + 4px); margin: -2px 0; } /* (the box itself 44 tall, over its frame's border) */ [data-look="bold"] .hwsf:focus-within { box-shadow: 3px 3px 0 var(--ink), inset 0 0 0 1px var(--ink); } [data-look="bold"] .hwgs { gap: 14px; } [data-look="bold"] .hwg { border: 2px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .hwg.open .hwh { border-bottom: 2px solid var(--ink); } [data-look="bold"] .hwg.open .hwln:first-child::before { display: none; } [data-look="bold"] .hwn { font-weight: 800; } [data-look="bold"] :is(.hwc, .hwtw) { color: var(--ink); font-weight: 700; } [data-look="bold"] .hwln::before { height: 1.5px; background: rgba(24,22,27,.28); } [data-look="bold"] .hww { font-weight: 700; } [data-look="bold"] .hwui { font-weight: 800; color: var(--ink); } [data-look="bold"] .hwhit { border-radius: 3px; background: #ffd35a; color: var(--ink); font-weight: 800; } [data-look="bold"] .hwln > .gc { color: var(--ink); } /* Night: the game's own help window: a dark panel, quest-log headers in the game's yellow with + and − */ [data-look="night"] .hwsf { border-radius: 4px; background: rgba(4,6,12,.9); color: #a8905a; box-shadow: inset 0 0 0 1px #5a4a24, inset 0 0 12px rgba(0,0,0,.7); } [data-look="night"] .hwsf:focus-within { box-shadow: inset 0 0 0 1px #c9a24a, inset 0 0 12px rgba(0,0,0,.7); } [data-look="night"] .hwq::placeholder { color: #8a7650; } [data-look="night"] .hwsaid { color: #8a7650; } [data-look="night"] .hwgs { gap: 0; margin-top: 14px; padding: 8px 14px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,6,12,.86); box-shadow: inset 0 0 30px rgba(0,0,0,.65); } [data-look="night"] .hwgs::before { content: 'Help topics'; padding: 2px 0 6px; font: 700 var(--fs-lab)/1 'Cinzel', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #a8905a; } [data-look="night"] .hwg { border-radius: 0; background: none; overflow: visible; } [data-look="night"] .hwh { gap: 10px; min-height: 44px; padding: 6px 0; text-shadow: 0 1px 0 #000; } [data-look="night"] :is(.hwh .gi, .hwtw) { display: none; } [data-look="night"] .hwpm { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; background: linear-gradient(#2a2f45, #10131f); box-shadow: inset 0 0 0 1px #8a6d2c; color: #ffd100; font: 700 calc(16rem / 17)/1 var(--sys); } [data-look="night"] .hwn { font: 700 calc(15rem / 17)/1.3 var(--sys); color: #ffd100; } [data-look="night"] .hwn small { color: #8a7650; font-size: var(--fs-foot); font-weight: 600; } [data-look="night"] .hwc { color: #8a7650; font-size: calc(13rem / 17); } [data-look="night"] .hwln { padding: 6px 0 8px 30px; text-shadow: 0 1px 0 #000; } [data-look="night"] .hwln::before { left: 30px; background: rgba(216,178,90,.14); } [data-look="night"] .hww { font: 600 calc(15rem / 17)/1.35 var(--sys); color: #e9e6dc; } [data-look="night"] .hwhow { font: 500 var(--fs-sub)/1.4 var(--sys); color: #b8b2a0; } [data-look="night"] .hwui { font-weight: 600; color: #f0e3b8; } [data-look="night"] .hwhit { border-radius: 2px; background: rgba(255,209,0,.16); color: #ffd100; } [data-look="night"] .hwln > .gc { color: #8a7650; } /* Retro: 2006 Help Topics: "Type in the keyword to find", a white tree with a book and + / − for each group, a page with a ? for each line, its words a link's blue */ [data-look="retro"] .hw-body { gap: 0; } [data-look="retro"] .hwsrch::before { content: 'Type in the keyword to find:'; display: block; margin: 0 2px 3px; font: 700 calc(12rem / 17) var(--font); color: #1d3d7a; } [data-look="retro"] .hwsf { height: var(--box); padding-left: 6px; gap: 6px; border: 1px solid #7f9db9; border-radius: 0; background: #fff; color: #555; } [data-look="retro"] .hwq { height: calc(100% + 2px); margin: -1px 0; } /* (the box itself 44 tall, over its frame's border) */ [data-look="retro"] .hwsf:focus-within { box-shadow: none; border-color: #2a58bd; } [data-look="retro"] .hwsf > .ic { width: 15px; height: 15px; } [data-look="retro"] .hwq { font: 400 calc(13rem / 17) var(--font); color: #000; } [data-look="retro"] .hwx { margin: -6px 0; color: #444; } [data-look="retro"] .hwsaid { margin: 4px 2px 0; font: 400 calc(11rem / 17) var(--font); color: #444; } [data-look="retro"] .hwgs { gap: 0; margin-top: 8px; padding: 4px 0 6px; border: 1px solid #9fb6d8; background: #fff; } [data-look="retro"] .hwg { border-radius: 0; background: none; } [data-look="retro"] .hwh { gap: 6px; min-height: 44px; padding: 0 8px; color: #000; } [data-look="retro"] :is(.hwh .gi, .hwtw) { display: none; } [data-look="retro"] .hwpm { display: flex; flex: none; align-items: center; justify-content: center; width: 11px; height: 11px; border: 1px solid #919b9c; background: linear-gradient(#fff, #e3e3db); color: #000; font: 700 calc(11rem / 17)/1 var(--font); } [data-look="retro"] .hwbk { display: flex; flex: none; } [data-look="retro"] .hwbk .ic { width: 18px; height: 18px; fill: #ffd76a; stroke: #8a5a00; stroke-width: 1.5; } [data-look="retro"] .hwn { font: 400 calc(12rem / 17) var(--font); } [data-look="retro"] .hwg.open .hwnm { font-weight: 700; } [data-look="retro"] .hwn small, [data-look="retro"] .hwc { font: 400 calc(11rem / 17) var(--font); color: #555; } [data-look="retro"] .hwln { gap: 6px; padding: 4px 8px 4px 31px; } [data-look="retro"] .hwln::before { display: none; } [data-look="retro"] .hwpg { display: block; position: relative; flex: none; align-self: flex-start; width: 12px; height: 15px; margin-top: 1px; border: 1px solid #7a8aa6; background: #fff; } [data-look="retro"] .hwpg::after { content: '?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 calc(10rem / 17) var(--font); color: #2a58bd; } [data-look="retro"] .hww { font: 400 calc(12rem / 17)/1.35 var(--font); color: #0018c8; } [data-look="retro"] .hwln.go .hww { text-decoration: underline; } [data-look="retro"] .hwhow { font: 400 calc(11rem / 17)/1.35 var(--font); color: #333; } [data-look="retro"] .hwui { font-weight: 700; color: #000; } [data-look="retro"] .hwhit { background: #316ac5; color: #fff; font-weight: 400; } [data-look="retro"] .hwln > .gc { display: none; } [data-look="retro"] :where(.hwh, .hwln.go, .hhow, .hhowmore).prs { background-color: var(--prs); } [data-look="retro"] :where(.hwh, .hwln.go, .hhow, .hhowmore).prs * { color: #fff !important; } /* Home's search: the guide's lines that match, after the Bags and before the messages, like the messages found */ .hhow { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 76px; padding: 0 var(--gut); text-align: left; } .hhow .hpv { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .hhows > .hhow:last-child .htx, .hhows > .hhow:has(+ .hhowmore) .htx { border-bottom: 0; } .htile.hhowt { color: var(--accent); } .hhowmore { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: calc(100% - 2 * var(--gut)); min-height: 44px; margin: 0 var(--gut); color: var(--accent); font-size: var(--fs-sub); font-weight: 600; text-align: left; } .hhowmore .ic { width: 16px; height: 16px; } [data-look="channel"] .hhow .hav { border-radius: 12px; } [data-look="bold"] .hhow { width: calc(100% - 32px); min-height: 70px; margin: 0 16px 10px; padding: 8px 12px; gap: 12px; border: 2px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .hhow .htx { padding: 0; border-bottom: 0; } [data-look="bold"] .htile.hhowt { background: #6fb2ff; color: var(--ink); } [data-look="bold"] .hhowmore { color: var(--ink); text-decoration: underline; } [data-look="bold"] .hhow.prs { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); } [data-look="night"] .hhow { min-height: 52px; padding: 6px 0; gap: 0; text-shadow: 0 1px 0 #000; } [data-look="night"] .hhow .hav { display: none; } [data-look="night"] .hhow .htx { padding: 2px 0 6px; border-bottom: 1px solid rgba(216,178,90,.14); } [data-look="night"] .hhow .hnm { font: 700 calc(15rem / 17)/1.35 var(--sys); color: #ffd100; } [data-look="night"] .hhow .htm { color: #8a7650; font-size: var(--fs-foot); } [data-look="night"] .hhow .hpv { color: #c9c6d8; font: 600 var(--fs-sub)/1.4 var(--sys); } [data-look="night"] .hhowmore { width: 100%; margin: 0; color: #ffd100; } [data-look="retro"] .hhow { min-height: 44px; gap: 0; padding: 0 8px; font: 400 calc(12rem / 17) var(--font); color: #000; } [data-look="retro"] .hhow .hav { display: none; } [data-look="retro"] .hhow .htx { gap: 1px; padding: 4px 0; border-bottom: 1px solid #e3e9f3; } [data-look="retro"] .hhow .hnm { font: 700 calc(12rem / 17) var(--font); color: #0018c8; } [data-look="retro"] .hhow .htm { font: 400 calc(11rem / 17) var(--font); color: #555; } [data-look="retro"] .hhow .hpv { font: 400 calc(12rem / 17)/1.35 var(--font); color: #333; } [data-look="retro"] .hhowmore { width: calc(100% - 16px); margin: 0 8px; font: 400 calc(12rem / 17) var(--font); color: #0018c8; text-decoration: underline; } /* ---------------------------------------------------------------- polls (roadmap #8): a card in every look (chat.js pollCard), never in the sender's color: what it is, the question, each answer a tap to vote (my pick ticked) with its bar and the faces behind it, and a line under it (how many voted, when it ends; a decision: how many said Yes, and that it locks at 4), with End poll for its maker and, once a decision locks, In Decisions. The words show as typed. Clean and Glass: iMessage's card; Channel: Slack's; Bold: an ink card; Night: the game's own window, gold on black; Retro: a 2006 IM poll window, its blue title bar and radio buttons. */ .vtc { display: flex; flex-direction: column; gap: 10px; width: min(296px, 70vw); max-width: 100%; color: var(--fg); font-family: var(--sys); text-align: left; } .vtk { display: flex; align-items: center; gap: 6px; color: var(--dim); font: 700 var(--fs-lab)/1.2 var(--sys); letter-spacing: .05em; text-transform: uppercase; } .vtk .ic { flex: none; width: 15px; height: 15px; stroke-width: 2.2; } .vtq { font: 600 var(--fs-msg)/var(--lh-msg) var(--sys); overflow-wrap: anywhere; unicode-bidi: isolate; white-space: pre-wrap; } .vto { display: flex; flex-direction: column; gap: 6px; } .vtb { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px 8px 10px; border-radius: 12px; overflow: hidden; background: var(--card2); color: var(--fg); font: 500 calc(16rem / 17)/1.3 var(--sys); text-align: left; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .vtb > :not(.vtbar) { position: relative; } .vtbar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 24%, transparent); pointer-events: none; transition: width .3s ease; } @media (prefers-reduced-motion: reduce) { .vtbar { transition: none; } } .vtx { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 2px solid color-mix(in srgb, var(--fg) 42%, transparent); border-radius: 11px; } .vtc.multi .vtx { border-radius: 6px; } .vtx .ic { width: 14px; height: 14px; stroke-width: 3; opacity: 0; } .vtb[aria-pressed="true"] .vtx { border-color: var(--accent); background: var(--accent); color: var(--btn-fg); } .vtb[aria-pressed="true"] .vtx .ic { opacity: 1; } .vtc:not([data-state="open"]) .vtx { display: none; } /* (over: the tally alone) */ .vtt { flex: 1; min-width: 0; overflow-wrap: anywhere; unicode-bidi: isolate; white-space: pre-wrap; } .vtf { flex: none; display: flex; padding-left: 6px; } .vtf .vfa { flex: none; width: 20px; height: 20px; margin-left: -6px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px var(--card2); color: #16161a; font: 700 10px/20px var(--sys); text-align: center; } .vtn { flex: none; min-width: 16px; font: 700 calc(15rem / 17)/1 var(--sys); font-variant-numeric: tabular-nums; text-align: right; } .vtb:disabled { opacity: 1; color: var(--fg); cursor: default; } .vtwin .vtt { font-weight: 700; } .vtc:not([data-state="open"]) .vtwin .vtbar { background: color-mix(in srgb, var(--accent) 40%, transparent); } .vtft { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; color: var(--dim); font: 500 var(--fs-sub)/1.3 var(--sys); } .vts { min-width: 0; } .vtend, .vtgo { position: relative; flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 0; color: var(--accent); font: 600 var(--fs-foot)/1.3 var(--sys); white-space: nowrap; } .vtend::before, .vtgo::before { content: ''; position: absolute; inset: min(-14px, calc((100% - 46px) / 2)) -10px; } .vtend.armed { color: #ff453a; } .vtgo .ic { width: 13px; height: 13px; stroke-width: 2.4; } .vtc[data-state="locked"] .vtk { color: #34c759; } [data-look] .vtb.prs { opacity: 1; background-color: var(--prs-card); } /* who picked what, in the long-press menu (each look's own words for it, like the reactions above it) */ .hold .vtwho .vtwa { display: inline-block; vertical-align: bottom; max-width: 45%; margin-right: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; unicode-bidi: isolate; } /* Clean (iMessage): a card of its own, on either side */ [data-fam="clean"] .m .bb.vtbb { padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--fg); } [data-fam="clean"] .m.out .bb.vtbb { max-width: 100%; color: var(--fg); } [data-fam="clean"] .m.out .bb.vtbb .rq { background: rgba(0,0,0,.2); border-left-color: #888 !important; } /* Glass: frosted, gold bars */ [data-look="glass"] .m .bb.vtbb, [data-look="glass"] .m.out .bb.vtbb { border: 1px solid var(--w10); border-radius: 20px; background: var(--w07); background-image: none; box-shadow: inset 0 1px 0 var(--w08); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); } [data-look="glass"] .vtb { background: var(--w08); } [data-look="glass"] .vtbar { background: linear-gradient(90deg, rgba(239,207,122,.34), rgba(239,207,122,.16)); } [data-look="glass"] .vtb[aria-pressed="true"] .vtx { background: linear-gradient(180deg, #f9e6aa, #efcf7a); border-color: #efcf7a; } [data-look="glass"] .vtf .vfa { box-shadow: 0 0 0 2px #2a2a31; } /* Channel (Slack): a bordered card under the name, rows of answers */ [data-look="channel"] .m .bb.vtbb { padding: 4px 0 2px; border: 0; border-radius: 0; } [data-look="channel"] .vtc { width: min(340px, 76vw); padding: 12px 14px; border: 1px solid #2a2a31; border-radius: 12px; background: #16161a; } [data-look="channel"] .vtk { font-size: calc(13rem / 17); letter-spacing: 0; text-transform: none; } [data-look="channel"] .vtb { border: 1px solid #2a2a31; border-radius: 8px; background: #1d1d22; } [data-look="channel"] .vtbar { background: rgba(246,223,154,.16); } [data-look="channel"] .vtx { border-radius: 6px; } [data-look="channel"] .vtf .vfa { border-radius: 6px; box-shadow: 0 0 0 2px #1d1d22; } /* Bold: an ink card, ink-edged answers filling up yellow */ [data-look="bold"] .m .bb.vtbb { padding: 12px; border: 2px solid var(--ink); border-radius: 22px; } [data-look="bold"] .vtc, [data-look="bold"] .vtb:disabled { color: var(--ink); } [data-look="bold"] .vtk { color: var(--ink); opacity: .72; } [data-look="bold"] .vtb { border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); font-weight: 600; } [data-look="bold"] .vtbar { background: #ffd35a; } [data-look="bold"] .vtc:not([data-state="open"]) .vtwin .vtbar { background: #ffb43a; } [data-look="bold"] .vtx { border-color: var(--ink); } [data-look="bold"] .vtb[aria-pressed="true"] .vtx { border-color: var(--ink); background: var(--ink); color: #ffd35a; } [data-look="bold"] .vtf .vfa { box-shadow: 0 0 0 2px var(--ink); } [data-look="bold"] .vtn { font-weight: 900; } [data-look="bold"] .vtend, [data-look="bold"] .vtgo { color: var(--ink); font-weight: 800; text-decoration: underline; } [data-look="bold"] .vtend.armed { color: #d81b0e; } [data-look="bold"] .vtc[data-state="locked"] .vtk { color: #13852e; opacity: 1; } [data-look="bold"] .vtb.prs { background-color: #ffeeae; transform: translate(1px, 1px); } /* BANTOWN Night: the game's own window in the line, gold-edged, the answers its buttons, the picked one lit */ [data-look="night"] .m .vtc { width: min(300px, 76vw); margin: 6px 0 2px; padding: 10px 10px 8px; gap: 8px; border: 1px solid #a8905a; border-radius: 6px; background: rgba(6,8,14,.92); box-shadow: 0 0 0 1px #000, inset 0 0 18px rgba(0,0,0,.7); color: #e9e6dc; text-shadow: 0 1px 0 #000; } [data-look="night"] .vtk { color: #ffd100; font: 700 var(--fs-lab)/1.2 'Cinzel', serif; letter-spacing: .06em; } [data-look="night"] .vtq { color: #fff; font: 600 var(--fs-msg)/1.4 var(--sys); } [data-look="night"] .vtb, [data-look="night"] .vtb:disabled { border: 1px solid #5a4a2a; border-radius: 4px; background: linear-gradient(#1b2033, #0c0f1a); color: #e9e6dc; font: 600 calc(15rem / 17)/1.3 var(--sys); } [data-look="night"] .vtbar { background: linear-gradient(90deg, rgba(216,178,90,.42), rgba(216,178,90,.18)); } [data-look="night"] .vtx { width: 20px; height: 20px; border: 1px solid #a8905a; border-radius: 3px; background: #07090f; } [data-look="night"] .vtb[aria-pressed="true"] { border-color: #d8b25a; box-shadow: 0 0 8px rgba(255,209,0,.18); } [data-look="night"] .vtb[aria-pressed="true"] .vtx { border-color: #ffd100; background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; } [data-look="night"] .vtf { display: none; } [data-look="night"] .vtn { color: #ffd479; font: 700 calc(13rem / 17)/1 'Cinzel', serif; } [data-look="night"] .vtft { color: #a8905a; font: 600 var(--fs-sub)/1.3 var(--sys); } [data-look="night"] .vtend, [data-look="night"] .vtgo { color: #ffd100; font: 700 var(--fs-lab)/1.3 var(--sys); } [data-look="night"] .vtend.armed { color: #ff6b5b; } [data-look="night"] .vtc[data-state="locked"] .vtk { color: #1eff00; } [data-look="night"] .vtb.prs { background: linear-gradient(#262d48, #141a2c); } /* 2006 Retro: a little poll window in the line, its blue title bar, radio buttons (a box each where several go) */ [data-look="retro"] .m .vtc { width: min(280px, 76vw); margin: 4px 0; padding: 0 0 6px; gap: 6px; border: 1px solid #7f9dc9; border-radius: 3px; background: #fff; color: #000; box-shadow: 1px 1px 2px rgba(0,0,0,.25); font-family: var(--font); } [data-look="retro"] .vtk { padding: 3px 6px; background: var(--gloss); color: #fff; font: 700 calc(11rem / 17)/1.2 var(--font); letter-spacing: 0; text-transform: none; text-shadow: 0 1px 0 #1d3d7a; } [data-look="retro"] .vtk .ic { width: 12px; height: 12px; } [data-look="retro"] .vtc[data-state="locked"] .vtk { color: #fff; background: linear-gradient(#2b852a, #247a23 50%, #1f6e1f 51%, #237622); text-shadow: 0 1px 0 #1d5a1d; } [data-look="retro"] .vtq, [data-look="retro"] .vto, [data-look="retro"] .vtft { margin: 0 6px; } [data-look="retro"] .vtq { font: 700 calc(13rem / 17)/1.35 var(--font); } [data-look="retro"] .vto { gap: 2px; } [data-look="retro"] .vtb, [data-look="retro"] .vtb:disabled { gap: 6px; padding: 4px 6px; border: 1px solid #dfe7f2; border-radius: 0; background: #f7f9fd; color: #000; font: 400 calc(12rem / 17)/1.3 var(--font); } [data-look="retro"] .vtbar { background: #c3d1ea; } [data-look="retro"] .vtx { width: 13px; height: 13px; border: 1px solid #1c5180; border-radius: 7px; background: linear-gradient(135deg, #dcdcd7, #fff); } [data-look="retro"] .vtc.multi .vtx { border-radius: 0; } [data-look="retro"] .vtx .ic { width: 11px; height: 11px; stroke-width: 3.4; color: #21a121; } [data-look="retro"] .vtb[aria-pressed="true"] .vtx { border-color: #1c5180; background: linear-gradient(135deg, #dcdcd7, #fff); color: #21a121; } [data-look="retro"] .vtc:not(.multi) .vtb[aria-pressed="true"] .vtx .ic { display: none; } [data-look="retro"] .vtc:not(.multi) .vtb[aria-pressed="true"] .vtx::after { content: ''; width: 5px; height: 5px; border-radius: 3px; background: #21a121; } [data-look="retro"] .vtf { display: none; } [data-look="retro"] .vtn { color: #1d3d7a; font: 700 calc(11rem / 17)/1 var(--font); } [data-look="retro"] .vtft { color: #555; font: 400 calc(11rem / 17)/1.3 var(--font); } [data-look="retro"] .vtend, [data-look="retro"] .vtgo { color: #0018c8; font: 400 calc(11rem / 17)/1.3 var(--font); text-decoration: underline; } [data-look="retro"] .vtend.armed { color: #b3200a; } [data-look="retro"] .vtb.prs { background-color: #dfe8f7; } /* the sheet (+ → Poll): Poll or Decision (the Bags' chat), the question, the answers (2 to 6), more than one, how long */ .vtsheet .grp { background: var(--card2); } .vtsheet .sh.msub { margin: 2px 0 -6px; font: 600 calc(13rem / 17)/1.3 var(--sys); letter-spacing: .02em; color: var(--dim); } .vtanb { display: flex; flex-direction: column; gap: 8px; } .vtanb .sh.msub { margin-bottom: 0; } .vtans { display: flex; flex-direction: column; gap: 8px; } .vtarow { display: flex; align-items: center; gap: 4px; } .vtarow .inp { flex: 1; min-width: 0; } .vtax { position: relative; flex: none; width: 44px; height: 44px; margin-right: -10px; display: flex; align-items: center; justify-content: center; color: var(--dim); } .vtax .ic { width: 18px; height: 18px; } .vtadd { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; color: var(--accent); font: 600 calc(16rem / 17)/1 var(--sys); } .vtadd .ic { width: 18px; height: 18px; stroke-width: 2.4; } .vtsheet .vtmulti .gr { justify-content: space-between; } .vtsheet .vtmulti .gl { flex: 1; } .vtsheet .vtdecn { margin: -4px 0 0; } .vtsheet [hidden] { display: none !important; } [data-look="glass"] .vtsheet .grp { background: var(--w055); box-shadow: inset 0 0 0 1px var(--w06); } [data-look="channel"] .vtsheet .grp { border-radius: 12px; box-shadow: inset 0 0 0 1px #26262d; } [data-look="bold"] .vtsheet .sh.msub { font-weight: 800; color: var(--ink); } [data-look="bold"] .vtsheet .grp { border: 2px solid var(--ink); background: var(--card); } [data-look="bold"] .vtadd { color: var(--ink); text-decoration: underline; font-weight: 800; } [data-look="night"] .vtsheet .sh.msub { font: 700 var(--fs-lab)/1.3 'Cinzel', serif; letter-spacing: .08em; color: #a8905a; } [data-look="night"] .vtadd { color: #ffd100; font: 700 calc(15rem / 17)/1 var(--sys); } [data-look="retro"] .vtsheet .grp { background: #fff; border: 1px solid #9fb6d8; } [data-look="retro"] .vtsheet .sh.msub { font: 700 calc(11rem / 17) var(--font); letter-spacing: 0; color: #1d3d7a; } [data-look="retro"] .vtadd { color: #0018c8; font: 400 calc(12rem / 17) var(--font); text-decoration: underline; } [data-look="retro"] .vtax { color: #b3200a; } /* ---------------------------------------------------------------- raid events (roadmap #9; chat.js raidCard; the canvas, row 12): the poll's card in every look (.vtc), with when it is under the name, then Going, Late and Out side by side (each the poll's answer button, its faces and count), the notes, and the reminder under it. Mine lit in each look's own way; cancelled, dimmed. The sheet: what, a row of days to scroll, the time (Pacific), the reminder. */ .rvw { margin-top: -6px; color: var(--dim); font: 500 var(--fs-sub)/1.35 var(--sys); } .rvo { display: flex; gap: 6px; } .rvb { flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; min-height: 64px; padding: 8px 4px 7px; text-align: center; } .vtb.rvb > * { position: relative; } .rvl { font: 600 calc(15rem / 17)/1.2 var(--sys); } .rvb .vtf { min-height: 18px; padding-left: 6px; } .rvb .vtf .vfa { width: 18px; height: 18px; font-size: 9px; line-height: 18px; } .rvb .vtn { min-width: 0; color: var(--dim); font: 600 calc(13rem / 17)/1 var(--sys); text-align: center; } .rvb[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card2)); } .rvb[aria-pressed="true"] .rvl { color: var(--accent); } .rvns { display: flex; flex-direction: column; gap: 4px; } .rvn { display: flex; align-items: center; gap: 7px; min-width: 0; font: 400 var(--fs-sub)/1.35 var(--sys); color: var(--dim); } .rvn .vfa { flex: none; width: 18px; height: 18px; border-radius: 9px; overflow: hidden; color: #16161a; font: 700 9px/18px var(--sys); text-align: center; } .rvnw { min-width: 0; overflow-wrap: anywhere; unicode-bidi: isolate; } .rvnw b { color: var(--fg); font-weight: 600; } .rvnb { display: flex; gap: 6px; } .rvnb .inp { flex: 1; min-width: 0; min-height: 44px; } .rvnb .btn { flex: none; min-height: 44px; } .vtc.rvc[data-state="cancelled"] .vtq { text-decoration: line-through; opacity: .7; } .vtc.rvc[data-state="cancelled"] .vtk, .vtc.rvc[data-state="over"] .vtk { color: var(--dim); } [data-look="bold"] .vtc.rvc:is([data-state="cancelled"], [data-state="over"]) .vtk { opacity: 1; } [data-look="retro"] .vtc.rvc:is([data-state="cancelled"], [data-state="over"]) .vtk { background: linear-gradient(#f3f5f9, #d9dee8); color: #333; text-shadow: none; } /* (greyed, its words still 4.5:1) */ .vtc.rvc .vtft { flex-wrap: wrap; } .vtc.rvc .rvadd::before { inset: -16px -10px; } /* (Add a note: a 44 pt tap in every look, however small its words) */ [data-look="glass"] .rvb[aria-pressed="true"] { background: rgba(239,207,122,.16); box-shadow: inset 0 0 0 1.5px #efcf7a; } [data-look="glass"] .rvb[aria-pressed="true"] .rvl { color: #efcf7a; } [data-look="glass"] .rvn .vfa { box-shadow: none; } [data-look="channel"] .rvb[aria-pressed="true"] { border-color: #f6df9a; background: rgba(246,223,154,.12); box-shadow: none; } [data-look="channel"] .rvb[aria-pressed="true"] .rvl { color: #f6df9a; } [data-look="bold"] .rvw, [data-look="bold"] .rvn, [data-look="bold"] .rvb .vtn { color: var(--ink); opacity: .78; } [data-look="bold"] .rvb[aria-pressed="true"] { background: #ffd35a; box-shadow: none; } [data-look="bold"] .rvb[aria-pressed="true"] .rvl { color: var(--ink); font-weight: 900; } [data-look="bold"] .rvn b { color: var(--ink); font-weight: 800; } [data-look="night"] .rvw { color: #a8905a; font: 600 var(--fs-sub)/1.35 var(--sys); } [data-look="night"] .rvl { font: 700 var(--fs-lab)/1.2 'Cinzel', serif; letter-spacing: .08em; color: #e9e6dc; } [data-look="night"] .rvb[aria-pressed="true"] { border-color: #d8b25a; background: linear-gradient(#5a4418, #2a1e0a); box-shadow: 0 0 8px rgba(255,209,0,.18); } [data-look="night"] .rvb[aria-pressed="true"] .rvl { color: #ffd479; } [data-look="night"] .rvb .vtn { color: #ffd479; font: 700 var(--fs-lab)/1 'Cinzel', serif; } [data-look="night"] .rvn { color: #c9c6d8; font-size: var(--fs-sub); } [data-look="night"] .rvn .vfa { display: none; } [data-look="night"] .rvn b { color: #ffd100; } [data-look="retro"] .rvw, [data-look="retro"] .rvo, [data-look="retro"] .rvns, [data-look="retro"] .rvnb { margin-left: 6px; margin-right: 6px; } [data-look="retro"] .rvw { margin-top: -2px; color: #555; font: 400 calc(11rem / 17)/1.3 var(--font); } [data-look="retro"] .rvo { gap: 3px; } [data-look="retro"] .rvb { min-height: 44px; padding: 3px 2px; gap: 1px; } [data-look="retro"] .rvl { font: 700 calc(12rem / 17)/1.2 var(--font); color: #1d3d7a; } [data-look="retro"] .rvb .vtn { color: #555; font: 400 calc(11rem / 17)/1 var(--font); } [data-look="retro"] .rvb[aria-pressed="true"] { border-color: #1c5180; background: linear-gradient(#fff, #d6f2d2); box-shadow: none; } [data-look="retro"] .rvb[aria-pressed="true"] .rvl { color: #21a121; } [data-look="retro"] .rvn { color: #333; font: 400 calc(11rem / 17)/1.35 var(--font); } [data-look="retro"] .rvn .vfa { display: none; } [data-look="retro"] .rvn b { color: #0018c8; font-weight: 700; } /* its menu: who said what (the poll's lines), Edit event, and Cancel event, a second tap like Delete */ .hold .hmi.raidx { color: #ff9f43; } .hold .hmi.raidx.armed { background: #d63b2c; color: #fff; } .hold .hmi.raidx.armed .hml { font-size: calc(16rem / 17); line-height: calc(19rem / 17); font-weight: 600; } .hold .hmi.raidx.armed .hms { display: block; } [data-look="bold"] .hold .hmi.raidx { color: #b4510a; } [data-look="night"] .hold .hmi.raidx { color: #ff9d2e; } [data-look="retro"] .hold .hmi.raidx { color: #b4510a; } [data-look="retro"] .hold .hmi.raidx .ic { color: #b4510a; } [data-look="retro"] .hold .hmi.raidx.armed, [data-look="retro"] .hold .hmi.raidx.armed .ic { background: #c9372a; color: #fff; } /* the sheet (+ → Raid event) */ .rvdays { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rvdays::-webkit-scrollbar { display: none; } .rvdays .lopt { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 62px; min-height: 48px; line-height: 1.15; } .rvdays .lopt small { font-size: var(--fs-lab); font-weight: 600; opacity: .75; } .rvdays .lopt[aria-pressed="true"] small { opacity: 1; } /* (the day picked: its date as readable as its name) */ .rvdays .lopt .ic { width: 18px; height: 18px; } .rvsheet .rvdate { margin-top: -4px; } .rvsheet .rvtrow .gr { gap: 10px; } .rvsheet .rvtrow .gl { flex: 1; } .rvsheet .rvtime { flex: none; width: auto; min-width: 116px; min-height: var(--box); padding: 0 10px; text-align: center; font-variant-numeric: tabular-nums; } .rvsheet .rvhint { margin: -2px 0 0; } [data-look="night"] .rvdays .lopt small { font: 600 var(--fs-lab) var(--sys); letter-spacing: 0; } [data-look="retro"] .rvdays .lopt { min-width: 54px; min-height: 44px; } [data-look="retro"] .rvdays .lopt small { font: 400 var(--fs-lab) var(--font); } /* the Hub's Next up: a raid event (its tag, your answer, a tap to the chat), and Going, Late and Out while you haven't */ .hnxev { text-align: left; } .hnxev .gl { display: flex; flex-direction: column; gap: 2px; } .hnxk { color: var(--accent); font: 700 var(--fs-lab)/1.2 var(--sys); letter-spacing: .06em; text-transform: uppercase; } .hnxev .hcal { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); } .hnxa b { color: var(--accent); font-weight: 600; } .hnxwrap { gap: 8px; } .hnxwrap .hnxev { padding: 0; min-height: 0; } .hnxrs .rvb { min-height: 44px; } [data-look="bold"] .hnxk, [data-look="bold"] .hnxa b { color: var(--ink); font-weight: 900; } [data-look="night"] .hnxk { color: #ffd100; font-family: 'Cinzel', serif; letter-spacing: .1em; } [data-look="night"] .hnxa b { color: #ffd479; } [data-look="retro"] .hnxk { color: #d9381e; font: 700 var(--fs-lab) var(--font); letter-spacing: 0; text-transform: none; } [data-look="retro"] .hnxa b { color: #21a121; } /* Home's search: the Hub's matches (the guide's rows), an AI tag before an AI-made one's words */ .hhub .hpv .aitag { margin-right: 6px; vertical-align: 1px; } .htile.hhubt { color: #ff9f43; } [data-look="bold"] .htile.hhubt { background: #ffb43a; color: var(--ink); } /* the Hub's Decisions: a decision made in the Bags' chat, a tap from it there */ .hdpoll .gv.hans { margin-right: 2px; } /* ---------------------------------------------------------------- the WoW card (the Hub, step 2; cards.js; the canvas, row 10) */ /* on a profile and in Me: Edit in its heading; under a pick, its vote a tap away, and Ask on your own */ .pwedit { position: relative; min-width: 44px; min-height: 44px; margin: -12px -4px -12px 0; padding: 0 4px; color: var(--accent); font: 600 var(--fs-sub)/1 var(--sys); } .pwgo { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; min-height: 32px; margin-top: 2px; padding: 0; color: var(--accent); font: 600 var(--fs-sub)/1.3 var(--sys); text-align: left; } .pwgo::before { content: ''; position: absolute; inset: -6px -4px; } .pwgo .ic { flex: none; width: 13px; height: 13px; stroke-width: 2.4; } .pwgo.lk { color: #34c759; } .pwgo.ct { color: #ff9f43; } .pwv { color: var(--dim); } .pwask { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font: 600 calc(15rem / 17)/1.2 var(--sys); } .pwask .ic { flex: none; width: 18px; height: 18px; } .pwask.armed { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); } .pwc { align-items: flex-start; } .pwc > .pill { margin-top: 2px; flex: none; } .pwow.sheetcopy .pwl { opacity: .92; } .cdview .pwow { gap: 10px; } [data-look="glass"] .pwedit, [data-look="glass"] .pwgo:not(.lk):not(.ct), [data-look="glass"] .pwask { color: #efcf7a; } [data-look="glass"] .pwask { border-color: rgba(239,207,122,.35); background: rgba(239,207,122,.08); } [data-look="channel"] .pwask { border-radius: 8px; } [data-look="bold"] .pwedit, [data-look="bold"] .pwgo { color: var(--ink); font-weight: 800; text-decoration: underline; } [data-look="bold"] .pwask { border: 2px solid var(--ink); border-radius: 14px; background: #ffd35a; color: var(--ink); font-weight: 800; box-shadow: 2px 2px 0 var(--ink); } [data-look="night"] .pwedit, [data-look="night"] .pwgo { color: #ffd100; } [data-look="night"] .pwgo.lk { color: #1eff00; } [data-look="night"] .pwgo.ct { color: #ff8000; } [data-look="night"] .pwask { border: 1px solid #a8905a; border-radius: 4px; background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; font: 700 var(--fs-lab)/1.2 'Cinzel', serif; letter-spacing: .06em; } [data-look="retro"] .pwedit, [data-look="retro"] .pwgo { color: #0018c8; font: 400 calc(11rem / 17)/1.3 var(--font); text-decoration: underline; } [data-look="retro"] .pwgo.lk { color: #1a7f1a; } [data-look="retro"] .pwgo.ct { color: #b3200a; } [data-look="retro"] .pwask { border: 1px solid #23458c; border-radius: 7px; background: var(--gloss); color: #fff; font: 700 calc(12rem / 17) var(--font); text-shadow: 0 1px 0 #1d3d7a; } [data-look] .pwask.prs { filter: brightness(.9); } /* the editor (Me → WoW card → Edit): the sheet's parts as in + → Poll, chips from the Rulebook's lists */ .cdsheet .grp { background: var(--card2); } .cdsheet .sh.msub { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 0 -6px; font: 600 calc(13rem / 17)/1.3 var(--sys); letter-spacing: .02em; color: var(--dim); } .cdsheet .sh.msub em { font-style: normal; font-weight: 500; letter-spacing: 0; color: var(--accent); } .cdform { display: flex; flex-direction: column; gap: 14px; } .cdform > * { flex: none; } .cdname { display: flex; gap: 8px; } .cdname .inp { flex: 1; min-width: 0; } .cdnotes { display: flex; flex-direction: column; gap: 4px; margin-top: -6px; } .cdnotes:empty { display: none; } .cdnote, .cdwarn { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: #ff9f43; font: 400 var(--fs-sub)/1.35 var(--sys); } .cdnote.ok { color: #34c759; } .cdnote .ic, .cdwarn .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; stroke-width: 2.2; } .cdwarn { margin-top: -6px; } .cdvote { margin: -6px 0 0; color: var(--fg); font: 500 var(--fs-sub)/1.35 var(--sys); } .cdsth { margin-top: -6px !important; font-size: var(--fs-sub); } .cdtabs .lopt { min-width: 64px; } .cdadd { display: inline-flex; align-items: center; gap: 4px; border-style: dashed !important; background: transparent !important; color: var(--accent) !important; } .cdadd .ic { width: 15px; height: 15px; stroke-width: 2.6; } .cdout { position: relative; align-self: flex-start; min-height: 44px; padding: 0 2px; color: #ff6b5b; font: 600 calc(15rem / 17)/1 var(--sys); } .cdsigned { font-size: var(--fs-sub); } .cdsheet [hidden] { display: none !important; } [data-look="glass"] .cdsheet .sh.msub em, [data-look="glass"] .cdadd { color: #efcf7a !important; } [data-look="channel"] .cdsheet .grp { border-radius: 12px; box-shadow: inset 0 0 0 1px #26262d; } [data-look="bold"] .cdsheet .sh.msub { font-weight: 800; color: var(--ink); } [data-look="bold"] .cdsheet .sh.msub em { color: var(--ink); opacity: .7; } [data-look="bold"] .cdadd { color: var(--ink) !important; border-color: var(--ink) !important; } [data-look="bold"] :is(.cdnote, .cdwarn) { color: #b35400; font-weight: 600; } [data-look="bold"] .cdnote.ok { color: #13852e; } [data-look="bold"] .cdout { color: #d81b0e; text-decoration: underline; font-weight: 800; } [data-look="night"] .cdsheet .sh.msub { font: 700 var(--fs-lab)/1.3 'Cinzel', serif; letter-spacing: .08em; color: #a8905a; } [data-look="night"] .cdsheet .sh.msub em { font: 600 var(--fs-lab)/1.3 var(--sys); letter-spacing: 0; color: #ffd100; } [data-look="night"] .cdadd { color: #ffd100 !important; border-color: #a8905a !important; } [data-look="night"] .cdnote.ok { color: #1eff00; } [data-look="night"] :is(.cdnote:not(.ok), .cdwarn) { color: #ff8000; } [data-look="night"] .cdvote { color: #e9e6dc; } [data-look="retro"] .cdsheet .sh.msub { font: 700 calc(11rem / 17) var(--font); letter-spacing: 0; color: #1d3d7a; } [data-look="retro"] .cdsheet .sh.msub em { font: 400 calc(11rem / 17) var(--font); color: #555; } [data-look="retro"] :is(.cdnote, .cdwarn, .cdvote) { font: 400 calc(11rem / 17)/1.35 var(--font); } [data-look="retro"] .cdnote.ok { color: #1a7f1a; } [data-look="retro"] :is(.cdnote:not(.ok), .cdwarn) { color: #b3200a; } [data-look="retro"] .cdadd { color: #0018c8 !important; border-color: #9fb2cf !important; } [data-look="retro"] .cdout { color: #b3200a; font: 400 calc(12rem / 17) var(--font); text-decoration: underline; } [data-look="retro"] .cdname { gap: 4px; } /* a decision about a pick (the Bags chat): the pick itself, exactly what's voted on */ .vtpick { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 7%, transparent); font-family: var(--sys); } .vtpick small { color: var(--dim); font: 700 var(--fs-lab)/1.3 var(--sys); letter-spacing: .05em; text-transform: uppercase; } .vtpick b { font: 600 calc(16rem / 17)/1.3 var(--sys); overflow-wrap: anywhere; unicode-bidi: isolate; } .vtpick span { color: var(--dim); font: 400 var(--fs-sub)/1.35 var(--sys); unicode-bidi: isolate; } [data-look="glass"] .vtpick { background: rgba(0,0,0,.25); } [data-look="channel"] .vtpick { border: 1px solid #2a2a31; border-radius: 8px; background: #1d1d22; } [data-look="bold"] .vtpick { border: 2px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); } [data-look="bold"] .vtpick :is(small, span) { color: var(--ink); opacity: .75; } [data-look="night"] .vtpick { border: 1px solid #5a4a2a; border-radius: 4px; background: rgba(0,0,0,.45); } [data-look="night"] .vtpick small { color: #a8905a; font: 700 var(--fs-lab)/1.3 'Cinzel', serif; letter-spacing: .06em; } [data-look="night"] .vtpick b { color: #ffd479; } [data-look="night"] .vtpick span { color: #c9c3b3; } [data-look="retro"] .m .vtpick { margin: 0 6px; padding: 4px 6px; border: 1px solid #dfe7f2; border-radius: 0; background: #f7f9fd; } [data-look="retro"] .vtpick small { color: #555; font: 700 var(--fs-lab) var(--font); letter-spacing: 0; text-transform: none; } [data-look="retro"] .vtpick b { font: 700 calc(12rem / 17) var(--font); } [data-look="retro"] .vtpick span { color: #333; font: 400 calc(11rem / 17)/1.3 var(--font); } /* ================================================================ getting around, pass 2 (Zbo, Nov 2; the canvas, rows 14 and 15; docs/UX.md, "The audit"): each look's own refinements, with every button in the same spot in all seven. - Back: a pill or a word, whichever the look uses, alike on every screen (a pill: Night, Retro, Glass and Bold; a word: BANTOWN.fyi, Clean and Channel), and always in the same place: the top left, centered in the first 44 pt under the clock (--bkh: its height; a word's box is its 44 pt tap). A header's own button at its right (Night's whisper, the guild chat's connection) sits in that band too. - Retro: each window's title bar is that band (44 pt), with Back's pill, the title, and on Chats New IM at its right. - The + menu's foot: the chat's own Search, Pins, Mute and Details, a thumb away (chat.js drawPlusActs). - Friends: Find a friend and Zbo's invite button at the bottom (friends.js), the look's own bar (Home's, with Home as the hub; with the bar at the bottom, just over it, without a strip of its own). */ :root { --bkh: 44px; } [data-look="glass"] { --bkh: 40px; } [data-look="night"] { --bkh: 36px; } [data-look="bold"] { --bkh: 42px; } /* (a word: its box the whole 44 pt, as a page's is) */ :is([data-look="clean"], [data-look="fyi"], [data-look="channel"]) .dmback { height: 44px; } /* pages and a chat's details: Back in the bar */ .hd.page .pback { top: calc(var(--sat) + (44px - var(--bkh)) / 2); bottom: auto; left: 6px; height: var(--bkh); } /* a chat, a one-to-one chat and the guild chat: Back on its own at the header's left (Night and Retro: in its row) */ [data-fam="clean"] :is(.chat, .guild) .hd > .hback { top: calc(var(--sat) + (44px - var(--bkh)) / 2); left: 6px; transform: none; } /* (a pill 8 px in from the edge, a word 6: the same spot to the eye) */ :is([data-look="bold"], [data-look="glass"]) :is(.chat, .guild) .hd > .hback, :is([data-look="bold"], [data-look="glass"], [data-look="night"]) .hd.page .pback { left: 8px; } [data-look="retro"] .hd.page .pback { left: 0; } :is([data-look="channel"], [data-look="bold"]) .chat.dm .hd { padding-top: var(--sat); } [data-look="channel"] .chat.dm .hd { padding-left: 6px; } [data-look="bold"] .chat:not(.dm) .hd { padding-top: calc(2px + var(--sat)); } /* the header's own button at its right: in the same band */ :is(.chat, .guild) .hd .hset { top: calc(var(--sat) + 2px); bottom: auto; } [data-look="night"] :is(.chat, .guild) .hd .hset { top: calc(var(--sat) + 3px); } [data-look="bold"] :is(.chat, .guild) .hd .hset { top: calc(var(--sat) + 1px); } /* Night: Back on the line of the title, both in the band (the crest and who's here under and beside them) */ [data-look="night"] :is(.chat, .chat.dm, .guild) .hd { padding-top: calc(8px + var(--sat)); padding-left: 8px; } [data-look="night"] :is(.chat, .guild) .hd > .dmback { align-self: flex-start; margin-top: calc((44px - var(--bkh)) / 2 - 8px); } /* the pill each look has in a chat, on its pages too */ [data-look="glass"] .pback { padding: 0 13px 0 4px; border-radius: 20px; color: var(--fg); font: 500 var(--hr)/calc(22 * var(--hr) / 17) var(--sys); background: var(--w08); box-shadow: 0 0 0 1px var(--w10); } [data-look="glass"] .pback .ic { width: 24px; height: 24px; } [data-look="night"] .pback { min-width: 40px; left: 8px; padding: 0 12px 0 6px; border-radius: 18px; border: 1px solid #d8b25a; background: linear-gradient(#4a3814, #1d1508); color: #ffd479; font: 700 calc(13 * var(--hr) / 17)/calc(18 * var(--hr) / 17) 'Cinzel', Georgia, serif; letter-spacing: .06em; } [data-look="night"] .pback .ic { width: 20px; height: 20px; } [data-look="bold"] .pback { min-width: 46px; padding: 0 14px 0 6px; border-radius: 21px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 800 calc(16 * var(--hr) / 17)/calc(20 * var(--hr) / 17) var(--sys); letter-spacing: -.01em; } [data-look="bold"] .pback .ic { width: 22px; height: 22px; stroke-width: 2.6; } :is([data-look="glass"], [data-look="night"], [data-look="bold"]) .pback::before { content: ''; position: absolute; inset: min(0px, calc((100% - 44px) / 2)); } [data-look="bold"] .pback.prs { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); } /* the word each look has in a chat, on its pages too */ [data-look="channel"] .pback { color: #d6d6dd; font-size: calc(16 * var(--hr) / 17); } [data-look="fyi"] .dmback { font-size: calc(18 * var(--hr) / 17); } /* Retro: every window's title bar is the band; Back the same glossy pill in it everywhere */ [data-look="retro"] .tbar { height: 44px; } [data-look="retro"] .hd.page { min-height: calc(44px + var(--sat)); padding-left: 8px; } [data-look="retro"] .tbar .dmback { height: 26px; gap: 1px; margin-right: 8px; padding: 0 8px 0 3px; border: 1px solid #13285a; border-radius: 5px; font: 700 calc(12 * var(--hr) / 17) var(--font); } [data-look="retro"] .tbar .dmback .ic { width: 15px; height: 15px; } [data-look="retro"] .tbar .dmback::before { inset: min(0px, calc((100% - 44px) / 2)) -4px; } /* Retro's Chats: its title, and New IM at the bar's right */ [data-look="retro"] .home .tbar .htl { flex: 1; min-width: 0; margin: 0; font: inherit; letter-spacing: normal; color: inherit; text-shadow: inherit; } [data-look="retro"] .home .tbar .hacts { flex: none; margin: 0 -2px 0 8px; } [data-look="retro"] .home .tbar .hbtn { flex: none; padding: 0 10px; text-shadow: none; font-size: calc(12 * var(--hr) / 17); } /* (New IM: the title bar's size, effortless pass 5) */ /* the + menu's foot: this chat's Search, Pins, Mute and Details, right over the box (a row of four; Night action-bar slots; Retro more lines of its right-click menu) */ .pmacts { display: flex; gap: 4px; padding: 6px; border-top: 1px solid var(--w10); } .pma { position: relative; flex: 1 1 0; min-width: 0; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; border-radius: 12px; color: var(--fg); font: 600 var(--fs-lab)/calc(15rem / 17) var(--sys); text-align: center; } .pma .ic { width: 22px; height: 22px; color: var(--accent); } .pma span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pma.on .ic { color: var(--dim); } [data-look] .pma.prs, .pma:focus-visible { opacity: 1; background: var(--prs); outline: none; } [data-look="channel"] .pma { border-radius: 8px; color: #d6d6dd; } [data-look="channel"] .pma .ic { color: #d6d6dd; } [data-look="bold"] .pmacts { border-top: 2px solid var(--ink); } [data-look="bold"] .pma { color: var(--ink); font-weight: 800; } [data-look="bold"] .pma .ic { color: var(--ink); stroke-width: 2.3; } [data-look="fyi"] .pmacts { border-top-color: var(--line); } [data-look="fyi"] .pma { border-radius: 0; color: var(--soft); font: 700 var(--fs-mono)/calc(14rem / 17) var(--mono); letter-spacing: .06em; text-transform: uppercase; } [data-look="night"] .pmacts { gap: 6px; padding: 8px; border-top: 1px solid #3a3424; } [data-look="night"] .pma { border: 1px solid #a8905a; border-radius: 4px; background: radial-gradient(circle at 50% 35%, #1d2338, #07090f 75%); box-shadow: inset 0 0 8px rgba(0,0,0,.8); color: #ffd479; font: 700 var(--fs-lab)/calc(15rem / 17) 'Cinzel', serif; letter-spacing: .04em; } [data-look="night"] .pma .ic { color: #ffd479; } [data-look="night"] .pma.prs, [data-look="night"] .pma:focus-visible { background: linear-gradient(rgba(120,150,255,.38), rgba(120,150,255,.06)); } [data-look="retro"] .pmacts { flex-direction: column; gap: 0; margin-top: 2px; padding: 3px 0 0; border-top: 0; background: linear-gradient(#c5c5c5, #c5c5c5) 34px 1px / calc(100% - 38px) 1px no-repeat; } [data-look="retro"] .pma { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 4px 10px 4px 7px; border-radius: 0; color: #000; font: 700 calc(12rem / 17)/1.3 var(--font); text-align: left; } [data-look="retro"] .pma .ic { width: 16px; height: 16px; color: #23458c; } [data-look="retro"] .pma.prs, [data-look="retro"] .pma:focus-visible { background: #316ac5; color: #fff; } [data-look="retro"] .pma.prs .ic, [data-look="retro"] .pma:focus-visible .ic { color: #fff; } /* Friends: Find a friend and Zbo's invite at the bottom (Home's bottom bar with Home as the hub; with the bar at the bottom, just over it and without a strip of its own, the keyboard covering the bar as ever) */ .friends:has(> .frdock:not([hidden])) .fr-body, [data-nav="bar"] .friends:has(> .frdock:not([hidden])) .fr-body { padding-bottom: 16px; } .frdock .hsrch { flex: 1; } [data-nav="bar"]:not(.wide) .friends .frdock { padding-bottom: calc(var(--barh) + 4px); background: none; border-top: 0; } /* (an iPad or a computer: its own strip, pass 3) */ [data-nav].kb .friends .frdock { padding-bottom: 6px; } [data-look="retro"] .frdock .hdbtns .hbtn { padding: 0 10px; } /* ================================================================ getting around, pass 3: an iPad and a computer (Zbo, Nov 2; the canvas, row 15: NavIpadA and B, NavWideA and B, NavMacA and B; nav.js, main.js). By the window's width (look.js puts it on : data-lay, and .wide for either of the two below): - "slide" (an iPad upright, 700 to 1099 wide): the page gets the whole width. B's bar is a rail down the left (--rw). Your chats (Home) fill the page while nothing's open; once something is, they're a column that slides in from the left over it (.drawer, --dw), the page dimmed under it (.lscrim: a tap there puts them away). - "split" (an iPad on its side, a computer: 1100 and wider): your chats on the left (--lw) and the page on the right; with nothing picked the right pane says so (.paneph). B: the rail, then the chats, then the page. - data-side (a computer's window, wide enough for three columns): a chat's details sit beside it (.sided, --detw). Each look draws the rail its own way, as it does the bar (the canvas's NavLooks): Clean a dark strip, Glass frosted, Bold an ink card with the place you're in on a yellow sticker, Night a panel of the game framed in gold, BANTOWN.fyi the site's own with signal blue on the place you're in, Channel Slack's own left rail, Retro 2006 folder tabs down the side. Every tap stays at least 44 pt (on touch the rail's places are 60). */ :root { --rw: 0px; --lw: 0px; --dw: min(380px, calc(100vw - var(--rw) - 72px)); --detw: 320px; } :root.wide { --barh: 0px; } :root.wide[data-nav="bar"] { --rw: 84px; } :root[data-lay="split"] { --lw: 372px; } :root[data-lay="split"][data-nav="bar"] { --lw: 340px; } :root[data-lay="split"][data-look="retro"][data-nav="bar"] { --rw: 76px; } :root[data-lay="slide"][data-look="retro"][data-nav="bar"] { --rw: 76px; } /* the page: right of the rail (and of your chats, on its side) */ .wide .screens > :is(.screen, .paneph, .lscrim) { left: calc(var(--rw) + var(--lw)); } .wide .screens > .screen:not(.home) { padding-left: 0; } /* your chats on the left, on its side or a computer */ [data-lay="split"] .screens > .screen.home { left: var(--rw); right: auto; width: var(--lw); z-index: 5; border-right: 1px solid var(--line); } [data-lay="split"][data-nav="bar"] .screens > .screen.home { padding-left: 0; } /* upright: your chats slid in over the page (Home on the whole page while nothing's open) */ [data-lay="slide"] .screens > .screen.home.drawer { left: var(--rw); right: auto; width: var(--dw); z-index: 7; box-shadow: 14px 0 40px rgba(0,0,0,.5); will-change: transform; } .lscrim { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; background: rgba(0,0,0,.42); } /* the right pane with nothing picked */ .paneph { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } .phin { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--dim); font: 600 var(--fs-sub)/1.3 var(--sys); text-align: center; } .phin .ic { width: 44px; height: 44px; stroke-width: 1.4; opacity: .6; } .phin p { margin: 0; } /* a page on a wide pane: its words in a readable width, centered */ .wide .screens > .screen:not(.home) :is(.me-body, .fr-body) { padding-left: max(var(--gut), calc((100% - 760px) / 2)); padding-right: max(var(--gut), calc((100% - 760px) / 2)); } /* ---- the rail (B): the four places down the left side, Search at its foot */ :root.wide .screens > .tabbar { left: 0; right: auto; top: 0; bottom: 0; width: var(--rw); z-index: 8; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 8px; padding: calc(var(--sat) + 12px) 8px calc(12px + var(--sab)); border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #111115; box-shadow: none; } :root.wide .tabbar .tbs { flex: none; flex-direction: column; height: auto; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } :root.wide .tabbar .tab { flex: none; min-height: 60px; gap: 4px; border-radius: 16px; } :root.wide .tabbar .tsrch { flex: none; align-self: center; margin-top: auto; width: 56px; height: 56px; border-radius: 28px; box-shadow: none; } /* Glass: frosted */ :root.wide[data-look="glass"] .screens > .tabbar { background: rgba(16,16,22,.6); border-right-color: var(--w08); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); } :root.wide[data-look="glass"] .tabbar .tab.on { background: var(--w10); } /* Bold: an ink card down the side, the place you're in a yellow sticker */ :root.wide[data-look="bold"] .screens > .tabbar { background: var(--card); border-right: 2px solid var(--ink); } :root.wide[data-look="bold"] .tabbar .tab.on { box-shadow: inset 0 0 0 2px var(--ink), 2px 2px 0 var(--ink); } :root.wide[data-look="bold"] .tabbar .tsrch { box-shadow: 2px 2px 0 var(--ink); } /* Night: a panel of the game, framed in gold */ :root.wide[data-look="night"] .screens > .tabbar { left: 0; right: auto; gap: 8px; padding: calc(var(--sat) + 10px) 8px calc(10px + var(--sab)); border: 0; border-radius: 0; background: #121624; box-shadow: inset -1px 0 0 #3a3424, 1px 0 0 #000, 8px 0 26px rgba(0,0,0,.45); } :root.wide[data-look="night"] .tabbar .tab { min-height: 60px; border-radius: 6px; } :root.wide[data-look="night"] .tabbar .tsrch { width: 52px; height: 52px; border-radius: 6px; } /* BANTOWN.fyi: the site's own strip, the place you're in signal blue with its edge on the left */ :root.wide[data-look="fyi"] .screens > .tabbar { padding: calc(var(--sat) + 10px) 6px calc(10px + var(--sab)); background: var(--card); border-right: 1px solid var(--line); } :root.wide[data-look="fyi"] .tabbar .tab { border-top: 0; border-left: 2px solid transparent; } :root.wide[data-look="fyi"] .tabbar .tab.on { border-left-color: var(--accent); background: var(--prs); } :root.wide[data-look="fyi"] .tabbar .tsrch { width: 54px; height: 54px; } /* Channel: Slack's own left rail: each place an icon on its square, its name under it */ :root.wide[data-look="channel"] .screens > .tabbar { padding: calc(var(--sat) + 12px) 6px calc(12px + var(--sab)); background: #0b0b0e; border-right: 1px solid var(--line); } :root.wide[data-look="channel"] .tabbar .tab { min-height: 64px; gap: 5px; border-radius: 10px; background: none; color: var(--dim); } :root.wide[data-look="channel"] .tabbar .tab .ic, :root.wide[data-look="channel"] .tabbar .tab .tbf { box-sizing: content-box; padding: 6px; border-radius: 10px; } :root.wide[data-look="channel"] .tabbar .tab .tbf { width: 26px; height: 26px; padding: 0; margin: 4px 0; border-radius: 8px; } :root.wide[data-look="channel"] .tabbar .tab.on { background: none; color: #fff; } :root.wide[data-look="channel"] .tabbar .tab.on .ic { background: var(--w14); } :root.wide[data-look="channel"] .tabbar .tsrch { width: 48px; height: 48px; border-radius: 10px; } /* Retro: the buddy list's toolbar down the side, each place a 2006 folder tab facing the page */ :root.wide[data-look="retro"] .screens > .tabbar { gap: 4px; padding: calc(var(--sat) + 8px) 0 calc(8px + var(--sab)) 6px; background: linear-gradient(90deg, #eef3fb, #c9d6ee); border-right: 1px solid #8ea4c6; } :root.wide[data-look="retro"] .tabbar .tbs { gap: 3px; } :root.wide[data-look="retro"] .tabbar .tab { min-height: 56px; margin-right: -1px; border-radius: 4px 0 0 4px; border-right: 0; } :root.wide[data-look="retro"] .tabbar .tab.on { margin-right: -1px; box-shadow: 1px 0 0 #fff; } :root.wide[data-look="retro"] .tabbar .tsrch { width: 46px; height: 46px; margin-right: 6px; border-radius: 4px; } /* ---- your chats beside the page, and slid in over it: each look's edge between them */ [data-lay="split"][data-look="glass"] .screens > .screen.home { border-right-color: var(--w08); } [data-lay="split"][data-look="bold"] .screens > .screen.home { border-right: 2px solid var(--ink); } [data-lay="split"][data-look="night"] .screens > .screen.home { border-right-color: #3a3424; box-shadow: 1px 0 0 #000; } [data-lay="split"][data-look="retro"] .screens > .screen.home { border-right-color: #8ea4c6; } [data-lay="slide"][data-look="bold"] .screens > .screen.home.drawer { border-right: 2px solid var(--ink); box-shadow: 4px 0 0 var(--ink); } [data-lay="slide"][data-look="night"] .screens > .screen.home.drawer { border-right: 1px solid #a8905a; box-shadow: 14px 0 40px rgba(0,0,0,.6); } [data-lay="slide"][data-look="retro"] .screens > .screen.home.drawer { border-right: 1px solid #23458c; box-shadow: 3px 0 0 rgba(10,30,80,.35), 12px 0 24px rgba(10,30,80,.25); } [data-lay="slide"][data-look="fyi"] .screens > .screen.home.drawer { border-right: 1px solid var(--line2); } [data-look="bold"] .lscrim { background: rgba(24,22,27,.22); } [data-look="retro"] .lscrim { background: rgba(10,30,80,.28); } /* the row of the chat (or page) beside your chats: marked, the way each look selects */ .wide .home .hrow.cur { background-color: var(--prs); } :root.wide[data-look="bold"] .home .hrow.cur { background: #ffd35a; } :root.wide[data-look="night"] .home .hrow.cur { background: linear-gradient(90deg, rgba(216,178,90,.2), rgba(216,178,90,.03)); box-shadow: inset 2px 0 0 #d8b25a; } :root.wide[data-look="retro"] .home .hrow.cur { background: #316ac5; } :root.wide[data-look="retro"] .home .hrow.cur, :root.wide[data-look="retro"] .home .hrow.cur :is(b, span, i, .hpv, .hne) { color: #fff; } :root.wide[data-look="channel"] .home .hrow.cur { background: var(--w12); color: #fff; } :root.wide[data-look="channel"] .home .hrow.cur .hnm { color: #fff; font-weight: 700; } :root.wide[data-look="fyi"] .home .hrow.cur { background-color: var(--prs-card); box-shadow: inset 2px 0 0 var(--accent); } /* the right pane's note, each look's own */ [data-look="night"] .phin { color: #a8905a; font: 700 calc(13rem / 17)/1.3 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; } [data-look="night"] .paneph { background: radial-gradient(ellipse at 50% 30%, #1a1f33, #0b0d14 70%); } [data-look="retro"] .paneph { background: #d6dfee; } [data-look="retro"] .phin { color: #1d3d7a; font: 400 calc(12rem / 17) var(--font); } [data-look="bold"] .phin { color: var(--ink); font-weight: 800; } [data-look="fyi"] .phin { color: var(--faint); font: 700 var(--fs-mono)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; } /* ---- a chat's details beside it, on a computer (chat.js .sided): the chat narrows, they sit at its right */ .screens > .screen.chat.sided { right: var(--detw); overflow: visible; } .chat.sided > .cdet { left: 100%; right: auto; width: var(--detw); z-index: 1; border-left: 1px solid var(--line); } .cdbar .cdx { position: absolute; right: 6px; top: calc(var(--sat) + (44px - var(--bkh)) / 2); z-index: 1; width: 44px; height: var(--bkh); display: flex; align-items: center; justify-content: center; border-radius: 22px; color: var(--accent); } .cdbar .cdx .ic { width: 20px; height: 20px; } .cdbar .cdx::before { content: ''; position: absolute; inset: min(0px, calc((100% - 44px) / 2)); } [data-look] .cdbar .cdx.prs { opacity: 1; background-color: var(--prs-card); } [data-look="glass"] .chat.sided > .cdet { border-left-color: var(--w08); } [data-look="bold"] .chat.sided > .cdet { border-left: 2px solid var(--ink); } [data-look="bold"] .cdbar .cdx { border: 2px solid var(--ink); background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); } [data-look="night"] .chat.sided > .cdet { border-left-color: #3a3424; } [data-look="night"] .cdbar .cdx { border: 1px solid #d8b25a; border-radius: 6px; background: linear-gradient(#4a3814, #1d1508); color: #ffd479; } [data-look="retro"] .chat.sided > .cdet { border-left-color: #8ea4c6; } [data-look="retro"] .cdbar .cdx { top: calc(var(--sat) + 9px); right: 6px; width: 26px; height: 26px; border: 1px solid #13285a; border-radius: 4px; background: linear-gradient(#e96d5a, #c4321c); color: #fff; } [data-look="retro"] .cdbar .cdx .ic { width: 14px; height: 14px; stroke-width: 2.6; } [data-look="retro"] .cdbar .cdx::before { inset: min(0px, calc((100% - 44px) / 2)) -6px min(0px, calc((100% - 44px) / 2)) calc(100% - 38px); } /* (44 pt; its room is to its left) */ [data-look="channel"] .cdbar .cdx { color: #d6d6dd; } [data-look="fyi"] .cdbar .cdx { color: var(--soft); } /* ---- photos dragged over a chat, on a computer: where they'd land */ .cdrop { position: absolute; inset: 8px; z-index: 9; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--accent); border-radius: 20px; background: color-mix(in srgb, var(--bg) 82%, transparent); pointer-events: none; } .cdropin { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--accent); font: 700 var(--fs-body)/1.2 var(--sys); } .cdropin .ic { width: 40px; height: 40px; } [data-look="bold"] .cdrop { border: 3px dashed var(--ink); background: rgba(255,211,90,.55); } [data-look="bold"] .cdropin { color: var(--ink); font-weight: 900; } [data-look="night"] .cdrop { border: 1px solid #d8b25a; border-radius: 8px; background: rgba(11,13,20,.85); box-shadow: inset 0 0 30px rgba(242,193,78,.18); } [data-look="night"] .cdropin { color: #ffd479; font: 700 calc(14rem / 17) 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; } [data-look="retro"] .cdrop { border: 2px dashed #2a58bd; border-radius: 0; background: rgba(238,243,251,.88); } [data-look="retro"] .cdropin { color: #1d3d7a; font: 700 calc(13rem / 17) var(--font); } [data-look="fyi"] .cdrop { border: 1px dashed var(--accent); } [data-look="fyi"] .cdropin { font: 800 calc(20rem / 17)/1 var(--title); letter-spacing: .05em; text-transform: uppercase; } /* ================================================================ Me and a chat's details, lighter (effortless, pass 4; Zbo, Nov 3; docs/UX.md Part 2: B1, B2, Q11; the canvas, row 18: E3MeGlass, E3MeFyi, E3MeRetro, E3Privacy, E3Details). Me is one short screen of rows, each opening its sheet or page: your card at the top (your face, your name, who you are here), then a row each with its little picture, its name, what it's set to now (dim, at its right) and the chevron. Its groups' names show only in BANTOWN.fyi (its mono labels) and 2006 Retro (a preferences window: a fieldset for each, a button in each row). Privacy and this phone is a page like Me. The sheets Me's rows open. A chat's details: Safety as one row, a warning row only when something needs checking. Next up's New raid event. */ .me .me-body { gap: 14px; } .me .me-sec > .sh, .mewb, .rtb { display: none; } .merow .gv, .priv .gr > .gv { min-width: 0; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* (their rows the canvas's way: 12 in from the edge, 12 between what's in them, the hairline from where the words start) */ :is(.me, .priv) .gr { gap: 12px; padding-left: 12px; padding-right: 12px; } :is(.me, .priv) .grp > * + .gr::before { left: 12px; } :is(.me, .priv) .grp > * + .gr:has(> .gi)::before { left: 54px; } /* your card: on its own, your face and your name a little bigger than a row */ button.gr.yourow { cursor: pointer; } .me .yourow { gap: 14px; padding: 12px 14px; } .me .yourow .av.big { width: 56px; height: 56px; border-radius: 28px; font-size: 24px; } .me .yourow .yn { font-size: calc(20rem / 17); font-weight: 600; } .yourow .grow { gap: 2px; } .yourow > .ic.gc { margin-left: 4px; } /* Activity and WoW card: rows like the rest (their values your own words, or dim when there's none yet) */ .me :is(.actrow, .cardrow) { gap: 12px; padding-top: 11px; padding-bottom: 11px; } .me :is(.actrow, .cardrow) .gl { flex: none; } /* Alerts: Turn on in its row while they're off */ .mealerts .alon { flex: none; } /* a row lit for a moment (a line of the How-to guide opened it) */ .gr.flash, .ver.flash { box-shadow: inset 0 0 0 2px var(--accent); transition: box-shadow .4s; } /* (the build: a quiet line at Me's foot) */ .me .ver { margin: 0; padding: 0 16px; font-size: var(--fs-foot); } /* ---- the sheets Me's rows open: a group or two, a short note, Done */ .mesheet .me-sec { gap: 8px; } .mesheet .grp { background: var(--card2); } .mesheet .gft { padding: 0 4px; } .mesheet .sh.msub { margin: 2px 0 -6px; font: 600 calc(13rem / 17)/1.3 var(--sys); letter-spacing: .02em; color: var(--dim); } [data-look="glass"] .mesheet .grp { background: var(--w055); box-shadow: inset 0 0 0 1px var(--w06); } [data-look="channel"] .mesheet .grp { border-radius: 12px; box-shadow: inset 0 0 0 1px #26262d; } [data-look="night"] .mesheet .grp { background: rgba(4,6,12,.7); box-shadow: inset 0 0 0 1px #3a3424; } [data-look="night"] .mesheet .sh.msub { font: 700 var(--fs-lab)/1.3 'Cinzel', serif; letter-spacing: .08em; color: #a8905a; } [data-look="retro"] .mesheet .me-sec { border: 0; background: none; } [data-look="retro"] .mesheet .grp { background: #fff; border: 1px solid #9fb6d8; } [data-look="retro"] .mesheet .sh.msub { font: 700 calc(11rem / 17) var(--font); letter-spacing: 0; color: #1d3d7a; } [data-look="bold"] .mesheet .sh.msub { font-weight: 800; color: var(--ink); } /* Look: every look in view at once, four to a row */ .lookgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 4px; padding: 4px 8px 2px; overflow: visible; } .lookgrid .look { justify-self: center; width: min(82px, 100%); } .lookgrid .lp { width: min(76px, calc(100% - 4px)); } .lksheet .lookrow { padding: 12px 0 10px; } [data-look="retro"] .lookgrid { gap: 8px 2px; padding: 2px 4px; } [data-look="retro"] .lookgrid .look { width: min(70px, 100%); } [data-look="retro"] .lookgrid .lp { width: min(64px, calc(100% - 4px)); } /* your picture and name: your face big in the middle, its two buttons under it, then your name in chat */ .yousheet .ypic { display: flex; justify-content: center; padding-top: 2px; } .yousheet .ypic .av.big { width: 96px; height: 96px; border-radius: 48px; font-size: 40px; } .yousheet .ypacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: -4px; } .yousheet .yreal { margin-top: -4px; } .yousheet .yreal[hidden] { display: none; } [data-look="retro"] .yousheet .ypic .av.big { width: 64px; height: 64px; border-radius: 4px; font-size: 28px; } /* your safety code and the handshake */ .mecode .me-sec { gap: 6px; } .mecode .code.mc { padding: 0; border: 0; background: none; text-align: left; font-size: calc(22rem / 17); color: var(--fg); } .mecode .hssec { display: flex; flex-direction: column; gap: 8px; } .mecode .hs { color: var(--fg); } [data-look="retro"] .mecode .code.mc { font-size: 1rem; } /* the Face ID lock: its five choices, and its note */ .locksheet .lockset { display: flex; flex-direction: column; gap: 10px; } .locksheet .gft { padding: 0 2px; } .mesheet .gft.morenote { margin-bottom: 16px; } /* ---- Privacy and this phone: a page like Me (its big title can take two lines) */ .priv .ptl { text-wrap: balance; } [data-look="glass"] .priv > .hd.page { position: absolute; top: 0; left: 0; right: 0; } [data-look="glass"] .priv.scrolled > .hd.page { background: var(--frost); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border-bottom-color: var(--w07); } /* ---- a chat's details: Safety one row, ✓ All checked in calm green (its word and its tick, never the color alone) */ .cdsafe .gv.cdsv { color: var(--dim); } .cdsafe .gv.cdsv.ok { display: inline-flex; align-items: center; gap: 4px; color: #7fe0a6; } .cdsv .ic { width: 17px; height: 17px; stroke-width: 2.6; } [data-look="retro"] .cdsafe .gv.cdsv.ok { color: #1a6e2c; } [data-look="bold"] .cdsafe .gv.cdsv.ok { color: #17663a; font-weight: 700; } .cdsrow.warn { background: #3a1818; } .cdsrow.warn .gn, .cdsrow.warn .gv.cdsv { color: #ffb3a8; font-weight: 600; } .cdsrow.warn small { color: #ffcfc7; } .cdsrow.warn .ic.gc { color: #ffb3a8; } [data-look="retro"] .cdsrow.warn { background: #ffe3de; box-shadow: inset 0 0 0 1px #d9381e; } [data-look="retro"] .cdsrow.warn :is(.gn, .gv.cdsv, small, .ic.gc) { color: #7a1200; } [data-look="retro"] .cdsrow.warn .gi { color: #d9381e; } [data-look="bold"] .cdsrow.warn { background: #ffd9cf; } [data-look="bold"] .cdsrow.warn :is(.gn, .gv.cdsv, small, .ic.gc) { color: #7a1d00; } [data-look="retro"] .cdsafe { border: 1px solid #6f8fc2; } /* the Safety sheet: what needs checking (or ✓ All checked), who can read it, the handshake, each Bag's code */ .safesheet .hssec, .safesheet .codesec { display: flex; flex-direction: column; gap: 8px; } .safesheet .hs { color: var(--fg); } .safesheet .sh.msub { margin: 2px 0 -2px; font: 600 calc(13rem / 17)/1.3 var(--sys); letter-spacing: .02em; color: var(--dim); } .safesheet .sfnow.safe { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body); } .safesheet .sfnow .ic { width: 20px; height: 20px; stroke-width: 2.6; } [data-look="night"] .safesheet .sh.msub { font: 700 var(--fs-lab)/1.3 'Cinzel', serif; letter-spacing: .08em; color: #a8905a; } [data-look="retro"] .safesheet .sh.msub { font: 700 calc(11rem / 17) var(--font); letter-spacing: 0; color: #1d3d7a; } [data-look="bold"] .safesheet .sh.msub { font-weight: 800; color: var(--ink); } /* ---- Next up's New raid event, at its bottom */ .hnxnew .gi .ic { stroke-width: 2.4; } .hnxadd .gn { color: var(--accent); font-weight: 600; } [data-look="bold"] .hnxadd .gn { color: var(--ink); font-weight: 800; } [data-look="night"] .hnxadd .gn { color: #ffd479; } [data-look="retro"] .hnxadd .gn { color: #0018c8; text-decoration: underline; font-weight: 400; } /* ---- 2006 Retro: Me as a preferences window (E3MeRetro): its title bar with the window's buttons, one window under it, a fieldset for each group with its name in the frame, each row's value after its name and a 2006 button at its right (Change…, Open…; the whole row still the tap), Turn on a real one, the build in the window's status bar */ [data-look="retro"] .me .hd.page .mewb { display: flex; margin-left: auto; margin-right: 8px; } [data-look="retro"] .screen.me:not(.chat):not(.guild) .me-body { flex: 0 1 auto; gap: 10px; margin: 8px 8px calc(8px + var(--barh, 0px)); padding: 12px 8px 0; border: 1px solid #8ea4c6; background: #fff; } [data-nav="home"][data-look="retro"] .screen.me .me-body { margin-bottom: calc(8px + var(--sab)); } [data-look="retro"] .me .me-sec { position: relative; gap: 0; border: 1px solid #b6c6e0; background: none; padding: calc(7rem / 17 - 1px) 8px 4px; } /* (room for its legend, at any text size) */ [data-look="retro"] .me .me-sec > .sh { display: block; position: absolute; top: calc(-8rem / 17); left: 6px; padding: 0 4px; background: #fff; border: 0; color: #2a58bd; font: 700 calc(12rem / 17)/calc(14rem / 17) var(--font); text-shadow: none; text-transform: none; letter-spacing: 0; } [data-look="retro"] .me .me-sec .grp { border: 0; background: none; } [data-look="retro"] .me .grp > * + .gr::before { left: 0; height: 0; border-top: 1px dotted #c7d3e8; background: none; } [data-look="retro"] .me .gr { gap: 6px; min-height: 44px; padding: 4px 0; } [data-look="retro"] .me .gr > .gi { display: none; } [data-look="retro"] .me .gr > .ic.gc { display: none; } [data-look="retro"] .me .gl { flex: none; } [data-look="retro"] .me .gr:not(:has(> :is(.gv, .actv))) .gl { flex: 0 1 auto; min-width: 0; } /* (a row with no value: its words wrap before its button goes) */ [data-look="retro"] .me .gl .gn { font-weight: 400; font-size: calc(12rem / 17); } [data-look="retro"] .me .gl small { font-size: calc(11rem / 17); } [data-look="retro"] .me .gr:has(> :is(.gv, .actv)) .gl .gn::after { content: ':'; } [data-look="retro"] .me .gr > :is(.gv, .actv) { flex: 1; min-width: 0; max-width: none; text-align: left; font-style: italic; color: #444; font-size: calc(12rem / 17); } [data-look="retro"] .me .gr > .actv:not(.none) { color: #000; } [data-look="retro"] .me .rtb { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 72px; height: 26px; margin-left: auto; padding: 0 8px; border: 1px solid #7f9db9; border-radius: 3px; background: linear-gradient(#fff, #e3e9f5); color: #000; font: calc(12rem / 17) var(--font); } [data-look="retro"] .me .gr.act.prs .rtb { background: linear-gradient(#e3e9f5, #fff); color: #000 !important; } [data-look="retro"] .me .mealerts .alon { margin-left: auto; min-width: 72px; } [data-look="retro"] .me .yourow { gap: 10px; padding: 6px 0; } [data-look="retro"] .me .yourow .av.big { width: 44px; height: 44px; border-radius: 4px; border: 1px solid #8ea4c6; font-size: 20px; } [data-look="retro"] .me .yourow .grow { flex: 1; } [data-look="retro"] .me .yourow .yn { font-size: calc(14rem / 17); font-weight: 700; } [data-look="retro"] .me .ver { margin: 2px -8px 0; padding: 4px 8px; border-top: 1px solid #b6c6e0; background: #eef3fb; text-align: left; font-size: calc(11rem / 17); color: #444; } [data-look="retro"] :is(.me, .priv) .gr { padding-left: 0; padding-right: 0; } [data-look="retro"] .priv .gr { padding: 6px 8px; } [data-look="retro"] :is(.me, .priv) .grp > * + :is(.gr, .gr:has(> .gi))::before { left: 0; } [data-look="retro"] .priv .me-body { gap: 10px; padding-top: 8px; } /* ================================================================ Send later (#10; Zbo, Nov 5: the canvas, row 21; chat.js `laterSheet`, `heldNode`): the time over the box (the reply bar's own look, a clock in it), Send with a clock, and each message waiting at the bottom of the chat, only its sender's: its words in a dashed outline (never filled, so it never reads as sent), when it goes under it. Every look its own way; never a size under the tokens. */ .lbar > .ic { color: var(--accent); } .cmp .sd.later { position: relative; } .heldm { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 8px var(--gut) 2px; } .heldm .heldb { max-width: 78%; min-height: 44px; padding: var(--bub-y) var(--bub-x); border: 1.5px dashed var(--accent); border-radius: 20px 20px 6px 20px; background: none; color: var(--fg); font: 400 var(--fs-msg)/var(--lh-msg) var(--font); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; } .heldm .hldl { display: flex; align-items: center; gap: 5px; font-size: var(--fs-sub); color: var(--dim); } .heldm .hldl .ic { width: 14px; height: 14px; flex: none; } [data-look="night"] .heldm, [data-look="retro"] .heldm, [data-look="channel"] .heldm { align-items: flex-start; } [data-look="night"] .heldm .heldb { max-width: 100%; border-color: #8a7438; border-radius: 6px; color: #aaaaff; } [data-look="retro"] .heldm { padding: 4px 8px 2px; gap: 2px; } [data-look="retro"] .heldm .heldb { position: relative; max-width: 100%; min-height: 33px; padding: 4px 8px; border: 1px dashed #2a58bd; border-radius: 0; color: #000; font: calc(14rem / 17)/1.35 var(--font); } [data-look="retro"] .heldm .heldb::before { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: max(100% + 12px, 44px); transform: translateY(-50%); } /* (a 44 pt tap, its 2006 look kept) */ [data-look="retro"] .heldm .hldl { font-size: calc(11rem / 17); color: #444; } [data-look="channel"] .heldm .heldb { max-width: 100%; border-color: #5a5a66; border-radius: 10px; } [data-look="bold"] .heldm .heldb { border: 2px dashed var(--ink); border-radius: 22px; color: var(--ink); } [data-look="bold"] .heldm .hldl { color: var(--ink); } [data-look="fyi"] .heldm .heldb { border-radius: 0; border-color: var(--accent); font-family: var(--sys); } [data-look="fyi"] .heldm .hldl { color: var(--hi); } /* the times (Send later's sheet) and a waiting one's sheet: its words in quotes, Send now, Change time, Cancel */ .ltsheet .ltopt .gv { color: var(--fg); } .ltsheet .ltpick { display: flex; } .ltsheet .ltin { flex: 1; min-width: 0; min-height: 44px; } .hdsheet .hdq { margin: 0 0 4px; padding: 10px 12px; border-left: 3px solid var(--accent); color: var(--fg); font-size: var(--fs-body); white-space: pre-wrap; overflow-wrap: anywhere; } [data-look="retro"] .hdsheet .hdq { border-left-color: #2a58bd; font-size: calc(13rem / 17); } /* ================================================================ Me → Alerts (Zbo, Nov 5: the canvas, row 22; alerts.js): this phone on or off, and while on what alerts you, each a switch; Show the words its own group */ .alsheet .alkind { min-height: 52px; } .alsheet .aloff { margin: 0; } /* ================================================================ photos sent together and the Photos page (#11; Zbo, Nov 5: the canvas, row 23, A, and row 24, B; chat.js `albumNode`, `openViewer`, `drawMedia`). An album is one message, tidy squares: two side by side, three as one big and two small, four as a square of four, five to ten as four with "+3" on the last, each photo cropped to its square (the viewer shows it whole). The viewer says "2 of 4", with dots, and on a computer ‹ and › beside the photo. The Photos page: Photos, Voice and Links, one tap apart, a grid and two lists. */ .photo.album { display: grid; gap: 2px; padding: 0; background: transparent; } .album.a2 { grid-template-columns: 1fr 1fr; } .album.a3, .album.a4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .album.a3 > .atile:first-child { grid-row: span 2; } .atile { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; background: rgba(127,127,127,.2); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .amore { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.62); color: #fff; font: 700 calc(1rem + 11px)/1 var(--sys); pointer-events: none; } [data-look="retro"] .amore { font: 700 calc(20rem / 17)/1 var(--font); } [data-look="night"] .amore { font-family: 'Cinzel', serif; } [data-look="bold"] .amore { font-weight: 900; } [data-look="bold"] .m .photo.album { background: var(--ink); } [data-look="fyi"] .amore { font: 800 calc(1rem + 13px)/1 var(--title); } /* the viewer, with photos sent together */ .vcount { position: absolute; z-index: 1; top: calc(12px + var(--sat)); left: 50%; transform: translateX(-50%); min-height: 40px; padding: 0 14px; border-radius: 20px; display: flex; align-items: center; background: rgba(38,38,42,.72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; font: 600 var(--fs-sub)/1 var(--sys); font-variant-numeric: tabular-nums; white-space: nowrap; } .vfoot { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; } .vfoot > * { pointer-events: auto; } .vfoot .vbar { position: static; width: 100%; box-sizing: border-box; } .vdots { display: flex; gap: 6px; pointer-events: none; } .vdots span { width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.5); transition: width .2s; } .vdots span.on { width: 18px; background: #fff; } .vside { position: absolute; z-index: 1; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 22px; display: none; align-items: center; justify-content: center; background: rgba(38,38,42,.72); color: #fff; } .vside .ic { width: 20px; height: 20px; } .vprev { left: calc(12px + env(safe-area-inset-left)); } .vnext { right: calc(12px + env(safe-area-inset-right)); } .vside:disabled { opacity: .35; } @media (hover: hover) and (pointer: fine) { .viewer .vside { display: flex; } } .viewer.zoomed :is(.vdots, .vcount, .vside) { opacity: 0; pointer-events: none; transition: opacity .2s; } @media (prefers-reduced-motion: reduce) { .vdots span { transition: none; } } [data-look="night"] :is(.vcount, .vside) { background: rgba(29,21,8,.85); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid #d8b25a; color: #ffd479; } [data-look="night"] .vcount { font: 700 var(--fs-lab)/1 'Cinzel', serif; letter-spacing: .06em; } [data-look="night"] .vdots span { background: rgba(216,178,90,.55); } [data-look="night"] .vdots span.on { background: #ffd479; } [data-look="retro"] :is(.vcount, .vside) { border-radius: 8px; border: 1px solid #23458c; background: var(--gloss); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); color: #fff; text-shadow: 0 1px 0 #1d3d7a; } [data-look="retro"] .vcount { font: 700 calc(13rem / 17) var(--font); } [data-look="bold"] :is(.vcount, .vside) { background: #fffdf8; color: #18161b; border: 2px solid #18161b; box-shadow: 2px 2px 0 #18161b; -webkit-backdrop-filter: none; backdrop-filter: none; } [data-look="bold"] .vcount { font-weight: 800; } [data-look="glass"][data-solid] :is(.vcount, .vside) { background: #26262a; } [data-look="fyi"] .vcount { font: 700 var(--fs-mono)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; } /* the Photos page: in the details' place, its title always showing; the three tabs under the bar */ .cdet .mbar .pt { opacity: 1; } [data-look="glass"] .cdet > .hd.page.mbar { position: relative; } [data-look="glass"] .cdbody.mbody { padding-top: 6px; } /* (Channel's and Bold's chat header is laid out its own way: the details' bar and the Photos page's keep a page's, the title in the middle, Back at the left) */ :is([data-look="channel"], [data-look="bold"]) .chat .cdet > .hd.page { display: flex; padding: var(--sat) var(--gut) 0; } [data-look="channel"] .chat .cdet > .hd.page { border-bottom: 1px solid transparent; } [data-look="channel"] .chat .cdet.scrolled > .hd.page, [data-look="channel"] .chat .cdet > .hd.page.mbar { border-bottom-color: var(--line); } [data-look="bold"] .chat .cdet > .hd.page { border-bottom: 2px solid transparent; } [data-look="bold"] .chat .cdet.scrolled > .hd.page { border-bottom-color: var(--ink); } .mtabs { flex: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 4px var(--gut) 10px; padding: 3px; border-radius: 12px; background: var(--card); } .mtab { flex: 1 1 0; min-width: max-content; min-height: 44px; padding: 0 6px; border-radius: 9px; color: var(--fg); font: 600 var(--fs-sub)/1.2 var(--sys); text-align: center; } .mtab[aria-selected="true"] { background: var(--btn); color: var(--btn-fg); } .mbody { gap: 22px; padding-top: 6px; } .mgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; } .mgrid li { display: block; min-width: 0; } .mtile { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: rgba(127,127,127,.2); -webkit-touch-callout: none; } .mlist > li { display: flex; min-width: 0; } .mlist > li + li { border-top: 1px solid var(--line); } .mlist .mlink, .mlist .mgo { flex: 1; width: 100%; min-width: 0; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; text-align: left; } .mlist .mgo { flex: none; min-height: 44px; padding-top: 0; padding-bottom: 4px; } .mlink .grow, .mgo .grow { flex: 1; } .mlic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .mlic .ic { width: 18px; height: 18px; } .mlink .grow { gap: 2px; } .mlu { font-weight: 600; font-size: var(--fs-body); color: var(--accent); overflow-wrap: anywhere; unicode-bidi: isolate; } .mlink small, .mgo .grow { color: var(--dim); font-size: var(--fs-sub); } .mgo .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mvrow { flex-direction: column; align-items: stretch; gap: 0; } .mvrow .vc { width: auto; margin: 10px 12px 2px 16px; color: var(--fg); } .mnone { margin: 8px 4px; } .molder { align-self: stretch; } [data-look="glass"] .mtabs { background: var(--w07); box-shadow: inset 0 0 0 1px var(--w08); } [data-look="channel"] .mtabs { border-radius: 10px; box-shadow: inset 0 0 0 1px #1e1e24; } [data-look="channel"] .mtab { border-radius: 7px; } [data-look="bold"] .mtabs { border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); } [data-look="bold"] .mtab { color: var(--ink); font-weight: 800; } [data-look="bold"] .mtab[aria-selected="true"] { background: var(--ink); color: var(--card); } [data-look="bold"] .mtile { border: 2px solid var(--ink); border-radius: 10px; } [data-look="bold"] :is(.mlu, .mlink small, .mgo .grow) { color: var(--ink); } [data-look="bold"] .mlu { font-weight: 800; } [data-look="bold"] .mlic { border: 2px solid var(--ink); background: var(--card); color: var(--ink); } [data-look="bold"] .mvrow .vc { color: var(--ink); } [data-look="night"] .mtabs { background: rgba(18,22,36,.86); box-shadow: inset 0 0 0 1px #3a3424; } [data-look="night"] .mtab { color: #e9e6dc; font-family: 'Cinzel', serif; letter-spacing: .06em; } [data-look="night"] .mtab[aria-selected="true"] { background: linear-gradient(#4a3814, #1d1508); box-shadow: inset 0 0 0 1px #d8b25a; color: #ffd479; } [data-look="night"] .mtile { border-radius: 4px; box-shadow: 0 0 0 1px #3a3424; } [data-look="night"] .mlu { color: #ffd479; } [data-look="night"] .mlic { background: rgba(216,178,90,.14); color: #ffd479; } [data-look="night"] .mvrow .vc { color: #e9e6dc; } [data-look="retro"] .mtabs { gap: 2px; margin: 6px 6px 4px; padding: 0; border-radius: 0; background: none; border-bottom: 1px solid #6f8fc2; } [data-look="retro"] .mtab { min-height: 32px; position: relative; border: 1px solid #9fb2cf; border-bottom: 0; border-radius: 6px 6px 0 0; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; font: 700 calc(12rem / 17) var(--font); } [data-look="retro"] .mtab::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* (44 pt; the 2006 tab kept) */ [data-look="retro"] .mtab[aria-selected="true"] { background: #fff; border-color: #6f8fc2; color: #000; } [data-look="retro"] .mbody { gap: 10px; } [data-look="retro"] .mgrid { gap: 2px; padding: 4px; border: 1px solid #6f8fc2; background: #fff; } [data-look="retro"] .mtile { border-radius: 0; } [data-look="retro"] .mlist .mlink, [data-look="retro"] .mlist .mgo { min-height: 44px; gap: 8px; padding: 4px 6px 4px 8px; } [data-look="retro"] .mlic { width: 24px; height: 24px; border-radius: 0; background: none; color: #1d3d7a; } [data-look="retro"] .mlu { font: 700 calc(13rem / 17) var(--font); color: #1d3d7a; text-decoration: underline; } [data-look="retro"] :is(.mlink small, .mgo .grow) { font: 400 calc(11rem / 17) var(--font); color: #444; } [data-look="retro"] .mvrow .vc { margin: 6px 12px 0 12px; color: #1d3d7a; } /* (room for its play's and speed's 44 pt reach inside the list's edge) */ [data-look="retro"] .mnone { font: 400 calc(13rem / 17) var(--font); color: #444; } [data-look="fyi"] .mlist > li + li { border-top: 0; } [data-look="retro"] .mlist > li + li { border-top-color: #c3cfe2; } [data-look="bold"] .mlist > li + li { border-top: 1.5px solid rgba(24,22,27,.28); } [data-look="fyi"] .mtabs { gap: 2px; padding: 0; background: transparent; } [data-look="fyi"] .mtab { background: var(--card); font: 700 var(--fs-mono)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; } [data-look="fyi"] .mtab[aria-selected="true"] { background: var(--accent); color: var(--bg); } [data-look="fyi"] .mlic { background: none; box-shadow: inset 0 0 0 1px var(--line); } [data-look="fyi"] .mlu { color: var(--hi); font-family: var(--sys); } /* ================================================================ the Bags' own reactions, and read receipts as faces (#12; Zbo, Nov 5: the canvas, rows 25 and 26; his picks: A, the six then a +; made from the + only; only its maker takes one off; the faces where each Bag stopped). A Bag-made reaction is a little round picture wherever an emoji is: the + in a message's menu (mine one of theirs: its picture there, lit), a chip under the message, who gave what. The +'s sheet: the six, the Bags' own with who made each, Make one from a photo. Each Bag's face sits under the last message he's read, at the right, one tap for who and when; Sent under my latest until someone's face is there. Every look its own way; never a size under the tokens (a face's initial is a picture: px). */ .rxi { position: relative; display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; vertical-align: middle; background: color-mix(in srgb, var(--fg) 16%, transparent); } .rxi > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; } .rc.rco { padding-left: 4px; } .rc .rxi { width: 22px; height: 22px; } .hold .hrx .rr.rmore { color: var(--accent); } .hold .hrx .rr.rmore .ic { width: 24px; height: 24px; stroke-width: 2.1; } .hold .hrx .rr.rmore .rxi { width: 30px; height: 30px; } .rwho .rwx { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; } .rwho .rwx .rxi { width: 22px; height: 22px; margin-right: 2px; } .rwho .rxby { color: var(--dim); font-size: var(--fs-lab); } /* the +'s sheet: the six, then the Bags' own four to a row (each its picture, its name, who made it), Make one */ .rxsheet .rxsix { display: flex; gap: 6px; } .rxsheet .rxsix .rr { height: 52px; } :is(.rxsheet, .rdsheet, .rxmk) .sh.msub { margin: 2px 0 -6px; font: 600 calc(13rem / 17)/1.3 var(--sys); letter-spacing: .02em; color: var(--dim); } .rxown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .rxt { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; min-height: 96px; padding: 10px 3px 8px; border-radius: 14px; background: var(--card2); color: var(--fg); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .rxt.on { outline: 2px solid var(--accent); outline-offset: -2px; } .rxt .rxi { width: 44px; height: 44px; } .rxt b { max-width: 100%; font: 600 var(--fs-sub)/1.2 var(--font); text-align: center; overflow-wrap: anywhere; } .rxt small { max-width: 100%; color: var(--dim); font-size: var(--fs-lab); line-height: 1.2; overflow-wrap: anywhere; } .rxmake { gap: 8px; } /* (where the words get big for the room: three to a row, then two; making one, its name over how it looks) */ .sheet-in:is(.rxsheet, .rxmk) { container-type: inline-size; } @container (max-width: 19em) { .rxown { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (max-width: 13em) { .rxown { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rxnrow { flex-direction: column; align-items: stretch; } .rxlk { flex-direction: row; justify-content: flex-start; gap: 10px; } } .rxmake .ic { width: 20px; height: 20px; stroke-width: 2.2; } /* making one: the photo in a square, the circle over it (outside it dimmed), Size, its name and how it looks */ .rxmk .rxstage { position: relative; align-self: center; width: min(300px, 100%); aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: #000; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .rxmk .rxph { position: absolute; left: 0; top: 0; max-width: none; max-height: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; } .rxmk .rxmask { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle closest-side, transparent calc(100% - 1px), rgba(0,0,0,.62) 100%); } .rxmk .rxmask::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--accent); } .rxmk .rxhow { margin: -4px 0 0; text-align: center; } .rxsize { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--dim); font-size: var(--fs-sub); } .rxzoom { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--accent); } .rxnrow { display: flex; align-items: flex-end; gap: 14px; } .rxnrow > label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .rxlk { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--dim); font-size: var(--fs-lab); } .rxlk small { font-size: var(--fs-lab); } .rxlook { width: 50px; height: 50px; border-radius: 50%; background: var(--card2); } /* taking one of mine off: its picture, big, and what it means */ .rxoff { align-items: center; text-align: center; } .rxoff .rxi.big { width: 76px; height: 76px; } .rxoff > .btn { align-self: stretch; } /* the faces of who's read up to here: their own line under the message, at the right; a 44 pt tap that reaches up over the end of its own message, never the next one's */ .mli .m > .rf { flex: 0 0 100%; display: flex; justify-content: flex-end; min-height: 24px; padding: 2px 2px 0; } [data-fam="clean"] .m:has(> .rf) { flex-wrap: wrap; } [data-fam="clean"] .m.in:has(> .rf) { row-gap: 2px; } .rfb { position: relative; display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 0 2px; border-radius: 11px; } .rfb::before { content: ''; position: absolute; right: -6px; bottom: 0; height: 44px; left: min(-6px, calc(100% - 50px)); } /* (what's its own message's taps there stays over that reach: its reactions, a retry line, and every button and link in it, a poll's In Decisions or a raid event's answers among them; a tap on one is a tap on it) */ .mli .m:has(> .rf) :is(.rx, .retry, button:not(.rfb), a[href]) { position: relative; z-index: 2; } .rfc { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; color: #16161a; font: 700 10px/1 var(--sys); box-shadow: 0 0 0 1.5px var(--bg); } .rfc > .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* a tap on them: who's read it, and when, then where the others are up to */ .rdsheet { gap: 10px; } .rdsheet .rdq { margin: -4px 0 4px; color: var(--dim); font-size: var(--fs-sub); overflow-wrap: anywhere; } .rdsheet .rdr { display: flex; align-items: center; gap: 12px; min-height: 52px; } .rdsheet .rfc.big { width: 36px; height: 36px; font-size: 15px; box-shadow: none; } .rdsheet .rdw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rdsheet .rdw b { font-weight: 600; overflow-wrap: anywhere; } .rdsheet .rdw small { color: var(--dim); font-size: var(--fs-sub); overflow-wrap: anywhere; } .rdsheet .rdt { flex: none; color: var(--dim); font-size: var(--fs-foot); font-variant-numeric: tabular-nums; text-align: right; } /* each look its own way */ [data-look="night"] .hold .hrx .rr.rmore { color: #d8b25a; } [data-look="night"] .rxt { border: 1px solid #3a3424; border-radius: 6px; background: rgba(4,6,12,.7); } [data-look="night"] .rxt.on { outline-color: #d8b25a; } [data-look="night"] .rfc { box-shadow: 0 0 0 1px #a8905a; } [data-look="night"] :is(.rxsheet, .rdsheet, .rxmk) .sh.msub { font: 700 var(--fs-lab)/1.3 'Cinzel', serif; letter-spacing: .08em; color: #a8905a; } [data-look="night"] .rxmk .rxstage { border-radius: 6px; border: 1px solid #a8905a; } [data-look="retro"] .hold .hrx .rr.rmore { color: #1d3d7a; } [data-look="retro"] .rxt { min-height: 88px; border: 1px solid #9fb2cf; border-radius: 3px; background: linear-gradient(#ffffff, #dfe7f2); color: #000; } [data-look="retro"] .rxt.on { outline-color: #2a58bd; } [data-look="retro"] .rxt .rxi { width: 40px; height: 40px; border-radius: 3px; } [data-look="retro"] .rxt small, [data-look="retro"] .rxt b { color: #000; } [data-look="retro"] .rxi { border-radius: 3px; } [data-look="retro"] .mli .m > .rf { min-height: 20px; padding-top: 1px; } [data-look="retro"] .rfc { width: 16px; height: 16px; border-radius: 2px; font-size: 9px; box-shadow: 0 0 0 1px #7f9dc9; } [data-look="retro"] :is(.rxsheet, .rdsheet, .rxmk) .sh.msub { font: 700 calc(11rem / 17) var(--font); letter-spacing: 0; color: #1d3d7a; } [data-look="retro"] .rxmk .rxstage { border-radius: 0; border: 1px solid #7f9dc9; } [data-look="retro"] .rdsheet .rfc.big { width: 32px; height: 32px; border-radius: 3px; font-size: 13px; } [data-look="channel"] .rxt { border-radius: 10px; background: #1d1d22; border: 1px solid #2a2a31; } [data-look="channel"] .rfc, [data-look="channel"] .rdsheet .rfc.big { border-radius: 5px; } [data-look="channel"] .rdsheet .rfc.big { border-radius: 9px; } [data-look="bold"] .hold .hrx .rr.rmore { color: var(--ink); } [data-look="bold"] .rxt { border: 2px solid var(--ink); border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); } [data-look="bold"] .rxt.on { outline: 0; background: #ffd35a; } [data-look="bold"] .rxt small { color: var(--ink); } [data-look="bold"] .rxi { box-shadow: inset 0 0 0 1.5px var(--ink); } [data-look="bold"] .rxi > img { border-radius: 50%; } [data-look="bold"] .rfc { box-shadow: 0 0 0 1.5px var(--ink); } [data-look="bold"] :is(.rxsheet, .rdsheet, .rxmk) .sh.msub { font-weight: 800; color: var(--ink); } [data-look="bold"] .rxmk .rxstage { border: 2px solid var(--ink); border-radius: 20px; } [data-look="glass"] .rxt { background: var(--w08); border: 1px solid var(--w08); } [data-look="glass"] .rfc { box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); } [data-look="fyi"] .rxt { border: 1px solid var(--line2); border-radius: 0; background: var(--card2); } [data-look="fyi"] .rxt.on { outline-color: var(--accent); background: #0d2a3b; } [data-look="fyi"] .rxt b { font: 800 var(--fs-sub)/1.15 var(--title); letter-spacing: .02em; } [data-look="fyi"] .rfc { box-shadow: 0 0 0 1px var(--line2); } [data-look="fyi"] :is(.rxsheet, .rdsheet, .rxmk) .sh.msub { font: 700 var(--fs-mono)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); } [data-look="fyi"] .rxmk .rxstage { border-radius: 0; border: 1px solid var(--line2); } /* (a Bag-made reaction is cut as a circle, the canvas, row 25: round here too, where the site squares every other corner) */ [data-look="fyi"] :is(.rxi.rxi, .rxi.rxi > img, .rxlook.rxlook, .rxmk .rxmask.rxmask::after) { border-radius: 50% !important; } /* ================================================================ disappearing messages (#14; Zbo, Nov 5: the canvas, row 27; chat.js `timerLine`, `tmChip`, `timerSheet`; timer.js): who turned them on or off, a quiet line across the chat (kept for good; a tap opens the sheet); the timer by the chat's name up top; a row in its details; and "Goes Fri 9:41 PM" when you hold one. Every look its own way, the Bags' words never restyled (a name in the line keeps its own letters). */ .tmline { align-self: center; display: flex; flex-direction: column; align-items: center; max-width: 90%; margin: 12px 0 4px; padding: 0 8px; } .tmline .tmw { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 4px; font: 400 var(--fs-sub)/1.4 var(--sys); color: var(--dim); text-align: center; text-wrap: balance; } .tmline .tmw .ic { display: inline-block; width: 13px; height: 13px; margin: 0 5px 0 0; vertical-align: -2px; stroke-width: 2.2; color: var(--accent); } .tmline .tmw span { unicode-bidi: isolate; } .tmline.sending { opacity: .7; } .tmline .retry { margin-top: -6px; } [data-fam="clean"] .ml .tmline { position: relative; z-index: 1; } [data-look="night"] .tmline { align-self: stretch; align-items: flex-start; max-width: none; margin: 6px 0 2px; padding: 0; } [data-look="night"] .tmline .tmw { justify-content: flex-start; padding: 0; font: 600 var(--fs-sub)/1.45 var(--sys); color: #dcd36e; text-shadow: 0 1px 0 #000; text-align: left; } [data-look="retro"] .tmline { margin: 0; padding: 0; } [data-look="retro"] .tmline .tmw { padding: 0; font: italic 400 calc(11rem / 17)/1.4 var(--font); color: #444; } /* (its own 44 pt row: never reaching over the lines either side) */ [data-look="bold"] .tmline .tmw { font-weight: 700; color: var(--ink); } [data-look="bold"] .tmline .tmw .ic { color: #a63c0c; } [data-look="channel"] .tmline .tmw { color: var(--dim); } [data-look="fyi"] .tmline .tmw .ic { color: var(--hi); } /* the timer by the chat's name */ .chtm { flex: none; display: inline-flex; align-items: center; gap: 3px; margin: 0 2px 0 6px; font: 600 calc(13 * var(--hr) / 17)/1 var(--sys); color: var(--dim); white-space: nowrap; } .chtm .ic { width: 13px; height: 13px; flex: none; stroke-width: 2.3; color: var(--accent); } [data-look="night"] .chat .chtm { font: 600 calc(13 * var(--hr) / 17)/1.2 var(--sys); letter-spacing: .06em; color: #a8905a; } [data-look="night"] .chat .chtm .ic { color: #d8b25a; } [data-look="retro"] .imbar .chtm { margin: 0 0 0 4px; font: 400 var(--fs-lab) var(--font); color: #1d3d7a; } [data-look="retro"] .imbar .chtm .ic { color: #1d3d7a; } [data-look="retro"] .imbar .chd.prs .chtm, [data-look="retro"] .imbar .chd.prs .chtm .ic { color: #fff; } [data-look="bold"] .chat .chtm { font-weight: 800; color: var(--ink); } [data-look="bold"] .chat .chtm .ic { color: var(--ink); stroke-width: 2.8; } [data-look="fyi"] .chat .chtm { font: 700 var(--fs-mono)/1 var(--mono); letter-spacing: .06em; color: var(--hi); text-transform: uppercase; } [data-look="fyi"] .chat .chtm .ic { color: var(--hi); } /* its row in a chat's details (under the four buttons), and its sheet: four choices, the one in force ticked */ .cdtime .gv.cdtv { color: var(--dim); } .cdtrow:disabled { opacity: 1; } .cdtrow:disabled .gv.cdtv { color: var(--dim); } [data-look="retro"] .cdtime { border: 1px solid #6f8fc2; } .timersheet .grp { background: var(--card2); } [data-look="glass"] .timersheet .grp { background: var(--w055); box-shadow: inset 0 0 0 1px var(--w06); } [data-look="channel"] .timersheet .grp { border-radius: 12px; box-shadow: inset 0 0 0 1px #26262d; } [data-look="retro"] .timersheet .grp { background: #fff; border: 1px solid #9fb6d8; } .timersheet .topt[aria-checked="true"] .gn { font-weight: 700; } /* when one goes, under its time in the menu */ .hold .hmeta .mgoes { display: flex; align-items: center; gap: 5px; } .hold.right .hmeta .mgoes { justify-content: flex-end; } .hold .hmeta .mgoes .ic { flex: none; width: 13px; height: 13px; stroke-width: 2.2; color: var(--accent); } [data-look="bold"] .hold .hmeta .mgoes .ic { color: #a63c0c; } [data-look="retro"] .hold .hmeta .mgoes .ic { color: #1d3d7a; } [data-look="night"] .hold .hmeta .mgoes .ic { color: #d8b25a; } [data-look="fyi"] .hold .hmeta .mgoes .ic { color: var(--hi); } /* ================================================================ raid voice (#15; Zbo, Nov 5: the canvas, row 28; raidcall.js). The headset at the top of the Bags' chat (`.voxhb`, a header's own button, in the band with Back: getting around, pass 2), the strip under that top with who's in and Join, or Move here (`.voxj`), the bar under every screen while you're in (`.voxbar`: the shell's last child, so every screen ends above it, and it keeps the bottom safe area: --sab is 0 meanwhile), the raid voice sheet (`.voxsh`), Join raid voice on a raid event's card (`.voxraid`) and a computer's pop-out (`.voxpip`). A ring of light around whoever's talking (`.voxf.lit`): its shape is the sign, in the look's own light (`--vlit`), never color alone; dimmed while connecting or away. Every tap 44 pt. */ :root { --vlit: #3ee27f; --vgap: var(--card); } [data-look="glass"] { --vlit: #4be08a; } [data-look="channel"] { --vlit: #2bac76; } [data-look="night"] { --vlit: #ffd479; } [data-look="bold"] { --vlit: #18161b; } [data-look="retro"] { --vlit: #1d8a39; } [data-look="fyi"] { --vlit: #4fc3ff; } :root.voxon:not(.kb) { --sab: 0px; } .voxau { display: none; } /* a face: his picture or initial, a gap the color of what's behind it, and the ring that lights */ .voxf { --vs: 64px; --rw: 3px; position: relative; display: inline-flex; flex: none; } .voxr { display: flex; padding: var(--rw); border-radius: 50%; } .voxg { display: flex; padding: 2px; border-radius: 50%; background: var(--vgap); } .voxi { position: relative; width: var(--vs); height: var(--vs); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #16161a; font: 700 calc(var(--vs) * .42) var(--sys); font-style: normal; } .voxi > .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .voxf .actb { display: none; } .voxf.lit .voxr { background: var(--vlit); } .voxf.dim .voxi { opacity: .4; } .voxf.sm { --vs: 26px; --rw: 2px; } .voxf.sm .voxg { padding: 1.5px; } .voxfs { display: flex; align-items: center; gap: 1px; min-width: 0; overflow: hidden; } /* the headset at the top of the Bags' chat: lit while you're in */ .voxhb .ic { width: 21px; height: 21px; } .voxhb.on { background: var(--btn); color: var(--btn-fg); } [data-look="night"] .chat:not(.dm) .hd:has(> .voxhb) { padding-right: 104px; } [data-look="night"] .chat:not(.dm) .hd:has(> .voxhb) > .hwsp { right: 58px; } [data-look="night"] .chat:not(.dm) .hd:has(> .voxhb) > .cr { display: none; } /* (the crest steps aside for the headset, as the portraits do when it's crowded: who's here stays whole) */ [data-look="bold"] .chat:not(.dm) .hd:has(> .voxhb) { padding-right: 64px; } [data-look="night"] .voxhb.on { background: linear-gradient(#ffd479, #b88a2a); color: #1d1508; } [data-look="bold"] .voxhb.on { background: var(--btn); color: var(--ink); } [data-look="retro"] .imbar .voxhb { position: relative; top: auto; right: auto; bottom: auto; flex: none; width: 34px; height: 30px; margin-left: 2px; border-radius: 4px; border: 1px solid #9fb2cf; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; box-shadow: none; } [data-look="retro"] .imbar .voxhb .ic { width: 17px; height: 17px; stroke-width: 2.2; } [data-look="retro"] .imbar .voxhb.on { background: var(--gloss); border-color: #23458c; color: #fff; } [data-look="retro"] .imbar .voxhb::before { content: ''; position: absolute; inset: -8px -6px; } /* (44 pt from inside its border) */ /* the strip under the top: who's in and Join, or Move here */ .voxj { flex: none; display: flex; align-items: center; gap: 10px; min-height: 60px; margin: 8px var(--gut) 0; padding: 8px 8px 8px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--fg); --vgap: var(--card); } .voxsi { display: flex; flex: none; color: var(--accent); } .voxsi .ic { width: 22px; height: 22px; } .voxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .voxwho { font-size: var(--fs-sub); line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; } .voxwhat { font-size: var(--fs-foot); line-height: 1.3; color: var(--dim); } .voxjn { position: relative; flex: none; min-width: 72px; min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--btn); color: var(--btn-fg); font-size: var(--fs-sub); font-weight: 700; } /* the bar under every screen while you're in: Raid voice and who's in (a tap: the sheet), the mic by the thumb */ .voxbar { flex: none; position: relative; z-index: 5; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); background: var(--card); border-top: 1px solid var(--line); color: var(--fg); --vgap: var(--card); } .kb .voxbar { display: none; } .voxopen { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 8px; border-radius: 14px; text-align: left; color: var(--fg); } .voxopen > .ic { color: var(--accent); width: 22px; height: 22px; } .voxl { flex: none; font-size: var(--fs-sub); line-height: 1.2; font-weight: 600; white-space: nowrap; } .voxmic { position: relative; flex: none; min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: 24px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--card2); color: var(--fg); font-size: var(--fs-sub); font-weight: 600; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .voxmic .ic, .voxbig .ic { width: 22px; height: 22px; } .voxmic.off { background: #5a2222; color: #ffd0c8; } .voxmic.ptt { background: var(--btn); color: var(--btn-fg); } .voxmic.held, .voxbig.held { background: var(--vlit); color: #0b0b0c; } /* the raid voice sheet */ .voxsh { --vgap: var(--card); display: flex; flex-direction: column; gap: 14px; } .voxtt { display: flex; align-items: center; gap: 8px; } .voxtt .ic { color: var(--accent); width: 24px; height: 24px; } .voxsub { margin: -8px 0 0; font-size: var(--fs-sub); color: var(--dim); } .voxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 16px 6px; margin: 4px 0; } .voxm { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .voxn { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: var(--fs-sub); font-weight: 600; } .voxnn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; } .voxmu { display: flex; color: #ff8f80; } .voxmu .ic { width: 16px; height: 16px; } .voxm.dim .voxn { color: var(--dim); } .voxseg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: var(--card2); } .voxsg { min-height: 44px; border-radius: 10px; font-size: var(--fs-sub); font-weight: 600; color: var(--dim); } .voxsg.on { background: var(--bg); color: var(--fg); } .voxbig { width: 100%; gap: 10px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .voxbig.off { background: #5a2222; color: #ffd0c8; } .voxbig.ptt { min-height: 96px; font-size: calc(20rem / 17); } .voxpop, .voxleave { width: 100%; gap: 8px; } [data-look] .btn.ghost.voxleave { color: #ff8f80; } .voxhint { margin: -4px 0 0; } /* a raid event's card: Join raid voice, from half an hour before */ .vtgo.voxraid { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 8px 0 0; padding: 0 14px; border-radius: 12px; border: 1px solid var(--accent); color: var(--fg); font-weight: 600; } .vtgo.voxraid .ic { width: 19px; height: 19px; color: var(--accent); } /* a computer's pop-out: who's in and the mic, over WoW */ body.voxpipb { margin: 0; height: 100vh; display: flex; background: var(--bg); color: var(--fg); font: var(--fs-body)/1.3 var(--font); overflow: hidden; } .voxpip { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 8px 12px; --vgap: var(--bg); } .voxpt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-foot); font-weight: 600; color: var(--dim); } .voxpt .ic { width: 16px; height: 16px; color: var(--accent); } .voxpr { display: flex; align-items: center; gap: 10px; } .voxpr .voxfs { flex: 1; gap: 4px; } .voxpr .voxf { --vs: 38px; } .voxpm { min-width: 52px; } /* Glass: frosted, the strip under its floating top (the banners under the strip: chat.js glassFit, --gv) */ [data-look="glass"] .chat > .voxj { position: absolute; top: var(--gh, 0); left: 0; right: 0; z-index: 4; margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--w07); background: rgba(16,16,22,.74); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); --vgap: #15151b; } [data-look="glass"] .chat > .banners { top: calc(var(--gh, 0px) + var(--gv, 0px)); } [data-look="glass"] .voxbar { background: rgba(20,20,26,.84); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); border-top-color: var(--w08); --vgap: #17171d; } [data-look="glass"] .voxsh { --vgap: #18181f; } [data-look="glass"] .voxmic { background: var(--w10); } [data-look="glass"][data-solid] .chat > .voxj, [data-look="glass"][data-solid] .voxbar { background: #101016; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Channel: Slack's huddle, its green */ [data-look="channel"] .voxj { margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: #0f2a1f; --vgap: #0f2a1f; } [data-look="channel"] .voxsi, [data-look="channel"] .voxopen > .ic, [data-look="channel"] .voxtt .ic, [data-look="channel"] .vtgo.voxraid .ic { color: #2bac76; } [data-look="channel"] .voxjn { border-radius: 8px; background: #007a5a; color: #fff; } [data-look="channel"] .voxbar { background: #0f2a1f; border-top-color: #1d4a36; --vgap: #0f2a1f; } [data-look="channel"] .voxmic { border-radius: 8px; background: #1d4a36; } [data-look="channel"] .voxmic.ptt, [data-look="channel"] .voxbig:not(.off):not(.held) { background: #007a5a; color: #fff; } [data-look="channel"] .voxf .voxr, [data-look="channel"] .voxf .voxg, [data-look="channel"] .voxi { border-radius: 30%; } [data-look="channel"] .vtgo.voxraid { border-radius: 8px; border-color: #2bac76; } /* Bold: ink cards */ [data-look="bold"] .voxj { border: 2px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink); background: var(--card); } [data-look="bold"] .voxjn { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); } [data-look="bold"] .voxsi, [data-look="bold"] .voxopen > .ic, [data-look="bold"] .voxtt .ic, [data-look="bold"] .vtgo.voxraid .ic { color: var(--ink); } [data-look="bold"] .voxbar { border-top: 2px solid var(--ink); background: var(--card); } [data-look="bold"] .voxmic { border: 2px solid var(--ink); background: var(--card); color: var(--ink); } [data-look="bold"] .voxmic.ptt { background: var(--btn); } [data-look="bold"] :is(.voxmic, .voxbig).off { background: #ffd7cc; color: #8a1a00; } [data-look="bold"] .voxmic.held, [data-look="bold"] .voxbig.held { background: var(--ink); color: #fffdf8; } [data-look="bold"] .voxmu { color: #b3261e; } [data-look="bold"] .btn.ghost.voxleave { color: #b3261e; } [data-look="bold"] .voxseg { border: 2px solid var(--ink); background: var(--card2); } [data-look="bold"] .voxsg { color: var(--fg); } [data-look="bold"] .voxsg.on { background: var(--ink); color: #fffdf8; } [data-look="bold"] .voxi { border: 2px solid var(--ink); } [data-look="bold"] .vtgo.voxraid { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); } /* Night: the game's own frames, a gold glow for who's talking */ [data-look="night"] .voxj { border: 1px solid #a8905a; border-radius: 10px; background: linear-gradient(#1b2033, #121624); --vgap: #161b2b; } [data-look="night"] .voxwho { font-family: var(--title); letter-spacing: .02em; color: #f1e2b8; } [data-look="night"] .voxjn, [data-look="night"] .voxmic.ptt { border-radius: 8px; border: 1px solid #d8b25a; background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; } [data-look="night"] .voxbar { background: linear-gradient(#1b2033, #0e1220); border-top: 1px solid #a8905a; --vgap: #151a29; } [data-look="night"] .voxmic { border-radius: 8px; border: 1px solid var(--line); } [data-look="night"] .voxf.lit .voxr { box-shadow: 0 0 12px 2px rgba(255,212,121,.55); } [data-look="night"] .voxsh { --vgap: #121624; } [data-look="night"] .voxtt span { font-family: var(--title); } [data-look="night"] .voxseg { border: 1px solid var(--line); border-radius: 8px; } [data-look="night"] .voxsg { border-radius: 6px; } [data-look="night"] .voxsg.on { background: linear-gradient(#5a4418, #2a1e0a); color: #ffd479; } /* Retro: a 2006 voice window, Verdana, glossy buttons, square buddy icons */ [data-look="retro"] .voxj { margin: 6px 6px 0; padding: 4px 6px; min-height: 52px; border-radius: 0; border: 1px solid #7f9dc9; background: linear-gradient(#ffffff, #d9e3f2); color: #000; --vgap: #f3f6fb; } [data-look="retro"] .voxsi { color: #1d3d7a; } [data-look="retro"] .voxwho { font: 700 var(--fs-sub)/1.3 var(--font); } [data-look="retro"] .voxwhat { color: #333; } [data-look="retro"] .voxjn, [data-look="retro"] .voxmic.ptt { min-height: 44px; border: 1px solid #23458c; border-radius: 8px; background: var(--gloss); color: #fff; text-shadow: 0 1px 0 #1d3d7a; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } [data-look="retro"] .voxbar { min-height: 54px; background: linear-gradient(#eef3fb, #c9d6ee); border-top: 1px solid #8ea4c6; color: #000; --vgap: #dde6f4; } [data-look="retro"] .voxopen > .ic { color: #1d3d7a; } [data-look="retro"] .voxl { font: 700 var(--fs-sub) var(--font); } [data-look="retro"] .voxmic { border-radius: 8px; border: 1px solid #9fb2cf; background: linear-gradient(#ffffff, #dfe7f2); color: #1d3d7a; } [data-look="retro"] :is(.voxmic, .voxbig).off { background: linear-gradient(#fff0ee, #f3c9c2); border-color: #b04a3a; color: #7a1200; } [data-look="retro"] .voxf .voxr, [data-look="retro"] .voxf .voxg, [data-look="retro"] .voxi { border-radius: 0; } [data-look="retro"] .voxi { border: 1px solid #6f8fc2; } [data-look="retro"] .voxsh { --vgap: #eef3fb; } [data-look="retro"] .voxtt .ic { color: #1d3d7a; } [data-look="retro"] .voxmu { color: #a01800; } [data-look="retro"] .btn.ghost.voxleave { color: #a01800; } [data-look="retro"] .voxseg { border: 1px solid #9fb2cf; border-radius: 0; background: #fff; } [data-look="retro"] .voxsg { border-radius: 0; color: #1d3d7a; } [data-look="retro"] .voxsg.on { background: #316ac5; color: #fff; } [data-look="retro"] .vtgo.voxraid { border-radius: 6px; border-color: #23458c; color: #1d3d7a; } [data-look="retro"] .vtgo.voxraid .ic { color: #1d3d7a; } /* BANTOWN.fyi: black, one signal blue, beveled corners, condensed capitals on the app's own words */ [data-look="fyi"] .voxj { margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--hi); background: #0d2a3b; --vgap: #0d2a3b; } [data-look="fyi"] .voxsi, [data-look="fyi"] .voxopen > .ic, [data-look="fyi"] .voxtt .ic { color: var(--hi); } [data-look="fyi"] .voxwhat, [data-look="fyi"] .voxl { font: 700 var(--fs-mono)/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hi); } [data-look="fyi"] .voxjn { border-radius: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); font: 800 calc(18rem / 17)/1 var(--title); text-transform: uppercase; letter-spacing: .04em; } [data-look="fyi"] .voxbar { background: #0d2a3b; border-top: 1px solid var(--accent); --vgap: #0d2a3b; } [data-look="fyi"] .voxmic { border-radius: 0; border: 1px solid var(--accent); background: transparent; } [data-look="fyi"] .voxmic.ptt { background: var(--accent); color: var(--ink); } [data-look="fyi"] :is(.voxmic, .voxbig).off { background: #3a1414; border-color: #ff8a80; color: #ffd0c8; } [data-look="fyi"] .voxf .voxr { border-radius: 0; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); } [data-look="fyi"] .voxf .voxg { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); } [data-look="fyi"] .voxf .voxi { border-radius: 0; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); font: 800 calc(var(--vs) * .44) var(--title); } [data-look="fyi"] .voxf.sm .voxr { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); } [data-look="fyi"] .voxf.sm .voxg { clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); } [data-look="fyi"] .voxf.sm .voxi { clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); } [data-look="fyi"] .voxsh { --vgap: var(--card); } [data-look="fyi"] .voxtt span { font: 800 calc(1rem + 9px)/1.05 var(--title); font-style: italic; text-transform: uppercase; } [data-look="fyi"] .voxseg { border-radius: 0; border: 1px solid var(--line2); padding: 0; background: transparent; } [data-look="fyi"] .voxsg { border-radius: 0; font: 700 var(--fs-mono) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); } [data-look="fyi"] .voxsg.on { background: var(--accent); color: var(--ink); } [data-look="fyi"] .vtgo.voxraid { border-radius: 0; border-color: var(--accent); background: #0d2a3b; color: var(--hi); font: 800 1rem/1 var(--title); text-transform: uppercase; letter-spacing: .04em; } [data-look="fyi"] .vtgo.voxraid .ic { color: var(--hi); } /* ================================================================ look G: BANTOWN.fyi (Zbo, Nov 2: a look "aligned with the Bantown.fyi guild aesthetic", the canvas, row 13). The guild site's own look over Clean's layout: black, one signal blue, Barlow Condensed for display, Barlow for words, JetBrains Mono for small labels, no round corners (beveled ones on bubbles, buttons and the countdown), stacked panels 2 px apart, and the name BANTOWN at Home's top. Capitals only on the app's own words (titles, section labels, buttons' Going/Late/Out, times): a Bag's name, his messages and anything he typed keep exactly the case he typed. Its tokens are at the top of this file; a new feature adds its lines here like in every other look. */ [data-look="fyi"] :not(.lp *), [data-look="fyi"] :not(.lp *)::before, [data-look="fyi"] :not(.lp *)::after { border-radius: 0 !important; } /* (Me's little pictures of the other looks keep their corners) */ [data-look="fyi"] .ic { stroke-linecap: square; stroke-linejoin: miter; } /* a beveled corner (top right and bottom left, the site's .bevel-s) is painted, never clipped: nothing inside is cut and every 44 pt tap keeps its reach. The fill is --bbg. */ [data-look="fyi"] :is(.m .bb:not(.gone):not(.vtbb), .btn:not(.ghost), .hcbtn, .hcount, .cmp .sd, .bn.ask .go) { background: linear-gradient(225deg, transparent var(--cut), var(--bbg) calc(var(--cut) + .6px)) top / 100% 51% no-repeat, linear-gradient(45deg, transparent var(--cut), var(--bbg) calc(var(--cut) + .6px)) bottom / 100% 51% no-repeat; } [data-look="fyi"] :is(.btn:not(.ghost), .hcbtn, .cmp .sd, .bn.ask .go) { --bbg: var(--btn); color: var(--btn-fg); } [data-look="fyi"] .btn.danger:not(.ghost) { --bbg: #c8402f; color: #fff; } [data-look="fyi"] :is(.btn, .hcbtn, .bn.ask .go) { font: 800 calc(18rem / 17)/1 var(--title); letter-spacing: .05em; } [data-look="fyi"] .btn.small { font-size: calc(16rem / 17); } [data-look="fyi"] .btn.ghost { border: 1px solid var(--line2); background: transparent; color: var(--fg); } [data-look="fyi"] .btn.ghost.danger { color: #ff8a8a; } [data-look="fyi"] :is(.btn, .hcbtn, .bn.ask .go):disabled { opacity: .45; } [data-look="fyi"] .inp { border: 1px solid var(--line2); background: var(--bg); } [data-look="fyi"] .inp:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } [data-look="fyi"] .inp::placeholder { color: var(--faint); } [data-look="fyi"] :is(.code, .bn .mc, .code.mc, .pdl dd.mc) { font-family: var(--mono); } [data-look="fyi"] .code { border: 1px solid var(--line2); background: var(--card2); } /* the site's small labels: JetBrains Mono, spaced capitals, signal blue */ [data-look="fyi"] :is(.hsec, .me-sec > .sh, .gcard > .sh, .hctx small, .vtk, .hnxk, .sheet .sh.msub) { font: 700 var(--fs-mono)/calc(16rem / 17) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } [data-look="fyi"] .me-sec > .sh { padding: 0 2px; } [data-look="fyi"] .gft { padding: 0 2px; } /* page titles: the site's giant condensed italic capitals */ [data-look="fyi"] .ptl { padding-bottom: 14px; font: italic 800 calc(1rem + 35px)/.9 var(--title); letter-spacing: 0; text-transform: uppercase; } [data-look="fyi"] .hd.page .pt { font: 800 calc(19 * var(--hr) / 17)/calc(22 * var(--hr) / 17) var(--title); letter-spacing: .05em; text-transform: uppercase; } [data-look="fyi"] .pback { color: var(--accent); font: 700 calc(18 * var(--hr) / 17) var(--title); letter-spacing: .03em; } [data-look="fyi"] .dmback { color: var(--accent); font-family: var(--title); font-weight: 700; letter-spacing: .03em; } /* Home: BANTOWN up top like the site's own header; each chat a panel, 2 px apart */ [data-look="fyi"] .home .hhd { padding-bottom: 12px; border-bottom: 1px solid var(--line); } [data-look="fyi"] .home .htl { font: italic 800 calc(1rem + 21px)/1.1 var(--title); letter-spacing: .01em; text-transform: uppercase; } [data-look="fyi"] .hface { font: 800 21px var(--title); } [data-look="fyi"] .hsec { padding: 22px var(--gut) 8px; } [data-look="fyi"] .hrow { width: calc(100% - 2 * var(--gut)); min-height: 72px; margin: 0 var(--gut) 2px; padding: 10px 12px; background: var(--card); } [data-look="fyi"] .hrow.prs { background-color: var(--prs-card); } [data-look="fyi"] .hbody > .hrow:first-child, [data-look="fyi"] .hnotes + .hrow { margin-top: 12px; } [data-look="fyi"] .htx { padding: 0; border-bottom: 0; } [data-look="fyi"] .hav { width: 48px; height: 48px; } [data-look="fyi"] .hav .hface { font-size: 23px; } [data-look="fyi"] .hav.hone.here::after { right: -3px; bottom: -3px; width: 11px; height: 11px; border: 2.5px solid var(--card); } [data-look="fyi"] .hgrp { background: transparent; } [data-look="fyi"] .hgrp .hmini { width: 23px; height: 23px; border: 0; font: 800 13px var(--title); } [data-look="fyi"] .hgrp .hmini:only-child { width: 100%; height: 100%; font-size: 23px; } [data-look="fyi"] .hgrp .hmini:first-child:nth-last-child(2), [data-look="fyi"] .hgrp .hmini:first-child:nth-last-child(2) ~ .hmini { top: 12px; } [data-look="fyi"] .hgrp .hmini:first-child:nth-last-child(3) ~ .hmini:nth-child(3) { left: 12px; } [data-look="fyi"] .htile { background: var(--card2); color: var(--dim); } [data-look="fyi"] .htile.hhub { background: var(--accent); color: var(--ink); } [data-look="fyi"] .hnm { font: 700 calc(21rem / 17)/calc(24rem / 17) var(--title); letter-spacing: .01em; } [data-look="fyi"] .hrow.unread .hnm { font-weight: 800; } [data-look="fyi"] .htm { font: 500 var(--fs-mono)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; } [data-look="fyi"] .hcnt { min-width: 24px; padding: 0 6px; font: 700 var(--fs-mono)/calc(22rem / 17) var(--mono); } [data-look="fyi"] .hdot { width: 10px; height: 10px; } [data-look="fyi"] .hchip { padding: 0 6px; border-color: var(--line2); font: 700 var(--fs-mono)/calc(18rem / 17) var(--mono); letter-spacing: .08em; text-transform: uppercase; } [data-look="fyi"] .hrow.hub .hcd { font: 600 var(--fs-sub)/1.2 var(--sys); color: var(--accent); } [data-look="fyi"] .hnote:not(.warn) { background: var(--card); } /* a chat: the header's name in the site's condensed type, every Bag's bubbles dark, yours signal blue */ [data-look="fyi"] .gt { font: 800 calc(22 * var(--hr) / 17)/calc(24 * var(--hr) / 17) var(--title); letter-spacing: .01em; } [data-look="fyi"] .cht b { font: 800 var(--hr)/calc(22 * var(--hr) / 17) var(--title); letter-spacing: .03em; } [data-look="fyi"] .m .av { font: 800 15px var(--title); color: var(--ink); } [data-look="fyi"] .m button.nm { display: inline-flex; align-items: center; gap: 7px; font: 700 calc(15rem / 17)/calc(18rem / 17) var(--title); letter-spacing: .02em; -webkit-text-fill-color: var(--soft); } [data-look="fyi"] .m button.nm::after { content: ''; order: -1; flex: none; width: 8px; height: 8px; background: currentColor; } [data-look="fyi"] .m .bb { --bbg: var(--card2); color: var(--fg); font: 500 var(--fs-msg)/var(--lh-msg) var(--sys); } [data-look="fyi"] .m.out .bb { --bbg: var(--mine); color: var(--ink); } [data-look="fyi"] .m.in.forme .bb { --bbg: #0d2a3b; box-shadow: none; } [data-look="fyi"] .m .bb .rq { border-left-width: 3px; background: rgba(0,0,0,.24); } [data-look="fyi"] .m.out .bb .rq { background: rgba(5,6,8,.14); } [data-look="fyi"] .m.out .bb .rq :is(.rqn, .rqt) { color: var(--ink) !important; } [data-look="fyi"] .m .bb.gone { border-color: var(--line2); } [data-look="fyi"] .hold .hlift .m .bb { box-shadow: none; filter: drop-shadow(0 12px 26px rgba(0,0,0,.7)); } [data-look="fyi"] :is(.tm, .newmark) { align-self: stretch; display: flex; align-items: center; gap: 12px; font: 700 var(--fs-mono)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; } [data-look="fyi"] .tm::before, [data-look="fyi"] .tm::after { content: ''; flex: 1; height: 1px; background: var(--line); } [data-look="fyi"] .tm { margin: 22px 4px 8px; color: var(--dim); } [data-look="fyi"] .rd { font: 500 var(--fs-mono)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } [data-look="fyi"] .rc { border: 1px solid var(--line2); background: var(--card); } [data-look="fyi"] .rc.mine { border-color: var(--accent); background: #0d2a3b; } [data-look="fyi"] .cmp .pl { background: var(--card2); color: var(--accent); } [data-look="fyi"] .cmp .pl.on { background: var(--accent); color: var(--ink); } [data-look="fyi"] .cmp .fd { border: 1px solid var(--line2); background: transparent; } [data-look="fyi"] .cmp .fd:focus-visible { border-color: var(--accent); } [data-look="fyi"] .cmp .sd { background-color: transparent; } [data-look="fyi"] :is(.plusm, .atm) { border: 1px solid var(--line2); background: var(--card); } [data-look="fyi"] .pmi { border-top-color: var(--line); } [data-look="fyi"] .pmic { background: var(--card2) !important; color: var(--accent); } [data-look="fyi"] .pmt b { font: 800 calc(19rem / 17)/1.15 var(--title); letter-spacing: .04em; text-transform: uppercase; } [data-look="fyi"] .jump { border: 1px solid var(--line2); background: var(--card2); } [data-look="fyi"] .jump.new { border-color: var(--accent); } [data-look="fyi"] .bn.inst, [data-look="fyi"] .bn.hi, [data-look="fyi"] .bn.ask { background: var(--card); } [data-look="fyi"] .swr { border: 1px solid var(--line2); } /* the long-press menu: the site's panels */ [data-look="fyi"] .hold .hrx, [data-look="fyi"] .hold .hmenu { border: 1px solid var(--line2); background: var(--card); } [data-look="fyi"] .hold .hrx .rr.on { background: #0d2a3b; box-shadow: inset 0 0 0 1px var(--accent); } /* a poll or a raid event: a panel with the site's blue edge on top; answers as the site's toggles */ [data-look="fyi"] .m .bb.vtbb, [data-look="fyi"] .m.out .bb.vtbb { padding: 12px 14px 14px; border: 0; border-top: 3px solid var(--accent); background: var(--card); color: var(--fg); } [data-look="fyi"] .vtq { font: 800 calc(1rem + 7px)/1.08 var(--title); letter-spacing: .005em; } [data-look="fyi"] .vtb { background: var(--card2); } [data-look="fyi"] .vtbar { background: rgba(79,195,255,.2); } [data-look="fyi"] .vtc:not([data-state="open"]) .vtwin .vtbar { background: rgba(79,195,255,.34); } [data-look="fyi"] .vtx { border-color: var(--line2); } [data-look="fyi"] .vtn { font: 700 calc(13rem / 17)/1 var(--mono); } [data-look="fyi"] :is(.vtend, .vtgo) { font: 700 var(--fs-mono)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; } [data-look="fyi"] .rvw { font: 600 var(--fs-sub)/1.35 var(--sys); color: var(--soft); } [data-look="fyi"] .rvo { gap: 2px; } [data-look="fyi"] .rvl { font: 800 calc(18rem / 17)/1 var(--title); letter-spacing: .06em; text-transform: uppercase; } [data-look="fyi"] .rvb .vtn { font: 700 var(--fs-mono)/1 var(--mono); } [data-look="fyi"] .rvb[aria-pressed="true"] { background: var(--accent); box-shadow: none; color: var(--ink); } [data-look="fyi"] .rvb[aria-pressed="true"] :is(.rvl, .vtn) { color: var(--ink); } [data-look="fyi"] .rvb[aria-pressed="true"] .vtf .vfa { box-shadow: 0 0 0 2px var(--accent); } [data-look="fyi"] .rvnw b { font: 700 calc(16rem / 17)/1 var(--title); } [data-look="fyi"] .rvadd { font: 700 var(--fs-mono)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; } /* the option chips (the lock's times, mute, the raid event's days and reminder): the site's toggles */ [data-look="fyi"] .lopt { border: 1px solid var(--line2); background: transparent; font: 800 calc(16rem / 17)/1 var(--title); letter-spacing: .04em; } [data-look="fyi"] .lopt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--ink); } [data-look="fyi"] .lopt.prs { background-color: var(--prs-card); } [data-look="fyi"] .lopt[aria-pressed="true"].prs { background-color: var(--accent); } /* Me and every grouped list: each row a panel, 2 px apart (the site's stacked rows), Me's labels in its capitals */ [data-look="fyi"] .grp { gap: 2px; background: transparent; overflow: visible; } [data-look="fyi"] .grp > * { background: var(--card); } [data-look="fyi"] .sheet .grp > * { background: var(--card2); } [data-look="fyi"] .grp > .prs, [data-look="fyi"] .grp > li.gr:has(> .bagrow.prs) { background-color: var(--prs-card); } [data-look="fyi"] .grp > * + .gr::before, [data-look="fyi"] .grp > * + .grw::before { display: none; } [data-look="fyi"] .gr + .grw { margin-top: -2px; } [data-look="fyi"] .gi { background: var(--card2) !important; color: var(--accent); } [data-look="fyi"] :is(.me, .priv) .gl .gn, [data-look="fyi"] .me .gk { font: 800 calc(19rem / 17)/1.15 var(--title); letter-spacing: .03em; text-transform: uppercase; } [data-look="fyi"] :is(.me, .priv) .gr.act.danger .gn { color: #ff8a8a; } /* Me and Privacy and this phone (effortless, pass 4; the canvas, row 18, E3MeFyi, E3Privacy): rows of words alone, no little pictures; Me's groups under the site's mono labels (You, Look and feel, Alerts and help); your card's name in the site's condensed type */ [data-look="fyi"] :is(.me, .priv) .gr > .gi { display: none; } [data-look="fyi"] .me :is(.yousec, .setsec, .moresec) > .sh { display: block; } [data-look="fyi"] .me .yourow .yn { font-size: calc(23rem / 17); } [data-look="fyi"] .me .yourow .av.big { border-radius: 0; } [data-look="fyi"] .me .me-body { gap: 12px; } [data-look="fyi"] .me .me-sec { gap: 6px; } [data-look="fyi"] .grp > .cdsrow.warn { background: #3a1818; } [data-look="fyi"] .yn { font: 800 calc(1rem + 11px)/1.05 var(--title); } [data-look="fyi"] .av.big { font: 800 30px var(--title); } [data-look="fyi"] .look .lt b { font: 700 calc(14rem / 17)/1.1 var(--title); letter-spacing: .02em; } [data-look="fyi"] .look.on .lt b { color: var(--accent); } [data-look="fyi"] .lp { box-shadow: 0 0 0 1px var(--line2); } [data-look="fyi"] .look.on .lp { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } [data-look="fyi"] .look .ic.ok { box-shadow: 0 0 0 2px var(--bg); } /* sheets, toasts, profiles */ [data-look="fyi"] .sheet-in { border-top: 1px solid var(--line2); background: var(--card); } [data-look="fyi"] .sheet:not(.hold):not([data-keep]) > .sheet-in::before { width: 40px; height: 4px; margin-left: -20px; background: var(--line2); } [data-look="fyi"] .sheet .sh { font: 800 calc(1rem + 9px)/1.05 var(--title); letter-spacing: .01em; } [data-look="fyi"] .profile .pn { font: 800 calc(1rem + 13px)/1.05 var(--title); } [data-look="fyi"] .pdl { background: var(--card2); } [data-look="fyi"] .toast { border: 1px solid var(--line2); background: var(--card2); } [data-look="fyi"] .gate h1 { font: italic 800 calc(1rem + 23px)/1 var(--title); letter-spacing: .005em; } /* the BANTOWN Hub: Today's countdown is the site's blue block; its cards and rows the site's panels */ [data-look="fyi"] .hcount { --bbg: var(--accent); --cut: 12.7px; align-items: flex-end; gap: 16px; padding: 20px 22px 22px; color: var(--ink); } [data-look="fyi"] .hcn { font: 800 calc(1rem + 95px)/.78 var(--title); letter-spacing: -.02em; color: var(--ink); } [data-look="fyi"] .hct { gap: 6px; padding-bottom: 2px; } [data-look="fyi"] .hct b { font: 800 calc(1rem + 11px)/.95 var(--title); letter-spacing: .01em; text-transform: uppercase; } [data-look="fyi"] .hct span { font: 600 calc(15rem / 17)/1.3 var(--sys); color: var(--ink); } [data-look="fyi"] .hcard { background: var(--card); } [data-look="fyi"] .hcard.prs { background-color: var(--prs-card); } [data-look="fyi"] .hcic { background: var(--card2); color: var(--accent); } [data-look="fyi"] .hcic.warn { background: var(--card2); color: #ffc28a; } [data-look="fyi"] .hctx b { font: 700 calc(21rem / 17)/1.1 var(--title); } [data-look="fyi"] .hcbtn { min-height: 44px; padding: 0 16px; line-height: calc(44rem / 17); text-transform: uppercase; } [data-look="fyi"] .hthumb { background-color: var(--card2); background-image: repeating-linear-gradient(135deg, var(--w05) 0 2px, transparent 2px 10px); } [data-look="fyi"] .aitag { padding: 1px 5px; border: 1px solid var(--accent); background: none; color: var(--accent); font: 700 var(--fs-mono)/calc(14rem / 17) var(--mono); letter-spacing: .08em; } [data-look="fyi"] .hubmore .gl .gn { font: 800 calc(21rem / 17)/1.1 var(--title); letter-spacing: .02em; text-transform: uppercase; } [data-look="fyi"] .hpost { background: var(--card); } [data-look="fyi"] .hpt { font: 700 calc(22rem / 17)/1.15 var(--title); } [data-look="fyi"] .hplay { background: var(--accent); } [data-look="fyi"] .hplay .ic { fill: var(--ink); } [data-look="fyi"] .hcal { background: var(--card2); } [data-look="fyi"] .hcal small { color: var(--accent); font-family: var(--mono); } [data-look="fyi"] .hcal b { font: 800 calc(22rem / 17)/1.12 var(--title); } [data-look="fyi"] .hcal small { line-height: 1.2; } /* (the month and the day never touch, at any text size) */ /* ================================================================ text that follows your phone (effortless, pass 5; Zbo, Nov 3; docs/UX.md N3; the canvas, row 20). Every size of text is written from the root (app.css, "the root"), so all of it grows with the phone's text size; the bar, the rail and the tops only to 115% (`--hr`). Where the words get big for the room they have (on a phone, the text size well up), things move the way an iPhone moves them. Each is measured against the room itself, a container's width in its own `em` (its own text size), so at the default size nothing moves: - a group's rows: a value or a second line wraps instead of ending in "…" (19em), then a value goes under its label, whole, as Settings puts it at the bigger sizes (15em); - Home's rows: the chip ("not encrypted"), the time or the Hub's line goes under the chat's name, so the name stays whole (Night's first line wraps; Channel's sidebar and Retro's buddy list the same way); - a Bag in a chat's details or in Friends: Message under his name; - the + menu: no taller than the room over the box (chat.js `openPlus`), what you can add scrolling in its own list (`.pmis`) over its foot (Search, Pins, Mute, Details), which stays put and goes two by two; - Me → Look: three looks across, then two, each name whole under its picture; - a row with a box (your name in chat): the box under its label, the whole width; - Night's message box: its Party or Whisper label steps aside, so the words have the room; - a raid event's answers: Going, Late and Out one under another. A browser doesn't ask a container again when only the text size changes, so look.js does (`tsz`, `.tszp`). */ .grp, .hlist, .plusm, .cmp, .vtc, .cdbody { container-type: inline-size; } .tsz :is(.grp, .hlist, .plusm, .cmp, .vtc, .cdbody) { container-type: normal; } /* (the text size just changed: look.js asks again) */ .tszp { position: absolute; top: 0; left: 0; width: 10rem; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; } .pmis { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .pmis > .pmi, .plusm > .pmacts { flex-shrink: 0; } @container (max-width: 20em) { .htop { flex-wrap: wrap; row-gap: 2px; } .htop > .hnm { flex: 1 1 auto; } [data-look="night"] .hrow .hl1 { white-space: normal; overflow-wrap: break-word; } /* (Night's social window: the name whole, its line wrapping) */ .hrow.hub .htx.hone { flex-wrap: wrap; row-gap: 2px; } .hrow.hub .hcd { flex: 1 1 100%; white-space: normal; overflow-wrap: break-word; text-align: left; } /* (the Hub's line under its name, whole) */ [data-look="night"] .hln.hub .hl2 { white-space: normal; overflow-wrap: break-word; } [data-look="channel"] .hrow.hit:has(> :is(.hchip, .hcd)) { flex-wrap: wrap; row-gap: 0; } /* (Channel's sidebar: the chip or the Hub's line under the name) */ [data-look="channel"] .hit:has(> :is(.hchip, .hcd)) > .hnm { flex: 1 1 calc(100% - 36px); } [data-look="channel"] .hit > :is(.hchip, .hcd) { order: 1; margin: 0 0 8px 36px; white-space: normal; } [data-look="channel"] .hit > :is(.hcnt, .hdot) { order: 2; } [data-look="retro"] .hrow.hbd { flex-wrap: wrap; row-gap: 0; } /* (Retro's buddy list: "(not encrypted)" under Guild chat where both won't fit) */ .pmacts { flex-wrap: wrap; } .pma { flex: 1 1 40%; } } @container (max-width: 19em) { :is(.merow .gv, .priv .gr > .gv, .hubmore .gv, .bags .grow > small, .nmrow .grow small, .actrow .actv, .cardrow .actv) { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: break-word; } .lookgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-look] .lookgrid .look { width: 100%; } .look .lt b { overflow-wrap: break-word; } } @container (max-width: 15em) { .gr:not(.stack):has(> :is(.gv, .actv, .inp)) { flex-wrap: wrap; row-gap: 2px; } .gr:not(.stack) > .inp { flex: 1 1 100%; text-align: left; } .bags li.gr:has(> .btn) { flex-wrap: wrap; } /* (a Bag in a chat's details or Friends: Message under his name) */ .bags li.gr:has(> .btn) > .bagrow { flex: 1 1 100%; } .bags li.gr > .btn { margin: -8px 0 10px 66px; } .gr:not(.stack) > :is(.gv, .actv) { order: 1; flex: 0 0 100%; min-width: 0; max-width: none; text-align: left; } .gr:not(.stack):has(> .gi) > :is(.gv, .actv) { flex-basis: calc(100% - 44px); margin-left: 44px; } [data-look="retro"] .me .gr:not(.stack) > :is(.gv, .actv) { flex: 0 0 calc(100% - 44px); } .hubmore .gl .gn { white-space: normal; overflow-wrap: break-word; } /* (Today's names whole on one line until their line moves under them; then they may wrap, if ever they must) */ } @container (max-width: 13em) { .lookgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 16em) { .cdacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* (a chat's details: Search, Pins, Mute and Photos two by two once four don't fit) */ @container (max-width: 12em) { /* (a raid event's Going, Late and Out one under another, each its words, its faces and its count) */ .rvo { flex-wrap: wrap; } .rvo > .rvb { flex: 1 1 100%; flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 6px 12px; text-align: left; } .rvo > .rvb .vtn { margin-left: auto; } } @container (max-width: 14em) { [data-look="night"] .cmp .party { display: none; } } /* (Night's box: its Party or Whisper label steps aside, the words get the room) */ /* ================================================================ Solid Glass (effortless, pass 5; Zbo, Nov 3; docs/UX.md N4; Me → Look with Glass on; store.js `applySolid`): Glass's own colors with no frost, for a Bag who wants what an iPhone's Reduce Transparency gives (Safari can't tell the page about it), and by itself where a browser says the phone or computer wants less see-through. Each frosted surface is its own color made solid, and nothing blurs what's behind it; the soft glow under the page, the bubbles and the shine stay. */ [data-look="glass"][data-solid] { --frost: linear-gradient(var(--edge), var(--edge)) top / 100% var(--sat) no-repeat, #0b0b10; } [data-look="glass"][data-solid] *, [data-look="glass"][data-solid] *::before, [data-look="glass"][data-solid] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } [data-look="glass"][data-solid] :is(.tbs, .tsrch, .hdin, .rbar, .plusm, .atm, .cmp) { background: #1c1c23; } [data-look="glass"][data-solid] .chat > .banners:not(:empty) { background: #101016; } [data-look="glass"][data-solid] :is(.hold .hmenu, .hold .hrx) { background: #282830; } [data-look="glass"][data-solid] .sheet-in { background: #18181f; } [data-look="glass"][data-solid] .fsteps { background: #1a1a1f; } [data-look="glass"][data-solid] :is(.vmore, .vclose) { background: #26262a; } :root.wide[data-look="glass"][data-solid] .screens > .tabbar { background: #101016; } [data-look="glass"][data-solid] body > .sheet.hold { background: rgba(5,5,8,.72); } [data-look="glass"][data-solid] .sheet:not(.hold)::before { background: rgba(0,0,0,.6); } /* ---------------------------------------------------------------- light mode, the rest (#14; the tokens are at the top): what draws a dark color of its own gets its light one here, in BANTOWN.fyi, Clean and Glass by day */ [data-fam="clean"] .m .bb .rq { border-left-color: var(--ql, var(--qc, #888)); } /* (a quote's line, in every look built on Clean's) */ /* Me → Look: Light and dark (three, like raid voice's two: `.voxseg`, styled in every look) */ .modesec { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .modesec .modeh { margin: 0; padding: 0 4px; font-size: var(--fs-sub); font-weight: 600; color: var(--fg); } .modesec .modenote { margin: 0; padding: 0 4px; } .voxseg.modeseg { grid-template-columns: repeat(3, 1fr); } .namesgrp { margin-top: 16px; } /* every light version: words that warn or that say all's well, deep enough to read on white (5:1) */ [data-mode="light"] :is(.retry, .gr.act.danger .gn, .hold .hmi.delete:not(.armed), .hcal small, .hpdis.sure, .hpdel.sure, .cdout, .btn.ghost.danger, .ptake) { color: #ad2215 !important; } [data-mode="light"] .cdsafe .gv.cdsv.ok, [data-mode="light"] .ic.ok { color: #136b38; } [data-mode="light"] .btn.ghost.voxleave { color: #ad2215; } [data-mode="light"] .nsn { color: #5a4100; } [data-mode="light"][data-look="fyi"] .nsn { color: var(--soft); } [data-mode="light"] .hf .w, [data-mode="light"] .rchip:is(.gap, .miss) { color: #9a4a00; } [data-mode="light"] .rchip:is(.gap, .miss) { outline-color: rgba(154,74,0,.7); } :root.wide[data-mode="light"]:not([data-look="fyi"]) .screens > .tabbar { background: #f6f6f9; } :root.wide[data-mode="light"][data-look="fyi"] .screens > .tabbar { background: #ffffff; } [data-mode="light"][data-look="glass"] .chat > .voxj { background: rgba(255,255,255,.76); border-bottom-color: rgba(0,0,0,.07); --vgap: #ffffff; } [data-mode="light"] .bn.warn { background: #ffe4df; color: #8a1c0e; } [data-mode="light"] .bn.warn .ok2 { background: #ffc9c0; color: #5a0f05; } [data-mode="light"] .hold .hmeta { background: rgba(255,255,255,.92); color: var(--fg); box-shadow: 0 2px 10px rgba(0,0,0,.12); } [data-mode="light"] .hold .hmeta * { color: inherit; } /* BANTOWN.fyi by day: what's switched on wears the site's own blue, ink on it (the deep blue is for words and lines); its dark navy panels turn to a pale blue, its warnings to pale red */ [data-mode="light"][data-look="fyi"] :is(.tbn, .tbd, .voxmic.ptt, .voxsg.on, .htile.hhub, .cmp .pl.on, .rvb[aria-pressed="true"], .lopt[aria-pressed="true"], .hplay) { background: var(--mine); } [data-mode="light"][data-look="fyi"] .lopt[aria-pressed="true"] { border-color: var(--mine); } [data-mode="light"][data-look="fyi"] .mtab[aria-selected="true"] { background: var(--mine); color: var(--ink); } [data-mode="light"][data-look="fyi"] .hcount { --bbg: var(--mine); } [data-mode="light"][data-look="fyi"] :is(.rxt.on, .vtgo.voxraid, .rc.mine, .hold .hrx .rr.on) { background: #d7ecf8; } [data-mode="light"][data-look="fyi"] :is(.voxj, .voxbar) { background: #d7ecf8; --vgap: #d7ecf8; } [data-mode="light"][data-look="fyi"] .m.in.forme .bb { --bbg: #d7ecf8; } [data-mode="light"][data-look="fyi"] .m .bb .rq { background: rgba(5,6,8,.06); } [data-mode="light"][data-look="fyi"] .hold .hlift .m .bb { filter: drop-shadow(0 10px 22px rgba(0,0,0,.2)); } [data-mode="light"][data-look="fyi"] :is(.voxmic, .voxbig).off { background: #ffe4df; border-color: #ad2215; color: #8a1c0e; } [data-mode="light"][data-look="fyi"] :is(.btn.ghost.danger, .me .gr.act.danger .gn, .priv .gr.act.danger .gn) { color: #ad2215 !important; } [data-mode="light"][data-look="fyi"] .grp > .cdsrow.warn { background: #ffe4df; } [data-mode="light"][data-look="fyi"] .hcic.warn { color: #9a4a00; } [data-mode="light"][data-look="fyi"] .vtbar { background: rgba(79,195,255,.3); } [data-mode="light"][data-look="fyi"] .vtc:not([data-state="open"]) .vtwin .vtbar { background: rgba(79,195,255,.45); } [data-mode="light"][data-look="fyi"] { --vlit: #0a6aa1; } /* Clean and Glass by day: the bar and Search, the + menu, a message's menu, the box, a quote, a bubble's words */ [data-mode="light"]:not([data-look="fyi"]) :is(.tbs, .tsrch, .hdin) { background: rgba(255,255,255,.94); border-color: rgba(0,0,0,.08); box-shadow: 0 8px 26px rgba(20,20,40,.14); } [data-mode="light"]:not([data-look="fyi"]) .tab { color: #55555d; } [data-mode="light"]:not([data-look="fyi"]) :is(.plusm, .atm) { background: #ffffff; border-color: rgba(0,0,0,.08); box-shadow: 0 14px 36px rgba(20,20,40,.18); } [data-mode="light"]:not([data-look="fyi"]) .hold :is(.hrx, .hmenu) { background: #ffffff; border-color: rgba(0,0,0,.08); box-shadow: 0 14px 36px rgba(0,0,0,.18); } [data-mode="light"]:not([data-look="fyi"]) .m .bb { color: var(--fg); } [data-mode="light"]:not([data-look="fyi"]) .cmp .pl { color: #55555d; } [data-mode="light"]:not([data-look="fyi"]) .cmp .fd { border-color: #d1d1d8; } [data-mode="light"]:not([data-look="fyi"]) .cmp .fd:focus-visible { border-color: #8a8a94; } [data-mode="light"]:not([data-look="fyi"]) .m .bb .rq { background: rgba(0,0,0,.05); } [data-mode="light"]:not([data-look="fyi"]) .m .rq .rqt { color: #4a4a55; } /* Glass by day: frosted white over soft glows of the Bags' own colors */ [data-mode="light"][data-look="glass"] body, [data-mode="light"][data-look="glass"] .screen { background: var(--fade), radial-gradient(420px 340px at 8% 12%, rgba(244,223,149,.42), transparent 70%), radial-gradient(460px 420px at 104% 58%, rgba(177,228,220,.38), transparent 70%), radial-gradient(380px 320px at 30% 104%, rgba(187,178,237,.3), transparent 70%), var(--bg); } [data-mode="light"][data-look="glass"] .cdet { background: var(--fade), radial-gradient(420px 340px at 8% 12%, rgba(244,223,149,.36), transparent 70%), radial-gradient(460px 420px at 104% 58%, rgba(177,228,220,.32), transparent 70%), var(--bg); } [data-mode="light"][data-look="glass"] :is(.tbs, .tsrch, .hdin) { background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.07); } :root.wide[data-mode="light"][data-look="glass"] .screens > .tabbar { background: rgba(255,255,255,.62); border-right-color: rgba(0,0,0,.07); } [data-mode="light"][data-look="glass"] :is(.plusm, .atm) { background: rgba(255,255,255,.9); } [data-mode="light"][data-look="glass"] .hold :is(.hrx, .hmenu) { background: rgba(255,255,255,.9); } [data-mode="light"][data-look="glass"] body > .sheet.hold { background: rgba(240,240,246,.42); } [data-mode="light"][data-look="glass"] .sheet-in { background: rgba(250,250,252,.94); border-top-color: rgba(0,0,0,.06); } [data-mode="light"][data-look="glass"] .sheet.findv > .sheet-in { background: rgba(250,250,252,.97); } [data-mode="light"][data-look="glass"] .sheet:not(.hold)::before { background: rgba(20,20,30,.22); } [data-mode="light"][data-look="glass"] .sheet:not(.hold) > .sheet-in::before { background: rgba(0,0,0,.18); } [data-mode="light"][data-look="glass"] .cmp { background: rgba(255,255,255,.76); border-color: rgba(0,0,0,.08); } [data-mode="light"][data-look="glass"] .rbar { background: rgba(255,255,255,.84); border-color: rgba(0,0,0,.08); } [data-mode="light"][data-look="glass"] .chat > .banners:not(:empty) { background: rgba(250,250,252,.92); } [data-mode="light"][data-look="glass"] .m .bb { background: rgba(255,255,255,.76); border-color: rgba(0,0,0,.06); box-shadow: 0 1px 3px rgba(20,20,40,.06); } [data-mode="light"][data-look="glass"] .m .bb.gone { border-color: rgba(0,0,0,.22) !important; background: transparent; } [data-mode="light"][data-look="glass"] .m.out .bb { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(138,100,0,.14); } [data-mode="light"][data-look="glass"] .m.in.forme .bb { border-color: rgba(138,100,0,.55); box-shadow: 0 0 14px rgba(138,100,0,.12); } [data-mode="light"][data-look="glass"] .rc { background: #ffffff; color: #2c2c33; box-shadow: 0 1px 3px rgba(0,0,0,.12); } [data-mode="light"][data-look="glass"] .rc.mine { background: #fbefc4; } [data-mode="light"][data-look="glass"] .hset { color: #2c2c33; } [data-mode="light"][data-look="glass"] :is(.hgrp, .htile, .hthumb) { background: rgba(255,255,255,.8); } [data-mode="light"][data-look="glass"] .htile { color: #4a4a55; } [data-mode="light"][data-look="glass"] .hgrp .hmini { border-color: #ffffff; } [data-mode="light"][data-look="glass"] .hav.hone.here::after, [data-mode="light"][data-look="glass"] .cdfaces > i, [data-mode="light"][data-look="glass"] .dmav.on::after, [data-mode="light"][data-look="glass"] .dmdot, [data-mode="light"][data-look="glass"] .chat .chf > i, [data-mode="light"][data-look="glass"] .chat .chf.one > i.on::after, [data-mode="light"][data-look="glass"] .cdet .bags .av.on::after, [data-mode="light"][data-look="glass"] .cdet .bags .av .dmdot, [data-mode="light"][data-look="glass"] .friends .av.on::after, [data-mode="light"][data-look="glass"] .nmsheet .av.on::after { border-color: #ffffff; } [data-mode="light"][data-look="glass"] :is(.frmsg, .rvb[aria-pressed="true"] .rvl, .pwedit, .pwgo:not(.lk):not(.ct), .pwask) { color: #7d5a00; } [data-mode="light"][data-look="glass"] :is(.cdsheet .sh.msub em, .cdadd) { color: #7d5a00 !important; } [data-mode="light"][data-look="glass"] .rvb[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px #7d5a00; } [data-mode="light"][data-look="glass"] .lkic { color: #7d5a00; box-shadow: 0 10px 30px rgba(138,100,0,.12); } [data-mode="light"][data-look="glass"] :is(.hasact > .actb, .facebtn .facecam) { background: rgba(255,255,255,.92); } [data-mode="light"][data-look="glass"] .vrec { color: var(--fg); } [data-mode="light"][data-look="glass"] .vtf .vfa { box-shadow: 0 0 0 2px #ffffff; } [data-mode="light"][data-look="glass"] .voxbar { background: rgba(255,255,255,.86); --vgap: #ffffff; } [data-mode="light"][data-look="glass"] .voxsh { --vgap: #fafafc; } [data-mode="light"][data-look="glass"] .rfc { box-shadow: 0 0 0 1.5px #ffffff; } [data-mode="light"][data-look="glass"][data-solid] :is(.tbs, .tsrch, .hdin, .rbar, .plusm, .atm, .cmp) { background: #ffffff; } [data-mode="light"][data-look="glass"][data-solid] .sheet-in { background: #fafafc; } :root.wide[data-mode="light"][data-look="glass"][data-solid] .screens > .tabbar { background: #f3f3f7; } [data-mode="light"][data-look="glass"][data-solid] body > .sheet.hold { background: rgba(240,240,246,.8); } /* ================================================================ Increase Contrast (effortless, pass 2; Zbo, Nov 3: iPhone's Settings → Accessibility → Display & Text Size → Increase Contrast, and Android's high contrast, which the browser tells the page): every look firms itself, its own way. Dim words read at 10:1 or more, borders and separators at 3:1 or more on every surface, and Glass's frost turns nearly solid (canvas row 17; checked in test/e2e.mjs) */ @media (prefers-contrast: more) { :root:not([data-look]), [data-look="clean"] { --dim: #c6c6ce; --line: #6c6c76; --card2: #26262d; } [data-look="night"] { --dim: #cfccd8; --line: #8f7d4c; } [data-look="glass"] { --dim: #d2d2dc; --line: #6e6e78; --card2: var(--w16); --frost: linear-gradient(var(--edge), var(--edge)) top / 100% var(--sat) no-repeat, rgba(11,11,16,.97); } [data-look="channel"] { --dim: #c9c9d3; --line: #6a6a75; } [data-look="fyi"] { --dim: #c4cad1; --faint: #aab2bb; --line: #5d6672; --line2: #6a7380; } [data-look="bold"] { --dim: #3a3734; } [data-look="retro"] { --dim: #2a2a2a; --line: #5a76a6; } /* the separators drawn faint over the dark looks: as firm as their --line */ :is([data-look="clean"], [data-look="glass"], [data-look="channel"], [data-look="fyi"]) :is(.hold .hmi, .pmi) { border-top-color: var(--line); } :is([data-look="clean"], [data-look="channel"]) :is(.tbs, .tsrch, .hdin) { border-color: var(--line); } :is([data-look="clean"], [data-look="glass"], [data-look="channel"]) .hold .hmenu { border-color: var(--line); } [data-look="bold"] :is(.hold .hmi, .pmi) { border-top-color: rgba(24,22,27,.55); } /* Glass: the frost nearly solid, its edges seen */ [data-look="glass"] :is(.tbs, .tsrch, .hdin, .rbar, .plusm, .atm) { background: rgba(28,28,35,.97); border-color: var(--line); } [data-look="glass"] .cmp { background: rgba(28,28,35,.97); border-color: var(--line); } [data-look="glass"] :is(.hold .hmenu, .hold .hrx) { background: rgba(40,40,48,.98); } [data-look="glass"] .chat > .banners:not(:empty) { background: rgba(16,16,22,.97); } [data-look="glass"] .sheet-in { background: rgba(24,24,31,.99); border-top-color: var(--line); } [data-look="glass"] .m .bb { border-color: rgba(255,255,255,.3); } [data-look="glass"] .fsteps { background: var(--w10); box-shadow: inset 0 0 0 1px var(--line); } :root.wide[data-look="glass"] .screens > .tabbar { background: rgba(16,16,22,.97); border-right-color: var(--line); } /* Clean, Channel and BANTOWN.fyi: the Bags' bubbles and the message box outlined */ :is([data-look="clean"], [data-look="fyi"]) .m.in .bb { box-shadow: inset 0 0 0 1px var(--line); } :is([data-look="clean"], [data-look="channel"], [data-look="fyi"]) .cmp .fd { border-color: var(--line); } .heldm .hldl { color: var(--fg); } .heldm .heldb { border-width: 2px; } /* the light versions (light mode, #14): dim words nearly ink, lines 3:1, Glass's frost nearly solid white */ [data-mode="light"][data-look="clean"] { --dim: #303036; --line: #84848e; --card2: #e2e2e8; } [data-mode="light"][data-look="glass"] { --dim: #2e2e36; --line: #84848e; --card2: rgba(0,0,0,.09); --frost: linear-gradient(var(--edge), var(--edge)) top / 100% var(--sat) no-repeat, rgba(255,255,255,.97); } [data-mode="light"][data-look="fyi"] { --dim: #2a3038; --faint: #3a424b; --line: #7a848e; --line2: #6e7882; } [data-mode="light"]:not([data-look="fyi"]) :is(.tbs, .tsrch, .hdin) { border-color: var(--line); } [data-mode="light"]:not([data-look="fyi"]) .hold .hmenu { border-color: var(--line); } [data-mode="light"][data-look="glass"] :is(.tbs, .tsrch, .hdin, .rbar, .plusm, .atm, .cmp) { background: rgba(255,255,255,.97); border-color: var(--line); } [data-mode="light"][data-look="glass"] :is(.hold .hmenu, .hold .hrx) { background: rgba(255,255,255,.98); } [data-mode="light"][data-look="glass"] .chat > .banners:not(:empty) { background: rgba(255,255,255,.97); } [data-mode="light"][data-look="glass"] .sheet-in { background: rgba(250,250,252,.99); border-top-color: var(--line); } [data-mode="light"][data-look="glass"] .m .bb { border-color: rgba(0,0,0,.3); } :root.wide[data-mode="light"][data-look="glass"] .screens > .tabbar { background: rgba(255,255,255,.97); border-right-color: var(--line); } }