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
&:checked:disabled { background-color: $primary_color; } // overriding
48
}
49
row {
51
padding: 0;
52
&:hover { box-shadow: none; }
54
}
55
}
56
// Menu Button
58
button.budgie-menu-launcher {
59
padding: 0 2px;
60
}
61
// User Menu
63
popover.background.user-menu {
64
padding: 8px;
65
.content-box { background-color: transparent; }
67
separator { margin: 4px 0; }
69
row {
71
padding: 0;
72
box-shadow: none;
73
background-image: none;
74
}
75
}
76
// Raven Trigger
78
button.raven-trigger {
79
padding: 0 4px;
80
}
81
// Places Menu
83
popover.background.places-menu {
84
padding: 8px;
85
// FIXME: untested
87
.message-bar {
88
// margin-bottom: 4px;
89
}
90
.name-button.text-button {
92
// padding: 4px 8px;
93
padding-left: 8px;
94
padding-right: 8px;
95
image {
97
&:dir(ltr) { margin-right: 8px - 5px; }
98
&:dir(rtl) { margin-left: 8px - 5px; }
99
}
100
}
101
// FIXME: untested
103
.unmount-button {
104
// padding: ($medium_size - 24px) / 2;
105
}
106
.places-section-header > image {
108
&:dir(ltr) { margin: 0 8px - 10px 0 8px - 3px; }
109
&:dir(rtl) { margin: 0 8px - 3px 0 8px - 10px; }
110
}
111
.places-list {
113
margin-top: 4px;
114
padding-top: 4px;
115
border-top: 1px solid $border_color;
116
background-color: transparent;
117
}
118
row {
120
padding: 0;
121
box-shadow: none;
122
background-image: none;
123
}
124
// FIXME: untested
126
.unlock-area {
127
entry {
128
}
129
button {
131
}
132
}
133
}
134
// Panel
136
.budgie-panel {
137
background-color: $panel_bg_color;
138
color: $secondary_inverse_fg_color;
139
font-weight: 500;
140
button {
142
border-radius: 0;
143
@extend %button_selected.flat;
145
}
146
separator { background-color: $inverse_track_color; }
148
// used to indicate unread notifications
150
.alert { color: $destructive_color; }
151
// End Section needs to be fancy
153
.end-region {
154
// background-color: rgba(0,0,0,0.2);
155
}
156
// Tasklist
158
#tasklist-button {
159
padding: 0 4px;
160
@extend %flat_button;
162
@extend %button_selected.flat;
164
@extend %underscores;
166
&:checked { background-color: $inverse_divider_color; }
168
}
169
// Icon Tasklist
171
button.flat.launcher {
172
padding: 0;
173
@extend %underscores;
175
&:checked { background-color: $inverse_divider_color; }
177
&:not(:checked) {
179
color: $tertiary_inverse_fg_color;
180
&:hover, &:active { color: $secondary_inverse_fg_color; }
182
&:disabled { color: $inverse_track_color; }
184
}
185
}
186
.unpinned button.flat.launcher,
188
.pinned button.flat.launcher.running { @extend %underscores:checked; }
189
}
190
%underscores {
192
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
193
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
194
(left, calc(1px) center, 0 2 0 0 / 0 2px 0 0),
195
(right, calc(100% - 1px) center, 0 0 0 2 / 0 0 0 2px) {
196
.#{$pos} & {
197
& {
198
border-image: radial-gradient(circle closest-corner at #{$b_pos},
199
currentColor 0%,
200
transparent 0%)
201
0 0 0 0 / 0 0 0 0;
202
}
203
&:checked {
205
border-image: radial-gradient(circle closest-corner at #{$b_pos},
206
currentColor 100%,
207
transparent 0%)
208
#{$b_wid};
209
}
210
}
211
}
212
}
213
frame.raven-frame > border {
215
border-style: none;
216
box-shadow: $shadow_4;
217
}
218
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
220
@each $pos, $b_pos in $pos_list {
222
// Panel borders
223
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $border_color; }
224
// Raven borders
226
.#{$pos} frame.raven-frame > border {
227
margin-#{$b_pos}: 32px;
228
// border-#{$b_pos}: 1px solid $border_color;
229
}
230
// Shadows
232
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $border_color, transparent); }
233
}
234
// Raven
236
.raven {
237
background-color: $lighter_bg_color;
238
> stack { margin-bottom: -10px; }
240
// > stack > box:last-child > stack { margin-top: -6px; }
242
stackswitcher.linked > button {
244
@extend %flat_button;
245
@extend %button_selected.flat;
247
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
249
$warning_bg_color 0%,
250
transparent 0%)
251
0 0 0 / 0 0 0px;
252
border-radius: 0;
253
&:checked {
255
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
256
$warning_bg_color 100%,
257
transparent 0%)
258
0 0 2 / 0 0 2px;
259
background-color: transparent;
260
}
261
}
262
.raven-header {
264
min-height: $medium_size;
265
padding: 3px;
266
&:not(.top) {
268
margin-top: -6px; // remove extra spaces, but not perfect :(
269
button {
271
@extend %simple_flat_button;
272
&.image-button { @extend %circular_button; }
274
}
275
}
276
&.top {
278
padding: 2px 0;
279
background-color: $primary_color;
280
color: $inverse_fg_color;
281
stackswitcher button {
283
margin: -$container_padding 0;
284
min-height: $medium_size;
285
}
286
button.image-button {
288
&:dir(ltr) { margin-right: 2px; }
289
&:dir(rtl) { margin-left: 2px; }
290
}
291
> image { margin: 0 8px; }
293
> label {
295
margin: 0 -8px;
296
font-weight: bold;
297
}
298
}
299
&.bottom { border-top: 1px solid $border_color; }
301
}
302
viewport.frame .raven-header { margin-top: -8px; }
304
.expander-button { @extend %circular_button; }
306
.raven-background {
308
border-style: solid none;
309
border-width: 1px;
310
border-color: $border_color;
311
background-color: $base_color;
312
// &.middle { border-bottom-style: none; } // applet background between two headers
314
&.frame { border-style: solid none; }
316
> overlay > widget > image { color: $divider_color; }
318
grid > label:first-child { min-height: $medium_size; } // workaround to fix vertical-align
320
spinbutton:not(.vertical) { @extend %entry.flat; }
322
button.combo { @extend %combo_flat; }
324
}
325
scrolledwindow.raven-background { border-bottom-style: none; }
327
.raven-header.top + .raven-background {
329
border-style: none;
330
background-color: $primary_color;
331
color: $inverse_fg_color;
332
stackswitcher button { margin: -4px 0; }
334
}
335
.powerstrip button {
337
margin: 2px 0 1px;
338
padding: ($large_size - 24px) / 2;
339
}
340
.option-subtitle { font-size: smaller; }
342
}
343
// Calendar
345
calendar.raven-calendar {
346
// padding: 3px;
347
border-style: none;
348
background-color: transparent;
349
&:selected {
351
border-radius: 2px;
352
background-color: $primary_color;
353
}
354
}
355
// MPRIS Applet
357
.raven-mpris {
358
background-color: rgba($black, $middle_opacity);
359
color: $inverse_fg_color;
360
label { min-height: 24px; }
362
button.image-button {
364
padding: ($large_size - 24px) / 2;
365
@extend %button_selected.flat;
367
}
368
}
369
// Notifications
371
.budgie-notification-window { background-color: transparent; }
372
.budgie-notification {
374
.notification-title { font-size: 120%; }
375
.notification-body { @extend .dim-label; }
377
}
378
// On Screen Display in Budgie
380
.budgie-osd-window {
381
@extend .budgie-notification-window;
382
}
383
// Internal part of the OSD
385
.budgie-osd {
386
.budgie-osd-text { font-size: 120%; }
387
}
388
// Alt+tab switcher in Budgie
390
.budgie-switcher-window {
391
@extend .budgie-notification-window;
392
}
393
// Internal part of the Switcher
395
.budgie-switcher {
396
@extend .budgie-notification;
397
}
398
.drop-shadow {
400
margin: 5px 9px;
401
padding: 3px;
402
border-radius: 2px;
403
box-shadow: $shadow_2, inset 0 1px $highlight_color;
404
background-color: $lighter_bg_color;
405
button { @extend %simple_flat_button; }
407
.linked > button { border-radius: 2px; }
409
}
410
%budgie_dialog {
412
border-radius: 2px;
413
background-color: $lighter_bg_color;
414
decoration { border-radius: 2px; }
416
}
417
// Session Dialog
419
.budgie-session-dialog {
420
@extend %budgie_dialog;
421
label:not(:last-child),
423
.dialog-title { font-size: 120%; }
424
.linked.horizontal > button {
426
padding: 8px 16px;
427
border-top: 1px solid $border_color;
428
border-radius: 0;
429
@extend %simple_flat_button;
431
&:first-child { border-bottom-left-radius: 2px; }
433
&:last-child { border-bottom-right-radius: 2px; }
435
}
436
}
437
// PolKit Dialog
439
.budgie-polkit-dialog {
440
@extend %budgie_dialog;
441
.message { color: $tertiary_fg_color; }
443
.failure { color: $destructive_color; }
445
}
446
// Run Dialog
448
.budgie-run-dialog {
449
@extend %budgie_dialog;
450
background-color: $base_color;
452
entry.search {
454
font-size: 120%;
455
padding: $container_padding 8px + $container_padding;
456
box-shadow: inset 0 1px $highlight_color;
457
background-color: transparent;
458
}
459
list .dim-label { opacity: 1; }
461
scrolledwindow { border-top: 1px solid $border_color; }
463
}
464