ASCII text
1
// based css:
2
// https://github.com/solus-project/budgie-desktop/blob/master/theme/3.20/sass/_main.scss
3
/******************
5
* Budgie Desktop *
6
******************/
7
// Container for both the "panel" area and the shadow. Wise to keep
9
// this transparent..
10
.budgie-container { background-color: transparent; }
11
// Budgie Menu
13
.budgie-menu {
14
&.background { padding: 0; }
15
scrolledwindow:not(.categories) { background-color: $base_color; }
17
entry.search {
19
border-bottom: 1px solid $borders_color;
20
border-radius: $md_radius $md_radius 0 0;
21
box-shadow: inset 0 1px $highlight_color;
22
font-size: 120%;
23
}
24
button {
26
@extend row.activatable;
27
min-height: 32px;
29
padding: 0 8px;
30
border-radius: 0;
31
color: $fg_color;
32
font-weight: normal;
33
&:disabled { color: $disabled_fg_color; }
35
&:checked { @extend %selected_items; }
37
}
38
row { all: unset; }
40
}
41
// Menu Button
43
button.budgie-menu-launcher {
44
padding: 0 2px;
45
}
46
// User Menu
48
.user-menu {
49
padding: 10px;
50
// .content-box separator { background-color: $borders_color; }
52
}
53
// Raven Trigger
55
button.raven-trigger {
56
padding-left: 2px;
57
padding-right: 2px;
58
}
59
// Panel
61
.budgie-panel {
62
background-color: $topbar_color;
63
color: $topbar_fg_color;
64
font-weight: 500;
65
button { border-radius: 0; }
67
separator { background-color: $track_color; }
69
// used to indicate unread notifications
71
.alert { color: $destructive_color; }
72
// End Section needs to be fancy
74
.end-region {
75
border-radius: 2px;
76
background-color: rgba(0,0,0,0.2);
77
}
78
}
79
// Tasklist
81
.budgie-panel #tasklist-button {
82
padding: 0 4px;
83
@extend %flat_button;
85
@extend %underscores;
87
}
88
// Icon Tasklist
90
.budgie-panel {
91
button.flat.launcher {
92
padding-top: 0;
93
padding-bottom: 0;
94
@extend %underscores;
96
}
97
.unpinned button.flat.launcher,
99
.pinned button.flat.launcher.running { @extend %underscores:checked; }
100
}
101
%underscores {
103
.top & {
104
border-image: radial-gradient(circle closest-corner at center calc(1px),
105
currentColor 0%,
106
transparent 0%)
107
0 0 0 / 0px 0 0;
108
&:checked {
110
border-image: radial-gradient(circle closest-corner at center calc(1px),
111
currentColor 100%,
112
transparent 0%)
113
2 0 0 / 2px 0 0;
114
}
115
}
116
.bottom & {
118
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
119
currentColor 0%,
120
transparent 0%)
121
0 0 0 / 0 0 0px;
122
&:checked {
124
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
125
currentColor 100%,
126
transparent 0%)
127
0 0 2 / 0 0 2px;
128
}
129
}
130
.left & {
132
border-image: radial-gradient(circle closest-corner at calc(1px) center,
133
currentColor 0%,
134
transparent 0%)
135
0 0 0 0 / 0 0px 0 0;
136
&:checked {
138
border-image: radial-gradient(circle closest-corner at calc(1px) center,
139
currentColor 100%,
140
transparent 0%)
141
0 2 0 0 / 0 2px 0 0;
142
}
143
}
144
.right & {
146
border-image: radial-gradient(circle closest-corner at calc(100% - 1px) center,
147
currentColor 0%,
148
transparent 0%)
149
0 0 0 0 / 0 0 0 0px;
150
&:checked {
152
border-image: radial-gradient(circle closest-corner at calc(100% - 1px) center,
153
currentColor 100%,
154
transparent 0%)
155
0 0 0 2 / 0 0 0 2px;
156
}
157
}
158
}
159
frame.raven-frame > border {
161
border-style: none;
162
box-shadow: $z-depth-4;
163
}
164
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
166
@each $pos, $b_pos in $pos_list {
168
// Panel borders
169
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $borders_color; }
170
// Raven borders
172
.#{$pos} frame.raven-frame > border {
173
margin-#{$b_pos}: 32px;
174
// border-#{$b_pos}: 1px solid $borders_color;
175
}
176
// Shadows
178
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $borders_color, transparent); }
179
}
180
// Raven
182
.raven {
183
background-color: $base_color;
184
stackswitcher.linked > button {
186
@extend %flat_button;
187
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
189
$warning_bg_color 0%,
190
transparent 0%)
191
0 0 0 / 0 0 0px;
192
border-radius: 0;
193
&:checked {
195
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
196
$warning_bg_color 100%,
197
transparent 0%)
198
0 0 2 / 0 0 2px;
199
background-color: transparent;
200
}
201
}
202
.raven-header {
204
min-height: $medium_size;
205
padding: 3px;
206
border-style: none none solid;
207
border-width: 1px;
208
border-color: $borders_color;
209
&:not(.top) {
211
margin-top: -6px; // remove extra spaces, but not perfect :(
212
button {
214
@extend %simple_flat_button;
215
&.image-button {
217
border-radius: $circular_radius;
218
-gtk-outline-radius: $circular_radius;
219
}
220
}
221
}
222
&.top {
224
padding: 2px 0;
225
border-style: none;
226
background-color: $primary_color;
227
color: $inversed_fg_color;
228
stackswitcher button {
230
margin: -$container_padding 0;
231
min-height: $medium_size;
232
}
233
button.image-button {
235
&:dir(ltr) { margin-right: 2px; }
236
&:dir(rtl) { margin-left: 2px; }
237
}
238
> image { margin: 0 8px; }
240
> label {
242
margin: 0 -8px;
243
font-weight: bold;
244
}
245
}
246
&.bottom { border-style: solid none none; }
248
}
249
viewport.frame .raven-header { margin-top: -8px; }
251
.expander-button { @extend %circular_button; }
253
.raven-background {
255
border-bottom: 1px solid $borders_color;
256
background-color: $lighter_bg_color;
257
// &.middle { border-bottom-style: none; } // applet background between two headers
259
&.frame { border-style: none none solid; }
261
> overlay > image { color: $track_color; }
263
}
264
scrolledwindow.raven-background { border-bottom-style: none; }
266
> stack > box > .raven-background {
268
border-bottom-style: none;
269
background-color: $primary_color;
270
color: $inversed_fg_color;
271
stackswitcher button { margin: -4px 0; }
273
}
274
.powerstrip button {
276
margin: 2px 0 1px;
277
padding: ($large_size - 24px) / 2;
278
}
279
.option-subtitle { font-size: smaller; }
281
}
282
// Calendar
284
calendar.raven-calendar {
285
// padding: 3px;
286
border-style: none;
287
background-color: transparent;
288
&:selected {
290
border-radius: 2px;
291
background-color: $primary_color;
292
}
293
}
294
// MPRIS Applet
296
.raven-mpris {
297
color: white;
298
background-color: scale-alpha(black, $middle_opacity);
299
label { min-height: 24px; }
301
button.image-button { padding: ($large_size - 24px) / 2; }
303
}
304
// Notifications
306
.budgie-notification-window { background-color: transparent; }
307
.budgie-notification {
309
.notification-title { font-size: 120%; }
310
.notification-body { @extend .dim-label; }
312
}
313
// On Screen Display in Budgie
315
.budgie-osd-window {
316
@extend .budgie-notification-window;
317
}
318
// Internal part of the OSD
320
.budgie-osd {
321
.budgie-osd-text { font-size: 120%; }
322
}
323
.drop-shadow {
325
margin: 5px 9px;
326
padding: 3px;
327
border-radius: 2px;
328
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
329
background-color: $lighter_bg_color;
330
button { @extend %simple_flat_button; }
332
.linked > button { border-radius: 2px; }
334
}
335
%budgie_dialog {
337
border-radius: 2px;
338
background-color: $lighter_bg_color;
339
decoration { border-radius: 2px; }
341
}
342
// Session Dialog
344
.budgie-session-dialog {
345
@extend %budgie_dialog;
346
label:not(:last-child),
348
.dialog-title { font-size: 120%; }
349
.linked.horizontal > button {
351
padding: 8px 16px;
352
border-top: 1px solid $borders_color;
353
border-radius: 0;
354
@extend %simple_flat_button;
356
&:first-child { border-bottom-left-radius: 2px; }
358
&:last-child { border-bottom-right-radius: 2px; }
360
}
361
}
362
// PolKit Dialog
364
.budgie-polkit-dialog {
365
@extend %budgie_dialog;
366
.message { color: $tertiary_fg_color; }
368
.failure { color: $destructive_color; }
370
}
371
// Run Dialog
373
.budgie-run-dialog {
374
@extend %budgie_dialog;
375
background-color: $base_color;
377
entry.search {
379
font-size: 120%;
380
padding: 0 + $container_padding 8px + $container_padding;
381
box-shadow: inset 0 1px $highlight_color;
382
background-color: transparent;
383
}
384
list .dim-label { opacity: 1; }
386
scrolledwindow { border-top: 1px solid $borders_color; }
388
}
389