ASCII text
1
// based css:
2
// https://github.com/solus-project/budgie-desktop/tree/master/src/theme
3
/**
5
* Budgie Desktop
6
*/
7
// Container for both the "panel" area and the shadow. Wise to keep
9
// this transparent..
10
.budgie-container {
11
background-color: transparent;
12
}
13
.budgie-settings-window buttonbox.inline-toolbar {
15
border-style: none none solid;
16
button {
18
border-radius: $corner-radius;
19
@extend %button-flat-basic;
21
}
22
}
23
.budgie-popover {
25
border-style: solid;
26
border-width: 1px;
27
border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
28
border-radius: $corner-radius + 1px;
29
box-shadow: $shadow-z4;
30
background-clip: padding-box;
31
background-color: $surface;
32
.container {
34
padding: 2px;
35
}
36
border {
38
border: none;
39
}
40
list {
42
background-color: transparent;
43
}
44
row {
46
padding: 0;
47
&:hover {
49
box-shadow: none;
50
}
51
}
52
button.flat:not(.image-button) {
54
min-height: $menuitem-size;
55
padding: 0 8px;
56
color: $on-surface;
57
font-weight: normal;
58
&:disabled {
60
color: disabled($on-surface);
61
}
62
}
63
&.budgie-menu {
65
.container {
66
padding: 0;
67
}
68
.sidebar,
70
scrollbar,
71
entry.search {
72
background-color: transparent;
73
}
74
entry.search {
76
border-bottom: 1px solid divider($on-surface);
77
border-image: none;
78
border-radius: 0;
79
box-shadow: none;
80
font-size: 120%;
81
}
82
button.flat:not(.image-button) {
84
min-height: 32px;
85
padding: 0 8px;
86
border-radius: 0;
87
@include list-item;
89
&:checked {
91
background-color: $overlay-selected;
92
}
93
// remove pointless indicator
95
&:checked:disabled {
96
background-color: transparent;
97
}
98
}
99
}
100
&.user-menu {
102
.container {
103
padding: 8px;
104
}
105
separator {
107
margin: 4px 0;
108
}
109
}
110
&.sound-popover {
112
separator {
113
margin: 3px 0;
114
}
115
}
116
&.night-light-indicator {
118
.container {
119
padding: 8px;
120
}
121
}
122
&.places-menu {
124
.container {
125
padding: 8px;
126
}
127
// FIXME: untested
129
.message-bar {
130
// margin-bottom: 4px;
131
}
132
.name-button {
134
image {
135
&:dir(ltr) {
136
margin-right: 8px - 5px;
137
}
138
&:dir(rtl) {
140
margin-left: 8px - 5px;
141
}
142
}
143
}
144
.unmount-button {
146
margin: ($menuitem-size - $small-size) / 2;
147
padding: 0;
148
}
149
.places-section-header {
151
}
152
.places-list:not(.always-expand) {
154
margin-top: 4px;
155
padding-top: 4px;
156
border-top: 1px solid divider($on-surface);
157
}
158
// FIXME: untested
160
.unlock-area {
161
entry {
162
}
163
button {
165
}
166
}
167
// use such sizes for consistency with other hard-coded dim-label sizes
169
.alternative-label {
170
padding: 3px;
171
font-size: 15px;
172
}
173
}
174
&.workspace-popover {
176
.container {
177
padding: 8px;
178
}
179
separator {
181
margin: 4px 0;
182
}
183
flowboxchild {
185
padding: 0;
186
}
187
}
188
}
189
// FIXME: workspace has unnecessary/unknown margin
191
.workspace-switcher {
192
.workspace-layout {
193
border: 0 solid divider($on-panel);
194
.top &,
196
.bottom & {
197
&:dir(ltr) {
198
border-left-width: 1px;
199
}
200
&:dir(rtl) {
202
border-right-width: 1px;
203
}
204
}
205
.left &,
207
.right & {
208
border-top-width: 1px;
209
}
210
}
211
.workspace-item,
213
.workspace-add-button {
214
border: 0 solid divider($on-panel);
215
.top &,
217
.bottom & {
218
&:dir(ltr) {
219
border-right-width: 1px;
220
}
221
&:dir(rtl) {
223
border-left-width: 1px;
224
}
225
}
226
.left &,
228
.right & {
229
border-bottom-width: 1px;
230
}
231
}
232
.workspace-item {
234
transition: $transition;
235
&.current-workspace {
237
background-color: overlay("activated", $on-panel);
238
}
239
}
240
.workspace-add-button {
242
&:hover {
243
box-shadow: none;
244
}
245
&:active {
247
background-image: none;
248
}
249
&:active image {
251
margin: 1px 0 -1px;
252
}
253
}
254
.workspace-icon-button {
256
// to overwrite the .budgie-panel button style below
257
.budgie-panel & {
258
min-height: 24px;
259
min-width: 24px;
260
padding: 0;
261
border-radius: $corner-radius;
262
}
263
}
264
}
265
// Menu Button
267
button.budgie-menu-launcher {
268
// padding: 0 2px;
269
}
270
// Raven Trigger
272
button.raven-trigger {
273
// padding: 0 4px;
274
}
275
// Panel
277
.budgie-panel {
278
transition: background-color $duration $ease-out;
279
background-color: $panel;
280
color: hint($on-panel);
281
font-weight: 500;
282
&.transparent {
284
background-color: $scrim;
285
color: hint($on-scrim);
286
}
287
button {
289
min-height: 16px;
290
min-width: 16px;
291
padding: 0;
292
border-radius: 0;
293
background-color: transparent;
294
color: hint($on-panel);
295
@include ink-color($on-panel);
296
&:disabled {
298
color: disabled-hint($on-panel);
299
}
300
&:checked {
302
background-color: overlay("activated", $on-panel);
303
color: $on-panel;
304
@include ink-color($on-panel);
305
&:disabled {
307
color: disabled($on-panel);
308
}
309
}
310
}
311
&.horizontal button {
313
padding: 0 4px;
314
}
315
&.vertical button {
317
padding: 4px 0;
318
}
319
separator {
321
background-color: stroke($on-panel);
322
}
323
// used to indicate unread notifications
325
.alert {
326
color: error($on-panel);
327
}
328
// End Section needs to be fancy
330
.end-region {
331
// background-color: rgba(0,0,0,0.2);
332
}
333
// budgie-pixel-saver-applet
335
.titlebar:not(headerbar) {
336
min-height: 0;
337
padding: 0;
338
box-shadow: none;
339
background-color: transparent;
340
color: $on-panel;
341
button:not(.suggested-action):not(.destructive-action) {
343
color: hint($on-panel);
344
}
345
}
346
// Tasklist
348
#tasklist-button {
349
padding: 0 4px;
350
@extend %underscores;
352
}
353
&.vertical #tasklist-button {
355
min-height: 32px;
356
}
357
// Icon Tasklist
359
button.flat.launcher {
360
padding: 0;
361
@extend %underscores;
363
// for indicator colors
365
&:not(:checked) {
366
color: disabled($on-panel);
367
&:disabled {
369
color: disabled-hint($on-panel);
370
}
371
}
372
}
373
.unpinned button.flat.launcher,
375
.pinned button.flat.launcher.running {
376
@extend %underscores-checked;
377
}
378
}
379
$underscores-list:
381
(top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
382
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
383
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
384
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0);
385
%underscores {
387
@each $pos, $b_pos, $b_wid in $underscores-list {
388
.#{$pos} & {
389
& {
390
border-image:
391
radial-gradient(
392
circle closest-corner at #{$b_pos},
393
currentcolor 0%,
394
transparent 0%
395
) 0 0 0 0 / 0 0 0 0;
396
}
397
@at-root %underscores-checked,
399
&:checked {
400
border-image:
401
radial-gradient(
402
circle closest-corner at #{$b_pos},
403
currentcolor 100%,
404
transparent 0%
405
) #{$b_wid};
406
}
407
}
408
}
409
}
410
frame.raven-frame > border {
412
border-style: none;
413
box-shadow: $shadow-z16;
414
}
415
$pos_list: (top: bottom, bottom: top, left: right, right: left);
417
@each $pos, $b_pos in $pos_list {
419
// Panel borders
420
.#{$pos} .budgie-panel {
421
// border-#{$b_pos}: 1px solid divider($on-surface);
422
}
423
// Raven borders
425
.#{$pos} frame.raven-frame > border {
426
margin-#{$b_pos}: 32px;
427
// border-#{$b_pos}: 1px solid divider($on-surface);
428
}
429
// Shadows
431
.#{$pos} .shadow-block {
432
// background-image: linear-gradient(to $b_pos, divider($on-surface), transparent);
433
}
434
}
435
// Raven
437
.raven {
438
background-color: $surface;
439
list {
441
background-color: transparent;
442
}
443
// remove extra space between box and .raven-header.bottom
445
> box:not(:only-child) {
446
margin-bottom: -10px;
447
}
448
.raven-header {
450
min-height: $medium-size;
451
padding: 3px;
452
// Adopt tabs style only for .top
454
&.top {
455
padding: 0;
456
border-bottom: 1px solid divider($on-surface);
457
stackswitcher.linked > button {
459
@extend %button-flat-activatable;
460
margin: -4px 0 -5px; // remove unwanted vertical margins
462
padding: 0 16px;
463
min-height: $large-size;
464
border-image:
465
radial-gradient(
466
circle closest-corner at center calc(100% - 1px),
467
$primary 0%,
468
transparent 0%
469
) 0 0 0 / 0 0 0;
470
border-radius: 0;
471
&:checked {
473
border-image:
474
radial-gradient(
475
circle closest-corner at center calc(100% - 1px),
476
$primary 100%,
477
transparent 0%
478
) 0 0 2 / 0 0 2px;
479
background-color: transparent;
480
}
481
}
482
}
483
&.bottom {
485
border-top: 1px solid divider($on-surface);
486
}
487
}
488
stack {
490
// remove extra space in Notifications stack
491
.raven-header {
492
margin-top: -6px;
493
}
494
// remove extra spaces in Applets stack
496
scrolledwindow .raven-header {
497
margin-top: -8px;
498
}
499
}
500
.expander-button {
502
border-radius: $circular-radius;
503
}
504
.raven-background {
506
// applet background between two headers
507
&.middle {
508
// border-bottom-style: none;
509
}
510
// Adopt Choice chips style
512
stackswitcher.linked > button {
513
@extend %button-flat-activatable;
514
margin: -2px 8px 9px;
516
padding: 0 12px;
517
min-height: 32px;
518
border-radius: $circular-radius;
519
background-color: fill($on-surface);
520
font-weight: normal;
521
&:checked {
523
background-color: overlay("activated", $primary);
524
color: $primary;
525
@include ink-color($primary);
526
}
527
&:not(:first-child) {
529
margin-left: 0;
530
}
531
}
532
// Default music icon
534
> overlay > widget > image {
535
color: fill($on-surface);
536
}
537
}
538
revealer > .raven-background {
540
border-bottom: 1px solid divider($on-surface);
541
}
542
.raven-header + .raven-background {
544
border-top: 1px solid divider($on-surface);
545
}
546
// Application block in Notifications stack
548
viewport.frame > list > row {
549
// Remove all effects. This should be just a container.
550
padding: 0;
551
box-shadow: none;
552
background: none;
553
&:not(:first-child) {
555
border-top: 1px solid divider($on-surface);
556
}
557
> box {
559
// Remove awkward hard-coded margins
560
margin-top: -5px;
561
margin-left: -5px;
562
margin-bottom: -5px;
563
// Application header
565
> box {
566
padding: 6px;
567
margin-bottom: -10px; // Remove hard-coded spacing
568
}
569
// Notifications
571
> list > row {
572
padding: 8px;
573
> box {
575
margin-bottom: -5px; // Remove hard-coded margin-bottom
576
> box {
578
// Title
579
> label {
580
font-weight: bold;
581
}
582
// Close button
584
> button.image-button {
585
padding: 0;
586
}
587
}
588
> label {
590
margin-top: -6px; // For less spacing: 10 -> 4
591
font-size: smaller;
592
}
593
}
594
}
595
}
596
}
597
.powerstrip button {
599
margin: 2px 0 1px;
600
padding: ($large-size - 24px) / 2;
601
}
602
.option-subtitle {
604
font-size: smaller;
605
}
606
}
607
// Calendar
609
calendar.raven-calendar {
610
// padding: 3px;
611
border-style: none;
612
background-color: transparent;
613
&:selected {
615
border-radius: $corner-radius;
616
background-color: $overlay-selected;
617
}
618
}
619
// MPRIS Applet
621
.raven-mpris {
622
background-color: $scrim;
623
color: $on-scrim;
624
label {
626
min-height: 24px;
627
}
628
button.image-button {
630
padding: ($large-size - 24px) / 2;
631
color: hint($on-scrim);
632
@include ink-color($on-scrim);
633
}
634
}
635
// Notifications
637
.budgie-notification-window {
638
background-color: transparent;
639
}
640
.budgie-notification {
642
.notification-title {
643
font-size: 120%;
644
}
645
.notification-body {
647
color: hint($on-surface);
648
}
649
}
650
// On Screen Display in Budgie
652
.budgie-osd-window {
653
@extend .budgie-notification-window;
654
}
655
// Internal part of the OSD
657
.budgie-osd {
658
.budgie-osd-text {
659
font-size: 120%;
660
}
661
}
662
// Alt+tab switcher in Budgie
664
.budgie-switcher-window {
665
@extend .budgie-notification-window;
666
}
667
// Internal part of the Switcher
669
.budgie-switcher {
670
@extend .budgie-notification;
671
}
672
.drop-shadow {
674
margin: 5px 9px;
675
padding: 3px;
676
border-radius: $corner-radius;
677
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
678
background-color: $surface;
679
button {
681
@extend %button-flat;
682
&.text-button:not(:disabled) {
684
color: $primary;
685
@include ink-color($primary);
686
}
687
}
688
.linked > button {
690
margin-right: $container-padding;
691
}
692
}
693
%budgie_dialog {
695
border-radius: $corner-radius;
696
box-shadow: inset 0 1px highlight($surface);
697
background-color: $surface;
698
decoration {
700
border-radius: $corner-radius;
701
}
702
}
703
// Session Dialog
705
.budgie-session-dialog {
706
@extend %budgie_dialog;
707
> box {
709
padding: 8px;
710
}
711
// Hide power icon
713
image {
714
margin: -8px;
715
-gtk-icon-transform: scale(0);
716
}
717
label:not(:last-child),
719
.dialog-title {
720
margin-bottom: 8px;
721
font-size: 20px;
722
font-weight: 500;
723
}
724
.dialog-title + label {
726
color: hint($on-surface);
727
}
728
.linked.horizontal > button {
730
@extend %button-flat;
731
&:not(:last-child) {
733
margin-right: 8px;
734
}
735
&:not(:disabled) {
737
color: $primary;
738
@include ink-color($primary);
739
}
740
}
741
}
742
// PolKit Dialog
744
.budgie-polkit-dialog {
745
@extend %budgie_dialog;
746
.message {
748
color: hint($on-surface);
749
}
750
.failure {
752
color: $error;
753
}
754
}
755
// Run Dialog
757
.budgie-run-dialog {
758
@extend %budgie_dialog;
759
entry.search {
761
font-size: 120%;
762
padding: $container-padding 8px + $container-padding;
763
border-image: none;
764
box-shadow: none;
765
background-color: transparent;
766
}
767
list {
769
padding: 4px 0;
770
background-color: transparent;
771
.dim-label {
773
color: inherit;
774
}
775
}
776
scrolledwindow {
778
border-top: 1px solid divider($on-surface);
779
}
780
scrollbar {
782
&.right,
783
&.bottom {
784
border-bottom-right-radius: $corner-radius;
785
}
786
&.left,
788
&.bottom {
789
border-bottom-left-radius: $corner-radius;
790
}
791
}
792
}
793