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: 2px;
16
-gtk-outline-radius: 2px;
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: $lighter_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: 2px;
145
}
146
}
147
}
148
// Budgie Menu
150
.budgie-menu {
151
&.background {
152
padding: 0;
153
background-color: $base_color;
154
}
155
scrollbar,
157
entry.search { background-color: transparent; }
158
entry.search {
160
border-bottom: 1px solid $border_color;
161
border-radius: 0;
162
box-shadow: none;
163
font-size: 120%;
164
}
165
.categories {
167
&:dir(ltr) { border-bottom-left-radius: $material_radius; }
168
&:dir(rtl) { border-bottom-right-radius: $material_radius; }
170
}
171
button {
173
@extend row.activatable;
174
min-height: 32px;
176
padding: 0 8px;
177
border-radius: 0;
178
color: $fg_color;
179
font-weight: normal;
180
&:disabled { color: $disabled_fg_color; }
182
&:checked { @extend %selected_items; }
184
&:checked:disabled { background-color: $primary_color; } // overriding
186
}
187
row {
189
padding: 0;
190
&:hover { box-shadow: none; }
192
}
193
}
194
// Menu Button
196
button.budgie-menu-launcher {
197
// padding: 0 2px;
198
}
199
// User Menu
201
popover.background.user-menu {
202
padding: 8px;
203
.content-box { background-color: transparent; }
205
separator { margin: 4px 0; }
207
row {
209
padding: 0;
210
box-shadow: none;
211
background-image: none;
212
}
213
}
214
// Raven Trigger
216
button.raven-trigger {
217
// padding: 0 4px;
218
}
219
// Places Menu
221
popover.background.places-menu {
222
padding: 8px;
223
// FIXME: untested
225
.message-bar {
226
// margin-bottom: 4px;
227
}
228
.name-button.text-button {
230
// padding: 4px 8px;
231
padding-left: 8px;
232
padding-right: 8px;
233
image {
235
&:dir(ltr) { margin-right: 8px - 5px; }
236
&:dir(rtl) { margin-left: 8px - 5px; }
237
}
238
}
239
// FIXME: untested
241
.unmount-button {
242
// padding: ($medium_size - 24px) / 2;
243
}
244
.places-section-header > image {
246
&:dir(ltr) { margin: 0 8px - 10px 0 8px - 3px; }
247
&:dir(rtl) { margin: 0 8px - 3px 0 8px - 10px; }
248
}
249
.places-list {
251
margin-top: 4px;
252
padding-top: 4px;
253
border-top: 1px solid $border_color;
254
background-color: transparent;
255
}
256
row {
258
padding: 0;
259
box-shadow: none;
260
background-image: none;
261
}
262
// FIXME: untested
264
.unlock-area {
265
entry {
266
}
267
button {
269
}
270
}
271
}
272
// Panel
274
.budgie-panel {
275
transition: background-color $longer_duration $deceleration_curve;
276
background-color: $solid_panel_bg_color;
277
color: $inverse_secondary_fg_color;
278
font-weight: 500;
279
&.transparent { background-color: $panel_bg_color; }
281
button {
283
@extend %flat_button;
284
@extend %button_selected.flat;
285
min-height: 16px;
287
min-width: 16px;
288
padding: 0;
289
border-radius: 0;
290
&:checked { background-color: $inverse_divider_color; }
292
}
293
&.horizontal button { padding: 0 4px; }
295
&.vertical button { padding: 4px 0; }
297
separator { background-color: $inverse_track_color; }
299
// used to indicate unread notifications
301
.alert { color: $destructive_color; }
302
// End Section needs to be fancy
304
.end-region {
305
// background-color: rgba(0,0,0,0.2);
306
}
307
// Tasklist
309
#tasklist-button {
310
padding: 0 4px;
311
@extend %underscores;
313
}
314
&.vertical #tasklist-button { min-height: 32px; }
316
// Icon Tasklist
318
button.flat.launcher {
319
padding: 0;
320
@extend %underscores;
322
// for indicator colors
324
&:not(:checked) {
325
color: $inverse_hint_fg_color;
326
&:hover, &:active { color: $inverse_secondary_fg_color; }
328
&:disabled { color: $inverse_track_color; }
330
}
331
}
332
.unpinned button.flat.launcher,
334
.pinned button.flat.launcher.running { @extend %underscores:checked; }
335
}
336
%underscores {
338
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
339
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
340
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
341
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0) {
342
.#{$pos} & {
343
& {
344
border-image: radial-gradient(circle closest-corner at #{$b_pos},
345
currentColor 0%,
346
transparent 0%)
347
0 0 0 0 / 0 0 0 0;
348
}
349
&:checked {
351
border-image: radial-gradient(circle closest-corner at #{$b_pos},
352
currentColor 100%,
353
transparent 0%)
354
#{$b_wid};
355
}
356
}
357
}
358
}
359
frame.raven-frame > border {
361
border-style: none;
362
box-shadow: $shadow_4;
363
}
364
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
366
@each $pos, $b_pos in $pos_list {
368
// Panel borders
369
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $border_color; }
370
// Raven borders
372
.#{$pos} frame.raven-frame > border {
373
margin-#{$b_pos}: 32px;
374
// border-#{$b_pos}: 1px solid $border_color;
375
}
376
// Shadows
378
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $border_color, transparent); }
379
}
380
// Raven
382
.raven {
383
background-color: $lighter_bg_color;
384
// for >=10.4
386
> box { margin-bottom: -10px; }
387
// for <10.4
389
> stack { margin-bottom: -10px; }
390
// > stack > box:last-child > stack { margin-top: -6px; }
392
stackswitcher.linked > button {
394
@extend %flat_button;
395
@extend %button_selected.flat;
396
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
398
$warning_bg_color 0%,
399
transparent 0%)
400
0 0 0 / 0 0 0px;
401
border-radius: 0;
402
&:checked {
404
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
405
$warning_bg_color 100%,
406
transparent 0%)
407
0 0 2 / 0 0 2px;
408
background-color: transparent;
409
}
410
}
411
.raven-header {
413
min-height: $medium_size;
414
padding: 3px;
415
&:not(.top) {
417
margin-top: -6px; // remove extra spaces, but not perfect :(
418
button {
420
@extend %simple_flat_button;
421
&.image-button { @extend %circular_button; }
423
}
424
}
425
&.top {
427
padding: 2px 0;
428
background-color: $primary_color;
429
color: $inverse_fg_color;
430
stackswitcher button {
432
margin: -$container_padding 0;
433
min-height: $medium_size;
434
}
435
// for <10.4
437
button.image-button {
438
&:dir(ltr) { margin-right: 2px; }
439
&:dir(rtl) { margin-left: 2px; }
440
}
441
// for <10.4
443
> image { margin: 0 8px; }
444
// for <10.4
446
> label {
447
margin: 0 -8px;
448
font-weight: bold;
449
}
450
}
451
&.bottom { border-top: 1px solid $border_color; }
453
}
454
viewport.frame .raven-header { margin-top: -8px; }
456
.expander-button { @extend %circular_button; }
458
.raven-background {
460
border-style: solid none;
461
border-width: 1px;
462
border-color: $border_color;
463
background-color: $base_color;
464
// &.middle { border-bottom-style: none; } // applet background between two headers
466
// for <10.4
468
&.frame { border-style: solid none; }
469
> overlay > widget > image { color: $divider_color; }
471
// for <10.4
473
grid > label:first-child { min-height: $medium_size; } // workaround to fix vertical-align
474
// for <10.4
476
spinbutton:not(.vertical) { @extend %entry.flat; }
477
// for <10.4
479
button.combo { @extend %combo_flat; }
480
}
481
scrolledwindow.raven-background { border-bottom-style: none; }
483
// for <10.4
485
.raven-header.top + .raven-background {
486
border-style: none;
487
background-color: $primary_color;
488
color: $inverse_fg_color;
489
stackswitcher button { margin: -4px 0; }
491
}
492
.powerstrip button {
494
margin: 2px 0 1px;
495
padding: ($large_size - 24px) / 2;
496
}
497
.option-subtitle { font-size: smaller; }
499
}
500
// Calendar
502
calendar.raven-calendar {
503
// padding: 3px;
504
border-style: none;
505
background-color: transparent;
506
&:selected {
508
border-radius: 2px;
509
background-color: $primary_color;
510
}
511
}
512
// MPRIS Applet
514
.raven-mpris {
515
background-color: rgba($black, $middle_opacity);
516
color: $inverse_fg_color;
517
label { min-height: 24px; }
519
button.image-button {
521
padding: ($large_size - 24px) / 2;
522
@extend %button_selected.flat;
524
}
525
}
526
// Notifications
528
.budgie-notification-window { background-color: transparent; }
529
.budgie-notification {
531
.notification-title { font-size: 120%; }
532
.notification-body { @extend .dim-label; }
534
}
535
// On Screen Display in Budgie
537
.budgie-osd-window {
538
@extend .budgie-notification-window;
539
}
540
// Internal part of the OSD
542
.budgie-osd {
543
.budgie-osd-text { font-size: 120%; }
544
}
545
// Alt+tab switcher in Budgie
547
.budgie-switcher-window {
548
@extend .budgie-notification-window;
549
}
550
// Internal part of the Switcher
552
.budgie-switcher {
553
@extend .budgie-notification;
554
}
555
.drop-shadow {
557
margin: 5px 9px;
558
padding: 3px;
559
border-radius: 2px;
560
box-shadow: $shadow_2, inset 0 1px $highlight_color;
561
background-color: $lighter_bg_color;
562
button { @extend %simple_flat_button; }
564
.linked > button { border-radius: 2px; }
566
}
567
%budgie_dialog {
569
border-radius: 2px;
570
background-color: $lighter_bg_color;
571
decoration { border-radius: 2px; }
573
}
574
// Session Dialog
576
.budgie-session-dialog {
577
@extend %budgie_dialog;
578
label:not(:last-child),
580
.dialog-title { font-size: 120%; }
581
.linked.horizontal > button {
583
padding: 8px 16px;
584
border-top: 1px solid $border_color;
585
border-radius: 0;
586
@extend %simple_flat_button;
588
&:first-child { border-bottom-left-radius: 2px; }
590
&:last-child { border-bottom-right-radius: 2px; }
592
}
593
}
594
// PolKit Dialog
596
.budgie-polkit-dialog {
597
@extend %budgie_dialog;
598
.message { color: $hint_fg_color; }
600
.failure { color: $destructive_color; }
602
}
603
// Run Dialog
605
.budgie-run-dialog {
606
@extend %budgie_dialog;
607
background-color: $base_color;
609
entry.search {
611
font-size: 120%;
612
padding: $container_padding 8px + $container_padding;
613
box-shadow: inset 0 1px $highlight_color;
614
background-color: transparent;
615
}
616
list .dim-label { opacity: 1; }
618
scrolledwindow { border-top: 1px solid $border_color; }
620
}
621