1@define-color text @primary;
2@define-color background-alt @secondary_container;
3@define-color selected @secondary_fixed_dim;
4@define-color hover alpha(@secondary_container, .4);
5@define-color urgent @error;
6@define-color background-sec @surface;
7
8* {
9 color: @text;
10 all: unset;
11 font-size: 14px;
12 font-family: "JetBrains Mono Nerd Font 10";
13 transition: 200ms;
14}
15
16/* Avoid 'annoying' backgroud */
17.blank-window {
18 background: alpha(@background, 0.4);
19}
20
21/* CONTROL CENTER ------------------------------------------------------------------------ */
22
23.control-center {
24 background: @background;
25 border-radius: 7px;
26 border: 1px solid alpha(@selected, 0.2);
27 box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
28 margin: 4px;
29 padding: 12px;
30}
31
32/* Notifications */
33.control-center .notification-row .notification-background,
34.control-center
35 .notification-row
36 .notification-background
37 .notification.critical {
38 background-color: @background-alt;
39 border-radius: 9px;
40 margin: 4px 0px;
41 padding: 4px;
42}
43
44.control-center
45 .notification-row
46 .notification-background
47 .notification.critical {
48 color: @urgent;
49}
50
51.control-center
52 .notification-row
53 .notification-background
54 .notification
55 .notification-content {
56 margin: 6px;
57 padding: 8px 6px 2px 2px;
58}
59
60 .control-center .notification-row {
61 margin: 0px;
62 padding: 0px;
63}
64
65.control-center
66 .notification-row
67 .notification-background
68 .notification
69 > *:last-child
70 > * {
71 min-height: 3.4em;
72}
73
74.control-center
75 .notification-row
76 .notification-background
77 .notification
78 > *:last-child
79 > *
80 .notification-action {
81 background: alpha(@selected, 0.6);
82 color: @text;
83 border-radius: 12px;
84 margin: 6px;
85}
86
87.control-center
88 .notification-row
89 .notification-background
90 .notification
91 > *:last-child
92 > *
93 .notification-action:hover {
94 background: @selected;
95}
96
97.control-center
98 .notification-row
99 .notification-background
100 .notification
101 > *:last-child
102 > *
103 .notification-action:active {
104 background-color: @selected;
105}
106
107/* Buttons */
108
109.control-center .notification-row .notification-background .close-button {
110 background: transparent;
111 border-radius: 6px;
112 color: @text;
113 margin: 0px;
114 padding: 4px;
115}
116
117.control-center .notification-row .notification-background .close-button:hover {
118 background-color: @background-sec;
119}
120
121.control-center
122 .notification-row
123 .notification-background
124 .close-button:active {
125 background-color: @selected;
126}
127
128
129progressbar,
130trough {
131 background-color: @background;
132 border-radius: 9px;
133 min-height: 10px;
134}
135
136/* filled part (THIS must NOT have a min-width) */
137progress {
138 background-color: @fg0;
139 border-radius: 9px;
140 min-width: 0;
141 min-height: 10px;
142}
143
144/* Notifications expanded-group */
145
146.notification-group {
147 margin: 2px 8px 2px 8px;
148}
149.notification-group-headers {
150 font-weight: bold;
151 font-size: 1.25rem;
152 color: @text;
153 letter-spacing: 2px;
154}
155
156.notification-group-icon {
157 color: @text;
158}
159
160.notification-group-collapse-button,
161.notification-group-close-all-button {
162 background: transparent;
163 color: @text;
164 margin: 4px;
165 border-radius: 6px;
166 padding: 4px;
167}
168
169.notification-group-collapse-button:hover,
170.notification-group-close-all-button:hover {
171 background: @hover;
172}
173
174/* WIDGETS --------------------------------------------------------------------------- */
175
176/* Notification clear button */
177.widget-title {
178 font-size: 1.2em;
179 margin: 6px;
180 /* border: 1px solid red; */
181}
182
183.widget-title button {
184 background: @background-alt;
185 border-radius: 6px;
186 padding: 4px 16px;
187}
188
189.widget-title button:hover {
190 background-color: @hover;
191}
192
193.widget-title button:active {
194 background-color: @selected;
195}
196
197/* Do not disturb */
198.widget-dnd {
199 /* border: 1px solid red; */
200
201 margin: 6px;
202 font-size: 1.2rem;
203}
204
205.widget-dnd > switch {
206 background: @hover;
207 font-size: initial;
208 border-radius: 9px;
209 box-shadow: none;
210 padding: 2px;
211}
212
213.widget-dnd > switch slider {
214 background: @text;
215 border-radius: 6px;
216}
217
218/* Buttons menu */
219
220
221.widget-buttons-grid {
222 font-size: x-large;
223 padding: 6px 2px;
224 border-radius: 7px;
225 background: @background;
226}
227
228.widget-buttons-grid > flowbox > flowboxchild > button {
229 padding: 6px 0px;
230 background: transparent;
231 border-radius: 7px;
232 min-width: 55px;
233 margin: 5px;
234 border: 1px solid alpha(@selected, 0.1);
235}
236
237.widget-buttons-grid > flowbox > flowboxchild > button:hover {
238 background: @hover;
239}
240
241.widget-buttons-grid > flowbox > flowboxchild > button:checked {
242 /* OnePlus McClaren edition Orange accent */
243 background-color: @hover;
244}
245
246/* Music player */
247.widget-mpris {
248 background: @background-alt;
249 border-radius: 9px;
250 color: @text;
251 margin: 2px 3px;
252}
253
254/* NOTE: Background need *opacity 1* otherwise will turn into the album art blurred */
255.widget-mpris-player {
256 border-radius: 9px;
257 padding: 6px 14px;
258 margin: 6px;
259}
260
261.widget-mpris > box > button {
262 color: @text;
263 border-radius: 9px;
264}
265
266.widget-mpris button {
267 color: alpha(@text, 0.6);
268}
269
270.widget-mpris button:hover {
271 color: @text;
272}
273
274.widget-mpris-album-art {
275 border-radius: 9px;
276}
277
278.widget-mpris-title {
279 font-weight: 700;
280 font-size: 1rem;
281}
282
283.widget-mpris-subtitle {
284 font-weight: 500;
285 font-size: 0.8rem;
286}
287
288picture.mpris-background {
289 opacity: 0;
290}