ASCII text
1
// based css:
2
// https://github.com/solus-project/budgie-desktop/tree/master/src/theme
3
/**
5
* Budgie Desktop
6
*/
7
@use "../../../theme";
9
@use "../../../theme-color";
10
@use "../common";
11
@use "../drawing";
12
// Container for both the "panel" area and the shadow. Wise to keep
14
// this transparent..
15
.budgie-container {
16
background-color: transparent;
17
}
18
.budgie-settings-window buttonbox.inline-toolbar {
20
border-style: none none solid;
21
button {
23
border-radius: theme.$corner-radius;
24
@extend %button-flat-basic;
26
}
27
}
28
.budgie-popover {
30
border-style: solid;
31
border-width: 1px;
32
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
33
border-radius: theme.$corner-radius + 1px;
34
box-shadow: theme.$shadow-z4;
35
background-clip: padding-box;
36
background-color: theme-color.$surface-z8;
37
.container {
39
padding: 2px;
40
}
41
border {
43
border: none;
44
background-color: transparent;
45
}
46
list {
48
// background-color: transparent;
49
}
50
row {
52
padding: 0;
53
&:hover {
55
box-shadow: none;
56
}
57
}
58
button.flat:not(.image-button) {
60
min-height: theme.$menuitem-size;
61
padding: 0 8px;
62
color: theme-color.$on-surface;
63
font-weight: normal;
64
&:disabled {
66
color: theme-color.disabled(theme-color.$on-surface);
67
}
68
}
69
&.budgie-menu {
71
.container {
72
padding: 0;
73
}
74
// .sidebar,
76
scrollbar,
77
entry.search {
78
background-color: transparent;
79
}
80
entry.search {
82
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
83
border-image: none;
84
border-radius: 0;
85
box-shadow: none;
86
font-size: 120%;
87
}
88
button.flat:not(.image-button) {
90
min-height: 32px;
91
padding: 0 8px;
92
border-radius: 0;
93
@include drawing.list-item;
95
&:checked {
97
background-color: theme-color.$selected-overlay;
98
}
99
// remove pointless indicator
101
&:checked:disabled {
102
background-color: transparent;
103
}
104
}
105
}
106
&.user-menu {
108
.container {
109
padding: 8px;
110
}
111
separator {
113
margin: 4px 0;
114
}
115
}
116
&.sound-popover {
118
separator {
119
margin: 3px 0;
120
}
121
}
122
&.night-light-indicator {
124
.container {
125
padding: 8px;
126
}
127
}
128
&.places-menu {
130
.container {
131
padding: 8px;
132
}
133
// FIXME: untested
135
.message-bar {
136
// margin-bottom: 4px;
137
}
138
.name-button {
140
image {
141
&:dir(ltr) {
142
margin-right: 8px - 5px;
143
}
144
&:dir(rtl) {
146
margin-left: 8px - 5px;
147
}
148
}
149
}
150
.unmount-button {
152
margin: (theme.$menuitem-size - theme.$small-size) / 2;
153
padding: 0;
154
}
155
.places-section-header {
157
}
158
.places-list:not(.always-expand) {
160
margin-top: 4px;
161
padding-top: 4px;
162
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
163
}
164
// FIXME: untested
166
.unlock-area {
167
entry {
168
}
169
button {
171
}
172
}
173
// use such sizes for consistency with other hard-coded dim-label sizes
175
.alternative-label {
176
padding: 3px;
177
font-size: 15px;
178
}
179
}
180
&.workspace-popover {
182
.container {
183
padding: 8px;
184
}
185
separator {
187
margin: 4px 0;
188
}
189
flowboxchild {
191
padding: 0;
192
}
193
}
194
}
195
// FIXME: workspace has unnecessary/unknown margin
197
.workspace-switcher {
198
.workspace-layout {
199
border: 0 solid theme-color.divider(theme-color.$on-panel);
200
.top &,
202
.bottom & {
203
&:dir(ltr) {
204
border-left-width: 1px;
205
}
206
&:dir(rtl) {
208
border-right-width: 1px;
209
}
210
}
211
.left &,
213
.right & {
214
border-top-width: 1px;
215
}
216
}
217
.workspace-item,
219
.workspace-add-button {
220
border: 0 solid theme-color.divider(theme-color.$on-panel);
221
.top &,
223
.bottom & {
224
&:dir(ltr) {
225
border-right-width: 1px;
226
}
227
&:dir(rtl) {
229
border-left-width: 1px;
230
}
231
}
232
.left &,
234
.right & {
235
border-bottom-width: 1px;
236
}
237
}
238
.workspace-item {
240
transition: theme.$transition;
241
&.current-workspace {
243
background-color: theme-color.activated-overlay(theme-color.$on-panel);
244
}
245
}
246
.workspace-add-button {
248
&:hover {
249
box-shadow: none;
250
}
251
&:active {
253
background-image: none;
254
}
255
&:active image {
257
margin: 1px 0 -1px;
258
}
259
}
260
.workspace-icon-button {
262
// to overwrite the .budgie-panel button style below
263
.budgie-panel & {
264
min-height: 24px;
265
min-width: 24px;
266
padding: 0;
267
border-radius: theme.$corner-radius;
268
}
269
}
270
}
271
// Menu Button
273
button.budgie-menu-launcher {
274
// padding: 0 2px;
275
}
276
// Raven Trigger
278
button.raven-trigger {
279
// padding: 0 4px;
280
}
281
// Panel
283
.budgie-panel {
284
transition: background-color theme.$duration theme.$ease-out;
285
background-color: theme-color.$panel;
286
color: theme-color.hint(theme-color.$on-panel);
287
font-weight: 500;
288
&.transparent {
290
background-color: theme-color.$scrim;
291
color: theme-color.hint(theme-color.$on-scrim);
292
}
293
button {
295
min-height: 16px;
296
min-width: 16px;
297
padding: 0;
298
border-radius: 0;
299
color: theme-color.hint(theme-color.$on-panel);
300
@include drawing.ink-color(theme-color.$on-panel, $button-style: "flat");
301
&:disabled {
303
background-color: transparent;
304
color: theme-color.disabled-hint(theme-color.$on-panel);
305
}
306
&:checked {
308
$background-color: theme-color.activated-overlay(theme-color.$on-panel);
309
color: theme-color.$on-panel;
310
@include drawing.ink-color(theme-color.$on-panel, $button-style: "flat", $on: $background-color);
311
&:disabled {
313
background-color: theme-color.activated-overlay(theme-color.$on-panel);
314
color: theme-color.disabled(theme-color.$on-panel);
315
}
316
}
317
}
318
&.horizontal button {
320
padding: 0 4px;
321
}
322
&.vertical button {
324
padding: 4px 0;
325
}
326
separator {
328
background-color: theme-color.stroke(theme-color.$on-panel);
329
}
330
// used to indicate unread notifications
332
.alert {
333
color: theme-color.error(theme-color.$on-panel);
334
}
335
// End Section needs to be fancy
337
.end-region {
338
// background-color: rgba(0,0,0,0.2);
339
}
340
// budgie-pixel-saver-applet
342
.titlebar:not(headerbar) {
343
min-height: 0;
344
padding: 0;
345
box-shadow: none;
346
background-color: transparent;
347
color: theme-color.$on-panel;
348
button:not(.suggested-action):not(.destructive-action) {
350
color: theme-color.hint(theme-color.$on-panel);
351
}
352
}
353
// Tasklist
355
#tasklist-button {
356
padding: 0 4px;
357
@extend %underscores;
359
}
360
&.vertical #tasklist-button {
362
min-height: 32px;
363
}
364
// Icon Tasklist
366
button.flat.launcher {
367
padding: 0;
368
@extend %underscores;
370
// for indicator colors
372
&:not(:checked) {
373
color: theme-color.disabled(theme-color.$on-panel);
374
&:disabled {
376
color: theme-color.disabled-hint(theme-color.$on-panel);
377
}
378
}
379
}
380
.unpinned button.flat.launcher,
382
.pinned button.flat.launcher.running {
383
@extend %underscores-checked;
384
}
385
}
386
$underscores-list:
388
(top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
389
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
390
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
391
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0);
392
%underscores {
394
@each $pos, $b_pos, $b_wid in $underscores-list {
395
.#{$pos} & {
396
& {
397
border-image:
398
radial-gradient(
399
circle closest-corner at #{$b_pos},
400
currentcolor 0%,
401
transparent 0%
402
) 0 0 0 0 / 0 0 0 0;
403
}
404
@at-root %underscores-checked,
406
&:checked {
407
border-image:
408
radial-gradient(
409
circle closest-corner at #{$b_pos},
410
currentcolor 100%,
411
transparent 0%
412
) #{$b_wid};
413
}
414
}
415
}
416
}
417
frame.raven-frame > border {
419
border-style: none;
420
box-shadow: theme.$shadow-z16;
421
}
422
$pos_list: (top: bottom, bottom: top, left: right, right: left);
424
@each $pos, $b_pos in $pos_list {
426
// Panel borders
427
.#{$pos} .budgie-panel {
428
// border-#{$b_pos}: 1px solid divider($on-surface);
429
}
430
// Raven borders
432
.#{$pos} frame.raven-frame > border {
433
margin-#{$b_pos}: 32px;
434
// border-#{$b_pos}: 1px solid divider($on-surface);
435
}
436
// Shadows
438
.#{$pos} .shadow-block {
439
// background-image: linear-gradient(to $b_pos, divider($on-surface), transparent);
440
}
441
}
442
// Raven
444
.raven {
445
background-color: theme-color.$surface-z8;
446
list {
448
// background-color: transparent;
449
}
450
// remove extra space between box and .raven-header.bottom
452
> box:not(:only-child) {
453
margin-bottom: -10px;
454
}
455
.raven-header {
457
min-height: theme.$medium-size;
458
padding: 3px;
459
// Adopt tabs style only for .top
461
&.top {
462
padding: 0;
463
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
464
stackswitcher.linked > button {
466
@extend %button-flat-activatable;
467
margin: -4px 0 -5px; // remove unwanted vertical margins
469
padding: 0 16px;
470
min-height: theme.$large-size;
471
border-image:
472
radial-gradient(
473
circle closest-corner at center calc(100% - 1px),
474
theme-color.$primary 0%,
475
transparent 0%
476
) 0 0 0 / 0 0 0;
477
border-radius: 0;
478
&:checked {
480
border-image:
481
radial-gradient(
482
circle closest-corner at center calc(100% - 1px),
483
theme-color.$primary 100%,
484
transparent 0%
485
) 0 0 2 / 0 0 2px;
486
background-color: transparent;
487
}
488
}
489
}
490
&.bottom {
492
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
493
}
494
}
495
stack {
497
// remove extra space in Notifications stack
498
.raven-header {
499
margin-top: -6px;
500
}
501
// remove extra spaces in Applets stack
503
scrolledwindow .raven-header {
504
margin-top: -8px;
505
}
506
}
507
.expander-button {
509
border-radius: theme.$circular-radius;
510
}
511
.raven-background {
513
// applet background between two headers
514
&.middle {
515
// border-bottom-style: none;
516
}
517
// Adopt Choice chips style
519
stackswitcher.linked > button {
520
margin: -2px 8px 9px;
521
padding: 0 12px;
522
min-height: 32px;
523
border-radius: theme.$circular-radius;
524
color: theme-color.hint(theme-color.$on-surface);
525
font-weight: normal;
526
@include drawing.ink-color(theme-color.$on-surface, $button-style: "flat", $on: theme-color.fill(theme-color.$on-surface));
527
&:checked {
529
color: theme-color.$primary;
530
@include drawing.ink-color(theme-color.$primary, $button-style: "flat", $on: theme-color.activated-overlay(theme-color.$primary));
531
}
532
&:not(:first-child) {
534
margin-left: 0;
535
}
536
}
537
// Default music icon
539
> overlay > widget > image {
540
color: theme-color.fill(theme-color.$on-surface);
541
}
542
}
543
revealer > .raven-background {
545
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
546
}
547
.raven-header + .raven-background {
549
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
550
}
551
// Application block in Notifications stack
553
viewport.frame > list > row {
554
// Remove all effects. This should be just a container.
555
padding: 0;
556
box-shadow: none;
557
background: none;
558
&:not(:first-child) {
560
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
561
}
562
> box {
564
// Remove awkward hard-coded margins
565
margin-top: -5px;
566
margin-left: -5px;
567
margin-bottom: -5px;
568
// Application header
570
> box {
571
padding: 6px;
572
margin-bottom: -10px; // Remove hard-coded spacing
573
}
574
// Notifications
576
> list > row {
577
padding: 8px;
578
> box {
580
margin-bottom: -5px; // Remove hard-coded margin-bottom
581
> box {
583
// Title
584
> label {
585
font-weight: bold;
586
}
587
// Close button
589
> button.image-button {
590
padding: 0;
591
}
592
}
593
> label {
595
margin-top: -6px; // For less spacing: 10 -> 4
596
font-size: smaller;
597
}
598
}
599
}
600
}
601
}
602
.powerstrip button {
604
margin: 2px 0 1px;
605
padding: (theme.$large-size - 24px) / 2;
606
}
607
.option-subtitle {
609
font-size: smaller;
610
}
611
}
612
// Calendar
614
calendar.raven-calendar {
615
// padding: 3px;
616
border-style: none;
617
background-color: transparent;
618
&:selected {
620
border-radius: theme.$corner-radius;
621
background-color: theme-color.$selected-overlay;
622
}
623
}
624
// MPRIS Applet
626
.raven-mpris {
627
background-color: theme-color.$scrim;
628
color: theme-color.$on-scrim;
629
label {
631
min-height: 24px;
632
}
633
button.image-button {
635
padding: (theme.$large-size - 24px) / 2;
636
color: theme-color.hint(theme-color.$on-scrim);
637
@include drawing.ink-color(theme-color.$on-scrim, $button-style: "flat");
638
}
639
}
640
// Notifications
642
.budgie-notification-window {
643
background-color: transparent;
644
}
645
.budgie-notification {
647
.notification-title {
648
font-size: 120%;
649
}
650
.notification-body {
652
color: theme-color.hint(theme-color.$on-surface);
653
}
654
}
655
// On Screen Display in Budgie
657
.budgie-osd-window {
658
@extend .budgie-notification-window;
659
}
660
// Internal part of the OSD
662
.budgie-osd {
663
.budgie-osd-text {
664
font-size: 120%;
665
}
666
}
667
// Alt+tab switcher in Budgie
669
.budgie-switcher-window {
670
@extend .budgie-notification-window;
671
}
672
// Internal part of the Switcher
674
.budgie-switcher {
675
@extend .budgie-notification;
676
}
677
.drop-shadow {
679
margin: 5px 9px;
680
padding: 3px;
681
border-radius: theme.$corner-radius;
682
box-shadow: theme.$shadow-z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
683
background-color: theme-color.$surface-z8;
684
button {
686
@extend %button-flat;
687
&.text-button:not(:disabled) {
689
color: theme-color.$primary;
690
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
691
}
692
}
693
.linked > button {
695
margin-right: theme.$container-padding;
696
}
697
}
698
%budgie_dialog {
700
border-radius: theme.$corner-radius;
701
box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
702
background-color: theme-color.$surface-z8;
703
decoration {
705
border-radius: theme.$corner-radius;
706
}
707
}
708
// Session Dialog
710
.budgie-session-dialog {
711
@extend %budgie_dialog;
712
> box {
714
padding: 8px;
715
}
716
// Hide power icon
718
image {
719
margin: -8px;
720
-gtk-icon-transform: scale(0);
721
}
722
label:not(:last-child),
724
.dialog-title {
725
margin-bottom: 8px;
726
font-size: 20px;
727
font-weight: 500;
728
}
729
.dialog-title + label {
731
color: theme-color.hint(theme-color.$on-surface);
732
}
733
.linked.horizontal > button {
735
@extend %button-flat;
736
&:not(:last-child) {
738
margin-right: 8px;
739
}
740
&:not(:disabled) {
742
color: theme-color.$primary;
743
@include drawing.ink-color(theme-color.$primary, $button-style: "flat");
744
}
745
}
746
}
747
// PolKit Dialog
749
.budgie-polkit-dialog {
750
@extend %budgie_dialog;
751
.message {
753
color: theme-color.hint(theme-color.$on-surface);
754
}
755
.failure {
757
color: theme-color.$error;
758
}
759
}
760
// Run Dialog
762
.budgie-run-dialog {
763
@extend %budgie_dialog;
764
entry.search {
766
font-size: 120%;
767
padding: theme.$container-padding 8px + theme.$container-padding;
768
border-image: none;
769
box-shadow: none;
770
background-color: transparent;
771
}
772
list {
774
padding: 4px 0;
775
// background-color: transparent;
776
.dim-label {
778
color: inherit;
779
}
780
}
781
scrolledwindow {
783
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
784
}
785
scrollbar {
787
&.right,
788
&.bottom {
789
border-bottom-right-radius: theme.$corner-radius;
790
}
791
&.left,
793
&.bottom {
794
border-bottom-left-radius: theme.$corner-radius;
795
}
796
}
797
}
798