mirror of
https://github.com/vector-im/element-call.git
synced 2026-11-07 00:52:28 +00:00
fkwpandClaude Opus 5.5
3d57920556
- The camera menu's blur toggle becomes a Background effects section under the cameras: no effect, blur and the two shipped backgrounds as one radio choice of tiles, three across. It scrolls with the device list, so it stays reachable in a short call, and choosing keeps the menu open. The lobby gets it too, as both render the same footer. - The footer's view model gives the options, the notice and the actions; the footer only names them. - Each tile is Compound's MenuItem as a menuitemradio, styled as a tile. Compound makes it an item of the dropdown, so the arrow keys walk the tiles with the device rows, and takes its tap in the phone drawer. A tile that can't be chosen has no select handler, so the keyboard passes over it. - Where the browser can't run effects the tiles are shown, disabled and explained by a notice the group is described by. No effect stays choosable and shows as in force. The notice is in the scrolling list, so a short call doesn't push the menu out of it. - Section headings are raised, or the positioned tiles scroll over the one they sit under; raised within the list only, so the menu's frame stays over them. Tiles clip with overflow: clip; with hidden they are scroll containers, which focus scrolls into view without their border. - End to end on Chromium and Firefox: a shipped background chosen in the lobby shows in the preview, and None after Blur draws nothing, counted in WebGL draws (Blur: about 1400 a second on Chromium, 2300 on Firefox). - The Quick Audio Menu's test of the camera menu keeps its name and now finds blur among the effects rather than as a toggle. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
93 lines
2.2 KiB
CSS
93 lines
2.2 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.
|
|
*/
|
|
|
|
.grid {
|
|
display: grid;
|
|
/* A zero floor, so a long label wraps inside its tile rather than widening
|
|
the grid past the menu. */
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
grid-auto-rows: 1fr;
|
|
gap: var(--cpd-space-3x);
|
|
padding: var(--cpd-space-2x) var(--cpd-space-4x) 0;
|
|
}
|
|
|
|
/* Within the grid, to outweigh the menu item styles the tiles are built on. */
|
|
.grid .tile {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--cpd-space-1x);
|
|
min-inline-size: 0;
|
|
padding: var(--cpd-space-3x) var(--cpd-space-2x);
|
|
/* Not hidden: that makes the tile a scroll container, which focus scrolls
|
|
into view without its border, and so without the focus ring. */
|
|
overflow: clip;
|
|
border: var(--cpd-border-width-2) solid
|
|
var(--cpd-color-border-interactive-secondary);
|
|
border-radius: var(--cpd-space-2x);
|
|
background: none;
|
|
color: var(--cpd-color-icon-secondary);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* As the menu items highlight on hover. */
|
|
.grid .tile[data-highlighted] {
|
|
background: var(--cpd-color-bg-action-secondary-hovered);
|
|
}
|
|
|
|
.grid .tile[aria-checked="true"] {
|
|
border-color: var(--cpd-color-border-accent);
|
|
}
|
|
|
|
.grid .tile[data-disabled] {
|
|
cursor: default;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.tile[data-disabled] .picture {
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.swatch {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.picture {
|
|
position: absolute;
|
|
inset: 0;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Positioned, or the picture, positioned itself, would cover it. */
|
|
.mark {
|
|
position: relative;
|
|
display: inline-flex;
|
|
color: var(--cpd-color-icon-accent-primary);
|
|
}
|
|
|
|
/* On a picture the mark needs a ground of its own to be seen. */
|
|
.picture ~ .mark {
|
|
border-radius: 50%;
|
|
background: var(--cpd-color-bg-canvas-default);
|
|
box-shadow: 0 0 0 var(--cpd-border-width-2) var(--cpd-color-bg-canvas-default);
|
|
}
|
|
|
|
.label {
|
|
max-inline-size: 100%;
|
|
font: var(--cpd-font-body-sm-medium);
|
|
color: var(--cpd-color-text-primary);
|
|
text-align: center;
|
|
overflow-wrap: anywhere;
|
|
}
|