dot

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

SearchHelp
268 lines4857 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: Desktop / Server) -----------------
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.toggle {
57 padding: 6px;
58 border-radius: 14px;
59}
60
61.open {
62 padding: 6px 8px 6px 6px;
63 border-radius: 14px;
64}
65
66.toggle-wrap:hover .toggle,
67.open-wrap:hover .open {
68 background-color: rgba(255, 255, 255, 0.06);
69}
70
71.chevron {
72 font-size: 14px;
73 color: $dim;
74}
75
76.open-wrap:hover .chevron {
77 color: $fg;
78}
79
80.icon-circle {
81 min-width: 38px;
82 min-height: 38px;
83 border-radius: 19px;
84 background-color: $track;
85
86 label {
87 font-size: 18px;
88 }
89
90 &.on {
91 background-color: $fg;
92
93 label {
94 color: $ink;
95 }
96 }
97}
98
99.tile-title {
100 font-weight: bold;
101}
102
103.tile-sub {
104 font-size: 11px;
105 color: $dim;
106}
107
108// ---- sliders ------------------------------------------------------------------
109
110.slider-icon {
111 font-size: 17px;
112 min-width: 24px;
113
114 &.muted {
115 color: $dim;
116 }
117}
118
119.slider-val {
120 font-size: 11px;
121 color: $dim;
122 min-width: 34px;
123}
124
125scale trough {
126 min-height: 24px;
127 border-radius: 12px;
128 background-color: $track;
129}
130
131scale highlight {
132 border-radius: 12px;
133 background-color: $fg;
134}
135
136scale slider {
137 min-width: 0;
138 min-height: 24px;
139 background-color: transparent;
140}
141
142// ---- system rings -----------------------------------------------------------------
143
144.ring {
145 color: $fg;
146 background-color: $track;
147
148 &.hot {
149 color: $danger;
150 }
151}
152
153.ring-value {
154 font-weight: bold;
155 font-size: 13px;
156}
157
158.ring-name {
159 font-size: 11px;
160 color: $dim;
161}
162
163// ---- power ------------------------------------------------------------------------
164
165.power-btn {
166 padding: 8px 10px;
167 border-radius: 14px;
168
169 &:hover {
170 background-color: $card-hover;
171 }
172}
173
174.power-icon {
175 font-size: 20px;
176}
177
178.power-label {
179 font-size: 10px;
180 color: $dim;
181}
182
183.confirm {
184 margin-top: 4px;
185 padding: 8px 10px;
186 border-radius: 12px;
187 background-color: rgba(0, 0, 0, 0.16);
188}
189
190// .btn-wrap is the eventbox (hover/click); .btn is the inner box that is
191// actually drawn, since GTK ignores padding on an eventbox.
192.btn {
193 padding: 5px 14px;
194 border-radius: 10px;
195 background-color: $card-hover;
196
197 &.danger {
198 background-color: $danger;
199
200 // `*` sets color on every label directly, so it has to be overridden on
201 // the label rather than inherited from the box.
202 label {
203 color: $ink;
204 font-weight: bold;
205 }
206 }
207}
208
209.btn-wrap:hover .btn {
210 background-color: rgba(255, 255, 255, 0.14);
211
212 &.danger {
213 background-color: #ff8787;
214 }
215}
216
217// ---- notifications --------------------------------------------------------------
218
219.notif-header {
220 padding: 0 4px;
221}
222
223// Each notification is a card of its own, like the control center's cards.
224.notif {
225 margin-top: 8px;
226 padding: 10px 12px;
227 border-radius: 16px;
228 background-color: $card;
229 transition: opacity 240ms ease-in, margin-left 280ms ease-in, margin-right 280ms ease-in;
230
231 // Clearing: fade while sliding out to the right. The opposite margins keep the
232 // width constant, so the entry moves instead of being squeezed.
233 &.out {
234 opacity: 0;
235 margin-left: 70px;
236 margin-right: -70px;
237 }
238}
239
240.notif-wrap:hover .notif {
241 background-color: $card-hover;
242}
243
244// Stagger: each entry leaves 45ms after the one above it.
245@for $i from 0 through 9 {
246 .notif.d#{$i} {
247 transition-delay: #{$i * 45}ms;
248 }
249}
250
251.notif-meta {
252 font-size: 11px;
253 color: $dim;
254}
255
256.notif-summary {
257 font-weight: bold;
258}
259
260.notif-body,
261.notif-empty {
262 font-size: 12px;
263 color: $dim;
264}
265
266.notif-empty {
267 padding: 6px 4px 2px 4px;
268}