dot

vizie's NixOS desktop: Hyprland, CachyOS kernel and gaming tweaks

SearchHelp
279 lines5070 bytes
1// Control center styling. Monochrome to match the transparent Waybar.
2
3$fg: #ffffff;
4$dim: rgba(255, 255, 255, 0.55);
5// Black-based translucency (not white-tinted) to match the rest of the rice
6// (Waybar's #waybar, fuzzel, dunst all use rgba(0, 0, 0, ...) over the
7// compositor blur, rather than a lightened panel color).
8$card: rgba(0, 0, 0, 0.16);
9$card-hover: rgba(0, 0, 0, 0.26);
10$track: rgba(255, 255, 255, 0.14);
11$ink: #18181c;
12$danger: #ff6b6b;
13
14* {
15 all: unset;
16 font-family: "NotoSans Nerd Font Regular", "NotoSans Nerd Font", "Noto Sans", sans-serif;
17 font-size: 13px;
18 color: $fg;
19}
20
21// ---- panel -----------------------------------------------------------------
22
23.cc {
24 // Same near-transparent black as #waybar / fuzzel's background; the
25 // compositor's own blur (layerrule-4 in modules/home/desktop.nix) does the rest, no
26 // border, same as the rest of the rice.
27 background-color: rgba(0, 0, 0, 0.1);
28 border-radius: 20px;
29 padding: 14px;
30}
31
32.card {
33 background-color: $card;
34 border-radius: 18px;
35 padding: 12px 14px;
36}
37
38.card-title {
39 font-weight: bold;
40}
41
42// ---- tiles (Network / Bluetooth, Update NixOS) -----------------------------------
43
44.tile {
45 background-color: $card;
46 border-radius: 18px;
47 padding: 10px 12px;
48
49 // Split tile: the padding moves onto the two halves, so each half's hover
50 // highlight is a rounded shape of its own inside the tile.
51 &.split {
52 padding: 4px;
53 }
54}
55
56.tile-wrap:hover .tile {
57 background-color: $card-hover;
58}
59
60.toggle {
61 padding: 6px;
62 border-radius: 14px;
63}
64
65.open {
66 padding: 6px 8px 6px 6px;
67 border-radius: 14px;
68}
69
70.toggle-wrap:hover .toggle,
71.open-wrap:hover .open {
72 background-color: rgba(255, 255, 255, 0.06);
73}
74
75.chevron {
76 font-size: 14px;
77 color: $dim;
78}
79
80.open-wrap:hover .chevron,
81.tile-wrap:hover .chevron {
82 color: $fg;
83}
84
85.icon-circle {
86 min-width: 38px;
87 min-height: 38px;
88 border-radius: 19px;
89 background-color: $track;
90
91 label {
92 font-size: 18px;
93 }
94
95 // The NixOS snowflake sits a little left of centre in the font.
96 .nix {
97 font-size: 19px;
98 padding-left: 2px;
99 }
100
101 &.on {
102 background-color: $fg;
103
104 label {
105 color: $ink;
106 }
107 }
108}
109
110.tile-title {
111 font-weight: bold;
112}
113
114.tile-sub {
115 font-size: 11px;
116 color: $dim;
117}
118
119// ---- sliders ------------------------------------------------------------------
120
121.slider-icon {
122 font-size: 17px;
123 min-width: 24px;
124
125 &.muted {
126 color: $dim;
127 }
128}
129
130.slider-val {
131 font-size: 11px;
132 color: $dim;
133 min-width: 34px;
134}
135
136scale trough {
137 min-height: 24px;
138 border-radius: 12px;
139 background-color: $track;
140}
141
142scale highlight {
143 border-radius: 12px;
144 background-color: $fg;
145}
146
147scale slider {
148 min-width: 0;
149 min-height: 24px;
150 background-color: transparent;
151}
152
153// ---- system rings -----------------------------------------------------------------
154
155.ring {
156 color: $fg;
157 background-color: $track;
158
159 &.hot {
160 color: $danger;
161 }
162}
163
164.ring-value {
165 font-weight: bold;
166 font-size: 13px;
167}
168
169.ring-name {
170 font-size: 11px;
171 color: $dim;
172}
173
174// ---- power ------------------------------------------------------------------------
175
176.power-btn {
177 padding: 8px 10px;
178 border-radius: 14px;
179
180 &:hover {
181 background-color: $card-hover;
182 }
183}
184
185.power-icon {
186 font-size: 20px;
187}
188
189.power-label {
190 font-size: 10px;
191 color: $dim;
192}
193
194.confirm {
195 margin-top: 4px;
196 padding: 8px 10px;
197 border-radius: 12px;
198 background-color: rgba(0, 0, 0, 0.16);
199}
200
201// .btn-wrap is the eventbox (hover/click); .btn is the inner box that is
202// actually drawn, since GTK ignores padding on an eventbox.
203.btn {
204 padding: 5px 14px;
205 border-radius: 10px;
206 background-color: $card-hover;
207
208 &.danger {
209 background-color: $danger;
210
211 // `*` sets color on every label directly, so it has to be overridden on
212 // the label rather than inherited from the box.
213 label {
214 color: $ink;
215 font-weight: bold;
216 }
217 }
218}
219
220.btn-wrap:hover .btn {
221 background-color: rgba(255, 255, 255, 0.14);
222
223 &.danger {
224 background-color: #ff8787;
225 }
226}
227
228// ---- notifications --------------------------------------------------------------
229
230.notif-header {
231 padding: 0 4px;
232}
233
234// Each notification is a card of its own, like the control center's cards.
235.notif {
236 margin-top: 8px;
237 padding: 10px 12px;
238 border-radius: 16px;
239 background-color: $card;
240 transition: opacity 240ms ease-in, margin-left 280ms ease-in, margin-right 280ms ease-in;
241
242 // Clearing: fade while sliding out to the right. The opposite margins keep the
243 // width constant, so the entry moves instead of being squeezed.
244 &.out {
245 opacity: 0;
246 margin-left: 70px;
247 margin-right: -70px;
248 }
249}
250
251.notif-wrap:hover .notif {
252 background-color: $card-hover;
253}
254
255// Stagger: each entry leaves 45ms after the one above it.
256@for $i from 0 through 9 {
257 .notif.d#{$i} {
258 transition-delay: #{$i * 45}ms;
259 }
260}
261
262.notif-meta {
263 font-size: 11px;
264 color: $dim;
265}
266
267.notif-summary {
268 font-weight: bold;
269}
270
271.notif-body,
272.notif-empty {
273 font-size: 12px;
274 color: $dim;
275}
276
277.notif-empty {
278 padding: 6px 4px 2px 4px;
279}