ASCII text
1
// based css:
2
// https://github.com/budgie-desktop/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: $material_radius;
16
-gtk-outline-radius: $material_radius;
17
@extend %simple_flat_button;
19
}
20
}
21
.budgie-popover {
23
border-style: solid;
24
border-width: 1px;
25
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3);
26
border-radius: $material_radius + 1px;
27
box-shadow: $shadow_2;
28
background-color: $popup_bg_color;
29
.container { padding: 2px; }
31
border { border: none; }
33
list { background-color: transparent; }
35
row {
37
padding: 0;
38
&:hover { box-shadow: none; }
40
}
41
&:not(.budgie-menu) button.flat:not(.image-button) {
43
min-height: $menuitem_size;
44
padding: 0 8px;
45
color: $fg_color;
46
font-weight: normal;
47
&:disabled { color: $disabled_fg_color; }
49
}
50
&.budgie-menu {
52
.container { padding: 0; }
53
}
54
&.user-menu {
56
.container { padding: 8px; }
57
separator { margin: 4px 0; }
59
}
60
&.sound-popover {
62
separator { margin: 3px 0; }
63
}
64
&.night-light-indicator {
66
.container { padding: 8px; }
67
}
68
&.places-menu {
70
.container { padding: 8px; }
71
.places-list:not(.always-expand) {
73
margin-top: 4px;
74
padding-top: 4px;
75
border-top: 1px solid $border_color;
76
}
77
// I guess this really should be hard-coded as well as other dim-labels.
79
.alternative-label {
80
padding: 3px;
81
font-size: 15px;
82
}
83
}
84
&.workspace-popover {
86
.container { padding: 2px 8px 8px; }
87
separator { margin: 4px 0; }
89
flowboxchild { padding: 0; }
91
}
92
}
93
// FIXME: workspace has unnecessary/unknown margin
95
.workspace-switcher {
96
.workspace-layout {
97
border: 0 solid $inverse_divider_color;
98
.top &,
100
.bottom & {
101
&:dir(ltr) { border-left-width: 1px; }
102
&:dir(rtl) { border-right-width: 1px; }
104
}
105
.left &,
107
.right & { border-top-width: 1px; }
108
}
109
.workspace-item,
111
.workspace-add-button {
112
border: 0 solid $inverse_divider_color;
113
.top &,
115
.bottom & {
116
&:dir(ltr) { border-right-width: 1px; }
117
&:dir(rtl) { border-left-width: 1px; }
119
}
120
.left &,
122
.right & { border-bottom-width: 1px; }
123
}
124
.workspace-item {
126
transition: $shorter_transition;
127
&.current-workspace { background-color: $inverse_divider_color; }
129
}
130
.workspace-add-button {
132
&:hover { box-shadow: none; }
133
&:active { background-image: none; }
135
&:active image { margin: 1px 0 -1px; }
137
}
138
.workspace-icon-button {
140
.budgie-panel & { // to overwrite the .budgie-panel button style below
141
min-height: 24px;
142
min-width: 24px;
143
padding: 0;
144
border-radius: $material_radius;
145
}
146
}
147
}
148
// Budgie Menu
150
.budgie-menu {
151
&.background { padding: 0; }
152
.sidebar,
154
scrollbar,
155
entry.search { background-color: transparent; }
156
entry.search {
158
border-bottom: 1px solid $border_color;
159
border-radius: 0;
160
box-shadow: none;
161
font-size: 120%;
162
}
163
button {
165
@extend row.activatable;
166
min-height: 32px;
168
padding: 0 8px;
169
border-radius: 0;
170
color: $fg_color;
171
font-weight: normal;
172
&:disabled { color: $disabled_fg_color; }
174
&:checked { @extend %selected_items; }
176
&:checked:disabled { background-color: $primary_color; } // overriding
178
}
179
row {
181
padding: 0;
182
&:hover { box-shadow: none; }
184
}
185
}
186
// Menu Button
188
button.budgie-menu-launcher {
189
// padding: 0 2px;
190
}
191
// User Menu
193
popover.background.user-menu {
194
padding: 8px;
195
.content-box { background-color: transparent; }
197
separator { margin: 4px 0; }
199
row {
201
padding: 0;
202
box-shadow: none;
203
background-image: none;
204
}
205
}
206
// Raven Trigger
208
button.raven-trigger {
209
// padding: 0 4px;
210
}
211
// Places Menu
213
popover.background.places-menu {
214
padding: 8px;
215
// FIXME: untested
217
.message-bar {
218
// margin-bottom: 4px;
219
}
220
.name-button.text-button {
222
// padding: 4px 8px;
223
padding-left: 8px;
224
padding-right: 8px;
225
image {
227
&:dir(ltr) { margin-right: 8px - 5px; }
228
&:dir(rtl) { margin-left: 8px - 5px; }
229
}
230
}
231
// FIXME: untested
233
.unmount-button {
234
// padding: ($medium_size - 24px) / 2;
235
}
236
.places-section-header > image {
238
&:dir(ltr) { margin: 0 8px - 10px 0 8px - 3px; }
239
&:dir(rtl) { margin: 0 8px - 3px 0 8px - 10px; }
240
}
241
.places-list {
243
margin-top: 4px;
244
padding-top: 4px;
245
border-top: 1px solid $border_color;
246
background-color: transparent;
247
}
248
row {
250
padding: 0;
251
box-shadow: none;
252
background-image: none;
253
}
254
// FIXME: untested
256
.unlock-area {
257
entry {
258
}
259
button {
261
}
262
}
263
}
264
// Panel
266
.budgie-panel {
267
transition: background-color $shorter_duration $deceleration_curve;
268
background-color: $solid_panel_bg_color;
269
color: $inverse_secondary_fg_color;
270
font-weight: 500;
271
&.transparent { background-color: $panel_bg_color; }
273
button {
275
@extend %flat_button;
276
@extend %button_selected.flat;
277
min-height: 16px;
279
min-width: 16px;
280
padding: 0;
281
border-radius: 0;
282
&:checked { background-color: $inverse_divider_color; }
284
}
285
&.horizontal button { padding: 0 4px; }
287
&.vertical button { padding: 4px 0; }
289
separator { background-color: $inverse_track_color; }
291
// used to indicate unread notifications
293
.alert { color: $destructive_color; }
294
// End Section needs to be fancy
296
.end-region {
297
// background-color: rgba(0,0,0,0.2);
298
}
299
// budgie-pixel-saver-applet
301
.titlebar:not(headerbar) {
302
min-height: 0;
303
padding: 0;
304
box-shadow: none;
305
background-color: transparent;
306
color: $inverse_fg_color;
307
button:not(.suggested-action):not(.destructive-action) {
309
color: $inverse_secondary_fg_color;
310
&:hover,
312
&:active { color: $inverse_fg_color; }
313
}
314
}
315
// Tasklist
317
#tasklist-button {
318
padding: 0 4px;
319
@extend %underscores;
321
}
322
&.vertical #tasklist-button { min-height: 32px; }
324
// Icon Tasklist
326
button.flat.launcher {
327
padding: 0;
328
@extend %underscores;
330
// for indicator colors
332
&:not(:checked) {
333
color: $inverse_hint_fg_color;
334
&:hover, &:active { color: $inverse_secondary_fg_color; }
336
&:disabled { color: $inverse_track_color; }
338
}
339
}
340
.unpinned button.flat.launcher,
342
.pinned button.flat.launcher.running { @extend %underscores:checked; }
343
}
344
%underscores {
346
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
347
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
348
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
349
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0) {
350
.#{$pos} & {
351
& {
352
border-image: radial-gradient(circle closest-corner at #{$b_pos},
353
currentColor 0%,
354
transparent 0%)
355
0 0 0 0 / 0 0 0 0;
356
}
357
&:checked {
359
border-image: radial-gradient(circle closest-corner at #{$b_pos},
360
currentColor 100%,
361
transparent 0%)
362
#{$b_wid};
363
}
364
}
365
}
366
}
367
frame.raven-frame > border {
369
border-style: none;
370
box-shadow: $shadow_4;
371
}
372
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
374
@each $pos, $b_pos in $pos_list {
376
// Panel borders
377
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $border_color; }
378
// Raven borders
380
.#{$pos} frame.raven-frame > border {
381
margin-#{$b_pos}: 32px;
382
// border-#{$b_pos}: 1px solid $border_color;
383
}
384
// Shadows
386
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $border_color, transparent); }
387
}
388
// Raven
390
.raven {
391
background-color: $popup_bg_color;
392
// for >=10.4
394
> box { margin-bottom: -10px; }
395
// for <10.4
397
> stack { margin-bottom: -10px; }
398
// > stack > box:last-child > stack { margin-top: -6px; }
400
stackswitcher.linked > button {
402
@extend %flat_button;
403
@extend %button_selected.flat;
404
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
406
$warning_bg_color 0%,
407
transparent 0%)
408
0 0 0 / 0 0 0px;
409
border-radius: 0;
410
&:checked {
412
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
413
$warning_bg_color 100%,
414
transparent 0%)
415
0 0 2 / 0 0 2px;
416
background-color: transparent;
417
}
418
}
419
.raven-header {
421
min-height: $medium_size;
422
padding: 3px;
423
&:not(.top) {
425
margin-top: -6px; // remove extra spaces, but not perfect :(
426
button {
428
@extend %simple_flat_button;
429
&.image-button { @extend %circular_button; }
431
}
432
}
433
&.top {
435
padding: 2px 0;
436
background-color: $primary_color;
437
color: $inverse_fg_color;
438
stackswitcher button {
440
margin: -$container_padding 0;
441
min-height: $medium_size;
442
}
443
// for <10.4
445
button.image-button {
446
&:dir(ltr) { margin-right: 2px; }
447
&:dir(rtl) { margin-left: 2px; }
448
}
449
// for <10.4
451
> image { margin: 0 8px; }
452
// for <10.4
454
> label {
455
margin: 0 -8px;
456
font-weight: bold;
457
}
458
}
459
&.bottom { border-top: 1px solid $border_color; }
461
}
462
viewport.frame .raven-header { margin-top: -8px; }
464
.expander-button { @extend %circular_button; }
466
.raven-background {
468
border-style: solid none;
469
border-width: 1px;
470
border-color: $border_color;
471
background-color: $base_color;
472
// &.middle { border-bottom-style: none; } // applet background between two headers
474
// for <10.4
476
&.frame { border-style: solid none; }
477
> overlay > widget > image { color: $divider_color; }
479
// for <10.4
481
grid > label:first-child { min-height: $medium_size; } // workaround to fix vertical-align
482
// for <10.4
484
spinbutton:not(.vertical) { @extend %entry.flat; }
485
// for <10.4
487
button.combo { @extend %combo_flat; }
488
}
489
scrolledwindow.raven-background { border-bottom-style: none; }
491
// for <10.4
493
.raven-header.top + .raven-background {
494
border-style: none;
495
background-color: $primary_color;
496
color: $inverse_fg_color;
497
stackswitcher button { margin: -4px 0; }
499
}
500
.powerstrip button {
502
margin: 2px 0 1px;
503
padding: ($large_size - 24px) / 2;
504
}
505
.option-subtitle { font-size: smaller; }
507
}
508
// Calendar
510
calendar.raven-calendar {
511
// padding: 3px;
512
border-style: none;
513
background-color: transparent;
514
&:selected {
516
border-radius: $material_radius;
517
background-color: $primary_color;
518
}
519
}
520
// MPRIS Applet
522
.raven-mpris {
523
background-color: $panel_bg_color;
524
color: $inverse_fg_color;
525
label { min-height: 24px; }
527
button.image-button {
529
padding: ($large_size - 24px) / 2;
530
@extend %button_selected.flat;
532
}
533
}
534
// Notifications
536
.budgie-notification-window { background-color: transparent; }
537
.budgie-notification {
539
.notification-title { font-size: 120%; }
540
.notification-body { @extend .dim-label; }
542
}
543
// On Screen Display in Budgie
545
.budgie-osd-window {
546
@extend .budgie-notification-window;
547
}
548
// Internal part of the OSD
550
.budgie-osd {
551
.budgie-osd-text { font-size: 120%; }
552
}
553
// Alt+tab switcher in Budgie
555
.budgie-switcher-window {
556
@extend .budgie-notification-window;
557
}
558
// Internal part of the Switcher
560
.budgie-switcher {
561
@extend .budgie-notification;
562
}
563
.drop-shadow {
565
margin: 5px 9px;
566
padding: 3px;
567
border-radius: $material_radius;
568
box-shadow: $shadow_2, inset 0 1px $highlight_color;
569
background-color: $popup_bg_color;
570
button { @extend %simple_flat_button; }
572
.linked > button { border-radius: $material_radius; }
574
}
575
%budgie_dialog {
577
border-radius: $material_radius;
578
background-color: $popup_bg_color;
579
decoration { border-radius: $material_radius; }
581
}
582
// Session Dialog
584
.budgie-session-dialog {
585
@extend %budgie_dialog;
586
label:not(:last-child),
588
.dialog-title { font-size: 120%; }
589
.linked.horizontal > button {
591
padding: 8px 16px;
592
border-top: 1px solid $border_color;
593
border-radius: 0;
594
@extend %simple_flat_button;
596
&:first-child { border-bottom-left-radius: $material_radius; }
598
&:last-child { border-bottom-right-radius: $material_radius; }
600
}
601
}
602
// PolKit Dialog
604
.budgie-polkit-dialog {
605
@extend %budgie_dialog;
606
.message { color: $hint_fg_color; }
608
.failure { color: $destructive_color; }
610
}
611
// Run Dialog
613
.budgie-run-dialog {
614
@extend %budgie_dialog;
615
background-color: $base_color;
617
entry.search {
619
font-size: 120%;
620
padding: $container_padding 8px + $container_padding;
621
box-shadow: inset 0 1px $highlight_color;
622
background-color: transparent;
623
}
624
list .dim-label { opacity: 1; }
626
scrolledwindow { border-top: 1px solid $border_color; }
628
}
629