/* Peridot — tokens + components, the Krysion design language (DESIGN.md) with the Peridot accent: peridot green, the logo's #8bd400, the same in light and dark (Ken's rule: one green everywhere). White on it is fine where it stays easy to read: text on the accent uses --on-accent (dark ink; white text is too faint at 1.8:1), a big icon on its own uses --on-accent-icon (white). Light by default, dark on [data-theme="dark"]. §5 is the app shell, §7–8 the editor and its pickers, §9 the views in /pages. */ /* ── 1. Tokens ─────────────────────────────────────────────────────────── */ /* Gabarito (SIL OFL 1.1, github.com/naipefoundry/gabarito), served from Krysion; no Google Fonts */ @font-face { font-family: "Gabarito"; src: url("https://www.krysion.com/assets/fonts/Gabarito-VariableFont_wght.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } :root { --accent: #8bd400; --accent-hover: #78b800; --accent-soft: #e6f6c4; --accent-tint: #f5fbe8; --accent-text: #8bd400; /* the same green for text: never a lighter or darker shade */ --on-accent: #101a05; --on-accent-icon: #ffffff; /* icon-only buttons filled with the accent (the compose buttons) */ --ink: #1a1320; --ink-soft: #4a4453; --muted: #857e90; --bg: #ffffff; --bg-alt: #faf6fb; --bg-tint: #f6eef6; --panel: #ffffff; --border: #ece6f0; --border-strong: #ddd4e4; --chrome-bg: rgba(255, 255, 255, .82); --chrome-solid: #ffffff; --chrome-ink: #1a1320; --chrome-ink-soft: #4a4453; --chrome-border: #ece6f0; --chrome-hover: var(--accent-tint); --shadow-sm: 0 2px 8px rgba(26, 19, 32, .06); --shadow-md: 0 8px 28px rgba(26, 19, 32, .10); --shadow-lg: 0 24px 64px rgba(26, 19, 32, .16); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-pill: 999px; --font: "Gabarito", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --maxw: 1120px; --maxw-app: 1360px; /* the social shell needs more room than a text page */ /* the notch / status bar and the gesture bar: the browser's env(), or the variables the Android app's shell injects when its WebView has no env() */ --safe-t: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); --safe-b: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)); --header-h: calc(64px + var(--safe-t)); /* supporting cast (DESIGN.md §2.2) — tags and badges */ --gold: #fbbf24; --pink: #ff4fa3; --teal: #2dd4bf; --blue: #60a5fa; --green: #6fe0a0; --orange: #fb923c; --purple: #b200ff; --red: #f87171; --danger: #c0392b; --ok: #1f9d55; /* neutral grey for labels that must not look like the brand (the Parody badge) */ --neutral-soft: #ecebef; --neutral-ink: #5d5766; color-scheme: light; } :root[data-theme="dark"] { --on-accent-icon: var(--on-accent); /* white icons on the green are a light-theme look (Ken); dark keeps the ink */ --bg: #14111a; --bg-alt: #1b1722; --bg-tint: #231e2c; --panel: #1b1722; --border: #2c2636; --border-strong: #3a3247; --ink: #efeaf3; --ink-soft: #c9c0d2; --muted: #8d8499; --chrome-bg: rgba(20, 17, 26, .82); --chrome-solid: #1b1722; --chrome-ink: #efeaf3; --chrome-ink-soft: #c9c0d2; --chrome-border: #2c2636; --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--bg)); --accent-tint: color-mix(in srgb, var(--accent) 11%, var(--bg)); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .25); --shadow-md: 0 8px 28px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 64px rgba(0, 0, 0, .5); --danger: #ff6b6b; --ok: #4ade80; --neutral-soft: #332e3b; --neutral-ink: #cdc7d4; color-scheme: dark; } /* signed-out-only bits stay hidden until Firebase has answered, and for anyone we remember as signed in */ html:not(.auth-ready) .signed-out-only, html.probably-in .signed-out-only { display: none !important; } /* and members-only bits (the aside's cards) only for someone signed in or remembered as signed in */ html:not(.probably-in) .signed-in-only { display: none !important; } /* ── 2. Base ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-top: var(--header-h); overflow-wrap: anywhere; } body.modal-open { overflow: hidden; } main { flex: 1; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0; } p { margin: 0; } a { color: var(--accent-text); text-decoration: none; } img, video { max-width: 100%; display: block; } button { font-family: inherit; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .hidden { display: none !important; } .muted { color: var(--muted); } .eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── 3. Components ─────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font); font-weight: 600; font-size: 1.02rem; line-height: 1.3; padding: 13px 26px; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; } .btn i { font-size: 1.05em; } .btn-primary { background: var(--accent); color: var(--on-accent); } @media (hover: hover) { .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-2px); } } .btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--border-strong); } @media (hover: hover) { .btn-ghost:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-2px); } } .btn-danger { background: var(--panel); color: var(--ink); border-color: var(--border-strong); } @media (hover: hover) { .btn-danger:hover { color: var(--danger); border-color: var(--danger); transform: translateY(-2px); } } .btn-sm { padding: 10px 20px; font-size: .98rem; } .btn-xs { padding: 7px 14px; font-size: .9rem; } .btn-lg { font-size: 1.1rem; padding: 16px 34px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none !important; } .btn:active { transform: scale(.97); } /* a button that's working (setBusy): the label steps aside for a spinner in its own colour */ .btn.busy { position: relative; color: transparent !important; opacity: 1 !important; cursor: progress; } .btn.busy > * { visibility: hidden; } .btn.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border-radius: 50%; border: 2px solid var(--spin, var(--ink)); border-top-color: transparent; animation: spin .75s linear infinite; } .btn-primary.busy { --spin: var(--on-accent); } /* Travel Journal's close button: a soft disc, no outline */ .icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tint); color: var(--ink-soft); font-size: .95rem; padding: 0; flex-shrink: 0; transition: background .15s, color .15s, transform .12s; } @media (hover: hover) { .icon-btn:hover { background: var(--border-strong); color: var(--ink); } } .icon-btn:active { transform: scale(.95); } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; min-width: 0; } a.card, .card[href], .card.clickable { color: var(--ink); outline: 2px solid transparent; outline-offset: -2px; transition: transform .16s ease, outline-color .16s ease; cursor: pointer; } @media (hover: hover) { a.card:hover, .card.clickable:hover { outline-color: var(--accent); transform: translateY(-2px); } } .card-lesser { background: var(--bg-alt); } .tinted { background: var(--accent-tint); border: 1px solid var(--accent-soft); border-radius: var(--radius); padding: 16px 20px; } .disk { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; } @media (max-width: 640px) { .card { padding: 22px 18px; } } .input, .textarea, .select { width: 100%; font: inherit; color: var(--ink); background: var(--bg-tint); border: 1px solid var(--border-strong); padding: 11px 16px; border-radius: var(--radius-pill); outline: none; transition: border-color .15s; margin: 0; } .textarea { border-radius: var(--radius); resize: vertical; min-height: 120px; line-height: 1.55; } .input:focus, .textarea:focus, .select:focus { border-color: var(--accent); } .input::placeholder, .textarea::placeholder { color: var(--muted); } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: .9rem; font-weight: 600; color: var(--ink); } .field .hint { font-size: .85rem; color: var(--muted); } /* the reply box's avatar sits level with the one-line "Write a reply…" stub (and at the top once the editor opens) */ .reply-form:has(> .rf-main > .reply-stub) { align-items: center; } .field label:has(.char-count) { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .char-count { font-size: .78rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; } .char-count.near { color: var(--danger); } .row-input { display: flex; gap: 8px; flex-wrap: wrap; } .row-input .input { flex: 1; min-width: 150px; } .row-input .btn { flex: none; } .at-wrap { position: relative; } .at-wrap::before { content: '@'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--accent-text); font-weight: 700; pointer-events: none; } .at-wrap .input { padding-left: 32px; } .chip { font-family: inherit; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .9rem; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--panel); border: 1px solid var(--border); color: var(--ink-soft); cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .15s; white-space: nowrap; } .chip i { font-size: .9em; } @media (hover: hover) { .chip:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); } } .chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } /* a tag chip colours itself with --hue: its icon carries the colour, the pill stays quiet */ .chip.tag { --hue: var(--accent); } .chip.tag i { color: var(--hue); } @media (hover: hover) { .chip.tag:hover { border-color: var(--hue); color: var(--hue); } } /* hover rings: pills people click get a slightly thicker edge (the border plus a ring in the same colour) */ @media (hover: hover) { .chip:hover { box-shadow: inset 0 0 0 1px var(--accent); } } @media (hover: hover) { .chip.tag:hover { box-shadow: inset 0 0 0 1px var(--hue); } } @media (hover: hover) { .chip.active:hover { box-shadow: none; } } .chip.tag.active { background: var(--hue); border-color: var(--hue); color: var(--on-accent); } .chip.tag.active i { color: inherit; } .chip.tag .n, .chip.hashchip .n { font-weight: 500; color: var(--muted); } .chip.hashchip { gap: 2px; } .chip.hashchip .hash { color: var(--accent-text); font-weight: 700; } .chip.hashchip .n { margin-left: 5px; } .seg { display: inline-flex; background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius-pill); padding: 3px; gap: 2px; } .seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: .95rem; padding: 7px 16px; border-radius: var(--radius-pill); cursor: pointer; transition: background .15s, color .15s; } @media (hover: hover) { .seg button:hover { color: var(--ink); } } .seg button.active { background: var(--accent); color: var(--on-accent); } .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } .seg button { white-space: nowrap; flex: none; } @media (max-width: 600px) { .seg button { padding: 7px 12px; font-size: .9rem; } } .badge { display: inline-block; background: var(--accent); color: var(--on-accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-pill); } .badge.soft { background: var(--accent-soft); color: var(--accent-text); } .badge-danger { background: var(--danger); color: #fff; } .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-strong); background: var(--bg-tint); flex: none; transition: border-color .15s; } @media (hover: hover) { a:hover > .avatar, .avatar:hover { border-color: var(--accent); } } .avatar-sm { width: 32px; height: 32px; } .avatar-lg { width: 96px; height: 96px; border-width: 3px; } .avatar-xl { width: 128px; height: 128px; border-width: 4px; } .empty { text-align: center; color: var(--muted); padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .spinner { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: spin 1s linear infinite; margin: 32px auto; } @keyframes spin { to { transform: rotate(360deg); } } .stat { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-pill); text-decoration: none; transition: background .15s, color .15s; border: 0; background: none; font-family: inherit; cursor: default; line-height: 1.3; } a.stat, button.stat { cursor: pointer; } @media (hover: hover) { a.stat:hover, button.stat:hover { background: var(--bg-tint); color: var(--ink); } } /* Toasts (peridot.js toast): one green, the brand's, for "done"; neutral ink for information; red for errors. On phones they sit above the tab bar and its raised compose button, never on it; a message that needs two lines becomes a rounded card, not a stretched pill. */ .toast-host { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: min(460px, calc(100vw - 32px)); } .toast { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 12px 20px; border-radius: var(--radius-pill); line-height: 1.35; color: var(--bg); font-weight: 600; box-shadow: var(--shadow-lg); background: var(--ink); animation: toastIn .2s ease both; pointer-events: auto; } .toast > i { flex: none; font-size: 1.05em; } .toast.ok { background: var(--accent); color: var(--on-accent); } .toast.err { background: #d64545; color: #fff; } .toast.multi { border-radius: 18px; padding: 12px 18px; } body.is-offline .toast-host { bottom: calc(76px + var(--safe-b)); } @media (max-width: 760px) { body.has-tabbar .toast-host { bottom: calc(96px + var(--safe-b)); } body.has-tabbar.is-offline .toast-host { bottom: calc(148px + var(--safe-b)); } .toast { padding: 11px 16px; font-size: .93rem; gap: 9px; } .toast.multi { padding: 11px 16px; } } .toast.leaving { animation: toastOut .2s ease both; } @keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(8px); } } /* Modals (DESIGN.md §9) */ .modal-backdrop { position: fixed; inset: 0; z-index: 1500; background: rgba(26, 19, 32, .5); display: none; animation: fadeIn .2s both; } .modal-backdrop.open { display: block; } .modal-backdrop.closing { animation: fadeOut .2s ease both; } .modal:focus { outline: none; } .modal { position: fixed; z-index: 1501; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(800px, calc(100vw - 2rem)); max-height: min(88vh, 760px); background: var(--panel); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden; } .modal.open { display: flex; animation: modalIn .28s cubic-bezier(.2, .8, .2, 1) both; } .modal.open.closing { animation: modalOut .2s ease both; } .modal-sm { width: min(480px, calc(100vw - 2rem)); } .modal-md { width: min(640px, calc(100vw - 2rem)); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px 16px; } .modal-head h3 { font-size: 1.3rem; line-height: 1.3; display: flex; align-items: center; gap: 10px; margin: 0; flex: 1; min-width: 0; white-space: nowrap; } .modal-head h3 i { color: var(--accent-text); } .modal-sub { font-size: .92rem; color: var(--muted); font-weight: 600; margin: 3px 0 0; } .modal-head .icon-btn { width: 42px; height: 42px; font-size: 1.05rem; } .modal-head .header-tools { display: flex; align-items: center; gap: 14px; flex: none; } .modal-body { padding: 0 26px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; } .modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 26px; border-top: 1px solid var(--border); background: var(--bg-alt); } .modal-foot .left { margin-right: auto; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } } @keyframes modalIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.94) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } } @keyframes modalOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1) } to { opacity: 0; transform: translate(-50%, -50%) scale(.96) } } @media (max-width: 600px) { .modal, .modal-sm, .modal-md, .modal-compose, .modal-crop { left: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 92vh; max-height: calc(100dvh - var(--safe-t) - 24px); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .modal.open { animation: sheetIn .3s cubic-bezier(.2, .8, .2, 1) both; } .modal.open.closing { animation: sheetOut .22s ease both; } .modal-head { padding: 18px 20px 12px; } .modal-body { padding: 0 20px 18px; } /* the sheet's last row (its buttons, or the body when there are none) keeps clear of the bottom edge and the gesture bar */ .modal-foot { padding: 14px 20px calc(18px + var(--safe-b)); } .modal:not(:has(.modal-foot)) .modal-body { padding-bottom: calc(24px + var(--safe-b)); } } @keyframes sheetIn { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } } @keyframes sheetOut { from { transform: none; opacity: 1 } to { transform: translateY(30px); opacity: 0 } } .error-msg { background: color-mix(in srgb, var(--danger) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--panel)); color: var(--danger); padding: 10px 14px; border-radius: var(--radius-sm); font-size: .9rem; display: none; } .error-msg.show { display: block; } .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } .fade-up { animation: fadeUp .45s cubic-bezier(.2, .8, .2, 1) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Prose / rendered Markdown (posts, replies, bios) */ .prose { color: var(--ink-soft); line-height: 1.65; overflow-wrap: anywhere; min-width: 0; } .prose > * + * { margin-top: .9em; } .prose h1 { font-size: 1.55rem; color: var(--ink); margin-top: 1.4em; } .prose h2 { font-size: 1.3rem; color: var(--ink); margin-top: 1.3em; } .prose h3 { font-size: 1.12rem; color: var(--ink); margin-top: 1.2em; } .prose h4, .prose h5, .prose h6 { font-size: 1rem; color: var(--ink); margin-top: 1.1em; } .prose p:empty { display: none; } .prose a { color: var(--accent-text); } @media (hover: hover) { .prose a:hover { text-decoration: underline; } } .prose a.mention, .prose a.hashtag { font-weight: 600; } .prose .math-display { display: block; margin: .9em 0; overflow-x: auto; overflow-y: hidden; text-align: center; padding: 2px 0; } .prose .katex { font-size: 1.06em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .3em; } .prose blockquote { margin: 0; border-left: 4px solid var(--accent); background: var(--accent-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 18px; } .prose code { font-family: var(--mono); font-size: .88em; background: var(--bg-tint); padding: 1px 7px; border-radius: 6px; color: var(--ink); } .prose pre { background: #1d1726; border: 1px solid #322a3f; color: #ece8f2; border-radius: var(--radius); padding: 16px 18px; overflow: auto; font-size: .9rem; line-height: 1.7; } .prose pre code { background: none; padding: 0; color: inherit; } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; } .prose img { border-radius: var(--radius); border: 1px solid var(--border); max-height: 640px; width: auto; } .prose video { border-radius: var(--radius); border: 1px solid var(--border); width: 100%; max-height: 640px; background: #000; } .prose audio { width: 100%; } .prose .embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #000; } .prose .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .prose .media-row { display: flex; flex-wrap: wrap; gap: 8px; } .prose .media-row img { max-height: 320px; } /* a picture or video still on its way (renderMarkdown adds .media-wait until it arrives): a grey box with a green spinner */ .prose img.media-wait, .prose video.media-wait { display: inline-block; vertical-align: top; width: min(100%, 420px); height: auto; aspect-ratio: 4 / 3; color: transparent; background: var(--bg-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%238bd400' stroke-width='3' stroke-linecap='round' stroke-dasharray='70 101'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center / 32px no-repeat; } .prose video.media-wait { width: 100%; aspect-ratio: 16 / 9; } .prose .media-row img.media-wait { width: min(100%, 240px); } .klipy-card:has(> .media-wait) > .klipy-mark { display: none; } .prose table { width: 100%; border-collapse: collapse; font-size: .98rem; } .prose th, .prose td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; } .prose th { color: var(--ink); font-weight: 700; } .prose mark { background: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--ink); padding: 0 3px; border-radius: 4px; } .prose li.task { list-style: none; margin-left: -1.3em; } .prose li.task input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -2px; } .prose dl { margin: 0; } .prose dt { font-weight: 700; color: var(--ink); } .prose dd { margin: 0 0 .5em 1.3em; } .prose .fn-ref a { font-weight: 700; font-size: .8em; } .prose .fn-def { font-size: .9rem; color: var(--muted); display: flex; gap: 8px; } .prose * + .fn-def { border-top: 1px solid var(--border); padding-top: .8em; margin-top: 1.2em; } .prose .fn-def + .fn-def { border-top: 0; padding-top: 0; margin-top: .3em; } .prose .fn-id { font-weight: 700; color: var(--accent-text); } .prose .fn-id::before { content: '['; } .prose .fn-id::after { content: ']'; } /* code blocks (DESIGN.md §8.6): dark card, a bar with the language and a copy button on hover */ .codeblock { position: relative; } .codeblock pre { margin: 0; padding-top: 34px; } .code-bar { position: absolute; top: 8px; right: 10px; left: 16px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; } .code-bar span { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8a7fa0; font-weight: 700; } .code-copy { pointer-events: auto; opacity: 0; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .8rem; font-weight: 600; color: #ece8f2; background: rgba(255, 255, 255, .08); border: 1px solid #3f3550; border-radius: var(--radius-pill); padding: 4px 10px; cursor: pointer; transition: opacity .15s, background .15s; } .code-copy:focus-visible { opacity: 1; } @media (hover: hover) { .codeblock:hover .code-copy { opacity: 1; } } @media (hover: hover) { .code-copy:hover { background: rgba(255, 255, 255, .16); } } .hljs-keyword, .hljs-selector-tag, .hljs-tag, .hljs-name, .hljs-attr, .hljs-attribute, .hljs-meta, .hljs-doctag, .hljs-section { color: #ff7eb6; } .hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-tag, .hljs-quote { color: #b8e994; } .hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-link { color: #f8c06b; } .hljs-comment, .hljs-deletion { color: #8a7fa0; font-style: italic; } .hljs-punctuation, .hljs-operator, .hljs-variable, .hljs-params { color: #c9b6ff; } .hljs-title, .hljs-built_in, .hljs-type { color: #ece8f2; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; } /* a feed card's cut: posts.js fitClamp sets the height per post (22em until it has measured); the fade is a fixed 56px (CLAMP.FADE) so a picture or video shown whole above the cut is never faded */ .prose.clamp { max-height: 22em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); } /* ── 4. Header: wordmark in the middle, Settings left (phones, text pages), Sign in right when signed out. Navigation and identity live in the rail / tab bar. ── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); padding-top: var(--safe-t); background: var(--chrome-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--chrome-border); } .site-header .wrap { max-width: var(--maxw-app); height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--chrome-ink); font-size: 1.5rem; font-weight: 600; text-decoration: none; letter-spacing: -.01em; } .wordmark img { height: 30px; width: auto; transition: transform .2s; } @media (hover: hover) { .wordmark:hover img { transform: rotate(-8deg); } } .nav-left { justify-self: start; display: flex; align-items: center; gap: 10px; } .nav-right { justify-self: end; display: flex; align-items: center; gap: 10px; } /* Settings sits in the rail on wide app screens; the header carries it on phones and on the text pages */ /* Back: always on the text pages (terms, privacy, cookies, export-chats); in the app only on the views reached from several places (app.js sets body.show-back). A ghost pill with the word on wide screens, a small round chevron like the bell on phones. */ .header-back { display: none; } /* nothing in the blurred header moves: a lift or a press-shrink there made Chrome repaint the button in tiles for a moment (a faint grid) */ .site-header .btn, .site-header .btn:active, .site-header .icon-btn:active { transform: none; } @media (hover: hover) { .site-header .btn:hover { transform: none; } } body:not(.has-shell) .header-back, body.show-back .header-back { display: inline-flex; } .header-back i { font-size: .8rem; } @media (max-width: 760px) { .header-back { width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 50%; background: var(--bg-tint); color: var(--ink-soft); font-size: .95rem; flex-shrink: 0; } @media (hover: hover) { .header-back:hover { background: var(--border-strong); color: var(--ink); } } .header-back:active { background: var(--border-strong); } .header-back i { font-size: .95rem; } .header-back span { display: none; } } /* "A new version is ready" (pwa.js): can't be closed, fixed on screen on every page. Bottom-centre; on phones above the tab bar AND its raised compose button (64px bar + 22px lift, so 96px clears it with room). Toasts and page ends move up for it (below). */ .update-bar { position: fixed; z-index: 1100; left: 16px; right: 16px; margin: 0 auto; width: fit-content; bottom: calc(24px + var(--safe-b)); max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--panel); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); font-size: .92rem; font-weight: 600; animation: popIn .2s ease both; } .update-bar > i { color: var(--accent-text); } @media (max-width: 760px) { body.has-tabbar .update-bar { bottom: calc(96px + var(--safe-b)); } } /* the Android app shows no Krysion footer (peridot.js does not load it; this covers a text page that has its own); the tab bar still needs room */ html.in-app #site-footer, html.in-app .krysion-footer { display: none !important; } html.in-app .shell { padding-bottom: calc(96px + var(--safe-b)); } /* "Offline. Showing saved posts." (pwa.js): same place as the update bar, which then sits above it */ .offline-bar { position: fixed; z-index: 1099; left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: calc(100vw - 32px); bottom: calc(24px + var(--safe-b)); display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--ink); color: var(--bg); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); font-size: .9rem; font-weight: 600; animation: popIn .2s ease both; } @media (max-width: 760px) { body.has-tabbar .offline-bar { bottom: calc(96px + var(--safe-b)); } } body.is-offline .update-bar { bottom: calc(76px + var(--safe-b)); } @media (max-width: 760px) { body.has-tabbar.is-offline .update-bar { bottom: calc(148px + var(--safe-b)); } } /* while the update bar is up: toasts rise above it (and above the offline pill too), and the end of every page gets room so the last lines (the footer's links) can be scrolled clear of it */ body.has-update .toast-host { bottom: calc(84px + var(--safe-b)); } body.has-update.is-offline .toast-host { bottom: calc(136px + var(--safe-b)); } body.has-update #site-footer { padding-bottom: calc(96px + var(--safe-b)); } /* the bar: 24px up + about 54px tall */ body.has-update #lockout { padding-bottom: calc(var(--safe-b) + 96px); } @media (max-width: 760px) { body.has-tabbar.has-update .toast-host { bottom: calc(156px + var(--safe-b)); } body.has-tabbar.has-update.is-offline .toast-host { bottom: calc(208px + var(--safe-b)); } body.has-tabbar.has-update #site-footer { padding-bottom: calc(168px + var(--safe-b)); } html.in-app body.has-update .shell { padding-bottom: calc(156px + var(--safe-b)); } } .header-settings.active { background: var(--accent-tint); color: var(--accent-text); } .banned-strip { position: fixed; top: calc(var(--header-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 95; max-width: min(560px, calc(100vw - 32px)); font-size: .92rem; box-shadow: var(--shadow-md); } /* Cookie banner (the shared Krysion one, cookies.js) in Peridot's colours: green Accept with dark ink, never white on the lime */ .krysion-cookies { --kc-bg: var(--panel); --kc-ink: var(--ink); --kc-ink-soft: var(--ink-soft); --kc-border: var(--border); --kc-ghost-border: var(--border-strong); --kc-accent: var(--accent); --kc-accent-hover: var(--accent-hover); --kc-on-accent: var(--on-accent); font-family: var(--font); } .krysion-cookies .kc-text a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; } @media (hover: hover) { .krysion-cookies .kc-text a:hover { color: var(--ink); text-decoration-color: var(--ink); } } @media (hover: hover) { .krysion-cookies .kc-accept:hover { background: var(--accent-hover); } } @media (hover: hover) { .krysion-cookies .kc-decline:hover { border-color: var(--accent); } } .popover { position: absolute; top: calc(100% + 10px); right: 0; width: 250px; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 12px; z-index: 1001; display: none; flex-direction: column; gap: 4px; animation: popIn .18s ease both; } .popover.open { display: flex; } .popover.closing { display: flex; animation: popOut .18s ease both; pointer-events: none; } @keyframes popIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes popOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } } .pop-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; } .pop-user .name { font-weight: 700; line-height: 1.2; } .pop-user .handle { font-size: .85rem; color: var(--muted); } .pop-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-weight: 600; font-size: .95rem; padding: 10px 14px; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none; transition: background .15s, color .15s, transform .15s; } .pop-btn i { width: 18px; text-align: center; color: var(--muted); } @media (hover: hover) { .pop-btn:hover { background: var(--accent-tint); color: var(--ink); } } .pop-btn.primary { background: var(--accent); color: var(--on-accent); justify-content: center; margin: 4px 0; } .pop-btn.primary i { color: inherit; } @media (hover: hover) { .pop-btn.primary:hover { background: var(--accent-hover); transform: translateY(-2px); } } @media (hover: hover) { .pop-btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); color: var(--danger); } } @media (hover: hover) { .pop-btn.danger:hover i { color: var(--danger); } } @media (max-width: 760px) { .site-header .wrap { padding: 0 16px; } } /* ── 5. App shell: rail · stream · aside ───────────────────────────────── */ .shell { max-width: var(--maxw-app); display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 32px; align-items: start; padding-top: 28px; padding-bottom: 92px; } .rail { position: sticky; top: calc(var(--header-h) + 28px); display: flex; flex-direction: column; gap: 4px; } .rail-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-pill); font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: background .15s, color .15s; font-size: 1.02rem; } .rail-link i { width: 22px; text-align: center; font-size: 1.05rem; color: var(--muted); transition: transform .2s, color .15s; } @media (hover: hover) { .rail-link:hover { background: var(--bg-tint); color: var(--ink); } } @media (hover: hover) { .rail-link:hover i { transform: rotate(-8deg) scale(1.1); color: var(--accent-text); } } .rail-link.active { background: var(--accent-tint); color: var(--accent-text); } .rail-link.active i { color: var(--accent-text); } .rail .btn { margin-top: 12px; } /* the Profile slot once signed in: avatar + name + handle */ .rail-link.is-me { padding: 8px 10px; } .rail-link.is-me .avatar-sm { width: 32px; height: 32px; } .rail-link.is-me .me-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .rail-link.is-me .me-text b { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-link.is-me .me-text small { color: var(--muted); font-weight: 500; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-link.is-me.active .me-text b { color: var(--accent-text); } .aside { position: sticky; top: calc(var(--header-h) + 28px); max-height: calc(100vh - var(--header-h) - 28px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding-bottom: 28px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .aside .card { padding: 20px 20px; flex: none; } .aside h4 { font-size: 1.02rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .aside h4 i { color: var(--accent-text); } .stream { min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 16px; } .view { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .shell[data-aside="false"] .aside { display: none; } /* pages without an aside (admin) give the stream the whole width */ .shell[data-aside="false"] { grid-template-columns: 220px minmax(0, 1fr); } .shell[data-aside="false"] .stream { max-width: none; } .feed { display: flex; flex-direction: column; gap: 16px; } .stream-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .stream-head h1 { font-size: 1.5rem; white-space: nowrap; } .tabbar { display: none; } /* medium screens: the rail collapses to icons, then the aside goes */ @media (max-width: 1240px) { .shell { grid-template-columns: 64px minmax(0, 1fr) 300px; gap: 24px; } .shell[data-aside="false"] { grid-template-columns: 64px minmax(0, 1fr); } .rail-link { justify-content: center; padding: 12px 0; } .rail-link span { display: none; } .rail-link.is-me { padding: 6px 0; } .rail-link.is-me .me-text { display: none; } .rail-link i { width: auto; font-size: 1.2rem; } .rail .btn { padding: 12px 0; width: 56px; margin-left: 4px; } .rail .btn span { display: none; } .rail .btn i { font-size: 1.15rem; } .rail .btn-primary { color: var(--on-accent-icon); } @media (hover: hover) { .rail .btn-primary:hover { color: var(--on-accent-icon); } } /* icon only now: white reads well at this size */ } @media (max-width: 1000px) { .shell { grid-template-columns: 64px minmax(0, 1fr); } .aside { display: none; } } @media (max-width: 760px) { .shell, .shell[data-aside="false"] { grid-template-columns: 1fr; padding: 16px 16px 24px; } /* the fixed tab bar must not cover the Krysion footer: push everything after the shell up by its height */ body.has-tabbar #site-footer { padding-bottom: calc(92px + var(--safe-b)); } body.has-tabbar .krysion-cookies { bottom: calc(96px + var(--safe-b)); } .rail { display: none; } .stream { max-width: none; } /* phone: bottom tab bar (the one deliberate charm of the shell) */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: calc(64px + var(--safe-b)); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--chrome-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--chrome-border); padding-bottom: var(--safe-b); } .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; font-size: .68rem; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; } .tabbar i { font-size: 1.2rem; transition: transform .2s; } .tabbar a.active { color: var(--accent-text); } @media (hover: hover) { .tabbar a:hover { color: var(--accent-text); } } .tabbar a.active i { transform: translateY(-2px); } .tabbar .compose { margin-top: -22px; } .tabbar .compose span { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--on-accent-icon); display: grid; place-items: center; font-size: 1.3rem; box-shadow: var(--shadow-md); transition: transform .16s, background .16s; } @media (hover: hover) { .tabbar .compose:hover span { transform: translateY(-2px); background: var(--accent-hover); } } } /* ── 6. Posts ──────────────────────────────────────────────────────────── */ .post { --hue: var(--accent); display: flex; flex-direction: column; gap: 12px; position: relative; min-width: 0; } .post.card { padding: 20px 22px; } @media (max-width: 640px) { .post.card { padding: 16px; } .post-head { gap: 10px; } } /* a feed card (and a reply card on a profile) opens its post when clicked anywhere that isn't a control (posts.js openOnClick): a faint wash on hover says so */ .card.open-post { cursor: pointer; transition: background .15s, border-color .15s; } @media (hover: hover) { .card.open-post:hover { background: color-mix(in srgb, var(--panel), var(--ink) 3%); border-color: var(--border-strong); } }.post-head { display: flex; align-items: center; gap: 12px; min-width: 0; } .post-head .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1; } .post-head .who a { color: var(--ink); } .post-head .name > a, .reply .head .name, .person-row .who .name > a, .person a.name, .notif .n-text a, .reply-card .ctx-post b, .tl-who b { text-decoration: underline 2px transparent; text-underline-offset: 3px; transition: text-decoration-color .15s, color .15s; } @media (hover: hover) { .post-head .name > a:hover, .reply .head .name:hover, .person-row .who .name > a:hover, .person a.name:hover, .notif .n-text a:hover, .reply-card .ctx-post:hover b, .top-list a:hover .tl-who b { text-decoration-color: var(--accent); } } @media (hover: hover) { .reply .head .handle:hover { color: var(--accent-text); } } .post-head .name { font-weight: 700; display: flex; align-items: center; gap: 6px; min-width: 0; } .post-head .name > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-head .meta { font-size: .88rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .post-head .meta a { color: var(--muted); } @media (hover: hover) { .post-head .meta a:not(.chip):hover { color: var(--accent-text); } } @media (hover: hover) { .post-head .meta .chip.tag:hover { color: var(--hue); box-shadow: inset 0 0 0 .5px var(--hue); } } /* the post's category: its own colour, a hair thicker */ .post-head .meta .chip { padding: 2px 9px 2px 7px; font-size: .78rem; gap: 5px; } .post-title { font-size: 1.25rem; overflow-wrap: anywhere; } /* the title is plain text (the whole card is the link), so it no longer turns green on hover: the card's wash says "click" */ .post-body { min-width: 0; } /* the foot of a post: reactions on the left (they wrap inside their own column), the reply and view counts together on the right of its first line, always: the same on a phone and a desktop, in a feed and on the post page */ .post-foot { display: flex; align-items: flex-start; gap: 6px 10px; padding-top: 4px; } .post-foot .reactions { flex: 1 1 auto; min-width: 0; } .post-stats { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; } .post-stats .stat { white-space: nowrap; } .reactions { display: flex; gap: 4px; flex-wrap: wrap; } .react { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius-pill); padding: 4px 10px; font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; line-height: 1.3; } @media (hover: hover) { .react:hover { border-color: var(--accent); transform: translateY(-2px); } } .react.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-text); } .react .n { font-size: .82rem; } .react.zero .n { display: none; } .react-more { border-style: dashed; color: var(--muted); } .react-who { border: 0; background: none; font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-pill); transition: background .15s, color .15s; align-self: center; } @media (hover: hover) { .react-who:hover { background: var(--bg-tint); color: var(--ink); } } .person-row .trail { font-size: 1.1rem; flex: none; } .read-more { align-self: flex-start; font-weight: 600; font-size: .92rem; color: var(--accent-text); } @media (hover: hover) { .open-post:hover .read-more { text-decoration: underline; } } /* replies */ .replies { display: flex; flex-direction: column; } .reply { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); min-width: 0; } .reply.depth-1 { margin-left: 44px; } .reply.depth-2, .reply.depth-3 { margin-left: 88px; } .reply .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .reply .head { display: flex; align-items: center; gap: 8px; font-size: .92rem; flex-wrap: wrap; } .reply .head .name { font-weight: 700; color: var(--ink); } .reply .head .time { color: var(--muted); } .reply .actions { display: flex; align-items: flex-start; gap: 4px 8px; margin-top: 2px; } .reply .actions .reactions { flex: 1 1 auto; min-width: 0; } .reply-tools { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; } .reply .actions .stat { font-size: .85rem; padding: 5px 9px; white-space: nowrap; } .reply .actions .stat-icon { padding: 5px 10px; } .reply .head .handle { color: var(--muted); } .reply.deleted .prose { color: var(--muted); font-style: italic; } .reply-form { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; } .reply .reply-form { border-top: 1px solid var(--border); } .reply-form .textarea { min-height: 72px; } .reply-form .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; align-items: center; } @media (max-width: 640px) { .reply.depth-1 { margin-left: 20px; } .reply.depth-2, .reply.depth-3 { margin-left: 40px; } } /* ── 7. Editor: TipTap / ProseMirror that reads and writes Markdown (editor.js) ── */ .editor { position: relative; background: var(--bg-tint); border: 1px solid var(--border-strong); border-radius: var(--radius); transition: border-color .15s; display: flex; flex-direction: column; min-width: 0; } .editor:focus-within { border-color: var(--accent); } .ed-sentinel { height: 1px; margin-bottom: -1px; } .ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); position: sticky; top: var(--ed-stick, 0px); z-index: 6; background: var(--bg-tint); border-radius: var(--radius) var(--radius) 0 0; } .ed-tools.stuck { border-radius: 0; box-shadow: 0 -24px 0 0 var(--ed-cover, var(--panel)), 0 10px 14px -12px rgba(0, 0, 0, .45); } .ed-btn { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-soft); font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; padding: 0; flex: none; } @media (hover: hover) { .ed-btn:hover { background: var(--panel); color: var(--ink); } } .ed-btn.on { background: var(--accent-soft); color: var(--accent-text); } .ed-btn:disabled { opacity: .35; cursor: default; background: transparent; } .ed-btn.text { width: auto; padding: 0 10px; gap: 6px; font-weight: 600; font-size: .85rem; } .ed-btn.label b { font-size: .64rem; font-weight: 700; letter-spacing: .04em; border: 1.5px solid currentColor; border-radius: 4px; padding: 0 3px; line-height: 1.35; } .ed-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 4px; flex: none; } .ed-spacer { flex: 1; } .ed-body { position: relative; } .ed-area { min-width: 0; } .ed-loading { min-height: 220px; display: grid; place-items: center; } .ed-area .ProseMirror { padding: 14px 16px; min-height: 220px; outline: none; color: var(--ink); line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; } .ed-area .ProseMirror > * + * { margin-top: .75em; } .ed-area .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--muted); float: left; height: 0; pointer-events: none; } .ed-area .ProseMirror hr { border: 0; height: 2px; background: var(--border-strong); margin: 1.1em 0; cursor: pointer; } .ed-area .ProseMirror hr.ProseMirror-selectednode { background: var(--accent); } .ed-area .ProseMirror pre { white-space: pre-wrap; font-family: var(--mono); } .ed-area .ProseMirror a { cursor: text; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-text) 40%, transparent); text-underline-offset: 2px; } .ed-area .ProseMirror a.mention { text-decoration: none; background: var(--accent-tint); border-radius: 6px; padding: 0 4px; white-space: nowrap; cursor: default; } .ed-hashtag { color: var(--accent-text); font-weight: 600; } .ed-area ul[data-type="taskList"] { list-style: none; padding-left: 0; } .ed-area li[data-type="taskItem"] { display: flex; gap: 8px; align-items: flex-start; } .ed-area li[data-type="taskItem"] > label { flex: none; margin-top: .22em; display: flex; } .ed-area li[data-type="taskItem"] > label input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; cursor: pointer; } .ed-area li[data-type="taskItem"] > div { flex: 1; min-width: 0; } .ed-area li[data-type="taskItem"][data-checked="true"] > div { color: var(--muted); text-decoration: line-through; } .ed-area table { table-layout: fixed; } .ed-area th, .ed-area td { border: 1px solid var(--border-strong); min-width: 60px; vertical-align: top; position: relative; } .ed-area th { background: var(--panel); } .ed-area th p, .ed-area td p { margin: 0; } .ed-area .selectedCell::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 18%, transparent); pointer-events: none; } .ed-area .tableWrapper { overflow-x: auto; } .ed-math { cursor: pointer; border-radius: 6px; padding: 0 2px; transition: background .15s; } /* the text inside an atom (equation, mention, footnote marker) can't hold the caret — Chrome would put it there on a click beside it, where nothing can be typed */ .ed-math, .ed-math *, .ed-raw-atom, .ed-raw-atom *, .ed-area .ProseMirror a.mention { -webkit-user-select: none; user-select: none; } .ed-math.sel { background: var(--accent-tint); } @media (hover: hover) { .ed-math:hover { background: var(--accent-tint); } } .ed-math-block { display: block; text-align: center; padding: 10px; margin: .6em 0; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); overflow-x: auto; } .ed-raw-atom { border-radius: 6px; cursor: default; } div.ed-raw-atom { border: 1px dashed var(--border-strong); padding: 8px 12px; color: var(--ink-soft); } .ed-raw-atom.sel { outline: 2px solid var(--accent); } .ed-embed { position: relative; margin: .6em 0; display: block; width: fit-content; max-width: 100%; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s; cursor: default; } .ed-embed.sel { outline-color: var(--accent); } .ed-embed img { max-height: 360px; width: auto; max-width: 100%; border: 0; border-radius: 0; display: block; } .ed-embed video { max-height: 360px; border: 0; border-radius: 0; display: block; } .ed-embed.kind-audio { width: min(100%, 420px); padding: 12px; } .ed-embed.kind-audio audio { display: block; width: 100%; margin-top: 30px; } .ed-embed.kind-youtube { width: min(100%, 420px); aspect-ratio: 16 / 9; background: #000; } .ed-embed.kind-youtube img { width: 100%; height: 100%; max-height: none; object-fit: cover; opacity: .85; } .ed-embed .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2.6rem; pointer-events: none; } .ed-embed-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; z-index: 2; } .ed-embed.sel .ed-embed-tools, .ed-embed:focus-within .ed-embed-tools { opacity: 1; } @media (hover: hover) { .ed-embed:hover .ed-embed-tools { opacity: 1; } } @media (hover: none) { .ed-embed-tools { opacity: 1; } } .ed-embed-tools button { height: 30px; min-width: 30px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--radius-pill); background: rgba(26, 19, 32, .74); color: #fff; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, transform .15s; } .ed-embed-tools button[data-rm] { padding: 0; width: 30px; } @media (hover: hover) { .ed-embed-tools button:hover { background: rgba(26, 19, 32, .92); transform: translateY(-1px); } } .ed-embed .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .2s; } .ed-raw { display: none; width: 100%; font: inherit; font-family: var(--mono); font-size: .9rem; line-height: 1.6; color: var(--ink); background: transparent; border: 0; outline: none; resize: vertical; padding: 14px 16px; min-height: 220px; margin: 0; } .editor.raw .ed-area { display: none; } .editor.raw .ed-raw { display: block; } .ed-foot { display: flex; align-items: center; gap: 10px; padding: 6px 14px 8px; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--border); } .ed-foot:has(.count:empty) { display: none; } /* only there for the character count near the limit */ .ed-foot .count { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; } .ed-foot .count.warn { color: var(--danger); font-weight: 600; } .ed-bar { position: absolute; z-index: 7; display: flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 3px; } .ed-bar .input { padding: 4px 10px; font-size: .82rem; width: 130px; border-radius: 8px; font-family: var(--mono); } .ed-bar .ed-btn { width: 28px; height: 28px; font-size: .8rem; } .editor.compact .ed-area .ProseMirror, .editor.compact .ed-raw, .editor.compact .ed-loading { min-height: 90px; padding: 10px 14px; } .editor.compact .ed-tools { padding: 4px 6px; } .editor.compact .ed-btn { width: 30px; height: 30px; font-size: .82rem; } .editor.compact .ed-btn.text { width: 30px; padding: 0; } .editor.compact .ed-btn.text span { display: none; } .editor.compact .ed-foot { display: none; } .editor.compact .ed-embed img, .editor.compact .ed-embed video { max-height: 220px; } @media (max-width: 640px) { .ed-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .ed-tools::-webkit-scrollbar { display: none; } .ed-btn { width: 34px; height: 34px; } .ed-btn.text span { display: none; } .ed-btn.text { width: 34px; padding: 0; } } .modal .editor { flex: none; } /* the compose modal: roomy, the title as a plain line above the editor */ .modal-compose { width: min(860px, calc(100vw - 2rem)); max-height: min(92vh, 940px); } .title-input { font-size: 1.2rem; font-weight: 700; background: transparent; border: 0; border-bottom: 2px solid var(--border); border-radius: 0; padding: 8px 2px; } .title-input:focus { border-color: var(--accent); } .field .req { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-left: 6px; } .field .hint i { color: var(--accent-text); } /* ── 8. Floating panels: editor popovers, @ / # suggestions, emoji, GIFs, crop (pickers.js) ── */ .float-pop { position: fixed; z-index: 2600; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); animation: popIn .18s ease both; max-width: calc(100vw - 16px); } .ed-pop-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; } .ed-pop-body.menu { gap: 2px; padding: 8px; } .ed-pop-body .pop-btn { padding: 8px 10px; font-size: .92rem; gap: 8px; } .ed-pop-body .pop-btn.hl { background: var(--accent-tint); color: var(--ink); } @media (hover: hover) { .ed-pop-body .pop-btn:hover { background: var(--accent-tint); color: var(--ink); } } .ed-pop-body .pop-btn small { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: .76rem; font-weight: 500; } .ed-pop-body .field { gap: 4px; } .ed-pop-body .input { padding: 8px 12px; font-size: .92rem; } .ed-pop-body textarea.input { border-radius: var(--radius-sm); font-family: var(--mono); resize: vertical; min-height: 64px; line-height: 1.5; } .ed-pop-body .actions { display: flex; gap: 6px; align-items: center; } .math-preview { min-height: 48px; padding: 10px; border-radius: var(--radius-sm); background: var(--bg-tint); overflow-x: auto; text-align: center; color: var(--ink); } .ed-suggest { position: fixed; z-index: 2600; width: min(300px, calc(100vw - 16px)); background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: popIn .15s ease both; } .ed-suggest[hidden] { display: none; } .ed-suggest .pop-btn { padding: 7px 10px; gap: 10px; } .ed-suggest .pop-btn.hl { background: var(--accent-tint); color: var(--ink); } @media (hover: hover) { .ed-suggest .pop-btn:hover { background: var(--accent-tint); color: var(--ink); } } .ed-suggest .avatar-sm { width: 30px; height: 30px; } .sg-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; } .sg-text b { color: var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg-text small { color: var(--muted); font-weight: 500; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg-hash { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-text); font-weight: 700; flex: none; } .emoji-pop { overflow: hidden; } .emoji-picker { display: flex; flex-direction: column; height: min(430px, 70vh); } .ep-head { display: flex; gap: 8px; align-items: center; padding: 12px 12px 8px; } .ep-search { position: relative; flex: 1; min-width: 0; } .ep-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .88rem; pointer-events: none; } .ep-search .input { padding: 9px 14px 9px 36px; font-size: .92rem; } .ep-tone { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg-tint); font-size: 1.2rem; cursor: pointer; transition: background .15s; } @media (hover: hover) { .ep-tone:hover { background: var(--border-strong); } } .ep-tones { display: flex; gap: 4px; justify-content: flex-end; padding: 0 12px 8px; } .ep-tones button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; background: none; font-size: 1.15rem; cursor: pointer; } @media (hover: hover) { .ep-tones button:hover { background: var(--bg-tint); } } .ep-tones button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-tint); } .ep-tabs { display: flex; padding: 0 6px; border-bottom: 1px solid var(--border); } .ep-tabs button { flex: 1; min-width: 0; height: 38px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: .95rem; cursor: pointer; transition: color .15s, border-color .15s; } @media (hover: hover) { .ep-tabs button:hover { color: var(--ink); } } .ep-tabs button.active { color: var(--accent-text); border-bottom-color: var(--accent); } .ep-grid { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .ep-grid > .spinner { margin: 60px auto; } .ep-grid h4 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 10px 6px 6px; background: var(--panel); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .ep-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; } .ep-e { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; font-size: 1.5rem; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; transition: background .12s, transform .12s; } .ep-e:focus-visible { background: var(--bg-tint); transform: scale(1.14); } @media (hover: hover) { .ep-e:hover { background: var(--bg-tint); transform: scale(1.14); } } .ep-preview { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 14px; border-top: 1px solid var(--border); } .ep-big { font-size: 1.7rem; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; } .ep-name { font-size: .9rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ep-name::first-letter { text-transform: uppercase; } .gif-picker { display: flex; flex-direction: column; height: min(460px, 70vh); } .gif-search { position: relative; padding: 12px 12px 8px; display: flex; align-items: center; gap: 10px; } .klipy-powered { flex: none; display: flex; } .klipy-powered img { height: 13px; width: auto; } .klipy-powered .on-dark, [data-theme="dark"] .klipy-powered .on-light { display: none; } [data-theme="dark"] .klipy-powered .on-dark { display: block; } .gif-search i { position: absolute; left: 26px; top: 50%; transform: translateY(-40%); color: var(--muted); font-size: .9rem; pointer-events: none; } .gif-search .input { padding-left: 38px; } .gif-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; overscroll-behavior: contain; } .gif-cols { display: flex; gap: 6px; align-items: flex-start; } .gif-status { display: grid; place-items: center; min-height: 160px; } .gif-status.more { min-height: 56px; } .gif-status .spinner { margin: 0; width: 26px; height: 26px; } .gif-status .empty { padding: 24px; } .gif-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .gif { display: block; width: 100%; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: var(--bg-tint); cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .15s; } .gif:focus-visible { outline-color: var(--accent); } @media (hover: hover) { .gif:hover { outline-color: var(--accent); } } .gif img { width: 100%; height: 100%; object-fit: cover; display: block; } .modal-crop { width: min(760px, calc(100vw - 2rem)); } @media (max-width: 600px) { .modal.modal-compose, .modal.modal-crop { width: 100%; max-height: 92vh; } .crop-stage { height: min(50vh, 380px); } } .crop-stage { height: min(56vh, 480px); background: #0e0b13; border-radius: var(--radius); overflow: hidden; } .crop-stage img { display: block; max-width: 100%; } .crop-stage.round .cropper-view-box, .crop-stage.round .cropper-face { border-radius: 50%; } .crop-stage .cropper-view-box { outline-color: var(--accent); } .crop-stage .cropper-line, .crop-stage .cropper-point { background-color: var(--accent); } .crop-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .crop-tools .spacer { flex: 1; } /* people: directory cards and list rows (shared) */ .people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } .person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 18px; } .person > .btn { margin-top: auto; } .person .name { font-weight: 700; } .person .handle { color: var(--muted); font-size: .9rem; margin-top: -6px; } .person .bio { font-size: .9rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .person-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .person-row .who { flex: 1; min-width: 0; line-height: 1.2; } .person-row .who .name { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: 5px; min-width: 0; } .person-row .who .name > a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person-row .who .handle { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person-row .who a { color: var(--ink); } /* profile header (shared by the profile view) */ .profile-banner { height: 220px; border-radius: var(--radius-lg); background: var(--bg-tint); border: 1px solid var(--border); overflow: hidden; position: relative; background-size: cover; background-position: center; } .profile-banner.empty::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 120% at 20% 0%, var(--accent-soft), transparent 70%), radial-gradient(50% 100% at 90% 100%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 70%); } /* the avatar overlaps the banner with the actions level with its foot; the names get the full width underneath */ .profile-top { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pic actions" "names names"; align-items: end; gap: 12px 20px; margin-top: -56px; padding: 0 24px; } .profile-top > .avatar { grid-area: pic; } .profile-top .avatar-xl { background: var(--panel); border-color: var(--bg); } .profile-top .names { grid-area: names; min-width: 0; } .profile-top h1 { font-size: 1.8rem; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; } .profile-top .handle { color: var(--muted); font-weight: 600; } .profile-top .actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; } .profile-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .92rem; padding: 0 24px; } .profile-meta b { color: var(--ink); } /* staff / parody, country, join date: a second row tight under the counts (the view's gap is 16px), one "account info" cluster; the bio keeps a clear space below it */ .profile-meta.details { margin-top: -8px; } .profile-meta.details + .profile-bio:not(:empty) { margin-top: 6px; } .profile-meta.details:empty { display: none; } .profile-meta i { color: var(--accent-text); margin-right: 7px; } .profile-meta a { color: inherit; } @media (hover: hover) { .profile-meta a:hover { color: var(--accent-text); } } .profile-bio { padding: 0 24px; max-width: 720px; } .social-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px; } .social-links .chip i { color: var(--accent-text); } @media (max-width: 640px) { .profile-banner { height: 140px; } .profile-top, .profile-meta, .profile-bio, .social-links { padding: 0 4px; } .profile-top { margin-top: -44px; gap: 10px 12px; } .profile-top > .avatar { width: 92px; height: 92px; } .profile-top .actions { padding-bottom: 4px; } .profile-top h1 { font-size: 1.55rem; gap: 6px 8px; } .profile-meta { gap: 8px 16px; } } .page-hero { text-align: center; padding: 48px 0 32px; } .page-hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); } .page-hero p { color: var(--ink-soft); font-size: 1.1rem; margin-top: 8px; } .pill-note { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); } /* ── 9. Pages (the views in /pages; one stylesheet now that the app is one page) ── */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .search { position: relative; flex: 1; min-width: 200px; max-width: 360px; } .search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search .input { padding-left: 38px; } .select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857e90' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } .select-wrap .select { width: auto; } .crumb { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: .92rem; align-self: flex-start; } @media (hover: hover) { .crumb:hover { color: var(--accent-text); } } .feed-more { text-align: center; } .refresh-btn.spinning i { animation: spin .8s linear infinite; } .reply.flash { animation: flash 2.4s ease both; border-radius: var(--radius-sm); } @keyframes flash { 0%, 40% { background: var(--accent-tint); } 100% { background: transparent; } } .reply-form .rf-main { flex: 1; min-width: 0; } .reply-stub { width: 100%; text-align: left; font: inherit; color: var(--muted); background: var(--bg-tint); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 9px 16px; cursor: text; transition: border-color .15s; } @media (hover: hover) { .reply-stub:hover { border-color: var(--accent); } } .signin-to-reply { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .signin-to-reply span { flex: 1; } /* home: the one charm of the page — a soft drift of brand colour behind the welcome */ .hello { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 26px 28px; background: var(--accent-tint); border: 1px solid var(--accent-soft); display: flex; align-items: center; gap: 20px; } .hello .blob { position: absolute; width: 220px; height: 220px; border-radius: 50%; filter: blur(50px); opacity: .5; pointer-events: none; animation: drift 9s ease-in-out infinite alternate; } .hello .b1 { background: var(--accent); right: -60px; top: -80px; } .hello .b2 { background: var(--teal); left: 30%; bottom: -140px; animation-delay: -4s; } .hello img { height: 56px; width: auto; position: relative; } .hello h1 { font-size: 1.6rem; position: relative; } .hello p { color: var(--ink-soft); position: relative; } .hello .actions { margin-left: auto; position: relative; display: flex; gap: 8px; } @keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-30px, 20px) scale(1.15); } } @media (max-width: 640px) { .hello { flex-direction: column; align-items: flex-start; } .hello .actions { margin-left: 0; } } /* explore: categories as slim cards (icon disk, name, post count; same widths as before), tags as a chip cloud; a rule between sections */ .explore-sec { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; } .sec-rule { border: 0; border-top: 1px solid var(--border); margin: 26px 0 18px; } .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sec-head h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: none; } .sec-head h2 i { color: var(--accent-text); } .cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cat-card { --hue: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 12px 16px; } .cat-card .disk { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 11px; font-size: 1rem; } .cat-card .disk, .topic-hero .disk { background: color-mix(in srgb, var(--hue) 18%, var(--panel)); color: var(--hue); transition: transform .2s; } @media (hover: hover) { .cat-card:hover .disk { transform: rotate(-8deg); } } .cat-card h3 { font-size: 1.05rem; line-height: 1.25; align-self: end; overflow-wrap: anywhere; } /* wraps rather than cut on phones */ .cat-card .count { color: var(--muted); font-size: .85rem; font-weight: 500; white-space: nowrap; align-self: start; } .tag-filter { max-width: 320px; } @media (max-width: 640px) { .cat-grid { gap: 10px; } .cat-card { padding: 10px 12px; column-gap: 10px; } .cat-card .disk { width: 36px; height: 36px; } .sec-rule { margin: 20px 0 14px; } } /* a category's or tag's own page: quiet hero with the disk */ .topic-hero { --hue: var(--accent); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .topic-hero .disk { width: 56px; height: 56px; font-size: 1.4rem; } .topic-hero .grow { flex: 1; min-width: 200px; } .topic-hero h1 { font-size: 1.6rem; overflow-wrap: anywhere; } .topic-hero p { color: var(--muted); font-size: .95rem; } .topic-hero .eyebrow { display: block; margin-bottom: 2px; } .hash-hero { --hue: var(--accent-text); } .old-link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; font-size: .95rem; } .old-link i { color: var(--accent-text); } .old-link span { flex: 1; min-width: 180px; } /* people */ .person .avatar-lg { transition: transform .2s, border-color .15s; } @media (hover: hover) { .person:hover .avatar-lg { transform: rotate(-4deg) scale(1.04); border-color: var(--accent); } } .person a.name { color: var(--ink); } .person .stats { display: flex; gap: 12px; color: var(--muted); font-size: .85rem; } .person .stats b { color: var(--ink); } /* phones: two compact columns instead of one screen-high card each */ @media (max-width: 600px) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .person { padding: 16px 10px; gap: 6px; } .person .avatar-lg { width: 64px; height: 64px; } .person .name { font-size: .95rem; } .person .handle { font-size: .8rem; margin-top: -4px; } .person .bio { font-size: .82rem; } .person .stats { gap: 8px; font-size: .78rem; flex-wrap: wrap; justify-content: center; } .person > .btn { padding: 7px 14px; font-size: .88rem; } } /* profile */ .view.profile { gap: 16px; } .reply-card { padding: 18px 22px; } .reply-card .prose { font-size: .98rem; } .reply-card .ctx { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); margin-bottom: 10px; min-width: 0; } .reply-card .ctx-post { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); } .reply-card .ctx-post i { color: var(--accent-text); } .reply-card .ctx-post .avatar { width: 20px; height: 20px; border-width: 1px; } .reply-card .ctx-post b { color: var(--ink); font-weight: 700; white-space: nowrap; } .reply-card .ctx-post .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); } @media (hover: hover) { .reply-card .ctx-post:hover .t { color: var(--accent-text); } } .reply-card .ctx-time { color: var(--muted); white-space: nowrap; } @media (hover: hover) { .reply-card .ctx-time:hover { color: var(--accent-text); } } .counts button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; border-radius: 6px; } @media (hover: hover) { .counts button:hover { color: var(--accent-text); } } .edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 600px) { .edit-grid { grid-template-columns: 1fr; } } .edit-pics { display: flex; flex-direction: column; gap: 8px; } .edit-banner { position: relative; } .edit-banner img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-tint); display: block; } .edit-banner .pic-tools { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .edit-avatar { position: relative; display: flex; align-items: flex-end; gap: 14px; margin-top: -48px; padding-left: 18px; flex-wrap: wrap; pointer-events: none; } .edit-avatar > * { pointer-events: auto; } /* the row overlaps the banner; only its own bits take the pointer */ .edit-avatar .avatar-lg { border-color: var(--panel); background: var(--panel); } .edit-avatar .pic-tools { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; } .edit-pics .hint { font-size: .82rem; } .link-row { display: flex; gap: 6px; align-items: center; } .link-row .grip { flex: none; width: 28px; height: 34px; display: grid; place-items: center; color: var(--muted); cursor: grab; touch-action: none; border-radius: 8px; } @media (hover: hover) { .link-row .grip:hover { color: var(--ink); background: var(--bg-tint); } } .link-row.dragging .input { border-color: var(--accent); } .link-row.dragging .grip { color: var(--accent-text); background: var(--accent-tint); } .link-row.dragging .grip { cursor: grabbing; } body.dragging-link, body.dragging-link * { cursor: grabbing !important; user-select: none; } .link-row .input { padding: 9px 14px; font-size: .95rem; } .link-row .input[data-k="label"] { max-width: 170px; } .link-row .icon-btn { width: 34px; height: 34px; font-size: .8rem; } .link-row .icon-btn:disabled { opacity: .35; cursor: default; } /* phones: grip | label over address | remove */ @media (max-width: 600px) { .link-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; row-gap: 6px; } .link-row .grip { grid-row: 1 / 3; } .link-row .input[data-k="label"] { max-width: none; grid-column: 2; } .link-row .input[data-k="url"] { grid-column: 2; } .link-row [data-x] { grid-row: 1 / 3; grid-column: 3; } .link-row + .link-row { padding-top: 8px; border-top: 1px solid var(--border); } .edit-banner .pic-tools { position: static; margin-top: 8px; justify-content: flex-start; } .edit-avatar { margin-top: 0; padding-left: 0; } } /* settings */ .view.settings { max-width: 760px; } .set-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; } .set-card h2 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; } .set-card h2 i { color: var(--accent-text); } .set-card > p { font-size: .92rem; margin-top: -6px; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .set-row p { font-size: .9rem; margin-top: 2px; } .set-row .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; } .set-who { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap; padding: 16px; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--border); } .set-who-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; } .set-who-text > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .set-who .set-email { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .set-who .set-email i { flex: none; font-size: .85em; } .set-who .set-email span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .set-account { gap: 0; } .set-account > h2 { margin-bottom: 18px; } .set-who > .set-who-actions { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .set-sub { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--border-strong); } .set-sub h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 10px; } .set-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-tint); color: var(--accent-text); font-size: .85rem; flex: none; } .set-sub > p { font-size: .92rem; margin-top: -6px; } .set-sub .set-form { max-width: none; gap: 16px; } .set-sub .set-actions { margin-top: 2px; } .set-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 40px; } .set-who b { font-size: 1.1rem; } .set-who .muted { font-size: .9rem; } .set-form { display: flex; flex-direction: column; gap: 12px; max-width: 540px; } .set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .set-actions { display: flex; } /* phones: the account header is avatar + names, with its two buttons side by side underneath; actions fill the width */ @media (max-width: 600px) { .set-card { padding: 20px 18px; } .set-who { padding: 14px; gap: 12px; } .set-who .avatar-lg { width: 56px; height: 56px; border-width: 2px; } .set-who > .set-who-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .set-who-actions .btn { padding: 9px 10px; font-size: .92rem; gap: 7px; } .set-who-actions .btn:only-child { grid-column: 1 / -1; } .set-sub { margin-top: 22px; padding-top: 22px; } .set-actions .btn { flex: 1; } .set-row { gap: 10px; } .set-row > div { flex-basis: 100%; } .set-grid { grid-template-columns: 1fr; } .set-row .seg { width: 100%; } .set-row .seg button { flex: 1; padding: 7px 8px; } .set-foot { gap: 6px; } .set-foot .btn { padding: 7px 12px; font-size: .88rem; gap: 7px; } } /* credits */ .credit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .credit-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .credit-list li > div { min-width: 0; } .credit-list p { font-size: .9rem; margin-top: 2px; } .credit-list a { text-decoration: none; } @media (hover: hover) { .credit-list a:hover b { text-decoration: underline; } } .credit-lic { flex: none; font-size: .78rem; color: var(--muted, inherit); border: 1px solid var(--border, currentColor); border-radius: 999px; padding: 2px 10px; white-space: nowrap; } @media (max-width: 600px) { .credit-list li { flex-direction: column; gap: 6px; } } .set-credits { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* admin */ .admin-view { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .rows { display: flex; flex-direction: column; } .row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--border); min-width: 0; } .row .who { flex: 1; min-width: 0; line-height: 1.25; } .row .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .who small { color: var(--muted); } .row .tools, .person-head .tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 600px) { .admin-view .row { flex-wrap: wrap; } .admin-view .row .who { flex-basis: calc(100% - 50px); } .admin-view .row .tools { flex-basis: 100%; justify-content: flex-start; } .person-head .tools { justify-content: flex-start; } } .person-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: .92rem; margin: 12px 0 0; } .kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 600px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: 6px; } } .panel { display: flex; flex-direction: column; gap: 16px; } .panel h2, .admin-view .card > h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; } .admin-view .card > h2 > i { color: var(--accent-text); } .danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } .danger-zone > h2 > i { color: var(--danger) !important; } .tag-row { gap: 16px; padding: 12px 8px; } .tag-row .chipcol, .row .chipcol { width: 190px; flex: none; display: flex; } .tag-editor { --hue: var(--accent); display: flex; flex-direction: column; gap: 18px; padding: 22px; margin: 6px 0 14px; border-color: color-mix(in srgb, var(--hue) 45%, var(--border)); } .tag-editor-head { display: flex; align-items: center; gap: 14px; } .tag-editor-head h2 { font-size: 1.15rem; } .tag-editor .field { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; } .tag-editor .field small { font-weight: 500; } .tag-editor textarea.input { border-radius: var(--radius); resize: vertical; line-height: 1.45; } .color-field { display: flex; align-items: center; gap: 10px; } .color-field input[type="color"] { width: 46px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); cursor: pointer; } .color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 4px; } .color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; } .icon-picks { display: flex; flex-wrap: wrap; gap: 6px; } .icon-picks .icon-btn.active { background: var(--hue); color: var(--on-accent); } .tag-editor-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tag-editor-foot .spacer { flex: 1; } @media (max-width: 640px) { .tag-row .chipcol, .row .chipcol { width: auto; } .tag-row { flex-wrap: wrap; } } /* visitors: Home's preview fades out into a sign-in card; the other views are a lock screen */ .feed-host.preview { --fade: linear-gradient(#000 calc(100% - 560px), rgba(0, 0, 0, .35) calc(100% - 260px), transparent calc(100% - 40px)); -webkit-mask-image: var(--fade); mask-image: var(--fade); max-height: 1300px; overflow: hidden; pointer-events: none; user-select: none; } .preview-wall, .locked { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .preview-wall { margin-top: -150px; position: relative; padding: 0 20px 12px; } .locked { padding: 40px 28px; margin-top: 12px; } .preview-wall .disk, .locked .disk { width: 56px; height: 56px; font-size: 1.3rem; border-radius: 50%; } .preview-wall h2, .locked h2 { font-size: 1.35rem; } .preview-wall p, .locked p { color: var(--ink-soft); max-width: 46ch; } .preview-wall .actions, .locked .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; } .preview-wall.hidden { display: none; } /* drafts (a list over the composer) */ .count-pill { margin-left: 2px; min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: .74rem; line-height: 20px; text-align: center; } .count-pill:empty { display: none; } .drafts-body { gap: 0; min-height: 200px; } .draft-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); } .draft-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; padding: 12px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s; } @media (hover: hover) { .draft-open:hover { background: var(--accent-tint); } } .draft-open b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .draft-open small { color: var(--muted); font-size: .85rem; } .draft-row.current .draft-open b { color: var(--accent-text); } .draft-open .accent { color: var(--accent-text); font-weight: 600; } @media (max-width: 600px) { #c-drafts .lbl { display: none; } /* phones: the ✕ closes, so the foot is just Save draft + Post, side by side (and the note on its own line when there is one) */ .modal-compose .modal-foot { flex-wrap: wrap; } .modal-compose .modal-foot .left { flex-basis: 100%; margin: 0; } .modal-compose .modal-foot .left:empty, .modal-compose .modal-foot [data-close-modal] { display: none; } .modal-compose .modal-foot .btn { flex: 1; } } /* visitors' preview on Home: nothing to press, so nothing that looks pressable */ .feed-host.preview [data-menu], .feed-host.preview .react-more, .feed-host.preview .react-who, .feed-host.preview .read-more { display: none; } /* KLIPY attribution: their light watermark in the bottom-left of each of their GIFs */ .klipy-card { position: relative; display: inline-block; max-width: 100%; vertical-align: top; } .klipy-card > img:first-child { display: block; } .klipy-card > .klipy-mark, .ed-embed > .klipy-mark { position: absolute; left: 8px; bottom: 8px; width: 46px; height: auto; max-height: none; pointer-events: none; border: 0; border-radius: 0; } .prose .media-row .klipy-card img:first-child { max-height: 320px; } .ed-embed > .klipy-mark { z-index: 1; } /* staff: the Peridot mark in dark ink on a green disc, right after the name */ .staff-badge { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: -3px; margin-left: 5px; border: 0; border-radius: 50%; } .staff-badge.big { width: 26px; height: 26px; vertical-align: middle; margin-left: 0; } .profile-meta .badge-line { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; } .profile-meta .badge-line .staff-badge { margin: 0; } .profile-meta .badge-line > i { color: var(--neutral-ink); margin: 0; width: 18px; text-align: center; } /* parody: a light grey pill with the masks and the word, after the name (after the staff badge when both) */ .parody-badge { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 19px; padding: 0 8px 0 6px; margin-left: 5px; vertical-align: 1px; border-radius: var(--radius-pill); background: var(--neutral-soft); color: var(--neutral-ink); font-size: .7rem; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap; } .parody-badge i { font-size: .95em; } .parody-badge.big { height: 24px; padding: 0 10px 0 8px; gap: 5px; font-size: .8rem; letter-spacing: 0; margin-left: 0; vertical-align: middle; } /* in a row laid out with gap, the gap does the spacing */ .post-head .name > .staff-badge, .post-head .name > .parody-badge, .reply .head > .staff-badge, .reply .head > .parody-badge, .person-row .name > .staff-badge, .person-row .name > .parody-badge { margin-left: 0; } /* Home filters: the button fills in and a strip says what's hidden, so filters are never forgotten */ .stream-head .tools { display: flex; align-items: center; gap: 8px; } .filter-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .filter-btn .count-pill { background: var(--on-accent); color: var(--accent); } .filter-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px 10px 16px; font-size: .92rem; position: sticky; top: calc(var(--header-h) + 8px); z-index: 20; box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08)); } /* stays under the header while the feed scrolls (--accent-tint is opaque) */ .filter-strip > i { color: var(--accent-text); } .filter-strip .what { flex: 1; min-width: 180px; color: var(--ink); } .filter-strip .what b { font-weight: 700; } .filter-body .chips.choice .chip { padding: 8px 16px; } .cat-select { width: auto; padding: 5px 34px 5px 12px; font-size: .85rem; background-position: right 10px center; } .filter-body .chips { margin-top: 2px; } .cat-picks { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .cat-picks-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; background: var(--bg-tint); border-bottom: 1px solid var(--border); } .cat-picks-bar .hint { margin-left: auto; } .cat-picks-list { padding: 4px 0; } .cat-pick { display: flex; align-items: center; gap: 12px; padding: 7px 14px; cursor: pointer; } @media (hover: hover) { .cat-pick:hover { background: var(--accent-tint); } } .cat-pick input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex-shrink: 0; } .cat-pick input:disabled { cursor: not-allowed; } .cat-pick .chip { pointer-events: none; } .filter-body .check { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; } .filter-body .check input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } .activity { margin-bottom: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; } .kpi-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } .kpi-head h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; } .kpi-head h3 i { color: var(--accent-text); } .kpi-head .muted { font-size: .88rem; } .activity { text-align: left; } .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; } .kpi-label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .kpi-num { font-size: 2rem; line-height: 1.15; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .kpi-note { font-size: .84rem; color: var(--ink-soft); } .kpi-bar { display: block; height: 5px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; } .kpi-bar i { display: block; height: 100%; min-width: 3px; background: var(--accent); border-radius: inherit; } @media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-num { font-size: 1.7rem; } } /* Flag emoji on Windows: the flag characters come from a small font (Twemoji, CC-BY 4.0, cut from Mozilla's Twemoji font like country-flag-emoji-polyfill does); peridot.js adds .no-flags to only where the system draws letters instead. The pirate flag (U+1F3F4 200D 2620 FE0F) is in the font too, with its three characters in the range: otherwise a browser that picks fonts one character at a time draws the flag from here and the skull from the system. Windows has the pirate flag itself but not England / Scotland / Wales, which share the same first character. */ @font-face { font-family: "Twemoji Flags"; src: url("/assets/fonts/TwemojiFlags.woff2") format("woff2"); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F, U+200D, U+2620, U+FE0F; font-display: swap; } html.no-flags { --font: "Twemoji Flags", "Gabarito", system-ui, -apple-system, "Segoe UI", sans-serif; } html.no-flags .ep-e, html.no-flags .ep-big { font-family: "Twemoji Flags", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; } /* Frequently used: a small Clear button in the section heading */ .ep-grid h4 { display: flex; align-items: center; justify-content: space-between; } .ep-clear { font: inherit; font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); background: none; border: 0; border-radius: var(--radius-pill); padding: 2px 8px; cursor: pointer; } .ep-clear:focus-visible { color: var(--ink); background: var(--bg-tint); } @media (hover: hover) { .ep-clear:hover { color: var(--ink); background: var(--bg-tint); } } /* ── notification badge (rail, header on phones, admin tab) ── */ .nav-badge { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: .72rem; line-height: 18px; text-align: center; font-weight: 700; font-style: normal; } .nav-badge.on { display: inline-block; } .nav-badge[data-badge="reports"] { background: var(--danger); color: #fff; } .rail-link { position: relative; } .rail-link .nav-badge { margin-left: auto; } .nav-badge.inline { margin-left: 6px; vertical-align: 1px; } .header-bell, .header-admin { position: relative; display: none; } .header-bell .nav-badge, .header-admin .nav-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; line-height: 16px; font-size: .66rem; padding: 0 4px; } @media (max-width: 1240px) { .rail-link .nav-badge { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; min-width: 16px; height: 16px; line-height: 16px; font-size: .66rem; padding: 0 4px; } } @media (max-width: 760px) { body.has-shell .header-bell, body.has-shell .header-admin { display: inline-flex; } } /* ── notifications page ── */ .notifs .stream-head .tools { display: flex; align-items: center; gap: 8px; } .notif-list { padding: 0; overflow: hidden; } .notif { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--ink); } .notif:last-child { border-bottom: 0; } @media (hover: hover) { a.notif:hover { background: var(--bg-tint); } } .notif.new { background: var(--accent-tint); } .n-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tint); color: var(--c, var(--accent-text)); font-size: .95rem; } .n-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .n-avatars { display: flex; gap: 4px; } .n-avatars .avatar { width: 28px; height: 28px; } .n-text { line-height: 1.4; overflow-wrap: anywhere; } .n-snip { color: var(--muted); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif time { flex: none; color: var(--muted); font-size: .85rem; white-space: nowrap; } .notif-more { display: flex; justify-content: center; margin-top: 12px; } .notif-list .empty { padding: 36px 16px; } /* Select / Clear all, and the selection bar that replaces them while selecting */ .notif-bar > div { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 10px; } .notif-bar .spacer { flex: 1; } .notif-bar .check { margin-left: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; font-size: .92rem; } .notif-bar input, .n-check input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; cursor: pointer; } .n-check { display: none; flex: none; align-self: center; } .notif-list.selecting .n-check { display: inline-flex; } .notif-list.selecting .notif { cursor: pointer; user-select: none; } .notif-list.selecting .notif.picked { background: var(--bg-tint); } /* ── settings: notification switches ── */ .notify-types { display: flex; flex-direction: column; margin-top: 8px; } .notify-type { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); cursor: pointer; } .notify-type .nt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .notify-type .nt-text small { font-size: .88rem; } .switch { position: relative; flex: none; width: 44px; height: 26px; } .switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--border-strong, #c9c2cf); transition: background .15s; } .switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; } .switch input:checked + i { background: var(--accent); } .switch input:checked + i::after { transform: translateX(18px); } .switch input:focus-visible + i { outline: 2px solid var(--accent-text); outline-offset: 2px; } .switch input:disabled { cursor: progress; } /* ── reports ── */ .report-reasons { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); margin: 12px 0 14px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; } .report-reason { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); } .report-reason:last-child { border-bottom: 0; } @media (hover: hover) { .report-reason:hover { background: var(--accent-tint); } } .report-reason input { accent-color: var(--accent); width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; } .report-reason span { display: flex; flex-direction: column; } .report-reason small { color: var(--muted); font-size: .86rem; } .report-ok { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; margin-top: 12px; } .report-ok input { accent-color: var(--accent); width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; } .report-row { align-items: flex-start; } .report-row .who b { white-space: normal; } .report-details { margin: 6px 0 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; } .report-snap { margin: 6px 0 0; padding: 6px 12px; border-left: 3px solid var(--border-strong, var(--border)); color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; } .report-row .tools { flex-wrap: wrap; justify-content: flex-end; } /* anchors inside Settings stop below the fixed header */ #notifications, #your-data { scroll-margin-top: calc(var(--header-h) + 16px); } /* ── policy acceptance (peridot.js openConsent): only the policies that changed; no ✕ ── */ .consent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .consent-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-alt); border: 1px solid var(--border); } .cl-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: .95rem; } .cl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; } .cl-text > a { font-weight: 700; color: var(--ink); } @media (hover: hover) { .cl-text > a:hover { color: var(--accent-text); } } .cl-text small { font-size: .84rem; } .cl-text small a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); } .cl-note { font-size: .9rem; color: var(--ink-soft); margin-top: 4px; } .consent-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: 600; line-height: 1.45; } .consent-check input { accent-color: var(--accent); width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; cursor: pointer; } .consent-more-wrap { border-top: 1px solid var(--border); padding-top: 10px; } .consent-more { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); cursor: pointer; } .consent-more i { font-size: .72rem; transition: transform .15s; } .consent-more[aria-expanded="true"] i { transform: rotate(90deg); } @media (hover: hover) { .consent-more:hover { color: var(--ink); } } .consent-options { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 2px; } .consent-options[hidden] { display: none; } .consent-options p { font-size: .88rem; } .consent-option-btns { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 600px) { .consent-option-btns .btn { flex: 1; } } /* the policy pages: the list of versions */ .policy-versions { list-style: none; padding: 0 !important; } .policy-versions li { padding: 10px 0; border-bottom: 1px solid var(--border); margin: 0 !important; } /* ── moderation (moderation.js): the decision dialog, the statement of reasons, appeals ── */ .badge-neutral { background: var(--neutral-soft); color: var(--neutral-ink); } .mod-modal .modal-body { gap: 14px; } .mod-lead { font-size: .92rem; } .field-label { font-size: .9rem; font-weight: 600; color: var(--ink); } .mod-basis { align-self: flex-start; } .mod-actions { display: flex; flex-direction: column; gap: 8px; } .mod-action, .mod-notify { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; } .mod-action:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); } .mod-action input, .mod-notify input { accent-color: var(--accent); width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; } .mod-action span, .mod-notify span { display: flex; flex-direction: column; gap: 2px; } .mod-action small, .mod-notify small { color: var(--muted); font-size: .85rem; line-height: 1.4; } .mod-notify { border-style: dashed; } .mod-notify:has(input:disabled) { cursor: default; } .sor { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; margin: 0; font-size: .94rem; } .sor dt { color: var(--muted); font-weight: 600; } .sor dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; } @media (max-width: 600px) { .sor { grid-template-columns: 1fr; gap: 2px; } .sor dd { margin-bottom: 10px; } } .mod-snap { display: flex; flex-direction: column; gap: 6px; } .mod-snap blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--border-strong); color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; white-space: pre-wrap; } .mod-status { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-tint); border: 1px solid var(--accent-soft); font-size: .92rem; } .mod-status i { color: var(--accent-text); margin-top: 3px; } .mod-appeal { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-alt); } .mod-appeal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mod-appeal-head .muted { margin-left: auto; font-size: .85rem; } .mod-appeal .badge { font-size: .62rem; } .mod-appeal p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .94rem; } .mod-answer { border-top: 1px solid var(--border); padding-top: 8px; font-size: .94rem; } .mod-case .modal-foot { flex-wrap: wrap; } .mod-case .modal-foot .left { margin-right: auto; } @media (max-width: 600px) { .mod-case .modal-foot .btn { flex: 1; } .mod-case .modal-foot .left { flex-basis: 100%; margin: 0; } } /* Settings → Moderation decisions, and /admin → Decisions */ .mod-list { display: flex; flex-direction: column; } .mod-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-top: 1px solid var(--border); padding: 12px 4px; cursor: pointer; border-radius: 0; transition: background .15s; } @media (hover: hover) { .mod-item:hover { background: var(--bg-tint); } } .mod-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .mod-item-text small { font-size: .85rem; } .mod-state, .decision-row .state { font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; } .mod-state.open, .decision-row .state.open { color: var(--danger); } .mod-state.ok, .decision-row .state.ok { color: var(--ok); } .mod-go { color: var(--muted); font-size: .8rem; } @media (max-width: 600px) { .mod-state { display: none; } } .decision-row { align-items: flex-start; } .decision-row .who b { white-space: normal; } button.notif { width: 100%; text-align: left; font: inherit; background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; } @media (hover: hover) { button.notif:hover { background: var(--bg-tint); } } #moderation { scroll-margin-top: calc(var(--header-h) + 16px); } /* pull to refresh (app.js): a small disc that follows the finger, only in the installed app and the Android shell */ html.standalone, html.in-app { overscroll-behavior-y: contain; } .ptr { position: fixed; z-index: 95; left: 50%; top: calc(var(--header-h) + 8px); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); color: var(--muted); border: 1px solid var(--border); box-shadow: var(--shadow-md); pointer-events: none; font-size: .9rem; will-change: transform; } .ptr.ready { color: var(--accent-text); border-color: var(--accent); } .ptr.busy i { animation: spin .75s linear infinite; } /* ── spoilers (||text||, PERIDOT.md §28): hidden under a solid block until clicked, like Discord; a shown one keeps a faint background. Pictures and players alone in a spoiler are blurred under a SPOILER label. The editor's own spoiler text (.ed-spoiler) is never hidden: it is only marked. ── */ :root { --spoiler: #6f6a78; --spoiler-hover: #5f5a68; --spoiler-shown: rgba(26, 19, 32, .1); } :root[data-theme="dark"] { --spoiler: #3a3541; --spoiler-hover: #48424f; --spoiler-shown: rgba(255, 255, 255, .1); } .spoiler { border-radius: 4px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .15s; } .spoiler.revealed, .ed-spoiler { background: var(--spoiler-shown); } .spoiler:not(.revealed):not(.ed-spoiler) { background: var(--spoiler); color: transparent; cursor: pointer; user-select: none; -webkit-user-select: none; } @media (hover: hover) { .spoiler:not(.revealed):not(.ed-spoiler):hover { background: var(--spoiler-hover); } } .spoiler:not(.revealed):not(.ed-spoiler):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* everything inside a hidden spoiler is invisible and can't be clicked (colour emoji vanish with the text colour too) */ .spoiler:not(.revealed):not(.ed-spoiler) * { pointer-events: none; color: transparent !important; text-decoration-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } .spoiler:not(.revealed):not(.ed-spoiler):not(.spoiler-media) * { background: transparent !important; } .spoiler:not(.revealed):not(.spoiler-media) img { opacity: 0; } .spoiler.spoiler-media { display: block; position: relative; width: fit-content; max-width: 100%; padding: 0; margin: .5em 0; border-radius: var(--radius-sm); overflow: hidden; } .spoiler-media.revealed { background: none; } /* a picture sizes the block itself; a player, or a picture still loading, needs the width given (a fit-content box would fold to nothing) */ .spoiler-media { min-width: min(100%, 160px); min-height: 72px; } .spoiler-media:has(> .embed, > video, > audio) { width: 100%; } .spoiler-media:has(.media-wait) { width: min(100%, 420px); } .spoiler-media:has(.media-wait) .media-wait { width: 100%; } .spoiler-media:not(.revealed) > * { filter: blur(40px) brightness(.85); } .spoiler-media:not(.revealed)::after { content: 'SPOILER'; position: absolute; top: min(50%, 150px); left: 50%; /* a tall picture cut by "Read more" still shows the label */ transform: translate(-50%, -50%); padding: 8px 16px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, .62); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .08em; pointer-events: none; transition: background-color .15s; } @media (hover: hover) { .spoiler-media:not(.revealed):hover::after { background: rgba(0, 0, 0, .8); } } .ed-spoiler { outline: 1px dashed var(--muted); outline-offset: -1px; } .ed-embed.spoiler-on img, .ed-embed.spoiler-on video { filter: blur(3px) saturate(.6); } .ed-spoiler-tag { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, .65); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em; pointer-events: none; } /* ── blocked and suspended accounts (PERIDOT.md §28) ── */ .gone-avatar { display: inline-block; flex-shrink: 0; background: var(--bg-tint); border: 1px solid var(--border); } .profile-top .gone-avatar.avatar-xl { border: 4px solid var(--bg); } .profile-banner.gone::after { display: none; } .profile-gone { max-width: 440px; margin: 20px auto 8px; padding: 0 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .profile-gone h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; } .profile-gone p { margin: 0 0 8px; } .blocked-btn .un { display: none; } .blocked-btn:focus-visible .is { display: none; } @media (hover: hover) { .blocked-btn:hover .is { display: none; } } .blocked-btn:focus-visible .un { display: inline; } @media (hover: hover) { .blocked-btn:hover .un { display: inline; } } .reply-gone .gone-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 36px; color: var(--muted); font-size: .92rem; } .reply-gone .gone-line .btn { margin-left: 2px; } .gone-card { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 18px 20px; } .gone-card > i { font-size: 1.4rem; color: var(--muted); } .gone-card > div { flex: 1; min-width: 200px; } .gone-card p { margin: 2px 0 0; font-size: .92rem; } .blocked-list { display: flex; flex-direction: column; } .blocked-empty { margin: 0; } /* the suspended member's screen (lockout.js): over everything but modals, toasts, and the app's own update bar */ html.is-suspended body { overflow: hidden; } #lockout { position: fixed; inset: 0; z-index: 1050; overflow-y: auto; background: var(--bg); text-align: left; padding: calc(var(--safe-t) + 32px) 16px calc(var(--safe-b) + 32px); } .lockout-wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .lockout-mark { width: 44px; height: auto; } #lockout h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.15; margin: 0; } .lockout-sub { margin: -6px 0 0; font-weight: 600; color: var(--ink-soft); overflow-wrap: anywhere; } .lockout-lead { margin: 0; } .lockout-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; } .lockout-card h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.1rem; } .lockout-card > p { margin: 0; } .lockout-actions { display: flex; flex-wrap: wrap; gap: 8px; } .lockout-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .lockout-foot p { margin: 0; font-size: .9rem; } /* the lockout's links: each stays whole, and they wrap as units */ .lockout-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: .9rem; } .lockout-links > * { white-space: nowrap; } /* the update bar stays one line: a shorter message on narrow phones */ .update-bar > span { white-space: nowrap; } .update-bar .short { display: none; } @media (max-width: 480px) { .update-bar .long { display: none; } .update-bar .short { display: inline; } } /* ── action menus (peridot.js openMenu): posts, replies, and profiles share one ⋯ menu, fixed to the screen under its button (above it when the screen ends there), as wide as its longest line ── */ .popover.action-menu { position: fixed; right: auto; width: max-content; min-width: 200px; max-width: calc(100vw - 16px); padding: 8px; } .popover.action-menu.up { animation-name: popInUp; } .popover.action-menu.closing { animation: popOut .15s ease both; } .action-menu .pop-btn { white-space: nowrap; } .action-menu .pop-btn span { overflow: hidden; text-overflow: ellipsis; } .action-menu .pop-btn.danger, .action-menu .pop-btn.danger i { color: var(--danger); } @keyframes popInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* /admin → a person → Badges: a dropdown of switches, one per badge */ .badge-picker { position: fixed; right: auto; width: min(380px, calc(100vw - 16px)); padding: 8px; gap: 2px; z-index: 1001; } .bp-head { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .bp-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; } .bp-row.locked { cursor: default; } .bp-row.locked .switch { opacity: .5; } .bp-look { flex: none; width: 74px; display: flex; justify-content: center; } .bp-look .staff-badge, .bp-look .parody-badge { margin: 0; } .bp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .bp-text small { font-size: .82rem; } .dd-caret { font-size: .7em !important; opacity: .7; margin-left: -2px; } #badges .count-pill { margin-left: 0; } /* ── /admin → Stats ── */ .stats { display: flex; flex-direction: column; gap: 16px; } .stat-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; text-align: left; } .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .stat-sub { font-size: .9rem; font-weight: 600; color: var(--muted); margin-top: 4px; } .stat-empty { font-size: .9rem; } .bar-list, .top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .bar-list li { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: .92rem; } .bl-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; } .bl-track { height: 10px; border-radius: 4px; background: var(--bg-tint); overflow: hidden; } .bl-track i { display: block; height: 100%; background: var(--accent); border-radius: 4px; } .bl-n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .bl-n small { font-weight: 500; color: var(--muted); margin-left: 6px; font-size: .82rem; } .emoji-list li { grid-template-columns: 2.2em minmax(0, 1fr) auto; } .emoji-list .bl-label { font-size: 1.15rem; } .top-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .top-list a { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); } .tl-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .tl-who b, .tl-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-who small { font-size: .82rem; } /* months as columns: one series, the brand green; the newest and the busiest month carry their number, the rest show it on hover / tap */ .col-chart { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; padding: 26px 0 24px; border-bottom: 0; } .col { position: relative; height: 140px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--border); cursor: default; } .col-bar { width: 100%; max-width: 30px; background: var(--accent); border-radius: 4px 4px 0 0; transition: background .15s; } .col.on .col-bar { background: var(--accent-hover); } .col-v { font-size: .74rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-bottom: 3px; visibility: hidden; white-space: nowrap; } .col-v.show, .col.on .col-v { visibility: visible; } .col-m { position: absolute; top: calc(100% + 6px); font-size: .74rem; color: var(--muted); white-space: nowrap; } .chart-tip { position: absolute; top: 0; z-index: 2; padding: 4px 10px; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: .78rem; font-weight: 600; white-space: nowrap; pointer-events: none; } .chart-tip[hidden] { display: none; } @media (max-width: 900px) { .stat-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .stat-card { padding: 18px 16px; } .bar-list li { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; } /* phones: the name on its own line, the bar and number under it */ .bar-list .bl-label { grid-column: 1 / -1; } .emoji-list li { grid-template-columns: 2em minmax(0, 1fr) auto; } .emoji-list .bl-label { grid-column: auto; } .col-chart { gap: 3px; } .col { height: 120px; } .col-m { font-size: .66rem; } .col-v { font-size: .66rem; } } /* ── phones and the Android app: feel like an app, not a web page ── No grey rectangle flashes over what is tapped (each control has its own pressed look below); no double-tap zoom delay on controls; no text selection or long-press callout on controls and navigation (text in posts stays selectable). */ html { -webkit-tap-highlight-color: transparent; } button, .btn, .chip, .icon-btn, .stat, .react, .react-who, .pop-btn, .seg button, .rail-link, .tabbar a, .tabbar button, .wordmark, .ed-btn, .switch, .mod-item, .draft-open, label.check, .header-back { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } html.in-app .tabbar, html.in-app .site-header, html.in-app .rail { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } html.in-app img { -webkit-touch-callout: none; } @media (hover: none) { /* a press shows at once and goes when the finger lifts (a tap never leaves a hover look behind: those only exist with a mouse) */ .icon-btn:active, .stat:active, .react-who:active, .ed-btn:active, .mod-item:active, .draft-open:active, .cat-pick:active, .report-reason:active, .notif:active, button.notif:active, .link-row .grip:active, .ep-tone:active { background: var(--border-strong); color: var(--ink); } .pop-btn:active { background: var(--accent-tint); color: var(--ink); } .btn-primary:active { background: var(--accent-hover); } .btn-ghost:active, .btn-danger:active, .chip:active, .react:active, .reply-stub:active { border-color: var(--accent); } .seg button:active { color: var(--ink); } .rail-link:active, .tabbar a:active { color: var(--accent-text); } .tabbar a i, .tabbar .compose span { transition: transform .12s ease, background .12s; } .tabbar a:active i { transform: scale(.86); } .tabbar .compose:active span { transform: scale(.92); background: var(--accent-hover); } .card.open-post:active { background: color-mix(in srgb, var(--panel), var(--ink) 4%); } .code-copy { opacity: 1; } .ep-e:active { background: var(--bg-tint); } }