ASCII text
1
// based css:
2
// https://github.com/budgie-desktop/budgie-desktop/tree/master/src/theme
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-settings-window buttonbox.inline-toolbar {
12
border-style: none none solid;
13
button {
15
border-radius: $material_radius;
16
-gtk-outline-radius: $material_radius;
17
@extend %simple_flat_button;
19
}
20
}
21
.budgie-popover {
23
border-style: solid;
24
border-width: 1px;
25
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
26
border-radius: $material_radius + 1px;
27
box-shadow: $shadow_2;
28
background-color: $surface_color;
29
.container { padding: 2px; }
31
border { border: none; }
33
list { background-color: transparent; }
35
row {
37
padding: 0;
38
&:hover { box-shadow: none; }
40
}
41
&:not(.budgie-menu) button.flat:not(.image-button) {
43
min-height: $menuitem_size;
44
padding: 0 8px;
45
color: $fg_color;
46
font-weight: normal;
47
&:disabled { color: $disabled_fg_color; }
49
}
50
&.budgie-menu {
52
.container { padding: 0; }
53
}
54
&.user-menu {
56
.container { padding: 8px; }
57
separator { margin: 4px 0; }
59
}
60
&.sound-popover {
62
separator { margin: 3px 0; }
63
}
64
&.night-light-indicator {
66
.container { padding: 8px; }
67
}
68
&.places-menu {
70
.container { padding: 8px; }
71
.places-list:not(.always-expand) {
73
margin-top: 4px;
74
padding-top: 4px;
75
border-top: 1px solid $border_color;
76
}
77
// I guess this really should be hard-coded as well as other dim-labels.
79
.alternative-label {
80
padding: 3px;
81
font-size: 15px;
82
}
83
}
84
&.workspace-popover {
86
.container { padding: 8px; }
87
separator { margin: 4px 0; }
89
flowboxchild { padding: 0; }
91
}
92
}
93
// FIXME: workspace has unnecessary/unknown margin
95
.workspace-switcher {
96
.workspace-layout {
97
border: 0 solid $inverse_divider_color;
98
.top &,
100
.bottom & {
101
&:dir(ltr) { border-left-width: 1px; }
102
&:dir(rtl) { border-right-width: 1px; }
104
}
105
.left &,
107
.right & { border-top-width: 1px; }
108
}
109
.workspace-item,
111
.workspace-add-button {
112
border: 0 solid $inverse_divider_color;
113
.top &,
115
.bottom & {
116
&:dir(ltr) { border-right-width: 1px; }
117
&:dir(rtl) { border-left-width: 1px; }
119
}
120
.left &,
122
.right & { border-bottom-width: 1px; }
123
}
124
.workspace-item {
126
transition: $shorter_transition;
127
&.current-workspace { background-color: $inverse_divider_color; }
129
}
130
.workspace-add-button {
132
&:hover { box-shadow: none; }
133
&:active { background-image: none; }
135
&:active image { margin: 1px 0 -1px; }
137
}
138
.workspace-icon-button {
140
.budgie-panel & { // to overwrite the .budgie-panel button style below
141
min-height: 24px;
142
min-width: 24px;
143
padding: 0;
144
border-radius: $material_radius;
145
}
146
}
147
}
148
// Budgie Menu
150
.budgie-menu {
151
.container { padding: 0; }
152
.sidebar,
154
scrollbar,
155
entry.search { background-color: transparent; }
156
entry.search {
158
border-bottom: 1px solid $border_color;
159
border-image: none;
160
border-radius: 0;
161
box-shadow: none;
162
font-size: 120%;
163
}
164
button {
166
@extend row.activatable;
167
min-height: 32px;
169
padding: 0 8px;
170
border-radius: 0;
171
color: $fg_color;
172
font-weight: normal;
173
&:disabled { color: $disabled_fg_color; }
175
&:checked { @extend %selected_items; }
177
&:checked:disabled { background-color: transparent; } // overriding
179
}
180
row {
182
padding: 0;
183
&:hover { box-shadow: none; }
185
}
186
}
187
// Menu Button
189
button.budgie-menu-launcher {
190
// padding: 0 2px;
191
}
192
// Raven Trigger
194
button.raven-trigger {
195
// padding: 0 4px;
196
}
197
// Places Menu
199
.places-menu {
200
.container { padding: 8px; }
201
// FIXME: untested
203
.message-bar {
204
// margin-bottom: 4px;
205
}
206
.name-button {
208
image {
209
&:dir(ltr) { margin-right: 8px - 5px; }
210
&:dir(rtl) { margin-left: 8px - 5px; }
211
}
212
}
213
.unmount-button {
215
margin: ($menuitem_size - $small_size) / 2;
216
padding: 0;
217
}
218
.places-section-header {
220
}
221
.places-list {
223
margin-top: 4px;
224
padding-top: 4px;
225
border-top: 1px solid $border_color;
226
background-color: transparent;
227
}
228
row {
230
padding: 0;
231
box-shadow: none;
232
background-image: none;
233
}
234
// FIXME: untested
236
.unlock-area {
237
entry {
238
}
239
button {
241
}
242
}
243
}
244
// Panel
246
.budgie-panel {
247
transition: background-color $shorter_duration $deceleration_curve;
248
background-color: $solid_panel_bg_color;
249
color: $inverse_secondary_fg_color;
250
font-weight: 500;
251
&.transparent { background-color: $panel_bg_color; }
253
button {
255
@extend %flat_button;
256
@extend %button_selected.flat;
257
min-height: 16px;
259
min-width: 16px;
260
padding: 0;
261
border-radius: 0;
262
&:checked { background-color: $inverse_divider_color; }
264
}
265
&.horizontal button { padding: 0 4px; }
267
&.vertical button { padding: 4px 0; }
269
separator { background-color: $inverse_track_color; }
271
// used to indicate unread notifications
273
.alert { color: $destructive_color; }
274
// End Section needs to be fancy
276
.end-region {
277
// background-color: rgba(0,0,0,0.2);
278
}
279
// budgie-pixel-saver-applet
281
.titlebar:not(headerbar) {
282
min-height: 0;
283
padding: 0;
284
box-shadow: none;
285
background-color: transparent;
286
color: $inverse_fg_color;
287
button:not(.suggested-action):not(.destructive-action) {
289
color: $inverse_secondary_fg_color;
290
&:hover,
292
&:active { color: $inverse_fg_color; }
293
}
294
}
295
// Tasklist
297
#tasklist-button {
298
padding: 0 4px;
299
@extend %underscores;
301
}
302
&.vertical #tasklist-button { min-height: 32px; }
304
// Icon Tasklist
306
button.flat.launcher {
307
padding: 0;
308
@extend %underscores;
310
// for indicator colors
312
&:not(:checked) {
313
color: $inverse_disabled_fg_color;
314
&:hover, &:active { color: $inverse_secondary_fg_color; }
316
&:disabled { color: $inverse_track_color; }
318
}
319
}
320
.unpinned button.flat.launcher,
322
.pinned button.flat.launcher.running { @extend %underscores:checked; }
323
}
324
%underscores {
326
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
327
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
328
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
329
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0) {
330
.#{$pos} & {
331
& {
332
border-image: radial-gradient(circle closest-corner at #{$b_pos},
333
currentColor 0%,
334
transparent 0%)
335
0 0 0 0 / 0 0 0 0;
336
}
337
&:checked {
339
border-image: radial-gradient(circle closest-corner at #{$b_pos},
340
currentColor 100%,
341
transparent 0%)
342
#{$b_wid};
343
}
344
}
345
}
346
}
347
frame.raven-frame > border {
349
border-style: none;
350
box-shadow: $shadow_4;
351
}
352
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
354
@each $pos, $b_pos in $pos_list {
356
// Panel borders
357
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $border_color; }
358
// Raven borders
360
.#{$pos} frame.raven-frame > border {
361
margin-#{$b_pos}: 32px;
362
// border-#{$b_pos}: 1px solid $border_color;
363
}
364
// Shadows
366
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $border_color, transparent); }
367
}
368
// Raven
370
.raven {
371
background-color: $surface_color;
372
> box { margin-bottom: -10px; }
374
stackswitcher.linked > button {
376
@extend %flat_button;
377
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
379
$primary_color 0%,
380
transparent 0%)
381
0 0 0 / 0 0 0px;
382
border-radius: 0;
383
&:checked {
385
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
386
$primary_color 100%,
387
transparent 0%)
388
0 0 2 / 0 0 2px;
389
background-color: transparent;
390
}
391
}
392
.raven-header {
394
min-height: $medium_size;
395
padding: 3px;
396
&:not(.top) { margin-top: -6px; } // remove extra spaces
398
&.top {
400
padding: 0;
401
border-bottom: 1px solid $border_color;
402
stackswitcher button {
404
margin: -4px 0 -5px;
405
padding: 0 16px;
406
min-height: $large_size;
407
}
408
}
409
&.bottom { border-top: 1px solid $border_color; }
411
}
412
viewport.frame .raven-header { margin-top: -8px; }
414
.expander-button { @extend %circular_button; }
416
.raven-background {
418
border-style: solid none;
419
border-width: 1px;
420
border-color: $border_color;
421
background-color: $base_color;
422
// &.middle { border-bottom-style: none; } // applet background between two headers
424
> overlay > widget > image { color: $divider_color; }
426
}
427
scrolledwindow.raven-background { border-bottom-style: none; }
429
.powerstrip button {
431
margin: 2px 0 1px;
432
padding: ($large_size - 24px) / 2;
433
}
434
.option-subtitle { font-size: smaller; }
436
}
437
// Calendar
439
calendar.raven-calendar {
440
// padding: 3px;
441
border-style: none;
442
background-color: transparent;
443
&:selected {
445
@extend %selected_items;
446
border-radius: $material_radius;
448
}
449
}
450
// MPRIS Applet
452
.raven-mpris {
453
background-color: $panel_bg_color;
454
color: $inverse_fg_color;
455
label { min-height: 24px; }
457
button.image-button {
459
padding: ($large_size - 24px) / 2;
460
@extend %button_selected.flat;
462
}
463
}
464
// Notifications
466
.budgie-notification-window { background-color: transparent; }
467
.budgie-notification {
469
.notification-title { font-size: 120%; }
470
.notification-body { @extend .dim-label; }
472
}
473
// On Screen Display in Budgie
475
.budgie-osd-window {
476
@extend .budgie-notification-window;
477
}
478
// Internal part of the OSD
480
.budgie-osd {
481
.budgie-osd-text { font-size: 120%; }
482
}
483
// Alt+tab switcher in Budgie
485
.budgie-switcher-window {
486
@extend .budgie-notification-window;
487
}
488
// Internal part of the Switcher
490
.budgie-switcher {
491
@extend .budgie-notification;
492
}
493
.drop-shadow {
495
margin: 5px 9px;
496
padding: 3px;
497
border-radius: $material_radius;
498
box-shadow: $shadow_2, inset 0 1px $highlight_color;
499
background-color: $surface_color;
500
button { @extend %simple_flat_button; }
502
.linked > button { border-radius: $material_radius; }
504
}
505
%budgie_dialog {
507
border-radius: $material_radius;
508
background-color: $surface_color;
509
decoration { border-radius: $material_radius; }
511
}
512
// Session Dialog
514
.budgie-session-dialog {
515
@extend %budgie_dialog;
516
label:not(:last-child),
518
.dialog-title { font-size: 120%; }
519
.linked.horizontal > button {
521
padding: 8px 16px;
522
border-top: 1px solid $border_color;
523
border-radius: 0;
524
@extend %simple_flat_button;
526
&:first-child { border-bottom-left-radius: $material_radius; }
528
&:last-child { border-bottom-right-radius: $material_radius; }
530
}
531
}
532
// PolKit Dialog
534
.budgie-polkit-dialog {
535
@extend %budgie_dialog;
536
.message { color: $secondary_fg_color; }
538
.failure { color: $destructive_color; }
540
}
541
// Run Dialog
543
.budgie-run-dialog {
544
@extend %budgie_dialog;
545
background-color: $base_color;
547
entry.search {
549
font-size: 120%;
550
padding: $container_padding 8px + $container_padding;
551
border-image: none;
552
box-shadow: inset 0 1px $highlight_color;
553
background-color: transparent;
554
}
555
list .dim-label { opacity: 1; }
557
scrolledwindow { border-top: 1px solid $border_color; }
559
}
560