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-z8;
32
.container {
34
padding: 2px;
35
}
36
border {
38
border: none;
39
background-color: transparent;
40
}
41
list {
43
// background-color: transparent;
44
}
45
row {
47
padding: 0;
48
&:hover {
50
box-shadow: none;
51
}
52
}
53
button.flat:not(.image-button) {
55
min-height: $menuitem-size;
56
padding: 0 8px;
57
color: $on-surface;
58
font-weight: normal;
59
&:disabled {
61
color: disabled($on-surface);
62
}
63
}
64
&.budgie-menu {
66
.container {
67
padding: 0;
68
}
69
// .sidebar,
71
scrollbar,
72
entry.search {
73
background-color: transparent;
74
}
75
entry.search {
77
border-bottom: 1px solid divider($on-surface);
78
border-image: none;
79
border-radius: 0;
80
box-shadow: none;
81
font-size: 120%;
82
}
83
button.flat:not(.image-button) {
85
min-height: 32px;
86
padding: 0 8px;
87
border-radius: 0;
88
@include list-item;
90
&:checked {
92
background-color: $overlay-selected;
93
}
94
// remove pointless indicator
96
&:checked:disabled {
97
background-color: transparent;
98
}
99
}
100
}
101
&.user-menu {
103
.container {
104
padding: 8px;
105
}
106
separator {
108
margin: 4px 0;
109
}
110
}
111
&.sound-popover {
113
separator {
114
margin: 3px 0;
115
}
116
}
117
&.night-light-indicator {
119
.container {
120
padding: 8px;
121
}
122
}
123
&.places-menu {
125
.container {
126
padding: 8px;
127
}
128
// FIXME: untested
130
.message-bar {
131
// margin-bottom: 4px;
132
}
133
.name-button {
135
image {
136
&:dir(ltr) {
137
margin-right: 8px - 5px;
138
}
139
&:dir(rtl) {
141
margin-left: 8px - 5px;
142
}
143
}
144
}
145
.unmount-button {
147
margin: ($menuitem-size - $small-size) / 2;
148
padding: 0;
149
}
150
.places-section-header {
152
}
153
.places-list:not(.always-expand) {
155
margin-top: 4px;
156
padding-top: 4px;
157
border-top: 1px solid divider($on-surface);
158
}
159
// FIXME: untested
161
.unlock-area {
162
entry {
163
}
164
button {
166
}
167
}
168
// use such sizes for consistency with other hard-coded dim-label sizes
170
.alternative-label {
171
padding: 3px;
172
font-size: 15px;
173
}
174
}
175
&.workspace-popover {
177
.container {
178
padding: 8px;
179
}
180
separator {
182
margin: 4px 0;
183
}
184
flowboxchild {
186
padding: 0;
187
}
188
}
189
}
190
// FIXME: workspace has unnecessary/unknown margin
192
.workspace-switcher {
193
.workspace-layout {
194
border: 0 solid divider($on-panel);
195
.top &,
197
.bottom & {
198
&:dir(ltr) {
199
border-left-width: 1px;
200
}
201
&:dir(rtl) {
203
border-right-width: 1px;
204
}
205
}
206
.left &,
208
.right & {
209
border-top-width: 1px;
210
}
211
}
212
.workspace-item,
214
.workspace-add-button {
215
border: 0 solid divider($on-panel);
216
.top &,
218
.bottom & {
219
&:dir(ltr) {
220
border-right-width: 1px;
221
}
222
&:dir(rtl) {
224
border-left-width: 1px;
225
}
226
}
227
.left &,
229
.right & {
230
border-bottom-width: 1px;
231
}
232
}
233
.workspace-item {
235
transition: $transition;
236
&.current-workspace {
238
background-color: overlay("activated", $on-panel);
239
}
240
}
241
.workspace-add-button {
243
&:hover {
244
box-shadow: none;
245
}
246
&:active {
248
background-image: none;
249
}
250
&:active image {
252
margin: 1px 0 -1px;
253
}
254
}
255
.workspace-icon-button {
257
// to overwrite the .budgie-panel button style below
258
.budgie-panel & {
259
min-height: 24px;
260
min-width: 24px;
261
padding: 0;
262
border-radius: $corner-radius;
263
}
264
}
265
}
266
// Menu Button
268
button.budgie-menu-launcher {
269
// padding: 0 2px;
270
}
271
// Raven Trigger
273
button.raven-trigger {
274
// padding: 0 4px;
275
}
276
// Panel
278
.budgie-panel {
279
transition: background-color $duration $ease-out;
280
background-color: $panel;
281
color: hint($on-panel);
282
font-weight: 500;
283
&.transparent {
285
background-color: $scrim;
286
color: hint($on-scrim);
287
}
288
button {
290
min-height: 16px;
291
min-width: 16px;
292
padding: 0;
293
border-radius: 0;
294
color: hint($on-panel);
295
@include ink-color($on-panel, $button-style: "flat");
296
&:disabled {
298
background-color: transparent;
299
color: disabled-hint($on-panel);
300
}
301
&:checked {
303
$background-color: overlay("activated", $on-panel);
304
color: $on-panel;
305
@include ink-color($on-panel, $button-style: "flat", $on: $background-color);
306
&:disabled {
308
background-color: overlay("activated", $on-panel);
309
color: disabled($on-panel);
310
}
311
}
312
}
313
&.horizontal button {
315
padding: 0 4px;
316
}
317
&.vertical button {
319
padding: 4px 0;
320
}
321
separator {
323
background-color: stroke($on-panel);
324
}
325
// used to indicate unread notifications
327
.alert {
328
color: error($on-panel);
329
}
330
// End Section needs to be fancy
332
.end-region {
333
// background-color: rgba(0,0,0,0.2);
334
}
335
// budgie-pixel-saver-applet
337
.titlebar:not(headerbar) {
338
min-height: 0;
339
padding: 0;
340
box-shadow: none;
341
background-color: transparent;
342
color: $on-panel;
343
button:not(.suggested-action):not(.destructive-action) {
345
color: hint($on-panel);
346
}
347
}
348
// Tasklist
350
#tasklist-button {
351
padding: 0 4px;
352
@extend %underscores;
354
}
355
&.vertical #tasklist-button {
357
min-height: 32px;
358
}
359
// Icon Tasklist
361
button.flat.launcher {
362
padding: 0;
363
@extend %underscores;
365
// for indicator colors
367
&:not(:checked) {
368
color: disabled($on-panel);
369
&:disabled {
371
color: disabled-hint($on-panel);
372
}
373
}
374
}
375
.unpinned button.flat.launcher,
377
.pinned button.flat.launcher.running {
378
@extend %underscores-checked;
379
}
380
}
381
$underscores-list:
383
(top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
384
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
385
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
386
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0);
387
%underscores {
389
@each $pos, $b_pos, $b_wid in $underscores-list {
390
.#{$pos} & {
391
& {
392
border-image:
393
radial-gradient(
394
circle closest-corner at #{$b_pos},
395
currentcolor 0%,
396
transparent 0%
397
) 0 0 0 0 / 0 0 0 0;
398
}
399
@at-root %underscores-checked,
401
&:checked {
402
border-image:
403
radial-gradient(
404
circle closest-corner at #{$b_pos},
405
currentcolor 100%,
406
transparent 0%
407
) #{$b_wid};
408
}
409
}
410
}
411
}
412
frame.raven-frame > border {
414
border-style: none;
415
box-shadow: $shadow-z16;
416
}
417
$pos_list: (top: bottom, bottom: top, left: right, right: left);
419
@each $pos, $b_pos in $pos_list {
421
// Panel borders
422
.#{$pos} .budgie-panel {
423
// border-#{$b_pos}: 1px solid divider($on-surface);
424
}
425
// Raven borders
427
.#{$pos} frame.raven-frame > border {
428
margin-#{$b_pos}: 32px;
429
// border-#{$b_pos}: 1px solid divider($on-surface);
430
}
431
// Shadows
433
.#{$pos} .shadow-block {
434
// background-image: linear-gradient(to $b_pos, divider($on-surface), transparent);
435
}
436
}
437
// Raven
439
.raven {
440
background-color: $surface-z8;
441
list {
443
// background-color: transparent;
444
}
445
// remove extra space between box and .raven-header.bottom
447
> box:not(:only-child) {
448
margin-bottom: -10px;
449
}
450
.raven-header {
452
min-height: $medium-size;
453
padding: 3px;
454
// Adopt tabs style only for .top
456
&.top {
457
padding: 0;
458
border-bottom: 1px solid divider($on-surface);
459
stackswitcher.linked > button {
461
@extend %button-flat-activatable;
462
margin: -4px 0 -5px; // remove unwanted vertical margins
464
padding: 0 16px;
465
min-height: $large-size;
466
border-image:
467
radial-gradient(
468
circle closest-corner at center calc(100% - 1px),
469
$primary 0%,
470
transparent 0%
471
) 0 0 0 / 0 0 0;
472
border-radius: 0;
473
&:checked {
475
border-image:
476
radial-gradient(
477
circle closest-corner at center calc(100% - 1px),
478
$primary 100%,
479
transparent 0%
480
) 0 0 2 / 0 0 2px;
481
background-color: transparent;
482
}
483
}
484
}
485
&.bottom {
487
border-top: 1px solid divider($on-surface);
488
}
489
}
490
stack {
492
// remove extra space in Notifications stack
493
.raven-header {
494
margin-top: -6px;
495
}
496
// remove extra spaces in Applets stack
498
scrolledwindow .raven-header {
499
margin-top: -8px;
500
}
501
}
502
.expander-button {
504
border-radius: $circular-radius;
505
}
506
.raven-background {
508
// applet background between two headers
509
&.middle {
510
// border-bottom-style: none;
511
}
512
// Adopt Choice chips style
514
stackswitcher.linked > button {
515
margin: -2px 8px 9px;
516
padding: 0 12px;
517
min-height: 32px;
518
border-radius: $circular-radius;
519
color: hint($on-surface);
520
font-weight: normal;
521
@include ink-color($on-surface, $button-style: "flat", $on: fill($on-surface));
522
&:checked {
524
color: $primary;
525
@include ink-color($primary, $button-style: "flat", $on: overlay("activated", $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, $button-style: "flat");
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-z8);
678
background-color: $surface-z8;
679
button {
681
@extend %button-flat;
682
&.text-button:not(:disabled) {
684
color: $primary;
685
@include ink-color($primary, $button-style: "flat");
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-z8);
697
background-color: $surface-z8;
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, $button-style: "flat");
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