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: $surface_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
.container { 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
// Raven Trigger
193
button.raven-trigger {
194
// padding: 0 4px;
195
}
196
// Places Menu
198
.places-menu {
199
.container { padding: 8px; }
200
// FIXME: untested
202
.message-bar {
203
// margin-bottom: 4px;
204
}
205
.name-button.text-button {
207
// padding: 4px 8px;
208
padding-left: 8px;
209
padding-right: 8px;
210
image {
212
&:dir(ltr) { margin-right: 8px - 5px; }
213
&:dir(rtl) { margin-left: 8px - 5px; }
214
}
215
}
216
// FIXME: untested
218
.unmount-button {
219
// padding: ($medium_size - 24px) / 2;
220
}
221
.places-section-header {
223
}
224
.places-list {
226
margin-top: 4px;
227
padding-top: 4px;
228
border-top: 1px solid $border_color;
229
background-color: transparent;
230
}
231
row {
233
padding: 0;
234
box-shadow: none;
235
background-image: none;
236
}
237
// FIXME: untested
239
.unlock-area {
240
entry {
241
}
242
button {
244
}
245
}
246
}
247
// Panel
249
.budgie-panel {
250
transition: background-color $shorter_duration $deceleration_curve;
251
background-color: $solid_panel_bg_color;
252
color: $inverse_secondary_fg_color;
253
font-weight: 500;
254
&.transparent { background-color: $panel_bg_color; }
256
button {
258
@extend %flat_button;
259
@extend %button_selected.flat;
260
min-height: 16px;
262
min-width: 16px;
263
padding: 0;
264
border-radius: 0;
265
&:checked { background-color: $inverse_divider_color; }
267
}
268
&.horizontal button { padding: 0 4px; }
270
&.vertical button { padding: 4px 0; }
272
separator { background-color: $inverse_track_color; }
274
// used to indicate unread notifications
276
.alert { color: $destructive_color; }
277
// End Section needs to be fancy
279
.end-region {
280
// background-color: rgba(0,0,0,0.2);
281
}
282
// budgie-pixel-saver-applet
284
.titlebar:not(headerbar) {
285
min-height: 0;
286
padding: 0;
287
box-shadow: none;
288
background-color: transparent;
289
color: $inverse_fg_color;
290
button:not(.suggested-action):not(.destructive-action) {
292
color: $inverse_secondary_fg_color;
293
&:hover,
295
&:active { color: $inverse_fg_color; }
296
}
297
}
298
// Tasklist
300
#tasklist-button {
301
padding: 0 4px;
302
@extend %underscores;
304
}
305
&.vertical #tasklist-button { min-height: 32px; }
307
// Icon Tasklist
309
button.flat.launcher {
310
padding: 0;
311
@extend %underscores;
313
// for indicator colors
315
&:not(:checked) {
316
color: $inverse_disabled_fg_color;
317
&:hover, &:active { color: $inverse_secondary_fg_color; }
319
&:disabled { color: $inverse_track_color; }
321
}
322
}
323
.unpinned button.flat.launcher,
325
.pinned button.flat.launcher.running { @extend %underscores:checked; }
326
}
327
%underscores {
329
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
330
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
331
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
332
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0) {
333
.#{$pos} & {
334
& {
335
border-image: radial-gradient(circle closest-corner at #{$b_pos},
336
currentColor 0%,
337
transparent 0%)
338
0 0 0 0 / 0 0 0 0;
339
}
340
&:checked {
342
border-image: radial-gradient(circle closest-corner at #{$b_pos},
343
currentColor 100%,
344
transparent 0%)
345
#{$b_wid};
346
}
347
}
348
}
349
}
350
frame.raven-frame > border {
352
border-style: none;
353
box-shadow: $shadow_4;
354
}
355
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
357
@each $pos, $b_pos in $pos_list {
359
// Panel borders
360
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $border_color; }
361
// Raven borders
363
.#{$pos} frame.raven-frame > border {
364
margin-#{$b_pos}: 32px;
365
// border-#{$b_pos}: 1px solid $border_color;
366
}
367
// Shadows
369
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $border_color, transparent); }
370
}
371
// Raven
373
.raven {
374
background-color: $surface_color;
375
> box { margin-bottom: -10px; }
377
stackswitcher.linked > button {
379
@extend %flat_button;
380
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
382
$primary_color 0%,
383
transparent 0%)
384
0 0 0 / 0 0 0px;
385
border-radius: 0;
386
&:checked {
388
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
389
$primary_color 100%,
390
transparent 0%)
391
0 0 2 / 0 0 2px;
392
background-color: transparent;
393
}
394
}
395
.raven-header {
397
min-height: $medium_size;
398
padding: 3px;
399
&:not(.top) { margin-top: -6px; } // remove extra spaces
401
&.top {
403
padding: 0;
404
border-bottom: 1px solid $border_color;
405
stackswitcher button {
407
margin: -4px 0 -5px;
408
padding: 0 16px;
409
min-height: $large_size;
410
}
411
}
412
&.bottom { border-top: 1px solid $border_color; }
414
}
415
viewport.frame .raven-header { margin-top: -8px; }
417
.expander-button { @extend %circular_button; }
419
.raven-background {
421
border-style: solid none;
422
border-width: 1px;
423
border-color: $border_color;
424
background-color: $base_color;
425
// &.middle { border-bottom-style: none; } // applet background between two headers
427
> overlay > widget > image { color: $divider_color; }
429
}
430
scrolledwindow.raven-background { border-bottom-style: none; }
432
.powerstrip button {
434
margin: 2px 0 1px;
435
padding: ($large_size - 24px) / 2;
436
}
437
.option-subtitle { font-size: smaller; }
439
}
440
// Calendar
442
calendar.raven-calendar {
443
// padding: 3px;
444
border-style: none;
445
background-color: transparent;
446
&:selected {
448
border-radius: $material_radius;
449
background-color: $primary_color;
450
}
451
}
452
// MPRIS Applet
454
.raven-mpris {
455
background-color: $panel_bg_color;
456
color: $inverse_fg_color;
457
label { min-height: 24px; }
459
button.image-button {
461
padding: ($large_size - 24px) / 2;
462
@extend %button_selected.flat;
464
}
465
}
466
// Notifications
468
.budgie-notification-window { background-color: transparent; }
469
.budgie-notification {
471
.notification-title { font-size: 120%; }
472
.notification-body { @extend .dim-label; }
474
}
475
// On Screen Display in Budgie
477
.budgie-osd-window {
478
@extend .budgie-notification-window;
479
}
480
// Internal part of the OSD
482
.budgie-osd {
483
.budgie-osd-text { font-size: 120%; }
484
}
485
// Alt+tab switcher in Budgie
487
.budgie-switcher-window {
488
@extend .budgie-notification-window;
489
}
490
// Internal part of the Switcher
492
.budgie-switcher {
493
@extend .budgie-notification;
494
}
495
.drop-shadow {
497
margin: 5px 9px;
498
padding: 3px;
499
border-radius: $material_radius;
500
box-shadow: $shadow_2, inset 0 1px $highlight_color;
501
background-color: $surface_color;
502
button { @extend %simple_flat_button; }
504
.linked > button { border-radius: $material_radius; }
506
}
507
%budgie_dialog {
509
border-radius: $material_radius;
510
background-color: $surface_color;
511
decoration { border-radius: $material_radius; }
513
}
514
// Session Dialog
516
.budgie-session-dialog {
517
@extend %budgie_dialog;
518
label:not(:last-child),
520
.dialog-title { font-size: 120%; }
521
.linked.horizontal > button {
523
padding: 8px 16px;
524
border-top: 1px solid $border_color;
525
border-radius: 0;
526
@extend %simple_flat_button;
528
&:first-child { border-bottom-left-radius: $material_radius; }
530
&:last-child { border-bottom-right-radius: $material_radius; }
532
}
533
}
534
// PolKit Dialog
536
.budgie-polkit-dialog {
537
@extend %budgie_dialog;
538
.message { color: $secondary_fg_color; }
540
.failure { color: $destructive_color; }
542
}
543
// Run Dialog
545
.budgie-run-dialog {
546
@extend %budgie_dialog;
547
background-color: $base_color;
549
entry.search {
551
font-size: 120%;
552
padding: $container_padding 8px + $container_padding;
553
box-shadow: inset 0 1px $highlight_color;
554
background-color: transparent;
555
}
556
list .dim-label { opacity: 1; }
558
scrolledwindow { border-top: 1px solid $border_color; }
560
}
561