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
8
// this transparent..
9
.budgie-container { background-color: transparent; }
10
.budgie-settings-window buttonbox.inline-toolbar {
12
border-style: none none solid;
13
button {
15
border-radius: $corner-radius;
16
@extend %button-flat-basic;
18
}
19
}
20
.budgie-popover {
22
border-style: solid;
23
border-width: 1px;
24
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
25
border-radius: $corner-radius + 1px;
26
box-shadow: $shadow-z4;
27
background-color: $surface;
28
.container { padding: 2px; }
30
border { border: none; }
32
list { background-color: transparent; }
34
row {
36
padding: 0;
37
&:hover { box-shadow: none; }
39
}
40
button.flat:not(.image-button) {
42
min-height: $menuitem-size;
43
padding: 0 8px;
44
color: $text;
45
font-weight: normal;
46
&:disabled { color: $text-disabled; }
48
}
49
&.budgie-menu {
51
.container { padding: 0; }
52
.sidebar,
54
scrollbar,
55
entry.search { background-color: transparent; }
56
entry.search {
58
border-bottom: 1px solid $divider;
59
border-image: none;
60
border-radius: 0;
61
box-shadow: none;
62
font-size: 120%;
63
}
64
button.flat:not(.image-button) {
66
min-height: 32px;
67
padding: 0 8px;
68
border-radius: 0;
69
@include list-item;
71
&:checked { @extend %selected_items; }
73
&:checked:disabled { background-color: transparent; } // remove pointless indicator
75
}
76
}
77
&.user-menu {
79
.container { padding: 8px; }
80
separator { margin: 4px 0; }
82
}
83
&.sound-popover {
85
separator { margin: 3px 0; }
86
}
87
&.night-light-indicator {
89
.container { padding: 8px; }
90
}
91
&.places-menu {
93
.container { padding: 8px; }
94
// FIXME: untested
96
.message-bar {
97
// margin-bottom: 4px;
98
}
99
.name-button {
101
image {
102
&:dir(ltr) { margin-right: 8px - 5px; }
103
&:dir(rtl) { margin-left: 8px - 5px; }
104
}
105
}
106
.unmount-button {
108
margin: ($menuitem-size - $small-size) / 2;
109
padding: 0;
110
}
111
.places-section-header {
113
}
114
.places-list:not(.always-expand) {
116
margin-top: 4px;
117
padding-top: 4px;
118
border-top: 1px solid $divider;
119
}
120
// FIXME: untested
122
.unlock-area {
123
entry {
124
}
125
button {
127
}
128
}
129
// use such sizes for consistency with other hard-coded dim-label sizes
131
.alternative-label {
132
padding: 3px;
133
font-size: 15px;
134
}
135
}
136
&.workspace-popover {
138
.container { padding: 8px; }
139
separator { margin: 4px 0; }
141
flowboxchild { padding: 0; }
143
}
144
}
145
// FIXME: workspace has unnecessary/unknown margin
147
.workspace-switcher {
148
.workspace-layout {
149
border: 0 solid on($panel, divider);
150
.top &,
152
.bottom & {
153
&:dir(ltr) { border-left-width: 1px; }
154
&:dir(rtl) { border-right-width: 1px; }
156
}
157
.left &,
159
.right & { border-top-width: 1px; }
160
}
161
.workspace-item,
163
.workspace-add-button {
164
border: 0 solid on($panel, divider);
165
.top &,
167
.bottom & {
168
&:dir(ltr) { border-right-width: 1px; }
169
&:dir(rtl) { border-left-width: 1px; }
171
}
172
.left &,
174
.right & { border-bottom-width: 1px; }
175
}
176
.workspace-item {
178
transition: $transition;
179
&.current-workspace { background-color: $overlay-checked; }
181
}
182
.workspace-add-button {
184
&:hover { box-shadow: none; }
185
&:active { background-image: none; }
187
&:active image { margin: 1px 0 -1px; }
189
}
190
.workspace-icon-button {
192
.budgie-panel & { // to overwrite the .budgie-panel button style below
193
min-height: 24px;
194
min-width: 24px;
195
padding: 0;
196
border-radius: $corner-radius;
197
}
198
}
199
}
200
// Menu Button
202
button.budgie-menu-launcher {
203
// padding: 0 2px;
204
}
205
// Raven Trigger
207
button.raven-trigger {
208
// padding: 0 4px;
209
}
210
// Panel
212
.budgie-panel {
213
transition: background-color $duration $ease-out;
214
background-color: $panel;
215
color: on($panel, text2);
216
font-weight: 500;
217
&.transparent { background-color: $scrim; }
219
button {
221
min-height: 16px;
222
min-width: 16px;
223
padding: 0;
224
border-radius: 0;
225
@include ink-color(on($panel, text2));
227
&:disabled { color: on($panel, text2-disabled); }
229
&:checked {
231
color: on(dark);
232
&:disabled { color: on(dark, text-disabled); }
234
}
235
}
236
&.horizontal button { padding: 0 4px; }
238
&.vertical button { padding: 4px 0; }
240
separator { background-color: on($panel, stroke); }
242
// used to indicate unread notifications
244
.alert { color: on($panel, primary); }
245
// End Section needs to be fancy
247
.end-region {
248
// background-color: rgba(0,0,0,0.2);
249
}
250
// budgie-pixel-saver-applet
252
.titlebar:not(headerbar) {
253
min-height: 0;
254
padding: 0;
255
box-shadow: none;
256
background-color: transparent;
257
color: on($panel);
258
button:not(.suggested-action):not(.destructive-action) {
260
color: on($panel, text2);
261
}
262
}
263
// Tasklist
265
#tasklist-button {
266
padding: 0 4px;
267
@extend %underscores;
269
}
270
&.vertical #tasklist-button { min-height: 32px; }
272
// Icon Tasklist
274
button.flat.launcher {
275
padding: 0;
276
@extend %underscores;
278
// for indicator colors
280
&:not(:checked) {
281
color: on($panel, text-disabled);
282
&:disabled { color: on($panel, text2-disabled); }
284
}
285
}
286
.unpinned button.flat.launcher,
288
.pinned button.flat.launcher.running { @extend %underscores-checked; }
289
}
290
$underscores-list:
292
(top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
293
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
294
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
295
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0);
296
%underscores {
298
@each $pos, $b_pos, $b_wid in $underscores-list {
299
.#{$pos} & {
300
& {
301
border-image:
302
radial-gradient(
303
circle closest-corner at #{$b_pos},
304
currentColor 0%,
305
transparent 0%
306
) 0 0 0 0 / 0 0 0 0;
307
}
308
@at-root %underscores-checked,
310
&:checked {
311
border-image:
312
radial-gradient(
313
circle closest-corner at #{$b_pos},
314
currentColor 100%,
315
transparent 0%
316
) #{$b_wid};
317
}
318
}
319
}
320
}
321
frame.raven-frame > border {
323
border-style: none;
324
box-shadow: $shadow-z16;
325
}
326
$pos_list: (top: bottom, bottom: top, left: right, right: left);
328
@each $pos, $b_pos in $pos_list {
330
// Panel borders
331
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $divider; }
332
// Raven borders
334
.#{$pos} frame.raven-frame > border {
335
margin-#{$b_pos}: 32px;
336
// border-#{$b_pos}: 1px solid $divider;
337
}
338
// Shadows
340
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $divider, transparent); }
341
}
342
// Raven
344
.raven {
345
background-color: $surface;
346
list { background-color: transparent; }
348
> box:not(:only-child) { margin-bottom: -10px; } // remove extra space between box and .raven-header.bottom
350
.raven-header {
352
min-height: $medium-size;
353
padding: 3px;
354
// Adopt tabs style only for .top
356
&.top {
357
padding: 0;
358
border-bottom: 1px solid $divider;
359
stackswitcher.linked > button {
361
@extend %button-flat-activatable;
362
margin: -4px 0 -5px; // remove unwanted vertical margins
364
padding: 0 16px;
365
min-height: $large-size;
366
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
367
$primary 0%,
368
transparent 0%)
369
0 0 0 / 0 0 0px;
370
border-radius: 0;
371
&:checked {
373
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
374
$primary 100%,
375
transparent 0%)
376
0 0 2 / 0 0 2px;
377
background-color: transparent;
378
}
379
}
380
}
381
&.bottom { border-top: 1px solid $divider; }
383
}
384
stack {
386
.raven-header { margin-top: -6px; } // remove extra space in Notifications stack
387
scrolledwindow .raven-header { margin-top: -8px; } // remove extra spaces in Applets stack
389
}
390
.expander-button { border-radius: $circular-radius; }
392
.raven-background {
394
// &.middle { border-bottom-style: none; } // applet background between two headers
395
// Adopt Choice chips style
397
stackswitcher.linked > button {
398
@extend %button-flat-activatable;
399
margin: -2px 8px 9px;
401
padding: 0 12px;
402
min-height: 32px;
403
border-radius: $circular-radius;
404
background-color: $fill;
405
font-weight: normal;
406
&:checked { @include ink-color($primary); }
408
&:not(:first-child) { margin-left: 0; }
410
}
411
// Default music icon
413
> overlay > widget > image { color: $fill; }
414
}
415
revealer > .raven-background { border-bottom: 1px solid $divider; }
417
.raven-header + .raven-background { border-top: 1px solid $divider; }
419
// Application block in Notifications stack
421
viewport.frame > list > row {
422
// Remove all effects. This should be just a container.
423
padding: 0;
424
box-shadow: none;
425
background: none;
426
&:not(:first-child) { border-top: 1px solid $divider; }
428
> box {
430
// Remove awkward hard-coded margins
431
margin-top: -5px;
432
margin-left: -5px;
433
margin-bottom: -5px;
434
// Application header
436
> box {
437
padding: 6px;
438
margin-bottom: -10px; // Remove hard-coded spacing
439
}
440
// Notifications
442
> list > row {
443
padding: 8px;
444
> box {
446
margin-bottom: -5px; // Remove hard-coded margin-bottom
447
> box {
449
// Title
450
> label { font-weight: bold; }
451
// Close button
453
> button.image-button { padding: 0; }
454
}
455
> label {
457
margin-top: -6px; // For less spacing: 10 -> 4
458
font-size: smaller;
459
}
460
}
461
}
462
}
463
}
464
.powerstrip button {
466
margin: 2px 0 1px;
467
padding: ($large-size - 24px) / 2;
468
}
469
.option-subtitle { font-size: smaller; }
471
}
472
// Calendar
474
calendar.raven-calendar {
475
// padding: 3px;
476
border-style: none;
477
background-color: transparent;
478
&:selected {
480
@extend %selected_items;
481
border-radius: $corner-radius;
483
}
484
}
485
// MPRIS Applet
487
.raven-mpris {
488
background-color: $scrim;
489
color: on($scrim);
490
label { min-height: 24px; }
492
button.image-button {
494
padding: ($large-size - 24px) / 2;
495
@include ink-color(on($scrim, text2));
497
}
498
}
499
// Notifications
501
.budgie-notification-window { background-color: transparent; }
502
.budgie-notification {
504
.notification-title { font-size: 120%; }
505
.notification-body { color: $text2; }
507
}
508
// On Screen Display in Budgie
510
.budgie-osd-window {
511
@extend .budgie-notification-window;
512
}
513
// Internal part of the OSD
515
.budgie-osd {
516
.budgie-osd-text { font-size: 120%; }
517
}
518
// Alt+tab switcher in Budgie
520
.budgie-switcher-window {
521
@extend .budgie-notification-window;
522
}
523
// Internal part of the Switcher
525
.budgie-switcher {
526
@extend .budgie-notification;
527
}
528
.drop-shadow {
530
margin: 5px 9px;
531
padding: 3px;
532
border-radius: $corner-radius;
533
box-shadow: $shadow-z4, inset 0 1px highlight($surface);
534
background-color: $surface;
535
button {
537
@extend %button-flat;
538
&.text-button:not(:disabled) { @include ink-color($primary); }
540
}
541
.linked > button { margin-right: $container-padding; }
543
}
544
%budgie_dialog {
546
border-radius: $corner-radius;
547
box-shadow: inset 0 1px highlight($surface);
548
background-color: $surface;
549
decoration { border-radius: $corner-radius; }
551
}
552
// Session Dialog
554
.budgie-session-dialog {
555
@extend %budgie_dialog;
556
> box { padding: 8px; }
558
// Hide power icon
560
image {
561
margin: -8px;
562
-gtk-icon-transform: scale(0);
563
}
564
label:not(:last-child),
566
.dialog-title {
567
margin-bottom: 8px;
568
font-size: 20px;
569
font-weight: 500;
570
}
571
.dialog-title + label { color: $text2; }
573
.linked.horizontal > button {
575
@extend %button-flat;
576
&:not(:last-child) { margin-right: 8px; }
578
&:not(:disabled) { @include ink-color($primary); }
580
}
581
}
582
// PolKit Dialog
584
.budgie-polkit-dialog {
585
@extend %budgie_dialog;
586
.message { color: $text2; }
588
.failure { color: $error; }
590
}
591
// Run Dialog
593
.budgie-run-dialog {
594
@extend %budgie_dialog;
595
entry.search {
597
font-size: 120%;
598
padding: $container-padding 8px + $container-padding;
599
border-image: none;
600
box-shadow: none;
601
background-color: transparent;
602
}
603
list {
605
padding: 4px 0;
606
background-color: transparent;
607
.dim-label { color: inherit; }
609
}
610
scrolledwindow { border-top: 1px solid $divider; }
612
scrollbar {
614
&.right,
615
&.bottom {
616
border-bottom-right-radius: $corner-radius;
617
}
618
&.left,
620
&.bottom {
621
border-bottom-left-radius: $corner-radius;
622
}
623
}
624
}
625