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 %simple_flat_button;
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-2;
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
@extend row.activatable;
67
min-height: 32px;
69
padding: 0 8px;
70
border-radius: 0;
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, secondary);
216
font-weight: 500;
217
&.transparent { background-color: $scrim; }
219
button {
221
@extend %flat_button;
222
@extend %button_selected.flat;
223
min-height: 16px;
225
min-width: 16px;
226
padding: 0;
227
border-radius: 0;
228
}
229
&.horizontal button { padding: 0 4px; }
231
&.vertical button { padding: 4px 0; }
233
separator { background-color: on($panel, track); }
235
// used to indicate unread notifications
237
.alert { color: $destructive; }
238
// End Section needs to be fancy
240
.end-region {
241
// background-color: rgba(0,0,0,0.2);
242
}
243
// budgie-pixel-saver-applet
245
.titlebar:not(headerbar) {
246
min-height: 0;
247
padding: 0;
248
box-shadow: none;
249
background-color: transparent;
250
color: on($panel);
251
button:not(.suggested-action):not(.destructive-action) {
253
color: on($panel, secondary);
254
&:hover,
256
&:active { color: on($panel); }
257
}
258
}
259
// Tasklist
261
#tasklist-button {
262
padding: 0 4px;
263
@extend %underscores;
265
}
266
&.vertical #tasklist-button { min-height: 32px; }
268
// Icon Tasklist
270
button.flat.launcher {
271
padding: 0;
272
@extend %underscores;
274
// for indicator colors
276
&:not(:checked) {
277
color: on($panel, disabled);
278
&:hover, &:active { color: on($panel, secondary); }
280
&:disabled { color: on($panel, secondary-disabled); }
282
}
283
}
284
.unpinned button.flat.launcher,
286
.pinned button.flat.launcher.running { @extend %underscores:checked; }
287
}
288
%underscores {
290
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
291
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
292
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
293
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0) {
294
.#{$pos} & {
295
& {
296
border-image: radial-gradient(circle closest-corner at #{$b_pos},
297
currentColor 0%,
298
transparent 0%)
299
0 0 0 0 / 0 0 0 0;
300
}
301
&:checked {
303
border-image: radial-gradient(circle closest-corner at #{$b_pos},
304
currentColor 100%,
305
transparent 0%)
306
#{$b_wid};
307
}
308
}
309
}
310
}
311
frame.raven-frame > border {
313
border-style: none;
314
box-shadow: $shadow-4;
315
}
316
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
318
@each $pos, $b_pos in $pos_list {
320
// Panel borders
321
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $frame; }
322
// Raven borders
324
.#{$pos} frame.raven-frame > border {
325
margin-#{$b_pos}: 32px;
326
// border-#{$b_pos}: 1px solid $frame;
327
}
328
// Shadows
330
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $frame, transparent); }
331
}
332
// Raven
334
.raven {
335
background-color: $surface;
336
> box { margin-bottom: -10px; } // remove extra space between box and .raven-header.bottom
338
stackswitcher.linked > button {
340
@extend %flat_button;
341
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
343
$primary 0%,
344
transparent 0%)
345
0 0 0 / 0 0 0px;
346
border-radius: 0;
347
&:checked {
349
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
350
$primary 100%,
351
transparent 0%)
352
0 0 2 / 0 0 2px;
353
background-color: transparent;
354
}
355
}
356
.raven-header {
358
min-height: $medium-size;
359
padding: 3px;
360
&.top {
362
padding: 0;
363
border-bottom: 1px solid $divider;
364
stackswitcher button {
366
margin: -4px 0 -5px; // remove unwanted vertical margins
367
padding: 0 16px;
368
min-height: $large-size;
369
}
370
}
371
&.bottom { border-top: 1px solid $divider; }
373
}
374
stack {
376
.raven-header { margin-top: -6px; } // remove extra space in Notifications stack
377
scrolledwindow .raven-header { margin-top: -8px; } // remove extra spaces in Applets stack
379
}
380
.expander-button { @extend %circular_button; }
382
.raven-background {
384
border-style: solid none;
385
border-width: 1px;
386
border-color: $divider;
387
background-color: $base;
388
// &.middle { border-bottom-style: none; } // applet background between two headers
390
> overlay > widget > image { color: $divider; }
392
}
393
scrolledwindow.raven-background { border-bottom-style: none; }
395
.powerstrip button {
397
margin: 2px 0 1px;
398
padding: ($large-size - 24px) / 2;
399
}
400
.option-subtitle { font-size: smaller; }
402
}
403
// Calendar
405
calendar.raven-calendar {
406
// padding: 3px;
407
border-style: none;
408
background-color: transparent;
409
&:selected {
411
@extend %selected_items;
412
border-radius: $corner-radius;
414
}
415
}
416
// MPRIS Applet
418
.raven-mpris {
419
background-color: $scrim;
420
color: on($scrim);
421
label { min-height: 24px; }
423
button.image-button {
425
padding: ($large-size - 24px) / 2;
426
@extend %button_selected.flat;
428
}
429
}
430
// Notifications
432
.budgie-notification-window { background-color: transparent; }
433
.budgie-notification {
435
.notification-title { font-size: 120%; }
436
.notification-body { @extend .dim-label; }
438
}
439
// On Screen Display in Budgie
441
.budgie-osd-window {
442
@extend .budgie-notification-window;
443
}
444
// Internal part of the OSD
446
.budgie-osd {
447
.budgie-osd-text { font-size: 120%; }
448
}
449
// Alt+tab switcher in Budgie
451
.budgie-switcher-window {
452
@extend .budgie-notification-window;
453
}
454
// Internal part of the Switcher
456
.budgie-switcher {
457
@extend .budgie-notification;
458
}
459
.drop-shadow {
461
margin: 5px 9px;
462
padding: 3px;
463
border-radius: $corner-radius;
464
box-shadow: $shadow-2, inset 0 1px highlight($surface);
465
background-color: $surface;
466
button { @extend %simple_flat_button; }
468
.linked > button { border-radius: $corner-radius; }
470
}
471
%budgie_dialog {
473
border-radius: $corner-radius;
474
box-shadow: inset 0 1px highlight($surface);
475
background-color: $surface;
476
decoration { border-radius: $corner-radius; }
478
}
479
// Session Dialog
481
.budgie-session-dialog {
482
@extend %budgie_dialog;
483
label:not(:last-child),
485
.dialog-title { font-size: 120%; }
486
.linked.horizontal > button {
488
padding: 8px 16px;
489
border-top: 1px solid $divider;
490
border-radius: 0;
491
@extend %simple_flat_button;
493
&:first-child { border-bottom-left-radius: $corner-radius; }
495
&:last-child { border-bottom-right-radius: $corner-radius; }
497
}
498
}
499
// PolKit Dialog
501
.budgie-polkit-dialog {
502
@extend %budgie_dialog;
503
.message { color: $text-secondary; }
505
.failure { color: $destructive; }
507
}
508
// Run Dialog
510
.budgie-run-dialog {
511
@extend %budgie_dialog;
512
background-color: $base;
514
entry.search {
516
font-size: 120%;
517
padding: $container-padding 8px + $container-padding;
518
border-image: none;
519
box-shadow: none;
520
background-color: transparent;
521
}
522
list .dim-label { opacity: 1; }
524
scrolledwindow { border-top: 1px solid $divider; }
526
}
527