ASCII text
1
/**
2
* Budgie Desktop
3
*/
4
// Based on:
6
// https://github.com/solus-project/budgie-desktop/tree/master/src/theme
7
@use "../../../theme";
9
@use "../../../theme-color";
10
@use "../../../shadow";
11
@use "../common";
12
@use "../drawing";
13
// Container for both the "panel" area and the shadow. Wise to keep
15
// this transparent..
16
.budgie-container {
17
background-color: transparent;
18
}
19
.budgie-settings-window buttonbox.inline-toolbar {
21
border-style: none none solid;
22
button {
24
border-radius: theme.$corner-radius;
25
@extend %button-flat-basic;
27
}
28
}
29
.budgie-popover {
31
border-style: solid;
32
border-width: 1px;
33
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
34
border-radius: theme.$corner-radius + 1px;
35
box-shadow: shadow.$z4;
36
background-clip: padding-box;
37
background-color: theme-color.$surface-z8;
38
.container {
40
padding: 2px;
41
}
42
border {
44
border: none;
45
background-color: transparent;
46
}
47
list {
49
// background-color: transparent;
50
}
51
row {
53
padding: 0;
54
&:hover {
56
box-shadow: none;
57
}
58
}
59
button.flat:not(.image-button) {
61
min-height: theme.$menu-item-dense-height;
62
padding: 0 8px;
63
color: theme-color.$on-surface;
64
font-weight: normal;
65
&:disabled {
67
color: theme-color.disabled(theme-color.$on-surface);
68
}
69
}
70
&.budgie-menu {
72
.container {
73
padding: 0;
74
}
75
// .sidebar,
77
scrollbar,
78
entry.search {
79
background-color: transparent;
80
}
81
entry.search {
83
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
84
border-image: none;
85
border-radius: 0;
86
box-shadow: none;
87
font-size: 120%;
88
}
89
button.flat:not(.image-button) {
91
min-height: 32px;
92
padding: 0 8px;
93
border-radius: 0;
94
@include drawing.list-item;
96
&:checked {
98
background-color: theme-color.$selected-overlay;
99
}
100
// remove pointless indicator
102
&:checked:disabled {
103
background-color: transparent;
104
}
105
}
106
}
107
&.user-menu {
109
.container {
110
padding: 8px;
111
}
112
separator {
114
margin: 4px 0;
115
}
116
}
117
&.sound-popover {
119
separator {
120
margin: 3px 0;
121
}
122
}
123
&.night-light-indicator {
125
.container {
126
padding: 8px;
127
}
128
}
129
&.places-menu {
131
.container {
132
padding: 8px;
133
}
134
// FIXME: untested
136
.message-bar {
137
// margin-bottom: 4px;
138
}
139
.name-button {
141
image {
142
&:dir(ltr) {
143
margin-right: 8px - 5px;
144
}
145
&:dir(rtl) {
147
margin-left: 8px - 5px;
148
}
149
}
150
}
151
.unmount-button {
153
margin: (theme.$menu-item-dense-height - theme.$small-size) / 2;
154
padding: 0;
155
}
156
.places-section-header {
158
}
159
.places-list:not(.always-expand) {
161
margin-top: 4px;
162
padding-top: 4px;
163
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
164
}
165
// FIXME: untested
167
.unlock-area {
168
entry {
169
}
170
button {
172
}
173
}
174
// use such sizes for consistency with other hard-coded dim-label sizes
176
.alternative-label {
177
padding: 3px;
178
font-size: 15px;
179
}
180
}
181
&.workspace-popover {
183
.container {
184
padding: 8px;
185
}
186
separator {
188
margin: 4px 0;
189
}
190
flowboxchild {
192
padding: 0;
193
}
194
}
195
}
196
// FIXME: workspace has unnecessary/unknown margin
198
.workspace-switcher {
199
.workspace-layout {
200
border: 0 solid theme-color.divider(theme-color.$on-panel);
201
.top &,
203
.bottom & {
204
&:dir(ltr) {
205
border-left-width: 1px;
206
}
207
&:dir(rtl) {
209
border-right-width: 1px;
210
}
211
}
212
.left &,
214
.right & {
215
border-top-width: 1px;
216
}
217
}
218
.workspace-item,
220
.workspace-add-button {
221
border: 0 solid theme-color.divider(theme-color.$on-panel);
222
.top &,
224
.bottom & {
225
&:dir(ltr) {
226
border-right-width: 1px;
227
}
228
&:dir(rtl) {
230
border-left-width: 1px;
231
}
232
}
233
.left &,
235
.right & {
236
border-bottom-width: 1px;
237
}
238
}
239
.workspace-item {
241
transition: theme.$transition;
242
&.current-workspace {
244
background-color: theme-color.activated-overlay(theme-color.$on-panel);
245
}
246
}
247
.workspace-add-button {
249
&:hover {
250
box-shadow: none;
251
}
252
&:active {
254
background-image: none;
255
}
256
&:active image {
258
margin: 1px 0 -1px;
259
}
260
}
261
.workspace-icon-button {
263
// to overwrite the .budgie-panel button style below
264
.budgie-panel & {
265
min-height: 24px;
266
min-width: 24px;
267
padding: 0;
268
border-radius: theme.$corner-radius;
269
}
270
}
271
}
272
// Menu Button
274
button.budgie-menu-launcher {
275
// padding: 0 2px;
276
}
277
// Raven Trigger
279
button.raven-trigger {
280
// padding: 0 4px;
281
}
282
// Panel
284
.budgie-panel {
285
transition: background-color theme.$state-duration theme.$ease-out;
286
background-color: theme-color.$panel;
287
color: theme-color.hint(theme-color.$on-panel);
288
font-weight: 500;
289
&.transparent {
291
background-color: theme-color.$scrim;
292
color: theme-color.hint(theme-color.$on-scrim);
293
}
294
button {
296
min-height: 16px;
297
min-width: 16px;
298
padding: 0;
299
border-radius: 0;
300
color: theme-color.hint(theme-color.$on-panel);
301
@include drawing.ink-color(theme-color.$on-panel, $button-style: "flat");
302
&:disabled {
304
background-color: transparent;
305
color: theme-color.disabled-hint(theme-color.$on-panel);
306
}
307
&:checked {
309
$background-color: theme-color.activated-overlay(theme-color.$on-panel);
310
color: theme-color.$on-panel;
311
@include drawing.ink-color(theme-color.$on-panel, $button-style: "flat", $on: $background-color);
312
&:disabled {
314
background-color: theme-color.activated-overlay(theme-color.$on-panel);
315
color: theme-color.disabled(theme-color.$on-panel);
316
}
317
}
318
}
319
&.horizontal button {
321
padding: 0 4px;
322
}
323
&.vertical button {
325
padding: 4px 0;
326
}
327
separator {
329
background-color: theme-color.stroke(theme-color.$on-panel);
330
}
331
// used to indicate unread notifications
333
.alert {
334
color: theme-color.error(theme-color.$on-panel);
335
}
336
// End Section needs to be fancy
338
.end-region {
339
// background-color: rgba(0,0,0,0.2);
340
}
341
// budgie-pixel-saver-applet
343
.titlebar:not(headerbar) {
344
min-height: 0;
345
padding: 0;
346
box-shadow: none;
347
background-color: transparent;
348
color: theme-color.$on-panel;
349
button:not(.suggested-action):not(.destructive-action) {
351
color: theme-color.hint(theme-color.$on-panel);
352
}
353
}
354
// Tasklist
356
#tasklist-button {
357
padding: 0 4px;
358
@extend %underscores;
360
}
361
&.vertical #tasklist-button {
363
min-height: 32px;
364
}
365
// Icon Tasklist
367
button.flat.launcher {
368
padding: 0;
369
@extend %underscores;
371
// for indicator colors
373
&:not(:checked) {
374
color: theme-color.disabled(theme-color.$on-panel);
375
&:disabled {
377
color: theme-color.disabled-hint(theme-color.$on-panel);
378
}
379
}
380
}
381
.unpinned button.flat.launcher,
383
.pinned button.flat.launcher.running {
384
@extend %underscores-checked;
385
}
386
}
387
$underscores-list:
389
(top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
390
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
391
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
392
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0);
393
%underscores {
395
@each $pos, $b_pos, $b_wid in $underscores-list {
396
.#{$pos} & {
397
& {
398
border-image:
399
radial-gradient(
400
circle closest-corner at #{$b_pos},
401
currentcolor 0%,
402
transparent 0%
403
) 0 0 0 0 / 0 0 0 0;
404
}
405
@at-root %underscores-checked,
407
&:checked {
408
border-image:
409
radial-gradient(
410
circle closest-corner at #{$b_pos},
411
currentcolor 100%,
412
transparent 0%
413
) #{$b_wid};
414
}
415
}
416
}
417
}
418
frame.raven-frame > border {
420
border-style: none;
421
box-shadow: shadow.$z16;
422
}
423
$pos_list: (top: bottom, bottom: top, left: right, right: left);
425
@each $pos, $b_pos in $pos_list {
427
// Panel borders
428
.#{$pos} .budgie-panel {
429
// border-#{$b_pos}: 1px solid divider($on-surface);
430
}
431
// Raven borders
433
.#{$pos} frame.raven-frame > border {
434
margin-#{$b_pos}: 32px;
435
// border-#{$b_pos}: 1px solid divider($on-surface);
436
}
437
// Shadows
439
.#{$pos} .shadow-block {
440
// background-image: linear-gradient(to $b_pos, divider($on-surface), transparent);
441
}
442
}
443
// Raven
445
.raven {
446
background-color: theme-color.$surface-z8;
447
list {
449
// background-color: transparent;
450
}
451
// remove extra space between box and .raven-header.bottom
453
> box:not(:only-child) {
454
margin-bottom: -10px;
455
}
456
.raven-header {
458
min-height: theme.$medium-size;
459
padding: 3px;
460
// Adopt tabs style only for .top
462
&.top {
463
padding: 0;
464
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
465
stackswitcher.linked > button {
467
@extend %button-flat-activatable;
468
margin: -4px 0 -5px; // remove unwanted vertical margins
470
padding: 0 16px;
471
min-height: theme.$large-size;
472
border-image:
473
radial-gradient(
474
circle closest-corner at center calc(100% - 1px),
475
theme-color.$primary 0%,
476
transparent 0%
477
) 0 0 0 / 0 0 0;
478
border-radius: 0;
479
&:checked {
481
border-image:
482
radial-gradient(
483
circle closest-corner at center calc(100% - 1px),
484
theme-color.$primary 100%,
485
transparent 0%
486
) 0 0 2 / 0 0 2px;
487
background-color: transparent;
488
}
489
}
490
}
491
&.bottom {
493
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
494
}
495
}
496
stack {
498
// remove extra space in Notifications stack
499
.raven-header {
500
margin-top: -6px;
501
}
502
// remove extra spaces in Applets stack
504
scrolledwindow .raven-header {
505
margin-top: -8px;
506
}
507
}
508
.expander-button {
510
border-radius: theme.$circular-radius;
511
}
512
.raven-background {
514
// applet background between two headers
515
&.middle {
516
// border-bottom-style: none;
517
}
518
// Adopt Choice chips style
520
stackswitcher.linked > button {
521
margin: -2px 8px 9px;
522
padding: 0 12px;
523
min-height: 32px;
524
border-radius: theme.$circular-radius;
525
color: theme-color.hint(theme-color.$on-surface);
526
font-weight: normal;
527
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat", $on: theme-color.fill(theme-color.$on-surface));
528
&:checked {
530
color: theme-color.$primary;
531
@include drawing.ink-color(theme-color.$primary, $button-style: "flat", $on: theme-color.activated-overlay(theme-color.$primary));
532
}
533
&:not(:first-child) {
535
margin-left: 0;
536
}
537
}
538
// Default music icon
540
> overlay > widget > image {
541
color: theme-color.fill(theme-color.$on-surface);
542
}
543
}
544
revealer > .raven-background {
546
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
547
}
548
.raven-header + .raven-background {
550
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
551
}
552
// Application block in Notifications stack
554
viewport.frame > list > row {
555
// Remove all effects. This should be just a container.
556
padding: 0;
557
box-shadow: none;
558
background: none;
559
&:not(:first-child) {
561
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
562
}
563
> box {
565
// Remove awkward hard-coded margins
566
margin-top: -5px;
567
margin-left: -5px;
568
margin-bottom: -5px;
569
// Application header
571
> box {
572
padding: 6px;
573
margin-bottom: -10px; // Remove hard-coded spacing
574
}
575
// Notifications
577
> list > row {
578
padding: 8px;
579
> box {
581
margin-bottom: -5px; // Remove hard-coded margin-bottom
582
> box {
584
// Title
585
> label {
586
font-weight: bold;
587
}
588
// Close button
590
> button.image-button {
591
padding: 0;
592
}
593
}
594
> label {
596
margin-top: -6px; // For less spacing: 10 -> 4
597
font-size: smaller;
598
}
599
}
600
}
601
}
602
}
603
.powerstrip button {
605
margin: 2px 0 1px;
606
padding: (theme.$large-size - 24px) / 2;
607
}
608
.option-subtitle {
610
font-size: smaller;
611
}
612
}
613
// Calendar
615
calendar.raven-calendar {
616
// padding: 3px;
617
border-style: none;
618
background-color: transparent;
619
&:selected {
621
border-radius: theme.$corner-radius;
622
background-color: theme-color.$selected-overlay;
623
}
624
}
625
// MPRIS Applet
627
.raven-mpris {
628
background-color: theme-color.$scrim;
629
color: theme-color.$on-scrim;
630
label {
632
min-height: 24px;
633
}
634
button.image-button {
636
padding: (theme.$large-size - 24px) / 2;
637
color: theme-color.hint(theme-color.$on-scrim);
638
@include drawing.ink-color(theme-color.$on-scrim, $button-style: "flat");
639
}
640
}
641
// Notifications
643
.budgie-notification-window {
644
background-color: transparent;
645
}
646
.budgie-notification {
648
.notification-title {
649
font-size: 120%;
650
}
651
.notification-body {
653
color: theme-color.hint(theme-color.$on-surface);
654
}
655
}
656
// On Screen Display in Budgie
658
.budgie-osd-window {
659
@extend .budgie-notification-window;
660
}
661
// Internal part of the OSD
663
.budgie-osd {
664
.budgie-osd-text {
665
font-size: 120%;
666
}
667
}
668
// Alt+tab switcher in Budgie
670
.budgie-switcher-window {
671
@extend .budgie-notification-window;
672
}
673
// Internal part of the Switcher
675
.budgie-switcher {
676
@extend .budgie-notification;
677
}
678
.drop-shadow {
680
margin: 5px 9px;
681
padding: 3px;
682
border-radius: theme.$corner-radius;
683
box-shadow: shadow.$z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
684
background-color: theme-color.$surface-z8;
685
button {
687
@extend %button-flat;
688
&.text-button:not(:disabled) {
690
color: theme-color.$primary;
691
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
692
}
693
}
694
.linked > button {
696
margin-right: theme.$container-padding;
697
}
698
}
699
%budgie_dialog {
701
border-radius: theme.$corner-radius;
702
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
703
background-color: theme-color.$surface-z8;
704
decoration {
706
border-radius: theme.$corner-radius;
707
}
708
}
709
// Session Dialog
711
.budgie-session-dialog {
712
@extend %budgie_dialog;
713
> box {
715
padding: 8px;
716
}
717
// Hide power icon
719
image {
720
margin: -8px;
721
-gtk-icon-transform: scale(0);
722
}
723
label:not(:last-child),
725
.dialog-title {
726
margin-bottom: 8px;
727
font-size: 20px;
728
font-weight: 500;
729
}
730
.dialog-title + label {
732
color: theme-color.hint(theme-color.$on-surface);
733
}
734
.linked.horizontal > button {
736
@extend %button-flat;
737
&:not(:last-child) {
739
margin-right: 8px;
740
}
741
&:not(:disabled) {
743
color: theme-color.$primary;
744
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
745
}
746
}
747
}
748
// PolKit Dialog
750
.budgie-polkit-dialog {
751
@extend %budgie_dialog;
752
.message {
754
color: theme-color.hint(theme-color.$on-surface);
755
}
756
.failure {
758
color: theme-color.$error;
759
}
760
}
761
// Run Dialog
763
.budgie-run-dialog {
764
@extend %budgie_dialog;
765
entry.search {
767
font-size: 120%;
768
padding: theme.$container-padding 8px + theme.$container-padding;
769
border-image: none;
770
box-shadow: none;
771
background-color: transparent;
772
}
773
list {
775
padding: 4px 0;
776
// background-color: transparent;
777
.dim-label {
779
color: inherit;
780
}
781
}
782
scrolledwindow {
784
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
785
}
786
scrollbar {
788
&.right,
789
&.bottom {
790
border-bottom-right-radius: theme.$corner-radius;
791
}
792
&.left,
794
&.bottom {
795
border-bottom-left-radius: theme.$corner-radius;
796
}
797
}
798
}
799