mirror of
https://github.com/vector-im/element-call.git
synced 2026-09-22 22:29:30 +00:00
fkwp
6c9550da0a
- A bar and the gap beside it are fixed; how many bars there are follows the space. Spread gaps made the meter a different shape everywhere, and closed the bars into one block when space ran short. - Bars that touch cannot be counted, and the count is what carries the level without colour. - `contain: inline-size` and `min-inline-size: 0` so the width decides the count and not the reverse — without them the bars set the menu's width. - Gap is half again the bar width, measured off the design mock: 10px bars 14px apart, a ratio of 1.4, nearest token pair 4px and 6px. - Sizes stay in the stylesheet; the component reads them back off a rendered bar rather than repeating them.
71 lines
2.5 KiB
CSS
71 lines
2.5 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.
|
|
*/
|
|
|
|
.meter {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--cpd-space-3x);
|
|
padding-block: var(--cpd-space-2x);
|
|
/* Aligned with the device rows above: a menu item reserves a trailing column
|
|
for its chevron and gives its label an end margin, so the text stops well
|
|
short of the item's own padding. Without the same inset the bars run past
|
|
where the device names end. */
|
|
padding-inline-start: var(--cpd-space-4x);
|
|
padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));
|
|
}
|
|
|
|
.icon {
|
|
color: var(--cpd-color-icon-secondary);
|
|
flex-shrink: 0;
|
|
/* Same width as a device row's icon column, so the bars start where the
|
|
device names start. */
|
|
inline-size: 24px;
|
|
}
|
|
|
|
.segments {
|
|
/* A bar and the space beside it are always the same size; what changes with
|
|
the width available is how many bars there are. Spreading a fixed number of
|
|
bars instead would make the meter a different shape in every place it is
|
|
used, and close them up into one solid block wherever the space ran short —
|
|
and a meter whose bars touch stops reading as a count, which is what
|
|
carries the level for anyone who cannot rely on the colour.
|
|
|
|
Both sizes are set here and nowhere else: the component reads them back off
|
|
the rendered bars to work out how many fit. */
|
|
flex: 1;
|
|
/* The width decides the count, never the other way round. Containment is
|
|
what enforces that: without it the bars are both a floor under the width
|
|
and the widest thing in the menu, so the meter would set the menu's width
|
|
and the device names — which are what a person is reading — would have to
|
|
fit around it. */
|
|
contain: inline-size;
|
|
min-inline-size: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
/* Half again as wide as a bar, as the design has it: bars set as close as
|
|
their own width read as a solid block long before they touch. */
|
|
gap: var(--cpd-space-1-5x);
|
|
}
|
|
|
|
.segment {
|
|
flex: none;
|
|
inline-size: var(--cpd-space-1x);
|
|
block-size: var(--cpd-space-4x);
|
|
border-radius: var(--cpd-space-1x);
|
|
background: var(--cpd-color-bg-subtle-primary);
|
|
}
|
|
|
|
/* Filled segments carry the level by count as well as by colour, so the meter
|
|
stays readable without relying on hue. */
|
|
.segmentLit {
|
|
background: var(--cpd-color-bg-accent-rest);
|
|
}
|
|
|
|
.message {
|
|
color: var(--cpd-color-text-secondary);
|
|
}
|