ASCII text
1
// based css:
2
// https://github.com/budgie-desktop/budgie-desktop/blob/master/src/theme/3.20/sass/_main.scss
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 Menu
12
.budgie-menu {
13
&.background {
14
padding: 0;
15
background-color: $base_color;
16
}
17
scrollbar,
19
entry.search { background-color: transparent; }
20
entry.search {
22
border-bottom: 1px solid $border_color;
23
border-radius: 0;
24
box-shadow: none;
25
font-size: 120%;
26
}
27
.categories {
29
&:dir(ltr) { border-bottom-left-radius: $material_radius; }
30
&:dir(rtl) { border-bottom-right-radius: $material_radius; }
32
}
33
button {
35
@extend row.activatable;
36
min-height: 32px;
38
padding: 0 8px;
39
border-radius: 0;
40
color: $fg_color;
41
font-weight: normal;
42
&:disabled { color: $disabled_fg_color; }
44
&:checked { @extend %selected_items; }
46
}
47
row { all: unset; }
49
}
50
// Menu Button
52
button.budgie-menu-launcher {
53
padding: 0 2px;
54
}
55
// User Menu
57
popover.background.user-menu {
58
padding: 8px;
59
.content-box { background-color: transparent; }
61
separator { margin: 4px 0; }
63
row {
65
padding: 0;
66
box-shadow: none;
67
background-image: none;
68
}
69
}
70
// Raven Trigger
72
button.raven-trigger {
73
padding: 0 4px;
74
}
75
// Places Menu
77
popover.background.places-menu {
78
padding: 8px;
79
// FIXME: untested
81
.message-bar {
82
// margin-bottom: 4px;
83
}
84
.name-button.text-button {
86
// padding: 4px 8px;
87
padding-left: 8px;
88
padding-right: 8px;
89
image {
91
&:dir(ltr) { margin-right: 8px - 5px; }
92
&:dir(rtl) { margin-left: 8px - 5px; }
93
}
94
}
95
// FIXME: untested
97
.unmount-button {
98
// padding: ($medium_size - 24px) / 2;
99
}
100
.places-section-header > image {
102
&:dir(ltr) { margin: 0 8px - 10px 0 8px - 3px; }
103
&:dir(rtl) { margin: 0 8px - 3px 0 8px - 10px; }
104
}
105
.places-list {
107
margin-top: 4px;
108
padding-top: 4px;
109
border-top: 1px solid $border_color;
110
background-color: transparent;
111
}
112
row {
114
padding: 0;
115
box-shadow: none;
116
background-image: none;
117
}
118
// FIXME: untested
120
.unlock-area {
121
entry {
122
}
123
button {
125
}
126
}
127
}
128
// Panel
130
.budgie-panel {
131
background-color: $panel_bg_color;
132
color: $titlebar_fg_color;
133
font-weight: 500;
134
button { border-radius: 0; }
136
separator { background-color: $fill_color; }
138
// used to indicate unread notifications
140
.alert { color: $destructive_color; }
141
// End Section needs to be fancy
143
.end-region {
144
// background-color: rgba(0,0,0,0.2);
145
}
146
// Tasklist
148
#tasklist-button {
149
padding: 0 4px;
150
@extend %flat_button;
152
@extend %underscores;
154
}
155
// Icon Tasklist
157
button.flat.launcher {
158
padding: 0;
159
@extend %underscores;
161
}
162
.unpinned button.flat.launcher,
164
.pinned button.flat.launcher.running { @extend %underscores:checked; }
165
}
166
%underscores {
168
@each $pos, $b_pos, $b_wid in (top, center calc(1px), 2 0 0 0 / 2px 0 0 0),
169
(bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
170
(left, calc(1px) center, 0 2 0 0 / 0 2px 0 0),
171
(right, calc(100% - 1px) center, 0 0 0 2 / 0 0 0 2px) {
172
.#{$pos} & {
173
& {
174
border-image: radial-gradient(circle closest-corner at #{$b_pos},
175
currentColor 0%,
176
transparent 0%)
177
0 0 0 0 / 0 0 0 0;
178
}
179
&:checked {
181
border-image: radial-gradient(circle closest-corner at #{$b_pos},
182
currentColor 100%,
183
transparent 0%)
184
#{$b_wid};
185
}
186
}
187
}
188
}
189
frame.raven-frame > border {
191
border-style: none;
192
box-shadow: $shadow_4;
193
}
194
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
196
@each $pos, $b_pos in $pos_list {
198
// Panel borders
199
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $border_color; }
200
// Raven borders
202
.#{$pos} frame.raven-frame > border {
203
margin-#{$b_pos}: 32px;
204
// border-#{$b_pos}: 1px solid $border_color;
205
}
206
// Shadows
208
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $border_color, transparent); }
209
}
210
// Raven
212
.raven {
213
background-color: $lighter_bg_color;
214
> stack { margin-bottom: -10px; }
216
// > stack > box:last-child > stack { margin-top: -6px; }
218
stackswitcher.linked > button {
220
@extend %flat_button;
221
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
223
$warning_bg_color 0%,
224
transparent 0%)
225
0 0 0 / 0 0 0px;
226
border-radius: 0;
227
&:checked {
229
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
230
$warning_bg_color 100%,
231
transparent 0%)
232
0 0 2 / 0 0 2px;
233
background-color: transparent;
234
}
235
}
236
.raven-header {
238
min-height: $medium_size;
239
padding: 3px;
240
&:not(.top) {
242
margin-top: -6px; // remove extra spaces, but not perfect :(
243
button {
245
@extend %simple_flat_button;
246
&.image-button { @extend %circular_button; }
248
}
249
}
250
&.top {
252
padding: 2px 0;
253
background-color: $primary_color;
254
color: $inverse_fg_color;
255
stackswitcher button {
257
margin: -$container_padding 0;
258
min-height: $medium_size;
259
}
260
button.image-button {
262
&:dir(ltr) { margin-right: 2px; }
263
&:dir(rtl) { margin-left: 2px; }
264
}
265
> image { margin: 0 8px; }
267
> label {
269
margin: 0 -8px;
270
font-weight: bold;
271
}
272
}
273
&.bottom { border-top: 1px solid $border_color; }
275
}
276
viewport.frame .raven-header { margin-top: -8px; }
278
.expander-button { @extend %circular_button; }
280
.raven-background {
282
border-style: solid none;
283
border-width: 1px;
284
border-color: $border_color;
285
background-color: $base_color;
286
// &.middle { border-bottom-style: none; } // applet background between two headers
288
&.frame { border-style: solid none; }
290
> overlay > image { color: $fill_color; }
292
grid > label:first-child { min-height: $medium_size; } // workaround to fix vertical-align
294
spinbutton:not(.vertical) { @extend %entry.flat; }
296
button.combo { @extend %combo_flat; }
298
}
299
scrolledwindow.raven-background { border-bottom-style: none; }
301
.raven-header.top + .raven-background {
303
border-style: none;
304
background-color: $primary_color;
305
color: $inverse_fg_color;
306
stackswitcher button { margin: -4px 0; }
308
}
309
.powerstrip button {
311
margin: 2px 0 1px;
312
padding: ($large_size - 24px) / 2;
313
}
314
.option-subtitle { font-size: smaller; }
316
}
317
// Calendar
319
calendar.raven-calendar {
320
// padding: 3px;
321
border-style: none;
322
background-color: transparent;
323
&:selected {
325
border-radius: 2px;
326
background-color: $primary_color;
327
}
328
}
329
// MPRIS Applet
331
.raven-mpris {
332
background-color: scale-alpha($black, $middle_opacity);
333
color: $white;
334
label { min-height: 24px; }
336
button.image-button { padding: ($large_size - 24px) / 2; }
338
}
339
// Notifications
341
.budgie-notification-window { background-color: transparent; }
342
.budgie-notification {
344
.notification-title { font-size: 120%; }
345
.notification-body { @extend .dim-label; }
347
}
348
// On Screen Display in Budgie
350
.budgie-osd-window {
351
@extend .budgie-notification-window;
352
}
353
// Internal part of the OSD
355
.budgie-osd {
356
.budgie-osd-text { font-size: 120%; }
357
}
358
.drop-shadow {
360
margin: 5px 9px;
361
padding: 3px;
362
border-radius: 2px;
363
box-shadow: $shadow_2, inset 0 1px $highlight_color;
364
background-color: $lighter_bg_color;
365
button { @extend %simple_flat_button; }
367
.linked > button { border-radius: 2px; }
369
}
370
%budgie_dialog {
372
border-radius: 2px;
373
background-color: $lighter_bg_color;
374
decoration { border-radius: 2px; }
376
}
377
// Session Dialog
379
.budgie-session-dialog {
380
@extend %budgie_dialog;
381
label:not(:last-child),
383
.dialog-title { font-size: 120%; }
384
.linked.horizontal > button {
386
padding: 8px 16px;
387
border-top: 1px solid $border_color;
388
border-radius: 0;
389
@extend %simple_flat_button;
391
&:first-child { border-bottom-left-radius: 2px; }
393
&:last-child { border-bottom-right-radius: 2px; }
395
}
396
}
397
// PolKit Dialog
399
.budgie-polkit-dialog {
400
@extend %budgie_dialog;
401
.message { color: $tertiary_fg_color; }
403
.failure { color: $destructive_color; }
405
}
406
// Run Dialog
408
.budgie-run-dialog {
409
@extend %budgie_dialog;
410
background-color: $base_color;
412
entry.search {
414
font-size: 120%;
415
padding: $container_padding 8px + $container_padding;
416
box-shadow: inset 0 1px $highlight_color;
417
background-color: transparent;
418
}
419
list .dim-label { opacity: 1; }
421
scrolledwindow { border-top: 1px solid $border_color; }
423
}
424