/* ───────────────────────── Apps ───────────────────────── * Fixes for apps whose own styles assume a coloured primary. Same scope as components.css. */ /* Mail: the account setup page paints a radial gradient of the primary colour (black or white here) */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail .setup--themed { background-image: none; background-color: var(--ds-sidebar); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail .setup--themed > * { border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-sm); } /* Mail with no message open: a radial gradient drawn from the primary colour, near-black here, so a grey-to-black blob filled half the screen */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail .app-content-details.no-message-selected { background-image: none !important; } /* Message list: the unread marker was a 20px solid circle on every row */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail .list-item-content__inner__details__extra__indicator :is(svg, .material-design-icon) { width: 10px !important; height: 10px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail .envelope .list-item-content__inner__details__extra__indicator { display: inline-grid; place-items: center; color: var(--ds-foreground); } /* Subjects, previews, names and bodies are the e-mail itself: their digits stay as written («Q3», not «Q۳») */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail :is(.envelope__subtitle__subject, .envelope__preview-text, .envelope__recipient-text, #mail-thread-header h2, .mail-message-body) { --font-face: var(--ds-font-input); font-family: var(--ds-font-input); } /* Mail forces subjects left-to-right and previews right-to-left whatever their language: a Persian subject then ran LTR and an English preview started with its «…». Each takes its own direction and keeps to the column's edge. */ body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) .app-mail :is(.envelope__subtitle__subject, .envelope__preview-text, #mail-thread-header h2) { direction: rtl; unicode-bidi: plaintext; text-align: right; } /* Message: larger body text; the reply button under the start of the text, not at the far end */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail .mail-message-body { font-size: 15px; line-height: 1.75; } /* plain-text mail: each line takes its own direction (an English line in a Persian UI read «,Hi» / «.Attached …») */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail #message-container { unicode-bidi: plaintext; text-align: start; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail .reply-buttons { justify-content: flex-start !important; gap: 8px; margin-top: 8px; } /* Composer: «Cc/Bcc» hung 11px above the recipient field, out of line with its placeholder */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail .copy-toggle, body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .floating-composer .copy-toggle { top: 50% !important; translate: 0 -50%; min-height: 28px !important; height: 28px !important; color: var(--ds-muted-foreground) !important; font-size: 12.5px; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-mail .reply-buttons__notsuggested { margin-inline-start: 0 !important; } /* Zaman: the start button's icon is white whatever the primary is, invisible on the light dark-theme primary */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .hero__btn--start { color: var(--color-primary-element-text); } /* ───────── Talk: chat ───────── * Nextcloud tints own messages with the primary colour, which in this neutral palette came out the same grey as * everyone else's, and gives bubbles 4px of padding and 14px text. Here: incoming messages outlined, own messages * filled, roomier bubbles with Talk's small «tail» corner kept, larger Persian-friendly text, quiet quotes, code * left-to-right in a mono font, pill reactions and mentions, capped image previews, a floating hover toolbar. */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message--sided .message-body { padding: 6px 12px 4px !important; border: 1px solid transparent !important; border-radius: 14px !important; font-size: 15px; line-height: 1.7; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message--sided.incoming .message-body { --message-body-hover: var(--ds-muted); border-color: var(--ds-border) !important; background-color: var(--ds-background) !important; border-start-start-radius: 4px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message--sided.outgoing .message-body { --message-body-hover: var(--ds-accent-hover); background-color: var(--ds-muted) !important; border-start-end-radius: 4px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .incoming .messages-bubble > li:not(:last-child) .message-body { border-end-start-radius: 4px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .outgoing .messages-bubble > li:not(:last-child) .message-body { border-end-end-radius: 4px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message--sided .message-main__text { padding: 0 !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message--sided .message-main__info { font-size: 11px; color: var(--ds-muted-foreground); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .messages__author { color: var(--ds-muted-foreground) !important; font-size: 12.5px; font-weight: 500; } /* quotes (replies): a bar at the start instead of a box in a box */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .quote { padding: 4px 10px !important; border: 0 !important; border-inline-start: 3px solid var(--ds-border-strong) !important; border-radius: 6px !important; background-color: rgba(var(--ds-shadow-rgb), 0.04) !important; font-size: 13.5px; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .quote__main-author-name { color: var(--ds-foreground); } /* code: always left-to-right, mono, its own surface */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .rich-text__code-block { direction: ltr; text-align: left; margin-block: 4px !important; border-radius: 8px; background-color: rgba(var(--ds-shadow-rgb), 0.05) !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .rich-text__code-block :is(pre, code) { background-color: transparent !important; font-family: var(--ds-font-mono); font-size: 13px; line-height: 1.6; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .rich-text__code-block pre { padding: 8px 12px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message :not(pre) > code { direction: ltr; unicode-bidi: isolate; padding: 1px 5px; border-radius: 4px; background-color: rgba(var(--ds-shadow-rgb), 0.06); font-family: var(--ds-font-mono); font-size: 0.86em; } /* reactions: pills; the ones you added softly highlighted instead of solid black */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .reaction-button--trigger { --button-size: 26px; min-height: 26px !important; height: 26px; padding: 0 8px !important; border: 1px solid var(--ds-border) !important; border-radius: 999px !important; background-color: var(--ds-background) !important; color: var(--ds-foreground) !important; font-size: 13px; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .reaction-button--trigger.button-vue--primary { border-color: var(--ds-border-strong) !important; background-color: var(--ds-accent) !important; font-weight: 600; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .reaction-button--trigger:hover { background-color: var(--ds-accent) !important; } /* mentions */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .mention-chip { height: 22px !important; padding-inline: 2px 8px !important; border: 1px solid var(--ds-border); border-radius: 999px !important; background-color: var(--ds-background) !important; color: var(--ds-foreground) !important; font-size: 13px !important; vertical-align: middle; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .mention-chip__icon { width: 18px !important; height: 18px !important; } /* files and images */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .file-preview { max-width: 280px; border-radius: 10px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .file-preview__image.preview { width: auto !important; height: auto !important; max-width: 280px !important; max-height: 240px !important; border-radius: 10px !important; object-fit: cover; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .file-preview__image.mimeicon { width: 64px !important; height: 64px !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .file-preview .image-container:has(> .mimeicon) { width: 64px !important; height: 64px !important; } /* polls */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .poll-card { border-width: 1px !important; border-color: var(--ds-border) !important; border-radius: 10px !important; box-shadow: var(--ds-shadow-xs); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .poll-card:is(:hover, :focus) { border-color: var(--ds-border-strong) !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message .poll-card:focus-visible { box-shadow: 0 0 0 2px var(--ds-background), 0 0 0 4px var(--ds-focus) !important; } /* the toolbar shown on hover (react, reply, more) */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .message-buttons-bar { padding: 2px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md) !important; background-color: var(--ds-popover) !important; box-shadow: var(--ds-shadow-sm) !important; } /* ───────── Talk: conversation sidebar ───────── * Title, tabs and participant rows on one type scale; rows highlight; the role («مدیر») muted and smaller. */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-sidebar-header .app-sidebar-header__mainname, body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-sidebar-header .content__name { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.01em; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_sidebarTabsButton_"] { font-size: 13px; color: var(--ds-muted-foreground) !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) [class*="_sidebarTabsButton_selected_"] { color: var(--ds-foreground) !important; font-weight: 600; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-sidebar li.participant .list-item { min-height: 48px; padding-inline: 8px !important; border-radius: var(--ds-radius-md); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-sidebar li.participant .list-item:hover { background-color: var(--ds-accent); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .participant__user-name { font-weight: 500; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .participant__user-badge { margin-inline-start: 4px; color: var(--ds-muted-foreground); font-size: 12px; font-weight: 400; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .participant--offline .participant__user-name { color: var(--ds-muted-foreground); } /* File names (shared items, file rows): base name and extension are two flex items, so in RTL a Latin name came out as «docx.Project plan». One inline run whose direction follows the name itself. */ body[data-themes] .file-preview .name-container { display: block !important; overflow: hidden; unicode-bidi: plaintext; text-align: start; text-overflow: ellipsis; white-space: nowrap; } body[data-themes] .file-preview .name-container > * { display: inline !important; /* Talk isolates the base name, which hides its letters from the direction check: «185313_20260717» was then laid out right-to-left as «20260717_185313» */ unicode-bidi: normal !important; } body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) .file-preview .name-container { text-align: right; } /* ───────── Talk: sidebar header and shared items ───────── * One-to-one conversations show the other person on top: an 89px square avatar with the name and local time pinned to * the top of a tall empty block. Here: a 56px round avatar with name and time beside it, centred, and a divider. * Shared items: a gapped grid of rounded thumbnails, compact file rows that highlight, quiet section titles and * «show all» link. */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .app-sidebar-header .content__scroller { align-items: center; min-height: 0 !important; border-bottom: 1px solid var(--ds-border); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .app-sidebar-header .content__image-wrapper { padding: 12px !important; padding-inline-end: 4px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .app-sidebar-header .content__image { width: 56px !important; height: 56px !important; max-height: none !important; border-radius: 50% !important; object-fit: cover; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .app-sidebar-header .content__header { justify-content: center; gap: 2px; padding-block: 12px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .app-sidebar-header .content__name { font-size: 16px !important; line-height: 24px !important; min-height: 0 !important; height: auto !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .app-sidebar-header .content__info { padding: 0 !important; color: var(--ds-muted-foreground); font-size: 13px; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .app-sidebar-header .content__info-row { gap: 4px; align-items: center; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items-tab__section { margin-top: 16px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items-tab .app-navigation-caption { min-height: 0 !important; height: auto !important; margin: 0 0 6px !important; padding-inline: 4px !important; color: var(--ds-muted-foreground) !important; font-size: 12.5px !important; font-weight: 500 !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items__media { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; gap: 6px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items__media .file-preview { aspect-ratio: 1; width: 100% !important; height: auto !important; overflow: hidden; border-radius: 8px !important; background-color: var(--ds-muted); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items__media .file-preview :is(.image-container, img) { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; object-fit: cover; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items-tab__more-button { min-height: 30px !important; margin-top: 6px !important; color: var(--ds-muted-foreground) !important; font-size: 13px; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items-tab__more-button .button-vue__text { font-weight: 500 !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items__list { gap: 1px; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items__list .file-preview--row-layout { align-items: center; gap: 10px; min-height: 36px; padding: 4px 8px !important; border-radius: var(--ds-radius-md) !important; font-size: 14px; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items__list .file-preview--row-layout:hover { background-color: var(--ds-accent); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .shared-items__list .file-preview--row-layout .image-container { flex: 0 0 auto; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk .file-preview .name-container__extension { color: var(--ds-muted-foreground); } /* ───────── Talk: sides and centring in RTL ───────── * Talk mirrors the whole chat in RTL, so your own messages sat on the left and everyone else's on the right. Persian * chat apps keep yours on the right and the others on the left (with their avatar): the message rows are laid out * left-to-right, and everything inside a bubble stays right-to-left. The bubble itself stays LTR so its «tail» corner * is on the sender's side. * System messages («you joined the call») were centred together with their hidden time (shown on hover, 102px wide), * so the text sat ~50px off centre; the time now floats at the end of the row. */ body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) li.wrapper:has(.message--sided) { direction: ltr; } body[data-themes]:is([dir="rtl"], :lang(fa), :lang(ar), :lang(he), :lang(ur), :lang(ps), :lang(ug)) li.wrapper:has(.message--sided) :is(.message-main--sided, .message-buttons-bar, .message-body__reactions, [class*="reactions"]) { direction: rtl; } body[data-themes] .message-body.system { position: relative; } body[data-themes] .message-main--compressed-system > .message-main__info { position: absolute !important; top: 50%; inset-inline-end: 12px; translate: 0 -50%; } /* ───────── Talk: in a call ───────── * The call is a dark stage in both themes (video reads best on dark), in the design system's neutrals instead of * Talk's 70% black over a blurred page (grey in light mode, pure black in dark). Controls are quiet translucent * buttons with the design system's radius; split buttons (camera / mic + device menu) read as one control; leaving * is the destructive colour at the same height as everything else. The timer was reversed in RTL («58 : 01» for * 01:58). Names on the tiles sit on a small dark label instead of a text shadow. * All selectors are Talk's public class names; if Talk renames one, that piece just falls back to Talk's own look. */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container { --ds-call-stage: #171717; --ds-call-tile: #262626; --ds-call-control: rgba(255, 255, 255, 0.1); --ds-call-control-hover: rgba(255, 255, 255, 0.18); --ds-call-control-text: #fafafa; --ds-call-label: rgba(10, 10, 10, 0.6); background-color: var(--ds-call-stage) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--ds-call-control-text); } body[data-theme-dark]:not([data-theme-dark-highcontrast]) #call-container { --ds-call-stage: #0a0a0a; --ds-call-tile: #171717; } @media (prefers-color-scheme: dark) { body[data-theme-default] #call-container { --ds-call-stage: #0a0a0a; --ds-call-tile: #171717; } } /* Under the stage (the app content Talk makes transparent in a call) */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .content.in-call .app-content { background-color: var(--ds-call-stage, #171717) !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .app-talk:has(#call-container) .app-content { background-color: #171717 !important; } body[data-theme-dark]:not([data-theme-dark-highcontrast]) .app-talk:has(#call-container) .app-content { background-color: #0a0a0a !important; } /* Tiles */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.video-container, .localVideoContainer) { background-color: var(--ds-call-tile); border-radius: var(--ds-radius-lg); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.video-container, .localVideoContainer, .videoWrapper, video.video), body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.video-container, .localVideoContainer)::after { border-radius: var(--ds-radius-lg) !important; } /* Behind a camera that is off Talk lays 30% white in dark mode (a grey slab): the tile colour shows instead */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .video-background { background-color: transparent !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.video-container, .localVideoContainer).speaking::after { box-shadow: inset 0 0 0 2px #fafafa, inset 0 0 0 4px rgba(10, 10, 10, 0.35); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .video-container.hover::after { box-shadow: inset 0 0 0 2px rgba(250, 250, 250, 0.7); } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .participant-name { flex: 0 1 auto; padding: 2px 8px; border-radius: var(--ds-radius-sm); background-color: var(--ds-call-label); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fafafa; font-size: 13px; line-height: 20px; text-shadow: none; filter: none; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .media-indicators .button-vue { color: #fafafa !important; } /* Controls: the call bar, the bar above the stage and the stripe / page arrows */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.bottom-bar, .top-bar) .button-vue--tertiary:not(.button-vue--tertiary-no-background), body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .top-bar--in-call .button-vue--tertiary, body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.stripe--collapse, .grid-navigation) { background-color: var(--ds-call-control, rgba(255, 255, 255, 0.1)) !important; color: #fafafa !important; border-radius: var(--ds-radius-md); opacity: 1; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.bottom-bar, .top-bar) .button-vue--tertiary:not(.button-vue--tertiary-no-background):is(:hover, :focus-visible):not(:disabled), body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .top-bar--in-call .button-vue--tertiary:is(:hover, :focus-visible):not(:disabled), body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.stripe--collapse, .grid-navigation):is(:hover, :focus-visible) { background-color: var(--ds-call-control-hover, rgba(255, 255, 255, 0.18)) !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .bottom-bar .button-vue:focus-visible, body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .top-bar--in-call .button-vue:focus-visible { outline: 2px solid #fafafa !important; outline-offset: 2px; box-shadow: none !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .bottom-bar .button-vue:disabled { opacity: 0.45; } /* Camera / mic with their device menu: one control, a hairline between the halves */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.local-audio-control-wrapper, .local-video-control-wrapper, .leave-call-actions--split) { gap: 1px !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.local-audio-control-wrapper, .local-video-control-wrapper, .leave-call-actions--split) .button-vue { border-radius: 0 !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.local-audio-control-wrapper, .local-video-control-wrapper, .leave-call-actions--split) > :first-child, body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.local-audio-control-wrapper, .local-video-control-wrapper, .leave-call-actions--split) > :first-child .button-vue { border-start-start-radius: var(--ds-radius-md) !important; border-end-start-radius: var(--ds-radius-md) !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.local-audio-control-wrapper, .local-video-control-wrapper, .leave-call-actions--split) > :last-child, body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container :is(.local-audio-control-wrapper, .local-video-control-wrapper, .leave-call-actions--split) > :last-child .button-vue { border-start-end-radius: var(--ds-radius-md) !important; border-end-end-radius: var(--ds-radius-md) !important; } /* Muted mic / camera off, and leaving: the destructive colour */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .bottom-bar .button-vue--error, body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .leave-call .button-vue--error { background-color: #df2225 !important; color: #fafafa !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .bottom-bar .button-vue--error:is(:hover, :focus-visible):not(:disabled), body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .leave-call .button-vue--error:is(:hover, :focus-visible):not(:disabled) { background-color: #c11c1f !important; } /* Mic muted / camera off (Talk shows its named icon only when on): a red tint, like the card in other apps */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .bottom-bar :is(.audio-control-button:not(:has(.microphone-icon)), .video-control-button:not(:has(.video-icon))):not(:disabled) { background-color: rgba(223, 34, 37, 0.25) !important; color: #ffbdb7 !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .bottom-bar :is(.audio-control-button:not(:has(.microphone-icon)), .video-control-button:not(:has(.video-icon))):not(:disabled):is(:hover, :focus-visible) { background-color: rgba(223, 34, 37, 0.35) !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) #call-container .leave-call .button-vue { height: var(--default-clickable-area) !important; min-height: var(--default-clickable-area) !important; font-weight: 500; } /* Bar above the stage: title, a pill for the timer and the people count */ body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .top-bar--in-call :is(.conversation-header, .title, .description) { color: #fafafa !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .top-bar--in-call .description { color: #a1a1a1 !important; } body[data-themes]:not([data-theme-light-highcontrast], [data-theme-dark-highcontrast]) .top-bar--in-call .call-time__text { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-weight: 600; } /* ───────── Talk: the call while using other apps (js/rayatheme-call.js) ───────── * During a call, other apps open in a frame under the header of the Talk page, and a card at the bottom corner * shows the call. Inside the frame the app's own header is hidden (the Talk page's header is above it). */ html.raya-in-frame #header { display: none !important; } html.raya-in-frame body { --header-height: 0px !important; } html.raya-in-frame #skip-actions { display: none !important; } .raya-call-browse { position: fixed; inset: var(--header-height, 50px) 0 0 0; z-index: 1500; background-color: var(--color-background-plain, var(--color-main-background)); } .raya-call-browse[hidden] { display: none; } .raya-call-browse iframe { display: block; width: 100%; height: 100%; border: 0; transition: opacity 120ms ease; } .raya-call-browse--loading iframe { opacity: 0; } /* While an app loads in the frame: a spinner instead of an empty page */ .raya-call-browse--loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 2px solid var(--color-loading-light, #e5e5e5); border-top-color: var(--color-loading-dark, #737373); border-radius: 50%; animation: raya-call-spin 0.8s linear infinite; } @keyframes raya-call-spin { to { transform: rotate(360deg); } } .raya-call-card { position: fixed; bottom: 16px; inset-inline-end: 16px; z-index: 1600; width: 288px; overflow: hidden; border-radius: var(--ds-radius-xl, 14px); background-color: #171717; color: #fafafa; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.3); font-size: 13px; animation: raya-call-card-in 180ms ease-out; } .raya-call-card[hidden] { display: none; } .raya-call-card--dragging { cursor: grabbing; opacity: 0.92; user-select: none; } @keyframes raya-call-card-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } } /* Nextcloud styles every