mirror of
https://github.com/vector-im/element-call.git
synced 2026-11-07 00:52:28 +00:00
fkwpandClaude Opus 5.5
fb4cbc72e2
- A cross on the tile's top-right corner removes an added background, critical-coloured at rest and named by its tooltip, as design draws it. The one in force offers none, since taking it away would leave nothing chosen; the view model refuses it too. - The cross sits beside the item rather than in it, which would take the press first and choose the tile, and isn't a control of its own, so the menu keeps one keyboard model: Delete or Backspace on the tile does the same, and the tile says so with aria-keyshortcuts. - Removed from IndexedDB and its picture released. End to end on Chromium and Firefox, a background removed by Delete is still gone after a reload. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
132 lines
3.0 KiB
CSS
132 lines
3.0 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;
|
|
}
|
|
|
|
.removable {
|
|
position: relative;
|
|
display: flex;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.removable > .tile {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Clear of the target for choosing the tile. */
|
|
.remove {
|
|
position: absolute;
|
|
inset-block-start: 0;
|
|
inset-inline-end: 0;
|
|
translate: 20% -20%;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: 28px;
|
|
block-size: 28px;
|
|
border-radius: 50%;
|
|
background: var(--cpd-color-bg-canvas-default);
|
|
color: var(--cpd-color-icon-critical-primary);
|
|
box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.remove:hover {
|
|
background: var(--cpd-color-bg-critical-subtle-hovered);
|
|
box-shadow: 0 0 0 var(--cpd-border-width-1)
|
|
var(--cpd-color-border-critical-subtle);
|
|
}
|
|
|
|
.removable:hover .remove,
|
|
.removable:focus-within .remove {
|
|
display: flex;
|
|
}
|