Skip to main content

max / alloy

1.7 KB · 60 lines History Blame Raw
1 @{! variants = default, night }
2 /*
3 * Alloy swayosd style
4 *
5 * OSD overlay for volume, brightness, caps-lock, num-lock. Rendered against
6 * @{meta.name}; docs/TOKENS.md is source of truth.
7 *
8 * swayosd renders in GTK; standard CSS applies. Palette is inlined here
9 * because CSS variables inside GTK 4 stylesheets have quirks with
10 * osd/window inheritance — verbose but reliable.
11 */
12
13 window#osd {
14 background-color: @{surface.raised}; /* surface-raised */
15 color: @{content.primary}; /* text-primary */
16 border: 1px solid @{line.border}; /* border */
17 border-radius: 4px;
18 padding: 10px 14px;
19 /* The drop shadow is an alpha of the theme's darkest tone rather than of
20 * its ink: under a dark theme the ink is the pale one, and a shadow made
21 * from it would halo the overlay instead of seating it. `ansi.0` is the
22 * token that carries "darkest tone" across both polarities. */
23 box-shadow: 0 2px 6px alpha(@{ansi.0}, 0.08);
24 }
25
26 image, label {
27 color: @{content.primary}; /* text-primary */
28 }
29
30 label.title {
31 color: @{content.secondary}; /* text-secondary */
32 font-weight: bold;
33 }
34
35 progressbar {
36 min-height: 4px;
37 background: transparent;
38 border: none;
39 }
40
41 progressbar > trough {
42 background: @{border.subtle}; /* border-subtle */
43 border: none;
44 border-radius: 2px;
45 min-height: 4px;
46 }
47
48 progressbar > trough > progress {
49 background: @{status.warning}; /* accent-warn */
50 border: none;
51 border-radius: 2px;
52 min-height: 4px;
53 }
54
55 /* Caps-lock / num-lock indicator variant */
56 window#osd.mode {
57 background-color: @{surface.raised};
58 color: @{content.primary};
59 }
60