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-color: $surface;
31
.container {
33
padding: 2px;
34
}
35
border {
37
border: none;
38
}
39
list {
41
background-color: transparent;
42
}
43
row {
45
padding: 0;
46
&:hover {
48
box-shadow: none;
49
}
50
}
51
button.flat:not(.image-button) {
53
min-height: $menuitem-size;
54
padding: 0 8px;
55
color: $on-surface;
56
font-weight: normal;
57
&:disabled {
59
color: disabled($on-surface);
60
}
61
}
62
&.budgie-menu {
64
.container {
65
padding: 0;
66
}
67
.sidebar,
69
scrollbar,
70
entry.search {
71
background-color: transparent;
72
}
73
entry.search {
75
border-bottom: 1px solid divider($on-surface);
76
border-image: none;
77
border-radius: 0;
78
box-shadow: none;
79
font-size: 120%;
80
}
81
button.flat:not(.image-button) {
83
min-height: 32px;
84
padding: 0 8px;
85
border-radius: 0;
86
@include list-item;
88
&:checked {
90
background-color: $overlay-selected;
91
}
92
// remove pointless indicator
94
&:checked:disabled {
95
background-color: transparent;
96
}
97
}
98
}
99
&.user-menu {
101
.container {
102
padding: 8px;
103
}
104
separator {
106
margin: 4px 0;
107
}
108
}
109
&.sound-popover {
111
separator {
112
margin: 3px 0;
113
}
114
}
115
&.night-light-indicator {
117
.container {
118
padding: 8px;
119
}
120
}
121
&.places-menu {
123
.container {
124
padding: 8px;
125
}
126
// FIXME: untested
128
.message-bar {
129
// margin-bottom: 4px;
130
}
131
.name-button {
133
image {
134
&:dir(ltr) {
135
margin-right: 8px - 5px;
136
}
137
&:dir(rtl) {
139
margin-left: 8px - 5px;
140
}
141
}
142
}
143
.unmount-button {
145
margin: ($menuitem-size - $small-size) / 2;
146
padding: 0;
147
}
148
.places-section-header {
150
}
151
.places-list:not(.always-expand) {
153
margin-top: 4px;
154
padding-top: 4px;
155
border-top: 1px solid divider($on-surface);
156
}
157
// FIXME: untested
159
.unlock-area {
160
entry {
161
}
162
button {
164
}
165
}
166
// use such sizes for consistency with other hard-coded dim-label sizes
168
.alternative-label {
169
padding: 3px;
170
font-size: 15px;
171
}
172
}
173
&.workspace-popover {
175
.container {
176
padding: 8px;
177
}
178
separator {
180
margin: 4px 0;
181
}
182
flowboxchild {
184
padding: 0;
185
}
186
}
187
}
188
// FIXME: workspace has unnecessary/unknown margin
190
.workspace-switcher {
191
.workspace-layout {
192
border: 0 solid divider($on-panel);
193
.top &,
195
.bottom & {
196
&:dir(ltr) {
197
border-left-width: 1px;
198
}
199
&:dir(rtl) {
201
border-right-width: 1px;
202
}
203
}
204
.left &,
206
.right & {
207
border-top-width: 1px;
208
}
209
}
210
.workspace-item,
212
.workspace-add-button {
213
border: 0 solid divider($on-panel);
214
.top &,
216
.bottom & {
217
&:dir(ltr) {
218
border-right-width: 1px;
219
}
220
&:dir(rtl) {
222
border-left-width: 1px;
223
}
224
}
225
.left &,
227
.right & {
228
border-bottom-width: 1px;
229
}
230
}
231
.workspace-item {
233
transition: $transition;
234
&.current-workspace {
236
background-color: overlay("activated", $on-panel);
237
}
238
}
239
.workspace-add-button {
241
&:hover {
242
box-shadow: none;
243
}
244
&:active {
246
background-image: none;
247
}
248
&:active image {
250
margin: 1px 0 -1px;
251
}
252
}
253
.workspace-icon-button {
255
// to overwrite the .budgie-panel button style below
256
.budgie-panel & {
257
min-height: 24px;
258
min-width: 24px;
259
padding: 0;
260
border-radius: $corner-radius;
261
}
262
}
263
}
264
// Menu Button
266
button.budgie-menu-launcher {
267
// padding: 0 2px;
268
}
269
// Raven Trigger
271
button.raven-trigger {
272
// padding: 0 4px;
273
}
274
// Panel
276
.budgie-panel {
277
transition: background-color $duration $ease-out;
278
background-color: $panel;
279
color: hint($on-panel);
280
font-weight: 500;
281
&.transparent {
283
background-color: $scrim;
284
color: hint($on-scrim);
285
}
286
button {
288
min-height: 16px;
289
min-width: 16px;
290
padding: 0;
291
border-radius: 0;
292
background-color: transparent;
293
color: hint($on-panel);
294
@include ink-color($on-panel);
295
&:disabled {
297
color: disabled-hint($on-panel);
298
}
299
&:checked {
301
background-color: overlay("activated", $on-panel);
302
color: $on-panel;
303
@include ink-color($on-panel);
304
&:disabled {
306
color: disabled($on-panel);
307
}
308
}
309
}
310
&.horizontal button {
312
padding: 0 4px;
313
}
314
&.vertical button {
316
padding: 4px 0;
317
}
318
separator {
320
background-color: stroke($on-panel);
321
}
322
// used to indicate unread notifications
324
.alert {
325
color: error($on-panel);
326
}
327
// End Section needs to be fancy
329
.end-region {
330
// background-color: rgba(0,0,0,0.2);
331
}
332
// budgie-pixel-saver-applet
334
.titlebar:not(headerbar) {
335
min-height: 0;
336
padding: 0;
337
box-shadow: none;
338
background-color: transparent;
339
color: $on-panel;
340
button:not(.suggested-action):not(.destructive-action) {
342
color: hint($on-panel);
343
}
344
}
345
// Tasklist
347
#tasklist-button {
348
padding: 0 4px;
349
@extend %underscores;
351
}
352
&.vertical #tasklist-button {
354
min-height: 32px;
355
}
356
// Icon Tasklist
358
button.flat.launcher {
359
padding: 0;
360
@extend %underscores;
362
// for indicator colors
364
&:not(:checked) {
365
color: disabled($on-panel);
366
&:disabled {
368
color: disabled-hint($on-panel);
369
}
370
}
371
}
372
.unpinned button.flat.launcher,
374
.pinned button.flat.launcher.running {
375
@extend %underscores-checked;
376
}
377
}
378
$underscores-list:
380
(top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
381
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
382
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
383
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0);
384
%underscores {
386
@each $pos, $b_pos, $b_wid in $underscores-list {
387
.#{$pos} & {
388
& {
389
border-image:
390
radial-gradient(
391
circle closest-corner at #{$b_pos},
392
currentcolor 0%,
393
transparent 0%
394
) 0 0 0 0 / 0 0 0 0;
395
}
396
@at-root %underscores-checked,
398
&:checked {
399
border-image:
400
radial-gradient(
401
circle closest-corner at #{$b_pos},
402
currentcolor 100%,
403
transparent 0%
404
) #{$b_wid};
405
}
406
}
407
}
408
}
409
frame.raven-frame > border {
411
border-style: none;
412
box-shadow: $shadow-z16;
413
}
414
$pos_list: (top: bottom, bottom: top, left: right, right: left);
416
@each $pos, $b_pos in $pos_list {
418
// Panel borders
419
.#{$pos} .budgie-panel {
420
// border-#{$b_pos}: 1px solid divider($on-surface);
421
}
422
// Raven borders
424
.#{$pos} frame.raven-frame > border {
425
margin-#{$b_pos}: 32px;
426
// border-#{$b_pos}: 1px solid divider($on-surface);
427
}
428
// Shadows
430
.#{$pos} .shadow-block {
431
// background-image: linear-gradient(to $b_pos, divider($on-surface), transparent);
432
}
433
}
434
// Raven
436
.raven {
437
background-color: $surface;
438
list {
440
background-color: transparent;
441
}
442
// remove extra space between box and .raven-header.bottom
444
> box:not(:only-child) {
445
margin-bottom: -10px;
446
}
447
.raven-header {
449
min-height: $medium-size;
450
padding: 3px;
451
// Adopt tabs style only for .top
453
&.top {
454
padding: 0;
455
border-bottom: 1px solid divider($on-surface);
456
stackswitcher.linked > button {
458
@extend %button-flat-activatable;
459
margin: -4px 0 -5px; // remove unwanted vertical margins
461
padding: 0 16px;
462
min-height: $large-size;
463
border-image:
464
radial-gradient(
465
circle closest-corner at center calc(100% - 1px),
466
$primary 0%,
467
transparent 0%
468
) 0 0 0 / 0 0 0;
469
border-radius: 0;
470
&:checked {
472
border-image:
473
radial-gradient(
474
circle closest-corner at center calc(100% - 1px),
475
$primary 100%,
476
transparent 0%
477
) 0 0 2 / 0 0 2px;
478
background-color: transparent;
479
}
480
}
481
}
482
&.bottom {
484
border-top: 1px solid divider($on-surface);
485
}
486
}
487
stack {
489
// remove extra space in Notifications stack
490
.raven-header {
491
margin-top: -6px;
492
}
493
// remove extra spaces in Applets stack
495
scrolledwindow .raven-header {
496
margin-top: -8px;
497
}
498
}
499
.expander-button {
501
border-radius: $circular-radius;
502
}
503
.raven-background {
505
// applet background between two headers
506
&.middle {
507
// border-bottom-style: none;
508
}
509
// Adopt Choice chips style
511
stackswitcher.linked > button {
512
@extend %button-flat-activatable;
513
margin: -2px 8px 9px;
515
padding: 0 12px;
516
min-height: 32px;
517
border-radius: $circular-radius;
518
background-color: fill($on-surface);
519
font-weight: normal;
520
&:checked {
522
background-color: overlay("activated", $primary);
523
color: $primary;
524
@include ink-color($primary);
525
}
526
&:not(:first-child) {
528
margin-left: 0;
529
}
530
}
531
// Default music icon
533
> overlay > widget > image {
534
color: fill($on-surface);
535
}
536
}
537
revealer > .raven-background {
539
border-bottom: 1px solid divider($on-surface);
540
}
541
.raven-header + .raven-background {
543
border-top: 1px solid divider($on-surface);
544
}
545
// Application block in Notifications stack
547
viewport.frame > list > row {
548
// Remove all effects. This should be just a container.
549
padding: 0;
550
box-shadow: none;
551
background: none;
552
&:not(:first-child) {
554
border-top: 1px solid divider($on-surface);
555
}
556
> box {
558
// Remove awkward hard-coded margins
559
margin-top: -5px;
560
margin-left: -5px;
561
margin-bottom: -5px;
562
// Application header
564
> box {
565
padding: 6px;
566
margin-bottom: -10px; // Remove hard-coded spacing
567
}
568
// Notifications
570
> list > row {
571
padding: 8px;
572
> box {
574
margin-bottom: -5px; // Remove hard-coded margin-bottom
575
> box {
577
// Title
578
> label {
579
font-weight: bold;
580
}
581
// Close button
583
> button.image-button {
584
padding: 0;
585
}
586
}
587
> label {
589
margin-top: -6px; // For less spacing: 10 -> 4
590
font-size: smaller;
591
}
592
}
593
}
594
}
595
}
596
.powerstrip button {
598
margin: 2px 0 1px;
599
padding: ($large-size - 24px) / 2;
600
}
601
.option-subtitle {
603
font-size: smaller;
604
}
605
}
606
// Calendar
608
calendar.raven-calendar {
609
// padding: 3px;
610
border-style: none;
611
background-color: transparent;
612
&:selected {
614
border-radius: $corner-radius;
615
background-color: $overlay-selected;
616
}
617
}
618
// MPRIS Applet
620
.raven-mpris {
621
background-color: $scrim;
622
color: $on-scrim;
623
label {
625
min-height: 24px;
626
}
627
button.image-button {
629
padding: ($large-size - 24px) / 2;
630
color: hint($on-scrim);
631
@include ink-color($on-scrim);
632
}
633
}
634
// Notifications
636
.budgie-notification-window {
637
background-color: transparent;
638
}
639
.budgie-notification {
641
.notification-title {
642
font-size: 120%;
643
}
644
.notification-body {
646
color: hint($on-surface);
647
}
648
}
649
// On Screen Display in Budgie
651
.budgie-osd-window {
652
@extend .budgie-notification-window;
653
}
654
// Internal part of the OSD
656
.budgie-osd {
657
.budgie-osd-text {
658
font-size: 120%;
659
}
660
}
661
// Alt+tab switcher in Budgie
663
.budgie-switcher-window {
664
@extend .budgie-notification-window;
665
}
666
// Internal part of the Switcher
668
.budgie-switcher {
669
@extend .budgie-notification;
670
}
671
.drop-shadow {
673
margin: 5px 9px;
674
padding: 3px;
675
border-radius: $corner-radius;
676
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
677
background-color: $surface;
678
button {
680
@extend %button-flat;
681
&.text-button:not(:disabled) {
683
color: $primary;
684
@include ink-color($primary);
685
}
686
}
687
.linked > button {
689
margin-right: $container-padding;
690
}
691
}
692
%budgie_dialog {
694
border-radius: $corner-radius;
695
box-shadow: inset 0 1px highlight($surface);
696
background-color: $surface;
697
decoration {
699
border-radius: $corner-radius;
700
}
701
}
702
// Session Dialog
704
.budgie-session-dialog {
705
@extend %budgie_dialog;
706
> box {
708
padding: 8px;
709
}
710
// Hide power icon
712
image {
713
margin: -8px;
714
-gtk-icon-transform: scale(0);
715
}
716
label:not(:last-child),
718
.dialog-title {
719
margin-bottom: 8px;
720
font-size: 20px;
721
font-weight: 500;
722
}
723
.dialog-title + label {
725
color: hint($on-surface);
726
}
727
.linked.horizontal > button {
729
@extend %button-flat;
730
&:not(:last-child) {
732
margin-right: 8px;
733
}
734
&:not(:disabled) {
736
color: $primary;
737
@include ink-color($primary);
738
}
739
}
740
}
741
// PolKit Dialog
743
.budgie-polkit-dialog {
744
@extend %budgie_dialog;
745
.message {
747
color: hint($on-surface);
748
}
749
.failure {
751
color: $error;
752
}
753
}
754
// Run Dialog
756
.budgie-run-dialog {
757
@extend %budgie_dialog;
758
entry.search {
760
font-size: 120%;
761
padding: $container-padding 8px + $container-padding;
762
border-image: none;
763
box-shadow: none;
764
background-color: transparent;
765
}
766
list {
768
padding: 4px 0;
769
background-color: transparent;
770
.dim-label {
772
color: inherit;
773
}
774
}
775
scrolledwindow {
777
border-top: 1px solid divider($on-surface);
778
}
779
scrollbar {
781
&.right,
782
&.bottom {
783
border-bottom-right-radius: $corner-radius;
784
}
785
&.left,
787
&.bottom {
788
border-bottom-left-radius: $corner-radius;
789
}
790
}
791
}
792