dot

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

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