ASCII text
1
// based css:
2
// https://github.com/budgie-desktop/budgie-desktop/blob/master/src/theme/3.20/sass/_main.scss
3
/******************
5
* Budgie Desktop *
6
******************/
7
// Container for both the "panel" area and the shadow. Wise to keep
8
// this transparent..
9
.budgie-container { background-color: transparent; }
10
// Budgie Menu
12
.budgie-menu {
13
&.background {
14
padding: 0;
15
background-color: $base_color;
16
}
17
scrollbar,
19
entry.search { background-color: transparent; }
20
entry.search {
22
border-bottom: 1px solid $border_color;
23
border-radius: 0;
24
box-shadow: none;
25
font-size: 120%;
26
}
27
.categories {
29
&:dir(ltr) { border-bottom-left-radius: $material_radius; }
30
&:dir(rtl) { border-bottom-right-radius: $material_radius; }
32
}
33
button {
35
@extend row.activatable;
36
min-height: 32px;
38
padding: 0 8px;
39
border-radius: 0;
40
color: $fg_color;
41
font-weight: normal;
42
&:disabled { color: $disabled_fg_color; }
44
&:checked { @extend %selected_items; }
46
}
47
row { all: unset; }
49
}
50
// Menu Button
52
button.budgie-menu-launcher {
53
padding: 0 2px;
54
}
55
// User Menu
57
popover.background.user-menu {
58
padding: 8px;
59
.content-box { background-color: transparent; }
61
separator { margin: 4px 0; }
63
row {
65
padding: 0;
66
box-shadow: none;
67
background-image: none;
68
}
69
}
70
// Raven Trigger
72
button.raven-trigger {
73
padding: 0 4px;
74
}
75
// Places Menu
77
popover.background.places-menu {
78
padding: 8px;
79
// FIXME: untested
81
.message-bar {
82
// margin-bottom: 4px;
83
}
84
.name-button.text-button {
86
// padding: 4px 8px;
87
padding-left: 8px;
88
padding-right: 8px;
89
image {
91
&:dir(ltr) { margin-right: 8px - 5px; }
92
&:dir(rtl) { margin-left: 8px - 5px; }
93
}
94
}
95
// FIXME: untested
97
.unmount-button {
98
// padding: ($medium_size - 24px) / 2;
99
}
100
.places-section-header > image {
102
&:dir(ltr) { margin: 0 8px - 10px 0 8px - 3px; }
103
&:dir(rtl) { margin: 0 8px - 3px 0 8px - 10px; }
104
}
105
.places-list {
107
margin-top: 4px;
108
padding-top: 4px;
109
border-top: 1px solid $border_color;
110
background-color: transparent;
111
}
112
row {
114
padding: 0;
115
box-shadow: none;
116
background-image: none;
117
}
118
// FIXME: untested
120
.unlock-area {
121
entry {
122
}
123
button {
125
}
126
}
127
}
128
// Panel
130
.budgie-panel {
131
background-color: $panel_bg_color;
132
color: $secondary_inverse_fg_color;
133
font-weight: 500;
134
button {
136
border-radius: 0;
137
@extend %button_selected.flat;
139
}
140
separator { background-color: $inverse_track_color; }
142
// used to indicate unread notifications
144
.alert { color: $destructive_color; }
145
// End Section needs to be fancy
147
.end-region {
148
// background-color: rgba(0,0,0,0.2);
149
}
150
// Tasklist
152
#tasklist-button {
153
padding: 0 4px;
154
@extend %flat_button;
156
@extend %button_selected.flat;
158
@extend %underscores;
160
&:checked { background-color: $inverse_divider_color; }
162
}
163
// Icon Tasklist
165
button.flat.launcher {
166
padding: 0;
167
@extend %underscores;
169
&:checked { background-color: $inverse_divider_color; }
171
&:not(:checked) {
173
color: $tertiary_inverse_fg_color;
174
&:hover, &:active { color: $secondary_inverse_fg_color; }
176
&:disabled { color: $inverse_track_color; }
178
}
179
}
180
.unpinned button.flat.launcher,
182
.pinned button.flat.launcher.running { @extend %underscores:checked; }
183
}
184
%underscores {
186
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
187
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
188
(left, calc(1px) center, 0 2 0 0 / 0 2px 0 0),
189
(right, calc(100% - 1px) center, 0 0 0 2 / 0 0 0 2px) {
190
.#{$pos} & {
191
& {
192
border-image: radial-gradient(circle closest-corner at #{$b_pos},
193
currentColor 0%,
194
transparent 0%)
195
0 0 0 0 / 0 0 0 0;
196
}
197
&:checked {
199
border-image: radial-gradient(circle closest-corner at #{$b_pos},
200
currentColor 100%,
201
transparent 0%)
202
#{$b_wid};
203
}
204
}
205
}
206
}
207
frame.raven-frame > border {
209
border-style: none;
210
box-shadow: $shadow_4;
211
}
212
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
214
@each $pos, $b_pos in $pos_list {
216
// Panel borders
217
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $border_color; }
218
// Raven borders
220
.#{$pos} frame.raven-frame > border {
221
margin-#{$b_pos}: 32px;
222
// border-#{$b_pos}: 1px solid $border_color;
223
}
224
// Shadows
226
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $border_color, transparent); }
227
}
228
// Raven
230
.raven {
231
background-color: $lighter_bg_color;
232
> stack { margin-bottom: -10px; }
234
// > stack > box:last-child > stack { margin-top: -6px; }
236
stackswitcher.linked > button {
238
@extend %flat_button;
239
@extend %button_selected.flat;
241
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
243
$warning_bg_color 0%,
244
transparent 0%)
245
0 0 0 / 0 0 0px;
246
border-radius: 0;
247
&:checked {
249
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
250
$warning_bg_color 100%,
251
transparent 0%)
252
0 0 2 / 0 0 2px;
253
background-color: transparent;
254
}
255
}
256
.raven-header {
258
min-height: $medium_size;
259
padding: 3px;
260
&:not(.top) {
262
margin-top: -6px; // remove extra spaces, but not perfect :(
263
button {
265
@extend %simple_flat_button;
266
&.image-button { @extend %circular_button; }
268
}
269
}
270
&.top {
272
padding: 2px 0;
273
background-color: $primary_color;
274
color: $inverse_fg_color;
275
stackswitcher button {
277
margin: -$container_padding 0;
278
min-height: $medium_size;
279
}
280
button.image-button {
282
&:dir(ltr) { margin-right: 2px; }
283
&:dir(rtl) { margin-left: 2px; }
284
}
285
> image { margin: 0 8px; }
287
> label {
289
margin: 0 -8px;
290
font-weight: bold;
291
}
292
}
293
&.bottom { border-top: 1px solid $border_color; }
295
}
296
viewport.frame .raven-header { margin-top: -8px; }
298
.expander-button { @extend %circular_button; }
300
.raven-background {
302
border-style: solid none;
303
border-width: 1px;
304
border-color: $border_color;
305
background-color: $base_color;
306
// &.middle { border-bottom-style: none; } // applet background between two headers
308
&.frame { border-style: solid none; }
310
> overlay > widget > image { color: $divider_color; }
312
grid > label:first-child { min-height: $medium_size; } // workaround to fix vertical-align
314
spinbutton:not(.vertical) { @extend %entry.flat; }
316
button.combo { @extend %combo_flat; }
318
}
319
scrolledwindow.raven-background { border-bottom-style: none; }
321
.raven-header.top + .raven-background {
323
border-style: none;
324
background-color: $primary_color;
325
color: $inverse_fg_color;
326
stackswitcher button { margin: -4px 0; }
328
}
329
.powerstrip button {
331
margin: 2px 0 1px;
332
padding: ($large_size - 24px) / 2;
333
}
334
.option-subtitle { font-size: smaller; }
336
}
337
// Calendar
339
calendar.raven-calendar {
340
// padding: 3px;
341
border-style: none;
342
background-color: transparent;
343
&:selected {
345
border-radius: 2px;
346
background-color: $primary_color;
347
}
348
}
349
// MPRIS Applet
351
.raven-mpris {
352
background-color: rgba($black, $middle_opacity);
353
color: $inverse_fg_color;
354
label { min-height: 24px; }
356
button.image-button {
358
padding: ($large_size - 24px) / 2;
359
@extend %button_selected.flat;
361
}
362
}
363
// Notifications
365
.budgie-notification-window { background-color: transparent; }
366
.budgie-notification {
368
.notification-title { font-size: 120%; }
369
.notification-body { @extend .dim-label; }
371
}
372
// On Screen Display in Budgie
374
.budgie-osd-window {
375
@extend .budgie-notification-window;
376
}
377
// Internal part of the OSD
379
.budgie-osd {
380
.budgie-osd-text { font-size: 120%; }
381
}
382
// Alt+tab switcher in Budgie
384
.budgie-switcher-window {
385
@extend .budgie-notification-window;
386
}
387
// Internal part of the Switcher
389
.budgie-switcher {
390
@extend .budgie-notification;
391
}
392
.drop-shadow {
394
margin: 5px 9px;
395
padding: 3px;
396
border-radius: 2px;
397
box-shadow: $shadow_2, inset 0 1px $highlight_color;
398
background-color: $lighter_bg_color;
399
button { @extend %simple_flat_button; }
401
.linked > button { border-radius: 2px; }
403
}
404
%budgie_dialog {
406
border-radius: 2px;
407
background-color: $lighter_bg_color;
408
decoration { border-radius: 2px; }
410
}
411
// Session Dialog
413
.budgie-session-dialog {
414
@extend %budgie_dialog;
415
label:not(:last-child),
417
.dialog-title { font-size: 120%; }
418
.linked.horizontal > button {
420
padding: 8px 16px;
421
border-top: 1px solid $border_color;
422
border-radius: 0;
423
@extend %simple_flat_button;
425
&:first-child { border-bottom-left-radius: 2px; }
427
&:last-child { border-bottom-right-radius: 2px; }
429
}
430
}
431
// PolKit Dialog
433
.budgie-polkit-dialog {
434
@extend %budgie_dialog;
435
.message { color: $tertiary_fg_color; }
437
.failure { color: $destructive_color; }
439
}
440
// Run Dialog
442
.budgie-run-dialog {
443
@extend %budgie_dialog;
444
background-color: $base_color;
446
entry.search {
448
font-size: 120%;
449
padding: $container_padding 8px + $container_padding;
450
box-shadow: inset 0 1px $highlight_color;
451
background-color: transparent;
452
}
453
list .dim-label { opacity: 1; }
455
scrolledwindow { border-top: 1px solid $border_color; }
457
}
458