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
-gtk-outline-radius: $corner-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: $corner-radius + 1px;
27
box-shadow: $shadow-2;
28
background-color: $surface;
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
button.flat:not(.image-button) {
43
min-height: $menuitem-size;
44
padding: 0 8px;
45
color: $text;
46
font-weight: normal;
47
&:disabled { color: $text-disabled; }
49
}
50
&.budgie-menu {
52
.container { padding: 0; }
53
.sidebar,
55
scrollbar,
56
entry.search { background-color: transparent; }
57
entry.search {
59
border-bottom: 1px solid $divider;
60
border-image: none;
61
border-radius: 0;
62
box-shadow: none;
63
font-size: 120%;
64
}
65
button.flat:not(.image-button) {
67
@extend row.activatable;
68
min-height: 32px;
70
padding: 0 8px;
71
border-radius: 0;
72
&:checked { @extend %selected_items; }
74
&:checked:disabled { background-color: transparent; } // remove pointless indicator
76
}
77
}
78
&.user-menu {
80
.container { padding: 8px; }
81
separator { margin: 4px 0; }
83
}
84
&.sound-popover {
86
separator { margin: 3px 0; }
87
}
88
&.night-light-indicator {
90
.container { padding: 8px; }
91
}
92
&.places-menu {
94
.container { padding: 8px; }
95
// FIXME: untested
97
.message-bar {
98
// margin-bottom: 4px;
99
}
100
.name-button {
102
image {
103
&:dir(ltr) { margin-right: 8px - 5px; }
104
&:dir(rtl) { margin-left: 8px - 5px; }
105
}
106
}
107
.unmount-button {
109
margin: ($menuitem-size - $small-size) / 2;
110
padding: 0;
111
}
112
.places-section-header {
114
}
115
.places-list:not(.always-expand) {
117
margin-top: 4px;
118
padding-top: 4px;
119
border-top: 1px solid $divider;
120
}
121
// FIXME: untested
123
.unlock-area {
124
entry {
125
}
126
button {
128
}
129
}
130
// use such sizes for consistency with other hard-coded dim-label sizes
132
.alternative-label {
133
padding: 3px;
134
font-size: 15px;
135
}
136
}
137
&.workspace-popover {
139
.container { padding: 8px; }
140
separator { margin: 4px 0; }
142
flowboxchild { padding: 0; }
144
}
145
}
146
// FIXME: workspace has unnecessary/unknown margin
148
.workspace-switcher {
149
.workspace-layout {
150
border: 0 solid on($panel, divider);
151
.top &,
153
.bottom & {
154
&:dir(ltr) { border-left-width: 1px; }
155
&:dir(rtl) { border-right-width: 1px; }
157
}
158
.left &,
160
.right & { border-top-width: 1px; }
161
}
162
.workspace-item,
164
.workspace-add-button {
165
border: 0 solid on($panel, divider);
166
.top &,
168
.bottom & {
169
&:dir(ltr) { border-right-width: 1px; }
170
&:dir(rtl) { border-left-width: 1px; }
172
}
173
.left &,
175
.right & { border-bottom-width: 1px; }
176
}
177
.workspace-item {
179
transition: $transition;
180
&.current-workspace { background-color: $overlay-checked; }
182
}
183
.workspace-add-button {
185
&:hover { box-shadow: none; }
186
&:active { background-image: none; }
188
&:active image { margin: 1px 0 -1px; }
190
}
191
.workspace-icon-button {
193
.budgie-panel & { // to overwrite the .budgie-panel button style below
194
min-height: 24px;
195
min-width: 24px;
196
padding: 0;
197
border-radius: $corner-radius;
198
}
199
}
200
}
201
// Menu Button
203
button.budgie-menu-launcher {
204
// padding: 0 2px;
205
}
206
// Raven Trigger
208
button.raven-trigger {
209
// padding: 0 4px;
210
}
211
// Panel
213
.budgie-panel {
214
transition: background-color $duration $ease-out;
215
background-color: $panel;
216
color: on($panel, secondary);
217
font-weight: 500;
218
&.transparent { background-color: $scrim; }
220
button {
222
@extend %flat_button;
223
@extend %button_selected.flat;
224
min-height: 16px;
226
min-width: 16px;
227
padding: 0;
228
border-radius: 0;
229
}
230
&.horizontal button { padding: 0 4px; }
232
&.vertical button { padding: 4px 0; }
234
separator { background-color: on($panel, track); }
236
// used to indicate unread notifications
238
.alert { color: $destructive; }
239
// End Section needs to be fancy
241
.end-region {
242
// background-color: rgba(0,0,0,0.2);
243
}
244
// budgie-pixel-saver-applet
246
.titlebar:not(headerbar) {
247
min-height: 0;
248
padding: 0;
249
box-shadow: none;
250
background-color: transparent;
251
color: on($panel);
252
button:not(.suggested-action):not(.destructive-action) {
254
color: on($panel, secondary);
255
&:hover,
257
&:active { color: on($panel); }
258
}
259
}
260
// Tasklist
262
#tasklist-button {
263
padding: 0 4px;
264
@extend %underscores;
266
}
267
&.vertical #tasklist-button { min-height: 32px; }
269
// Icon Tasklist
271
button.flat.launcher {
272
padding: 0;
273
@extend %underscores;
275
// for indicator colors
277
&:not(:checked) {
278
color: on($panel, disabled);
279
&:hover, &:active { color: on($panel, secondary); }
281
&:disabled { color: on($panel, secondary-disabled); }
283
}
284
}
285
.unpinned button.flat.launcher,
287
.pinned button.flat.launcher.running { @extend %underscores:checked; }
288
}
289
%underscores {
291
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
292
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
293
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
294
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0) {
295
.#{$pos} & {
296
& {
297
border-image: radial-gradient(circle closest-corner at #{$b_pos},
298
currentColor 0%,
299
transparent 0%)
300
0 0 0 0 / 0 0 0 0;
301
}
302
&:checked {
304
border-image: radial-gradient(circle closest-corner at #{$b_pos},
305
currentColor 100%,
306
transparent 0%)
307
#{$b_wid};
308
}
309
}
310
}
311
}
312
frame.raven-frame > border {
314
border-style: none;
315
box-shadow: $shadow-4;
316
}
317
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
319
@each $pos, $b_pos in $pos_list {
321
// Panel borders
322
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $frame; }
323
// Raven borders
325
.#{$pos} frame.raven-frame > border {
326
margin-#{$b_pos}: 32px;
327
// border-#{$b_pos}: 1px solid $frame;
328
}
329
// Shadows
331
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $frame, transparent); }
332
}
333
// Raven
335
.raven {
336
background-color: $surface;
337
> box { margin-bottom: -10px; } // remove extra space between box and .raven-header.bottom
339
stackswitcher.linked > button {
341
@extend %flat_button;
342
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
344
$primary 0%,
345
transparent 0%)
346
0 0 0 / 0 0 0px;
347
border-radius: 0;
348
&:checked {
350
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
351
$primary 100%,
352
transparent 0%)
353
0 0 2 / 0 0 2px;
354
background-color: transparent;
355
}
356
}
357
.raven-header {
359
min-height: $medium-size;
360
padding: 3px;
361
&.top {
363
padding: 0;
364
border-bottom: 1px solid $divider;
365
stackswitcher button {
367
margin: -4px 0 -5px; // remove unwanted vertical margins
368
padding: 0 16px;
369
min-height: $large-size;
370
}
371
}
372
&.bottom { border-top: 1px solid $divider; }
374
}
375
stack {
377
.raven-header { margin-top: -6px; } // remove extra space in Notifications stack
378
scrolledwindow .raven-header { margin-top: -8px; } // remove extra spaces in Applets stack
380
}
381
.expander-button { @extend %circular_button; }
383
.raven-background {
385
border-style: solid none;
386
border-width: 1px;
387
border-color: $divider;
388
background-color: $base;
389
// &.middle { border-bottom-style: none; } // applet background between two headers
391
> overlay > widget > image { color: $divider; }
393
}
394
scrolledwindow.raven-background { border-bottom-style: none; }
396
.powerstrip button {
398
margin: 2px 0 1px;
399
padding: ($large-size - 24px) / 2;
400
}
401
.option-subtitle { font-size: smaller; }
403
}
404
// Calendar
406
calendar.raven-calendar {
407
// padding: 3px;
408
border-style: none;
409
background-color: transparent;
410
&:selected {
412
@extend %selected_items;
413
border-radius: $corner-radius;
415
}
416
}
417
// MPRIS Applet
419
.raven-mpris {
420
background-color: $scrim;
421
color: on($scrim);
422
label { min-height: 24px; }
424
button.image-button {
426
padding: ($large-size - 24px) / 2;
427
@extend %button_selected.flat;
429
}
430
}
431
// Notifications
433
.budgie-notification-window { background-color: transparent; }
434
.budgie-notification {
436
.notification-title { font-size: 120%; }
437
.notification-body { @extend .dim-label; }
439
}
440
// On Screen Display in Budgie
442
.budgie-osd-window {
443
@extend .budgie-notification-window;
444
}
445
// Internal part of the OSD
447
.budgie-osd {
448
.budgie-osd-text { font-size: 120%; }
449
}
450
// Alt+tab switcher in Budgie
452
.budgie-switcher-window {
453
@extend .budgie-notification-window;
454
}
455
// Internal part of the Switcher
457
.budgie-switcher {
458
@extend .budgie-notification;
459
}
460
.drop-shadow {
462
margin: 5px 9px;
463
padding: 3px;
464
border-radius: $corner-radius;
465
box-shadow: $shadow-2, inset 0 1px highlight($surface);
466
background-color: $surface;
467
button { @extend %simple_flat_button; }
469
.linked > button { border-radius: $corner-radius; }
471
}
472
%budgie_dialog {
474
border-radius: $corner-radius;
475
box-shadow: inset 0 1px highlight($surface);
476
background-color: $surface;
477
decoration { border-radius: $corner-radius; }
479
}
480
// Session Dialog
482
.budgie-session-dialog {
483
@extend %budgie_dialog;
484
label:not(:last-child),
486
.dialog-title { font-size: 120%; }
487
.linked.horizontal > button {
489
padding: 8px 16px;
490
border-top: 1px solid $divider;
491
border-radius: 0;
492
@extend %simple_flat_button;
494
&:first-child { border-bottom-left-radius: $corner-radius; }
496
&:last-child { border-bottom-right-radius: $corner-radius; }
498
}
499
}
500
// PolKit Dialog
502
.budgie-polkit-dialog {
503
@extend %budgie_dialog;
504
.message { color: $text-secondary; }
506
.failure { color: $destructive; }
508
}
509
// Run Dialog
511
.budgie-run-dialog {
512
@extend %budgie_dialog;
513
background-color: $base;
515
entry.search {
517
font-size: 120%;
518
padding: $container-padding 8px + $container-padding;
519
border-image: none;
520
box-shadow: none;
521
background-color: transparent;
522
}
523
list .dim-label { opacity: 1; }
525
scrolledwindow { border-top: 1px solid $divider; }
527
}
528