ASCII text
1
// based css:
2
// https://github.com/solus-project/budgie-desktop/blob/master/theme/3.20/sass/_main.scss
3
/******************
5
* Budgie Desktop *
6
******************/
7
// Container for both the "panel" area and the shadow. Wise to keep
9
// this transparent..
10
.budgie-container { background-color: transparent; }
11
// Budgie Menu
13
.budgie-menu {
14
padding : 0;
15
scrolledwindow:not(.categories) { background-color: $base_color; }
17
entry.search {
19
border-bottom: 1px solid $borders_color;
20
border-radius: $md_radius $md_radius 0 0;
21
box-shadow: inset 0 1px $highlight_color;
22
font-size: 120%;
23
}
24
button {
26
@extend row.activatable;
27
min-height: 32px;
29
padding: 0 8px;
30
border-radius: 0;
31
color: $fg_color;
32
font-weight: normal;
33
&:disabled { color: $disabled_fg_color; }
35
&:checked { @extend %selected_items; }
37
}
38
row { all: unset; }
40
}
41
// Menu Button
43
button.budgie-menu-launcher {
44
padding: 0 2px;
45
}
46
// User Menu
48
.user-menu {
49
padding: 10px;
50
// .content-box separator { background-color: $borders_color; }
52
}
53
// Raven Trigger
55
button.raven-trigger {
56
padding-left: 2px;
57
padding-right: 2px;
58
}
59
// Panel
61
.budgie-panel {
62
background-color: $topbar_color;
63
color: $inversed_fg_color;
64
font-weight: 500;
65
button { border-radius: 0; }
67
separator {
69
background-color: $track_color;
70
color: $inversed_fg_color;
71
}
72
// used to indicate unread notifications
74
.alert { color: $destructive_color; }
75
// End Section needs to be fancy
77
.end-region {
78
border-radius: 2px;
79
background-color: rgba(0,0,0,0.2);
80
}
81
}
82
// Tasklist
84
.budgie-panel #tasklist-button {
85
padding: 0 4px;
86
@extend %flat_button;
88
@extend %underscores;
90
}
91
// Icon Tasklist
93
.budgie-panel {
94
button.flat.launcher {
95
padding-top: 0;
96
padding-bottom: 0;
97
@extend %underscores;
99
}
100
.unpinned button.flat.launcher,
102
.pinned button.flat.launcher.running { @extend %underscores:checked; }
103
}
104
%underscores {
106
.top & {
107
border-image: radial-gradient(circle closest-corner at center calc(1px),
108
currentColor 0%,
109
transparent 0%)
110
0 0 0 / 0px 0 0;
111
&:checked {
113
border-image: radial-gradient(circle closest-corner at center calc(1px),
114
currentColor 100%,
115
transparent 0%)
116
2 0 0 / 2px 0 0;
117
}
118
}
119
.bottom & {
121
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
122
currentColor 0%,
123
transparent 0%)
124
0 0 0 / 0 0 0px;
125
&:checked {
127
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
128
currentColor 100%,
129
transparent 0%)
130
0 0 2 / 0 0 2px;
131
}
132
}
133
.left & {
135
border-image: radial-gradient(circle closest-corner at calc(1px) center,
136
currentColor 0%,
137
transparent 0%)
138
0 0 0 0 / 0 0px 0 0;
139
&:checked {
141
border-image: radial-gradient(circle closest-corner at calc(1px) center,
142
currentColor 100%,
143
transparent 0%)
144
0 2 0 0 / 0 2px 0 0;
145
}
146
}
147
.right & {
149
border-image: radial-gradient(circle closest-corner at calc(100% - 1px) center,
150
currentColor 0%,
151
transparent 0%)
152
0 0 0 0 / 0 0 0 0px;
153
&:checked {
155
border-image: radial-gradient(circle closest-corner at calc(100% - 1px) center,
156
currentColor 100%,
157
transparent 0%)
158
0 0 0 2 / 0 0 0 2px;
159
}
160
}
161
}
162
frame.raven-frame > border {
164
border-style: none;
165
box-shadow: $z-depth-4;
166
}
167
$pos_list: ((top, bottom), (bottom, top), (left, right), (right, left));
169
@each $pos, $b_pos in $pos_list {
171
// Panel borders
172
// .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $borders_color; }
173
// Raven borders
175
.#{$pos} frame.raven-frame > border {
176
margin-#{$b_pos}: 32px;
177
// border-#{$b_pos}: 1px solid $borders_color;
178
}
179
// Shadows
181
// .#{$pos} .shadow-block { background-image: linear-gradient(to $b_pos, $borders_color, transparent); }
182
}
183
// Raven
185
.raven {
186
background-color: $base_color;
187
stackswitcher.linked > button {
189
@extend %flat_button;
190
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
192
$warning_bg_color 0%,
193
transparent 0%)
194
0 0 0 / 0 0 0px;
195
border-radius: 0;
196
&:checked {
198
border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
199
$warning_bg_color 100%,
200
transparent 0%)
201
0 0 2 / 0 0 2px;
202
background-color: transparent;
203
}
204
}
205
.raven-header {
207
min-height: $medium_size;
208
padding: 3px;
209
border-style: none none solid;
210
border-width: 1px;
211
border-color: $borders_color;
212
&:not(.top) {
214
margin-top: -6px; // remove extra spaces, but not perfect :(
215
button {
217
@extend %simple_flat_button;
218
&.image-button {
220
border-radius: $circular_radius;
221
-gtk-outline-radius: $circular_radius;
222
}
223
}
224
}
225
&.top {
227
padding: 2px 0;
228
border-style: none;
229
background-color: $primary_color;
230
color: $inversed_fg_color;
231
stackswitcher button {
233
margin: -$container_padding 0;
234
min-height: $medium_size;
235
}
236
button.image-button {
238
&:dir(ltr) { margin-right: 2px; }
239
&:dir(rtl) { margin-left: 2px; }
240
}
241
> image { margin: 0 8px; }
243
> label {
245
margin: 0 -8px;
246
font-weight: bold;
247
}
248
}
249
&.bottom { border-style: solid none none; }
251
}
252
viewport.frame .raven-header { margin-top: -8px; }
254
.expander-button { @extend %circular_button; }
256
.raven-background {
258
border-bottom: 1px solid $borders_color;
259
background-color: $lighter_bg_color;
260
// &.middle { border-bottom-style: none; } // applet background between two headers
262
&.frame { border-style: none none solid; }
264
> overlay > image { color: $track_color; }
266
}
267
scrolledwindow.raven-background { border-bottom-style: none; }
269
> stack > box > .raven-background {
271
border-bottom-style: none;
272
background-color: $primary_color;
273
color: $inversed_fg_color;
274
stackswitcher button { margin: -4px 0; }
276
}
277
.powerstrip button {
279
margin: 2px 0 1px;
280
padding: ($large_size - 24px) / 2;
281
}
282
.option-subtitle { font-size: smaller; }
284
}
285
// Calendar
287
calendar.raven-calendar {
288
// padding: 3px;
289
border-style: none;
290
background-color: transparent;
291
&:selected {
293
border-radius: 2px;
294
background-color: $primary_color;
295
}
296
}
297
// MPRIS Applet
299
.raven-mpris {
300
color: white;
301
background-color: scale-alpha(black, $middle_opacity);
302
label { min-height: 24px; }
304
button.image-button { padding: ($large_size - 24px) / 2; }
306
}
307
// Notifications
309
.budgie-notification-window { background-color: transparent; }
310
.budgie-notification {
312
.notification-title { font-size: 120%; }
313
.notification-body { @extend .dim-label; }
315
}
316
.drop-shadow {
318
margin: 5px 9px;
319
padding: 3px;
320
border-radius: 2px;
321
box-shadow: $z-depth-2, inset 0 1px $highlight_color;
322
background-color: $lighter_bg_color;
323
button { @extend %simple_flat_button; }
325
.linked > button { border-radius: 2px; }
327
}
328
%budgie_dialog {
330
border-radius: 2px;
331
background-color: $lighter_bg_color;
332
decoration { border-radius: 2px; }
334
}
335
// Session Dialog
337
.budgie-session-dialog {
338
@extend %budgie_dialog;
339
label:not(:last-child),
341
.dialog-title { font-size: 120%; }
342
.linked.horizontal > button {
344
padding: 8px 16px;
345
border-top: 1px solid $borders_color;
346
border-radius: 0;
347
@extend %simple_flat_button;
349
&:first-child { border-bottom-left-radius: 2px; }
351
&:last-child { border-bottom-right-radius: 2px; }
353
}
354
}
355
// PolKit Dialog
357
.budgie-polkit-dialog {
358
@extend %budgie_dialog;
359
.message { color: $tertiary_fg_color; }
361
.failure { color: $destructive_color; }
363
}
364
// Run Dialog
366
.budgie-run-dialog {
367
@extend %budgie_dialog;
368
background-color: $base_color;
370
entry.search {
372
font-size: 120%;
373
padding: 0 + $container_padding 8px + $container_padding;
374
box-shadow: inset 0 1px $highlight_color;
375
background-color: transparent;
376
}
377
list .dim-label { opacity: 1; }
379
scrolledwindow { border-top: 1px solid $borders_color; }
381
}
382