/* SPDX-FileCopyrightText: 2026 lasse tech, Lars Gossard */ /* SPDX-License-Identifier: LicenseRef-Proprietary */ /* Copy of the Palaver design system's components/bundle.css (https://claude.ai/artifact/PqUqiymnEeL7P8XRtp6ghP), unchanged. Changes go into the design system first, then here. */ /* Palaver components — reads tokens.css custom properties only. Every :hover rule sits inside @media (hover: hover), (pointer: fine), (pointer: none) so touch screens don't keep a hover look after a tap (Electron on Linux reports "hover: none" with a mouse; only hover: none with pointer: coarse is touch). */ .pv-root, .pv-root * { box-sizing: border-box; } [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } [data-theme="neon"] { color-scheme: dark; } [data-theme="office"] { color-scheme: light; } /* ---- Theme layer ---- Everything a theme may change besides colour lives in these --pv-* properties: font families, type sizes, the bold weight, overline casing, radii, control heights, row heights and avatar sizes. Components read ONLY these, never --font-*, --radius-* or --size-* directly. The values come from tokens.json: the base tokens for Dark, Light and Neon, the *-office tokens and the office-* families for Büro. Set on :root AND on every [data-theme] element, so a Dark row nested inside a Büro page (or the other way round) gets its own theme's geometry, not an inherited one. Touch sizes (pointer: coarse, size-touch) are not part of a theme: a 48 px target stays 48 px in every theme. */ :root, [data-theme] { --pv-sans: var(--font-sans); --pv-display: var(--font-display); --pv-mono: var(--font-mono); --pv-fw-bold: 600; --pv-display-track: -0.01em; --pv-overline-case: uppercase; --pv-overline-track: .08em; --pv-ts-overline: 11px/14px; --pv-ts-micro: 11px/16px; --pv-ts-caption: 12px/16px; --pv-ts-label: 13px/18px; --pv-ts-control-tight: 14px/18px; --pv-ts-control: 14px/20px; --pv-ts-body-tight: 15px/20px; --pv-ts-body: 15px/22px; --pv-ts-doc: 15px/24px; --pv-ts-lead: 16px/22px; --pv-ts-h4: 15px/20px; --pv-ts-h3: 18px/24px; --pv-ts-doc-h2: 19px/28px; --pv-ts-title: 20px/26px; --pv-ts-doc-h1: 26px/34px; --pv-ts-title-lg: 28px/34px; --pv-ts-mono-gutter: 11px/22px; --pv-ts-mono-sm: 12px/16px; --pv-ts-mono-label: 13px/18px; --pv-ts-code: 13px/20px; --pv-ts-code-block: 13px/22px; --pv-ts-mono-body: 15px/22px; --pv-fz-body: 15px; --pv-fz-label: 13px; --pv-fz-caption: 12px; --pv-radius-sm: var(--radius-sm); --pv-radius-md: var(--radius-md); --pv-radius-lg: var(--radius-lg); --pv-h-control: var(--size-control); --pv-h-control-sm: var(--size-control-sm); --pv-h-iconbtn-sm: var(--size-iconbtn-sm); --pv-h-call: var(--size-call-button); --pv-h-row: var(--size-row); --pv-h-row-lg: var(--size-row-lg); --pv-h-row-xl: var(--size-row-xl); --pv-h-seg: var(--size-seg); --pv-h-seg-sm: var(--size-seg-sm); --pv-h-chip: var(--size-chip); --pv-h-toolbar: var(--size-toolbar); --pv-avatar-sm: var(--size-avatar-sm); --pv-avatar-md: var(--size-avatar-md); --pv-avatar-lg: var(--size-avatar-lg); --pv-avatar-xl: var(--size-avatar-xl); --pv-sidebar: var(--size-sidebar); } /* Büro (Office): Noto Sans, a Fluent-like ramp (body 14/20, titles 20/28 in 600), sentence-case group labels, 3/4/6 px radii, 32 px controls, 28 px rows, 32 px message avatars. Layout positions do not move. */ [data-theme="office"] { --pv-sans: var(--font-office-sans); --pv-display: var(--font-office-sans); --pv-mono: var(--font-office-mono); --pv-fw-bold: 600; --pv-display-track: 0; --pv-overline-case: none; --pv-overline-track: 0; --pv-ts-overline: 12px/16px; --pv-ts-micro: 11px/16px; --pv-ts-caption: 12px/16px; --pv-ts-label: 14px/20px; --pv-ts-control-tight: 14px/18px; --pv-ts-control: 14px/20px; --pv-ts-body-tight: 14px/20px; --pv-ts-body: 14px/20px; --pv-ts-doc: 15px/24px; --pv-ts-lead: 16px/22px; --pv-ts-h4: 14px/20px; --pv-ts-h3: 16px/22px; --pv-ts-doc-h2: 18px/26px; --pv-ts-title: 20px/28px; --pv-ts-doc-h1: 24px/32px; --pv-ts-title-lg: 20px/28px; --pv-ts-mono-gutter: 11px/22px; --pv-ts-mono-sm: 12px/16px; --pv-ts-mono-label: 13px/18px; --pv-ts-code: 13px/20px; --pv-ts-code-block: 13px/22px; --pv-ts-mono-body: 14px/20px; --pv-fz-body: 14px; --pv-fz-label: 14px; --pv-fz-caption: 12px; --pv-radius-sm: var(--radius-sm-office); --pv-radius-md: var(--radius-md-office); --pv-radius-lg: var(--radius-lg-office); --pv-h-control: var(--size-control-office); --pv-h-control-sm: var(--size-control-sm-office); --pv-h-iconbtn-sm: var(--size-iconbtn-sm-office); --pv-h-call: var(--size-call-button-office); --pv-h-row: var(--size-row-office); --pv-h-row-lg: var(--size-row-lg-office); --pv-h-row-xl: var(--size-row-xl-office); --pv-h-seg: var(--size-seg-office); --pv-h-seg-sm: var(--size-seg-sm-office); --pv-h-chip: var(--size-chip-office); --pv-h-toolbar: var(--size-toolbar-office); --pv-avatar-sm: var(--size-avatar-sm-office); --pv-avatar-md: var(--size-avatar-md-office); --pv-avatar-lg: var(--size-avatar-lg-office); --pv-avatar-xl: var(--size-avatar-xl-office); --pv-sidebar: var(--size-sidebar-office); } /* Hairline frames instead of layered tints: the enterprise cue */ [data-theme="office"] .pv-tile, [data-theme="office"] .pv-callbar { border: 1px solid var(--line); } .pv-themeswitch { width: auto; min-width: 168px; } .pv-themeswitch--compact { min-width: 0; } body { margin: 0; background: var(--bg-200); color: var(--fg); font-family: var(--pv-sans); font-size: var(--pv-fz-body); line-height: 22px; } .pv-icon { display: inline-block; flex: none; vertical-align: middle; } .pv-emoji { font-family: var(--font-emoji); font-variant-emoji: emoji; } .pv-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pv-overline { font: var(--pv-fw-bold) var(--pv-ts-overline) var(--pv-sans); letter-spacing: var(--pv-overline-track); text-transform: var(--pv-overline-case); color: var(--fg-subtle); padding: 12px 8px 6px; } .pv-pop { background: var(--bg-100); border: 1px solid var(--line-strong); border-radius: var(--pv-radius-md); box-shadow: var(--shadow-pop); } .pv-focus:focus-visible, .pv-btn:focus-visible, .pv-iconbtn:focus-visible, .pv-channel:focus-visible, .pv-composer__input:focus-visible, .pv-member:focus-visible, .pv-serverhead:focus-visible, .pv-reaction:focus-visible, .pv-reply:focus-visible, .pv-emojipicker__cell:focus-visible, .pv-menu__item:focus-visible, .pv-linkpreview:focus-visible, .pv-stream:focus-visible, .pv-check__box:focus-visible, .pv-input:focus-visible, .pv-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Button */ .pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--pv-h-control); padding: 0 var(--space-4); border-radius: var(--pv-radius-md); border: 1px solid transparent; font: 500 var(--pv-ts-label) var(--pv-sans); cursor: pointer; white-space: nowrap; } .pv-btn--sm { height: var(--pv-h-control-sm); padding: 0 var(--space-3); font-size: var(--pv-fz-caption); gap: var(--space-1); } .pv-btn--primary { background: var(--brass); color: var(--on-brass); font-weight: 600; } .pv-btn--secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); } .pv-btn--ghost { background: transparent; color: var(--fg-muted); } .pv-btn--danger { background: var(--live); color: var(--on-live); font-weight: 600; } .pv-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; } /* IconButton */ .pv-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--pv-h-call); height: var(--pv-h-call); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--bg-300); color: var(--fg); cursor: pointer; padding: 0; } .pv-iconbtn--sm { width: var(--pv-h-iconbtn-sm); height: var(--pv-h-iconbtn-sm); border-color: transparent; background: transparent; color: var(--fg-muted); border-radius: var(--pv-radius-sm); } .pv-iconbtn--sm[aria-pressed="true"] { color: var(--fg); background: var(--bg-400); } .pv-iconbtn--sm-off, .pv-iconbtn--sm-off[aria-pressed="true"] { color: var(--live); } .pv-iconbtn--sm-danger { color: var(--live); } .pv-iconbtn--off { background: var(--fg); color: var(--bg-200); border-color: var(--fg); } .pv-iconbtn--on { background: var(--pulse); color: var(--on-pulse); border-color: var(--pulse); } .pv-iconbtn--danger { background: var(--live); color: var(--on-live); border-color: var(--live); width: 64px; } .pv-iconbtn:disabled { opacity: .45; cursor: not-allowed; } /* Badge */ .pv-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; padding: 0 6px; border-radius: var(--pv-radius-sm); font: var(--pv-fw-bold) var(--pv-ts-overline) var(--pv-sans); letter-spacing: var(--pv-overline-track); text-transform: var(--pv-overline-case); white-space: nowrap; } .pv-badge--neutral { background: var(--bg-400); color: var(--fg-muted); } .pv-badge--brass { background: var(--brass); color: var(--on-brass); } .pv-badge--pulse { background: var(--pulse); color: var(--on-pulse); } .pv-badge--live { background: var(--live); color: var(--on-live); } .pv-badge--count { min-width: 20px; justify-content: center; border-radius: var(--radius-pill); letter-spacing: 0; background: var(--brass); color: var(--on-brass); } .pv-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; } /* Avatar */ .pv-avatar { position: relative; display: inline-flex; flex: none; } .pv-avatar__face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--radius-pill); background: var(--bg-400); color: var(--fg); font-family: var(--pv-display); font-weight: 700; overflow: hidden; } .pv-avatar__face img { width: 100%; height: 100%; object-fit: cover; } .pv-avatar--speaking .pv-avatar__face { box-shadow: 0 0 0 2px var(--bg-200), 0 0 0 4px var(--pulse); } .pv-presence { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: var(--radius-pill); border: 3px solid var(--bg-100); box-sizing: content-box; } .pv-avatar--sm .pv-presence { width: 8px; height: 8px; border-width: 2px; } .pv-avatar--lg .pv-presence, .pv-avatar--xl .pv-presence { width: 18px; height: 18px; border-width: 4px; right: 0; bottom: 0; } .pv-presence--online { background: var(--pulse); } .pv-presence--idle { background: var(--brass); -webkit-mask: radial-gradient(circle at 30% 30%, transparent 38%, #000 39%); mask: radial-gradient(circle at 30% 30%, transparent 38%, #000 39%); } .pv-presence--dnd { background: var(--live); } .pv-presence--dnd::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; margin-top: -1px; background: var(--bg-100); border-radius: 1px; } .pv-presence--offline { background: var(--bg-100); box-shadow: inset 0 0 0 2px var(--fg-subtle); } /* ChannelItem, DirectItem */ .pv-channel { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--pv-h-row); padding: 5px var(--space-2); border: 0; border-radius: var(--pv-radius-sm); background: transparent; color: var(--fg-muted); font: 500 var(--pv-ts-label) var(--pv-sans); text-align: left; cursor: pointer; } .pv-channel--unread { color: var(--fg); font-weight: 600; } .pv-channel--active { background: var(--bg-400); color: var(--fg); } .pv-channel--dm { min-height: var(--pv-h-row-lg); } .pv-channel--dm .pv-presence { border-color: var(--bg-100); } .pv-channel--active .pv-presence { border-color: var(--bg-400); } .pv-channel__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-channel__lock { color: var(--fg-muted); } .pv-channel-wrap { position: relative; } .pv-channel-wrap--unread::before { content: ""; position: absolute; left: -12px; top: 12px; width: 4px; height: 8px; border-radius: 0 4px 4px 0; background: var(--fg); } .pv-channel__people { list-style: none; margin: 2px 0 6px; padding: 0 0 0 30px; } .pv-channel__person { display: flex; align-items: center; gap: var(--space-2); height: var(--pv-h-control-sm); color: var(--fg-muted); font: 400 var(--pv-ts-label) var(--pv-sans); } .pv-channel__person--speaking { color: var(--fg); } .pv-channel__person .pv-icon { margin-left: auto; color: var(--fg-muted); } /* ServerHeader, ServerPicture */ .pv-serverhead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); width: 100%; padding: var(--space-3); border: 0; border-radius: var(--pv-radius-md); background: transparent; color: var(--fg); text-align: left; cursor: pointer; } .pv-serverhead__text { display: flex; flex-direction: column; min-width: 0; max-width: 100%; } .pv-serverhead__name { font: var(--pv-fw-bold) var(--pv-ts-title-lg) var(--pv-display); letter-spacing: var(--pv-display-track); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pv-serverhead__addr { font: 500 var(--pv-ts-mono-sm) var(--pv-mono); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-serverpic { display: block; width: auto; object-fit: contain; border-radius: 0; flex: none; } .pv-mark { display: block; flex: none; } /* Server picture without an upload: initials tile */ .pv-serverpic-ini { display: flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; border-radius: var(--pv-radius-md); background: var(--bg-400); color: var(--fg); font: 700 var(--pv-ts-label) var(--pv-sans); letter-spacing: .02em; } .pv-serverpic-ini--active { background: var(--brass-tint); color: var(--brass-text); } /* Server rail */ .pv-srvrail { width: 72px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; background: var(--bg-0); border-right: 1px solid var(--line); } .pv-srvrail__item { position: relative; width: 72px; display: flex; justify-content: center; flex: none; } .pv-srvrail__btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--pv-radius-md); background: transparent; color: var(--fg); cursor: pointer; } .pv-srvrail__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .pv-srvrail__item--active .pv-srvrail__btn { background: var(--bg-300); } .pv-srvrail__item--add .pv-srvrail__btn { color: var(--fg-muted); } .pv-srvrail__pip { position: absolute; left: 0; top: 50%; width: 4px; height: 8px; margin-top: -4px; border-radius: 0 4px 4px 0; background: var(--fg); pointer-events: none; } .pv-srvrail__item--active .pv-srvrail__pip { height: 28px; margin-top: -14px; background: var(--brass); } .pv-srvrail__count { position: absolute; top: -4px; right: 6px; pointer-events: none; } .pv-srvrail__call { position: absolute; right: 8px; bottom: -2px; width: 20px; height: 20px; border-radius: 999px; background: var(--pulse); color: var(--on-pulse); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--bg-0); pointer-events: none; } .pv-srvrail__sep { width: 32px; height: 1px; flex: none; background: var(--line); } .pv-srvrail__tip { position: absolute; left: 66px; top: 50%; transform: translateY(-50%); z-index: 20; display: none; flex-direction: column; gap: 2px; padding: 6px 10px; white-space: nowrap; background: var(--bg-300); border: 1px solid var(--line-strong); border-radius: var(--pv-radius-sm); box-shadow: var(--shadow-pop); pointer-events: none; } .pv-srvrail__btn:focus-visible ~ .pv-srvrail__tip { display: flex; } .pv-srvrail__tipname { font: 600 var(--pv-ts-label) var(--pv-sans); color: var(--fg); } .pv-srvrail__tipaddr { font: 500 var(--pv-ts-mono-sm) var(--pv-mono); color: var(--fg-muted); } .pv-srvrail--touch .pv-srvrail__btn { width: 52px; height: 52px; } .pv-srvrail--touch .pv-srvrail__count { right: 4px; } .pv-srvrail--touch .pv-srvrail__call { right: 6px; } /* Members */ .pv-memberlist { display: flex; flex-direction: column; } .pv-member { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 6px var(--space-2); border: 0; border-radius: var(--pv-radius-sm); background: transparent; color: var(--fg); text-align: left; cursor: pointer; } .pv-member--offline .pv-member__name { color: var(--fg-muted); } .pv-member__text { display: flex; flex-direction: column; min-width: 0; } .pv-member__name { font: 500 var(--pv-ts-label) var(--pv-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-member__meta { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ProfileCard */ .pv-profile { display: flex; flex-direction: column; width: 320px; max-width: 100%; color: var(--fg); } .pv-profile__head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); } .pv-profile .pv-presence { border-color: var(--bg-100); } .pv-profile__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } .pv-profile__name { margin: 0; font: var(--pv-fw-bold) var(--pv-ts-title) var(--pv-display); color: var(--fg); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pv-profile__you { font: 400 var(--pv-ts-label) var(--pv-sans); color: var(--fg-muted); text-shadow: none; } .pv-profile__user { font: 500 var(--pv-ts-mono-sm) var(--pv-mono); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-profile__status { display: flex; flex-direction: column; margin-top: var(--space-1); font: 400 var(--pv-ts-label) var(--pv-sans); } .pv-profile__presence { color: var(--fg); } .pv-profile__custom { color: var(--fg-muted); overflow-wrap: anywhere; } .pv-profile__facts { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); } .pv-profile__voice { display: flex; align-items: center; gap: var(--space-2); font: 400 var(--pv-ts-label) var(--pv-sans); color: var(--fg); min-width: 0; } .pv-profile__voice > .pv-icon { color: var(--pulse-text); } .pv-profile__voicetext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-profile__muted { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex: none; font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } .pv-profile__roles { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .pv-profile__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--line); } .pv-profile__actions .pv-btn { flex: 1 1 auto; } /* Popover: small non-modal dialog at its trigger (pv-pop surface), no scrim, no arrow */ .pv-popover { position: fixed; z-index: 120; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; border-radius: var(--pv-radius-lg); } .pv-popover--inline { position: relative; z-index: auto; max-height: none; } .pv-popover:focus { outline: none; } .pv-popover__sheetbody .pv-profile { width: auto; } .pv-popover__sheetbody .pv-profile .pv-presence { border-color: var(--bg-300); } /* The trigger stays marked while its popover is open */ .pv-member--open { background: var(--bg-400); } .pv-member--open .pv-presence { border-color: var(--bg-400); } .pv-msg__authorbtn { border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; border-radius: var(--pv-radius-sm); text-align: left; } .pv-msg__authorbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .pv-msg__authorbtn--open { text-decoration: underline; text-underline-offset: 3px; } /* Message */ .pv-msg { position: relative; display: grid; grid-template-columns: var(--pv-avatar-md) 1fr; column-gap: var(--space-3); padding: 6px var(--space-4); } .pv-msg--grouped { padding-top: 1px; padding-bottom: 1px; } .pv-msg--compact { padding-top: 3px; padding-bottom: 3px; } .pv-msg--compact.pv-msg--grouped { padding-top: 0; padding-bottom: 0; } .pv-msg:focus-within, .pv-msg--selected { background: var(--bg-300); } .pv-msg:focus { outline: none; } .pv-msg:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); } .pv-msg--mention, .pv-msg--mention:focus-within { background: var(--brass-tint); box-shadow: inset 2px 0 0 var(--brass); } .pv-msg__replyrow { grid-column: 2; min-width: 0; margin-bottom: 2px; } .pv-msg__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .pv-msg__author { font: 600 var(--pv-ts-body) var(--pv-sans); color: var(--fg); } .pv-msg__time { font: 500 var(--pv-ts-mono-sm) var(--pv-mono); color: var(--fg-subtle); } .pv-msg__gtime { font: 500 var(--pv-ts-mono-gutter) var(--pv-mono); color: var(--fg-subtle); text-align: right; visibility: hidden; } .pv-msg:focus-within .pv-msg__gtime, .pv-msg--selected .pv-msg__gtime { visibility: visible; } .pv-msg__main { min-width: 0; } .pv-msg__body { font: 400 var(--pv-ts-body) var(--pv-sans); color: var(--fg); overflow-wrap: anywhere; } .pv-msg__body code { font: 400 var(--pv-ts-code) var(--pv-mono); background: var(--bg-400); padding: 1px 5px; border-radius: var(--pv-radius-sm); } .pv-mention { color: var(--brass-text); font-weight: 600; background: var(--brass-tint); border-radius: 4px; padding: 0 2px; } .pv-msg__actions { position: absolute; top: -14px; right: var(--space-4); display: none; z-index: 2; } .pv-msg:focus-within .pv-msg__actions { display: block; } /* Touch: a tapped message shows its actions below itself */ .pv-msg--selected .pv-msg__actions { display: block; position: static; grid-column: 2; margin-top: var(--space-1); } /* ReplyQuote */ .pv-reply { display: flex; align-items: baseline; gap: 6px; max-width: 100%; min-width: 0; padding: 0 0 0 var(--space-2); border: 0; border-left: 2px solid var(--line-strong); background: transparent; font: 400 var(--pv-ts-label) var(--pv-sans); color: var(--fg-muted); cursor: pointer; text-align: left; } .pv-reply__author { font-weight: 600; color: var(--fg); flex: none; } .pv-reply__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); } .pv-replybar { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px var(--space-3); border-left: 2px solid var(--brass); background: var(--bg-300); border-radius: var(--pv-radius-md) var(--pv-radius-md) 0 0; font: 400 var(--pv-ts-label) var(--pv-sans); color: var(--fg-muted); min-width: 0; } .pv-replybar__lead { flex: none; } .pv-replybar .pv-reply__text { flex: 1; } .pv-replybar__close .pv-icon, .pv-modal__close .pv-icon { transform: rotate(45deg); } .pv-composer-wrap { display: flex; flex-direction: column; gap: var(--space-1); } .pv-composer-wrap > .pv-replybar + .pv-composer { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: calc(-1 * var(--space-1)); } /* Reactions */ .pv-reactions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); } .pv-reaction { display: inline-flex; align-items: center; gap: 4px; height: var(--pv-h-chip); padding: 0 8px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--bg-300); color: var(--fg); cursor: pointer; font: 600 var(--pv-ts-caption) var(--pv-sans); } .pv-reaction .pv-emoji { font-size: var(--pv-fz-body); line-height: 1; } .pv-reaction--mine { background: var(--brass-tint); border-color: var(--brass); color: var(--brass-text); } .pv-reaction--add { color: var(--fg-muted); padding: 0 6px; } /* MessageActions */ .pv-msgactions { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-100); border: 1px solid var(--line-strong); border-radius: var(--pv-radius-md); box-shadow: var(--shadow-pop); } .pv-msgactions--inline { box-shadow: none; } /* SignatureMark */ .pv-sig { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } .pv-sig--invalid { color: var(--live); font-weight: 600; } /* Composer */ .pv-composer { display: flex; align-items: flex-end; gap: var(--space-1); padding: 6px; border-radius: var(--pv-radius-md); background: var(--bg-300); border: 1px solid var(--line-strong); } .pv-composer:focus-within { border-color: var(--focus); } .pv-composer__input { flex: 1; min-height: 32px; max-height: 160px; resize: none; border: 0; background: transparent; color: var(--fg); font: 400 var(--pv-ts-body) var(--pv-sans); padding: 5px 4px; outline: none; } .pv-composer__input::placeholder { color: var(--fg-subtle); } .pv-composer__send { color: var(--brass-text); } /* EmojiPicker */ .pv-emojipicker { display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; padding: var(--space-2); width: max-content; } .pv-emojipicker__cell { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--pv-radius-sm); background: transparent; font-size: 20px; line-height: 32px; cursor: pointer; } /* LinkPreview */ .pv-linkpreview { display: block; max-width: 440px; margin-top: var(--space-2); padding: var(--space-3); background: var(--bg-300); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--pv-radius-sm); color: inherit; text-decoration: none; } .pv-linkpreview__row { display: flex; gap: var(--space-3); } .pv-linkpreview__text { flex: 1; min-width: 0; } .pv-linkpreview__site { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } .pv-linkpreview__title { font: 600 var(--pv-ts-control) var(--pv-sans); color: var(--brass-text); } .pv-linkpreview__desc { font: 400 var(--pv-ts-label) var(--pv-sans); color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; } .pv-linkpreview__thumb { width: 80px; height: 80px; flex: none; object-fit: cover; border-radius: var(--pv-radius-sm); } .pv-linkpreview__wide { display: block; width: 100%; max-height: 260px; object-fit: cover; margin-top: var(--space-3); border-radius: var(--pv-radius-sm); } .pv-linkpreview--compact { display: flex; align-items: center; gap: var(--space-3); max-width: none; margin: 0; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); } .pv-linkpreview--compact .pv-linkpreview__thumb { width: 40px; height: 40px; } .pv-linkpreview--compact .pv-linkpreview__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* VoiceTile */ .pv-tile { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; min-width: 180px; border-radius: var(--pv-radius-lg); background: var(--bg-300); overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; } .pv-tile--speaking { outline-color: var(--pulse); } .pv-tile--screen { background: var(--coal); } .pv-tile__screen { position: absolute; inset: 0; } .pv-tile__label { position: absolute; left: var(--space-2); bottom: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); max-width: calc(100% - 16px); height: var(--pv-h-chip); padding: 0 var(--space-2); border-radius: var(--pv-radius-sm); background: var(--bg-0); color: var(--fg); font: 500 var(--pv-ts-label) var(--pv-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-tile__label .pv-icon { color: var(--live); } .pv-tile__badge { position: absolute; left: var(--space-2); top: var(--space-2); } /* StreamTile, StreamStage */ .pv-stream { position: relative; aspect-ratio: 16 / 9; min-width: 220px; border-radius: var(--pv-radius-lg); background: var(--coal); overflow: hidden; } .pv-stream__video { position: absolute; inset: 0; } .pv-stream__video > * { width: 100%; height: 100%; display: block; object-fit: contain; } .pv-stream--paused { background: var(--bg-300); } .pv-stream__paused { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--fg-muted); font: 500 var(--pv-ts-label) var(--pv-sans); text-align: center; padding: var(--space-4); } .pv-stream__ctlwrap { position: absolute; top: var(--space-2); right: var(--space-2); display: none; } .pv-stream:focus-within .pv-stream__ctlwrap, .pv-stream--ctlopen .pv-stream__ctlwrap { display: block; } .pv-streamctl { display: flex; align-items: center; gap: 2px; padding: 3px; } .pv-streamctl__q { display: inline-flex; margin-right: 2px; } .pv-stream--expanded { border-radius: var(--pv-radius-lg); } .pv-stage { display: flex; flex-direction: column; gap: var(--space-3); } .pv-stage__main .pv-stream { width: 100%; } .pv-stage__strip { display: flex; gap: var(--space-2); overflow-x: auto; } .pv-stage__strip .pv-tile { min-width: 140px; width: 140px; } /* CallBar */ .pv-callbar { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--pv-radius-lg); background: var(--bg-100); border: 1px solid var(--line); box-shadow: var(--shadow-pop); } .pv-callbar__sep { width: 1px; height: var(--pv-h-control-sm); background: var(--line); margin: 0 var(--space-1); } .pv-callbar__status { display: flex; flex-direction: column; padding: 0 var(--space-3) 0 var(--space-2); min-width: 128px; } .pv-callbar__state { font: 600 var(--pv-ts-label) var(--pv-sans); color: var(--pulse-text); } .pv-callbar__where { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } /* CallPanel (compact, sidebar) */ .pv-callpanel { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-top: 1px solid var(--line); background: var(--bg-100); } .pv-callpanel__status { display: flex; flex-direction: column; flex: 1; min-width: 0; } .pv-callpanel__state { font: 600 var(--pv-ts-label) var(--pv-sans); color: var(--pulse-text); } .pv-callpanel__where { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-callpanel__where--open { display: block; max-width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--pv-radius-sm); } .pv-callpanel__where--open:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .pv-callpanel__btns { display: flex; gap: 2px; } /* Segmented (ThemeSwitch uses it) */ .pv-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--pv-radius-md); background: var(--bg-100); border: 1px solid var(--line-strong); } .pv-seg__opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--pv-h-seg); padding: 0 var(--space-3); border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--fg-muted); font: 500 var(--pv-ts-label) var(--pv-sans); cursor: pointer; white-space: nowrap; } .pv-seg__opt--on { background: var(--bg-300); color: var(--fg); font-weight: 600; border-color: var(--line-strong); } .pv-seg__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .pv-seg__opt:disabled { cursor: not-allowed; opacity: .45; } .pv-seg--compact .pv-seg__opt { width: calc(var(--pv-h-seg) + 2px); padding: 0; } /* Reserve the bold width so the selected option doesn't make the row jump */ .pv-seg__txt { display: inline-flex; flex-direction: column; } .pv-seg__txt::after { content: attr(data-text); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; } .pv-seg--sm .pv-seg__opt { height: var(--pv-h-seg-sm); padding: 0 var(--space-2); font-size: var(--pv-fz-caption); } /* Tabs */ /* Never scrolls sideways (a mouse wheel scrolls vertically): tabs that don't fit wrap onto a second row */ .pv-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); border-bottom: 1px solid var(--line); } .pv-tab { flex: none; max-width: 100%; position: relative; min-height: var(--pv-h-row-lg); padding: 6px var(--space-3); display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--fg-muted); font: 500 var(--pv-ts-label) var(--pv-sans); cursor: pointer; text-align: left; overflow-wrap: anywhere; } .pv-tab::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; } .pv-tab--on { color: var(--fg); } .pv-tab--on::after { background: var(--brass); } .pv-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: var(--pv-radius-sm); } /* Form fields */ .pv-field { display: flex; flex-direction: column; gap: 6px; } .pv-field__label { font: 500 var(--pv-ts-label) var(--pv-sans); color: var(--fg); } .pv-field__hint { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } .pv-field__optional { font-weight: 400; color: var(--fg-muted); } /* Form: fields 16 px apart. Field grid: pairs side by side while each column gets ≥ 180 px, otherwise one column – no fixed count, no squeezing (400 px window, phone: one column; 480 px window: two) */ .pv-form { display: flex; flex-direction: column; gap: var(--space-4); } .pv-fieldgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4) var(--space-3); align-items: start; } /* Legal links under the primary action (Datenschutz · Impressum) */ .pv-legal { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 var(--space-2); font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } .pv-legal a { color: inherit; text-decoration: none; border-radius: var(--pv-radius-sm); padding: 4px var(--space-1); } .pv-legal a:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; } .pv-field__error { font: 500 var(--pv-ts-caption) var(--pv-sans); color: var(--live); } .pv-input, .pv-select { height: var(--pv-h-control); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--pv-radius-md); background: var(--bg-300); color: var(--fg); font: 400 var(--pv-ts-control) var(--pv-sans); width: 100%; min-width: 0; } .pv-input::placeholder { color: var(--fg-subtle); } .pv-select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .pv-select--sm { height: var(--pv-h-control-sm); font-size: var(--pv-fz-caption); padding: 0 26px 0 var(--space-2); width: auto; background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; } .pv-field--invalid .pv-input, .pv-field--invalid .pv-select, .pv-input[aria-invalid="true"] { border-color: var(--live); } .pv-input:disabled, .pv-select:disabled { opacity: .45; cursor: not-allowed; } .pv-check { display: flex; align-items: flex-start; gap: var(--space-2); } .pv-check__box { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--brass); cursor: pointer; } .pv-check__label { display: flex; flex-direction: column; font: 400 var(--pv-ts-control-tight) var(--pv-sans); color: var(--fg); cursor: pointer; } .pv-check__hint { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); margin-top: 2px; } /* Modal */ .pv-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--scrim); } .pv-modal--inline { position: relative; inset: auto; z-index: auto; min-height: 100%; } .pv-modal__panel { display: flex; flex-direction: column; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); background: var(--bg-300); border-radius: var(--pv-radius-lg); box-shadow: var(--shadow-pop); padding: var(--space-6); gap: var(--space-5); overflow: hidden; } .pv-modal__panel--wide { max-width: 820px; } .pv-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .pv-modal__title { margin: 0; font: var(--pv-fw-bold) var(--pv-ts-title) var(--pv-display); color: var(--fg); } .pv-modal__close { margin: -6px -10px 0 0; } .pv-modal__body { overflow: auto; padding: 4px; margin: -4px; font: 400 var(--pv-ts-control) var(--pv-sans); color: var(--fg); display: flex; flex-direction: column; gap: var(--space-4); } .pv-modal__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .pv-modal__primary, .pv-modal__secondary { display: flex; gap: var(--space-2); } /* ---- Waiting and progress ---- Every action reacts at once. Motion only without prefers-reduced-motion; with it nothing rotates, slides or shimmers, and each piece still reads as "waiting" (text label, static arc with a slow opacity pulse, hatched bar, flat tint). */ /* Spinner: brass arc on a line-strong track; 16 inline (buttons, rows), 24 default, 32 for an empty dialog or pane */ .pv-spinner { display: inline-block; flex: none; box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--brass); border-right-color: var(--brass); vertical-align: middle; } .pv-spinner--sm { width: 16px; height: 16px; border-width: 2px; } .pv-spinner--lg { width: 32px; height: 32px; border-width: 3px; } .pv-spin { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 var(--pv-ts-label) var(--pv-sans); color: var(--fg-muted); } .pv-spin--stack { flex-direction: column; gap: var(--space-3); text-align: center; } /* On a filled button the arc takes the button's text colour, so it shows on brass, live and neutral alike */ .pv-btn .pv-spinner { border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; border-right-color: currentColor; } /* Loading area: spinner 32 centred, one line below; min-height = the height of the content that replaces it */ .pv-loadarea { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); font: 400 var(--pv-ts-label) var(--pv-sans); color: var(--fg-muted); text-align: center; } /* Busy button: label stays, spinner in the icon's slot, width never shrinks (set by the component), clicks swallowed */ .pv-btn__slot { display: inline-flex; align-items: center; justify-content: center; flex: none; } .pv-btn--busy { cursor: progress; } /* No icon: the side padding gives up exactly the room of spinner + gap, so the width stays */ .pv-btn--busy-bare { padding-left: var(--space-1); padding-right: var(--space-1); } .pv-btn--sm.pv-btn--busy-bare { padding-left: 2px; padding-right: 2px; } .pv-btn--busy.pv-btn--primary, .pv-btn--busy.pv-btn--danger { filter: saturate(.85); } /* Progress bar: 4 px (composer, rows), --lg 8 px (dialogs: update, export). Track bg-400, fill brass, round ends */ .pv-progress { position: relative; width: 100%; height: 4px; border-radius: var(--radius-pill); background: var(--bg-400); overflow: hidden; } .pv-progress--lg { height: 8px; } /* Light: brass on bg-400 is 2.9:1 – a lighter track brings the fill to 3.2:1 against it */ [data-theme="light"] .pv-progress { background: color-mix(in srgb, var(--bg-400) 60%, var(--bg-300)); } .pv-progress__fill { height: 100%; border-radius: inherit; background: var(--brass); box-shadow: var(--glow-brand); } .pv-progress-row { display: flex; align-items: center; gap: var(--space-2); } .pv-progress-row .pv-progress { flex: 1; min-width: 0; } .pv-progress__value { flex: none; min-width: 4ch; text-align: right; font: 500 var(--pv-ts-mono-sm) var(--pv-mono); font-variant-numeric: tabular-nums; color: var(--fg-muted); } /* Unknown total: a 40 % segment travels; reduced motion: a static hatched fill across the track */ .pv-progress--indeterminate .pv-progress__fill { width: 40%; } /* File upload in the composer */ .pv-upload { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); background: var(--bg-300); border: 1px solid var(--line); border-radius: var(--pv-radius-md); font: 400 var(--pv-ts-label) var(--pv-sans); color: var(--fg); } .pv-upload__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-upload__bar { flex: none; } .pv-upload__bar .pv-progress { flex: none; width: 80px; } .pv-upload__cancel .pv-icon { transform: rotate(45deg); } /* Skeleton: known shape, calm shimmer; reduced motion: flat tint */ .pv-skeleton { display: block; background-color: var(--bg-400); border-radius: var(--pv-radius-sm); } .pv-skeleton-lines { display: flex; flex-direction: column; gap: 8px; width: 100%; } .pv-skeleton--text { height: var(--pv-sk-line, 12px); border-radius: var(--radius-pill); } .pv-skeleton--title { height: 16px; } .pv-skeleton--avatar { border-radius: var(--radius-pill); flex: none; } .pv-skeleton--media { width: 100%; max-width: 400px; border-radius: var(--pv-radius-md); } .pv-skeleton-card { display: flex; gap: var(--space-3); max-width: 440px; padding: var(--space-3); background: var(--bg-300); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--pv-radius-md); } .pv-skeleton-card__text { flex: 1; display: flex; flex-direction: column; gap: 8px; } .pv-skeleton--thumb { width: 80px; height: 80px; flex: none; } @media (prefers-reduced-motion: no-preference) { .pv-spinner { animation: pv-spin .9s linear infinite; } .pv-progress--indeterminate .pv-progress__fill { animation: pv-indet 1.4s ease-in-out infinite; } .pv-skeleton { background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--fg) 7%, transparent) 50%, transparent 100%); background-size: 200% 100%; background-repeat: no-repeat; animation: pv-shimmer 1.8s ease-in-out infinite; } } @media (prefers-reduced-motion: reduce) { /* Static arc; the only change is a slow fade, no rotation */ .pv-spinner { animation: pv-fade 2.4s ease-in-out infinite; } .pv-progress--indeterminate .pv-progress__fill { width: 100%; box-shadow: none; background: repeating-linear-gradient(-45deg, var(--brass) 0 4px, transparent 4px 8px); } } @keyframes pv-spin { to { transform: rotate(360deg); } } @keyframes pv-fade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @keyframes pv-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } @keyframes pv-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } } /* ContextMenu */ .pv-menu { display: flex; flex-direction: column; min-width: 200px; padding: var(--space-1); width: max-content; } .pv-menu__item { display: flex; align-items: center; gap: var(--space-2); height: var(--pv-h-row); padding: 0 var(--space-2); border: 0; border-radius: var(--pv-radius-sm); background: transparent; color: var(--fg); font: 500 var(--pv-ts-label) var(--pv-sans); text-align: left; cursor: pointer; } .pv-menu__item:focus-visible { background: var(--bg-400); outline: none; } .pv-menu__item--danger:focus-visible { background: var(--live); color: var(--on-live); } .pv-menu__item--danger { color: var(--live); } .pv-menu__item:disabled { opacity: .45; cursor: not-allowed; } .pv-menu__noicon { width: 16px; flex: none; } .pv-menu__label { flex: 1; } .pv-menu__hint { font: 500 var(--pv-ts-mono-sm) var(--pv-mono); color: var(--fg-subtle); } .pv-menu__item--danger .pv-menu__hint { color: inherit; } .pv-menu__note { max-width: 260px; padding: var(--space-2) var(--space-2) var(--space-1); font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } .pv-menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--line); } /* Notice */ .pv-notice { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 6px var(--space-3); background: var(--bg-300); border-bottom: 1px solid var(--line); font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg); } .pv-notice--warning .pv-icon { color: var(--brass-text); } .pv-notice--info .pv-icon { color: var(--fg-muted); } .pv-notice__text { flex: 1; min-width: 0; } /* KeyField */ .pv-keyfield { display: inline-flex; align-items: center; gap: var(--space-2); } .pv-keycap { display: inline-flex; align-items: center; min-width: 64px; height: var(--pv-h-control-sm); padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--pv-radius-sm); background: var(--bg-300); color: var(--fg); font: 500 var(--pv-ts-mono-sm) var(--pv-mono); white-space: nowrap; } .pv-keycap--empty { color: var(--fg-muted); } .pv-keycap--rec { border-color: var(--focus); color: var(--fg-muted); } /* LogList */ .pv-log { display: flex; flex-direction: column; gap: var(--space-3); } .pv-log__list { list-style: none; margin: 0; padding: 0; } .pv-log__entry { display: grid; grid-template-columns: 56px 64px 1fr; column-gap: var(--space-3); row-gap: 2px; align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); } .pv-log__lvl { justify-content: center; } .pv-log__time { font: 500 var(--pv-ts-mono-sm) var(--pv-mono); color: var(--fg-muted); } .pv-log__msg { font: 500 var(--pv-ts-label) var(--pv-sans); color: var(--fg); } .pv-log__attrs { grid-column: 3; font: 500 var(--pv-ts-mono-sm) var(--pv-mono); color: var(--fg-muted); overflow-wrap: anywhere; } /* BackupKeys */ .pv-backup { display: flex; flex-direction: column; gap: var(--space-4); } .pv-backup__codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); margin: 0; padding: var(--space-4); list-style: none; background: var(--bg-200); border: 1px solid var(--line-strong); border-radius: var(--pv-radius-md); counter-reset: code; } .pv-backup__codes li { counter-increment: code; display: flex; gap: var(--space-2); align-items: baseline; } .pv-backup__codes li::before { content: counter(code); font: 500 var(--pv-ts-mono-sm) var(--pv-mono); color: var(--fg-subtle); width: 12px; } .pv-backup__codes code { font: 500 var(--pv-ts-mono-body) var(--pv-mono); letter-spacing: .04em; color: var(--fg); user-select: all; } .pv-backup__btns { display: flex; gap: var(--space-2); } .pv-backup__finish { display: flex; justify-content: flex-end; } /* PermissionMatrix */ .pv-perms { display: flex; flex-direction: column; } .pv-perms__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); } .pv-perms__name { display: flex; flex-direction: column; min-width: 0; } .pv-perms__label { font: 500 var(--pv-ts-label) var(--pv-sans); color: var(--fg); } .pv-perms__caption { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } .pv-perms .pv-seg { display: grid; grid-template-columns: repeat(3, 1fr); min-width: 300px; } @media (max-width: 520px) { .pv-perms__row { flex-direction: column; align-items: stretch; gap: var(--space-2); } .pv-perms .pv-seg { min-width: 0; } } /* MadeInEurope chip */ .pv-madein { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--fg-muted); font: 500 var(--pv-ts-caption) var(--pv-sans); white-space: nowrap; } .pv-madein__heart { fill: var(--live); flex: none; } @media (prefers-reduced-motion: no-preference) { .pv-madein__heart { animation: pv-beat 1.2s ease-in-out infinite; transform-origin: 50% 55%; } } @keyframes pv-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } /* ---- Phone (Android via Capacitor) ---- Insets: Capacitor ≥ 8.3 injects --safe-area-inset-* because env() is broken in Android WebView < 140; env() is the fallback. Needs . */ :root { --pv-inset-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --pv-inset-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px)); --pv-inset-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); --pv-inset-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px)); --pv-keyboard: 0px; /* the shell writes the keyboard height here (Capacitor Keyboard plugin) */ } .pv-safe-top { padding-top: var(--pv-inset-top); } .pv-safe-bottom { padding-bottom: max(var(--pv-inset-bottom), var(--pv-keyboard)); } .pv-safe-x { padding-left: var(--pv-inset-left); padding-right: var(--pv-inset-right); } /* TopBar */ .pv-topbar { display: flex; align-items: center; gap: var(--space-1); min-height: 56px; padding: var(--pv-inset-top) calc(var(--space-1) + var(--pv-inset-right)) 0 calc(var(--space-1) + var(--pv-inset-left)); background: var(--bg-100); border-bottom: 1px solid var(--line); box-sizing: content-box; height: 56px; } .pv-topbar__spacer { width: 48px; flex: none; } .pv-topbar__title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .pv-topbar__name { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: 600 var(--pv-ts-lead) var(--pv-sans); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-topbar__name .pv-icon { color: var(--fg-muted); } .pv-topbar__sub { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* BottomSheet, ActionSheet */ .pv-sheet { position: fixed; inset: 0; z-index: 110; display: flex; align-items: flex-end; justify-content: center; background: var(--scrim); } .pv-sheet--inline { position: relative; inset: auto; z-index: auto; min-height: 100%; } .pv-sheet__panel { width: 100%; max-width: 640px; max-height: calc(100% - var(--pv-inset-top) - 24px); overflow: auto; display: flex; flex-direction: column; background: var(--bg-300); border-radius: var(--pv-radius-lg) var(--pv-radius-lg) 0 0; box-shadow: var(--shadow-pop); padding: var(--space-2) calc(var(--space-2) + var(--pv-inset-right)) calc(var(--space-3) + var(--pv-inset-bottom)) calc(var(--space-2) + var(--pv-inset-left)); } .pv-sheet__handle { width: 32px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 4px auto var(--space-3); flex: none; } .pv-sheet__title { margin: 0 var(--space-3) var(--space-2); font: var(--pv-fw-bold) var(--pv-ts-title) var(--pv-display); color: var(--fg); } .pv-sheet__body { display: flex; flex-direction: column; } .pv-sheet__quick { display: flex; justify-content: space-between; gap: var(--space-1); padding: 0 var(--space-2) var(--space-2); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); } .pv-sheet__emoji { width: 48px; height: 48px; border: 0; border-radius: var(--radius-pill); background: var(--bg-400); color: var(--fg-muted); font-size: 24px; line-height: 48px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pv-sheet__list { display: flex; flex-direction: column; } .pv-sheet__item { display: flex; align-items: center; gap: var(--space-4); min-height: 52px; padding: 0 var(--space-3); border: 0; border-radius: var(--pv-radius-md); background: transparent; color: var(--fg); font: 500 var(--pv-ts-body) var(--pv-sans); text-align: left; cursor: pointer; } .pv-sheet__item .pv-icon { color: var(--fg-muted); } .pv-sheet__item--danger, .pv-sheet__item--danger .pv-icon { color: var(--live); } .pv-sheet__item:disabled { opacity: .45; } .pv-sheet__item:focus-visible, .pv-sheet__emoji:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .pv-sheet__item:active { background: var(--bg-400); } .pv-sheet__item--danger:active { background: var(--live); color: var(--on-live); } .pv-sheet__item--danger:active .pv-icon { color: var(--on-live); } /* PushToTalkButton */ .pv-ptt { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); border: 0; background: transparent; color: var(--fg); padding: 0; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .pv-ptt__disc { width: 80px; height: 80px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; background: var(--bg-300); border: 2px solid var(--line-strong); color: var(--fg); } .pv-ptt--on .pv-ptt__disc { background: var(--pulse); border-color: var(--pulse); color: var(--on-pulse); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pulse) 25%, transparent), var(--glow-pulse); } .pv-ptt__label { font: 600 var(--pv-ts-label) var(--pv-sans); color: var(--fg-muted); } .pv-ptt--on .pv-ptt__label { color: var(--pulse-text); } .pv-ptt:focus-visible { outline: none; } .pv-ptt:focus-visible .pv-ptt__disc { outline: 2px solid var(--focus); outline-offset: 3px; } /* CallBar docked at the bottom of a phone screen */ .pv-callbar--dock { display: grid; grid-template-columns: repeat(4, 48px) 1fr 64px; row-gap: var(--space-2); column-gap: var(--space-2); width: 100%; border-radius: var(--pv-radius-lg) var(--pv-radius-lg) 0 0; border-width: 1px 0 0; box-shadow: none; padding: var(--space-3) calc(var(--space-4) + var(--pv-inset-right)) calc(var(--space-3) + var(--pv-inset-bottom)) calc(var(--space-4) + var(--pv-inset-left)); } .pv-callbar--dock .pv-callbar__status { grid-column: 1 / -1; padding: 0; min-width: 0; flex-direction: row; gap: var(--space-2); align-items: baseline; } .pv-callbar--dock .pv-callbar__where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-callbar--dock .pv-callbar__sep { display: none; } .pv-callbar--dock .pv-iconbtn--danger { grid-column: 6; } /* Narrow window — width alone says nothing about the device (400 px sign-in window, narrow browser window with a mouse): the dialog stays a dialog and fills the window with a small margin; it scrolls vertically only */ @media (max-width: 699px) { .pv-modal:not(.pv-modal--inline) { padding: var(--space-2); } .pv-modal:not(.pv-modal--inline) .pv-modal__panel { max-width: none; max-height: 100%; padding: var(--space-5); } } @media (max-width: 480px) { .pv-modal__actions { flex-direction: column-reverse; align-items: stretch; } .pv-modal__primary, .pv-modal__secondary { flex-direction: column; } .pv-modal__actions .pv-btn { width: 100%; } } /* Narrow AND touch-only (phone, Android WebView): the dialog becomes a sheet from the bottom */ @media (max-width: 699px) and (hover: none) and (pointer: coarse) { .pv-modal:not(.pv-modal--inline):not(.pv-modal--settings) { align-items: flex-end; padding: 0; } .pv-modal:not(.pv-modal--inline):not(.pv-modal--settings) .pv-modal__panel { border-radius: var(--pv-radius-lg) var(--pv-radius-lg) 0 0; max-height: calc(100% - var(--pv-inset-top) - 24px); padding: var(--space-6) calc(var(--space-5) + var(--pv-inset-right)) calc(var(--space-6) + var(--pv-inset-bottom)) calc(var(--space-5) + var(--pv-inset-left)); } } /* The same presentations on demand, for mockups and tests: .pv-modal--sheet */ .pv-modal--sheet { align-items: flex-end; padding: 0; } .pv-modal--sheet .pv-modal__panel { max-width: none; border-radius: var(--pv-radius-lg) var(--pv-radius-lg) 0 0; max-height: calc(100% - var(--pv-inset-top) - 24px); padding: var(--space-6) calc(var(--space-5) + var(--pv-inset-right)) calc(var(--space-6) + var(--pv-inset-bottom)) calc(var(--space-5) + var(--pv-inset-left)); } /* Narrow phones: segmented controls take the full width, equal options; icons give way to the labels */ @media (max-width: 480px) { .pv-seg:not(.pv-seg--compact) { display: flex; width: 100%; } .pv-seg:not(.pv-seg--compact) .pv-seg__opt { flex: 1 1 0; min-width: 0; padding: 0 var(--space-2); } .pv-seg:not(.pv-seg--compact) .pv-seg__opt .pv-icon { display: none; } } /* ---- Settings dialog ---- Layout by the dialog's own width (split ≥ 640 px, else list → detail), presentation by width AND input. Scrolls vertically only. */ .pv-modal--settings { padding: var(--space-4); } .pv-modal--settings.pv-modal--inline { height: 100%; min-height: 0; } .pv-settings { display: flex; flex-direction: column; width: min(880px, 100%); height: min(720px, 100%); background: var(--bg-300); color: var(--fg); border-radius: var(--pv-radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; } .pv-settings__head { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); flex: none; } .pv-settings__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pv-settings__title { margin: 0; font: var(--pv-fw-bold) var(--pv-ts-title) var(--pv-display); color: var(--fg); overflow-wrap: anywhere; text-shadow: var(--pv-text-glow); } /* The heading only takes focus so screen readers announce the section; it is not a control, so no ring */ .pv-settings__title:focus, .pv-settings__title:focus-visible { outline: none; } .pv-settings__kicker, .pv-settings__scope { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } .pv-settings__close { margin: -4px -6px 0 0; } .pv-settings__close .pv-icon { transform: rotate(45deg); } .pv-settings__back { margin: -4px 0 0 calc(-1 * var(--space-2)); } .pv-settings__main { flex: 1; min-height: 0; display: flex; } .pv-settings__nav { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .pv-settings__nav[hidden] { display: none; } .pv-settings__list { display: flex; flex-direction: column; gap: 2px; } /* Groups in the navigation: entries 2 px apart, groups 24 px apart; the label is the overline style (like the sidebar's „TEXTKANÄLE“) – a heading, not an entry. No line needed; .pv-settings--grouplines adds one as an option. */ .pv-settings__list--grouped { gap: var(--space-5); } .pv-settings__group { display: flex; flex-direction: column; gap: 2px; } .pv-settings__grouplabel { margin: 0; padding: 0 var(--space-3) var(--space-1); font: var(--pv-fw-bold) var(--pv-ts-overline) var(--pv-sans); letter-spacing: var(--pv-overline-track); text-transform: var(--pv-overline-case); color: var(--fg-subtle); overflow-wrap: anywhere; cursor: default; user-select: none; } .pv-settings--grouplines .pv-settings__group + .pv-settings__group { padding-top: var(--space-4); border-top: 1px solid var(--line); } .pv-settings--grouplines .pv-settings__list--grouped { gap: var(--space-4); } .pv-settings__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--pv-h-row-lg); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--pv-radius-md); background: transparent; color: var(--fg-muted); font: 500 var(--pv-ts-control) var(--pv-sans); text-align: left; cursor: pointer; } .pv-settings__item .pv-icon { color: var(--fg-muted); } .pv-settings__item--on { background: var(--bg-400); color: var(--fg); font-weight: 600; } .pv-settings__item--on .pv-icon { color: var(--brass-text); } /* Focus is not selection: the ring only for keyboard focus, drawn inside so the list never clips it */ .pv-settings__item:focus { outline: none; } .pv-settings__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .pv-settings__itemtext { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pv-settings__label { overflow-wrap: anywhere; hyphens: auto; } .pv-settings__summary { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pv-settings__chev { color: var(--fg-subtle); } .pv-settings__foot { flex: none; display: flex; flex-direction: column; gap: 2px; } .pv-settings__about { color: var(--fg-muted); } .pv-settings__panel { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6); } .pv-settings__panel:focus { outline: none; } .pv-settings__heading { margin: 0 0 var(--space-5); font: var(--pv-fw-bold) var(--pv-ts-title) var(--pv-display); color: var(--fg); overflow-wrap: anywhere; } .pv-settings__content { display: flex; flex-direction: column; max-width: 600px; } /* Split: vertical tab list on the left, the section on the right */ .pv-settings--split .pv-settings__main { display: grid; grid-template-columns: clamp(200px, 30%, 260px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .pv-settings--split .pv-settings__nav { grid-column: 1; grid-row: 1; padding: var(--space-4) var(--space-3); background: var(--bg-200); border-right: 1px solid var(--line); } .pv-settings--split .pv-settings__foot { grid-column: 1; grid-row: 2; padding: var(--space-2) var(--space-3) var(--space-3); background: var(--bg-200); border-right: 1px solid var(--line); } .pv-settings--split .pv-settings__panel { grid-column: 2; grid-row: 1 / 3; } /* Stack: the list fills the dialog; a row opens its section; the header's back button returns */ .pv-settings--stack .pv-settings__head { padding: var(--space-4) var(--space-3) var(--space-3) var(--space-5); } .pv-settings--stack.pv-settings--detail .pv-settings__head { padding-left: var(--space-3); } .pv-settings--stack .pv-settings__nav { flex: 1; padding: var(--space-2); } .pv-settings--stack .pv-settings__group { gap: 0; } .pv-settings--stack .pv-settings__grouplabel { padding: var(--space-2) var(--space-3) var(--space-1); } .pv-settings--stack .pv-settings__item { min-height: var(--pv-h-row-xl); } .pv-settings--stack .pv-settings__item--on { background: transparent; font-weight: 500; color: var(--fg); } .pv-settings--stack .pv-settings__item--on .pv-icon { color: var(--fg-muted); } .pv-settings--stack .pv-settings__item--on .pv-settings__chev { color: var(--fg-subtle); } .pv-settings--stack .pv-settings__item { color: var(--fg); } .pv-settings--stack .pv-settings__main { flex-direction: column; } .pv-settings--stack .pv-settings__foot { padding: var(--space-2); border-top: 1px solid var(--line); } .pv-settings--stack .pv-settings__panel { padding: var(--space-5); } /* Groups inside a section: title (+ condition badge), optional description, controls; separated by a line. Any group may be missing (tray, admins, Android, Linux …) – nothing counts on a fixed number */ .pv-setsec { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) 0; border-top: 1px solid var(--line); } .pv-setsec:first-child { padding-top: 0; border-top: 0; } .pv-setsec:last-child { padding-bottom: 0; } .pv-setsec__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .pv-setsec__title { margin: 0; font: 600 var(--pv-ts-body-tight) var(--pv-sans); color: var(--fg); overflow-wrap: anywhere; } .pv-setsec__desc { margin: calc(-1 * var(--space-2)) 0 0; font: 400 var(--pv-ts-label) var(--pv-sans); color: var(--fg-muted); } .pv-setsec__body { display: flex; flex-direction: column; gap: var(--space-4); } .pv-setsec__body .pv-field, .pv-setsec__body .pv-radios { max-width: 420px; } .pv-setrow { display: flex; align-items: flex-start; gap: var(--space-3); } .pv-setrow__main { flex: 1; min-width: 0; } .pv-setrow__aside { flex: none; display: flex; align-items: center; margin-top: -7px; } .pv-check__label { overflow-wrap: anywhere; } /* Range */ .pv-range { display: flex; flex-direction: column; gap: 6px; max-width: 420px; } .pv-range__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .pv-range__value { font: 500 var(--pv-ts-mono-label) var(--pv-mono); color: var(--fg-muted); font-variant-numeric: tabular-nums; } .pv-range__input { width: 100%; height: 24px; margin: 0; accent-color: var(--brass); cursor: pointer; background: transparent; } .pv-range__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--pv-radius-sm); } .pv-range--disabled { opacity: .45; } .pv-range--disabled .pv-range__input { cursor: not-allowed; } /* Narrow window with a mouse: fill the window, keep a sliver of scrim so it still reads as a dialog */ @media (max-width: 699px) { .pv-modal--settings:not(.pv-modal--inline) { padding: var(--space-2); } .pv-modal--settings:not(.pv-modal--inline) .pv-settings { width: 100%; height: 100%; } } .pv-modal--fill { padding: var(--space-2); } .pv-modal--fill .pv-settings { width: 100%; height: 100%; } /* Narrow touch screen (Android): full screen, edge to edge with the system-bar insets */ @media (max-width: 699px) and (hover: none) and (pointer: coarse) { .pv-modal--settings:not(.pv-modal--inline) { padding: 0; } .pv-modal--settings:not(.pv-modal--inline) .pv-settings { border-radius: 0; box-shadow: none; padding: var(--pv-inset-top) var(--pv-inset-right) 0 var(--pv-inset-left); } .pv-modal--settings:not(.pv-modal--inline) .pv-settings { padding-bottom: max(var(--pv-inset-bottom), var(--pv-keyboard)); } } .pv-modal--screen { padding: 0; } .pv-modal--screen .pv-settings { width: 100%; height: 100%; border-radius: 0; box-shadow: none; padding: var(--pv-inset-top) var(--pv-inset-right) 0 var(--pv-inset-left); } .pv-modal--screen .pv-settings { padding-bottom: max(var(--pv-inset-bottom), var(--pv-keyboard)); } /* ---- Screen: full-screen view (sign-in, phone). Head, groups and rows use the settings dialog's metrics ---- */ .pv-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg-300); color: var(--fg); padding: var(--pv-inset-top) var(--pv-inset-right) 0 var(--pv-inset-left); } .pv-screen__head { flex: none; display: flex; align-items: center; gap: var(--space-3); min-height: var(--pv-h-row-xl); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); } .pv-screen__lead { flex: none; display: flex; align-items: center; } .pv-screen__lead .pv-iconbtn--sm { margin-left: calc(-1 * var(--space-2)); } .pv-screen__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pv-screen__title { margin: 0; font: var(--pv-fw-bold) var(--pv-ts-title) var(--pv-display); color: var(--fg); overflow-wrap: anywhere; text-shadow: var(--pv-text-glow); } .pv-screen__title:focus, .pv-screen__title:focus-visible { outline: none; } .pv-screen__caption { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-screen__actions { flex: none; display: flex; align-items: center; gap: var(--space-1); } .pv-screen__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5); } .pv-screen__content { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); } .pv-screen__foot { flex: none; border-top: 1px solid var(--line); background: var(--bg-300); padding: var(--space-3) var(--space-5) calc(var(--space-3) + max(var(--pv-inset-bottom), var(--pv-keyboard))); } .pv-screen__body .pv-screen__content { gap: 0; } /* Groups bring their own spacing and dividing line (as in the settings); anything else before them keeps one step of air */ .pv-screen__body .pv-screen__content > :not(.pv-setsec):not(:last-child) { margin-bottom: var(--space-5); } .pv-screen__body .pv-seg:not(.pv-seg--compact) { display: flex; width: 100%; } .pv-screen__body .pv-seg:not(.pv-seg--compact) .pv-seg__opt { flex: 1 1 0; min-width: 0; } .pv-screen__foot .pv-screen__content { gap: var(--space-2); } .pv-screen__foot .pv-legal { margin-bottom: calc(-1 * var(--space-1)); } .pv-screen__foot .pv-btn { width: 100%; justify-content: center; } .pv-screen__body .pv-field, .pv-screen__body .pv-range { max-width: none; } /* A Notice inside the form is a boxed message, not a bar across the window */ .pv-screen__body .pv-notice { border: 1px solid var(--line-strong); border-radius: var(--pv-radius-md); padding: var(--space-3); align-items: flex-start; font-size: var(--pv-fz-label); line-height: 18px; } /* Text-only action inside the form ("Passwort vergessen?"): a ghost button that hugs the left edge */ .pv-screen__body .pv-btn--ghost.pv-screen__link { align-self: flex-start; padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); color: var(--brass-text); } /* ListRow: the settings list row as a component; boxed = a form control that opens a picker */ .pv-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--pv-h-row-xl); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--pv-radius-md); background: transparent; color: var(--fg); font: 500 var(--pv-ts-control) var(--pv-sans); text-align: left; cursor: pointer; } .pv-row > .pv-icon:first-child { color: var(--fg-muted); } .pv-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pv-row__label { overflow-wrap: anywhere; } .pv-row__summary { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pv-row__chev { color: var(--fg-subtle); } .pv-row--boxed { border: 1px solid var(--line-strong); } .pv-row:focus { outline: none; } .pv-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } .pv-row:active { background: var(--bg-400); } .pv-row:disabled { opacity: .45; cursor: not-allowed; } .pv-row--danger, .pv-row--danger > .pv-icon:first-child, .pv-row--danger .pv-row__chev { color: var(--live); } /* Field extras: autosave feedback next to the label, counter under the field */ .pv-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .pv-field__saved { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--pv-ts-caption) var(--pv-sans); color: var(--pulse-text); } .pv-field__saved:empty { display: none; } .pv-field__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .pv-field__count { flex: none; font: 400 var(--pv-ts-mono-sm) var(--pv-mono); color: var(--fg-subtle); font-variant-numeric: tabular-nums; } .pv-field__count--full { color: var(--fg-muted); } .pv-inputwrap__clear .pv-icon { transform: rotate(45deg); } .pv-inputwrap--empty .pv-input { padding-right: var(--space-3); } /* RadioList: one choice of a few, each with a one-line explanation */ .pv-radios { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pv-radios__legend { padding: 0; margin-bottom: 6px; } .pv-radio { display: flex; align-items: center; gap: var(--space-3); min-height: var(--pv-h-row-xl); padding: var(--space-2) var(--space-3); border-radius: var(--pv-radius-md); cursor: pointer; } .pv-radio__lead { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; color: var(--fg-muted); } .pv-radio__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pv-radio__label { font: 500 var(--pv-ts-label) var(--pv-sans); color: var(--fg); overflow-wrap: anywhere; } .pv-radio--on .pv-radio__label { font-weight: var(--pv-fw-bold); } .pv-radio__hint { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } .pv-radio__input { flex: none; -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; border: 2px solid var(--line-strong); border-radius: 50%; background: transparent; cursor: pointer; } .pv-radio__input:checked { border-color: var(--brass); background: radial-gradient(circle, var(--brass) 0 4px, transparent 4.5px); } .pv-touch .pv-radio__input:checked { background: radial-gradient(circle, var(--brass) 0 5px, transparent 5.5px); } .pv-radio__input:focus { outline: none; } .pv-radio:has(.pv-radio__input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; } .pv-radio:active { background: var(--bg-400); } .pv-radios:disabled .pv-radio { opacity: .45; cursor: not-allowed; } .pv-presencedot { position: relative; display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; } .pv-presencedot .pv-presence { position: relative; right: auto; bottom: auto; width: 12px; height: 12px; border: 0; } /* AvatarPicker: the picture is the button; a camera badge says it can be changed */ .pv-avpick { position: relative; flex: none; display: inline-flex; } .pv-avpick__btn { position: relative; display: inline-flex; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; } .pv-avpick__btn:focus { outline: none; } .pv-avpick__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .pv-avpick__btn:disabled { cursor: default; } .pv-avpick__badge { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--bg-400); color: var(--fg); border: 3px solid var(--bg-300); } .pv-avpick__busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--scrim); } .pv-avpick__hint { margin: 0 var(--space-3) var(--space-2); font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } /* The profile head in the settings area: picture, then the name as others see it, @username below */ .pv-facts { margin: 0; display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 4px var(--space-4); font: 400 var(--pv-ts-label) var(--pv-sans); } .pv-facts dt { color: var(--fg-muted); } .pv-facts dd { margin: 0; color: var(--fg); font-family: var(--pv-mono); overflow-wrap: anywhere; } .pv-profhead { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); } .pv-profhead__names { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pv-profhead__name { font: var(--pv-ts-title) var(--pv-display); font-weight: var(--pv-fw-bold); color: var(--fg); overflow-wrap: anywhere; } .pv-profhead__user { font: 400 var(--pv-ts-mono-sm) var(--pv-mono); color: var(--fg-muted); } .pv-profhead__presence { display: inline-flex; align-items: center; gap: 6px; font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } /* PasswordInput: toggle sits inside the field */ .pv-inputwrap { position: relative; display: flex; } .pv-inputwrap .pv-input { padding-right: 44px; } .pv-inputwrap .pv-iconbtn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); } /* ---- Stage head: channel name + tools ---- */ .pv-stagehead { display: flex; align-items: center; gap: var(--space-3); min-height: var(--pv-h-row-xl); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5); flex-wrap: wrap; } .pv-stagehead__title { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: var(--space-2); font: var(--pv-fw-bold) var(--pv-ts-title) var(--pv-display); color: var(--fg); text-shadow: var(--pv-text-glow); } .pv-stagehead__title > .pv-icon { color: var(--fg-muted); } .pv-stagehead__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-stagehead__tools { display: flex; align-items: center; gap: var(--space-1); flex: none; } .pv-stagehead__sep { width: 1px; height: 24px; background: var(--line); margin: 0 var(--space-2); } .pv-stagehead__tools .pv-seg { margin-right: var(--space-1); } /* ---- SplitPane + splitter: video above, minutes below; each person drags their own split ---- */ .pv-split { --pv-splitter-h: 16px; display: flex; flex-direction: column; min-height: 0; height: 100%; } .pv-split__top { flex: none; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .pv-split--top .pv-split__top { flex: 1; } .pv-split__bottom { flex: 1; min-height: 0; display: flex; flex-direction: column; } .pv-splitter { flex: none; position: relative; height: var(--pv-splitter-h); display: flex; align-items: center; justify-content: center; cursor: row-resize; touch-action: none; outline: none; } /* The track is only there while you work with it; at rest a grip says "drag me" */ .pv-splitter::before { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: transparent; } .pv-splitter__grip { position: relative; width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--line-strong); } .pv-splitter--hover::before { background: var(--line); } .pv-splitter--hover .pv-splitter__grip { width: 56px; background: var(--fg-muted); } .pv-splitter--dragging::before { background: var(--brass); box-shadow: var(--glow-brand); } .pv-splitter--dragging .pv-splitter__grip { width: 56px; background: var(--brass); } .pv-splitter:focus-visible .pv-splitter__grip, .pv-splitter--focus .pv-splitter__grip { width: 56px; background: var(--fg); outline: 2px solid var(--focus); outline-offset: 4px; } .pv-splitter:focus-visible::before, .pv-splitter--focus::before { background: var(--line); } /* ---- Markdown document (live preview / source) ---- */ .pv-md { max-width: 76ch; margin: 0; font: 400 var(--pv-ts-doc) var(--pv-sans); color: var(--fg); caret-color: var(--brass); } .pv-md__line { position: relative; min-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; } .pv-md__h1 { font: var(--pv-fw-bold) var(--pv-ts-doc-h1) var(--pv-display); margin: 0 0 var(--space-1); } .pv-md__h2 { font: var(--pv-fw-bold) var(--pv-ts-doc-h2) var(--pv-display); margin: var(--space-3) 0 var(--space-1); } .pv-md__h3 { font: 600 var(--pv-ts-doc) var(--pv-sans); margin: var(--space-2) 0 0; } /* The first line keeps the panel's inset; an empty line between blocks (Markdown needs one) is a small gap in the formatted view, full height again while the cursor is in it */ .pv-md > .pv-md__line:first-child { margin-top: 0; } .pv-md--rich .pv-md__line:not(.pv-md__line--active):has(> br:only-child) { min-height: 0; height: 8px; overflow: hidden; } .pv-md__mark { color: var(--fg-subtle); font-weight: 400; font-style: normal; } .pv-md__b { font-weight: 700; } .pv-md__i { font-style: italic; } .pv-md__code { font: 400 var(--pv-ts-code) var(--pv-mono); background: var(--bg-400); border-radius: 4px; padding: 0 3px; } .pv-md__link { color: var(--brass-text); text-decoration: underline; text-underline-offset: 2px; } .pv-md__li, .pv-md__task, .pv-md__ol { padding-left: 0; } .pv-md__bullet { display: inline-block; width: 20px; color: var(--fg-muted); } .pv-md__num { display: inline-block; min-width: 20px; margin-right: 4px; color: var(--fg-muted); font-variant-numeric: tabular-nums; } input.pv-md__task { width: 16px; height: 16px; margin: 0 8px 0 2px; vertical-align: -3px; accent-color: var(--brass); cursor: pointer; } .pv-md__done { color: var(--fg-muted); } .pv-md__done > span:not(.pv-md__caret) { text-decoration: line-through; text-decoration-color: var(--fg-subtle); } .pv-md__quote { border-left: 3px solid var(--line-strong); padding-left: var(--space-3); color: var(--fg-muted); } .pv-md--source { font: 400 var(--pv-ts-code-block) var(--pv-mono); max-width: 88ch; } .pv-md--source .pv-md__line { min-height: 22px; } .pv-md--source .pv-md__mark { color: var(--fg-muted); } .pv-md--source .pv-md__srchead { font-weight: 700; } .pv-md__placeholder { color: var(--fg-subtle); } /* Carets: own = brass, others = their peer colour with a name flag above; selection = peer colour at 28 % */ .pv-md__caret { position: relative; display: inline; } .pv-md__caret::before { content: ""; position: absolute; left: -1px; top: 0.05em; width: 2px; height: 1.3em; border-radius: 1px; background: var(--pv-peer, var(--brass)); } .pv-md__flag { position: absolute; left: -1px; bottom: 1.15em; z-index: 2; padding: 0 5px; border-radius: 4px 4px 4px 0; background: var(--pv-peer); color: var(--on-peer); font: 600 var(--pv-ts-micro) var(--pv-sans); white-space: nowrap; pointer-events: none; font-style: normal; text-decoration: none; } .pv-md__sel { background: color-mix(in srgb, var(--pv-peer) 28%, transparent); border-radius: 2px; } .pv-md__caret--stale { opacity: .5; } .pv-md__caret--stale .pv-md__flag::after { content: " …"; } /* ---- Minutes panel ---- */ .pv-minutes { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--bg-300); border: 1px solid var(--line); border-radius: var(--pv-radius-lg); overflow: hidden; } .pv-minutes__head { flex: none; display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); } .pv-minutes__icon { color: var(--fg-muted); } .pv-minutes__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pv-minutes__title { margin: 0; font: 600 var(--pv-ts-control) var(--pv-sans); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-minutes__caption { font: 400 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-minutes__status { flex: none; font-size: var(--pv-fz-caption); } .pv-minutes__actions { flex: none; display: flex; align-items: center; gap: var(--space-1); } .pv-minutes__menuwrap { position: relative; } .pv-minutes__bodywrap { position: relative; flex: 1; min-height: 0; display: flex; } .pv-minutes__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4); } .pv-minutes__loading { max-width: 76ch; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); } .pv-minutes--compact .pv-minutes__head { padding-left: var(--space-3); gap: var(--space-2); } .pv-minutes--compact .pv-minutes__body { padding: var(--space-4); } /* Writers: small avatars, ring in their peer colour (own = brass) */ .pv-writers { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; flex: none; } .pv-writers__one { display: flex; margin-left: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-300), 0 0 0 4px var(--pv-peer); } .pv-writers__one:first-child { margin-left: 0; } .pv-writers__one + .pv-writers__one { margin-left: 4px; } .pv-writers .pv-avatar { width: var(--pv-avatar-sm); height: var(--pv-avatar-sm); } .pv-writers__more { margin-left: var(--space-2); font: 500 var(--pv-ts-caption) var(--pv-sans); color: var(--fg-muted); } /* Someone writes outside the visible part: a chip at the edge, click scrolls there */ .pv-peerjump { position: absolute; right: var(--space-4); z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: var(--pv-h-control-sm); padding: 0 var(--space-2) 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--bg-100); color: var(--fg); font: 500 var(--pv-ts-caption) var(--pv-sans); cursor: pointer; box-shadow: var(--shadow-pop); } .pv-peerjump--up { top: var(--space-2); } .pv-peerjump--down { bottom: var(--space-3); } .pv-peerjump__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pv-peer); } .pv-peerjump:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Phone: Markdown keys above the keyboard */ .pv-mdkeys { display: flex; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-top: 1px solid var(--line); background: var(--bg-100); } .pv-mdkeys .pv-btn { font-family: var(--pv-mono); min-width: 48px; } /* Formatted view: toolbar under the minutes head (or docked above the phone keyboard), link editor, what it can't show */ .pv-fmt { flex: none; display: flex; align-items: center; gap: 2px; min-height: var(--pv-h-toolbar); padding: 0 var(--space-3); border-bottom: 1px solid var(--line); background: var(--bg-300); } .pv-fmt > *, .pv-fmt__wrap > * { flex: none; } .pv-fmt__wrap { position: relative; display: flex; } .pv-fmt__sep { flex: none; width: 1px; height: 20px; margin: 0 var(--space-1); background: var(--line); } .pv-fmt__block { min-width: 136px; height: var(--pv-h-iconbtn-sm); justify-content: space-between; padding: 0 var(--space-2) 0 var(--space-3); font-size: var(--pv-fz-label); color: var(--fg); } .pv-fmt__block[aria-expanded="true"] { background: var(--bg-400); } .pv-fmt__blocklabel { flex: 1; text-align: left; white-space: nowrap; } .pv-fmt .pv-iconbtn--sm[aria-pressed="true"] { background: var(--brass-tint); color: var(--brass-text); box-shadow: inset 0 -2px 0 var(--brass); } .pv-fmt .pv-iconbtn--sm[aria-expanded="true"] { background: var(--bg-400); color: var(--fg); box-shadow: none; } .pv-fmt--dock { justify-content: space-between; padding: var(--space-1) var(--space-2); border-bottom: 0; border-top: 1px solid var(--line); background: var(--bg-100); } .pv-fmt--compact:not(.pv-fmt--dock) .pv-fmt__wrap--end { margin-left: auto; } .pv-menu__item--checked { color: var(--fg); } .pv-menu__check { flex: none; color: var(--brass-text); } .pv-fmt__opt--h1 { font: var(--pv-fw-bold) var(--pv-ts-h3) var(--pv-display); } .pv-fmt__opt--h2 { font: var(--pv-fw-bold) var(--pv-ts-h4) var(--pv-display); } .pv-fmt__opt--h3 { font: 600 var(--pv-ts-label) var(--pv-sans); } .pv-linkedit__pop { width: 340px; } .pv-linkedit { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); } .pv-linkedit input[type="url"] { font-family: var(--pv-mono); font-size: var(--pv-fz-label); } .pv-linkedit__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); } .pv-linkedit__gap { flex: 1; } .pv-linkedit__remove { margin-left: calc(-1 * var(--space-2)); } .pv-md--rich .pv-md__raw { font: 400 var(--pv-ts-code-block) var(--pv-mono); background: var(--bg-400); padding: 0 var(--space-2); } .pv-md--rich .pv-md__raw + .pv-md__line:not(.pv-md__raw) { margin-top: var(--space-1); } /* Touch: every target at least 48 × 48 (Android), without changing the visual size where a larger box would crowd the layout */ @media (pointer: coarse) { .pv-btn { height: var(--size-touch); padding: 0 var(--space-5); font-size: 15px; } .pv-btn--sm { height: 40px; } .pv-iconbtn--sm { width: var(--size-touch); height: var(--size-touch); } .pv-input, .pv-select { height: var(--size-touch); font-size: 16px; } /* 16px: no zoom-in on focus */ .pv-composer__input { font-size: 16px; } .pv-channel { min-height: var(--size-touch); font-size: 15px; } .pv-member { min-height: 56px; } .pv-tab { min-height: var(--size-touch); } .pv-menu__item { height: var(--size-touch); font-size: 15px; } .pv-seg__opt { height: 40px; } .pv-check__box { width: 22px; height: 22px; } .pv-radio__input { width: 22px; height: 22px; } .pv-radio__input:checked { background: radial-gradient(circle, var(--brass) 0 5px, transparent 5.5px); } .pv-radio { min-height: 56px; } .pv-check { min-height: var(--size-touch); align-items: center; } .pv-split { --pv-splitter-h: 24px; } input.pv-md__task { width: 20px; height: 20px; } .pv-legal a { display: inline-flex; align-items: center; min-height: var(--size-touch); padding: 0 var(--space-2); } .pv-settings__item { min-height: var(--size-touch); font-size: 15px; } .pv-row { font-size: 15px; } .pv-inputwrap .pv-input { padding-right: 52px; } .pv-inputwrap .pv-iconbtn { right: 0; } .pv-range__input { height: var(--size-touch); } .pv-setrow__aside { margin-top: 0; } .pv-emojipicker { grid-template-columns: repeat(8, 40px); } .pv-emojipicker__cell { width: 40px; height: 40px; font-size: 24px; line-height: 40px; } .pv-reaction, .pv-reply, .pv-keycap { position: relative; } .pv-reaction { height: 32px; } .pv-reaction::after, .pv-reply::after { content: ""; position: absolute; inset: -8px -2px; } /* Long-press opens the ActionSheet (with "Text kopieren"), so the message row does not start a text selection */ .pv-msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .pv-fmt { min-height: 56px; } .pv-fmt__block { height: var(--size-touch); font-size: 15px; } .pv-fmt--dock { min-height: 0; } } /* Same touch sizes on demand: .pv-touch on a wrapper (design mockups, tablets with a keyboard, tests) */ .pv-touch .pv-btn { height: var(--size-touch); padding: 0 var(--space-5); font-size: 15px; } .pv-touch .pv-btn--sm { height: 40px; } .pv-touch .pv-iconbtn--sm { width: var(--size-touch); height: var(--size-touch); } .pv-touch .pv-input, .pv-touch .pv-select { height: var(--size-touch); font-size: 16px; } .pv-touch .pv-composer__input { font-size: 16px; } .pv-touch .pv-channel { min-height: var(--size-touch); font-size: 15px; } .pv-touch .pv-member { min-height: 56px; } .pv-touch .pv-tab { min-height: var(--size-touch); } .pv-touch .pv-menu__item { height: var(--size-touch); font-size: 15px; } .pv-touch .pv-seg__opt { height: 40px; } .pv-touch .pv-check__box { width: 22px; height: 22px; } .pv-touch .pv-radio__input { width: 22px; height: 22px; } .pv-touch .pv-radio { min-height: 56px; } .pv-touch .pv-check { min-height: var(--size-touch); align-items: center; } .pv-touch input.pv-md__task { width: 20px; height: 20px; } .pv-touch .pv-legal a { display: inline-flex; align-items: center; min-height: var(--size-touch); padding: 0 var(--space-2); } .pv-touch .pv-settings__item { min-height: var(--size-touch); font-size: 15px; } .pv-touch .pv-row { font-size: 15px; } .pv-touch .pv-inputwrap .pv-input { padding-right: 52px; } .pv-touch .pv-inputwrap .pv-iconbtn { right: 0; } .pv-touch .pv-range__input { height: var(--size-touch); } .pv-touch .pv-setrow__aside { margin-top: 0; } .pv-touch .pv-emojipicker { grid-template-columns: repeat(8, 40px); } .pv-touch .pv-emojipicker__cell { width: 40px; height: 40px; font-size: 24px; line-height: 40px; } .pv-touch .pv-reaction, .pv-touch .pv-reply, .pv-touch .pv-keycap { position: relative; } .pv-touch .pv-reaction { height: 32px; } .pv-touch .pv-reaction::after, .pv-touch .pv-reply::after { content: ""; position: absolute; inset: -8px -2px; } .pv-touch .pv-msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .pv-touch .pv-fmt { min-height: 56px; } .pv-touch .pv-fmt__block { height: var(--size-touch); font-size: 15px; } .pv-touch .pv-fmt--dock { min-height: 0; } /* ---- Glow (Neon) ---- The glow-* tokens are zero shadows in Dark and Light and neon glows in Neon, so these rules apply in every theme and only show in Neon. Static box-shadows only: no animated glow, no filter/backdrop-filter (GPU cost next to a game). */ :root { --pv-text-glow: none; } [data-theme="neon"] { --pv-text-glow: 0 0 12px color-mix(in srgb, var(--brass) 55%, transparent); } .pv-btn--primary, .pv-badge--count { box-shadow: var(--glow-brand); } .pv-btn--danger, .pv-iconbtn--danger, .pv-badge--live { box-shadow: var(--glow-live); } .pv-iconbtn--on, .pv-tile--speaking { box-shadow: var(--glow-pulse); } .pv-avatar--speaking .pv-avatar__face { box-shadow: 0 0 0 2px var(--bg-200), 0 0 0 4px var(--pulse), var(--glow-pulse); } .pv-btn:disabled { box-shadow: none; } /* Text glow only on large display type (≥ 20px); body text stays crisp */ .pv-serverhead__name, .pv-modal__title, .pv-profile__name { text-shadow: var(--pv-text-glow); } /* Opt-in backdrop for empty states, onboarding and the call stage without streams: an 80s grid in Neon, plain elsewhere */ .pv-backdrop { background-color: var(--bg-200); } [data-theme="neon"] .pv-backdrop { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; } /* More contrast asked for: glows blur edges, so drop them */ @media (prefers-contrast: more) { [data-theme="neon"] { --glow-brand: 0 0 0 rgba(0, 0, 0, 0); --glow-pulse: 0 0 0 rgba(0, 0, 0, 0); --glow-live: 0 0 0 rgba(0, 0, 0, 0); --pv-text-glow: none; } [data-theme="neon"] .pv-backdrop { background-image: none; } } /* ---- Hover: only where a real pointer can hover ---- */ @media (hover: hover), (pointer: fine), (pointer: none) { .pv-srvrail__btn:hover { background: var(--bg-400); } .pv-srvrail__item--add .pv-srvrail__btn:hover { color: var(--fg); } .pv-srvrail__btn:hover ~ .pv-srvrail__tip { display: flex; } .pv-callpanel__where--open:hover { color: var(--fg); text-decoration: underline; } .pv-btn--primary:hover { filter: brightness(1.06); } .pv-btn--secondary:hover { background: var(--bg-400); } .pv-btn--ghost:hover { background: var(--bg-400); color: var(--fg); } .pv-btn:disabled:hover { filter: none; background: transparent; } .pv-btn--primary:disabled:hover { background: var(--brass); } .pv-iconbtn:hover { background: var(--bg-400); } .pv-iconbtn--sm:hover { color: var(--fg); } .pv-iconbtn--sm-danger:hover { color: var(--live); } .pv-iconbtn--off:hover { background: var(--fg); filter: brightness(.9); } .pv-iconbtn--on:hover { background: var(--pulse); filter: brightness(1.06); } .pv-iconbtn--danger:hover { background: var(--live); filter: brightness(1.06); } .pv-channel:hover { background: var(--bg-400); color: var(--fg); } .pv-channel:hover .pv-presence { border-color: var(--bg-400); } .pv-serverhead:hover, .pv-member:hover { background: var(--bg-400); } .pv-member:hover .pv-presence { border-color: var(--bg-400); } .pv-msg:hover { background: var(--bg-300); } .pv-msg--mention:hover { background: var(--brass-tint); } .pv-msg:hover .pv-msg__gtime { visibility: visible; } .pv-msg:hover .pv-msg__actions { display: block; } .pv-reply:hover .pv-reply__text { color: var(--fg); } .pv-msg__authorbtn:hover { text-decoration: underline; text-underline-offset: 3px; } .pv-legal a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .pv-splitter:hover::before { background: var(--line); } .pv-splitter:hover .pv-splitter__grip { width: 56px; background: var(--fg-muted); } .pv-splitter--dragging:hover .pv-splitter__grip { background: var(--brass); } .pv-splitter--dragging:hover::before { background: var(--brass); } .pv-peerjump:hover { background: var(--bg-400); } .pv-reaction:hover { border-color: var(--fg-muted); } .pv-reaction--mine:hover { border-color: var(--brass); } .pv-emojipicker__cell:hover { background: var(--bg-400); } .pv-linkpreview:hover { border-left-color: var(--brass); } .pv-stream:hover .pv-stream__ctlwrap { display: block; } .pv-seg__opt:hover { color: var(--fg); } .pv-seg__opt:disabled:hover { color: var(--fg-muted); } .pv-tab:hover { color: var(--fg); } .pv-settings__item:hover { background: var(--bg-400); color: var(--fg); } .pv-row:hover { background: var(--bg-400); } .pv-radio:hover { background: var(--bg-400); } .pv-avpick__btn:not(:disabled):hover .pv-avpick__badge { background: var(--fg); color: var(--bg-300); } .pv-settings--split .pv-settings__item--on:hover { background: var(--bg-400); } .pv-menu__item:hover { background: var(--bg-400); } .pv-menu__item--danger:hover { background: var(--live); color: var(--on-live); } .pv-menu__item:disabled:hover { background: transparent; } .pv-fmt .pv-iconbtn--sm[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--brass) 22%, var(--bg-300)); color: var(--brass-text); } .pv-fmt .pv-iconbtn--sm:disabled:hover { background: transparent; color: var(--fg-muted); } } @media (prefers-reduced-motion: no-preference) { .pv-avatar__face, .pv-tile, .pv-btn, .pv-iconbtn, .pv-channel, .pv-seg__opt, .pv-tab, .pv-settings__item, .pv-row, .pv-splitter__grip, .pv-menu__item, .pv-member, .pv-reaction, .pv-linkpreview { transition: box-shadow .12s ease-out, outline-color .12s ease-out, background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out; } /* Theme change: cross-fade surfaces instead of a hard cut */ body { transition: background-color .2s ease-out, color .2s ease-out; } }