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
}
285
button {
287
min-height: 16px;
288
min-width: 16px;
289
padding: 0;
290
border-radius: 0;
291
color: hint($on-panel);
292
@include ink-color($on-panel);
293
&:disabled {
295
color: disabled-hint($on-panel);
296
}
297
&:checked {
299
color: $on-panel;
300
&:disabled {
302
color: disabled($on-panel);
303
}
304
}
305
}
306
&.horizontal button {
308
padding: 0 4px;
309
}
310
&.vertical button {
312
padding: 4px 0;
313
}
314
separator {
316
background-color: stroke($on-panel);
317
}
318
// used to indicate unread notifications
320
.alert {
321
color: primary($on-panel);
322
}
323
// End Section needs to be fancy
325
.end-region {
326
// background-color: rgba(0,0,0,0.2);
327
}
328
// budgie-pixel-saver-applet
330
.titlebar:not(headerbar) {
331
min-height: 0;
332
padding: 0;
333
box-shadow: none;
334
background-color: transparent;
335
color: $on-panel;
336
button:not(.suggested-action):not(.destructive-action) {
338
color: hint($on-panel);
339
}
340
}
341
// Tasklist
343
#tasklist-button {
344
padding: 0 4px;
345
@extend %underscores;
347
}
348
&.vertical #tasklist-button {
350
min-height: 32px;
351
}
352
// Icon Tasklist
354
button.flat.launcher {
355
padding: 0;
356
@extend %underscores;
358
// for indicator colors
360
&:not(:checked) {
361
color: disabled($on-panel);
362
&:disabled {
364
color: disabled-hint($on-panel);
365
}
366
}
367
}
368
.unpinned button.flat.launcher,
370
.pinned button.flat.launcher.running {
371
@extend %underscores-checked;
372
}
373
}
374
$underscores-list:
376
(top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
377
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
378
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
379
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0);
380
%underscores {
382
@each $pos, $b_pos, $b_wid in $underscores-list {
383
.#{$pos} & {
384
& {
385
border-image:
386
radial-gradient(
387
circle closest-corner at #{$b_pos},
388
currentcolor 0%,
389
transparent 0%
390
) 0 0 0 0 / 0 0 0 0;
391
}
392
@at-root %underscores-checked,
394
&:checked {
395
border-image:
396
radial-gradient(
397
circle closest-corner at #{$b_pos},
398
currentcolor 100%,
399
transparent 0%
400
) #{$b_wid};
401
}
402
}
403
}
404
}
405
frame.raven-frame > border {
407
border-style: none;
408
box-shadow: $shadow-z16;
409
}
410
$pos_list: (top: bottom, bottom: top, left: right, right: left);
412
@each $pos, $b_pos in $pos_list {
414
// Panel borders
415
.#{$pos} .budgie-panel {
416
// border-#{$b_pos}: 1px solid divider($on-surface);
417
}
418
// Raven borders
420
.#{$pos} frame.raven-frame > border {
421
margin-#{$b_pos}: 32px;
422
// border-#{$b_pos}: 1px solid divider($on-surface);
423
}
424
// Shadows
426
.#{$pos} .shadow-block {
427
// background-image: linear-gradient(to $b_pos, divider($on-surface), transparent);
428
}
429
}
430
// Raven
432
.raven {
433
background-color: $surface;
434
list {
436
background-color: transparent;
437
}
438
// remove extra space between box and .raven-header.bottom
440
> box:not(:only-child) {
441
margin-bottom: -10px;
442
}
443
.raven-header {
445
min-height: $medium-size;
446
padding: 3px;
447
// Adopt tabs style only for .top
449
&.top {
450
padding: 0;
451
border-bottom: 1px solid divider($on-surface);
452
stackswitcher.linked > button {
454
@extend %button-flat-activatable;
455
margin: -4px 0 -5px; // remove unwanted vertical margins
457
padding: 0 16px;
458
min-height: $large-size;
459
border-image:
460
radial-gradient(
461
circle closest-corner at center calc(100% - 1px),
462
$primary 0%,
463
transparent 0%
464
) 0 0 0 / 0 0 0;
465
border-radius: 0;
466
&:checked {
468
border-image:
469
radial-gradient(
470
circle closest-corner at center calc(100% - 1px),
471
$primary 100%,
472
transparent 0%
473
) 0 0 2 / 0 0 2px;
474
background-color: transparent;
475
}
476
}
477
}
478
&.bottom {
480
border-top: 1px solid divider($on-surface);
481
}
482
}
483
stack {
485
// remove extra space in Notifications stack
486
.raven-header {
487
margin-top: -6px;
488
}
489
// remove extra spaces in Applets stack
491
scrolledwindow .raven-header {
492
margin-top: -8px;
493
}
494
}
495
.expander-button {
497
border-radius: $circular-radius;
498
}
499
.raven-background {
501
// applet background between two headers
502
&.middle {
503
// border-bottom-style: none;
504
}
505
// Adopt Choice chips style
507
stackswitcher.linked > button {
508
@extend %button-flat-activatable;
509
margin: -2px 8px 9px;
511
padding: 0 12px;
512
min-height: 32px;
513
border-radius: $circular-radius;
514
background-color: fill($on-surface);
515
font-weight: normal;
516
&:checked {
518
@include ink-color($primary);
519
}
520
&:not(:first-child) {
522
margin-left: 0;
523
}
524
}
525
// Default music icon
527
> overlay > widget > image {
528
color: fill($on-surface);
529
}
530
}
531
revealer > .raven-background {
533
border-bottom: 1px solid divider($on-surface);
534
}
535
.raven-header + .raven-background {
537
border-top: 1px solid divider($on-surface);
538
}
539
// Application block in Notifications stack
541
viewport.frame > list > row {
542
// Remove all effects. This should be just a container.
543
padding: 0;
544
box-shadow: none;
545
background: none;
546
&:not(:first-child) {
548
border-top: 1px solid divider($on-surface);
549
}
550
> box {
552
// Remove awkward hard-coded margins
553
margin-top: -5px;
554
margin-left: -5px;
555
margin-bottom: -5px;
556
// Application header
558
> box {
559
padding: 6px;
560
margin-bottom: -10px; // Remove hard-coded spacing
561
}
562
// Notifications
564
> list > row {
565
padding: 8px;
566
> box {
568
margin-bottom: -5px; // Remove hard-coded margin-bottom
569
> box {
571
// Title
572
> label {
573
font-weight: bold;
574
}
575
// Close button
577
> button.image-button {
578
padding: 0;
579
}
580
}
581
> label {
583
margin-top: -6px; // For less spacing: 10 -> 4
584
font-size: smaller;
585
}
586
}
587
}
588
}
589
}
590
.powerstrip button {
592
margin: 2px 0 1px;
593
padding: ($large-size - 24px) / 2;
594
}
595
.option-subtitle {
597
font-size: smaller;
598
}
599
}
600
// Calendar
602
calendar.raven-calendar {
603
// padding: 3px;
604
border-style: none;
605
background-color: transparent;
606
&:selected {
608
border-radius: $corner-radius;
609
background-color: $overlay-selected;
610
}
611
}
612
// MPRIS Applet
614
.raven-mpris {
615
background-color: $scrim;
616
color: $on-scrim;
617
label {
619
min-height: 24px;
620
}
621
button.image-button {
623
padding: ($large-size - 24px) / 2;
624
color: hint($on-scrim);
625
@include ink-color($on-scrim);
626
}
627
}
628
// Notifications
630
.budgie-notification-window {
631
background-color: transparent;
632
}
633
.budgie-notification {
635
.notification-title {
636
font-size: 120%;
637
}
638
.notification-body {
640
color: hint($on-surface);
641
}
642
}
643
// On Screen Display in Budgie
645
.budgie-osd-window {
646
@extend .budgie-notification-window;
647
}
648
// Internal part of the OSD
650
.budgie-osd {
651
.budgie-osd-text {
652
font-size: 120%;
653
}
654
}
655
// Alt+tab switcher in Budgie
657
.budgie-switcher-window {
658
@extend .budgie-notification-window;
659
}
660
// Internal part of the Switcher
662
.budgie-switcher {
663
@extend .budgie-notification;
664
}
665
.drop-shadow {
667
margin: 5px 9px;
668
padding: 3px;
669
border-radius: $corner-radius;
670
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
671
background-color: $surface;
672
button {
674
@extend %button-flat;
675
&.text-button:not(:disabled) {
677
@include ink-color($primary);
678
}
679
}
680
.linked > button {
682
margin-right: $container-padding;
683
}
684
}
685
%budgie_dialog {
687
border-radius: $corner-radius;
688
box-shadow: inset 0 1px highlight($surface);
689
background-color: $surface;
690
decoration {
692
border-radius: $corner-radius;
693
}
694
}
695
// Session Dialog
697
.budgie-session-dialog {
698
@extend %budgie_dialog;
699
> box {
701
padding: 8px;
702
}
703
// Hide power icon
705
image {
706
margin: -8px;
707
-gtk-icon-transform: scale(0);
708
}
709
label:not(:last-child),
711
.dialog-title {
712
margin-bottom: 8px;
713
font-size: 20px;
714
font-weight: 500;
715
}
716
.dialog-title + label {
718
color: hint($on-surface);
719
}
720
.linked.horizontal > button {
722
@extend %button-flat;
723
&:not(:last-child) {
725
margin-right: 8px;
726
}
727
&:not(:disabled) {
729
@include ink-color($primary);
730
}
731
}
732
}
733
// PolKit Dialog
735
.budgie-polkit-dialog {
736
@extend %budgie_dialog;
737
.message {
739
color: hint($on-surface);
740
}
741
.failure {
743
color: $error;
744
}
745
}
746
// Run Dialog
748
.budgie-run-dialog {
749
@extend %budgie_dialog;
750
entry.search {
752
font-size: 120%;
753
padding: $container-padding 8px + $container-padding;
754
border-image: none;
755
box-shadow: none;
756
background-color: transparent;
757
}
758
list {
760
padding: 4px 0;
761
background-color: transparent;
762
.dim-label {
764
color: inherit;
765
}
766
}
767
scrolledwindow {
769
border-top: 1px solid divider($on-surface);
770
}
771
scrollbar {
773
&.right,
774
&.bottom {
775
border-bottom-right-radius: $corner-radius;
776
}
777
&.left,
779
&.bottom {
780
border-bottom-left-radius: $corner-radius;
781
}
782
}
783
}
784