mirror of
https://github.com/vector-im/element-call.git
synced 2026-10-16 23:45:50 +00:00
fkwpandClaude Opus 5.5
b1255f0424
- Compound 10.3.0 bounds a menu by the space it has and scrolls what doesn't fit, within a boundary the app passes. The menus pass the call area, 16px in from its sides, rather than measuring its width. - The 296px width is the menu's own style. Compound gives that style only to the dropdown, so menuIsDrawer, which copied its phone rule, goes. - Compound draws the menu's frame over its content, so nothing that scrolls can hide it in Safari: the list, headings and meter no longer keep a border width clear of it, and the checks that they did go. - The device list is Compound's scroll area, so it fades out at the foot with Compound's chevron while there is more below. - The microphone menu's meter sticks at that foot, with rows scrolling under it as before, so the list has no fade above it: Compound's is a mask fixed to the list's edge, while a bounce at the top carries the meter with the rows. The band under the meter is filled, or rows would show there. The edge fades from where the chevron starts, so a bounce fades the meter out before it reaches the chevron. A row reached by keyboard stays above the meter. - The list's height is still its share of the call. - The component harness leaves the host's stylesheets unscoped, Compound's among them, as a host does: scoped, they never reached the menu, which is portalled out of Element Call's root. - Its specs check only Element Call's own document styles on the host page, and find the device list within Compound's scroll area. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
107 lines
2.9 KiB
CSS
107 lines
2.9 KiB
CSS
/*
|
|
Copyright 2026 Element Creations Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: var(--cpd-color-bg-subtle-secondary);
|
|
border-radius: 32px;
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
.containerOpen {
|
|
background-color: var(--cpd-color-bg-action-primary-pressed);
|
|
}
|
|
.chevronIconOpen > svg {
|
|
color: var(--cpd-color-icon-on-solid-primary);
|
|
}
|
|
.menuButton {
|
|
width: 40px;
|
|
background-color: transparent !important;
|
|
}
|
|
.itemIcon {
|
|
color: var(--cpd-color-text-secondary);
|
|
}
|
|
|
|
.rotate {
|
|
animation: spinner 1.5s linear infinite;
|
|
}
|
|
@keyframes spinner {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* The width design sets: a long device name wraps. */
|
|
.menu {
|
|
inline-size: 296px;
|
|
}
|
|
|
|
/* Its share of the measured call area: the menu is portalled out of the root,
|
|
so CSS can't size it against the call. */
|
|
.deviceList {
|
|
max-block-size: var(--device-list-max-height);
|
|
/* Keeps a row reached by keyboard clear of the sticky heading. */
|
|
scroll-padding-block-start: var(--device-list-scroll-padding-start, 0);
|
|
}
|
|
|
|
/* Compound's heading rule heads each section; the design adds space below it. */
|
|
.menu h3 {
|
|
margin-block-end: var(--cpd-space-5x);
|
|
}
|
|
|
|
/* And more above a heading that follows another section. */
|
|
.deviceList [role="group"] + [role="group"] h3 {
|
|
margin-block-start: var(--cpd-space-7x);
|
|
}
|
|
|
|
/* Sticky within its own section, and opaque so rows scroll under it. */
|
|
.sectionHeading {
|
|
position: sticky;
|
|
inset-block-start: 0;
|
|
background: var(--cpd-color-bg-canvas-default);
|
|
}
|
|
|
|
/* Sticky at the foot of the microphone section; opaque as above. */
|
|
.stickyMeter {
|
|
position: sticky;
|
|
inset-block-end: 0;
|
|
background: var(--cpd-color-bg-canvas-default);
|
|
}
|
|
|
|
/* Fills the band between the meter and the frame, or rows show through it. */
|
|
.stickyMeter::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
inset-block-start: 100%;
|
|
block-size: var(--cpd-menu-padding-block-end, 0px);
|
|
background: var(--cpd-color-bg-canvas-default);
|
|
}
|
|
|
|
/* Not Compound's fade: that stays at the edge while a bounce carries the meter.
|
|
This one starts at the chevron, below the meter at rest. */
|
|
.deviceList.deviceListWithMeter[data-more-below] {
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
#000 calc(100% - var(--cpd-space-6x)),
|
|
transparent calc(100% - var(--cpd-space-3x))
|
|
);
|
|
}
|
|
|
|
/* Radix focuses whatever the pointer is over, so the browser's ring would
|
|
follow the mouse. Replaced by one shown only for keyboard focus. */
|
|
.menu [role^="menuitem"]:focus,
|
|
.menu [role^="menuitem"]:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.menu[data-focus-source="keyboard"] [role^="menuitem"]:focus {
|
|
outline: var(--cpd-border-width-2) solid var(--cpd-color-border-focused);
|
|
outline-offset: calc(-1 * var(--cpd-border-width-2));
|
|
}
|