|
98
|
1 @function gtkalpha($c,$a) {
|
|
|
2 @return unquote("alpha(#{$c},#{$a})");
|
|
|
3 }
|
|
|
4
|
|
|
5 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
|
6 $asset_suffix: if($variant=='dark', '-dark', '');
|
|
|
7 $assets: if($contrast=='normal', 'assets', 'assets-hc');
|
|
|
8 $backdrop_transition: 200ms ease-out;
|
|
|
9 $button_transition: all 200ms $ease-out-quad;
|
|
|
10 $focus_transition: outline-width 200ms $ease-out-quad, outline-offset 200ms $ease-out-quad;
|
|
|
11 $button_radius: 5px;
|
|
|
12 $menu_radius: 5px;
|
|
|
13 $menu_margin: $menu_radius; //margin around menuitems & sidebar items
|
|
|
14 $window_radius: $button_radius + 3;
|
|
|
15 $popover_radius: $button_radius + 4;
|
|
|
16
|
|
|
17 /***************
|
|
|
18 * Base States *
|
|
|
19 ***************/
|
|
|
20 .background {
|
|
|
21 color: $fg_color;
|
|
|
22 background-color: $bg_color;
|
|
|
23
|
|
|
24 &:backdrop {
|
|
|
25 text-shadow: none;
|
|
|
26 -gtk-icon-shadow: none;
|
|
|
27 }
|
|
|
28 }
|
|
|
29
|
|
|
30 dnd {
|
|
|
31 color: $fg-color;
|
|
|
32 }
|
|
|
33
|
|
|
34 .normal-icons {
|
|
|
35 -gtk-icon-size: 16px;
|
|
|
36 }
|
|
|
37
|
|
|
38 .large-icons {
|
|
|
39 -gtk-icon-size: 32px;
|
|
|
40 }
|
|
|
41
|
|
|
42 image:disabled {
|
|
|
43 -gtk-icon-filter: opacity(0.5);
|
|
|
44 }
|
|
|
45
|
|
|
46 .view,
|
|
|
47 %view {
|
|
|
48 color: $text_color;
|
|
|
49 background-color: $base_color;
|
|
|
50
|
|
|
51 &:disabled {
|
|
|
52 color: $insensitive_fg_color;
|
|
|
53 background-color: $insensitive_bg_color;
|
|
|
54 }
|
|
|
55
|
|
|
56 &:selected {
|
|
|
57 &:focus, & {
|
|
|
58 @extend %selected_items;
|
|
|
59
|
|
|
60 border-radius: 3px;
|
|
|
61 }
|
|
|
62 }
|
|
|
63 }
|
|
|
64
|
|
|
65 textview {
|
|
|
66 > text {
|
|
|
67 @extend %view;
|
|
|
68
|
|
|
69 > selection { &:focus, & { @extend %selected_items; }}
|
|
|
70 }
|
|
|
71
|
|
|
72 &:drop(active) {
|
|
|
73 caret-color: $drop_target_color;
|
|
|
74 }
|
|
|
75 }
|
|
|
76
|
|
|
77 textview > border { background-color: mix($bg_color, $base_color, 50%); }
|
|
|
78
|
|
|
79 iconview {
|
|
|
80 @extend .view;
|
|
|
81
|
|
|
82 @include focus-ring();
|
|
|
83
|
|
|
84 &:drop(active) {
|
|
|
85 box-shadow: none;
|
|
|
86 }
|
|
|
87
|
|
|
88 > dndtarget:drop(active) {
|
|
|
89 border-style: solid;
|
|
|
90 border-width: 1px;
|
|
|
91 border-color: $selected_borders_color;
|
|
|
92 }
|
|
|
93 }
|
|
|
94
|
|
|
95 rubberband {
|
|
|
96 border: 1px solid darken($selected_bg_color, 10%);
|
|
|
97 background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
|
|
|
98 }
|
|
|
99
|
|
|
100 flowbox {
|
|
|
101 > rubberband { @extend rubberband; }
|
|
|
102
|
|
|
103 > flowboxchild {
|
|
|
104 padding: 3px;
|
|
|
105 transition: $focus_transition;
|
|
|
106
|
|
|
107 @include focus-ring();
|
|
|
108
|
|
|
109 &:selected {
|
|
|
110 outline-color: $alt_focus_border_color;
|
|
|
111
|
|
|
112 @extend %selected_items;
|
|
|
113 }
|
|
|
114 }
|
|
|
115 }
|
|
|
116
|
|
|
117 gridview {
|
|
|
118 > rubberband { @extend rubberband; }
|
|
|
119
|
|
|
120 > child {
|
|
|
121 padding: 3px;
|
|
|
122 transition: $focus_transition;
|
|
|
123
|
|
|
124 @include focus-ring();
|
|
|
125
|
|
|
126 &:selected {
|
|
|
127 outline-color: $alt_focus_border_color;
|
|
|
128
|
|
|
129 @extend %selected_items;
|
|
|
130 }
|
|
|
131
|
|
|
132 box { //cells
|
|
|
133 border-spacing: 8px; //label separation
|
|
|
134 margin: 12px;
|
|
|
135 }
|
|
|
136 }
|
|
|
137 }
|
|
|
138
|
|
|
139 coverflow cover {
|
|
|
140 color: $text_color;
|
|
|
141 background-color: $base_color;
|
|
|
142 border: 1px solid black;
|
|
|
143 }
|
|
|
144
|
|
|
145 label {
|
|
|
146 @include focus-ring();
|
|
|
147
|
|
|
148 &.separator {
|
|
|
149 @extend .dim-label;
|
|
|
150 }
|
|
|
151
|
|
|
152 &:selected { @extend %nobg_selected_items; }
|
|
|
153
|
|
|
154 > selection {
|
|
|
155 background-color: $selected_bg_color;
|
|
|
156 color: $selected_fg_color;
|
|
|
157 }
|
|
|
158
|
|
|
159 &:disabled {
|
|
|
160 color: $insensitive_fg_color;
|
|
|
161
|
|
|
162 button & { color: inherit; }
|
|
|
163
|
|
|
164 > selection { @extend %selected_items_disabled; }
|
|
|
165 }
|
|
|
166
|
|
|
167 &.error {
|
|
|
168 color: $error_color;
|
|
|
169 &:disabled { color: transparentize($error_color,0.5); }
|
|
|
170 }
|
|
|
171 }
|
|
|
172
|
|
|
173 .dim-label {
|
|
|
174 opacity: $dim_label_opacity;
|
|
|
175 text-shadow: none;
|
|
|
176 }
|
|
|
177
|
|
|
178 window.assistant {
|
|
|
179 .sidebar {
|
|
|
180 padding: $menu-margin;
|
|
|
181 border-top: 1px solid $borders_color;
|
|
|
182 }
|
|
|
183
|
|
|
184 &.csd .sidebar { border-top-style: none; }
|
|
|
185
|
|
|
186 .sidebar > label { padding: 6px 12px; }
|
|
|
187
|
|
|
188 .sidebar > label.highlight {
|
|
|
189 background-color: $menu_selected_color;
|
|
|
190 border-radius: $menu-margin;
|
|
|
191 }
|
|
|
192 }
|
|
|
193
|
|
|
194 window.aboutdialog image.large-icons {
|
|
|
195 -gtk-icon-size: 128px;
|
|
|
196 }
|
|
|
197
|
|
|
198 %osd,
|
|
|
199 .osd {
|
|
|
200 color: $osd_fg_color;
|
|
|
201 border: none;
|
|
|
202 background-color: $osd_bg_color;
|
|
|
203 background-clip: padding-box;
|
|
|
204 -gtk-icon-shadow: 0 1px black;
|
|
|
205
|
|
|
206 }
|
|
|
207
|
|
|
208
|
|
|
209 /*********************
|
|
|
210 * Spinner Animation *
|
|
|
211 *********************/
|
|
|
212 @keyframes spin {
|
|
|
213 to { transform: rotate(1turn); }
|
|
|
214 }
|
|
|
215
|
|
|
216 spinner {
|
|
|
217 background: none;
|
|
|
218 opacity: 0; // non spinning spinner makes no sense
|
|
|
219 -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
|
|
|
220
|
|
|
221 &:checked {
|
|
|
222 opacity: 1;
|
|
|
223 animation: spin 1s linear infinite;
|
|
|
224
|
|
|
225 &:disabled { opacity: 0.5; }
|
|
|
226 }
|
|
|
227 }
|
|
|
228
|
|
|
229 /**********************
|
|
|
230 * General Typography *
|
|
|
231 **********************/
|
|
|
232
|
|
|
233 .large-title {
|
|
|
234 font-weight: 300;
|
|
|
235 font-size: 24pt;
|
|
|
236 }
|
|
|
237 .title-1 {
|
|
|
238 font-weight: 800;
|
|
|
239 font-size: 20pt;
|
|
|
240 }
|
|
|
241 .title-2 {
|
|
|
242 font-weight: 800;
|
|
|
243 font-size: 15pt;
|
|
|
244 }
|
|
|
245 .title-3 {
|
|
|
246 font-weight: 700;
|
|
|
247 font-size: 15pt;
|
|
|
248 }
|
|
|
249 .title-4 {
|
|
|
250 font-weight: 700;
|
|
|
251 font-size: 13pt;
|
|
|
252 }
|
|
|
253 .heading {
|
|
|
254 font-weight: 700;
|
|
|
255 font-size: 11pt;
|
|
|
256 }
|
|
|
257 .body {
|
|
|
258 font-weight: 400;
|
|
|
259 font-size: 11pt;
|
|
|
260 }
|
|
|
261 .caption-heading {
|
|
|
262 font-weight: 700;
|
|
|
263 font-size: 9pt;
|
|
|
264 }
|
|
|
265 .caption {
|
|
|
266 font-weight: 400;
|
|
|
267 font-size: 9pt;
|
|
|
268 }
|
|
|
269
|
|
|
270 /****************
|
|
|
271 * Text Entries *
|
|
|
272 ****************/
|
|
|
273
|
|
|
274 %entry,
|
|
|
275 entry {
|
|
|
276 %entry_basic, & {
|
|
|
277 min-height: 32px;
|
|
|
278 padding-left: 8px;
|
|
|
279 padding-right: 8px;
|
|
|
280 border: 1px solid;
|
|
|
281 border-radius: $button_radius;
|
|
|
282 border-spacing: 6px;
|
|
|
283 transition: all 200ms $ease-out-quad;
|
|
|
284
|
|
|
285 @include entry(normal);
|
|
|
286
|
|
|
287 @include focus-ring($focus-state: 'focus-within');
|
|
|
288
|
|
|
289 > image { // icons inside the entry
|
|
|
290 &.left { margin-right: 6px; }
|
|
|
291 &.right { margin-left: 6px; }
|
|
|
292 }
|
|
|
293
|
|
|
294 > text > placeholder {
|
|
|
295 @extend .dim-label;
|
|
|
296 }
|
|
|
297
|
|
|
298 > text > block-cursor {
|
|
|
299 @include entry(block_cursor);
|
|
|
300 }
|
|
|
301
|
|
|
302 &.flat {
|
|
|
303 &:focus-within, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
|
|
304 min-height: 0;
|
|
|
305 padding: 2px;
|
|
|
306 background-color: transparent;
|
|
|
307 border-color: transparent;
|
|
|
308 border-radius: 0;
|
|
|
309 }
|
|
|
310 }
|
|
|
311
|
|
|
312 &:focus-within {
|
|
|
313 @include entry(focus);
|
|
|
314 > placeholder {
|
|
|
315 opacity: 0; /* We hide placeholders on focus */
|
|
|
316 }
|
|
|
317 }
|
|
|
318
|
|
|
319 &:disabled { @include entry(insensitive); }
|
|
|
320
|
|
|
321 > text > selection { @extend %selected_items; }
|
|
|
322
|
|
|
323 // entry error and warning style
|
|
|
324 @each $e_type, $e_color in (error, $error_color),
|
|
|
325 (warning, $warning_color) {
|
|
|
326 &.#{$e_type} {
|
|
|
327 color: $e_color;
|
|
|
328
|
|
|
329 @include focus-ring($focus-state: 'focus-within', $fc: transparentize($e_color, 0.5));
|
|
|
330
|
|
|
331 &:focus-within { @include entry(focus, $e_color); }
|
|
|
332
|
|
|
333 > selection { background-color: $e_color; }
|
|
|
334 }
|
|
|
335 }
|
|
|
336
|
|
|
337 > image { // entry icons colors
|
|
|
338 color: mix($fg_color, $base_color, 80%);
|
|
|
339
|
|
|
340 &:hover { color: $fg_color; }
|
|
|
341
|
|
|
342 &:active { color: $selected_bg_color; }
|
|
|
343
|
|
|
344 }
|
|
|
345
|
|
|
346 &.password image.caps-lock-indicator {
|
|
|
347 color: mix($backdrop_fg_color, $backdrop_base_color, 80%);
|
|
|
348 }
|
|
|
349
|
|
|
350 &:drop(active) {
|
|
|
351 &:focus-within, & {
|
|
|
352 border-color: $drop_target_color;
|
|
|
353 box-shadow: inset 0 0 0 1px $drop_target_color;
|
|
|
354 }
|
|
|
355 }
|
|
|
356
|
|
|
357 .osd & {
|
|
|
358 @include entry(osd);
|
|
|
359
|
|
|
360 &:focus-within { @include entry(osd-focus); }
|
|
|
361
|
|
|
362 &:disabled { @include entry(osd-insensitive); }
|
|
|
363 }
|
|
|
364 }
|
|
|
365
|
|
|
366 > progress {
|
|
|
367 margin-bottom: 2px;
|
|
|
368 }
|
|
|
369
|
|
|
370 progress > trough > progress {
|
|
|
371 background-color: transparent;
|
|
|
372 background-image: none;
|
|
|
373 border-radius: 0;
|
|
|
374 border-width: 0 0 2px;
|
|
|
375 border-color: $selected_bg_color;
|
|
|
376 border-style: solid;
|
|
|
377 box-shadow: none;
|
|
|
378
|
|
|
379 }
|
|
|
380
|
|
|
381 // linked entries
|
|
|
382 .linked:not(.vertical) > & { @extend %linked; }
|
|
|
383
|
|
|
384 .linked:not(.vertical) > &:drop(active) + &,
|
|
|
385 .linked:not(.vertical) > &:drop(active) + button,
|
|
|
386 .linked:not(.vertical) > &:drop(active) + menubutton > button,
|
|
|
387 .linked:not(.vertical) > &:drop(active) + dropdown > button,
|
|
|
388 .linked:not(.vertical) > &:drop(active) + colorbutton > button,
|
|
|
389 .linked:not(.vertical) > &:drop(active) + fontbutton > button,
|
|
|
390 .linked:not(.vertical) > &:drop(active) + filechooserbutton > button,
|
|
|
391 .linked:not(.vertical) > &:drop(active) + filechooserbutton > combobox > box > button.combo,
|
|
|
392 .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
|
|
|
393 .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
|
|
|
394
|
|
|
395 // Vertically linked entries
|
|
|
396 // FIXME: take care of "colored" entries
|
|
|
397 .linked.vertical > & {
|
|
|
398 @extend %linked_vertical;
|
|
|
399
|
|
|
400 // brighter border between linked entries
|
|
|
401 &:not(:disabled) + entry:not(:disabled),
|
|
|
402 &:not(:disabled) + %entry:not(:disabled) {
|
|
|
403 border-top-color: mix($borders_color, $base_color, 30%);
|
|
|
404 }
|
|
|
405
|
|
|
406 // brighter border between linked insensitive entries
|
|
|
407 &:disabled + %entry:disabled,
|
|
|
408 &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
|
|
|
409
|
|
|
410 + %entry:drop(active):not(:only-child),
|
|
|
411 + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
|
|
|
412
|
|
|
413 &:drop(active):not(:only-child) {
|
|
|
414 + %entry,
|
|
|
415 + entry,
|
|
|
416 + button,
|
|
|
417 + menubutton > button,
|
|
|
418 + dropdown > button,
|
|
|
419 + colorbutton > button,
|
|
|
420 + fontbutton > button,
|
|
|
421 + filechooserbutton > button,
|
|
|
422 + filechooserbutton > combobox > box > button.combo,
|
|
|
423 + appchooserbutton > combobox > box > button.combo,
|
|
|
424 + combobox > box > button.combo { border-top-color: $drop_target_color; }
|
|
|
425 }
|
|
|
426 }
|
|
|
427
|
|
|
428 &.error { color: $error_color; }
|
|
|
429 }
|
|
|
430
|
|
|
431 treeview entry {
|
|
|
432 &:focus-within {
|
|
|
433 &:dir(rtl), &:dir(ltr) { // specificity bump hack
|
|
|
434 background-color: $base_color;
|
|
|
435 transition-property: color, background;
|
|
|
436 }
|
|
|
437 }
|
|
|
438
|
|
|
439 &.flat, & {
|
|
|
440 border-radius: 0;
|
|
|
441 background-image: none;
|
|
|
442 background-color: $base_color;
|
|
|
443
|
|
|
444 &:focus-within { border-color: $selected_bg_color; }
|
|
|
445 }
|
|
|
446 }
|
|
|
447
|
|
|
448 /*******************
|
|
|
449 * Editable Labels *
|
|
|
450 *******************/
|
|
|
451 editablelabel > stack > text {
|
|
|
452 @include entry(normal);
|
|
|
453 }
|
|
|
454
|
|
|
455 /***********
|
|
|
456 * Buttons *
|
|
|
457 ***********/
|
|
|
458 // stuff for .needs-attention
|
|
|
459 $_dot_color: if($variant=='light', $selected_bg_color,
|
|
|
460 lighten($selected_bg_color,15%));
|
|
|
461 @keyframes needs_attention {
|
|
|
462 from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
|
|
|
463 to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
|
|
|
464 }
|
|
|
465
|
|
|
466 %button,
|
|
|
467 button {
|
|
|
468 @at-root %button_basic, & {
|
|
|
469
|
|
|
470 min-height: 24px;
|
|
|
471 min-width: 16px;
|
|
|
472 padding: 4px 9px;
|
|
|
473 border: 1px solid;
|
|
|
474 border-radius: $button_radius;
|
|
|
475 transition: $button_transition;
|
|
|
476
|
|
|
477 @include button(normal);
|
|
|
478
|
|
|
479 @include focus-ring();
|
|
|
480
|
|
|
481 &:hover {
|
|
|
482 @include button(hover);
|
|
|
483 -gtk-icon-filter: brightness(1.2);
|
|
|
484 }
|
|
|
485
|
|
|
486 &.keyboard-activating,
|
|
|
487 &:active,
|
|
|
488 &:checked {
|
|
|
489 @include button(active);
|
|
|
490
|
|
|
491 transition-duration: 50ms;
|
|
|
492 }
|
|
|
493
|
|
|
494 &:checked:hover { @include button(checked-hover); }
|
|
|
495 &:checked:active { @include button(checked-active); }
|
|
|
496
|
|
|
497 &:backdrop {
|
|
|
498 &.flat, & {
|
|
|
499 @include button(backdrop);
|
|
|
500
|
|
|
501 transition: $backdrop_transition;
|
|
|
502
|
|
|
503 &:not(:disabled) { -gtk-icon-filter: none; }
|
|
|
504
|
|
|
505 &:active,
|
|
|
506 &:checked { @include button(backdrop-active); }
|
|
|
507
|
|
|
508 &:disabled {
|
|
|
509 @include button(backdrop-insensitive);
|
|
|
510
|
|
|
511 &:active,
|
|
|
512 &:checked { @include button(backdrop-insensitive-active); }
|
|
|
513 }
|
|
|
514 }
|
|
|
515 }
|
|
|
516
|
|
|
517 &:disabled {
|
|
|
518 @include button(insensitive);
|
|
|
519 -gtk-icon-filter: opacity(0.5);
|
|
|
520
|
|
|
521 &:active,
|
|
|
522 &:checked { @include button(insensitive-active); }
|
|
|
523 }
|
|
|
524
|
|
|
525 @at-root %button_basic_flat,
|
|
|
526 &.flat {
|
|
|
527 @include button(undecorated);
|
|
|
528 // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set
|
|
|
529 // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
|
|
|
530 // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
|
|
|
531 // in this case the duration is increased.
|
|
|
532 transition: none;
|
|
|
533
|
|
|
534 &:hover {
|
|
|
535 @include button(undecorated-hover);
|
|
|
536 transition: $button_transition;
|
|
|
537 transition-duration: 500ms;
|
|
|
538 }
|
|
|
539 &.keyboard-activating,
|
|
|
540 &:active,
|
|
|
541 &:checked {
|
|
|
542 @include button(undecorated-active);
|
|
|
543 transition: $button_transition;
|
|
|
544 }
|
|
|
545 &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }
|
|
|
546 }
|
|
|
547
|
|
|
548 &.image-button {
|
|
|
549 min-width: 24px;
|
|
|
550 padding-left: 5px;
|
|
|
551 padding-right: 5px;
|
|
|
552 }
|
|
|
553
|
|
|
554 &.text-button {
|
|
|
555 padding-left: 16px;
|
|
|
556 padding-right: 16px;
|
|
|
557 }
|
|
|
558
|
|
|
559 &.text-button.image-button {
|
|
|
560 padding-left: 8px;
|
|
|
561 padding-right: 8px;
|
|
|
562
|
|
|
563 label {
|
|
|
564 padding-left: 8px;
|
|
|
565 padding-right: 8px;
|
|
|
566 }
|
|
|
567 }
|
|
|
568
|
|
|
569 @at-root %button_basic_drop_active,
|
|
|
570 &:drop(active) {
|
|
|
571 color: $drop_target_color;
|
|
|
572 border-color: $drop_target_color;
|
|
|
573 box-shadow: inset 0 0 0 1px $drop_target_color;
|
|
|
574 }
|
|
|
575 }
|
|
|
576
|
|
|
577 @at-root %button_selected, & {
|
|
|
578 row:selected & {
|
|
|
579 @if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
580 }
|
|
|
581
|
|
|
582 @at-root %button_selected_flat, &.flat {
|
|
|
583 row:selected & {
|
|
|
584 &:not(:active):not(:checked):not(:hover):not(disabled) {
|
|
|
585 color: $selected_fg_color;
|
|
|
586 border-color: transparent;
|
|
|
587
|
|
|
588 &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
|
|
|
589 }
|
|
|
590 }
|
|
|
591 }
|
|
|
592 }
|
|
|
593
|
|
|
594
|
|
|
595 // big standalone buttons like in Documents pager
|
|
|
596 &.osd {
|
|
|
597 min-width: 26px;
|
|
|
598 min-height: 32px;
|
|
|
599
|
|
|
600 &.image-button {
|
|
|
601 min-width: 30px;
|
|
|
602 &:only-child {
|
|
|
603 margin: 4px;
|
|
|
604 border-radius: 50%; // completely round when it is a single button
|
|
|
605 box-shadow: 0 1px 2px transparentize(black, 0.8); // drop shadow for the only child
|
|
|
606 };
|
|
|
607 }
|
|
|
608
|
|
|
609 color: $osd_fg_color;
|
|
|
610 border-radius: 5px;
|
|
|
611
|
|
|
612 @include button(osd);
|
|
|
613
|
|
|
614 border: none;
|
|
|
615 box-shadow: none;
|
|
|
616
|
|
|
617 &:hover {
|
|
|
618 @include button(osd-hover);
|
|
|
619
|
|
|
620 border: none;
|
|
|
621 box-shadow: none;
|
|
|
622 }
|
|
|
623
|
|
|
624 &:active,
|
|
|
625 &:checked {
|
|
|
626 @include button(osd-active);
|
|
|
627
|
|
|
628 border: none;
|
|
|
629 box-shadow: none;
|
|
|
630 }
|
|
|
631 }
|
|
|
632
|
|
|
633 //overlay / OSD style
|
|
|
634 @at-root %osd_button,
|
|
|
635 .osd & {
|
|
|
636 @include button(osd);
|
|
|
637
|
|
|
638 &:hover { @include button(osd-hover); }
|
|
|
639
|
|
|
640 &:active,
|
|
|
641 &:checked { &:backdrop, & { @include button(osd-active); }}
|
|
|
642
|
|
|
643 &:disabled { &:backdrop, & { @include button(osd-insensitive); }}
|
|
|
644
|
|
|
645 &.flat {
|
|
|
646 @include button(undecorated);
|
|
|
647
|
|
|
648 box-shadow: none;
|
|
|
649 -gtk-icon-shadow: 0 1px black;
|
|
|
650
|
|
|
651 &:hover { @include button(osd-hover); }
|
|
|
652
|
|
|
653 &:disabled {
|
|
|
654 @include button(osd-insensitive);
|
|
|
655 background-image: none;
|
|
|
656 border-color: transparent;
|
|
|
657 box-shadow: none;
|
|
|
658 }
|
|
|
659
|
|
|
660 &:active,
|
|
|
661 &:checked { @include button(osd-active); }
|
|
|
662 }
|
|
|
663 }
|
|
|
664
|
|
|
665 // Suggested and Destructive Action buttons
|
|
|
666 @each $b_type, $b_color in (suggested-action, $selected_bg_color),
|
|
|
667 (destructive-action, $destructive_color) {
|
|
|
668 &.#{$b_type} {
|
|
|
669 @include button(normal, $b_color, white);
|
|
|
670 @include focus-ring($fc: $alt_focus_border_color);
|
|
|
671
|
|
|
672 &.flat {
|
|
|
673 @include button(undecorated);
|
|
|
674
|
|
|
675 color: $b_color; //FIXME: does it work on the dark variant?
|
|
|
676 }
|
|
|
677
|
|
|
678 &:hover { @include button(hover, $b_color, white); }
|
|
|
679
|
|
|
680 &:active,
|
|
|
681 &:checked { @include button(active, $b_color, white); }
|
|
|
682
|
|
|
683 &.flat {
|
|
|
684 &:disabled {
|
|
|
685 @include button(undecorated);
|
|
|
686
|
|
|
687 color: transparentize($b_color, 0.2);
|
|
|
688 }
|
|
|
689 }
|
|
|
690
|
|
|
691 &:disabled {
|
|
|
692 @include button(insensitive);
|
|
|
693
|
|
|
694 &:active,
|
|
|
695 &:checked { @include button(insensitive-active, $b_color, white); }
|
|
|
696 }
|
|
|
697
|
|
|
698 .osd & {
|
|
|
699 @include button(osd, $b_color);
|
|
|
700
|
|
|
701 &:hover { @include button(osd-hover, $b_color); }
|
|
|
702
|
|
|
703 &:active,
|
|
|
704 &:checked { &:backdrop, & { @include button(osd-active, $b_color); }}
|
|
|
705
|
|
|
706 &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }}
|
|
|
707
|
|
|
708 }
|
|
|
709 }
|
|
|
710 }
|
|
|
711
|
|
|
712 stackswitcher > & {
|
|
|
713 // to position the needs attention dot, padding is added to the button
|
|
|
714 // child, a label needs just lateral padding while an icon needs vertical
|
|
|
715 // padding added too.
|
|
|
716
|
|
|
717 > label {
|
|
|
718 padding: 0 6px;
|
|
|
719 margin: 0 -6px;
|
|
|
720 }
|
|
|
721
|
|
|
722 > image {
|
|
|
723 padding: 3px 6px;
|
|
|
724 margin: -3px -6px;
|
|
|
725 }
|
|
|
726
|
|
|
727 &.needs-attention {
|
|
|
728 > label,
|
|
|
729 > image { @extend %needs_attention; }
|
|
|
730 }
|
|
|
731 }
|
|
|
732
|
|
|
733 // hide separators
|
|
|
734 &.font{
|
|
|
735 separator { background-color: transparent; }
|
|
|
736 > box { border-spacing: 6px; }
|
|
|
737 > box > box > label { font-weight: bold; }
|
|
|
738 }
|
|
|
739
|
|
|
740 .linked:not(.vertical) > & { @extend %linked; }
|
|
|
741
|
|
|
742 .linked.vertical > & { @extend %linked_vertical; }
|
|
|
743
|
|
|
744 menubutton.circular &,
|
|
|
745 &.circular { // force circular button shape
|
|
|
746 min-width: 32px;
|
|
|
747 min-height: 32px;
|
|
|
748 padding: 0;
|
|
|
749 border-radius: 9999px;
|
|
|
750
|
|
|
751 label { padding: 0; }
|
|
|
752 }
|
|
|
753 }
|
|
|
754
|
|
|
755 %needs_attention {
|
|
|
756 // the dot is drawn by using two radial gradient, the first one is the actual dot, the other
|
|
|
757 // simulates the shadow labels and icons normally have in buttons.
|
|
|
758 animation: needs_attention 150ms ease-in;
|
|
|
759
|
|
|
760 background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 ));
|
|
|
761 background-size: 6px 6px, 6px 6px;
|
|
|
762 background-repeat: no-repeat;
|
|
|
763
|
|
|
764 @if $variant == 'light' { background-position: right 3px, right 4px; }
|
|
|
765
|
|
|
766 @else { background-position: right 3px, right 2px; }
|
|
|
767
|
|
|
768 &:backdrop { background-size: 6px 6px, 0 0;}
|
|
|
769
|
|
|
770 &:dir(rtl) {
|
|
|
771 @if $variant == 'light' { background-position: left 3px, left 4px; }
|
|
|
772
|
|
|
773 @else { background-position: left 3px, left 2px; }
|
|
|
774 }
|
|
|
775 }
|
|
|
776
|
|
|
777
|
|
|
778 %linked_not_left {
|
|
|
779 border-top-left-radius: 0;
|
|
|
780 border-bottom-left-radius: 0;
|
|
|
781 }
|
|
|
782
|
|
|
783 %linked_not_right {
|
|
|
784 border-right-style: none;
|
|
|
785 border-top-right-radius: 0;
|
|
|
786 border-bottom-right-radius: 0;
|
|
|
787 }
|
|
|
788
|
|
|
789 // 1st/last child are at text start/end
|
|
|
790 %linked {
|
|
|
791 &:dir(ltr) {
|
|
|
792 &:not(:first-child) { @extend %linked_not_left; }
|
|
|
793 &:not(:last-child) { @extend %linked_not_right; }
|
|
|
794 }
|
|
|
795
|
|
|
796 &:dir(rtl) {
|
|
|
797 &:not(:first-child) { @extend %linked_not_right; }
|
|
|
798 &:not(:last-child) { @extend %linked_not_left; }
|
|
|
799 }
|
|
|
800 }
|
|
|
801
|
|
|
802 %linked_not_top {
|
|
|
803 border-top-left-radius: 0;
|
|
|
804 border-top-right-radius: 0;
|
|
|
805 }
|
|
|
806
|
|
|
807 %linked_not_bottom {
|
|
|
808 border-bottom-style: none;
|
|
|
809 border-bottom-left-radius: 0;
|
|
|
810 border-bottom-right-radius: 0;
|
|
|
811 }
|
|
|
812
|
|
|
813 %linked_vertical {
|
|
|
814 &:not(:first-child) { @extend %linked_not_top; }
|
|
|
815
|
|
|
816 &:not(:last-child) { @extend %linked_not_bottom; }
|
|
|
817 }
|
|
|
818
|
|
|
819 %undecorated_button {
|
|
|
820 background-color: transparent;
|
|
|
821 background-image: none;
|
|
|
822 border-color: transparent;
|
|
|
823 box-shadow: inset 0 1px transparentize(white, 1),
|
|
|
824 0 1px transparentize(white, 1);
|
|
|
825 text-shadow: none;
|
|
|
826 -gtk-icon-shadow: none;
|
|
|
827 }
|
|
|
828
|
|
|
829 .linked:not(.vertical) > menubutton,
|
|
|
830 .linked:not(.vertical) > dropdown,
|
|
|
831 .linked:not(.vertical) > colorbutton,
|
|
|
832 .linked:not(.vertical) > fontbutton,
|
|
|
833 .linked:not(.vertical) > filechooserbutton {
|
|
|
834 &:dir(ltr) {
|
|
|
835 &:not(:first-child) > button { @extend %linked_not_left; }
|
|
|
836 &:not(:last-child) > button { @extend %linked_not_right; }
|
|
|
837 }
|
|
|
838
|
|
|
839 &:dir(rtl) {
|
|
|
840 &:not(:first-child) > button { @extend %linked_not_right; }
|
|
|
841 &:not(:last-child) > button { @extend %linked_not_left; }
|
|
|
842 }
|
|
|
843 }
|
|
|
844
|
|
|
845 .linked.vertical > menubutton,
|
|
|
846 .linked.vertical > dropdown,
|
|
|
847 .linked.vertical > colorbutton,
|
|
|
848 .linked.vertical > fontbutton,
|
|
|
849 .linked.vertical > filechooserbutton {
|
|
|
850 &:not(:first-child) > button { @extend %linked_not_top; }
|
|
|
851 &:not(:last-child) > button { @extend %linked_not_bottom; }
|
|
|
852 }
|
|
|
853
|
|
|
854 /* menu buttons */
|
|
|
855 modelbutton.flat {
|
|
|
856 min-height: 26px;
|
|
|
857 padding-left: 5px;
|
|
|
858 padding-right: 5px;
|
|
|
859 border-radius: $button_radius;
|
|
|
860
|
|
|
861 @extend %undecorated_button;
|
|
|
862
|
|
|
863 &:hover { background-color: $menu_selected_color; }
|
|
|
864
|
|
|
865 &:disabled {
|
|
|
866 color: $insensitive_fg_color;
|
|
|
867
|
|
|
868
|
|
|
869 }
|
|
|
870
|
|
|
871 &:selected { @extend %selected_items; }
|
|
|
872 }
|
|
|
873
|
|
|
874 modelbutton.flat arrow {
|
|
|
875 background: none;
|
|
|
876 min-width: 16px;
|
|
|
877 min-height: 16px;
|
|
|
878 opacity: 0.3; //dim icon
|
|
|
879
|
|
|
880 &:hover { background: none; }
|
|
|
881
|
|
|
882 &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
|
|
|
883
|
|
|
884 &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
|
|
|
885 }
|
|
|
886
|
|
|
887 /* oldstyle toolbar buttons */
|
|
|
888
|
|
|
889 .toolbar button {
|
|
|
890 margin: 1px;
|
|
|
891 @extend %undecorated_button;
|
|
|
892
|
|
|
893 &:hover { @include button('hover'); }
|
|
|
894 &:active { @include button('active'); }
|
|
|
895 &:disabled { @include button('insensitive'); }
|
|
|
896 &:backdrop { @include button('backdrop'); }
|
|
|
897 &:backdrop:disabled { @include button('backdrop-insensitive'); }
|
|
|
898 }
|
|
|
899
|
|
|
900 button.color {
|
|
|
901 padding: 4px;
|
|
|
902
|
|
|
903 > colorswatch:only-child {
|
|
|
904 &, > overlay { border-radius: 0; }
|
|
|
905
|
|
|
906 @if $variant == 'light' {
|
|
|
907 box-shadow: 0 1px $shadow_color;
|
|
|
908
|
|
|
909 .osd & { box-shadow: none; }
|
|
|
910 }
|
|
|
911 }
|
|
|
912
|
|
|
913 @if $variant == 'light' {
|
|
|
914 .osd &, & {
|
|
|
915 &:disabled,
|
|
|
916 &:active,
|
|
|
917 &:checked { colorswatch:only-child { box-shadow: none; }}
|
|
|
918 }
|
|
|
919 }
|
|
|
920 }
|
|
|
921
|
|
|
922 /* list buttons */
|
|
|
923 /* tone down as per new designs, see issue #1473 */
|
|
|
924 %list_button,
|
|
|
925 list > row button.image-button:not(.flat) {
|
|
|
926 @extend %undecorated_button;
|
|
|
927 border: 1px solid transparentize($borders_color, .5);
|
|
|
928 &:hover { @include button(hover); }
|
|
|
929 &:active,
|
|
|
930 &:checked { @include button(active); }
|
|
|
931
|
|
|
932 @each $b_type, $b_color in (suggested-action, $selected_bg_color),
|
|
|
933 (destructive-action, $destructive_color) {
|
|
|
934 &.#{$b_type} { // allow colored buttons in lists #3643
|
|
|
935 @include button(normal, $b_color, white);
|
|
|
936 @include focus-ring($fc: $alt_focus_border_color);
|
|
|
937 }
|
|
|
938 }
|
|
|
939 }
|
|
|
940
|
|
|
941 /*********
|
|
|
942 * Links *
|
|
|
943 *********/
|
|
|
944
|
|
|
945 %link,
|
|
|
946 link {
|
|
|
947 color: $link_color;
|
|
|
948 text-decoration: underline;
|
|
|
949
|
|
|
950 &:visited {
|
|
|
951 color: $link_visited_color;
|
|
|
952
|
|
|
953 *:selected & { color: mix($selected_fg_color, $link_visited_color, 60%); }
|
|
|
954 }
|
|
|
955
|
|
|
956 &:hover {
|
|
|
957 $_fg: lighten($link_color, 10%);
|
|
|
958 color: $_fg;
|
|
|
959
|
|
|
960 *:selected & { color: mix($selected_fg_color, $_fg, 90%); }
|
|
|
961 }
|
|
|
962
|
|
|
963 &:active {
|
|
|
964 color: $link_color;
|
|
|
965
|
|
|
966 *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
|
|
|
967 }
|
|
|
968
|
|
|
969 &:disabled { color: transparentize(desaturate($link_color, 100%), 0.2); }
|
|
|
970
|
|
|
971 @at-root %link_selected,
|
|
|
972 &:selected,
|
|
|
973 *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
|
|
|
974 }
|
|
|
975
|
|
|
976 link {
|
|
|
977 @include focus-ring();
|
|
|
978 }
|
|
|
979
|
|
|
980 button.link {
|
|
|
981 @extend %link;
|
|
|
982
|
|
|
983 &,
|
|
|
984 &:hover,
|
|
|
985 &:active,
|
|
|
986 &:checked {
|
|
|
987 @extend %undecorated_button;
|
|
|
988
|
|
|
989 text-shadow: none;
|
|
|
990 }
|
|
|
991
|
|
|
992 > label {
|
|
|
993 text-decoration: underline;
|
|
|
994 }
|
|
|
995 }
|
|
|
996
|
|
|
997
|
|
|
998 /*****************
|
|
|
999 * GtkSpinButton *
|
|
|
1000 *****************/
|
|
|
1001 spinbutton {
|
|
|
1002 &:not(.vertical) {
|
|
|
1003 // in this horizontal configuration, the whole spinbutton
|
|
|
1004 // behaves as the entry, so we extend the entry styling
|
|
|
1005 // and nuke the style on the internal entry
|
|
|
1006 @extend %entry;
|
|
|
1007
|
|
|
1008 padding: 0;
|
|
|
1009 border-spacing: 0;
|
|
|
1010
|
|
|
1011 %spinbutton_horz_entry {
|
|
|
1012 min-width: 28px;
|
|
|
1013 // reset all the other props since the spinbutton node is styled here
|
|
|
1014 margin: 0;
|
|
|
1015 background: none;
|
|
|
1016 background-color: transparent;
|
|
|
1017 border: none;
|
|
|
1018 border-radius: 0;
|
|
|
1019 box-shadow: none;
|
|
|
1020 padding: 6px;
|
|
|
1021
|
|
|
1022 &:backdrop:disabled { background-color: transparent; }
|
|
|
1023 }
|
|
|
1024
|
|
|
1025 > text {
|
|
|
1026 @extend %spinbutton_horz_entry;
|
|
|
1027 }
|
|
|
1028
|
|
|
1029 /* :not here just to bump specificity above that of the list button styling */
|
|
|
1030 > button.image-button.up:not(.flat),
|
|
|
1031 > button.image-button.down:not(.flat) {
|
|
|
1032 min-height: 16px;
|
|
|
1033 margin: 0;
|
|
|
1034 padding-bottom: 0;
|
|
|
1035 padding-top: 0;
|
|
|
1036 color: mix($fg_color, $base_color, 90%);
|
|
|
1037 background-image: none;
|
|
|
1038 border-style: none none none solid;
|
|
|
1039 border-color: transparentize($borders_color, 0.7);
|
|
|
1040 border-radius: 0;
|
|
|
1041 box-shadow: none;
|
|
|
1042
|
|
|
1043 &:dir(rtl) { border-style: none solid none none; }
|
|
|
1044
|
|
|
1045 &:hover {
|
|
|
1046 color: $fg_color;
|
|
|
1047 background-color: darken($bg_color,5%);
|
|
|
1048 }
|
|
|
1049
|
|
|
1050 &:disabled {
|
|
|
1051 color: transparentize($insensitive_fg_color, 0.7);
|
|
|
1052 background-color: transparent;
|
|
|
1053 }
|
|
|
1054
|
|
|
1055 &:active {
|
|
|
1056 background-color: transparentize(black, 0.9);
|
|
|
1057 box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
|
|
|
1058 }
|
|
|
1059
|
|
|
1060 &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
|
|
|
1061
|
|
|
1062 &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
|
|
|
1063 }
|
|
|
1064 }
|
|
|
1065
|
|
|
1066 // OSD horizontal
|
|
|
1067 .osd &:not(.vertical) {
|
|
|
1068 > text {
|
|
|
1069 @extend %spinbutton_horz_entry;
|
|
|
1070 }
|
|
|
1071
|
|
|
1072 > button.image-button.up:not(.flat),
|
|
|
1073 > button.image-button.down:not(.flat) {
|
|
|
1074 @include button(undecorated);
|
|
|
1075
|
|
|
1076 color: $osd_fg_color;
|
|
|
1077 border-style: none none none solid;
|
|
|
1078 border-color: transparentize($osd_borders_color, 0.3);
|
|
|
1079 border-radius: 0;
|
|
|
1080 box-shadow: none;
|
|
|
1081 -gtk-icon-shadow: 0 1px black;
|
|
|
1082
|
|
|
1083 &:dir(rtl) { border-style: none solid none none; }
|
|
|
1084
|
|
|
1085 &:hover {
|
|
|
1086 @include button(undecorated);
|
|
|
1087
|
|
|
1088 color: $osd_fg_color;
|
|
|
1089 border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
|
1090 background-color: darken($osd_bg_color,10%);
|
|
|
1091 -gtk-icon-shadow: 0 1px black;
|
|
|
1092 box-shadow: none;
|
|
|
1093 }
|
|
|
1094
|
|
|
1095 &:disabled {
|
|
|
1096 @include button(undecorated);
|
|
|
1097
|
|
|
1098 color: $osd_insensitive_fg_color;
|
|
|
1099 border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
|
1100 -gtk-icon-shadow: none;
|
|
|
1101 box-shadow: none;
|
|
|
1102 }
|
|
|
1103
|
|
|
1104 &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
|
|
|
1105
|
|
|
1106 &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
|
|
|
1107 }
|
|
|
1108 }
|
|
|
1109
|
|
|
1110 // Vertical
|
|
|
1111 &.vertical {
|
|
|
1112 // in the vertical configuration, we treat the spinbutton
|
|
|
1113 // as a box, and tweak the style of the entry in the middle
|
|
|
1114 // so that it's linked
|
|
|
1115
|
|
|
1116 // FIXME: this should not be set at all, but otherwise it gets the wrong
|
|
|
1117 // color
|
|
|
1118 &:disabled { color: $insensitive_fg_color; }
|
|
|
1119
|
|
|
1120 &:drop(active) {
|
|
|
1121 border-color: transparent;
|
|
|
1122 box-shadow: none;
|
|
|
1123 }
|
|
|
1124
|
|
|
1125 > text {
|
|
|
1126 @extend %entry;
|
|
|
1127
|
|
|
1128 min-height: 32px;
|
|
|
1129 min-width: 32px;
|
|
|
1130 padding: 0;
|
|
|
1131 border-radius: 0;
|
|
|
1132
|
|
|
1133 > selection { @extend %selected_items; }
|
|
|
1134 > block-cursor { @include entry(block_cursor); }
|
|
|
1135 }
|
|
|
1136
|
|
|
1137 > button {
|
|
|
1138 min-height: 32px;
|
|
|
1139 min-width: 32px;
|
|
|
1140 padding: 0;
|
|
|
1141
|
|
|
1142 &.up { @extend %top_button; }
|
|
|
1143
|
|
|
1144 &.down { @extend %bottom_button; }
|
|
|
1145 }
|
|
|
1146
|
|
|
1147 %top_button {
|
|
|
1148 border-bottom-style: none;
|
|
|
1149 border-bottom-left-radius: 0;
|
|
|
1150 border-bottom-right-radius: 0;
|
|
|
1151 }
|
|
|
1152
|
|
|
1153 %bottom_button {
|
|
|
1154 border-top-style: none;
|
|
|
1155 border-top-left-radius: 0;
|
|
|
1156 border-top-right-radius: 0;
|
|
|
1157 }
|
|
|
1158 }
|
|
|
1159
|
|
|
1160 // OSD vertical
|
|
|
1161 .osd &.vertical > button:first-child {
|
|
|
1162 @include button(osd);
|
|
|
1163
|
|
|
1164 &:hover { @include button(osd-hover);}
|
|
|
1165
|
|
|
1166 &:active { @include button(osd-active); }
|
|
|
1167
|
|
|
1168 &:disabled { @include button(osd-insensitive); }
|
|
|
1169 }
|
|
|
1170
|
|
|
1171 // Misc
|
|
|
1172 treeview &:not(.vertical) {
|
|
|
1173 min-height: 0;
|
|
|
1174 border-style: none;
|
|
|
1175 border-radius: 0;
|
|
|
1176
|
|
|
1177 > text {
|
|
|
1178 min-height: 0;
|
|
|
1179 padding: 1px 2px;
|
|
|
1180 }
|
|
|
1181 }
|
|
|
1182
|
|
|
1183 font-feature-settings: "tnum";
|
|
|
1184 }
|
|
|
1185
|
|
|
1186
|
|
|
1187 /**************
|
|
|
1188 * ComboBoxes *
|
|
|
1189 **************/
|
|
|
1190 dropdown > popover.menu.background > contents { padding: 0; } //allow search entries with no margin
|
|
|
1191
|
|
|
1192 dropdown > button > box {
|
|
|
1193 border-spacing: 6px;
|
|
|
1194
|
|
|
1195 > stack > row.activatable:hover {
|
|
|
1196 background: none;
|
|
|
1197 box-shadow: none;
|
|
|
1198 }
|
|
|
1199 }
|
|
|
1200
|
|
|
1201 dropdown,
|
|
|
1202 combobox {
|
|
|
1203 arrow {
|
|
|
1204 -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
|
1205 min-height: 16px;
|
|
|
1206 min-width: 16px;
|
|
|
1207 }
|
|
|
1208
|
|
|
1209 // align menu labels with the button label
|
|
|
1210 > popover.menu > contents modelbutton {
|
|
|
1211 padding-left: 9px;
|
|
|
1212 padding-right: 9px;
|
|
|
1213 }
|
|
|
1214
|
|
|
1215 &.linked {
|
|
|
1216 button:nth-child(2) {
|
|
|
1217 &:dir(ltr) { @extend %linked_not_left; }
|
|
|
1218 &:dir(rtl) { @extend %linked_not_right; }
|
|
|
1219 }
|
|
|
1220 }
|
|
|
1221
|
|
|
1222 &:drop(active) { // FIXME: untested
|
|
|
1223 box-shadow: none;
|
|
|
1224
|
|
|
1225 button.combo { @extend %button_basic_drop_active; }
|
|
|
1226 }
|
|
|
1227
|
|
|
1228 // newstyle
|
|
|
1229 popover {
|
|
|
1230 margin-top: 6px;
|
|
|
1231 padding: 0;
|
|
|
1232
|
|
|
1233 listview {
|
|
|
1234
|
|
|
1235 margin: 8px 0;
|
|
|
1236
|
|
|
1237 > row.activatable {
|
|
|
1238 padding: 8px;
|
|
|
1239
|
|
|
1240 &:selected {
|
|
|
1241 &, &:hover {
|
|
|
1242 outline-color: $alt_focus_border_color;
|
|
|
1243 color: $text-color;
|
|
|
1244 background-color: $menu_selected_color;
|
|
|
1245 box-shadow: none;
|
|
|
1246 }
|
|
|
1247 }
|
|
|
1248 }
|
|
|
1249 }
|
|
|
1250
|
|
|
1251 // drodowns with searchboxes on top
|
|
|
1252 .dropdown-searchbar {
|
|
|
1253 padding: 6px;
|
|
|
1254 border-bottom: 1px solid $borders_color;
|
|
|
1255 }
|
|
|
1256 }
|
|
|
1257 }
|
|
|
1258
|
|
|
1259
|
|
|
1260 // the combo is a composite widget so the way we do button linking doesn't
|
|
|
1261 // work, special case needed. See
|
|
|
1262 // https://bugzilla.gnome.org/show_bug.cgi?id=733979
|
|
|
1263
|
|
|
1264 .linked:not(.vertical) > filechooserbutton > combobox,
|
|
|
1265 .linked:not(.vertical) > appchooserbutton > combobox,
|
|
|
1266 .linked:not(.vertical) > combobox {
|
|
|
1267 &:dir(ltr) {
|
|
|
1268 &:not(:first-child) > box > button.combo { @extend %linked_not_left; }
|
|
|
1269 &:not(:last-child) > box > button.combo { @extend %linked_not_right; }
|
|
|
1270 }
|
|
|
1271
|
|
|
1272 &:dir(rtl) {
|
|
|
1273 &:not(:first-child) > box > button.combo { @extend %linked_not_right; }
|
|
|
1274 &:not(:last-child) > box > button.combo { @extend %linked_not_left; }
|
|
|
1275 }
|
|
|
1276 }
|
|
|
1277
|
|
|
1278 .linked.vertical > filechooserbutton > combobox,
|
|
|
1279 .linked.vertical > appchooserbutton > combobox,
|
|
|
1280 .linked.vertical > combobox {
|
|
|
1281 &:not(:first-child) > box > button.combo { @extend %linked_not_top; }
|
|
|
1282 &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; }
|
|
|
1283 }
|
|
|
1284
|
|
|
1285
|
|
|
1286 /************
|
|
|
1287 * Toolbars *
|
|
|
1288 ************/
|
|
|
1289 %toolbar {
|
|
|
1290 padding: 4px;
|
|
|
1291 border-spacing: 4px;
|
|
|
1292 background-color: $bg_color;
|
|
|
1293 }
|
|
|
1294
|
|
|
1295 .toolbar,
|
|
|
1296 toolbar {
|
|
|
1297 @extend %toolbar;
|
|
|
1298
|
|
|
1299 // on OSD
|
|
|
1300 .osd & { background-color: transparent; }
|
|
|
1301
|
|
|
1302 // stand-alone OSD toolbars
|
|
|
1303 &.osd {
|
|
|
1304 padding: 13px;
|
|
|
1305 border: none;
|
|
|
1306 border-radius: 5px;
|
|
|
1307 background-color: $osd_bg_color;
|
|
|
1308
|
|
|
1309 &.left,
|
|
|
1310 &.right,
|
|
|
1311 &.top,
|
|
|
1312 &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
|
|
|
1313 }
|
|
|
1314
|
|
|
1315 // toolbar separators
|
|
|
1316 &.horizontal > separator { margin: 4px 0; }
|
|
|
1317 &.vertical > separator { margin: 0 4px; }
|
|
|
1318 }
|
|
|
1319
|
|
|
1320 //searchbar & location-bar
|
|
|
1321 searchbar > revealer > box {
|
|
|
1322 padding: 6px;
|
|
|
1323 border-spacing: 6px;
|
|
|
1324 @extend %toolbar;
|
|
|
1325
|
|
|
1326 @extend %darkbar;
|
|
|
1327
|
|
|
1328 border-width: 0 0 1px;
|
|
|
1329 }
|
|
|
1330
|
|
|
1331 %darkbar {
|
|
|
1332 border-style: solid;
|
|
|
1333 border-color: $borders_color;
|
|
|
1334 $_bg: mix($bg_color, $borders_color, 70%);
|
|
|
1335 background-color: $_bg;
|
|
|
1336
|
|
|
1337 &:backdrop {
|
|
|
1338 border-color: $backdrop_borders_color;
|
|
|
1339 background-color: $backdrop_dark_fill;
|
|
|
1340 box-shadow: none;
|
|
|
1341 transition: $backdrop_transition;
|
|
|
1342 }
|
|
|
1343 }
|
|
|
1344
|
|
|
1345 /**************
|
|
|
1346 * GtkInfoBar *
|
|
|
1347 **************/
|
|
|
1348 infobar {
|
|
|
1349 > revealer > box {
|
|
|
1350 padding: 8px;
|
|
|
1351 border-spacing: 12px;
|
|
|
1352 }
|
|
|
1353
|
|
|
1354 &.action:hover > revealer > box {
|
|
|
1355 background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 47%), 30%),
|
|
|
1356 desaturate(darken(invert($selected_bg_color), 42%), 70%));
|
|
|
1357 }
|
|
|
1358
|
|
|
1359 &.info,
|
|
|
1360 &.question,
|
|
|
1361 &.warning,
|
|
|
1362 &.error {
|
|
|
1363 > revealer > box {
|
|
|
1364 border-bottom: 1px solid lighten($borders_color, 5%);
|
|
|
1365 background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%),
|
|
|
1366 desaturate(darken(invert($selected_bg_color), 40%), 70%));
|
|
|
1367 }
|
|
|
1368 }
|
|
|
1369 }
|
|
|
1370
|
|
|
1371 //close button for info and searchbar (#3215)
|
|
|
1372
|
|
|
1373 infobar .close,
|
|
|
1374 searchbar .close {
|
|
|
1375 @include button(undecorated);
|
|
|
1376 min-width: 16px;
|
|
|
1377 min-height: 16px;
|
|
|
1378 padding: 4px;
|
|
|
1379 border-radius: 50%;
|
|
|
1380
|
|
|
1381 &:hover { @include button(hover); }
|
|
|
1382 }
|
|
|
1383
|
|
|
1384
|
|
|
1385 /*****************
|
|
|
1386 * Title buttons *
|
|
|
1387 *****************/
|
|
|
1388
|
|
|
1389 windowcontrols {
|
|
|
1390 border-spacing: 6px;
|
|
|
1391
|
|
|
1392 &:not(.empty) {
|
|
|
1393 &.start:dir(ltr),
|
|
|
1394 &.end:dir(rtl) {
|
|
|
1395 margin-right: 7px;
|
|
|
1396 }
|
|
|
1397
|
|
|
1398 &.start:dir(rtl),
|
|
|
1399 &.end:dir(ltr) {
|
|
|
1400 margin-left: 7px;
|
|
|
1401 }
|
|
|
1402 }
|
|
|
1403
|
|
|
1404 button {
|
|
|
1405 @extend %button_basic;
|
|
|
1406
|
|
|
1407 @extend %button_basic_flat;
|
|
|
1408
|
|
|
1409
|
|
|
1410 border-radius: 9999px;
|
|
|
1411 padding: 6px;
|
|
|
1412 margin: 0 2px;
|
|
|
1413 min-width: 0;
|
|
|
1414 min-height: 0;
|
|
|
1415 &:hover {
|
|
|
1416 //special case hover colors inside a headerbar
|
|
|
1417 @include button(undecorated-hover,$c:darken($headerbar_bg_color,6%));
|
|
|
1418 }
|
|
|
1419 &:active,
|
|
|
1420 &:checked { @include button(undecorated-active,$c:darken($headerbar_bg_color,10%)); }
|
|
|
1421 }
|
|
|
1422 }
|
|
|
1423
|
|
|
1424
|
|
|
1425 /***************
|
|
|
1426 * Header bars *
|
|
|
1427 ***************/
|
|
|
1428 %titlebar,
|
|
|
1429 headerbar {
|
|
|
1430 padding: 0 6px;
|
|
|
1431 min-height: 46px;
|
|
|
1432 border-width: 0 0 1px;
|
|
|
1433 border-style: solid;
|
|
|
1434 border-color: $alt_borders_color;
|
|
|
1435 border-radius: 0;
|
|
|
1436
|
|
|
1437 @include headerbar_fill(darken($bg_color, 10%));
|
|
|
1438
|
|
|
1439 &:backdrop {
|
|
|
1440 border-color: $backdrop_borders_color;
|
|
|
1441 background-color: $bg_color;
|
|
|
1442 background-image: none;
|
|
|
1443
|
|
|
1444 transition: $backdrop_transition;
|
|
|
1445 }
|
|
|
1446
|
|
|
1447 .title {
|
|
|
1448 padding-left: 12px;
|
|
|
1449 padding-right: 12px;
|
|
|
1450 font-weight: bold;
|
|
|
1451 }
|
|
|
1452
|
|
|
1453 .subtitle {
|
|
|
1454 font-size: smaller;
|
|
|
1455 padding-left: 12px;
|
|
|
1456 padding-right: 12px;
|
|
|
1457
|
|
|
1458 @extend .dim-label;
|
|
|
1459 }
|
|
|
1460
|
|
|
1461 /* Darken switchbuttons for headerbars. issue #1588 */
|
|
|
1462 stackswitcher > button:checked,
|
|
|
1463 button.toggle:checked {
|
|
|
1464
|
|
|
1465 background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
|
|
|
1466 border-color: darken($borders_color, 3%);
|
|
|
1467 border-top-color: darken($borders_color, 8%);
|
|
|
1468 &:backdrop {
|
|
|
1469 @include button(backdrop-active);
|
|
|
1470 }
|
|
|
1471 }
|
|
|
1472
|
|
|
1473 // squared corners when the window is maximized, tiled, or fullscreen
|
|
|
1474 .tiled &,
|
|
|
1475 .tiled-top &,
|
|
|
1476 .tiled-left &,
|
|
|
1477 .tiled-right &,
|
|
|
1478 .tiled-bottom &,
|
|
|
1479 .maximized &,
|
|
|
1480 .fullscreen & {
|
|
|
1481 &:backdrop, & {
|
|
|
1482 border-radius: 0;
|
|
|
1483 }
|
|
|
1484 }
|
|
|
1485
|
|
|
1486 &.default-decoration {
|
|
|
1487 min-height: 28px;
|
|
|
1488 padding: 4px;
|
|
|
1489
|
|
|
1490 windowcontrols {
|
|
|
1491 button,
|
|
|
1492 menubutton {
|
|
|
1493 min-height: 26px;
|
|
|
1494 min-width: 26px;
|
|
|
1495 margin: 0;
|
|
|
1496 padding: 0;
|
|
|
1497 }
|
|
|
1498
|
|
|
1499 menubutton button {
|
|
|
1500 min-height: 20px;
|
|
|
1501 min-width: 20px;
|
|
|
1502 margin: 0;
|
|
|
1503 padding: 4px;
|
|
|
1504 }
|
|
|
1505 }
|
|
|
1506 }
|
|
|
1507
|
|
|
1508 .solid-csd & {
|
|
|
1509 &:backdrop, & {
|
|
|
1510 &:dir(rtl), &:dir(ltr) { // specificity bump
|
|
|
1511 margin-left: -1px;
|
|
|
1512 margin-right: -1px;
|
|
|
1513 margin-top: -1px;
|
|
|
1514 border-radius: 0;
|
|
|
1515 box-shadow: none;
|
|
|
1516 }
|
|
|
1517 }
|
|
|
1518 }
|
|
|
1519 }
|
|
|
1520
|
|
|
1521 headerbar {
|
|
|
1522 > windowhandle > box {
|
|
|
1523 &,
|
|
|
1524 > box.start,
|
|
|
1525 > box.end {
|
|
|
1526 border-spacing: 6px;
|
|
|
1527 }
|
|
|
1528 }
|
|
|
1529
|
|
|
1530 // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
|
|
|
1531 entry,
|
|
|
1532 spinbutton,
|
|
|
1533 separator:not(.sidebar),
|
|
|
1534 button,
|
|
|
1535 menubutton {
|
|
|
1536 margin-top: 6px;
|
|
|
1537 margin-bottom: 6px;
|
|
|
1538 }
|
|
|
1539
|
|
|
1540 // Reset margins for buttons inside menubutton
|
|
|
1541 menubutton > button {
|
|
|
1542 margin-top: 0px;
|
|
|
1543 margin-bottom: 0px;
|
|
|
1544 }
|
|
|
1545
|
|
|
1546 switch {
|
|
|
1547 margin-top: 10px;
|
|
|
1548 margin-bottom: 10px;
|
|
|
1549 }
|
|
|
1550 }
|
|
|
1551
|
|
|
1552
|
|
|
1553 .titlebar:not(headerbar) {
|
|
|
1554 window.csd > & {
|
|
|
1555 // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
|
|
|
1556 padding: 0;
|
|
|
1557 background-color: transparent;
|
|
|
1558 background-image: none;
|
|
|
1559 border-style: none;
|
|
|
1560 border-color: transparent;
|
|
|
1561 }
|
|
|
1562
|
|
|
1563 separator { background-color: $borders_color; } // FIXME: use darker border?
|
|
|
1564
|
|
|
1565 @extend %titlebar;
|
|
|
1566 }
|
|
|
1567
|
|
|
1568 // Development versions of apps to use a differently styled headerbar
|
|
|
1569
|
|
|
1570 window.devel {
|
|
|
1571 headerbar.titlebar {
|
|
|
1572 $c: darken($bg_color, 10%);
|
|
|
1573 $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
|
|
|
1574 linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)),
|
|
|
1575 linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%));
|
|
|
1576 @if $variant == 'dark' {
|
|
|
1577 $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
|
|
|
1578 linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
|
|
|
1579 linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
|
|
|
1580 }
|
|
|
1581
|
|
|
1582 background: $bg_color $gradient;
|
|
|
1583
|
|
|
1584 &:backdrop {
|
|
|
1585 background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
|
|
|
1586 image($bg_color); /* background-color would flash */
|
|
|
1587 }
|
|
|
1588 }
|
|
|
1589 }
|
|
|
1590
|
|
|
1591 /************
|
|
|
1592 * Pathbars *
|
|
|
1593 ************/
|
|
|
1594
|
|
|
1595 pathbar > button {
|
|
|
1596 &.text-button, &.image-button, & {
|
|
|
1597 padding-left: 4px;
|
|
|
1598 padding-right: 4px;
|
|
|
1599 }
|
|
|
1600
|
|
|
1601 &.text-button.image-button label {
|
|
|
1602 padding-left: 0;
|
|
|
1603 padding-right: 0;
|
|
|
1604 }
|
|
|
1605
|
|
|
1606 &.text-button.image-button, & {
|
|
|
1607 label:last-child { padding-right: 8px; }
|
|
|
1608 label:first-child { padding-left: 8px; }
|
|
|
1609 }
|
|
|
1610
|
|
|
1611 image {
|
|
|
1612 padding-left: 4px;
|
|
|
1613 padding-right: 4px;
|
|
|
1614 }
|
|
|
1615
|
|
|
1616 &.slider-button {
|
|
|
1617 padding-left: 0;
|
|
|
1618 padding-right: 0;
|
|
|
1619 }
|
|
|
1620 }
|
|
|
1621
|
|
|
1622
|
|
|
1623 /**************
|
|
|
1624 * Tree Views *
|
|
|
1625 **************/
|
|
|
1626
|
|
|
1627 $_treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, $base_color, 20%));
|
|
|
1628 $_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%));
|
|
|
1629 columnview.view,
|
|
|
1630 treeview.view {
|
|
|
1631 border-left-color: $_treeview_borders_color; // this is actually the tree lines color,
|
|
|
1632 border-top-color: $_treeview_borders_color; // while this is the grid lines color, better then nothing
|
|
|
1633
|
|
|
1634 @include focus-ring();
|
|
|
1635
|
|
|
1636 > rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
|
|
|
1637
|
|
|
1638 &:selected {
|
|
|
1639 &:focus, & {
|
|
|
1640 border-radius: 0;
|
|
|
1641 outline-color: $alt_focus_border_color;
|
|
|
1642
|
|
|
1643 @extend %selected_items;
|
|
|
1644 }
|
|
|
1645 }
|
|
|
1646
|
|
|
1647 &:disabled {
|
|
|
1648 color: $insensitive_fg_color;
|
|
|
1649
|
|
|
1650 &:selected {
|
|
|
1651 color: mix($selected_fg_color, $selected_bg_color, 40%);
|
|
|
1652 &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
|
|
1653 }
|
|
|
1654 }
|
|
|
1655
|
|
|
1656 &.separator {
|
|
|
1657 min-height: 2px;
|
|
|
1658 color: $_treeview_borders_color;
|
|
|
1659 }
|
|
|
1660
|
|
|
1661 &:backdrop {
|
|
|
1662 border-left-color: $_treeview_backdrop_borders_color;
|
|
|
1663 border-top: $_treeview_backdrop_borders_color;
|
|
|
1664 }
|
|
|
1665
|
|
|
1666 &:drop(active) {
|
|
|
1667 box-shadow: none;
|
|
|
1668 }
|
|
|
1669
|
|
|
1670 > dndtarget:drop(active) {
|
|
|
1671 border-style: solid none;
|
|
|
1672 border-width: 1px;
|
|
|
1673 border-color: $selected_borders_color;
|
|
|
1674
|
|
|
1675 &.after { border-top-style: none; }
|
|
|
1676
|
|
|
1677 &.before { border-bottom-style: none; }
|
|
|
1678 }
|
|
|
1679
|
|
|
1680 &.expander {
|
|
|
1681 // GtkTreeView uses the larger of the expander’s min-width and min-height
|
|
|
1682 min-width: 16px;
|
|
|
1683 min-height: 16px;
|
|
|
1684 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
|
1685
|
|
|
1686 &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
|
1687
|
|
|
1688 color: mix($text_color, $base_color, 70%);
|
|
|
1689
|
|
|
1690 &:hover { color: $text_color; }
|
|
|
1691
|
|
|
1692 &:selected {
|
|
|
1693 color: mix($selected_fg_color, $selected_bg_color, 70%);
|
|
|
1694
|
|
|
1695 &:hover { color: $selected_fg_color; }
|
|
|
1696 }
|
|
|
1697
|
|
|
1698 &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
|
1699 }
|
|
|
1700
|
|
|
1701 &.progressbar { // progress bar in treeviews
|
|
|
1702 @if $variant == light { color: $base_color; }
|
|
|
1703
|
|
|
1704 background-color: $selected_bg_color;
|
|
|
1705 background-image: image($selected_bg_color);
|
|
|
1706 box-shadow: none;
|
|
|
1707
|
|
|
1708 &:selected {
|
|
|
1709 &:focus, & {
|
|
|
1710
|
|
|
1711 @if $variant == 'light' {
|
|
|
1712 color: $selected_bg_color;
|
|
|
1713
|
|
|
1714 }
|
|
|
1715
|
|
|
1716 @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
|
|
|
1717
|
|
|
1718 background-image: image($base_color);
|
|
|
1719
|
|
|
1720 &:backdrop {
|
|
|
1721 @if $variant == 'light' {
|
|
|
1722 color: $selected_bg_color;
|
|
|
1723 }
|
|
|
1724 background-color: $backdrop_base_color;
|
|
|
1725 }
|
|
|
1726 }
|
|
|
1727 }
|
|
|
1728 }
|
|
|
1729
|
|
|
1730 &.trough { // progress bar trough in treeviews
|
|
|
1731 background-color: transparentize($fg_color,0.9);
|
|
|
1732
|
|
|
1733 &:selected {
|
|
|
1734 &:focus, & {
|
|
|
1735 background-color: if($variant == 'light',
|
|
|
1736 transparentize($selected_fg_color, 0.7),
|
|
|
1737 darken($selected_bg_color, 10%));
|
|
|
1738
|
|
|
1739 }
|
|
|
1740 }
|
|
|
1741 }
|
|
|
1742
|
|
|
1743 > header {
|
|
|
1744 > button {
|
|
|
1745 $_column_header_color: mix($fg_color, $base_color, 50%);
|
|
|
1746
|
|
|
1747 @extend %column_header_button;
|
|
|
1748
|
|
|
1749 color: $_column_header_color;
|
|
|
1750 background-color: $base_color;
|
|
|
1751 font-weight: bold;
|
|
|
1752 text-shadow: none;
|
|
|
1753 box-shadow: none;
|
|
|
1754
|
|
|
1755 &:hover {
|
|
|
1756 @extend %column_header_button;
|
|
|
1757
|
|
|
1758 color: mix($_column_header_color, $fg_color, 50%);
|
|
|
1759 box-shadow: none;
|
|
|
1760 transition: none; //I shouldn't need this
|
|
|
1761 }
|
|
|
1762
|
|
|
1763 &:active {
|
|
|
1764 @extend %column_header_button;
|
|
|
1765
|
|
|
1766 color: $fg_color;
|
|
|
1767 transition: none; //I shouldn't need this
|
|
|
1768 }
|
|
|
1769 sort-indicator {
|
|
|
1770 &.ascending {
|
|
|
1771 -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
|
|
1772 }
|
|
|
1773 &.descending {
|
|
|
1774 -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
|
1775 }
|
|
|
1776
|
|
|
1777 min-height: 16px;
|
|
|
1778 min-width: 16px;
|
|
|
1779 }
|
|
|
1780 }
|
|
|
1781 }
|
|
|
1782
|
|
|
1783 button.dnd,
|
|
|
1784 header.button.dnd { // for treeview-like derive widgets
|
|
|
1785 &:active, &:selected, &:hover, & {
|
|
|
1786 padding: 0 6px;
|
|
|
1787 color: $base_color;
|
|
|
1788 background-image: none;
|
|
|
1789 background-color: $selected_bg_color;
|
|
|
1790 border-style: none;
|
|
|
1791 border-radius: 0;
|
|
|
1792 box-shadow: inset 0 0 0 1px $base_color;
|
|
|
1793 text-shadow: none;
|
|
|
1794 transition: none;
|
|
|
1795 }
|
|
|
1796 }
|
|
|
1797
|
|
|
1798 acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
|
|
|
1799 }
|
|
|
1800
|
|
|
1801 %column_header_button {
|
|
|
1802 padding: 0 6px;
|
|
|
1803 background-image: none;
|
|
|
1804 border-style: none none solid solid;
|
|
|
1805 border-color: $_treeview_borders_color;
|
|
|
1806 border-radius: 0;
|
|
|
1807 text-shadow: none;
|
|
|
1808
|
|
|
1809 &:disabled {
|
|
|
1810 border-color: $bg_color;
|
|
|
1811 background-image: none;
|
|
|
1812 }
|
|
|
1813
|
|
|
1814 &:last-child { &:backdrop, & { border-right-style: none; }}
|
|
|
1815 }
|
|
|
1816
|
|
|
1817 /***************
|
|
|
1818 * Popovers *
|
|
|
1819 ***************/
|
|
|
1820
|
|
|
1821 popover.background {
|
|
|
1822 background-color: transparent;
|
|
|
1823 font: initial; // Decouple the font of popovers from their entry/textview
|
|
|
1824
|
|
|
1825 > arrow,
|
|
|
1826 > contents {
|
|
|
1827 $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
|
|
|
1828
|
|
|
1829 background-color: $menu_color;
|
|
|
1830 background-clip: padding-box;
|
|
|
1831 border: 1px solid $_popover_border;
|
|
|
1832 box-shadow: 0 1px 2px transparentize(black, 0.7);
|
|
|
1833 }
|
|
|
1834
|
|
|
1835 &:backdrop {
|
|
|
1836 background-color: transparent;
|
|
|
1837 }
|
|
|
1838
|
|
|
1839 > contents {
|
|
|
1840 padding: 8px;
|
|
|
1841 border-radius: $popover_radius;
|
|
|
1842
|
|
|
1843 > list,
|
|
|
1844 > .view,
|
|
|
1845 > toolbar {
|
|
|
1846 border-style: none;
|
|
|
1847 background-color: transparent;
|
|
|
1848 }
|
|
|
1849
|
|
|
1850 separator {
|
|
|
1851 background-color: mix($bg_color, $borders_color, 30%);
|
|
|
1852 margin: 3px;
|
|
|
1853 }
|
|
|
1854
|
|
|
1855 list separator { margin: 0; }
|
|
|
1856 }
|
|
|
1857
|
|
|
1858 .osd &,
|
|
|
1859 &.touch-selection,
|
|
|
1860 &.magnifier {
|
|
|
1861 background-color: transparent;
|
|
|
1862
|
|
|
1863 > arrow,
|
|
|
1864 > contents {
|
|
|
1865 @extend %osd;
|
|
|
1866
|
|
|
1867 border: 1px solid transparentize(white, 0.9);
|
|
|
1868 box-shadow: none;
|
|
|
1869 }
|
|
|
1870 }
|
|
|
1871
|
|
|
1872 &.touch-selection,
|
|
|
1873 &.magnifier {
|
|
|
1874 button { @extend %osd_button; }
|
|
|
1875 }
|
|
|
1876 }
|
|
|
1877
|
|
|
1878 magnifier {
|
|
|
1879 background-color: $base_color;
|
|
|
1880 }
|
|
|
1881
|
|
|
1882 /**********************
|
|
|
1883 * Popover Base Menus *
|
|
|
1884 **********************/
|
|
|
1885
|
|
|
1886 $_menu-padding: 12px; //inner menuitem padding
|
|
|
1887 //global $menu-margin for outside menuitems
|
|
|
1888
|
|
|
1889 popover.menu {
|
|
|
1890 padding: 0;
|
|
|
1891
|
|
|
1892 box.inline-buttons {
|
|
|
1893 padding: 0 $_menu-padding;
|
|
|
1894
|
|
|
1895 button.image-button.model {
|
|
|
1896 @include button(undecorated);
|
|
|
1897
|
|
|
1898 min-height: 30px;
|
|
|
1899 min-width: 30px;
|
|
|
1900 padding: 0;
|
|
|
1901 border: none;
|
|
|
1902 outline: none;
|
|
|
1903 transition: none;
|
|
|
1904
|
|
|
1905 &:selected { background: image($menu_selected_color); }
|
|
|
1906 }
|
|
|
1907 }
|
|
|
1908
|
|
|
1909 box.circular-buttons {
|
|
|
1910 padding: $_menu-padding $_menu-padding 6px;
|
|
|
1911
|
|
|
1912 button.circular.image-button.model {
|
|
|
1913 @extend %list_button;
|
|
|
1914
|
|
|
1915 padding: 11px;
|
|
|
1916 &:focus {
|
|
|
1917 background-color: $menu_selected_color;
|
|
|
1918 border-color: $menu_selected_color;
|
|
|
1919 }
|
|
|
1920 }
|
|
|
1921 }
|
|
|
1922
|
|
|
1923 & > arrow,
|
|
|
1924 &.background > contents {
|
|
|
1925 background-color: $menu_color;
|
|
|
1926 padding: $menu-margin;
|
|
|
1927 }
|
|
|
1928
|
|
|
1929 &.background separator {
|
|
|
1930 margin: 6px 0;
|
|
|
1931 }
|
|
|
1932
|
|
|
1933 accelerator {
|
|
|
1934 color: gtkalpha(currentColor,0.55);
|
|
|
1935
|
|
|
1936 &:dir(ltr) { margin-left: $_menu-padding; }
|
|
|
1937 &:dir(rtl) { margin-right: $_menu-padding; }
|
|
|
1938 }
|
|
|
1939
|
|
|
1940 check,
|
|
|
1941 radio {
|
|
|
1942 @include check('menu', 'transparent', $text_color);
|
|
|
1943
|
|
|
1944 &:hover { @include check('menu-active', 'transparent', $text_color); }
|
|
|
1945 &:active { @include check('menu-active', 'transparent', $text_color); }
|
|
|
1946 }
|
|
|
1947
|
|
|
1948 //only menu radios have a border
|
|
|
1949 radio { border-color: $borders_color;
|
|
|
1950 &:active { border-color: transparentize($borders_color,0.5); }
|
|
|
1951 }
|
|
|
1952
|
|
|
1953 arrow.left,
|
|
|
1954 radio.left,
|
|
|
1955 check.left {
|
|
|
1956 margin-left: -2px;
|
|
|
1957 margin-right: 6px;
|
|
|
1958 }
|
|
|
1959
|
|
|
1960 arrow.right,
|
|
|
1961 radio.right,
|
|
|
1962 check.right {
|
|
|
1963 margin-left: 6px;
|
|
|
1964 margin-right: -2px;
|
|
|
1965 }
|
|
|
1966
|
|
|
1967 modelbutton {
|
|
|
1968 min-height: 30px;
|
|
|
1969 min-width: 40px;
|
|
|
1970 padding: 0 $_menu-padding;
|
|
|
1971 border-radius: $menu-margin;
|
|
|
1972
|
|
|
1973 &:selected {
|
|
|
1974 color: $text-color;
|
|
|
1975 background-color: $menu_selected_color;
|
|
|
1976 }
|
|
|
1977 &:selected:active {
|
|
|
1978 //@extend %selected_items;
|
|
|
1979 //color: $selected_fg_color;
|
|
|
1980 background-color: darken($bg_color,14%); // matching buttons
|
|
|
1981 }
|
|
|
1982 }
|
|
|
1983
|
|
|
1984 label.title {
|
|
|
1985 font-weight: bold;
|
|
|
1986 padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing
|
|
|
1987 }
|
|
|
1988 }
|
|
|
1989
|
|
|
1990 // initial styling for popover menu and bar
|
|
|
1991 menubar {
|
|
|
1992 padding: 0px;
|
|
|
1993 box-shadow: inset 0 -1px transparentize(black, 0.9);
|
|
|
1994
|
|
|
1995 > item {
|
|
|
1996 min-height: 16px;
|
|
|
1997 padding: 4px 8px;
|
|
|
1998
|
|
|
1999 &:selected { //Seems like it :hover even with keyboard focus
|
|
|
2000 box-shadow: inset 0 -3px $selected_bg_color;
|
|
|
2001 color: $link_color;
|
|
|
2002 }
|
|
|
2003
|
|
|
2004 &:disabled {
|
|
|
2005 color: $insensitive_fg_color;
|
|
|
2006 box-shadow: none;
|
|
|
2007 }
|
|
|
2008 }
|
|
|
2009
|
|
|
2010 & > item popover.menu.background > contents {
|
|
|
2011 padding: $menu-margin;
|
|
|
2012 }
|
|
|
2013 //nested submenus
|
|
|
2014 & > item popover.menu popover.menu {
|
|
|
2015 padding: 0 0 4px 0;
|
|
|
2016 }
|
|
|
2017 & > item popover.menu.background popover.menu.background > contents {
|
|
|
2018 margin: 0;
|
|
|
2019 border-radius: $popover_radius; //including top
|
|
|
2020 }
|
|
|
2021 }
|
|
|
2022
|
|
|
2023
|
|
|
2024 /*************
|
|
|
2025 * Notebooks *
|
|
|
2026 *************/
|
|
|
2027 notebook {
|
|
|
2028 @include focus-ring("> header > tabs > tab:checked", $offset: -2px, $focus-state: 'focus:focus-visible');
|
|
|
2029
|
|
|
2030 > header {
|
|
|
2031 padding: 1px;
|
|
|
2032 border-color: $borders_color;
|
|
|
2033 border-width: 1px;
|
|
|
2034 background-color: $dark_fill;
|
|
|
2035
|
|
|
2036 > tabs { margin: -1px; }
|
|
|
2037
|
|
|
2038 &.top {
|
|
|
2039 border-bottom-style: solid;
|
|
|
2040 > tabs {
|
|
|
2041 margin-bottom: -2px;
|
|
|
2042 > tab {
|
|
|
2043 &:hover { box-shadow: inset 0 -4px $borders_color; }
|
|
|
2044
|
|
|
2045
|
|
|
2046 &:checked { box-shadow: inset 0 -4px $selected_bg_color; }
|
|
|
2047 }
|
|
|
2048 }
|
|
|
2049 }
|
|
|
2050
|
|
|
2051 &.bottom {
|
|
|
2052 border-top-style: solid;
|
|
|
2053 > tabs {
|
|
|
2054 margin-top: -2px;
|
|
|
2055 > tab {
|
|
|
2056 &:hover { box-shadow: inset 0 4px $borders_color; }
|
|
|
2057
|
|
|
2058 &:checked { box-shadow: inset 0 4px $selected_bg_color; }
|
|
|
2059 }
|
|
|
2060 }
|
|
|
2061 }
|
|
|
2062
|
|
|
2063 &.left {
|
|
|
2064 border-right-style: solid;
|
|
|
2065 > tabs {
|
|
|
2066 margin-right: -2px;
|
|
|
2067 > tab {
|
|
|
2068 &:hover { box-shadow: inset -4px 0 $borders_color; }
|
|
|
2069
|
|
|
2070 &:checked { box-shadow: inset -4px 0 $selected_bg_color; }
|
|
|
2071 }
|
|
|
2072 }
|
|
|
2073 }
|
|
|
2074
|
|
|
2075 &.right {
|
|
|
2076 border-left-style: solid;
|
|
|
2077 > tabs {
|
|
|
2078 margin-left: -2px;
|
|
|
2079 > tab {
|
|
|
2080 &:hover { box-shadow: inset 4px 0 $borders_color; }
|
|
|
2081
|
|
|
2082 &:checked { box-shadow: inset 4px 0 $selected_bg_color; }
|
|
|
2083 }
|
|
|
2084 }
|
|
|
2085 }
|
|
|
2086
|
|
|
2087 &.top > tabs > arrow {
|
|
|
2088 @extend %notebook_vert_arrows;
|
|
|
2089
|
|
|
2090 border-top-style: none;
|
|
|
2091 }
|
|
|
2092
|
|
|
2093 &.bottom > tabs > arrow {
|
|
|
2094 @extend %notebook_vert_arrows;
|
|
|
2095
|
|
|
2096 border-bottom-style: none;
|
|
|
2097 }
|
|
|
2098
|
|
|
2099 @at-root %notebook_vert_arrows {
|
|
|
2100 margin-left: -5px;
|
|
|
2101 margin-right: -5px;
|
|
|
2102 padding-left: 4px;
|
|
|
2103 padding-right: 4px;
|
|
|
2104
|
|
|
2105 &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
|
|
|
2106
|
|
|
2107 &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
|
|
|
2108 }
|
|
|
2109
|
|
|
2110 &.left > tabs > arrow {
|
|
|
2111 @extend %notebook_horz_arrows;
|
|
|
2112
|
|
|
2113 border-left-style: none;
|
|
|
2114 }
|
|
|
2115
|
|
|
2116 &.right > tabs > arrow {
|
|
|
2117 @extend %notebook_horz_arrows;
|
|
|
2118
|
|
|
2119 border-right-style: none;
|
|
|
2120 }
|
|
|
2121
|
|
|
2122 @at-root %notebook_horz_arrows {
|
|
|
2123 margin-top: -5px;
|
|
|
2124 margin-bottom: -5px;
|
|
|
2125 padding-top: 4px;
|
|
|
2126 padding-bottom: 4px;
|
|
|
2127
|
|
|
2128 &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
|
|
|
2129
|
|
|
2130 &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
|
2131 }
|
|
|
2132
|
|
|
2133 > tabs > arrow {
|
|
|
2134 @extend %button_basic;
|
|
|
2135
|
|
|
2136 @extend %button_basic_flat;
|
|
|
2137
|
|
|
2138 min-height: 16px;
|
|
|
2139 min-width: 16px;
|
|
|
2140 border-radius: 0;
|
|
|
2141
|
|
|
2142 &:hover:not(:active):not(:backdrop) {
|
|
|
2143 background-clip: padding-box;
|
|
|
2144 background-image: none;
|
|
|
2145 background-color: transparentize(white, 0.7);
|
|
|
2146 border-color: transparent;
|
|
|
2147 box-shadow: none;
|
|
|
2148 }
|
|
|
2149
|
|
|
2150 &:disabled { @include button(undecorated); }
|
|
|
2151 }
|
|
|
2152
|
|
|
2153 > tabs > tab {
|
|
|
2154 transition: $focus_transition;
|
|
|
2155 min-height: 30px;
|
|
|
2156 min-width: 30px;
|
|
|
2157 padding: 3px 12px;
|
|
|
2158
|
|
|
2159 color: $fg_color;
|
|
|
2160 font-weight: normal;
|
|
|
2161
|
|
|
2162 border-width: 1px; // for reorderable tabs
|
|
|
2163 border-color: transparent; //
|
|
|
2164
|
|
|
2165 &:hover {
|
|
|
2166 color: $fg_color;
|
|
|
2167 background-color: darken($dark_fill,4%);
|
|
|
2168
|
|
|
2169 &.reorderable-page {
|
|
|
2170 border-color: transparentize($borders_color, 0.7);
|
|
|
2171 background-color: transparentize($bg_color, 0.8);
|
|
|
2172 }
|
|
|
2173 }
|
|
|
2174
|
|
|
2175 &:not(:checked) {
|
|
|
2176 outline-color: transparent;
|
|
|
2177 }
|
|
|
2178
|
|
|
2179 &:checked {
|
|
|
2180 color: $fg_color;
|
|
|
2181 &.reorderable-page {
|
|
|
2182 border-color: transparentize($borders_color, 0.5);
|
|
|
2183 background-color: transparentize($bg_color, 0.5);
|
|
|
2184
|
|
|
2185 &:hover { background-color: transparentize($bg_color, 0.3); }
|
|
|
2186 }
|
|
|
2187 }
|
|
|
2188
|
|
|
2189 // colors the button like the label, overridden otherwise
|
|
|
2190 button.flat {
|
|
|
2191 color: gtkalpha(currentColor, 0.3);
|
|
|
2192 &:hover { color: currentColor; }
|
|
|
2193
|
|
|
2194 padding: 0;
|
|
|
2195 margin-top: 4px;
|
|
|
2196 margin-bottom: 4px;
|
|
|
2197 // FIXME: generalize .small-button?
|
|
|
2198 min-width: 20px;
|
|
|
2199 min-height: 20px;
|
|
|
2200
|
|
|
2201 &:last-child {
|
|
|
2202 margin-left: 4px;
|
|
|
2203 margin-right: -4px;
|
|
|
2204 }
|
|
|
2205
|
|
|
2206 &:first-child {
|
|
|
2207 margin-left: -4px;
|
|
|
2208 margin-right: 4px;
|
|
|
2209 }
|
|
|
2210 }
|
|
|
2211 }
|
|
|
2212
|
|
|
2213 &.top,
|
|
|
2214 &.bottom {
|
|
|
2215 > tabs {
|
|
|
2216 padding-left: 4px;
|
|
|
2217 padding-right: 4px;
|
|
|
2218
|
|
|
2219 &:not(:only-child) {
|
|
|
2220 margin-left: 3px;
|
|
|
2221 margin-right: 3px;
|
|
|
2222
|
|
|
2223 &:first-child { margin-left: -1px; }
|
|
|
2224 &:last-child { margin-right: -1px; }
|
|
|
2225 }
|
|
|
2226
|
|
|
2227 > tab {
|
|
|
2228 margin-left: 4px;
|
|
|
2229 margin-right: 4px;
|
|
|
2230
|
|
|
2231 &.reorderable-page { border-style: none solid; }
|
|
|
2232 }
|
|
|
2233 }
|
|
|
2234 }
|
|
|
2235
|
|
|
2236 &.left,
|
|
|
2237 &.right {
|
|
|
2238 > tabs {
|
|
|
2239 padding-top: 4px;
|
|
|
2240 padding-bottom: 4px;
|
|
|
2241
|
|
|
2242 &:not(:only-child) {
|
|
|
2243 margin-top: 3px;
|
|
|
2244 margin-bottom: 3px;
|
|
|
2245
|
|
|
2246 &:first-child { margin-top: -1px; }
|
|
|
2247 &:last-child { margin-bottom: -1px; }
|
|
|
2248 }
|
|
|
2249
|
|
|
2250 > tab {
|
|
|
2251 margin-top: 4px;
|
|
|
2252 margin-bottom: 4px;
|
|
|
2253
|
|
|
2254 &.reorderable-page { border-style: solid none; }
|
|
|
2255 }
|
|
|
2256 }
|
|
|
2257 }
|
|
|
2258
|
|
|
2259 &.top > tabs > tab { padding-bottom: 4px; }
|
|
|
2260 &.bottom > tabs > tab { padding-top: 4px; }
|
|
|
2261 }
|
|
|
2262
|
|
|
2263 > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
|
|
|
2264 background-color: $base_color;
|
|
|
2265 }
|
|
|
2266 }
|
|
|
2267
|
|
|
2268
|
|
|
2269 /**************
|
|
|
2270 * Scrollbars *
|
|
|
2271 **************/
|
|
|
2272
|
|
|
2273 scrollbar {
|
|
|
2274 $_slider_min_length: 40px;
|
|
|
2275 $_slider_width: 8px;
|
|
|
2276 $_scrollbar_transition: all 300ms $ease-out-quad;
|
|
|
2277 $_fine-tune_slider_border: $_slider_width - 3; //#3672
|
|
|
2278
|
|
|
2279 background-color: $scrollbar_bg_color;
|
|
|
2280 transition: $_scrollbar_transition;
|
|
|
2281
|
|
|
2282 // scrollbar border
|
|
|
2283 &.top { border-bottom: 1px solid $borders_color; }
|
|
|
2284 &.bottom { border-top: 1px solid $borders_color; }
|
|
|
2285 &.left { border-right: 1px solid $borders_color; }
|
|
|
2286 &.right { border-left: 1px solid $borders_color; }
|
|
|
2287
|
|
|
2288 > range > trough > slider {
|
|
|
2289 min-width: $_slider_width;
|
|
|
2290 min-height: $_slider_width;
|
|
|
2291 margin: -1px;
|
|
|
2292 border: 4px solid transparent;
|
|
|
2293 border-radius: 10px;
|
|
|
2294 background-clip: padding-box;
|
|
|
2295 background-color: $scrollbar_slider_color;
|
|
|
2296 transition: $_scrollbar_transition;
|
|
|
2297
|
|
|
2298 &:hover { background-color: $scrollbar_slider_hover_color; }
|
|
|
2299
|
|
|
2300 &:hover:active { background-color: $scrollbar_slider_active_color; }
|
|
|
2301
|
|
|
2302 &:disabled { background-color: transparent; }
|
|
|
2303 }
|
|
|
2304
|
|
|
2305 > range.fine-tune {
|
|
|
2306 > trough > slider {
|
|
|
2307 transition: none;
|
|
|
2308 min-width: $_fine-tune_slider_border+1;
|
|
|
2309 min-height: $_fine-tune_slider_border+1;
|
|
|
2310 }
|
|
|
2311
|
|
|
2312 &.horizontal > trough > slider { border-width: $_fine-tune_slider_border 4px; }
|
|
|
2313 &.vertical > trough > slider { border-width: 4px $_fine-tune_slider_border; }
|
|
|
2314 }
|
|
|
2315
|
|
|
2316 &.overlay-indicator {
|
|
|
2317 &:not(.dragging):not(.hovering) {
|
|
|
2318 border-color: transparent;
|
|
|
2319 opacity: 0.4;
|
|
|
2320 background-color: transparent;
|
|
|
2321
|
|
|
2322 > range > trough > slider {
|
|
|
2323 margin: 0;
|
|
|
2324 min-width: 3px;
|
|
|
2325 min-height: 3px;
|
|
|
2326 background-color: $fg_color;
|
|
|
2327 border: 1px solid if($variant == 'light', white, black);
|
|
|
2328 }
|
|
|
2329
|
|
|
2330 &.horizontal {
|
|
|
2331 > range > trough > slider {
|
|
|
2332 margin: 0 2px;
|
|
|
2333 min-width: $_slider_min_length;
|
|
|
2334 }
|
|
|
2335 }
|
|
|
2336
|
|
|
2337 &.vertical {
|
|
|
2338 > range > trough > slider {
|
|
|
2339 margin: 2px 0;
|
|
|
2340 min-height: $_slider_min_length;
|
|
|
2341 }
|
|
|
2342 }
|
|
|
2343 }
|
|
|
2344
|
|
|
2345 &.dragging,
|
|
|
2346 &.hovering { opacity: 0.8; }
|
|
|
2347 }
|
|
|
2348
|
|
|
2349 &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
|
|
|
2350 &.vertical > range > trough > slider { min-height: $_slider_min_length; }
|
|
|
2351 }
|
|
|
2352
|
|
|
2353 treeview ~ scrollbar.vertical {
|
|
|
2354 border-top: 1px solid $borders_color;
|
|
|
2355 margin-top: -1px;
|
|
|
2356 }
|
|
|
2357
|
|
|
2358 /**********
|
|
|
2359 * Switch *
|
|
|
2360 **********/
|
|
|
2361 switch {
|
|
|
2362 font-weight: bold;
|
|
|
2363 font-size: smaller;
|
|
|
2364
|
|
|
2365 // similar to the .scale
|
|
|
2366 border: 1px solid $borders_color;
|
|
|
2367 border-radius: 14px;
|
|
|
2368 color: $fg_color;
|
|
|
2369 background-color: $dark_fill;
|
|
|
2370 transition: $focus_transition;
|
|
|
2371
|
|
|
2372 @include focus-ring($offset: 0, $outer: true);
|
|
|
2373
|
|
|
2374 headerbar & { background-color: darken($dark_fill,8%); } //3504
|
|
|
2375
|
|
|
2376 &:checked {
|
|
|
2377 color: $selected_fg_color;
|
|
|
2378 border-color: $switch_borders_color;
|
|
|
2379 background-color: $switch_bg_color;
|
|
|
2380 }
|
|
|
2381
|
|
|
2382 &:disabled {
|
|
|
2383 color: $insensitive_fg_color;
|
|
|
2384 border-color: $borders_color;
|
|
|
2385 background-color: $insensitive_bg_color;
|
|
|
2386 text-shadow: none;
|
|
|
2387 }
|
|
|
2388
|
|
|
2389 > slider {
|
|
|
2390 @include button(normal);
|
|
|
2391
|
|
|
2392 margin: -1px;
|
|
|
2393 min-width: 24px;
|
|
|
2394 min-height: 24px;
|
|
|
2395 border: 1px solid;
|
|
|
2396 border-color: $borders_color;
|
|
|
2397 border-radius: 50%;
|
|
|
2398 transition: $button_transition;
|
|
|
2399 }
|
|
|
2400
|
|
|
2401 > image { color: transparent; } /* only show i / o for the accessible theme */
|
|
|
2402
|
|
|
2403 &:hover > slider {
|
|
|
2404 @include button(hover);
|
|
|
2405 }
|
|
|
2406
|
|
|
2407 &:checked > slider { border: 1px solid $switch_borders_color; }
|
|
|
2408
|
|
|
2409 &:disabled > slider { @include button(insensitive); }
|
|
|
2410
|
|
|
2411
|
|
|
2412 row:selected & {
|
|
|
2413 outline-color: $alt_focus_border_color;
|
|
|
2414
|
|
|
2415 @if $variant == 'light' {
|
|
|
2416 box-shadow: none;
|
|
|
2417 border-color: $switch_borders_color;
|
|
|
2418
|
|
|
2419 > slider { &:checked, & { border-color: $switch_borders_color; } }
|
|
|
2420 }
|
|
|
2421 }
|
|
|
2422 }
|
|
|
2423
|
|
|
2424
|
|
|
2425 /*************************
|
|
|
2426 * Check and Radio items *
|
|
|
2427 *************************/
|
|
|
2428 // draw regular check and radio items using our PNG assets
|
|
|
2429 // all assets are rendered from assets.svg. never add pngs directly
|
|
|
2430
|
|
|
2431
|
|
|
2432 //selection-mode
|
|
|
2433 @each $check_state, $check_icon, $check_color, $check_background in
|
|
|
2434 ('', 'none', 'transparent', $checkradio_bg_color),
|
|
|
2435 (':hover', 'none', 'transparent', $checkradio_bg_color),
|
|
|
2436 (':active', 'none', 'transparent', $checkradio_bg_color),
|
|
|
2437 (':backdrop', 'none', 'transparent', '#{desaturate($checkradio_bg_color, 100%)}'),
|
|
|
2438 (':checked', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
|
|
|
2439 (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
|
|
|
2440 (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
|
|
|
2441 (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 0.2)}', '#{desaturate($checkradio_bg_color, 100%)}'), {
|
|
|
2442
|
|
|
2443 .view.content-view.check#{$check_state}:not(list),
|
|
|
2444 .content-view .tile check#{$check_state}:not(list) {
|
|
|
2445 margin: 4px;
|
|
|
2446 min-width: 32px;
|
|
|
2447 min-height: 32px;
|
|
|
2448 color: #{$check_color};
|
|
|
2449 background-color: #{$check_background};
|
|
|
2450 border-radius: 5px;
|
|
|
2451 background-image: none;
|
|
|
2452 transition: 200ms;
|
|
|
2453 box-shadow: none;
|
|
|
2454 border-width: 0;
|
|
|
2455 -gtk-icon-source: #{$check_icon};
|
|
|
2456 -gtk-icon-shadow: none;
|
|
|
2457 }
|
|
|
2458 }
|
|
|
2459
|
|
|
2460 checkbutton {
|
|
|
2461 border-spacing: 4px;
|
|
|
2462 border-radius: $button_radius;
|
|
|
2463 transition: $focus_transition;
|
|
|
2464
|
|
|
2465 @include focus-ring();
|
|
|
2466
|
|
|
2467 &.text-button {
|
|
|
2468 // this is for a nice focus on check and radios text
|
|
|
2469 padding: 4px;
|
|
|
2470 }
|
|
|
2471 }
|
|
|
2472
|
|
|
2473 check,
|
|
|
2474 radio {
|
|
|
2475 min-height: 14px;
|
|
|
2476 min-width: 14px;
|
|
|
2477 border: 1px solid;
|
|
|
2478 -gtk-icon-source: none;
|
|
|
2479
|
|
|
2480 & {
|
|
|
2481 // for unchecked
|
|
|
2482 $_c: if($variant=='light', white, $bg_color);
|
|
|
2483
|
|
|
2484 @each $state, $t in ("", "normal"),
|
|
|
2485 (":hover", "hover"),
|
|
|
2486 (":active", "active"),
|
|
|
2487 (":disabled", "insensitive") {
|
|
|
2488 &#{$state} {
|
|
|
2489 @include check($t, $_c);
|
|
|
2490 }
|
|
|
2491 }
|
|
|
2492 }
|
|
|
2493
|
|
|
2494 & {
|
|
|
2495 // for checked
|
|
|
2496 @each $t in (':checked'), (':indeterminate') {
|
|
|
2497 &#{$t} {
|
|
|
2498 @each $state, $t in ("", "normal"),
|
|
|
2499 (":hover", "hover"),
|
|
|
2500 (":active", "active"),
|
|
|
2501 (":disabled", "insensitive") {
|
|
|
2502 &#{$state} {
|
|
|
2503 @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
|
|
|
2504 }
|
|
|
2505 }
|
|
|
2506 }
|
|
|
2507 }
|
|
|
2508 }
|
|
|
2509
|
|
|
2510 @if $variant == 'light' {
|
|
|
2511 // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
|
|
|
2512 // color, hence we need special casing.
|
|
|
2513 row:selected & { border-color: $checkradio_borders_color; }
|
|
|
2514 }
|
|
|
2515
|
|
|
2516 .osd & {
|
|
|
2517 @include button(osd);
|
|
|
2518
|
|
|
2519 &:hover { @include button(osd); }
|
|
|
2520 &:active { @include button(osd-active); }
|
|
|
2521 &:disabled { @include button(osd-insensitive); }
|
|
|
2522 }
|
|
|
2523 }
|
|
|
2524
|
|
|
2525 %check,
|
|
|
2526 check {
|
|
|
2527 border-radius: 3px;
|
|
|
2528 -gtk-icon-size: 14px;
|
|
|
2529
|
|
|
2530 &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/check-symbolic.symbolic.png")),
|
|
|
2531 -gtk-recolor(url("#{$assets}/check@2-symbolic.symbolic.png"))); }
|
|
|
2532
|
|
|
2533 &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/dash-symbolic.symbolic.png")),
|
|
|
2534 -gtk-recolor(url("#{$assets}/dash@2-symbolic.symbolic.png"))); }
|
|
|
2535 }
|
|
|
2536
|
|
|
2537 %radio,
|
|
|
2538 radio {
|
|
|
2539 border-radius: 100%;
|
|
|
2540 -gtk-icon-size: 14px;
|
|
|
2541
|
|
|
2542 &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/bullet-symbolic.symbolic.png")),
|
|
|
2543 -gtk-recolor(url("#{$assets}/bullet@2-symbolic.symbolic.png"))); }
|
|
|
2544
|
|
|
2545 &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/dash-symbolic.symbolic.png")),
|
|
|
2546 -gtk-recolor(url("#{$assets}/dash@2-symbolic.symbolic.png"))); }
|
|
|
2547 }
|
|
|
2548
|
|
|
2549 treeview.view check,
|
|
|
2550 treeview.view radio {
|
|
|
2551 &:selected {
|
|
|
2552 &:focus, & {
|
|
|
2553 color: $checkradio_fg_color;
|
|
|
2554
|
|
|
2555 @if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
2556 }
|
|
|
2557 }
|
|
|
2558 }
|
|
|
2559
|
|
|
2560 treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround
|
|
|
2561
|
|
|
2562
|
|
|
2563 /************
|
|
|
2564 * GtkScale *
|
|
|
2565 ************/
|
|
|
2566 %scale_trough {
|
|
|
2567 border: 1px solid $dark_fill;
|
|
|
2568 border-radius: 3px;
|
|
|
2569 background-color: $dark_fill;
|
|
|
2570
|
|
|
2571 headerbar & { background-color: darken($dark_fill,8%); } //3504
|
|
|
2572
|
|
|
2573 &:disabled {
|
|
|
2574 background-color: $insensitive_bg_color;
|
|
|
2575 border-color: $insensitive_borders_color;
|
|
|
2576 }
|
|
|
2577
|
|
|
2578 // ...on selected list rows
|
|
|
2579 row:selected & {
|
|
|
2580 &:disabled, & {
|
|
|
2581 outline-color: $alt_focus_border_color;
|
|
|
2582 border-color: $selected_borders_color;
|
|
|
2583 }
|
|
|
2584 }
|
|
|
2585
|
|
|
2586 // OSD
|
|
|
2587 .osd & {
|
|
|
2588 border-color: $osd_borders_color;
|
|
|
2589 background-color: transparentize($osd_borders_color, 0.2);
|
|
|
2590
|
|
|
2591 &:disabled { background-color: $osd_insensitive_bg_color; }
|
|
|
2592 }
|
|
|
2593 }
|
|
|
2594
|
|
|
2595 %scale_highlight {
|
|
|
2596 border: 1px solid $selected_bg_color;
|
|
|
2597 border-radius: 3px;
|
|
|
2598 background-color: $selected_bg_color;
|
|
|
2599
|
|
|
2600 &:disabled {
|
|
|
2601 background-color: transparent;
|
|
|
2602 border-color: transparent;
|
|
|
2603 }
|
|
|
2604
|
|
|
2605 // ...on selected list rows
|
|
|
2606 row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
|
|
|
2607
|
|
|
2608 // OSD
|
|
|
2609 .osd & {
|
|
|
2610 border-color: $osd_borders_color;
|
|
|
2611
|
|
|
2612 &:disabled { border-color: transparent; }
|
|
|
2613 }
|
|
|
2614 }
|
|
|
2615
|
|
|
2616 scale {
|
|
|
2617 // sizing
|
|
|
2618 $_marks_length: 6px;
|
|
|
2619 $_marks_distance: 6px;
|
|
|
2620
|
|
|
2621 min-height: 10px;
|
|
|
2622 min-width: 10px;
|
|
|
2623 padding: 12px;
|
|
|
2624
|
|
|
2625 @include focus-ring("> trough", $offset: 10px);
|
|
|
2626
|
|
|
2627 // those are inside the trough node, I need them to show their own border over the trough one, so negative margin
|
|
|
2628 > trough {
|
|
|
2629 transition: $focus_transition;
|
|
|
2630
|
|
|
2631 > fill,
|
|
|
2632 > highlight { margin: -1px; }
|
|
|
2633
|
|
|
2634 // the slider is inside the trough, so to have make it bigger there's a negative margin
|
|
|
2635
|
|
|
2636 > slider {
|
|
|
2637 min-height: 18px;
|
|
|
2638 min-width: 18px;
|
|
|
2639 margin: -9px;
|
|
|
2640 }
|
|
|
2641 }
|
|
|
2642
|
|
|
2643 // click-and-hold the slider to activate
|
|
|
2644 &.fine-tune {
|
|
|
2645 &.horizontal {
|
|
|
2646 padding-top: 9px;
|
|
|
2647 padding-bottom: 9px;
|
|
|
2648 min-height: 16px;
|
|
|
2649 }
|
|
|
2650
|
|
|
2651 &.vertical {
|
|
|
2652 padding-left: 9px;
|
|
|
2653 padding-right: 9px;
|
|
|
2654 min-width: 16px;
|
|
|
2655 }
|
|
|
2656
|
|
|
2657 // to make the trough grow in fine-tune mode
|
|
|
2658 > trough > slider { margin: -6px; }
|
|
|
2659
|
|
|
2660 > trough > fill,
|
|
|
2661 > trough > highlight,
|
|
|
2662 > trough {
|
|
|
2663 border-radius: 5px;
|
|
|
2664 }
|
|
|
2665 }
|
|
|
2666
|
|
|
2667 // the backing bit
|
|
|
2668 > trough {
|
|
|
2669 @extend %scale_trough;
|
|
|
2670 }
|
|
|
2671
|
|
|
2672 // the colored part of the backing bit
|
|
|
2673 > trough > highlight { @extend %scale_highlight; }
|
|
|
2674
|
|
|
2675 // this is another differently styled part of the backing bit, the most relevant use case is for example
|
|
|
2676 // in media player to indicate how much video stream as been cached
|
|
|
2677 > trough > fill {
|
|
|
2678 @extend %scale_trough;
|
|
|
2679
|
|
|
2680
|
|
|
2681 &:disabled {
|
|
|
2682 border-color: transparent;
|
|
|
2683 background-color: transparent;
|
|
|
2684 }
|
|
|
2685
|
|
|
2686 // OSD
|
|
|
2687 .osd & {
|
|
|
2688 background-color: mix($osd_fg_color, $osd_borders_color, 25%);
|
|
|
2689
|
|
|
2690 &:disabled {
|
|
|
2691 border-color: transparent;
|
|
|
2692 background-color: transparent;
|
|
|
2693 }
|
|
|
2694 }
|
|
|
2695 }
|
|
|
2696
|
|
|
2697 > trough > slider {
|
|
|
2698 @include button(normal);
|
|
|
2699 border-width: 1px;
|
|
|
2700 border-style: solid;
|
|
|
2701 border-radius: 100%;
|
|
|
2702 transition: $button_transition;
|
|
|
2703 transition-property: background, border, box-shadow;
|
|
|
2704
|
|
|
2705 &:hover { @include button(hover); }
|
|
|
2706
|
|
|
2707 &:active { border-color: $selected_borders_color; }
|
|
|
2708
|
|
|
2709 &:disabled { @include button(insensitive); }
|
|
|
2710
|
|
|
2711 // ...on selected list rows
|
|
|
2712 row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
|
|
|
2713
|
|
|
2714 // OSD
|
|
|
2715 .osd & {
|
|
|
2716 @include button(osd);
|
|
|
2717 border-color: darken($osd_borders_color, 3%);
|
|
|
2718 background-color: opacify($osd_bg_color, 1); // solid background needed here
|
|
|
2719
|
|
|
2720 &:hover {
|
|
|
2721 @include button(osd-hover);
|
|
|
2722 background-color: opacify($osd_bg_color, 1); // solid background needed here
|
|
|
2723 }
|
|
|
2724
|
|
|
2725 &:active {
|
|
|
2726 @include button(osd-active);
|
|
|
2727 background-color: opacify($osd_bg_color, 1); // solid background needed here
|
|
|
2728 }
|
|
|
2729
|
|
|
2730 &:disabled {
|
|
|
2731 @include button(osd-insensitive);
|
|
|
2732 background-color: opacify($osd_bg_color, 1); // solid background needed here
|
|
|
2733 }
|
|
|
2734 }
|
|
|
2735 }
|
|
|
2736
|
|
|
2737 > value {
|
|
|
2738 color: gtkalpha(currentColor, 0.55);
|
|
|
2739 font-feature-settings: "tnum";
|
|
|
2740 }
|
|
|
2741
|
|
|
2742 &.horizontal {
|
|
|
2743 > marks {
|
|
|
2744 color: gtkalpha(currentColor, 0.55);
|
|
|
2745 &.top { margin-bottom: $_marks_distance; }
|
|
|
2746 &.bottom { margin-top: $_marks_distance; }
|
|
|
2747
|
|
|
2748 indicator {
|
|
|
2749 background-color: currentColor;
|
|
|
2750 min-height: $_marks_length;
|
|
|
2751 min-width: 1px;
|
|
|
2752 }
|
|
|
2753 }
|
|
|
2754
|
|
|
2755 > value.left { margin-right: 9px; }
|
|
|
2756 > value.right { margin-left: 9px; }
|
|
|
2757
|
|
|
2758 &.fine-tune >marks {
|
|
|
2759 &.top { margin-top: 3px; }
|
|
|
2760 &.bottom { margin-bottom: 3px; }
|
|
|
2761
|
|
|
2762 indicator { min-height: ($_marks_length - 3px); }
|
|
|
2763 }
|
|
|
2764 }
|
|
|
2765
|
|
|
2766 &.vertical {
|
|
|
2767 > marks {
|
|
|
2768 color: gtkalpha(currentColor, 0.55);
|
|
|
2769 &.top { margin-right: $_marks_distance; }
|
|
|
2770 &.bottom { margin-left: $_marks_distance; }
|
|
|
2771
|
|
|
2772 indicator {
|
|
|
2773 background-color: currentColor;
|
|
|
2774 min-height: 1px;
|
|
|
2775 min-width: $_marks_length;
|
|
|
2776 }
|
|
|
2777 }
|
|
|
2778
|
|
|
2779 > value.top { margin-bottom: 9px; }
|
|
|
2780 > value.bottom { margin-top: 9px; }
|
|
|
2781
|
|
|
2782 &.fine-tune >marks {
|
|
|
2783 &.top { margin-left: 3px; }
|
|
|
2784 &.bottom { margin-right: 3px; }
|
|
|
2785
|
|
|
2786 indicator { min-height: ($_marks_length - 3px); }
|
|
|
2787 }
|
|
|
2788 }
|
|
|
2789
|
|
|
2790 // *WARNING* scale with marks madness following
|
|
|
2791
|
|
|
2792 // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
|
|
|
2793 $suffix: if($variant == 'light', '', '-dark');
|
|
|
2794
|
|
|
2795 @each $dir_class, $dir_infix in ('horizontal', 'horz'),
|
|
|
2796 ('vertical', 'vert') {
|
|
|
2797 @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
|
|
|
2798 ('scale-has-marks-below', 'marks-after:not(.marks-before)') {
|
|
|
2799 @each $state, $state_infix in ('', ''),
|
|
|
2800 (':hover', '-hover'),
|
|
|
2801 (':active', '-active'),
|
|
|
2802 (':disabled', '-insensitive') {
|
|
|
2803 &.#{$dir_class}.#{$marks_class} {
|
|
|
2804
|
|
|
2805 > trough > slider {
|
|
|
2806 &#{$state} {
|
|
|
2807 // an asymmetric slider asset is used here, so the margins are uneven, the smaller
|
|
|
2808 // margin is set on the point side.
|
|
|
2809 margin: -10px;
|
|
|
2810 $_scale_asset: '#{$assets}/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
|
|
|
2811 border-style: none;
|
|
|
2812 border-radius: 0;
|
|
|
2813
|
|
|
2814 background-color: transparent;
|
|
|
2815 background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
|
|
|
2816
|
|
|
2817 $_scale_slider_bg_pos: bottom;
|
|
|
2818
|
|
|
2819 @if $dir_class == 'horizontal' {
|
|
|
2820 min-height: 26px;
|
|
|
2821 min-width: 22px;
|
|
|
2822
|
|
|
2823 @if $marks_infix == 'scale-has-marks-above' {
|
|
|
2824 margin-top: -14px;
|
|
|
2825
|
|
|
2826 $_scale_slider_bg_pos: top;
|
|
|
2827 }
|
|
|
2828
|
|
|
2829 @else { margin-bottom: -14px; }
|
|
|
2830 }
|
|
|
2831
|
|
|
2832 @else {
|
|
|
2833 min-height: 22px;
|
|
|
2834 min-width: 26px;
|
|
|
2835
|
|
|
2836 @if $marks_infix == 'scale-has-marks-above' {
|
|
|
2837 margin-left: -14px;
|
|
|
2838
|
|
|
2839 $_scale_slider_bg_pos: left bottom;
|
|
|
2840 }
|
|
|
2841
|
|
|
2842 @else {
|
|
|
2843 margin-right: -14px;
|
|
|
2844
|
|
|
2845 $_scale_slider_bg_pos: right bottom;
|
|
|
2846 }
|
|
|
2847 }
|
|
|
2848
|
|
|
2849 background-position: $_scale_slider_bg_pos;
|
|
|
2850 background-repeat: no-repeat;
|
|
|
2851 box-shadow: none;
|
|
|
2852 }
|
|
|
2853 }
|
|
|
2854
|
|
|
2855 &.fine-tune > trough > slider {
|
|
|
2856 @if $dir_class == 'horizontal' {
|
|
|
2857 // bigger negative margins to make the trough grow here as well
|
|
|
2858 margin: -7px -10px;
|
|
|
2859
|
|
|
2860 @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
|
|
|
2861
|
|
|
2862 @else { margin-bottom: -11px; }
|
|
|
2863 }
|
|
|
2864
|
|
|
2865 @else {
|
|
|
2866 margin: -10px -7px;
|
|
|
2867
|
|
|
2868 @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
|
|
|
2869
|
|
|
2870 @else { margin-right: -11px; }
|
|
|
2871 }
|
|
|
2872 }
|
|
|
2873 }
|
|
|
2874 }
|
|
|
2875 }
|
|
|
2876 }
|
|
|
2877
|
|
|
2878 &.color {
|
|
|
2879 min-height: 0;
|
|
|
2880 min-width: 0;
|
|
|
2881
|
|
|
2882 > trough {
|
|
|
2883 background-image: image($borders_color);
|
|
|
2884 background-repeat: no-repeat;
|
|
|
2885 }
|
|
|
2886
|
|
|
2887 &.horizontal {
|
|
|
2888 padding: 0 0 15px 0;
|
|
|
2889
|
|
|
2890 > trough {
|
|
|
2891 padding-bottom: 4px;
|
|
|
2892 background-position: 0 -3px;
|
|
|
2893 border-top-left-radius: 0;
|
|
|
2894 border-top-right-radius: 0;
|
|
|
2895 }
|
|
|
2896
|
|
|
2897 > trough > slider {
|
|
|
2898 &:dir(ltr), &:dir(rtl) { // specificity bump
|
|
|
2899 &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
|
|
2900 margin-bottom: -15px;
|
|
|
2901 margin-top: 6px;
|
|
|
2902 }
|
|
|
2903 }
|
|
|
2904 }
|
|
|
2905 }
|
|
|
2906
|
|
|
2907 &.vertical {
|
|
|
2908 &:dir(ltr) {
|
|
|
2909 padding: 0 0 0 15px;
|
|
|
2910
|
|
|
2911 > trough {
|
|
|
2912 padding-left: 4px;
|
|
|
2913 background-position: 3px 0;
|
|
|
2914 border-bottom-right-radius: 0;
|
|
|
2915 border-top-right-radius: 0;
|
|
|
2916 }
|
|
|
2917
|
|
|
2918 > trough > slider {
|
|
|
2919 &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
|
|
2920 margin-left: -15px;
|
|
|
2921 margin-right: 6px;
|
|
|
2922 }
|
|
|
2923 }
|
|
|
2924 }
|
|
|
2925
|
|
|
2926 &:dir(rtl) {
|
|
|
2927 padding: 0 15px 0 0;
|
|
|
2928
|
|
|
2929 > trough {
|
|
|
2930 padding-right: 4px;
|
|
|
2931 background-position: -3px 0;
|
|
|
2932 border-bottom-left-radius: 0;
|
|
|
2933 border-top-left-radius: 0;
|
|
|
2934 }
|
|
|
2935
|
|
|
2936 > trough > slider {
|
|
|
2937 &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
|
|
2938 margin-right: -15px;
|
|
|
2939 margin-left: 6px;
|
|
|
2940 }
|
|
|
2941 }
|
|
|
2942 }
|
|
|
2943 }
|
|
|
2944
|
|
|
2945 &.fine-tune {
|
|
|
2946 &.horizontal {
|
|
|
2947 &:dir(ltr), &:dir(rtl) { // specificity bump
|
|
|
2948 padding: 0 0 12px 0;
|
|
|
2949
|
|
|
2950 > trough {
|
|
|
2951 padding-bottom: 7px;
|
|
|
2952 background-position: 0 -6px;
|
|
|
2953 }
|
|
|
2954
|
|
|
2955 > trough > slider {
|
|
|
2956 margin-bottom: -15px;
|
|
|
2957 margin-top: 6px;
|
|
|
2958 }
|
|
|
2959 }
|
|
|
2960 }
|
|
|
2961
|
|
|
2962 &.vertical {
|
|
|
2963 &:dir(ltr) {
|
|
|
2964 padding: 0 0 0 12px;
|
|
|
2965
|
|
|
2966 > trough {
|
|
|
2967 padding-left: 7px;
|
|
|
2968 background-position: 6px 0;
|
|
|
2969 }
|
|
|
2970
|
|
|
2971 > trough > slider {
|
|
|
2972 margin-left: -15px;
|
|
|
2973 margin-right: 6px;
|
|
|
2974 }
|
|
|
2975 }
|
|
|
2976
|
|
|
2977 &:dir(rtl) {
|
|
|
2978 padding: 0 12px 0 0;
|
|
|
2979
|
|
|
2980 > trough {
|
|
|
2981 padding-right: 7px;
|
|
|
2982 background-position: -6px 0;
|
|
|
2983 }
|
|
|
2984
|
|
|
2985 > trough > slider {
|
|
|
2986 margin-right: -15px;
|
|
|
2987 margin-left: 6px;
|
|
|
2988 }
|
|
|
2989 }
|
|
|
2990 }
|
|
|
2991 }
|
|
|
2992 }
|
|
|
2993 }
|
|
|
2994
|
|
|
2995
|
|
|
2996 /*****************
|
|
|
2997 * Progress bars *
|
|
|
2998 *****************/
|
|
|
2999 progressbar {
|
|
|
3000 // sizing
|
|
|
3001 &.horizontal {
|
|
|
3002 > trough {
|
|
|
3003 min-width: 150px;
|
|
|
3004 &, > progress { min-height: 2px; }
|
|
|
3005 }
|
|
|
3006 }
|
|
|
3007
|
|
|
3008 &.vertical {
|
|
|
3009 > trough {
|
|
|
3010 min-height: 80px;
|
|
|
3011 &, > progress { min-width: 2px; }
|
|
|
3012 }
|
|
|
3013 }
|
|
|
3014
|
|
|
3015 &.horizontal > trough > progress { margin: 0 -1px; } // the progress node is positioned after the trough border
|
|
|
3016 &.vertical > trough > progress { margin: -1px 0; } // this moves it over it.
|
|
|
3017
|
|
|
3018
|
|
|
3019 // FIXME: insensitive state missing and some other state should be set probably
|
|
|
3020 font-size: smaller;
|
|
|
3021 color: transparentize($fg_color, 0.6);
|
|
|
3022 font-feature-settings: "tnum";
|
|
|
3023
|
|
|
3024 > trough { @extend %scale_trough; }
|
|
|
3025
|
|
|
3026 > trough > progress {
|
|
|
3027 @extend %scale_highlight; /* share most of scales' */
|
|
|
3028 /* override insensitive that is specific to progress */
|
|
|
3029 &:disabled {
|
|
|
3030 background-color: $insensitive_fg_color;
|
|
|
3031 border-color: $insensitive_fg_color;
|
|
|
3032 }
|
|
|
3033
|
|
|
3034 border-radius: 1.5px;
|
|
|
3035 $_progress-radius: 5px;
|
|
|
3036 &.left {
|
|
|
3037 border-top-left-radius: $_progress-radius;
|
|
|
3038 border-bottom-left-radius: $_progress-radius;
|
|
|
3039 }
|
|
|
3040
|
|
|
3041 &.right {
|
|
|
3042 border-top-right-radius: $_progress-radius;
|
|
|
3043 border-bottom-right-radius: $_progress-radius;
|
|
|
3044 }
|
|
|
3045
|
|
|
3046 &.top {
|
|
|
3047 border-top-right-radius: $_progress-radius;
|
|
|
3048 border-top-left-radius: $_progress-radius;
|
|
|
3049 }
|
|
|
3050
|
|
|
3051 &.bottom {
|
|
|
3052 border-bottom-right-radius: $_progress-radius;
|
|
|
3053 border-bottom-left-radius: $_progress-radius;
|
|
|
3054 }
|
|
|
3055 }
|
|
|
3056
|
|
|
3057 &.osd { // progressbar.osd used for epiphany page loading progress
|
|
|
3058 min-width: 3px;
|
|
|
3059 min-height: 3px;
|
|
|
3060 background-color: transparent;
|
|
|
3061
|
|
|
3062 > trough {
|
|
|
3063 border-style: none;
|
|
|
3064 border-radius: 0;
|
|
|
3065 background-color: transparent;
|
|
|
3066 box-shadow: none;
|
|
|
3067
|
|
|
3068 > progress {
|
|
|
3069 border-style: none;
|
|
|
3070 border-radius: 0;
|
|
|
3071 }
|
|
|
3072 }
|
|
|
3073 }
|
|
|
3074
|
|
|
3075 > trough.empty > progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
|
|
|
3076 }
|
|
|
3077
|
|
|
3078 /*************
|
|
|
3079 * Level Bar *
|
|
|
3080 *************/
|
|
|
3081
|
|
|
3082 $_levelbar_size: 9px;
|
|
|
3083 $_levelbar_border_radius: 5px;
|
|
|
3084
|
|
|
3085 levelbar {
|
|
|
3086 &.horizontal {
|
|
|
3087 trough > block {
|
|
|
3088 min-height: $_levelbar_size;
|
|
|
3089 border-radius: $_levelbar_border_radius;
|
|
|
3090
|
|
|
3091 &:dir(rtl) {
|
|
|
3092 border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
|
|
|
3093 }
|
|
|
3094
|
|
|
3095 &:dir(ltr) {
|
|
|
3096 border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
|
|
|
3097 }
|
|
|
3098
|
|
|
3099 &.empty,&.full {
|
|
|
3100 border-radius: $_levelbar_border_radius;
|
|
|
3101 }
|
|
|
3102 }
|
|
|
3103
|
|
|
3104 // segmented level bar
|
|
|
3105 &.discrete {
|
|
|
3106 trough > block {
|
|
|
3107 min-height: 2px;
|
|
|
3108 margin: 1px;
|
|
|
3109 min-width: 24px;
|
|
|
3110 border-radius:0;
|
|
|
3111 &:first-child {border-radius: 2px 0 0 2px;}
|
|
|
3112 &:last-child {
|
|
|
3113 border-radius: 0 2px 2px 0;
|
|
|
3114 }
|
|
|
3115 }
|
|
|
3116 }
|
|
|
3117 }
|
|
|
3118
|
|
|
3119 &.vertical {
|
|
|
3120 trough > block {
|
|
|
3121 min-width: $_levelbar_size;
|
|
|
3122 border-radius: $_levelbar_border_radius;
|
|
|
3123 }
|
|
|
3124
|
|
|
3125 &.discrete > trough > block {
|
|
|
3126 min-width: $_levelbar_size - 7px;
|
|
|
3127 margin: 1px 0;
|
|
|
3128 min-height: 32px;
|
|
|
3129 }
|
|
|
3130 }
|
|
|
3131
|
|
|
3132 > trough {
|
|
|
3133 padding: 0;
|
|
|
3134 }
|
|
|
3135
|
|
|
3136 // level bar colours
|
|
|
3137 > trough > block {
|
|
|
3138 border: 1px solid;
|
|
|
3139
|
|
|
3140 &.low {
|
|
|
3141 border-color: $warning_color;
|
|
|
3142 background-color: $warning_color;
|
|
|
3143 }
|
|
|
3144
|
|
|
3145 &.high,
|
|
|
3146 &:not(.empty) {
|
|
|
3147 border-color: $selected_bg_color;
|
|
|
3148 background-color: $selected_bg_color;
|
|
|
3149 }
|
|
|
3150
|
|
|
3151 &.full {
|
|
|
3152 border-color: $success_color;
|
|
|
3153 background-color: $success_color;
|
|
|
3154 }
|
|
|
3155
|
|
|
3156 &.empty {
|
|
|
3157 background-color: darken($bg_color, 5%);
|
|
|
3158 border-color: darken($bg_color, 5%);
|
|
|
3159 }
|
|
|
3160 }
|
|
|
3161 }
|
|
|
3162
|
|
|
3163
|
|
|
3164 /****************
|
|
|
3165 * Print dialog *
|
|
|
3166 *****************/
|
|
|
3167 window.dialog.print {
|
|
|
3168 drawing {
|
|
|
3169 color: $fg_color;
|
|
|
3170 background: none;
|
|
|
3171 border: none;
|
|
|
3172 padding: 0;
|
|
|
3173
|
|
|
3174 paper {
|
|
|
3175 background: white;
|
|
|
3176 color: #2e3436;
|
|
|
3177 border: 1px solid $borders_color;
|
|
|
3178 }
|
|
|
3179
|
|
|
3180 }
|
|
|
3181
|
|
|
3182 .dialog-action-box { margin: 12px; }
|
|
|
3183 }
|
|
|
3184
|
|
|
3185
|
|
|
3186 /**********
|
|
|
3187 * Frames *
|
|
|
3188 **********/
|
|
|
3189 frame,
|
|
|
3190 .frame {
|
|
|
3191 border: 1px solid $borders_color;
|
|
|
3192 }
|
|
|
3193
|
|
|
3194 frame {
|
|
|
3195 border-radius: $window_radius;
|
|
|
3196
|
|
|
3197 > label {
|
|
|
3198 margin: 4px;
|
|
|
3199 }
|
|
|
3200 }
|
|
|
3201
|
|
|
3202 actionbar > revealer > box {
|
|
|
3203 padding: 6px;
|
|
|
3204 border-top: 1px solid $borders_color;
|
|
|
3205
|
|
|
3206 &, > box.start, > box.end {
|
|
|
3207 border-spacing: 6px;
|
|
|
3208 }
|
|
|
3209 }
|
|
|
3210
|
|
|
3211 scrolledwindow {
|
|
|
3212 // This is used when content is touch-dragged past boundaries.
|
|
|
3213 // draws a box on top of the content, the size changes programmatically.
|
|
|
3214 > overshoot {
|
|
|
3215 &.top {
|
|
|
3216 @include overshoot(top);
|
|
|
3217 }
|
|
|
3218
|
|
|
3219 &.bottom {
|
|
|
3220 @include overshoot(bottom);
|
|
|
3221 }
|
|
|
3222
|
|
|
3223 &.left {
|
|
|
3224 @include overshoot(left);
|
|
|
3225 }
|
|
|
3226
|
|
|
3227 &.right {
|
|
|
3228 @include overshoot(right);
|
|
|
3229 }
|
|
|
3230 }
|
|
|
3231
|
|
|
3232 > junction { // the small square between two scrollbars
|
|
|
3233 // Only color the top-left (or top right in RTL) pixel, to visually connect
|
|
|
3234 // the borders of the two scrollbars.
|
|
|
3235
|
|
|
3236 background: $borders_color,
|
|
|
3237 linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
|
|
|
3238 linear-gradient(to right, transparent 1px, $scrollbar_bg_color 1px);
|
|
|
3239
|
|
|
3240 &:dir(rtl) {
|
|
|
3241 background: $borders_color,
|
|
|
3242 linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
|
|
|
3243 linear-gradient(to left, transparent 1px, $scrollbar_bg_color 1px);
|
|
|
3244 }
|
|
|
3245 }
|
|
|
3246 }
|
|
|
3247
|
|
|
3248 //vbox and hbox separators
|
|
|
3249 separator {
|
|
|
3250 background: lighten($borders_color, 5%);
|
|
|
3251 min-width: 1px;
|
|
|
3252 min-height: 1px;
|
|
|
3253 }
|
|
|
3254
|
|
|
3255
|
|
|
3256 /*********
|
|
|
3257 * Lists *
|
|
|
3258 *********/
|
|
|
3259 listview,
|
|
|
3260 list {
|
|
|
3261 color: $text_color;
|
|
|
3262 background-color: $base_color;
|
|
|
3263 border-color: $borders_color;
|
|
|
3264
|
|
|
3265 &:backdrop {
|
|
|
3266 color: $backdrop_text_color;
|
|
|
3267 background-color: $backdrop_base_color;
|
|
|
3268 border-color: $backdrop_borders_color;
|
|
|
3269 }
|
|
|
3270
|
|
|
3271 > row { padding: 2px; }
|
|
|
3272 > row.expander { padding: 0px; }
|
|
|
3273 > row.expander .row-header { padding: 2px; }
|
|
|
3274
|
|
|
3275 &.horizontal row.separator,
|
|
|
3276 &.separators.horizontal > row:not(.separator) {
|
|
|
3277 border-left: 1px solid $_treeview_borders_color;
|
|
|
3278 }
|
|
|
3279 &:not(.horizontal) row.separator,
|
|
|
3280 &.separators:not(.horizontal) > row:not(.separator) {
|
|
|
3281 border-bottom: 1px solid $_treeview_borders_color;
|
|
|
3282 }
|
|
|
3283 }
|
|
|
3284
|
|
|
3285 row {
|
|
|
3286 @include focus-ring();
|
|
|
3287
|
|
|
3288 &.activatable {
|
|
|
3289 &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
|
|
|
3290
|
|
|
3291 &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
|
|
|
3292
|
|
|
3293 &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
|
|
|
3294
|
|
|
3295 &:selected {
|
|
|
3296 &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
|
|
|
3297
|
|
|
3298 &.has-open-popup,
|
|
|
3299 &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
|
|
|
3300 }
|
|
|
3301 }
|
|
|
3302
|
|
|
3303 &:selected {
|
|
|
3304 outline-color: $alt_focus_border_color;
|
|
|
3305
|
|
|
3306 @extend %selected_items;
|
|
|
3307 }
|
|
|
3308 }
|
|
|
3309
|
|
|
3310 columnview {
|
|
|
3311 // move padding to child cells
|
|
|
3312 > listview > row {
|
|
|
3313 padding: 0;
|
|
|
3314
|
|
|
3315 // align horizontal sizing with header buttons
|
|
|
3316 > cell {
|
|
|
3317 padding: 8px 6px;
|
|
|
3318
|
|
|
3319 &:not(:first-child) {
|
|
|
3320 border-left: 1px solid transparent;
|
|
|
3321 }
|
|
|
3322 }
|
|
|
3323 }
|
|
|
3324
|
|
|
3325 // make column separators visible when :show-column-separators is true
|
|
|
3326 &.column-separators > listview > row > cell {
|
|
|
3327 border-left-color: $_treeview_borders_color;
|
|
|
3328 }
|
|
|
3329
|
|
|
3330 // shrink vertically for .data-table
|
|
|
3331 &.data-table > listview > row > cell {
|
|
|
3332 padding-top: 2px;
|
|
|
3333 padding-bottom: 2px;
|
|
|
3334 }
|
|
|
3335 }
|
|
|
3336
|
|
|
3337 treeexpander {
|
|
|
3338 border-spacing: 4px;
|
|
|
3339 }
|
|
|
3340
|
|
|
3341 /********************************************************
|
|
|
3342 * Data Tables *
|
|
|
3343 * treeview like tables with individual focusable cells *
|
|
|
3344 * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929 *
|
|
|
3345 ********************************************************/
|
|
|
3346
|
|
|
3347 columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
|
|
|
3348 outline: 2px solid $focus_border_color;
|
|
|
3349 }
|
|
|
3350
|
|
|
3351 columnview row:not(:selected) cell editablelabel.editing:focus-within {
|
|
|
3352 outline: 2px solid $selected_bg_color;
|
|
|
3353 }
|
|
|
3354
|
|
|
3355 columnview row:not(:selected) cell editablelabel.editing text selection {
|
|
|
3356 color: $selected_fg_color;
|
|
|
3357 background-color: $selected_bg_color;
|
|
|
3358 }
|
|
|
3359
|
|
|
3360 /*******************************************************
|
|
|
3361 * Rich Lists *
|
|
|
3362 * Large list usually containing lots of widgets *
|
|
|
3363 * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073 *
|
|
|
3364 *******************************************************/
|
|
|
3365
|
|
|
3366
|
|
|
3367 .rich-list { /* rich lists usually containing other widgets than just labels/text */
|
|
|
3368 & > row {
|
|
|
3369 padding: 8px 12px;
|
|
|
3370 min-height: 32px; /* should be tall even when only containing a label */
|
|
|
3371
|
|
|
3372 & > box {
|
|
|
3373 border-spacing: 12px;
|
|
|
3374 }
|
|
|
3375 }
|
|
|
3376 }
|
|
|
3377
|
|
|
3378 /*********************
|
|
|
3379 * App Notifications *
|
|
|
3380 *********************/
|
|
|
3381 .app-notification {
|
|
|
3382 @extend %osd;
|
|
|
3383
|
|
|
3384 padding: 10px;
|
|
|
3385 border-spacing: 10px;
|
|
|
3386 border-radius: 0 0 5px 5px;
|
|
|
3387 background-color: $osd_bg_color;
|
|
|
3388 background-image: linear-gradient(to bottom, transparentize(black, 0.8),
|
|
|
3389 transparent 2px);
|
|
|
3390 background-clip: padding-box;
|
|
|
3391
|
|
|
3392 button { @extend %osd_button; }
|
|
|
3393
|
|
|
3394 border { border: none; }
|
|
|
3395 }
|
|
|
3396
|
|
|
3397
|
|
|
3398 /*************
|
|
|
3399 * Expanders *
|
|
|
3400 *************/
|
|
|
3401 expander {
|
|
|
3402 min-width: 16px;
|
|
|
3403 min-height: 16px;
|
|
|
3404 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
|
3405 &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
|
3406
|
|
|
3407 &:disabled { color: $insensitive_fg_color; }
|
|
|
3408
|
|
|
3409 &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
|
3410 }
|
|
|
3411
|
|
|
3412 expander-widget {
|
|
|
3413 @include focus-ring("> box > title");
|
|
|
3414
|
|
|
3415 > box > title {
|
|
|
3416 transition: $focus_transition;
|
|
|
3417 border-radius: $button_radius;
|
|
|
3418
|
|
|
3419 &:hover > expander {
|
|
|
3420 color: lighten($fg_color,30%); //only lightens the icon
|
|
|
3421 }
|
|
|
3422 }
|
|
|
3423 }
|
|
|
3424
|
|
|
3425 .navigation-sidebar,
|
|
|
3426 placessidebar,
|
|
|
3427 stackswitcher,
|
|
|
3428 expander-widget {
|
|
|
3429 &:not(decoration):not(window):drop(active):focus,
|
|
|
3430 &:not(decoration):not(window):drop(active) {
|
|
|
3431 box-shadow: none;
|
|
|
3432 }
|
|
|
3433 }
|
|
|
3434
|
|
|
3435
|
|
|
3436 /************
|
|
|
3437 * Calendar *
|
|
|
3438 ***********/
|
|
|
3439 calendar {
|
|
|
3440 color: $text_color;
|
|
|
3441 border: 1px solid $borders_color;
|
|
|
3442
|
|
|
3443 > header {
|
|
|
3444 border-bottom: 1px solid $borders_color;
|
|
|
3445
|
|
|
3446 > button {
|
|
|
3447 border: none;
|
|
|
3448 box-shadow: none;
|
|
|
3449 background: none;
|
|
|
3450 border-radius: 0;
|
|
|
3451 }
|
|
|
3452 > button:backdrop {
|
|
|
3453 background: none;
|
|
|
3454 }
|
|
|
3455 }
|
|
|
3456
|
|
|
3457 > grid {
|
|
|
3458 > label.day-name {
|
|
|
3459 }
|
|
|
3460
|
|
|
3461 > label.week-number {
|
|
|
3462 }
|
|
|
3463
|
|
|
3464 > label.today {
|
|
|
3465 box-shadow: inset 0px -2px $borders_color;
|
|
|
3466
|
|
|
3467 &:selected {
|
|
|
3468 box-shadow: none;
|
|
|
3469 }
|
|
|
3470 }
|
|
|
3471
|
|
|
3472 > label:focus {
|
|
|
3473 outline-color: $focus_border_color;
|
|
|
3474 outline-offset: -2px;
|
|
|
3475 outline-width: 2px;
|
|
|
3476 outline-style: solid;
|
|
|
3477 }
|
|
|
3478
|
|
|
3479 > label.day-number {
|
|
|
3480 padding: 4px;
|
|
|
3481
|
|
|
3482 &:selected{
|
|
|
3483 @extend %selected_items;
|
|
|
3484 border-radius: 3px;
|
|
|
3485 }
|
|
|
3486 }
|
|
|
3487
|
|
|
3488 > label.day-number.other-month {
|
|
|
3489 color: gtkalpha(currentColor, 0.3);
|
|
|
3490 }
|
|
|
3491 }
|
|
|
3492
|
|
|
3493 }
|
|
|
3494
|
|
|
3495
|
|
|
3496 /***********
|
|
|
3497 * Dialogs *
|
|
|
3498 ***********/
|
|
|
3499 window.dialog.message { // Message Dialog styling
|
|
|
3500 .titlebar {
|
|
|
3501 min-height: 20px;
|
|
|
3502 background-image: none;
|
|
|
3503 background-color: $bg_color;
|
|
|
3504 border-style: none;
|
|
|
3505 border-top-left-radius: 7px;
|
|
|
3506 border-top-right-radius: 7px;
|
|
|
3507 }
|
|
|
3508
|
|
|
3509 box.dialog-vbox.vertical {
|
|
|
3510 border-spacing: 10px;
|
|
|
3511 }
|
|
|
3512
|
|
|
3513 & label.title {
|
|
|
3514 font-weight: 800;
|
|
|
3515 font-size: 15pt;
|
|
|
3516 }
|
|
|
3517
|
|
|
3518 &.csd { // rounded bottom border styling for csd version
|
|
|
3519 &.background {
|
|
|
3520 // bigger radius for better antialiasing
|
|
|
3521 border-bottom-left-radius: $window_radius+1;
|
|
|
3522 border-bottom-right-radius: $window_radius+1;
|
|
|
3523 }
|
|
|
3524
|
|
|
3525 .dialog-action-area button {
|
|
|
3526 padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
|
|
|
3527 border-radius: 0;
|
|
|
3528 border-left-style: solid;
|
|
|
3529 border-right-style: none;
|
|
|
3530 border-bottom-style: none;
|
|
|
3531
|
|
|
3532 &:first-child{
|
|
|
3533 border-left-style: none;
|
|
|
3534 border-bottom-left-radius: 7px;
|
|
|
3535 }
|
|
|
3536
|
|
|
3537 &:last-child {
|
|
|
3538 border-bottom-right-radius: 7px;
|
|
|
3539 }
|
|
|
3540 }
|
|
|
3541 }
|
|
|
3542 }
|
|
|
3543
|
|
|
3544 filechooser {
|
|
|
3545 .dialog-action-box {
|
|
|
3546 border-top: 1px solid $borders_color;
|
|
|
3547 }
|
|
|
3548
|
|
|
3549 #pathbarbox { border-bottom: 1px solid $bg_color; }
|
|
|
3550 }
|
|
|
3551
|
|
|
3552
|
|
|
3553 filechooserbutton>button>box {
|
|
|
3554 border-spacing: 6px;
|
|
|
3555 }
|
|
|
3556 filechooserbutton:drop(active) {
|
|
|
3557 box-shadow: none;
|
|
|
3558 border-color: transparent;
|
|
|
3559 }
|
|
|
3560
|
|
|
3561
|
|
|
3562 /***********
|
|
|
3563 * Sidebar *
|
|
|
3564 ***********/
|
|
|
3565 .sidebar {
|
|
|
3566 background-color: mix($bg_color, $base_color, 50%);
|
|
|
3567
|
|
|
3568 &:not(separator) {
|
|
|
3569 @at-root %sidebar_left,
|
|
|
3570 &:dir(ltr),
|
|
|
3571 &.left,
|
|
|
3572 &.left:dir(rtl) {
|
|
|
3573 border-right: 1px solid $borders_color;
|
|
|
3574 border-left-style: none;
|
|
|
3575 }
|
|
|
3576
|
|
|
3577 @at-root %sidebar_right,
|
|
|
3578 &:dir(rtl),
|
|
|
3579 &.right {
|
|
|
3580 border-left: 1px solid $borders_color;
|
|
|
3581 border-right-style: none;
|
|
|
3582 }
|
|
|
3583 }
|
|
|
3584
|
|
|
3585 listview.view,
|
|
|
3586 list { background-color: transparent; }
|
|
|
3587
|
|
|
3588 paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
|
|
|
3589 }
|
|
|
3590
|
|
|
3591 stacksidebar {
|
|
|
3592 //not a regular list
|
|
|
3593 list.separators:not(.horizontal) > row:not(.separator) {
|
|
|
3594 border-bottom: none;
|
|
|
3595 }
|
|
|
3596 row {
|
|
|
3597 padding: 10px 4px;
|
|
|
3598 @include focus-ring();
|
|
|
3599
|
|
|
3600 > label {
|
|
|
3601 padding-left: 6px;
|
|
|
3602 padding-right: 6px;
|
|
|
3603 }
|
|
|
3604
|
|
|
3605 &.needs-attention > label {
|
|
|
3606 @extend %needs_attention;
|
|
|
3607 background-size: 6px 6px, 0 0;
|
|
|
3608 }
|
|
|
3609 &:selected {
|
|
|
3610 background-color: $menu_selected_color;
|
|
|
3611 border-radius: $menu_radius;
|
|
|
3612 color: $fg_color;
|
|
|
3613 }
|
|
|
3614 &:selected:hover:dir(ltr), &:selected:hover:dir(rtl) {
|
|
|
3615 background-color: darken($menu_selected_color,5%);
|
|
|
3616 }
|
|
|
3617 &.activatable:active, &.activatable:selected:active {
|
|
|
3618 box-shadow: none; // #3413
|
|
|
3619 }
|
|
|
3620 }
|
|
|
3621 }
|
|
|
3622
|
|
|
3623 separator.sidebar {
|
|
|
3624 background-color: $borders_color;
|
|
|
3625 }
|
|
|
3626
|
|
|
3627
|
|
|
3628 /**********************
|
|
|
3629 * Navigation Sidebar *
|
|
|
3630 **********************/
|
|
|
3631
|
|
|
3632 .navigation-sidebar {
|
|
|
3633 padding: $menu-margin 0; //only vertical padding. horizontal row size would clip
|
|
|
3634
|
|
|
3635 > separator {
|
|
|
3636 margin: $menu-margin;
|
|
|
3637 }
|
|
|
3638
|
|
|
3639 > row {
|
|
|
3640 min-height: 36px;
|
|
|
3641 padding: 0 8px;
|
|
|
3642 border-radius: $menu-margin;
|
|
|
3643 margin: 0 $menu-margin 2px;
|
|
|
3644 @include focus-ring($focus-state: 'focus-visible:focus-within');
|
|
|
3645 &:hover {
|
|
|
3646 background-color: darken($menu_selected_color, 5%);
|
|
|
3647 }
|
|
|
3648
|
|
|
3649 &:selected {
|
|
|
3650 background-color: $menu_selected_color;
|
|
|
3651 color: inherit;
|
|
|
3652
|
|
|
3653 &:hover {
|
|
|
3654 background-color: darken($menu_selected_color,5%);
|
|
|
3655 }
|
|
|
3656
|
|
|
3657 }
|
|
|
3658
|
|
|
3659 &:disabled { color: $insensitive_fg_color; }
|
|
|
3660 }
|
|
|
3661 }
|
|
|
3662
|
|
|
3663
|
|
|
3664 /****************
|
|
|
3665 * File chooser *
|
|
|
3666 ****************/
|
|
|
3667
|
|
|
3668 $_placesidebar_icons_opacity: 0.7;
|
|
|
3669
|
|
|
3670 row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons
|
|
|
3671 // see bug #786613 for details
|
|
|
3672 // on this oddity
|
|
|
3673
|
|
|
3674 /* this should be more generic, only using .navigation-sidebar
|
|
|
3675 https://gitlab.gnome.org/GNOME/gtk/-/issues/2929
|
|
|
3676 */
|
|
|
3677
|
|
|
3678 placessidebar {
|
|
|
3679 .navigation-sidebar > row {
|
|
|
3680 // Needs overriding of the `.navigation-sidebar > row` padding
|
|
|
3681 padding: 0;
|
|
|
3682
|
|
|
3683 // Using margins/padding directly in the SidebarRow
|
|
|
3684 // will make the animation of the new bookmark row jump
|
|
|
3685 > revealer { padding: 0 14px; }
|
|
|
3686
|
|
|
3687 image.sidebar-icon {
|
|
|
3688 &:dir(ltr) { padding-right: 8px; }
|
|
|
3689 &:dir(rtl) { padding-left: 8px; }
|
|
|
3690 }
|
|
|
3691
|
|
|
3692 label.sidebar-label {
|
|
|
3693 &:dir(ltr) { padding-right: 2px; }
|
|
|
3694 &:dir(rtl) { padding-left: 2px; }
|
|
|
3695 }
|
|
|
3696
|
|
|
3697 @at-root button.sidebar-button {
|
|
|
3698 @extend %button_basic_flat;
|
|
|
3699
|
|
|
3700 @extend %button_selected_flat;
|
|
|
3701 min-height: 26px;
|
|
|
3702 min-width: 26px;
|
|
|
3703 margin-top: 3px;
|
|
|
3704 margin-bottom: 3px;
|
|
|
3705 padding: 0;
|
|
|
3706 border-radius: 100%;
|
|
|
3707 }
|
|
|
3708
|
|
|
3709 // in the sidebar case it makes no sense to click the selected row
|
|
|
3710 &:selected:active { box-shadow: none; }
|
|
|
3711
|
|
|
3712 &.sidebar-placeholder-row {
|
|
|
3713 padding: 0 8px;
|
|
|
3714 min-height: 2px;
|
|
|
3715 background-image: image($drop_target_color);
|
|
|
3716 background-clip: content-box;
|
|
|
3717 }
|
|
|
3718
|
|
|
3719 &.sidebar-new-bookmark-row { color: $selected_bg_color; }
|
|
|
3720
|
|
|
3721 &:drop(active):not(:disabled) {
|
|
|
3722 color: $drop_target_color;
|
|
|
3723 box-shadow: inset 0 1px $drop_target_color,
|
|
|
3724 inset 0 -1px $drop_target_color;
|
|
|
3725
|
|
|
3726 &:selected {
|
|
|
3727 color: $selected_fg_color;
|
|
|
3728 background-color: $drop_target_color;
|
|
|
3729 }
|
|
|
3730 }
|
|
|
3731 }
|
|
|
3732 }
|
|
|
3733
|
|
|
3734 placesview {
|
|
|
3735 .server-list-button > image {
|
|
|
3736 transition: 200ms $ease-out-quad;
|
|
|
3737 -gtk-icon-transform: rotate(0turn);
|
|
|
3738 }
|
|
|
3739
|
|
|
3740 .server-list-button:checked > image {
|
|
|
3741 transition: 200ms $ease-out-quad;
|
|
|
3742 -gtk-icon-transform: rotate(-0.5turn);
|
|
|
3743 }
|
|
|
3744
|
|
|
3745 row.activatable:hover { }
|
|
|
3746
|
|
|
3747 > actionbar > revealer > box > box{
|
|
|
3748 border-spacing: 6px;
|
|
|
3749 }
|
|
|
3750 }
|
|
|
3751
|
|
|
3752
|
|
|
3753 /*********
|
|
|
3754 * Paned *
|
|
|
3755 *********/
|
|
|
3756 paned {
|
|
|
3757 > separator {
|
|
|
3758 min-width: 1px;
|
|
|
3759 min-height: 1px;
|
|
|
3760 -gtk-icon-source: none; // defeats the ugly default handle decoration
|
|
|
3761 border-style: none; // just to be sure
|
|
|
3762 background-color: transparent;
|
|
|
3763 // workaround, using background instead of a border since the border will get rendered twice (?)
|
|
|
3764 background-image: image($borders_color);
|
|
|
3765 background-size: 1px 1px;
|
|
|
3766
|
|
|
3767 &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
|
|
|
3768
|
|
|
3769 &.wide {
|
|
|
3770 min-width: 5px;
|
|
|
3771 min-height: 5px;
|
|
|
3772 background-color: $bg_color;
|
|
|
3773 background-image: image($borders_color), image($borders_color);
|
|
|
3774 background-size: 1px 1px, 1px 1px;
|
|
|
3775 }
|
|
|
3776 }
|
|
|
3777
|
|
|
3778 &.horizontal > separator {
|
|
|
3779 background-repeat: repeat-y;
|
|
|
3780
|
|
|
3781 &:dir(ltr) {
|
|
|
3782 margin: 0 -8px 0 0;
|
|
|
3783 padding: 0 8px 0 0;
|
|
|
3784 background-position: left;
|
|
|
3785 }
|
|
|
3786 &:dir(rtl) {
|
|
|
3787 margin: 0 0 0 -8px;
|
|
|
3788 padding: 0 0 0 8px;
|
|
|
3789 background-position: right;
|
|
|
3790 }
|
|
|
3791
|
|
|
3792 &.wide {
|
|
|
3793 margin: 0;
|
|
|
3794 padding: 0;
|
|
|
3795 background-repeat: repeat-y, repeat-y;
|
|
|
3796 background-position: left, right;
|
|
|
3797 }
|
|
|
3798 }
|
|
|
3799
|
|
|
3800 &.vertical > separator {
|
|
|
3801 margin: 0 0 -8px 0;
|
|
|
3802 padding: 0 0 8px 0;
|
|
|
3803 background-repeat: repeat-x;
|
|
|
3804 background-position: top;
|
|
|
3805
|
|
|
3806 &.wide {
|
|
|
3807 margin: 0;
|
|
|
3808 padding: 0;
|
|
|
3809 background-repeat: repeat-x, repeat-x;
|
|
|
3810 background-position: bottom, top;
|
|
|
3811 }
|
|
|
3812 }
|
|
|
3813 }
|
|
|
3814
|
|
|
3815
|
|
|
3816 /**************
|
|
|
3817 * GtkVideo *
|
|
|
3818 **************/
|
|
|
3819
|
|
|
3820 video {
|
|
|
3821 & image.osd {
|
|
|
3822 min-width: 64px;
|
|
|
3823 min-height: 64px;
|
|
|
3824 border-radius: 32px;
|
|
|
3825 }
|
|
|
3826 background: black;
|
|
|
3827 }
|
|
|
3828
|
|
|
3829 /************
|
|
|
3830 * Tooltips *
|
|
|
3831 ************/
|
|
|
3832 tooltip {
|
|
|
3833 &.background {
|
|
|
3834 // background-color needs to be set this way otherwise it gets drawn twice
|
|
|
3835 // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
|
|
|
3836 background-color: transparentize(black, 0.2);
|
|
|
3837 background-clip: padding-box;
|
|
|
3838 border: 1px solid $tooltip_borders_color; // this subtle border is meant to
|
|
|
3839 // not make the tooltip melt with
|
|
|
3840 // very dark backgrounds
|
|
|
3841 color: white;
|
|
|
3842 }
|
|
|
3843
|
|
|
3844 padding: 6px 10px;
|
|
|
3845 border-radius: $window_radius;
|
|
|
3846 box-shadow: none; // otherwise it gets inherited by windowframe.csd
|
|
|
3847
|
|
|
3848 > box {
|
|
|
3849 border-spacing: 6px;
|
|
|
3850 }
|
|
|
3851 }
|
|
|
3852
|
|
|
3853
|
|
|
3854 /*****************
|
|
|
3855 * Color Chooser *
|
|
|
3856 *****************/
|
|
|
3857 colorswatch {
|
|
|
3858 // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
|
|
|
3859 // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
|
|
|
3860 // applied to the overlay box.
|
|
|
3861
|
|
|
3862 transition: $focus_transition;
|
|
|
3863
|
|
|
3864 @include focus-ring($width: 4px, $offset: -2px);
|
|
|
3865
|
|
|
3866 &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
|
|
|
3867
|
|
|
3868 $_colorswatch_radius: 5px;
|
|
|
3869
|
|
|
3870 // base color corners rounding
|
|
|
3871 // to avoid the artifacts caused by rounded corner anti-aliasing the base color
|
|
|
3872 // sports a bigger radius.
|
|
|
3873 // nth-child is needed by the custom color strip.
|
|
|
3874
|
|
|
3875 &.top {
|
|
|
3876 border-top-left-radius: $_colorswatch_radius + 0.5px;
|
|
|
3877 border-top-right-radius: $_colorswatch_radius + 0.5px;
|
|
|
3878
|
|
|
3879 > overlay {
|
|
|
3880 border-top-left-radius: $_colorswatch_radius;
|
|
|
3881 border-top-right-radius: $_colorswatch_radius;
|
|
|
3882 }
|
|
|
3883 }
|
|
|
3884
|
|
|
3885 &.bottom {
|
|
|
3886 border-bottom-left-radius: $_colorswatch_radius + 0.5px;
|
|
|
3887 border-bottom-right-radius: $_colorswatch_radius + 0.5px;
|
|
|
3888
|
|
|
3889 > overlay {
|
|
|
3890 border-bottom-left-radius: $_colorswatch_radius;
|
|
|
3891 border-bottom-right-radius: $_colorswatch_radius;
|
|
|
3892 }
|
|
|
3893 }
|
|
|
3894
|
|
|
3895 &.left,
|
|
|
3896 &:first-child:not(.top) {
|
|
|
3897 border-top-left-radius: $_colorswatch_radius + 0.5px;
|
|
|
3898 border-bottom-left-radius: $_colorswatch_radius + 0.5px;
|
|
|
3899
|
|
|
3900 > overlay {
|
|
|
3901 border-top-left-radius: $_colorswatch_radius;
|
|
|
3902 border-bottom-left-radius: $_colorswatch_radius;
|
|
|
3903 }
|
|
|
3904 }
|
|
|
3905
|
|
|
3906 &.right,
|
|
|
3907 &:last-child:not(.bottom) {
|
|
|
3908 border-top-right-radius: $_colorswatch_radius + 0.5px;
|
|
|
3909 border-bottom-right-radius: $_colorswatch_radius + 0.5px;
|
|
|
3910
|
|
|
3911 > overlay {
|
|
|
3912 border-top-right-radius: $_colorswatch_radius;
|
|
|
3913 border-bottom-right-radius: $_colorswatch_radius;
|
|
|
3914 }
|
|
|
3915 }
|
|
|
3916
|
|
|
3917 &.dark {
|
|
|
3918 > overlay {
|
|
|
3919 color: white;
|
|
|
3920 }
|
|
|
3921
|
|
|
3922 &.activatable:hover > overlay {
|
|
|
3923 border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color);
|
|
|
3924 }
|
|
|
3925 }
|
|
|
3926
|
|
|
3927 &.light {
|
|
|
3928 > overlay {
|
|
|
3929 color: black;
|
|
|
3930 }
|
|
|
3931
|
|
|
3932 &.activatable:hover > overlay {
|
|
|
3933 border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color);
|
|
|
3934 }
|
|
|
3935 }
|
|
|
3936
|
|
|
3937 &:drop(active) {
|
|
|
3938 box-shadow: none;
|
|
|
3939
|
|
|
3940 &.light > overlay {
|
|
|
3941 border-color: $drop_target_color;
|
|
|
3942 box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
|
|
|
3943 inset 0 0 0 1px $drop_target_color;
|
|
|
3944 }
|
|
|
3945
|
|
|
3946 &.dark > overlay {
|
|
|
3947 border-color: $drop_target_color;
|
|
|
3948 box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color),
|
|
|
3949 inset 0 0 0 1px $drop_target_color;
|
|
|
3950 }
|
|
|
3951 }
|
|
|
3952
|
|
|
3953 > overlay {
|
|
|
3954 border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
|
|
3955 }
|
|
|
3956
|
|
|
3957 &.activatable:hover > overlay {
|
|
|
3958 box-shadow: inset 0 1px transparentize(white, 0.6),
|
|
|
3959 inset 0 -1px transparentize(black, 0.8);
|
|
|
3960 }
|
|
|
3961
|
|
|
3962 &#add-color-button {
|
|
|
3963 border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
|
|
|
3964
|
|
|
3965 &:only-child { border-radius: $_colorswatch_radius; }
|
|
|
3966
|
|
|
3967 > overlay {
|
|
|
3968 @include button(normal);
|
|
|
3969 }
|
|
|
3970
|
|
|
3971 &.activatable:hover > overlay {
|
|
|
3972 @include button(hover);
|
|
|
3973 }
|
|
|
3974 }
|
|
|
3975
|
|
|
3976 &:disabled {
|
|
|
3977 opacity: 0.5;
|
|
|
3978
|
|
|
3979 > overlay {
|
|
|
3980 border-color: transparentize(black, 0.4);
|
|
|
3981 box-shadow: none;
|
|
|
3982 }
|
|
|
3983 }
|
|
|
3984
|
|
|
3985 row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
|
|
|
3986
|
|
|
3987 &#editor-color-sample {
|
|
|
3988 border-radius: 4px;
|
|
|
3989
|
|
|
3990 > overlay { border-radius: 4.5px; }
|
|
|
3991 }
|
|
|
3992 }
|
|
|
3993
|
|
|
3994 plane {
|
|
|
3995 transition: $focus_transition;
|
|
|
3996
|
|
|
3997 @include focus-ring($offset: 2px, $outer: true);
|
|
|
3998 }
|
|
|
3999
|
|
|
4000 // colorscale popup
|
|
|
4001 colorchooser .popover.osd { border-radius: 5px; }
|
|
|
4002
|
|
|
4003 /********
|
|
|
4004 * Misc *
|
|
|
4005 ********/
|
|
|
4006 .content-view {
|
|
|
4007 background-color: darken($bg_color,7%);
|
|
|
4008
|
|
|
4009 &:hover { -gtk-icon-filter: brightness(1.2); }
|
|
|
4010
|
|
|
4011 .tile {
|
|
|
4012 margin: 2px;
|
|
|
4013 background-color: if($variant=='light', transparent, black);
|
|
|
4014 border-radius: 0;
|
|
|
4015 padding: 0;
|
|
|
4016
|
|
|
4017 &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
|
|
|
4018 &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); }
|
|
|
4019 }
|
|
|
4020
|
|
|
4021 > rubberband { @extend rubberband; }
|
|
|
4022
|
|
|
4023 }
|
|
|
4024
|
|
|
4025 .scale-popup {
|
|
|
4026 .osd & { @extend %osd; }
|
|
|
4027
|
|
|
4028 .osd & button.flat { //FIXME: quick hack, redo properly
|
|
|
4029 border-style: none;
|
|
|
4030 border-radius: 5px;
|
|
|
4031 }
|
|
|
4032
|
|
|
4033 button { // +/- buttons on GtkVolumeButton popup
|
|
|
4034 &:hover {
|
|
|
4035 @extend %undecorated_button;
|
|
|
4036 background-color: transparentize($fg_color,0.9);
|
|
|
4037 border-radius: 5px;
|
|
|
4038 }
|
|
|
4039 }
|
|
|
4040 }
|
|
|
4041
|
|
|
4042
|
|
|
4043 /**********************
|
|
|
4044 * Window Decorations *
|
|
|
4045 *********************/
|
|
|
4046 window {
|
|
|
4047 // lamefun trick to get rounded borders regardless of CSD use
|
|
|
4048 border-width: 0px;
|
|
|
4049
|
|
|
4050 // this needs to be transparent
|
|
|
4051 // see bug #722563
|
|
|
4052 $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
|
|
|
4053 $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize(black, 0.25));
|
|
|
4054
|
|
|
4055 &.csd {
|
|
|
4056 box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
|
|
|
4057 0 0 0 1px $_wm_border; //doing borders with box-shadow
|
|
|
4058 margin: 0px;
|
|
|
4059 border-radius: $window_radius $window_radius 0 0;
|
|
|
4060 &:backdrop {
|
|
|
4061 // the transparent shadow here is to enforce that the shadow extents don't
|
|
|
4062 // change when we go to backdrop, to prevent jumping windows.
|
|
|
4063 // The biggest shadow should be in the same order then in the active state
|
|
|
4064 // or the jumping will happen during the transition.
|
|
|
4065 box-shadow: 0 3px 9px 1px transparent,
|
|
|
4066 0 2px 6px 2px transparentize(black, 0.8),
|
|
|
4067 0 0 0 1px $_wm_border_backdrop;
|
|
|
4068 transition: $backdrop_transition;
|
|
|
4069 }
|
|
|
4070
|
|
|
4071 &.popup {
|
|
|
4072 border-radius: $menu_radius;
|
|
|
4073 box-shadow: 0 1px 2px transparentize(black, 0.8),
|
|
|
4074 0 0 0 1px transparentize($_wm_border, 0.1);
|
|
|
4075 }
|
|
|
4076
|
|
|
4077 &.dialog.message {
|
|
|
4078 border-radius: $window_radius;
|
|
|
4079 box-shadow: 0 1px 2px transparentize(black, 0.8),
|
|
|
4080 0 0 0 1px transparentize($_wm_border, 0.1);
|
|
|
4081 }
|
|
|
4082 }
|
|
|
4083
|
|
|
4084 &.solid-csd {
|
|
|
4085 margin: 0;
|
|
|
4086 padding: 4px;
|
|
|
4087 border: solid 1px $borders_color;
|
|
|
4088 border-radius: 0;
|
|
|
4089 box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $headerbar_bg_color, inset 0 1px $top_hilight;
|
|
|
4090
|
|
|
4091 &:backdrop { box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; }
|
|
|
4092 }
|
|
|
4093
|
|
|
4094 &.maximized,
|
|
|
4095 &.fullscreen { border-radius: 0; box-shadow: none; }
|
|
|
4096
|
|
|
4097 &.tiled,
|
|
|
4098 &.tiled-top,
|
|
|
4099 &.tiled-left,
|
|
|
4100 &.tiled-right,
|
|
|
4101 &.tiled-bottom {
|
|
|
4102 border-radius: 0;
|
|
|
4103 box-shadow: 0 0 0 1px $_wm_border_backdrop,
|
|
|
4104 0 0 0 20px transparent; //transparent control workaround -- #3670
|
|
|
4105 }
|
|
|
4106 &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop,
|
|
|
4107 0 0 0 20px transparent; // #3670
|
|
|
4108 }
|
|
|
4109
|
|
|
4110 &.popup { box-shadow: none; }
|
|
|
4111
|
|
|
4112 // server-side decorations as used by mutter
|
|
|
4113 &.ssd { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows
|
|
|
4114
|
|
|
4115 }
|
|
|
4116
|
|
|
4117 tooltip.csd {
|
|
|
4118 border-radius: 5px;
|
|
|
4119 box-shadow: none;
|
|
|
4120 }
|
|
|
4121
|
|
|
4122 // catch all extend :)
|
|
|
4123
|
|
|
4124 %selected_items {
|
|
|
4125 background-color: $selected_bg_color;
|
|
|
4126
|
|
|
4127 @at-root %nobg_selected_items, & {
|
|
|
4128 color: $selected_fg_color;
|
|
|
4129
|
|
|
4130 @at-root %selected_items_disabled,
|
|
|
4131 &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
|
|
4132
|
|
|
4133 }
|
|
|
4134 }
|
|
|
4135
|
|
|
4136 .monospace { font-family: monospace; }
|
|
|
4137
|
|
|
4138
|
|
|
4139 /**********************
|
|
|
4140 * Touch Copy & Paste *
|
|
|
4141 *********************/
|
|
|
4142 //touch selection handlebars for the Popover.osd above
|
|
|
4143 cursor-handle {
|
|
|
4144 background-color: transparent;
|
|
|
4145 background-image: none;
|
|
|
4146 box-shadow: none;
|
|
|
4147 border-style: none;
|
|
|
4148 min-width: 20px;
|
|
|
4149 min-height: 24px;
|
|
|
4150 padding-left: 20px;
|
|
|
4151 padding-right: 20px;
|
|
|
4152 padding-top: 24px;
|
|
|
4153 padding-bottom: 24px;
|
|
|
4154
|
|
|
4155 @each $s,$as in ('',''),
|
|
|
4156 (':hover','-hover'),
|
|
|
4157 (':active','-active') { //no need for insensitive and backdrop
|
|
|
4158 &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
|
|
|
4159 $_url: '#{$assets}/text-select-start#{$as}#{$asset_suffix}';
|
|
|
4160 -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
|
|
|
4161 url('#{$_url}@2.png'));
|
|
|
4162 }
|
|
|
4163
|
|
|
4164 &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
|
|
|
4165 $_url: '#{$assets}/text-select-end#{$as}#{$asset_suffix}';
|
|
|
4166 -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
|
|
|
4167 url('#{$_url}@2.png'));
|
|
|
4168 }
|
|
|
4169
|
|
|
4170 &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
|
|
|
4171 $_url: '#{$assets}/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
|
|
|
4172 -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
|
|
|
4173 url('#{$_url}@2.png'));
|
|
|
4174 }
|
|
|
4175 }
|
|
|
4176 }
|
|
|
4177
|
|
|
4178 shortcuts-section {
|
|
|
4179 margin: 20px;
|
|
|
4180 }
|
|
|
4181
|
|
|
4182 .shortcuts-search-results {
|
|
|
4183 margin: 20px;
|
|
|
4184 border-spacing: 24px;
|
|
|
4185 }
|
|
|
4186
|
|
|
4187 // shortcut window keys
|
|
|
4188 shortcut {
|
|
|
4189 border-spacing: 6px;
|
|
|
4190 }
|
|
|
4191
|
|
|
4192 shortcut > .keycap {
|
|
|
4193 min-width: 20px;
|
|
|
4194 min-height: 25px;
|
|
|
4195 margin-top: 2px;
|
|
|
4196 padding-bottom: 3px;
|
|
|
4197 padding-left: 6px;
|
|
|
4198 padding-right: 6px;
|
|
|
4199
|
|
|
4200 color: $fg_color;
|
|
|
4201 background-color: $base_color;
|
|
|
4202 border: 1px solid;
|
|
|
4203 border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color);
|
|
|
4204 border-radius: 5px;
|
|
|
4205 box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%));
|
|
|
4206 font-size: smaller;
|
|
|
4207
|
|
|
4208 }
|
|
|
4209
|
|
|
4210 :not(decoration):not(window):drop(active):focus,
|
|
|
4211 :not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
|
|
|
4212 border-color: $drop_target_color;
|
|
|
4213 box-shadow: inset 0 0 0 1px $drop_target_color;
|
|
|
4214 caret-color: $drop_target_color;
|
|
|
4215 }
|
|
|
4216
|
|
|
4217 stackswitcher > button.text-button { min-width: 100px; } // FIXME aggregate with buttons
|
|
|
4218
|
|
|
4219 stackswitcher.circular {
|
|
|
4220 border-spacing: 12px;
|
|
|
4221
|
|
|
4222 // FIXME aggregate with buttons
|
|
|
4223 > button.circular,
|
|
|
4224 > button.text-button.circular {
|
|
|
4225 min-width: 32px;
|
|
|
4226 min-height: 32px;
|
|
|
4227 padding: 0;
|
|
|
4228 }
|
|
|
4229 }
|
|
|
4230 /*************
|
|
|
4231 * App Icons *
|
|
|
4232 *************/
|
|
|
4233 /* Outline for low res icons */
|
|
|
4234 .lowres-icon {
|
|
|
4235 -gtk-icon-shadow: 0 -1px rgba(0,0,0,0.05),
|
|
|
4236 1px 0 rgba(0,0,0,0.1),
|
|
|
4237 0 1px rgba(0,0,0,0.3),
|
|
|
4238 -1px 0 rgba(0,0,0,0.1);
|
|
|
4239 }
|
|
|
4240
|
|
|
4241 /* Drapshadow for large icons */
|
|
|
4242 .icon-dropshadow {
|
|
|
4243 -gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
|
|
|
4244 0 -1px rgba(0,0,0,0.05),
|
|
|
4245 1px 0 rgba(0,0,0,0.1),
|
|
|
4246 0 1px rgba(0,0,0,0.3),
|
|
|
4247 -1px 0 rgba(0,0,0,0.1);
|
|
|
4248 }
|
|
|
4249
|
|
|
4250 /*********
|
|
|
4251 * Emoji *
|
|
|
4252 ********/
|
|
|
4253
|
|
|
4254 popover.emoji-picker > contents {
|
|
|
4255 padding: 0;
|
|
|
4256 }
|
|
|
4257
|
|
|
4258 .emoji-searchbar {
|
|
|
4259 padding: 6px;
|
|
|
4260 border-spacing: 6px;
|
|
|
4261 border-bottom: 1px solid $borders_color;
|
|
|
4262 }
|
|
|
4263
|
|
|
4264 .emoji-toolbar {
|
|
|
4265 padding: 6px;
|
|
|
4266 border-spacing: 6px;
|
|
|
4267 border-top: 1px solid $borders_color;
|
|
|
4268 }
|
|
|
4269
|
|
|
4270 button.emoji-section {
|
|
|
4271 border-color: transparent;
|
|
|
4272 border-width: 3px;
|
|
|
4273 border-style: none none solid;
|
|
|
4274 border-radius: 0;
|
|
|
4275
|
|
|
4276 padding: 3px 0 0;
|
|
|
4277 min-width: 32px;
|
|
|
4278 min-height: 28px;
|
|
|
4279
|
|
|
4280 /* reset props inherited from the button style */
|
|
|
4281 background: none;
|
|
|
4282 box-shadow: none;
|
|
|
4283 text-shadow: none;
|
|
|
4284
|
|
|
4285 &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
|
|
|
4286 &:checked { border-color: $selected_bg_color; }
|
|
|
4287 }
|
|
|
4288
|
|
|
4289 popover.emoji-picker emoji {
|
|
|
4290 font-size: x-large;
|
|
|
4291 padding: 6px;
|
|
|
4292 border-radius: 6px;
|
|
|
4293
|
|
|
4294 &:focus,
|
|
|
4295 &:hover {
|
|
|
4296 background: $selected_bg_color;
|
|
|
4297 }
|
|
|
4298 }
|
|
|
4299
|
|
|
4300 emoji-completion-row > box {
|
|
|
4301 border-spacing: 10px;
|
|
|
4302 padding: 2px 10px;
|
|
|
4303 }
|
|
|
4304
|
|
|
4305 emoji-completion-row:focus,
|
|
|
4306 emoji-completion-row:hover {
|
|
|
4307 background-color: $selected_bg_color;
|
|
|
4308 color: $selected_fg_color;
|
|
|
4309 }
|
|
|
4310
|
|
|
4311 emoji-completion-row emoji:focus,
|
|
|
4312 emoji-completion-row emoji:hover {
|
|
|
4313 background-color: $menu_selected_color;
|
|
|
4314 }
|
|
|
4315
|
|
|
4316 popover.entry-completion > contents {
|
|
|
4317 padding: 0;
|
|
|
4318 }
|
|
|
4319
|
|
|
4320 statusbar {
|
|
|
4321 padding: 6px 10px 6px 10px;
|
|
|
4322 }
|
|
|
4323
|
|
|
4324 menubutton {
|
|
|
4325 > button > box {
|
|
|
4326 border-spacing: 6px;
|
|
|
4327 }
|
|
|
4328
|
|
|
4329 arrow {
|
|
|
4330 min-height: 16px;
|
|
|
4331 min-width: 16px;
|
|
|
4332 &.none {
|
|
|
4333 -gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
|
|
|
4334 }
|
|
|
4335 &.down {
|
|
|
4336 -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
|
4337 }
|
|
|
4338 &.up {
|
|
|
4339 -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
|
|
4340 }
|
|
|
4341 &.left {
|
|
|
4342 -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
|
|
|
4343 }
|
|
|
4344 &.right {
|
|
|
4345 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
|
4346 }
|
|
|
4347 }
|
|
|
4348 }
|
