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: $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;
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 $border;
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 $border;
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 $inverse-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 $inverse-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: $shorter_transition;
180
&.current-workspace { background-color: $inverse-divider; }
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: $material_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 $shorter_duration $deceleration_curve;
215
background-color: $panel;
216
color: $inverse-text-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
&:checked { background-color: $inverse-divider; }
231
}
232
&.horizontal button { padding: 0 4px; }
234
&.vertical button { padding: 4px 0; }
236
separator { background-color: $inverse-track; }
238
// used to indicate unread notifications
240
.alert { color: $destructive; }
241
// End Section needs to be fancy
243
.end-region {
244
// background-color: rgba(0,0,0,0.2);
245
}
246
// budgie-pixel-saver-applet
248
.titlebar:not(headerbar) {
249
min-height: 0;
250
padding: 0;
251
box-shadow: none;
252
background-color: transparent;
253
color: $inverse-text;
254
button:not(.suggested-action):not(.destructive-action) {
256
color: $inverse-text-secondary;
257
&:hover,
259
&:active { color: $inverse-text; }
260
}
261
}
262
// Tasklist
264
#tasklist-button {
265
padding: 0 4px;
266
@extend %underscores;
268
}
269
&.vertical #tasklist-button { min-height: 32px; }
271
// Icon Tasklist
273
button.flat.launcher {
274
padding: 0;
275
@extend %underscores;
277
// for indicator colors
279
&:not(:checked) {
280
color: $inverse-text-disabled;
281
&:hover, &:active { color: $inverse-text-secondary; }
283
&:disabled { color: $inverse-track; }
285
}
286
}
287
.unpinned button.flat.launcher,
289
.pinned button.flat.launcher.running { @extend %underscores:checked; }
290
}
291
%underscores {
293
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
294
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
295
(left, calc(1px) center, 0 0 0 2 / 0 0 0 2px),
296
(right, calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0) {
297
.#{$pos} & {
298
& {
299
border-image: radial-gradient(circle closest-corner at #{$b_pos},
300
currentColor 0%,
301
transparent 0%)
302
0 0 0 0 / 0 0 0 0;
303
}
304
&:checked {
306
border-image: radial-gradient(circle closest-corner at #{$b_pos},
307
currentColor 100%,
308
transparent 0%)
309
#{$b_wid};
310
}
311
}
312
}
313
}
314
frame.raven-frame > border {
316
border-style: none;
317
box-shadow: $shadow_4;
318
}
319
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
321
@each $pos, $b_pos in $pos_list {
323
// Panel borders
324
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $border; }
325
// Raven borders
327
.#{$pos} frame.raven-frame > border {
328
margin-#{$b_pos}: 32px;
329
// border-#{$b_pos}: 1px solid $border;
330
}
331
// Shadows
333
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $border, transparent); }
334
}
335
// Raven
337
.raven {
338
background-color: $surface;
339
> box { margin-bottom: -10px; } // remove extra space between box and .raven-header.bottom
341
stackswitcher.linked > button {
343
@extend %flat_button;
344
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
346
$primary 0%,
347
transparent 0%)
348
0 0 0 / 0 0 0px;
349
border-radius: 0;
350
&:checked {
352
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
353
$primary 100%,
354
transparent 0%)
355
0 0 2 / 0 0 2px;
356
background-color: transparent;
357
}
358
}
359
.raven-header {
361
min-height: $medium_size;
362
padding: 3px;
363
&.top {
365
padding: 0;
366
border-bottom: 1px solid $border;
367
stackswitcher button {
369
margin: -4px 0 -5px; // remove unwanted vertical margins
370
padding: 0 16px;
371
min-height: $large_size;
372
}
373
}
374
&.bottom { border-top: 1px solid $border; }
376
}
377
stack {
379
.raven-header { margin-top: -6px; } // remove extra space in Notifications stack
380
scrolledwindow .raven-header { margin-top: -8px; } // remove extra spaces in Applets stack
382
}
383
.expander-button { @extend %circular_button; }
385
.raven-background {
387
border-style: solid none;
388
border-width: 1px;
389
border-color: $border;
390
background-color: $base;
391
// &.middle { border-bottom-style: none; } // applet background between two headers
393
> overlay > widget > image { color: $divider; }
395
}
396
scrolledwindow.raven-background { border-bottom-style: none; }
398
.powerstrip button {
400
margin: 2px 0 1px;
401
padding: ($large_size - 24px) / 2;
402
}
403
.option-subtitle { font-size: smaller; }
405
}
406
// Calendar
408
calendar.raven-calendar {
409
// padding: 3px;
410
border-style: none;
411
background-color: transparent;
412
&:selected {
414
@extend %selected_items;
415
border-radius: $material_radius;
417
}
418
}
419
// MPRIS Applet
421
.raven-mpris {
422
background-color: $scrim;
423
color: $inverse-text;
424
label { min-height: 24px; }
426
button.image-button {
428
padding: ($large_size - 24px) / 2;
429
@extend %button_selected.flat;
431
}
432
}
433
// Notifications
435
.budgie-notification-window { background-color: transparent; }
436
.budgie-notification {
438
.notification-title { font-size: 120%; }
439
.notification-body { @extend .dim-label; }
441
}
442
// On Screen Display in Budgie
444
.budgie-osd-window {
445
@extend .budgie-notification-window;
446
}
447
// Internal part of the OSD
449
.budgie-osd {
450
.budgie-osd-text { font-size: 120%; }
451
}
452
// Alt+tab switcher in Budgie
454
.budgie-switcher-window {
455
@extend .budgie-notification-window;
456
}
457
// Internal part of the Switcher
459
.budgie-switcher {
460
@extend .budgie-notification;
461
}
462
.drop-shadow {
464
margin: 5px 9px;
465
padding: 3px;
466
border-radius: $material_radius;
467
box-shadow: $shadow_2, inset 0 1px $highlight;
468
background-color: $surface;
469
button { @extend %simple_flat_button; }
471
.linked > button { border-radius: $material_radius; }
473
}
474
%budgie_dialog {
476
border-radius: $material_radius;
477
background-color: $surface;
478
decoration { border-radius: $material_radius; }
480
}
481
// Session Dialog
483
.budgie-session-dialog {
484
@extend %budgie_dialog;
485
label:not(:last-child),
487
.dialog-title { font-size: 120%; }
488
.linked.horizontal > button {
490
padding: 8px 16px;
491
border-top: 1px solid $border;
492
border-radius: 0;
493
@extend %simple_flat_button;
495
&:first-child { border-bottom-left-radius: $material_radius; }
497
&:last-child { border-bottom-right-radius: $material_radius; }
499
}
500
}
501
// PolKit Dialog
503
.budgie-polkit-dialog {
504
@extend %budgie_dialog;
505
.message { color: $text-secondary; }
507
.failure { color: $destructive; }
509
}
510
// Run Dialog
512
.budgie-run-dialog {
513
@extend %budgie_dialog;
514
background-color: $base;
516
entry.search {
518
font-size: 120%;
519
padding: $container_padding 8px + $container_padding;
520
border-image: none;
521
box-shadow: inset 0 1px $highlight;
522
background-color: transparent;
523
}
524
list .dim-label { opacity: 1; }
526
scrolledwindow { border-top: 1px solid $border; }
528
}
529