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: $popup_bg_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: 2px 8px 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
&.background {
152
padding: 0;
153
background-color: $base_color;
154
}
155
scrollbar,
157
entry.search { background-color: transparent; }
158
entry.search {
160
border-bottom: 1px solid $border_color;
161
border-radius: 0;
162
box-shadow: none;
163
font-size: 120%;
164
}
165
.categories {
167
&:dir(ltr) { border-bottom-left-radius: $material_radius; }
168
&:dir(rtl) { border-bottom-right-radius: $material_radius; }
170
}
171
button {
173
@extend row.activatable;
174
min-height: 32px;
176
padding: 0 8px;
177
border-radius: 0;
178
color: $fg_color;
179
font-weight: normal;
180
&:disabled { color: $disabled_fg_color; }
182
&:checked { @extend %selected_items; }
184
&:checked:disabled { background-color: $primary_color; } // overriding
186
}
187
row {
189
padding: 0;
190
&:hover { box-shadow: none; }
192
}
193
}
194
// Menu Button
196
button.budgie-menu-launcher {
197
// padding: 0 2px;
198
}
199
// User Menu
201
popover.background.user-menu {
202
padding: 8px;
203
.content-box { background-color: transparent; }
205
separator { margin: 4px 0; }
207
row {
209
padding: 0;
210
box-shadow: none;
211
background-image: none;
212
}
213
}
214
// Raven Trigger
216
button.raven-trigger {
217
// padding: 0 4px;
218
}
219
// Places Menu
221
popover.background.places-menu {
222
padding: 8px;
223
// FIXME: untested
225
.message-bar {
226
// margin-bottom: 4px;
227
}
228
.name-button.text-button {
230
// padding: 4px 8px;
231
padding-left: 8px;
232
padding-right: 8px;
233
image {
235
&:dir(ltr) { margin-right: 8px - 5px; }
236
&:dir(rtl) { margin-left: 8px - 5px; }
237
}
238
}
239
// FIXME: untested
241
.unmount-button {
242
// padding: ($medium_size - 24px) / 2;
243
}
244
.places-section-header > image {
246
&:dir(ltr) { margin: 0 8px - 10px 0 8px - 3px; }
247
&:dir(rtl) { margin: 0 8px - 3px 0 8px - 10px; }
248
}
249
.places-list {
251
margin-top: 4px;
252
padding-top: 4px;
253
border-top: 1px solid $border_color;
254
background-color: transparent;
255
}
256
row {
258
padding: 0;
259
box-shadow: none;
260
background-image: none;
261
}
262
// FIXME: untested
264
.unlock-area {
265
entry {
266
}
267
button {
269
}
270
}
271
}
272
// Panel
274
.budgie-panel {
275
transition: background-color $shorter_duration $deceleration_curve;
276
background-color: $solid_panel_bg_color;
277
color: $inverse_secondary_fg_color;
278
font-weight: 500;
279
&.transparent { background-color: $panel_bg_color; }
281
button {
283
@extend %flat_button;
284
@extend %button_selected.flat;
285
min-height: 16px;
287
min-width: 16px;
288
padding: 0;
289
border-radius: 0;
290
&:checked { background-color: $inverse_divider_color; }
292
}
293
&.horizontal button { padding: 0 4px; }
295
&.vertical button { padding: 4px 0; }
297
separator { background-color: $inverse_track_color; }
299
// used to indicate unread notifications
301
.alert { color: $destructive_color; }
302
// End Section needs to be fancy
304
.end-region {
305
// background-color: rgba(0,0,0,0.2);
306
}
307
// budgie-pixel-saver-applet
309
.titlebar {
310
min-height: 0;
311
padding: 0;
312
box-shadow: none;
313
background-color: transparent;
314
color: $inverse_fg_color;
315
button {
317
color: $inverse_secondary_fg_color;
318
&:hover,
320
&:active { color: $inverse_fg_color; }
321
}
322
}
323
// Tasklist
325
#tasklist-button {
326
padding: 0 4px;
327
@extend %underscores;
329
}
330
&.vertical #tasklist-button { min-height: 32px; }
332
// Icon Tasklist
334
button.flat.launcher {
335
padding: 0;
336
@extend %underscores;
338
// for indicator colors
340
&:not(:checked) {
341
color: $inverse_hint_fg_color;
342
&:hover, &:active { color: $inverse_secondary_fg_color; }
344
&:disabled { color: $inverse_track_color; }
346
}
347
}
348
.unpinned button.flat.launcher,
350
.pinned button.flat.launcher.running { @extend %underscores:checked; }
351
}
352
%underscores {
354
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
355
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
356
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
357
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0) {
358
.#{$pos} & {
359
& {
360
border-image: radial-gradient(circle closest-corner at #{$b_pos},
361
currentColor 0%,
362
transparent 0%)
363
0 0 0 0 / 0 0 0 0;
364
}
365
&:checked {
367
border-image: radial-gradient(circle closest-corner at #{$b_pos},
368
currentColor 100%,
369
transparent 0%)
370
#{$b_wid};
371
}
372
}
373
}
374
}
375
frame.raven-frame > border {
377
border-style: none;
378
box-shadow: $shadow_4;
379
}
380
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
382
@each $pos, $b_pos in $pos_list {
384
// Panel borders
385
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $border_color; }
386
// Raven borders
388
.#{$pos} frame.raven-frame > border {
389
margin-#{$b_pos}: 32px;
390
// border-#{$b_pos}: 1px solid $border_color;
391
}
392
// Shadows
394
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $border_color, transparent); }
395
}
396
// Raven
398
.raven {
399
background-color: $popup_bg_color;
400
// for >=10.4
402
> box { margin-bottom: -10px; }
403
// for <10.4
405
> stack { margin-bottom: -10px; }
406
// > stack > box:last-child > stack { margin-top: -6px; }
408
stackswitcher.linked > button {
410
@extend %flat_button;
411
@extend %button_selected.flat;
412
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
414
$warning_bg_color 0%,
415
transparent 0%)
416
0 0 0 / 0 0 0px;
417
border-radius: 0;
418
&:checked {
420
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
421
$warning_bg_color 100%,
422
transparent 0%)
423
0 0 2 / 0 0 2px;
424
background-color: transparent;
425
}
426
}
427
.raven-header {
429
min-height: $medium_size;
430
padding: 3px;
431
&:not(.top) {
433
margin-top: -6px; // remove extra spaces, but not perfect :(
434
button {
436
@extend %simple_flat_button;
437
&.image-button { @extend %circular_button; }
439
}
440
}
441
&.top {
443
padding: 2px 0;
444
background-color: $primary_color;
445
color: $inverse_fg_color;
446
stackswitcher button {
448
margin: -$container_padding 0;
449
min-height: $medium_size;
450
}
451
// for <10.4
453
button.image-button {
454
&:dir(ltr) { margin-right: 2px; }
455
&:dir(rtl) { margin-left: 2px; }
456
}
457
// for <10.4
459
> image { margin: 0 8px; }
460
// for <10.4
462
> label {
463
margin: 0 -8px;
464
font-weight: bold;
465
}
466
}
467
&.bottom { border-top: 1px solid $border_color; }
469
}
470
viewport.frame .raven-header { margin-top: -8px; }
472
.expander-button { @extend %circular_button; }
474
.raven-background {
476
border-style: solid none;
477
border-width: 1px;
478
border-color: $border_color;
479
background-color: $base_color;
480
// &.middle { border-bottom-style: none; } // applet background between two headers
482
// for <10.4
484
&.frame { border-style: solid none; }
485
> overlay > widget > image { color: $divider_color; }
487
// for <10.4
489
grid > label:first-child { min-height: $medium_size; } // workaround to fix vertical-align
490
// for <10.4
492
spinbutton:not(.vertical) { @extend %entry.flat; }
493
// for <10.4
495
button.combo { @extend %combo_flat; }
496
}
497
scrolledwindow.raven-background { border-bottom-style: none; }
499
// for <10.4
501
.raven-header.top + .raven-background {
502
border-style: none;
503
background-color: $primary_color;
504
color: $inverse_fg_color;
505
stackswitcher button { margin: -4px 0; }
507
}
508
.powerstrip button {
510
margin: 2px 0 1px;
511
padding: ($large_size - 24px) / 2;
512
}
513
.option-subtitle { font-size: smaller; }
515
}
516
// Calendar
518
calendar.raven-calendar {
519
// padding: 3px;
520
border-style: none;
521
background-color: transparent;
522
&:selected {
524
border-radius: $material_radius;
525
background-color: $primary_color;
526
}
527
}
528
// MPRIS Applet
530
.raven-mpris {
531
background-color: $panel_bg_color;
532
color: $inverse_fg_color;
533
label { min-height: 24px; }
535
button.image-button {
537
padding: ($large_size - 24px) / 2;
538
@extend %button_selected.flat;
540
}
541
}
542
// Notifications
544
.budgie-notification-window { background-color: transparent; }
545
.budgie-notification {
547
.notification-title { font-size: 120%; }
548
.notification-body { @extend .dim-label; }
550
}
551
// On Screen Display in Budgie
553
.budgie-osd-window {
554
@extend .budgie-notification-window;
555
}
556
// Internal part of the OSD
558
.budgie-osd {
559
.budgie-osd-text { font-size: 120%; }
560
}
561
// Alt+tab switcher in Budgie
563
.budgie-switcher-window {
564
@extend .budgie-notification-window;
565
}
566
// Internal part of the Switcher
568
.budgie-switcher {
569
@extend .budgie-notification;
570
}
571
.drop-shadow {
573
margin: 5px 9px;
574
padding: 3px;
575
border-radius: $material_radius;
576
box-shadow: $shadow_2, inset 0 1px $highlight_color;
577
background-color: $popup_bg_color;
578
button { @extend %simple_flat_button; }
580
.linked > button { border-radius: $material_radius; }
582
}
583
%budgie_dialog {
585
border-radius: $material_radius;
586
background-color: $popup_bg_color;
587
decoration { border-radius: $material_radius; }
589
}
590
// Session Dialog
592
.budgie-session-dialog {
593
@extend %budgie_dialog;
594
label:not(:last-child),
596
.dialog-title { font-size: 120%; }
597
.linked.horizontal > button {
599
padding: 8px 16px;
600
border-top: 1px solid $border_color;
601
border-radius: 0;
602
@extend %simple_flat_button;
604
&:first-child { border-bottom-left-radius: $material_radius; }
606
&:last-child { border-bottom-right-radius: $material_radius; }
608
}
609
}
610
// PolKit Dialog
612
.budgie-polkit-dialog {
613
@extend %budgie_dialog;
614
.message { color: $hint_fg_color; }
616
.failure { color: $destructive_color; }
618
}
619
// Run Dialog
621
.budgie-run-dialog {
622
@extend %budgie_dialog;
623
background-color: $base_color;
625
entry.search {
627
font-size: 120%;
628
padding: $container_padding 8px + $container_padding;
629
box-shadow: inset 0 1px $highlight_color;
630
background-color: transparent;
631
}
632
list .dim-label { opacity: 1; }
634
scrolledwindow { border-top: 1px solid $border_color; }
636
}
637