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
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
background-color: transparent;
295
color: hint($on-panel);
296
@include ink-color($on-panel);
297
&:disabled {
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);
306
&:disabled {
308
color: disabled($on-panel);
309
}
310
}
311
}
312
&.horizontal button {
314
padding: 0 4px;
315
}
316
&.vertical button {
318
padding: 4px 0;
319
}
320
separator {
322
background-color: stroke($on-panel);
323
}
324
// used to indicate unread notifications
326
.alert {
327
color: error($on-panel);
328
}
329
// End Section needs to be fancy
331
.end-region {
332
// background-color: rgba(0,0,0,0.2);
333
}
334
// budgie-pixel-saver-applet
336
.titlebar:not(headerbar) {
337
min-height: 0;
338
padding: 0;
339
box-shadow: none;
340
background-color: transparent;
341
color: $on-panel;
342
button:not(.suggested-action):not(.destructive-action) {
344
color: hint($on-panel);
345
}
346
}
347
// Tasklist
349
#tasklist-button {
350
padding: 0 4px;
351
@extend %underscores;
353
}
354
&.vertical #tasklist-button {
356
min-height: 32px;
357
}
358
// Icon Tasklist
360
button.flat.launcher {
361
padding: 0;
362
@extend %underscores;
364
// for indicator colors
366
&:not(:checked) {
367
color: disabled($on-panel);
368
&:disabled {
370
color: disabled-hint($on-panel);
371
}
372
}
373
}
374
.unpinned button.flat.launcher,
376
.pinned button.flat.launcher.running {
377
@extend %underscores-checked;
378
}
379
}
380
$underscores-list:
382
(top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
383
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
384
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
385
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0);
386
%underscores {
388
@each $pos, $b_pos, $b_wid in $underscores-list {
389
.#{$pos} & {
390
& {
391
border-image:
392
radial-gradient(
393
circle closest-corner at #{$b_pos},
394
currentcolor 0%,
395
transparent 0%
396
) 0 0 0 0 / 0 0 0 0;
397
}
398
@at-root %underscores-checked,
400
&:checked {
401
border-image:
402
radial-gradient(
403
circle closest-corner at #{$b_pos},
404
currentcolor 100%,
405
transparent 0%
406
) #{$b_wid};
407
}
408
}
409
}
410
}
411
frame.raven-frame > border {
413
border-style: none;
414
box-shadow: $shadow-z16;
415
}
416
$pos_list: (top: bottom, bottom: top, left: right, right: left);
418
@each $pos, $b_pos in $pos_list {
420
// Panel borders
421
.#{$pos} .budgie-panel {
422
// border-#{$b_pos}: 1px solid divider($on-surface);
423
}
424
// Raven borders
426
.#{$pos} frame.raven-frame > border {
427
margin-#{$b_pos}: 32px;
428
// border-#{$b_pos}: 1px solid divider($on-surface);
429
}
430
// Shadows
432
.#{$pos} .shadow-block {
433
// background-image: linear-gradient(to $b_pos, divider($on-surface), transparent);
434
}
435
}
436
// Raven
438
.raven {
439
background-color: $surface;
440
list {
442
// background-color: transparent;
443
}
444
// remove extra space between box and .raven-header.bottom
446
> box:not(:only-child) {
447
margin-bottom: -10px;
448
}
449
.raven-header {
451
min-height: $medium-size;
452
padding: 3px;
453
// Adopt tabs style only for .top
455
&.top {
456
padding: 0;
457
border-bottom: 1px solid divider($on-surface);
458
stackswitcher.linked > button {
460
@extend %button-flat-activatable;
461
margin: -4px 0 -5px; // remove unwanted vertical margins
463
padding: 0 16px;
464
min-height: $large-size;
465
border-image:
466
radial-gradient(
467
circle closest-corner at center calc(100% - 1px),
468
$primary 0%,
469
transparent 0%
470
) 0 0 0 / 0 0 0;
471
border-radius: 0;
472
&:checked {
474
border-image:
475
radial-gradient(
476
circle closest-corner at center calc(100% - 1px),
477
$primary 100%,
478
transparent 0%
479
) 0 0 2 / 0 0 2px;
480
background-color: transparent;
481
}
482
}
483
}
484
&.bottom {
486
border-top: 1px solid divider($on-surface);
487
}
488
}
489
stack {
491
// remove extra space in Notifications stack
492
.raven-header {
493
margin-top: -6px;
494
}
495
// remove extra spaces in Applets stack
497
scrolledwindow .raven-header {
498
margin-top: -8px;
499
}
500
}
501
.expander-button {
503
border-radius: $circular-radius;
504
}
505
.raven-background {
507
// applet background between two headers
508
&.middle {
509
// border-bottom-style: none;
510
}
511
// Adopt Choice chips style
513
stackswitcher.linked > button {
514
@extend %button-flat-activatable;
515
margin: -2px 8px 9px;
517
padding: 0 12px;
518
min-height: 32px;
519
border-radius: $circular-radius;
520
background-color: fill($on-surface);
521
font-weight: normal;
522
&:checked {
524
background-color: overlay("activated", $primary);
525
color: $primary;
526
@include ink-color($primary);
527
}
528
&:not(:first-child) {
530
margin-left: 0;
531
}
532
}
533
// Default music icon
535
> overlay > widget > image {
536
color: fill($on-surface);
537
}
538
}
539
revealer > .raven-background {
541
border-bottom: 1px solid divider($on-surface);
542
}
543
.raven-header + .raven-background {
545
border-top: 1px solid divider($on-surface);
546
}
547
// Application block in Notifications stack
549
viewport.frame > list > row {
550
// Remove all effects. This should be just a container.
551
padding: 0;
552
box-shadow: none;
553
background: none;
554
&:not(:first-child) {
556
border-top: 1px solid divider($on-surface);
557
}
558
> box {
560
// Remove awkward hard-coded margins
561
margin-top: -5px;
562
margin-left: -5px;
563
margin-bottom: -5px;
564
// Application header
566
> box {
567
padding: 6px;
568
margin-bottom: -10px; // Remove hard-coded spacing
569
}
570
// Notifications
572
> list > row {
573
padding: 8px;
574
> box {
576
margin-bottom: -5px; // Remove hard-coded margin-bottom
577
> box {
579
// Title
580
> label {
581
font-weight: bold;
582
}
583
// Close button
585
> button.image-button {
586
padding: 0;
587
}
588
}
589
> label {
591
margin-top: -6px; // For less spacing: 10 -> 4
592
font-size: smaller;
593
}
594
}
595
}
596
}
597
}
598
.powerstrip button {
600
margin: 2px 0 1px;
601
padding: ($large-size - 24px) / 2;
602
}
603
.option-subtitle {
605
font-size: smaller;
606
}
607
}
608
// Calendar
610
calendar.raven-calendar {
611
// padding: 3px;
612
border-style: none;
613
background-color: transparent;
614
&:selected {
616
border-radius: $corner-radius;
617
background-color: $overlay-selected;
618
}
619
}
620
// MPRIS Applet
622
.raven-mpris {
623
background-color: $scrim;
624
color: $on-scrim;
625
label {
627
min-height: 24px;
628
}
629
button.image-button {
631
padding: ($large-size - 24px) / 2;
632
color: hint($on-scrim);
633
@include ink-color($on-scrim);
634
}
635
}
636
// Notifications
638
.budgie-notification-window {
639
background-color: transparent;
640
}
641
.budgie-notification {
643
.notification-title {
644
font-size: 120%;
645
}
646
.notification-body {
648
color: hint($on-surface);
649
}
650
}
651
// On Screen Display in Budgie
653
.budgie-osd-window {
654
@extend .budgie-notification-window;
655
}
656
// Internal part of the OSD
658
.budgie-osd {
659
.budgie-osd-text {
660
font-size: 120%;
661
}
662
}
663
// Alt+tab switcher in Budgie
665
.budgie-switcher-window {
666
@extend .budgie-notification-window;
667
}
668
// Internal part of the Switcher
670
.budgie-switcher {
671
@extend .budgie-notification;
672
}
673
.drop-shadow {
675
margin: 5px 9px;
676
padding: 3px;
677
border-radius: $corner-radius;
678
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
679
background-color: $surface;
680
button {
682
@extend %button-flat;
683
&.text-button:not(:disabled) {
685
color: $primary;
686
@include ink-color($primary);
687
}
688
}
689
.linked > button {
691
margin-right: $container-padding;
692
}
693
}
694
%budgie_dialog {
696
border-radius: $corner-radius;
697
box-shadow: inset 0 1px highlight($surface);
698
background-color: $surface;
699
decoration {
701
border-radius: $corner-radius;
702
}
703
}
704
// Session Dialog
706
.budgie-session-dialog {
707
@extend %budgie_dialog;
708
> box {
710
padding: 8px;
711
}
712
// Hide power icon
714
image {
715
margin: -8px;
716
-gtk-icon-transform: scale(0);
717
}
718
label:not(:last-child),
720
.dialog-title {
721
margin-bottom: 8px;
722
font-size: 20px;
723
font-weight: 500;
724
}
725
.dialog-title + label {
727
color: hint($on-surface);
728
}
729
.linked.horizontal > button {
731
@extend %button-flat;
732
&:not(:last-child) {
734
margin-right: 8px;
735
}
736
&:not(:disabled) {
738
color: $primary;
739
@include ink-color($primary);
740
}
741
}
742
}
743
// PolKit Dialog
745
.budgie-polkit-dialog {
746
@extend %budgie_dialog;
747
.message {
749
color: hint($on-surface);
750
}
751
.failure {
753
color: $error;
754
}
755
}
756
// Run Dialog
758
.budgie-run-dialog {
759
@extend %budgie_dialog;
760
entry.search {
762
font-size: 120%;
763
padding: $container-padding 8px + $container-padding;
764
border-image: none;
765
box-shadow: none;
766
background-color: transparent;
767
}
768
list {
770
padding: 4px 0;
771
// background-color: transparent;
772
.dim-label {
774
color: inherit;
775
}
776
}
777
scrolledwindow {
779
border-top: 1px solid divider($on-surface);
780
}
781
scrollbar {
783
&.right,
784
&.bottom {
785
border-bottom-right-radius: $corner-radius;
786
}
787
&.left,
789
&.bottom {
790
border-bottom-left-radius: $corner-radius;
791
}
792
}
793
}
794