|
0
|
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
|
|
|
7 * {
|
|
|
8 padding: 0;
|
|
|
9 -GtkToolButton-icon-spacing: 4;
|
|
|
10 -GtkTextView-error-underline-color: $error_color;
|
|
|
11
|
|
|
12 -GtkCheckButton-indicator-size: 16;
|
|
|
13 -GtkCheckMenuItem-indicator-size: 16;
|
|
|
14
|
|
|
15 // The size for scrollbars. The slider is 2px smaller, but we keep it
|
|
|
16 // up so that the whole area is sensitive to button presses for the
|
|
|
17 // slider. The stepper button is larger in both directions, the slider
|
|
|
18 // only in the width
|
|
|
19
|
|
|
20 -GtkScrolledWindow-scrollbar-spacing: 0;
|
|
|
21 -GtkScrolledWindow-scrollbars-within-bevel: 1;
|
|
|
22
|
|
|
23 -GtkToolItemGroup-expander-size: 11;
|
|
|
24 -GtkExpander-expander-size: 16;
|
|
|
25 -GtkTreeView-expander-size: 11;
|
|
|
26
|
|
|
27 -GtkTreeView-horizontal-separator: 4;
|
|
|
28
|
|
|
29 -GtkMenu-horizontal-padding: 0;
|
|
|
30 -GtkMenu-vertical-padding: 0;
|
|
|
31
|
|
|
32 -GtkWidget-link-color: $link_color;
|
|
|
33 -GtkWidget-visited-link-color: $link_visited_color;
|
|
|
34
|
|
|
35 -GtkWidget-focus-padding: 2; // FIXME: do we still need these?
|
|
|
36 -GtkWidget-focus-line-width: 1; //
|
|
|
37
|
|
|
38 -GtkWidget-text-handle-width: 20;
|
|
|
39 -GtkWidget-text-handle-height: 20;
|
|
|
40
|
|
|
41 -GtkDialog-button-spacing: 4;
|
|
|
42 -GtkDialog-action-area-border: 0;
|
|
|
43
|
|
|
44 -GtkStatusbar-shadow-type: none;
|
|
|
45
|
|
|
46 // We use the outline properties to signal the focus properties
|
|
|
47 // to the adwaita engine: using real CSS properties is faster,
|
|
|
48 // and we don't use any outlines for now.
|
|
|
49
|
|
|
50 outline-color: transparentize($fg_color, 0.7);
|
|
|
51 outline-style: dashed;
|
|
|
52 outline-offset: -3px;
|
|
|
53 outline-width: 1px;
|
|
|
54 outline-radius: 2px;
|
|
|
55 }
|
|
|
56
|
|
|
57
|
|
|
58 /***************
|
|
|
59 * Base States *
|
|
|
60 ***************/
|
|
|
61
|
|
|
62 .background {
|
|
|
63 color: $fg_color;
|
|
|
64 background-color: if($variant == 'light', darken($bg_color, 1.5%), $bg_color);
|
|
|
65
|
|
|
66 &:backdrop {
|
|
|
67 text-shadow: none;
|
|
|
68 icon-shadow: none;
|
|
|
69 color: $backdrop_fg_color;
|
|
|
70 background-color: $backdrop_bg_color;
|
|
|
71 }
|
|
|
72 }
|
|
|
73
|
|
|
74 /*
|
|
|
75 These wildcard seems unavoidable, need to investigate.
|
|
|
76 Wildcards are bad and troublesome, use them with care,
|
|
|
77 or better, just don't.
|
|
|
78 Everytime a wildcard is used a kitten dies, painfully.
|
|
|
79 */
|
|
|
80
|
|
|
81 *:insensitive {
|
|
|
82 -gtk-image-effect: dim;
|
|
|
83 }
|
|
|
84
|
|
|
85 .gtkstyle-fallback {
|
|
|
86 background-color: $bg_color;
|
|
|
87 color: $fg_color;
|
|
|
88 &:prelight {
|
|
|
89 background-color: lighten($bg_color, 10%);
|
|
|
90 color: $fg_color;
|
|
|
91 }
|
|
|
92 &:active {
|
|
|
93 background-color: darken($bg_color, 10%);
|
|
|
94 color: $fg_color;
|
|
|
95 }
|
|
|
96 &:insensitive {
|
|
|
97 background-color: $insensitive_bg_color;
|
|
|
98 color: $insensitive_fg_color;
|
|
|
99 }
|
|
|
100 &:selected {
|
|
|
101 background-color: $selected_bg_color;
|
|
|
102 color: $selected_fg_color;
|
|
|
103 }
|
|
|
104 }
|
|
|
105
|
|
|
106 .view {
|
|
|
107 color: $text_color;
|
|
|
108 background-color: $base_color;
|
|
|
109
|
|
|
110 &:backdrop {
|
|
|
111 color: $backdrop_text_color;
|
|
|
112 background-color: $backdrop_base_color;
|
|
|
113 }
|
|
|
114
|
|
|
115 &:selected {
|
|
|
116 border-radius: 3px;
|
|
|
117 @extend %selected_items;
|
|
|
118 }
|
|
|
119 }
|
|
|
120
|
|
|
121 .rubberband {
|
|
|
122 border: 1px solid $selected_bg_color;
|
|
|
123 background-color: transparentize($selected_bg_color,0.8);
|
|
|
124 }
|
|
|
125
|
|
|
126 .label {
|
|
|
127 &.separator {
|
|
|
128 color: $fg_color;
|
|
|
129 @extend .dim-label;
|
|
|
130 &:backdrop { color: $backdrop_fg_color; }
|
|
|
131 }
|
|
|
132 &:selected,
|
|
|
133 &:selected:focus,
|
|
|
134 &:selected:hover {
|
|
|
135 @extend %selected_items;
|
|
|
136 }
|
|
|
137 &:insensitive {
|
|
|
138 color: $insensitive_fg_color;
|
|
|
139 &:backdrop { color: $backdrop_insensitive_color; }
|
|
|
140 }
|
|
|
141 }
|
|
|
142
|
|
|
143 .dim-label {
|
|
|
144 opacity: 0.55;
|
|
|
145 text-shadow: none;
|
|
|
146 }
|
|
|
147
|
|
|
148 GtkAssistant {
|
|
|
149 .sidebar {
|
|
|
150 background-color: $base_color;
|
|
|
151 border-top: 1px solid $borders_color;
|
|
|
152 &:dir(ltr) { border-right: 1px solid $borders_color; }
|
|
|
153 &:dir(rtl) { border-left: 1px solid $borders_color; }
|
|
|
154 &:backdrop {
|
|
|
155 background-color: $backdrop_base_color;
|
|
|
156 border-color: $backdrop_borders_color;
|
|
|
157 }
|
|
|
158 }
|
|
|
159 &.csd .sidebar { border-top-style: none; }
|
|
|
160 .sidebar .label {
|
|
|
161 padding: 6px 12px;
|
|
|
162 }
|
|
|
163 .sidebar .label.highlight {
|
|
|
164 background-color: mix($bg_color, $fg_color, 80%);
|
|
|
165 }
|
|
|
166 }
|
|
|
167
|
|
|
168 GtkTextView { // This will get overridden by .view, needed by gedit line numbers
|
|
|
169 background-color: mix($bg_color, $base_color, 50%);
|
|
|
170 &:backdrop { background-color: mix($backdrop_bg_color,
|
|
|
171 $backdrop_base_color, 50%); }
|
|
|
172 }
|
|
|
173
|
|
|
174 .grid-child {
|
|
|
175 padding: 3px;
|
|
|
176 border-radius: 3px;
|
|
|
177 &:selected {
|
|
|
178 @extend %selected_items;
|
|
|
179 outline-offset: -2px;
|
|
|
180 }
|
|
|
181 }
|
|
|
182
|
|
|
183 %osd, .osd {
|
|
|
184 color: $osd_fg_color;
|
|
|
185 border: none;
|
|
|
186 background-color: $osd_bg_color;
|
|
|
187 background-clip: padding-box;
|
|
|
188 outline-color: transparentize($osd_fg_color, 0.7);
|
|
|
189 box-shadow: none;
|
|
|
190 text-shadow: 0 1px black;
|
|
|
191 icon-shadow: 0 1px black;
|
|
|
192 &:backdrop { text-shadow: none; }
|
|
|
193 }
|
|
|
194
|
|
|
195 /*********************
|
|
|
196 * Spinner Animation *
|
|
|
197 *********************/
|
|
|
198
|
|
|
199 @keyframes spin {
|
|
|
200 to { -gtk-icon-transform: rotate(1turn); }
|
|
|
201 }
|
|
|
202
|
|
|
203 .spinner {
|
|
|
204 background-image: none;
|
|
|
205 background-color: blue;
|
|
|
206 opacity: 0; // non spinning spinner makes no sense
|
|
|
207 -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
|
|
|
208 &:active {
|
|
|
209 opacity: 1;
|
|
|
210 animation: spin 1s linear infinite;
|
|
|
211 &:insensitive {
|
|
|
212 opacity: 0.5;
|
|
|
213 }
|
|
|
214 }
|
|
|
215 }
|
|
|
216
|
|
|
217 /****************
|
|
|
218 * Text Entries *
|
|
|
219 ****************/
|
|
|
220
|
|
|
221 .entry {
|
|
|
222 border: 1px solid;
|
|
|
223 padding: 5px 8px 6px;
|
|
|
224
|
|
|
225 &.image { // icons inside the entry
|
|
|
226 &.left { padding-left: 0; }
|
|
|
227 &.right { padding-right: 0; }
|
|
|
228 }
|
|
|
229
|
|
|
230 border-radius: 3px;
|
|
|
231 transition: all 200ms $ease-out-quad;
|
|
|
232 @include entry(normal);
|
|
|
233
|
|
|
234 &.flat, &.flat:focus {
|
|
|
235 padding: 2px;
|
|
|
236 @include entry(normal, $edge:none);
|
|
|
237 border: none;
|
|
|
238 border-radius: 0;
|
|
|
239 }
|
|
|
240
|
|
|
241 &:focus { @include entry(focus); }
|
|
|
242 &:insensitive { @include entry(insensitive); }
|
|
|
243 &:backdrop { @include entry(backdrop); }
|
|
|
244 &:backdrop:insensitive { @include entry(backdrop-insensitive); }
|
|
|
245
|
|
|
246 &:selected,
|
|
|
247 &:selected:focus {
|
|
|
248 @extend %selected_items;
|
|
|
249 }
|
|
|
250
|
|
|
251 &.progressbar {
|
|
|
252 margin: 1px;
|
|
|
253 border-radius: 0;
|
|
|
254 border-width: 0 0 2px;
|
|
|
255 border-color: $selected_bg_color;
|
|
|
256 border-style: solid;
|
|
|
257 background-image: none;
|
|
|
258 background-color: transparent;
|
|
|
259 box-shadow: none;
|
|
|
260 &:backdrop { background-color: transparent; }
|
|
|
261 }
|
|
|
262
|
|
|
263 .linked > & { //FIXME: use same buttons linking logic and template
|
|
|
264 border-radius: 0;
|
|
|
265 &:first-child {
|
|
|
266 border-top-left-radius: 3px;
|
|
|
267 border-bottom-left-radius: 3px;
|
|
|
268 &:dir(rtl) { border-right-style: none;}
|
|
|
269 }
|
|
|
270 &:last-child {
|
|
|
271 border-top-right-radius: 3px;
|
|
|
272 border-bottom-right-radius: 3px;
|
|
|
273 border-left-style: none;
|
|
|
274 &:dir(rtl) { border-left-style: solid; }
|
|
|
275 }
|
|
|
276 }
|
|
|
277
|
|
|
278 &.error { // FIXME: dark variant love needed
|
|
|
279 color: $error_color;
|
|
|
280 border-color: $error_color;
|
|
|
281 &:focus { @include entry(focus, $error_color); }
|
|
|
282 &:selected, &:selected:focus {
|
|
|
283 background-color: $error_color;
|
|
|
284 }
|
|
|
285 }
|
|
|
286
|
|
|
287 &.warning { // FIXME: dark variant love needed
|
|
|
288 color: $warning_color;
|
|
|
289 border-color: $warning_color;
|
|
|
290 &:focus { @include entry(focus, $warning_color); }
|
|
|
291 &:selected, &:selected:focus {
|
|
|
292 background-color: $warning_color;
|
|
|
293 }
|
|
|
294 }
|
|
|
295
|
|
|
296 &.image { // entry icons colors
|
|
|
297 color: mix($fg_color, $base_color, 80%);
|
|
|
298 &:hover { color: $fg_color; }
|
|
|
299 &:active { color: $selected_bg_color; }
|
|
|
300 &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
|
|
|
301 }
|
|
|
302
|
|
|
303 .linked.vertical > & { //FIXME comment stuff and make the whole thing smarter.
|
|
|
304 @include entry(normal, $edge: none);
|
|
|
305 background-image: linear-gradient(to bottom, $base_color);
|
|
|
306 border-bottom-color: mix($borders_color, $base_color, 30%);
|
|
|
307 box-shadow: none;
|
|
|
308 @extend %linked_vertical;
|
|
|
309 &:focus {
|
|
|
310 border-color: entry_focus_border($selected_bg_color);
|
|
|
311 box-shadow: entry_focus_glow($selected_bg_color),
|
|
|
312 0 -1px 0 0 entry_focus_border($selected_bg_color);
|
|
|
313 @extend %linked_vertical;
|
|
|
314 }
|
|
|
315 &:insensitive {
|
|
|
316 @include entry(insensitive, $edge: none);
|
|
|
317 border-bottom-color: mix($borders_color, $base_color, 30%);
|
|
|
318 @extend %linked_vertical;
|
|
|
319 &:backdrop {
|
|
|
320 @include entry(backdrop-insensitive, $edge: none);
|
|
|
321 border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
|
322 @extend %linked_vertical;
|
|
|
323 }
|
|
|
324 }
|
|
|
325 &:backdrop {
|
|
|
326 @include entry(backdrop, $edge: none);
|
|
|
327 border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
|
328 @extend %linked_vertical;
|
|
|
329 }
|
|
|
330 &:first-child {
|
|
|
331 @include entry(normal, $edge: none);
|
|
|
332 border-bottom-color: mix($borders_color, $base_color, 30%);
|
|
|
333 &:focus { @include entry(focus, $edge: none); }
|
|
|
334 &:insensitive {
|
|
|
335 @include entry(insensitive, $edge: none);
|
|
|
336 border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
|
337 @extend %linked_vertical:first-child;
|
|
|
338 &:backdrop {
|
|
|
339 @include entry(backdrop-insensitive, $edge: none);
|
|
|
340 border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
|
341 border-top-style: solid;
|
|
|
342 }
|
|
|
343 }
|
|
|
344 &:backdrop {
|
|
|
345 @include entry(backdrop, $edge: none);
|
|
|
346 border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
|
347 @extend %linked_vertical:first-child;
|
|
|
348 }
|
|
|
349 }
|
|
|
350 &:last-child {
|
|
|
351 @include entry(normal);
|
|
|
352 background-image: linear-gradient(to bottom, $base_color);
|
|
|
353 box-shadow: _widget_edge();
|
|
|
354 &:focus {
|
|
|
355 border-color: entry_focus_border($selected_bg_color);
|
|
|
356 box-shadow: entry_focus_glow($selected_bg_color),
|
|
|
357 0 -1px 0 0 entry_focus_border($selected_bg_color),
|
|
|
358 _widget_edge();
|
|
|
359 @extend %linked_vertical:last-child;
|
|
|
360 }
|
|
|
361 &:insensitive {
|
|
|
362 @include entry(insensitive);
|
|
|
363 @extend %linked_vertical:last-child;
|
|
|
364 &:backdrop {
|
|
|
365 @include entry(backdrop-insensitive);
|
|
|
366 @extend %linked_vertical:last-child;
|
|
|
367 }
|
|
|
368 }
|
|
|
369 &:backdrop {
|
|
|
370 @include entry(backdrop);
|
|
|
371 @extend %linked_vertical:last-child;
|
|
|
372 }
|
|
|
373 }
|
|
|
374 }
|
|
|
375 .osd & {
|
|
|
376 @include entry(osd);
|
|
|
377 &:focus { @include entry(osd-focus); }
|
|
|
378 &:backdrop { @include entry(osd-backdrop); }
|
|
|
379 &:insensitive { @include entry(osd-insensitive); }
|
|
|
380 }
|
|
|
381 }
|
|
|
382
|
|
|
383 /***********
|
|
|
384 * Buttons *
|
|
|
385 ***********/
|
|
|
386
|
|
|
387 // stuff for .needs-attention
|
|
|
388 $_dot_color: if($variant=='light', $selected_bg_color,
|
|
|
389 lighten($selected_bg_color,15%));
|
|
|
390 @keyframes needs_attention {
|
|
|
391 from {
|
|
|
392 background-image: -gtk-gradient(radial,
|
|
|
393 center center, 0,
|
|
|
394 center center, 0.01,
|
|
|
395 to($_dot_color),
|
|
|
396 to(transparent));
|
|
|
397 }
|
|
|
398 to {
|
|
|
399 background-image: -gtk-gradient(radial,
|
|
|
400 center center, 0,
|
|
|
401 center center, 0.5,
|
|
|
402 to($selected_bg_color),
|
|
|
403 to(transparent));
|
|
|
404 }
|
|
|
405 }
|
|
|
406
|
|
|
407
|
|
|
408 .button {
|
|
|
409
|
|
|
410 $_button_transition: all 200ms $ease-out-quad;
|
|
|
411
|
|
|
412 border: 1px solid;
|
|
|
413 border-radius: 3px;
|
|
|
414 padding: 5px 8px 6px;
|
|
|
415 transition: $_button_transition;
|
|
|
416 @include button(normal);
|
|
|
417 &.flat {
|
|
|
418 @include button(undecorated);
|
|
|
419 // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
|
|
|
420 // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
|
|
|
421 // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
|
|
|
422 // in this case the duration is increased.
|
|
|
423 transition: none;
|
|
|
424 &:hover {
|
|
|
425 transition: $_button_transition;
|
|
|
426 transition-duration: 500ms;
|
|
|
427 &:active { transition: $_button_transition; }
|
|
|
428 }
|
|
|
429 }
|
|
|
430 &:hover {
|
|
|
431 @include button(hover);
|
|
|
432 -gtk-image-effect: highlight;
|
|
|
433 }
|
|
|
434 &:active, &:checked {
|
|
|
435 @include button(active);
|
|
|
436 transition-duration: 50ms;
|
|
|
437 }
|
|
|
438 &:backdrop, &.flat:backdrop {
|
|
|
439 @include button(backdrop);
|
|
|
440 -gtk-image-effect: none;
|
|
|
441 &:active, &:checked {
|
|
|
442 @include button(backdrop-active);
|
|
|
443 }
|
|
|
444 &:insensitive {
|
|
|
445 @include button(backdrop-insensitive);
|
|
|
446 }
|
|
|
447 &:insensitive:active, &:insensitive:checked {
|
|
|
448 @include button(backdrop-insensitive-active);
|
|
|
449 }
|
|
|
450 }
|
|
|
451 &.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive {
|
|
|
452 @include button(undecorated);
|
|
|
453 }
|
|
|
454 &:insensitive {
|
|
|
455 @include button(insensitive);
|
|
|
456 &:active, &:checked {
|
|
|
457 @include button(insensitive-active);
|
|
|
458 }
|
|
|
459 }
|
|
|
460 // big standalone buttons like in Documents pager
|
|
|
461 &.osd {
|
|
|
462 &.image-button { padding: 13px; }
|
|
|
463 color: $osd_fg_color;
|
|
|
464 border-radius: 5px;
|
|
|
465 outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var?
|
|
|
466 @include button(osd);
|
|
|
467 border: none;
|
|
|
468 box-shadow: none;
|
|
|
469 &:hover {
|
|
|
470 @include button(osd-hover);
|
|
|
471 border: none;
|
|
|
472 box-shadow: none;
|
|
|
473 }
|
|
|
474 &:active, &:checked {
|
|
|
475 @include button(osd-active);
|
|
|
476 border: none;
|
|
|
477 box-shadow: none;
|
|
|
478 }
|
|
|
479 &:insensitive, &:backdrop:insensitive {
|
|
|
480 @include button(osd-insensitive);
|
|
|
481 border: none;
|
|
|
482 }
|
|
|
483 &:backdrop {
|
|
|
484 @include button(osd-backdrop);
|
|
|
485 border: none;
|
|
|
486 }
|
|
|
487 }
|
|
|
488 //overlay / OSD style
|
|
|
489 .osd & {
|
|
|
490 @include button(osd);
|
|
|
491 // there's a problem with sass which prevents it to extend the linked
|
|
|
492 // placeholder as expected, it should just be "@extend %linked;", the
|
|
|
493 // placeholder is basically replicated here
|
|
|
494 //
|
|
|
495 // Workaround START
|
|
|
496 border-radius: 0;
|
|
|
497 border-left-style: none;
|
|
|
498 &:dir(rtl) {
|
|
|
499 border-radius: 0;
|
|
|
500 border-right-style: none;
|
|
|
501 border-left-style: solid
|
|
|
502 }
|
|
|
503 &:first-child {
|
|
|
504 border-radius: 3px 0 0 3px;
|
|
|
505 border-left-style: solid;
|
|
|
506 }
|
|
|
507 &:last-child {
|
|
|
508 border-radius: 0 3px 3px 0;
|
|
|
509 &:dir(rtl) { border-right-style: solid; }
|
|
|
510 }
|
|
|
511 &:only-child {
|
|
|
512 border-radius: 3px;
|
|
|
513 border-style: solid;
|
|
|
514 }
|
|
|
515 // Workaround END
|
|
|
516 &:hover {
|
|
|
517 @include button(osd-hover);
|
|
|
518 @extend %linked;
|
|
|
519 }
|
|
|
520 &:active, &:checked, &:backdrop:active, &:backdrop:checked {
|
|
|
521 @include button(osd-active);
|
|
|
522 @extend %linked;
|
|
|
523 }
|
|
|
524 &:insensitive, &:backdrop:insensitive {
|
|
|
525 @include button(osd-insensitive);
|
|
|
526 @extend %linked;
|
|
|
527 }
|
|
|
528 &:backdrop {
|
|
|
529 @include button(osd-backdrop);
|
|
|
530 @extend %linked;
|
|
|
531 }
|
|
|
532 &.flat {
|
|
|
533 @include button(undecorated);
|
|
|
534 box-shadow: none; //FIXME respect no edge on the button mixin
|
|
|
535 text-shadow: 0 1px black;
|
|
|
536 icon-shadow: 0 1px black;
|
|
|
537 &:hover {
|
|
|
538 @include button(osd-hover);
|
|
|
539 background-clip: padding-box;
|
|
|
540 border-color: transparent;
|
|
|
541 box-shadow: none;
|
|
|
542 }
|
|
|
543 &:insensitive {
|
|
|
544 @include button(osd-insensitive);
|
|
|
545 background-image: none;
|
|
|
546 border-color: transparent;
|
|
|
547 box-shadow: none;
|
|
|
548 }
|
|
|
549 &:backdrop { @include button(undecorated); }
|
|
|
550 &:active, &:checked {
|
|
|
551 @include button(osd-active);
|
|
|
552 background-clip: padding-box;
|
|
|
553 border-color: transparent;
|
|
|
554 box-shadow: none;
|
|
|
555 }
|
|
|
556 }
|
|
|
557 }
|
|
|
558
|
|
|
559 // Suggested and Destructive Action buttons
|
|
|
560 @each $b_type, $b_color in (suggested-action, $selected_bg_color),
|
|
|
561 (destructive-action, $destructive_color) {
|
|
|
562 &.#{$b_type} {
|
|
|
563 @include button(normal, $b_color, white);
|
|
|
564 &.flat {
|
|
|
565 @include button(undecorated);
|
|
|
566 color: $b_color; //FIXME: does it work on the dark variant?
|
|
|
567 }
|
|
|
568 &:hover { @include button(hover, $b_color, white); }
|
|
|
569 &:active, &:checked { @include button(active, $b_color, white); }
|
|
|
570 &:backdrop, &.flat:backdrop {
|
|
|
571 @include button(backdrop, $b_color, white);
|
|
|
572 &:active, &:checked {
|
|
|
573 @include button(backdrop-active, $b_color, white);
|
|
|
574 }
|
|
|
575 &:insensitive {
|
|
|
576 @include button(backdrop-insensitive);
|
|
|
577 &:active, &:checked {
|
|
|
578 @include button(backdrop-insensitive-active, $b_color, white);
|
|
|
579 }
|
|
|
580 }
|
|
|
581 }
|
|
|
582 &.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive {
|
|
|
583 @include button(undecorated);
|
|
|
584 color: transparentize($b_color, 0.2);
|
|
|
585 }
|
|
|
586 &:insensitive {
|
|
|
587 @include button(insensitive);
|
|
|
588 &:active, &:checked {
|
|
|
589 @include button(insensitive-active, $b_color, white);
|
|
|
590 }
|
|
|
591 }
|
|
|
592 .osd & {
|
|
|
593 @include button(osd, $b_color);
|
|
|
594 @extend %linked;
|
|
|
595 &:hover {
|
|
|
596 @include button(osd-hover, $b_color);
|
|
|
597 @extend %linked;
|
|
|
598 }
|
|
|
599 &:active, &:checked, &:backdrop:active, &:backdrop:checked {
|
|
|
600 @include button(osd-active, $b_color);
|
|
|
601 @extend %linked;
|
|
|
602 }
|
|
|
603 &:insensitive, &:backdrop:insensitive {
|
|
|
604 @include button(osd-insensitive, $b_color);
|
|
|
605 @extend %linked;
|
|
|
606 }
|
|
|
607 &:backdrop {
|
|
|
608 @include button(osd-backdrop, $b_color);
|
|
|
609 @extend %linked;
|
|
|
610 }
|
|
|
611 }
|
|
|
612 }
|
|
|
613 }
|
|
|
614
|
|
|
615 &.image-button { padding: 8px; }
|
|
|
616
|
|
|
617 &.text-button {
|
|
|
618 padding-left: 16px;
|
|
|
619 padding-right: 16px;
|
|
|
620 }
|
|
|
621
|
|
|
622 &.text-button.image-button {
|
|
|
623 // those buttons needs uneven horizontal padding, we want the icon side
|
|
|
624 // to have the image-button padding, while the text side the text-button
|
|
|
625 // one, so we're adding the missing padding to the label depending on
|
|
|
626 // its position inside the button
|
|
|
627 padding: 5px 8px 6px; // same as .button
|
|
|
628 .label:first-child { padding-left: 8px; }
|
|
|
629 .label:last-child { padding-right: 8px; }
|
|
|
630 }
|
|
|
631
|
|
|
632 .stack-switcher > & {
|
|
|
633 // to position the needs attention dot, padding is added to the button
|
|
|
634 // child, a label needs just lateral padding while an icon needs vertical
|
|
|
635 // padding added too.
|
|
|
636
|
|
|
637 outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
|
|
|
638
|
|
|
639 > .label {
|
|
|
640 padding-left: 6px; // label padding
|
|
|
641 padding-right: 6px; //
|
|
|
642 }
|
|
|
643 > GtkImage {
|
|
|
644 padding-left: 6px; // image padding
|
|
|
645 padding-right: 6px; //
|
|
|
646 padding-top: 3px; //
|
|
|
647 padding-bottom: 3px; //
|
|
|
648 }
|
|
|
649 &.text-button {
|
|
|
650 padding: 5px 10px 6px; // needed or it will get overridden
|
|
|
651 }
|
|
|
652 &.image-button {
|
|
|
653 // we want image buttons to have a 1:1 aspect ratio, so compensation
|
|
|
654 // of the padding added to the GtkImage is needed
|
|
|
655 padding: 5px 2px;
|
|
|
656 }
|
|
|
657 &.needs-attention > .label,
|
|
|
658 &.needs-attention > GtkImage { @extend %needs_attention; }
|
|
|
659 &.needs-attention:active > .label,
|
|
|
660 &.needs-attention:active > GtkImage,
|
|
|
661 &.needs-attention:checked > .label,
|
|
|
662 &.needs-attention:checked > GtkImage {
|
|
|
663 animation: none;
|
|
|
664 background-image: none;
|
|
|
665 }
|
|
|
666 }
|
|
|
667
|
|
|
668 //inline-toolbar buttons
|
|
|
669 .inline-toolbar &, .inline-toolbar &:backdrop {
|
|
|
670 border-radius: 2px;
|
|
|
671 border-width: 1px;
|
|
|
672 @extend %linked;
|
|
|
673 }
|
|
|
674
|
|
|
675 .primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows
|
|
|
676
|
|
|
677 .linked > &,
|
|
|
678 .linked > &:hover,
|
|
|
679 .linked > &:active,
|
|
|
680 .linked > &:checked,
|
|
|
681 .linked > &:backdrop { @extend %linked; }
|
|
|
682
|
|
|
683 .linked.vertical > &,
|
|
|
684 .linked.vertical > &:hover,
|
|
|
685 .linked.vertical > &:active,
|
|
|
686 .linked.vertical > &:checked,
|
|
|
687 .linked.vertical > &:backdrop { @extend %linked_vertical; }
|
|
|
688 }
|
|
|
689
|
|
|
690 %needs_attention {
|
|
|
691 animation: needs_attention 150ms ease-in;
|
|
|
692 $_dot_shadow: _text_shadow_color();
|
|
|
693 $_dot_shadow_r: if($variant=='light',0.5,0.45);
|
|
|
694 background-image: -gtk-gradient(radial,
|
|
|
695 center center, 0,
|
|
|
696 center center, 0.5,
|
|
|
697 to($_dot_color),
|
|
|
698 to(transparent)),
|
|
|
699 -gtk-gradient(radial,
|
|
|
700 center center, 0,
|
|
|
701 center center, $_dot_shadow_r,
|
|
|
702 to($_dot_shadow),
|
|
|
703 to(transparent));
|
|
|
704 background-size: 6px 6px, 6px 6px;
|
|
|
705 background-repeat: no-repeat;
|
|
|
706 @if $variant == 'light' { background-position: right 3px, right 4px; }
|
|
|
707 @else { background-position: right 3px, right 2px; }
|
|
|
708 &:backdrop { background-size: 6px 6px, 0 0;}
|
|
|
709 &:dir(rtl) {
|
|
|
710 @if $variant == 'light' { background-position: left 3px, left 4px; }
|
|
|
711 @else { background-position: left 3px, left 2px; }
|
|
|
712 }
|
|
|
713 }
|
|
|
714
|
|
|
715
|
|
|
716 // all the following is for the +|- buttons on inline toolbars, that way
|
|
|
717 // should really be deprecated...
|
|
|
718 .inline-toolbar GtkToolButton > .button { // redefining the button look is
|
|
|
719 // needed since those are flat...
|
|
|
720 @include button(normal);
|
|
|
721 &:hover { @include button(hover); }
|
|
|
722 &:active,
|
|
|
723 &:checked{ @include button(active); }
|
|
|
724 &:insensitive { @include button(insensitive); }
|
|
|
725 &:insensitive:active,
|
|
|
726 &:insensitive:checked { @include button(insensitive-active); }
|
|
|
727 &:backdrop { @include button(backdrop); };
|
|
|
728 &:backdrop:active,
|
|
|
729 &:backdrop:checked { @include button(backdrop-active); }
|
|
|
730 &:backdrop:insensitive { @include button(backdrop-insensitive); }
|
|
|
731 &:backdrop:insensitive:active,
|
|
|
732 &:backdrop:insensitive:checked {
|
|
|
733 @include button(backdrop-insensitive-active); }
|
|
|
734 }
|
|
|
735
|
|
|
736 // More inline toolbar buttons
|
|
|
737 .inline-toolbar.toolbar GtkToolButton,
|
|
|
738 .inline-toolbar.toolbar GtkToolButton:backdrop {
|
|
|
739 & > .button.flat { @extend %linked_middle; }
|
|
|
740 &:dir(rtl) > .button.flat { @extend %linked_middle:dir(rtl); }
|
|
|
741 &:first-child > .button.flat { @extend %linked:first-child; }
|
|
|
742 &:last-child > .button.flat { @extend %linked:last-child; }
|
|
|
743 &:last-child:dir(rtl) > .button.flat { @extend %linked:last-child:dir(rtl); }
|
|
|
744 &:only-child > .button.flat { @extend %linked:only-child; }
|
|
|
745 }
|
|
|
746
|
|
|
747 %linked_middle {
|
|
|
748 border-radius: 0;
|
|
|
749 border-left-style: none;
|
|
|
750 &:dir(rtl) {
|
|
|
751 border-radius: 0; // needed when including %linked_middle:dir(rtl)
|
|
|
752 border-right-style: none;
|
|
|
753 border-left-style: solid
|
|
|
754 }
|
|
|
755 }
|
|
|
756
|
|
|
757 %linked {
|
|
|
758 @extend %linked_middle;
|
|
|
759 &:first-child {
|
|
|
760 border-radius: 3px 0 0 3px;
|
|
|
761 border-left-style: solid;
|
|
|
762 }
|
|
|
763 &:last-child {
|
|
|
764 border-radius: 0 3px 3px 0;
|
|
|
765 &:dir(rtl) { border-right-style: solid; }
|
|
|
766 }
|
|
|
767 &:only-child {
|
|
|
768 border-radius: 3px;
|
|
|
769 border-style: solid;
|
|
|
770 }
|
|
|
771 }
|
|
|
772
|
|
|
773 %linked_vertical_middle {
|
|
|
774 border-left-style: solid;
|
|
|
775 border-top-style: none;
|
|
|
776 border-radius: 0;
|
|
|
777 }
|
|
|
778
|
|
|
779 %linked_vertical{
|
|
|
780 @extend %linked_vertical_middle;
|
|
|
781 &:first-child {
|
|
|
782 border-style: solid;
|
|
|
783 border-radius: 3px 3px 0 0;
|
|
|
784 }
|
|
|
785 &:last-child {
|
|
|
786 border-radius: 0 0 3px 3px;
|
|
|
787 }
|
|
|
788 &:only-child {
|
|
|
789 border-radius: 3px;
|
|
|
790 border-style: solid;
|
|
|
791 }
|
|
|
792 }
|
|
|
793
|
|
|
794 %undecorated_button {
|
|
|
795 border-color: transparent;
|
|
|
796 background-color: transparent;
|
|
|
797 background-image: none;
|
|
|
798 box-shadow: inset 0 1px transparentize(white,1),
|
|
|
799 0 1px transparentize(white, 1);
|
|
|
800 text-shadow: none;
|
|
|
801 icon-shadow: none;
|
|
|
802 }
|
|
|
803
|
|
|
804 /* menu buttons */
|
|
|
805 .menuitem.button.flat {
|
|
|
806 @extend %undecorated_button;
|
|
|
807 outline-offset: -1px;
|
|
|
808 &:hover { background-color: mix($fg_color, $bg_color, 10%); }
|
|
|
809 &:selected { @extend %selected_items; }
|
|
|
810 &:backdrop, &:backdrop:hover {
|
|
|
811 @extend %undecorated_button;
|
|
|
812 }
|
|
|
813 }
|
|
|
814
|
|
|
815
|
|
|
816 GtkColorButton.button {
|
|
|
817 padding: 5px; // Uniform padding on the GtkColorButton
|
|
|
818
|
|
|
819 GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the
|
|
|
820 // colorpicker style, otherwise
|
|
|
821 border-radius: 0;
|
|
|
822 box-shadow: inset 0 1px 1px transparentize(black, 0.9),
|
|
|
823 _widget_edge();
|
|
|
824 &:insensitive,
|
|
|
825 &:backdrop { box-shadow: none; }
|
|
|
826 }
|
|
|
827 }
|
|
|
828
|
|
|
829 /*********
|
|
|
830 * Links *
|
|
|
831 *********/
|
|
|
832
|
|
|
833 *:link {
|
|
|
834 color: $link_color;
|
|
|
835 &:visited {
|
|
|
836 color: $link_visited_color;
|
|
|
837 *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
|
|
|
838 }
|
|
|
839 &:hover {
|
|
|
840 color: lighten($link_color,10%);
|
|
|
841 *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
|
|
|
842 }
|
|
|
843 &:active {
|
|
|
844 color: $link_color;
|
|
|
845 *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
|
|
|
846 }
|
|
|
847 &:backdrop, &:backdrop:hover, &:backdrop:hover:selected {
|
|
|
848 color: $selected_bg_color;
|
|
|
849 }
|
|
|
850 &:selected, *:selected & {
|
|
|
851 color: mix($selected_fg_color, $selected_bg_color, 80%);
|
|
|
852 }
|
|
|
853 }
|
|
|
854
|
|
|
855 .button:link, .button:visited {
|
|
|
856 @extend %undecorated_button;
|
|
|
857 @extend *:link;
|
|
|
858 text-shadow: none;
|
|
|
859 &:hover, &:active, &:checked {
|
|
|
860 @extend %undecorated_button;
|
|
|
861 text-shadow: none;
|
|
|
862 }
|
|
|
863 &:backdrop {
|
|
|
864 @extend %undecorated_button; //This shouldn't be needed but avoids
|
|
|
865 //a weird transition which for some reason
|
|
|
866 //makes borders blink on hover
|
|
|
867 }
|
|
|
868 }
|
|
|
869
|
|
|
870 /*****************
|
|
|
871 * GtkSpinButton *
|
|
|
872 *****************/
|
|
|
873
|
|
|
874 .spinbutton {
|
|
|
875 .button {
|
|
|
876 background-image: none;
|
|
|
877 border-style: none none none solid;
|
|
|
878 border-color: transparentize($borders_color, 0.7);
|
|
|
879 color: mix($fg_color, $base_color, 90%);
|
|
|
880 border-radius: 0;
|
|
|
881 box-shadow: none;
|
|
|
882 // padding-left: 6px;
|
|
|
883 // padding-right: 6px;
|
|
|
884 &:dir(rtl) { border-style: none solid none none; }
|
|
|
885 &:hover {
|
|
|
886 color: $fg_color;
|
|
|
887 background-color: transparentize($fg_color, 0.95);
|
|
|
888 }
|
|
|
889 &:insensitive {
|
|
|
890 color: transparentize($insensitive_fg_color, 0.7);
|
|
|
891 }
|
|
|
892 &:active {
|
|
|
893 box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
|
|
|
894 background-color: transparentize(black, 0.9);
|
|
|
895 }
|
|
|
896 &:backdrop {
|
|
|
897 color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
|
|
|
898 border-color: transparentize($backdrop_borders_color, 0.7);
|
|
|
899 background-color: transparent;
|
|
|
900 }
|
|
|
901 &:backdrop:insensitive {
|
|
|
902 background-image: none;
|
|
|
903 color: transparentize($backdrop_insensitive_color,0.7);
|
|
|
904 border-style: none none none solid; // It is needed or it gets overridden
|
|
|
905 &:dir(rtl) { border-style: none solid none none; }
|
|
|
906 }
|
|
|
907 }
|
|
|
908 .osd & {
|
|
|
909 .button {
|
|
|
910 @include button(undecorated);
|
|
|
911 color: $osd_fg_color;
|
|
|
912 border-style: none none none solid;
|
|
|
913 border-color: transparentize($osd_borders_color, 0.3);
|
|
|
914 border-radius: 0;
|
|
|
915 box-shadow: none;
|
|
|
916 icon-shadow: 0 1px black;
|
|
|
917 &:dir(rtl) { border-style: none solid none none; }
|
|
|
918 &:hover {
|
|
|
919 @include button(undecorated);
|
|
|
920 color: $osd_fg_color;
|
|
|
921 border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
|
922 background-color: transparentize($osd_fg_color, 0.9);
|
|
|
923 icon-shadow: 0 1px black;
|
|
|
924 box-shadow: none;
|
|
|
925 }
|
|
|
926 &:backdrop {
|
|
|
927 @include button(undecorated);
|
|
|
928 color: $osd_fg_color;
|
|
|
929 border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
|
930 icon-shadow: none;
|
|
|
931 box-shadow: none;
|
|
|
932 }
|
|
|
933 &:insensitive {
|
|
|
934 @include button(undecorated);
|
|
|
935 color: $osd_insensitive_fg_color;
|
|
|
936 border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
|
937 icon-shadow: none;
|
|
|
938 box-shadow: none;
|
|
|
939 }
|
|
|
940 &:last-child { border-radius: 0 3px 3px 0; }
|
|
|
941 &:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
|
|
|
942 }
|
|
|
943 }
|
|
|
944 &.vertical, &.vertical:dir(rtl) { //FIXME: try using linking templates for vertically linked stuff
|
|
|
945 .button {
|
|
|
946 padding-top: 8px; // Same vertical padding as image-buttons
|
|
|
947 padding-bottom: 8px; //
|
|
|
948 &:first-child {
|
|
|
949 @extend %top_button;
|
|
|
950 @include button(normal, $edge:none);
|
|
|
951 &:active {
|
|
|
952 @extend %top_button;
|
|
|
953 @include button(active, $edge:none);
|
|
|
954 }
|
|
|
955 &:hover {
|
|
|
956 @extend %top_button;
|
|
|
957 @include button(hover, $edge:none);
|
|
|
958 }
|
|
|
959 &:insensitive {
|
|
|
960 @extend %top_button;
|
|
|
961 @include button(insensitive, $edge:none);
|
|
|
962 }
|
|
|
963 &:backdrop {
|
|
|
964 @extend %top_button;
|
|
|
965 @include button(backdrop, $edge:none);
|
|
|
966 }
|
|
|
967 }
|
|
|
968 &:last-child {
|
|
|
969 @extend %bottom_button;
|
|
|
970 @include button(normal);
|
|
|
971 &:active {
|
|
|
972 @extend %bottom_button;
|
|
|
973 @include button(active);
|
|
|
974 }
|
|
|
975 &:hover {
|
|
|
976 @extend %bottom_button;
|
|
|
977 @include button(hover);
|
|
|
978 }
|
|
|
979 &:insensitive {
|
|
|
980 @extend %bottom_button;
|
|
|
981 @include button(insensitive);
|
|
|
982 }
|
|
|
983 &:backdrop {
|
|
|
984 @extend %bottom_button;
|
|
|
985 @include button(backdrop);
|
|
|
986 }
|
|
|
987 }
|
|
|
988 &:backdrop:insensitive {
|
|
|
989 @include button(backdrop-insensitive);
|
|
|
990 }
|
|
|
991 }
|
|
|
992 &.entry {
|
|
|
993 // we should remove the bottom edge hilight here, but seems
|
|
|
994 // like buttons are on top of it so it doesn't show up
|
|
|
995 border-radius: 0;
|
|
|
996 padding-left: 3px;
|
|
|
997 padding-right: 3px;
|
|
|
998 }
|
|
|
999 %top_button {
|
|
|
1000 border-radius: 3px 3px 0 0;
|
|
|
1001 border-style: solid solid none solid;
|
|
|
1002 }
|
|
|
1003 %bottom_button {
|
|
|
1004 border-radius: 0 0 3px 3px;
|
|
|
1005 border-style: none solid solid solid;
|
|
|
1006 }
|
|
|
1007 }
|
|
|
1008 GtkTreeView & {
|
|
|
1009 &.entry, &.entry:focus {
|
|
|
1010 padding: 1px;
|
|
|
1011 border-width: 1px 0;
|
|
|
1012 border-color: $selected_bg_color;
|
|
|
1013 border-radius: 0;
|
|
|
1014 box-shadow: none;
|
|
|
1015 }
|
|
|
1016 }
|
|
|
1017 }
|
|
|
1018
|
|
|
1019 /**************
|
|
|
1020 * ComboBoxes *
|
|
|
1021 **************/
|
|
|
1022 GtkComboBox {
|
|
|
1023 > .button { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos
|
|
|
1024 // are bigger then
|
|
|
1025 // buttons
|
|
|
1026 -GtkComboBox-arrow-scaling: 0.5;
|
|
|
1027 -GtkComboBox-shadow-type: none;
|
|
|
1028
|
|
|
1029 box-shadow: 0 1px $borders_edge;
|
|
|
1030
|
|
|
1031 @include _button_text_shadow;
|
|
|
1032
|
|
|
1033 &:insensitive {
|
|
|
1034 color: $insensitive_fg_color;
|
|
|
1035 text-shadow: none;
|
|
|
1036 icon-shadow: none;
|
|
|
1037 }
|
|
|
1038 &:backdrop {
|
|
|
1039 color: $backdrop_fg_color;
|
|
|
1040 text-shadow: none;
|
|
|
1041 icon-shadow: none;
|
|
|
1042 }
|
|
|
1043 &:backdrop:insensitive {
|
|
|
1044 color: $backdrop_insensitive_color;
|
|
|
1045 }
|
|
|
1046 .menuitem { text-shadow: none; }
|
|
|
1047 .separator.vertical {
|
|
|
1048 // always disable separators
|
|
|
1049 -GtkWidget-wide-separators: true;
|
|
|
1050 }
|
|
|
1051 &.combobox-entry .entry { @extend %linked; }
|
|
|
1052 &.combobox-entry .button, &.combobox-entry .button:backdrop {
|
|
|
1053 // It is needed to specify the backdrop button or it gets overridden
|
|
|
1054 @extend %linked;
|
|
|
1055 }
|
|
|
1056 }
|
|
|
1057
|
|
|
1058 .linked > GtkComboBox > .button {
|
|
|
1059 // the combo is a composite widget so the way we do button linkind doesn't
|
|
|
1060 // work, special case needed. See
|
|
|
1061 // https://bugzilla.gnome.org/show_bug.cgi?id=733979
|
|
|
1062 &:dir(ltr) { @extend %linked_middle; } // specificity bump
|
|
|
1063 &:dir(rtl) { @extend %linked_middle:dir(rtl); }
|
|
|
1064 }
|
|
|
1065 .linked > GtkComboBox:first-child > .button {
|
|
|
1066 @extend %linked:first-child;
|
|
|
1067 }
|
|
|
1068 .linked > GtkComboBox:last-child > .button {
|
|
|
1069 @extend %linked:last-child;
|
|
|
1070 }
|
|
|
1071 .linked > GtkComboBox:only-child > .button {
|
|
|
1072 @extend %linked:only-child;
|
|
|
1073 }
|
|
|
1074 .linked.vertical > GtkComboBoxText > .button,
|
|
|
1075 .linked.vertical > GtkComboBox > .button { @extend %linked_vertical_middle; }
|
|
|
1076 .linked.vertical > GtkComboBoxText:first-child > .button,
|
|
|
1077 .linked.vertical > GtkComboBox:first-child > .button { @extend %linked_vertical:first-child; }
|
|
|
1078 .linked.vertical > GtkComboBoxText:last-child > .button,
|
|
|
1079 .linked.vertical > GtkComboBox:last-child > .button { @extend %linked_vertical:last-child; }
|
|
|
1080 .linked.vertical > GtkComboBoxText:only-child > .button,
|
|
|
1081 .linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; }
|
|
|
1082
|
|
|
1083 /************
|
|
|
1084 * Toolbars *
|
|
|
1085 ************/
|
|
|
1086 .toolbar {
|
|
|
1087 -GtkWidget-window-dragging: true;
|
|
|
1088 padding: 4px;
|
|
|
1089 background-color: $bg_color;
|
|
|
1090 .osd &, &.osd {
|
|
|
1091 padding: 13px;
|
|
|
1092 border: none;
|
|
|
1093 border-radius: 5px;
|
|
|
1094 background-color: $osd_bg_color;
|
|
|
1095 }
|
|
|
1096 }
|
|
|
1097
|
|
|
1098 //searchbar, location-bar & inline-toolbar
|
|
|
1099 .inline-toolbar {
|
|
|
1100 @extend .toolbar;
|
|
|
1101 @extend %inset-bar;
|
|
|
1102 border-width: 0 1px 1px;
|
|
|
1103 padding: 3px;
|
|
|
1104 border-radius: 0 0 5px 5px;
|
|
|
1105 }
|
|
|
1106 .search-bar, .location-bar {
|
|
|
1107 @extend .toolbar;
|
|
|
1108 @extend %inset-bar;
|
|
|
1109 border-width: 0 0 1px;
|
|
|
1110 padding: 3px;
|
|
|
1111 }
|
|
|
1112
|
|
|
1113 %inset-bar {
|
|
|
1114 border-style: solid;
|
|
|
1115 border-color: $borders_color;
|
|
|
1116 $_bg: mix($bg_color, $borders_color, 70%);
|
|
|
1117 background-color: $_bg;
|
|
|
1118 box-shadow: inset 0 2px 3px -1px mix($borders_color, $_bg, 60%),
|
|
|
1119 _widget_edge();
|
|
|
1120 //FIXME edge would be nice, but doesn't work
|
|
|
1121 &:backdrop {
|
|
|
1122 border-color: $backdrop_borders_color;
|
|
|
1123 background-color: $backdrop_dark_fill;
|
|
|
1124 box-shadow: none;
|
|
|
1125 }
|
|
|
1126 }
|
|
|
1127
|
|
|
1128 /***************
|
|
|
1129 * Header bars *
|
|
|
1130 ***************/
|
|
|
1131
|
|
|
1132 .titlebar,
|
|
|
1133 .header-bar {
|
|
|
1134 padding: 6px;
|
|
|
1135 border-width: 0 0 1px;
|
|
|
1136 border-style: solid;
|
|
|
1137 border-color: $borders_color;
|
|
|
1138 border-radius: 7px 7px 0 0;
|
|
|
1139 background-color: transparent;
|
|
|
1140
|
|
|
1141 @include headerbar_fill;
|
|
|
1142
|
|
|
1143 &:backdrop {
|
|
|
1144 border-color: $backdrop_borders_color;
|
|
|
1145 background-color: $bg_color;
|
|
|
1146 background-image: none;
|
|
|
1147 box-shadow: inset 0 1px $top_hilight;
|
|
|
1148 }
|
|
|
1149
|
|
|
1150 .title {
|
|
|
1151 font-weight: bold;
|
|
|
1152 padding-left: 12px;
|
|
|
1153 padding-right: 12px;
|
|
|
1154 }
|
|
|
1155
|
|
|
1156 .subtitle {
|
|
|
1157 font-size: smaller;
|
|
|
1158 padding-left: 12px;
|
|
|
1159 padding-right: 12px;
|
|
|
1160 @extend .dim-label;
|
|
|
1161 }
|
|
|
1162
|
|
|
1163 .header-bar-separator,
|
|
|
1164 & > GtkBox > .separator.vertical {
|
|
|
1165 -GtkWidget-wide-separators: true;
|
|
|
1166 -GtkWidget-separator-width: 1px;
|
|
|
1167 border-width: 0 1px;
|
|
|
1168 border-image: linear-gradient(to bottom,
|
|
|
1169 transparentize($borders_color,1),
|
|
|
1170 $borders_color 30%,
|
|
|
1171 $borders_color 70%,
|
|
|
1172 transparentize($borders_color,1) 100%)
|
|
|
1173 0 1 / 0 1px stretch; //FIXME use a proper color
|
|
|
1174
|
|
|
1175 &:backdrop {
|
|
|
1176 border-image: linear-gradient(to bottom, transparentize($backdrop_borders_color, 0.5))
|
|
|
1177 0 1 / 1px 1px; //FIXME use a proper color
|
|
|
1178 }
|
|
|
1179 }
|
|
|
1180
|
|
|
1181 &.selection-mode {
|
|
|
1182 $_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color
|
|
|
1183
|
|
|
1184 color: $selected_fg_color;
|
|
|
1185 text-shadow: 0 -1px transparentize(black, 0.5);
|
|
|
1186 border-color: $selected_borders_color;
|
|
|
1187 background-image: linear-gradient(to bottom,
|
|
|
1188 lighten($selected_bg_color,5%),
|
|
|
1189 $selected_bg_color);
|
|
|
1190 box-shadow: inset 0 -1px mix($selected_borders_color, $selected_bg_color, 35%), //bottom shade
|
|
|
1191 inset 0 1px $_hc;
|
|
|
1192
|
|
|
1193 &:backdrop {
|
|
|
1194 background-image: linear-gradient(to bottom, $selected_bg_color);
|
|
|
1195 box-shadow: inset 0 1px mix($top_hilight, $selected_bg_color, 60%);
|
|
|
1196 }
|
|
|
1197
|
|
|
1198 .subtitle:link { @extend *:link:selected; }
|
|
|
1199
|
|
|
1200 .button {
|
|
|
1201 @include button(normal, $selected_bg_color, $selected_fg_color, $_hc);
|
|
|
1202
|
|
|
1203 &.flat { @include button(undecorated); }
|
|
|
1204
|
|
|
1205 &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $_hc); }
|
|
|
1206
|
|
|
1207 &:active, &:checked { @include button(active, $selected_bg_color, $selected_fg_color, $_hc); }
|
|
|
1208
|
|
|
1209 &:backdrop,
|
|
|
1210 &.flat:backdrop {
|
|
|
1211 @include button(backdrop, $selected_bg_color, $selected_fg_color, $_hc);
|
|
|
1212 -gtk-image-effect: none;
|
|
|
1213 border-color: $selected_borders_color;
|
|
|
1214
|
|
|
1215 &:active,
|
|
|
1216 &:checked {
|
|
|
1217 @include button(backdrop-active, $selected_bg_color, $selected_fg_color, $_hc);
|
|
|
1218 border-color: $selected_borders_color;
|
|
|
1219 }
|
|
|
1220
|
|
|
1221 &:insensitive {
|
|
|
1222 @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $_hc);
|
|
|
1223 border-color: $selected_borders_color;
|
|
|
1224 }
|
|
|
1225
|
|
|
1226 &:insensitive:active,
|
|
|
1227 &:insensitive:checked {
|
|
|
1228 @include button(backdrop-insensitive-active, $selected_bg_color,
|
|
|
1229 $selected_fg_color, $_hc);
|
|
|
1230 border-color: $selected_borders_color;
|
|
|
1231 }
|
|
|
1232 }
|
|
|
1233
|
|
|
1234 &.flat:backdrop,
|
|
|
1235 &.flat:insensitive,
|
|
|
1236 &.flat:insensitive:backdrop {
|
|
|
1237 @include button(undecorated);
|
|
|
1238 }
|
|
|
1239
|
|
|
1240 &:insensitive {
|
|
|
1241 @include button(insensitive, $selected_bg_color, $selected_fg_color, $_hc);
|
|
|
1242
|
|
|
1243 &:active, &:checked { @include button(insensitive-active, $selected_bg_color, $selected_fg_color, $_hc); }
|
|
|
1244 }
|
|
|
1245
|
|
|
1246 &.suggested-action {
|
|
|
1247 @include button(normal, $edge:$_hc);
|
|
|
1248 border-color: $selected_borders_color;
|
|
|
1249
|
|
|
1250 &:hover {
|
|
|
1251 @include button(hover, $edge:$_hc);
|
|
|
1252 border-color: $selected_borders_color;
|
|
|
1253 }
|
|
|
1254
|
|
|
1255 &:active {
|
|
|
1256 @include button(active, $edge:$_hc);
|
|
|
1257 border-color: $selected_borders_color;
|
|
|
1258 }
|
|
|
1259
|
|
|
1260 &:insensitive {
|
|
|
1261 @include button(insensitive, $edge:$_hc);
|
|
|
1262 border-color: $selected_borders_color;
|
|
|
1263 }
|
|
|
1264
|
|
|
1265 &:backdrop {
|
|
|
1266 @include button(backdrop, $edge:$_hc);
|
|
|
1267 border-color: $selected_borders_color;
|
|
|
1268 }
|
|
|
1269
|
|
|
1270 &:backdrop:insensitive {
|
|
|
1271 @include button(backdrop-insensitive, $edge:$_hc);
|
|
|
1272 border-color: $selected_borders_color;
|
|
|
1273 }
|
|
|
1274 }
|
|
|
1275 }
|
|
|
1276
|
|
|
1277 .selection-menu {
|
|
|
1278 border-color: transparentize($selected_bg_color, 1);
|
|
|
1279 background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1));
|
|
|
1280 box-shadow: none;
|
|
|
1281 padding-left: 10px;
|
|
|
1282 padding-right: 10px;
|
|
|
1283
|
|
|
1284 GtkArrow { -GtkArrow-arrow-scaling: 1; }
|
|
|
1285
|
|
|
1286 .arrow {
|
|
|
1287 -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
|
1288 color: transparentize($selected_fg_color,0.5);
|
|
|
1289 icon-shadow: none;
|
|
|
1290 }
|
|
|
1291
|
|
|
1292 &:backdrop { @extend .selection-menu };
|
|
|
1293 }
|
|
|
1294 }
|
|
|
1295
|
|
|
1296 .tiled &, .maximized & {
|
|
|
1297 border-radius: 0; // squared corners when the window is max'd or tiled
|
|
|
1298 }
|
|
|
1299
|
|
|
1300 &.default-decoration {
|
|
|
1301 padding: 4px;
|
|
|
1302 .button { padding: 5px; }
|
|
|
1303 }
|
|
|
1304 }
|
|
|
1305
|
|
|
1306 /************
|
|
|
1307 * Pathbars *
|
|
|
1308 ************/
|
|
|
1309
|
|
|
1310 .path-bar .button {
|
|
|
1311 padding: 5px 6px 6px;
|
|
|
1312 &:first-child { padding-left: 8px; }
|
|
|
1313 &:last-child { padding-right: 8px; }
|
|
|
1314 &:only-child {
|
|
|
1315 padding-left: 12px;
|
|
|
1316 padding-right: 12px;
|
|
|
1317 }
|
|
|
1318
|
|
|
1319 // the following is for spacing the icon and the label inside the home button
|
|
|
1320 .label:last-child { padding-left: 2px; }
|
|
|
1321 .label:first-child { padding-right: 2px; }
|
|
|
1322 .label:only-child { padding-right: 0; padding-left: 0; }
|
|
|
1323 GtkImage { padding-top: 1px; }
|
|
|
1324 }
|
|
|
1325
|
|
|
1326 /**************
|
|
|
1327 * Tree Views *
|
|
|
1328 **************/
|
|
|
1329 GtkTreeView.view {
|
|
|
1330 -GtkTreeView-grid-line-width: 1;
|
|
|
1331 -GtkTreeView-grid-line-pattern: '';
|
|
|
1332 -GtkTreeView-tree-line-width: 1;
|
|
|
1333 -GtkTreeView-tree-line-pattern: '';
|
|
|
1334 -GtkTreeView-expander-size: 16;
|
|
|
1335
|
|
|
1336 border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
|
|
|
1337 border-top-color: $bg_color; // while this is the grid lines color, better then nothing
|
|
|
1338
|
|
|
1339 &:selected { border-radius: 0; } // rest border radius in lists
|
|
|
1340
|
|
|
1341 &:selected, &:backdrop:selected {
|
|
|
1342 border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
|
|
1343 border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
|
|
|
1344 }
|
|
|
1345
|
|
|
1346 &:insensitive {
|
|
|
1347 color: $insensitive_fg_color;
|
|
|
1348 &:selected {
|
|
|
1349 color: mix($selected_fg_color, $selected_bg_color, 40%);
|
|
|
1350 &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
|
|
1351 }
|
|
|
1352 &:backdrop { color: $backdrop_insensitive_color; }
|
|
|
1353 }
|
|
|
1354
|
|
|
1355 &.separator:backdrop {
|
|
|
1356 color: transparentize(black, 0.9);
|
|
|
1357 }
|
|
|
1358
|
|
|
1359 &:backdrop {
|
|
|
1360 border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
|
|
|
1361 border-top: $backdrop_bg_color;
|
|
|
1362 }
|
|
|
1363
|
|
|
1364 &.dnd {
|
|
|
1365 border-style: solid none;
|
|
|
1366 border-width: 1px;
|
|
|
1367 border-color: mix($fg_color, $selected_bg_color, 50%);
|
|
|
1368 }
|
|
|
1369
|
|
|
1370 &.expander {
|
|
|
1371 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
|
1372 &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
|
1373 color: mix($fg_color, $base_color, 70%);
|
|
|
1374 &:hover { color: $fg_color; }
|
|
|
1375 &:selected {
|
|
|
1376 color: mix($selected_fg_color, $selected_bg_color, 70%);
|
|
|
1377 &:hover { color: $selected_fg_color; }
|
|
|
1378 &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); }
|
|
|
1379 }
|
|
|
1380
|
|
|
1381 &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
|
1382
|
|
|
1383 &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
|
|
|
1384 }
|
|
|
1385
|
|
|
1386 &.progressbar { // progress bar in treeviews
|
|
|
1387 @if $variant == light { color: $base_color; }
|
|
|
1388
|
|
|
1389 border: 1px solid $selected_borders_color;
|
|
|
1390 border-radius: 4px;
|
|
|
1391 background-image: linear-gradient(to bottom,
|
|
|
1392 $selected_bg_color,
|
|
|
1393 darken($selected_bg_color,10%));
|
|
|
1394 box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7),
|
|
|
1395 transparentize(white,0.85)),
|
|
|
1396 0 1px if($variant=='light', transparentize(black, 0.8),
|
|
|
1397 transparentize(black,0.9));
|
|
|
1398
|
|
|
1399 &:selected {
|
|
|
1400 @if $variant == 'light' {
|
|
|
1401 color: $selected_bg_color;
|
|
|
1402 box-shadow: none;
|
|
|
1403 }
|
|
|
1404
|
|
|
1405 @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
|
|
|
1406
|
|
|
1407 background-image: linear-gradient(to bottom,
|
|
|
1408 $base_color,
|
|
|
1409 darken($base_color,10%));
|
|
|
1410
|
|
|
1411 &:backdrop {
|
|
|
1412 @if $variant == 'light' {
|
|
|
1413 color: $selected_bg_color;
|
|
|
1414 border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
|
|
|
1415 }
|
|
|
1416 @else { border-color: $backdrop_base_color; }
|
|
|
1417 background-color: $backdrop_base_color;
|
|
|
1418 }
|
|
|
1419 }
|
|
|
1420
|
|
|
1421 &:backdrop {
|
|
|
1422 @if $variant == 'light' { color: $backdrop_base_color; }
|
|
|
1423 @else { border-color: $backdrop_base_color; }
|
|
|
1424 background-image: none;
|
|
|
1425 box-shadow: none;
|
|
|
1426 }
|
|
|
1427 }
|
|
|
1428
|
|
|
1429 &.trough { // progress bar trough in treeviews
|
|
|
1430 background-color: transparentize($fg_color,0.9);
|
|
|
1431 border-radius: 4px;
|
|
|
1432
|
|
|
1433 &:selected {
|
|
|
1434 background-color: if($variant == 'light',
|
|
|
1435 transparentize($selected_fg_color, 0.7),
|
|
|
1436 darken($selected_bg_color, 10%));
|
|
|
1437 @if $variant == 'light' {
|
|
|
1438 border-width: 1px 0;
|
|
|
1439 border-style: solid;
|
|
|
1440 border-color: $selected_bg_color;
|
|
|
1441 }
|
|
|
1442 }
|
|
|
1443 }
|
|
|
1444 }
|
|
|
1445
|
|
|
1446 column-header {
|
|
|
1447 .button {
|
|
|
1448 @extend %column_header_button;
|
|
|
1449 $_column_header_color: mix($fg_color, $base_color, 50%);
|
|
|
1450 color: $_column_header_color;
|
|
|
1451 background-color: $base_color;
|
|
|
1452 font-weight: bold;
|
|
|
1453 text-shadow: none;
|
|
|
1454 box-shadow: none;
|
|
|
1455 &:hover {
|
|
|
1456 @extend %column_header_button;
|
|
|
1457 color: mix($_column_header_color, $fg_color, 50%);
|
|
|
1458 box-shadow: none;
|
|
|
1459 transition: none; //I shouldn't need this
|
|
|
1460 }
|
|
|
1461 &:active {
|
|
|
1462 @extend %column_header_button;
|
|
|
1463 color: $fg_color;
|
|
|
1464 transition: none; //I shouldn't need this
|
|
|
1465 }
|
|
|
1466 &.dnd {
|
|
|
1467 @extend column-header.button.dnd;
|
|
|
1468 }
|
|
|
1469 }
|
|
|
1470 &:last-child .button,
|
|
|
1471 &:last-child .button:backdrop, // set :backdrop too or the border will be visibile there
|
|
|
1472 &:last-child.button,
|
|
|
1473 &:last-child.button:backdrop { //treeview-like derived widgets in Banshee and Evolution
|
|
|
1474 border-right-style: none;
|
|
|
1475 }
|
|
|
1476 }
|
|
|
1477
|
|
|
1478 column-header.button.dnd { // for treeview-like derive widgets
|
|
|
1479 transition: none;
|
|
|
1480 color: $selected_bg_color;
|
|
|
1481 box-shadow: inset 1px 1px 0 1px $selected_bg_color,
|
|
|
1482 inset -1px 0 0 1px $selected_bg_color,
|
|
|
1483 inset 1px 1px $base_color, inset -1px 0 $base_color;;
|
|
|
1484 &:active { @extend column-header.button.dnd; }
|
|
|
1485 &:selected { @extend column-header.button.dnd; }
|
|
|
1486 &:hover { @extend column-header.button.dnd; }
|
|
|
1487 }
|
|
|
1488
|
|
|
1489 %column_header_button {
|
|
|
1490 padding: 3px 6px;
|
|
|
1491 border-style: none solid solid none;
|
|
|
1492 border-radius: 0;
|
|
|
1493 background-image: none;
|
|
|
1494 border-color: $bg_color;
|
|
|
1495 text-shadow: none;
|
|
|
1496 &:insensitive {
|
|
|
1497 border-color: $bg_color;
|
|
|
1498 background-image: none;
|
|
|
1499 }
|
|
|
1500 &:backdrop {
|
|
|
1501 border-color: $backdrop_bg_color;
|
|
|
1502 border-style: none solid solid none;
|
|
|
1503 color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
|
|
|
1504 background-image: none;
|
|
|
1505 background-color: $backdrop_base_color;
|
|
|
1506 &:insensitive {
|
|
|
1507 border-color: $backdrop_bg_color;
|
|
|
1508 background-image: none;
|
|
|
1509 }
|
|
|
1510 }
|
|
|
1511 }
|
|
|
1512
|
|
|
1513
|
|
|
1514 /*********
|
|
|
1515 * Menus *
|
|
|
1516 *********/
|
|
|
1517 .menubar {
|
|
|
1518 -GtkWidget-window-dragging: true;
|
|
|
1519 padding: 0px;
|
|
|
1520 box-shadow: inset 0 -1px transparentize(black, 0.9);
|
|
|
1521 &:backdrop { background-color: $backdrop_bg_color; }
|
|
|
1522 & > .menuitem {
|
|
|
1523 padding: 4px 8px;
|
|
|
1524 &:hover { //Seems like it :hover even with keyboard focus
|
|
|
1525 box-shadow: inset 0 -3px $selected_bg_color;
|
|
|
1526 color: $link_color;
|
|
|
1527 }
|
|
|
1528 &:insensitive {
|
|
|
1529 color: $insensitive_fg_color;
|
|
|
1530 box-shadow: none;
|
|
|
1531 }
|
|
|
1532 }
|
|
|
1533 }
|
|
|
1534
|
|
|
1535 .menu {
|
|
|
1536 margin: 4px;
|
|
|
1537 padding: 0px;
|
|
|
1538 background-color: $base_color;
|
|
|
1539 border: 1px solid $borders_color; // adds borders in a non composited env
|
|
|
1540 .csd & { border: none; } // axes borders in a composited env
|
|
|
1541 .menuitem {
|
|
|
1542 text-shadow: none;
|
|
|
1543 padding: 4px;
|
|
|
1544 &:hover {
|
|
|
1545 color: $selected_fg_color;
|
|
|
1546 background-color: $selected_bg_color;
|
|
|
1547 }
|
|
|
1548 &:insensitive {
|
|
|
1549 color: $insensitive_fg_color;
|
|
|
1550 &:backdrop { color: $backdrop_insensitive_color; }
|
|
|
1551 }
|
|
|
1552 &:backdrop, &:backdrop:hover {
|
|
|
1553 color: $backdrop_fg_color;
|
|
|
1554 background-color: $backdrop_base_color;
|
|
|
1555 }
|
|
|
1556 //submenu indicators
|
|
|
1557 &.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
|
|
|
1558 &.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
|
1559 }
|
|
|
1560 &.button { // overlow buttons
|
|
|
1561 @extend %undecorated_button;
|
|
|
1562 border-style: none;
|
|
|
1563 border-radius: 0;
|
|
|
1564 &.top { border-bottom: 1px solid mix($fg_color, $base_color, 10%); }
|
|
|
1565 &.bottom { border-top: 1px solid mix($fg_color, $base_color, 10%); }
|
|
|
1566 &:hover { background-color: mix($fg_color, $base_color, 10%); }
|
|
|
1567 &:insensitive {
|
|
|
1568 color: transparent;
|
|
|
1569 background-color: transparent;
|
|
|
1570 border-color: transparent ;
|
|
|
1571 }
|
|
|
1572 }
|
|
|
1573 }
|
|
|
1574
|
|
|
1575 .menuitem .accelerator { color: gtkalpha(currentColor,0.55); }
|
|
|
1576
|
|
|
1577
|
|
|
1578 /***************
|
|
|
1579 * Popovers *
|
|
|
1580 ***************/
|
|
|
1581
|
|
|
1582 .popover {
|
|
|
1583 padding: 2px;
|
|
|
1584 border: 1px solid $borders_color;
|
|
|
1585 border-radius: 5px;
|
|
|
1586 background-color: mix($bg_color, $base_color, 50%);
|
|
|
1587
|
|
|
1588 box-shadow: 0 1px 2px transparentize(black, 0.7);
|
|
|
1589
|
|
|
1590 &:backdrop {
|
|
|
1591 box-shadow: none;
|
|
|
1592 }
|
|
|
1593
|
|
|
1594 > .list,
|
|
|
1595 > .view,
|
|
|
1596 > .toolbar,
|
|
|
1597 &.osd > .toolbar {
|
|
|
1598 border-style: none;
|
|
|
1599 background-color: transparent;
|
|
|
1600 }
|
|
|
1601
|
|
|
1602 .button.flat,
|
|
|
1603 .button.flat:hover {
|
|
|
1604 text-shadow: none;
|
|
|
1605 transition: none;
|
|
|
1606 }
|
|
|
1607
|
|
|
1608 &.osd { @extend %osd; }
|
|
|
1609 }
|
|
|
1610
|
|
|
1611 //touch selection handlebars for the Popover.osd above
|
|
|
1612 .entry.cursor-handle,
|
|
|
1613 .cursor-handle {
|
|
|
1614 background-color: transparent;
|
|
|
1615 background-image: none;
|
|
|
1616 box-shadow: none;
|
|
|
1617 border-style: none;
|
|
|
1618 &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
|
|
|
1619 &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
|
|
|
1620 }
|
|
|
1621
|
|
|
1622 /*****************
|
|
|
1623 * Notebooks and *
|
|
|
1624 * Tabs *
|
|
|
1625 *****************/
|
|
|
1626
|
|
|
1627 .notebook {
|
|
|
1628 // Through me you go to the grief wracked city;
|
|
|
1629 // Through me you go to everlasting pain;
|
|
|
1630 // Through me you go a pass among lost souls.
|
|
|
1631 // ...
|
|
|
1632 // Abandon all hope — Ye Who Enter Here
|
|
|
1633 padding: 0;
|
|
|
1634 background-color: $base_color;
|
|
|
1635 -GtkNotebook-initial-gap: 10;
|
|
|
1636 -GtkNotebook-arrow-spacing: 5;
|
|
|
1637 -GtkNotebook-tab-curvature: 0;
|
|
|
1638 -GtkNotebook-tab-overlap: -8;
|
|
|
1639 -GtkNotebook-has-tab-gap: false;
|
|
|
1640 -GtkWidget-focus-padding: 0;
|
|
|
1641 -GtkWidget-focus-line-width: 0;
|
|
|
1642 transition: all 200ms $ease-out-quad;
|
|
|
1643 &:backdrop {
|
|
|
1644 background-color: $backdrop_base_color;
|
|
|
1645 }
|
|
|
1646 &.frame {
|
|
|
1647 border: 1px solid $borders_color;
|
|
|
1648 // FIXME doesn't work
|
|
|
1649 &.top { border-top-width: 0; }
|
|
|
1650 &.bottom { border-bottom-width: 0; }
|
|
|
1651 &.right { border-right-width: 0; }
|
|
|
1652 &.left { border-left-width: 0; }
|
|
|
1653 &:backdrop { border-color: $backdrop_borders_color; }
|
|
|
1654 }
|
|
|
1655 &.header {
|
|
|
1656 // FIXME: double borders in some case, can't fix it w/o a class tho
|
|
|
1657 // FIXME: doesn't work on dark var
|
|
|
1658 background-color: mix($bg_color, $borders_color, 70%);
|
|
|
1659
|
|
|
1660 // this is the shading of the header behind the tabs
|
|
|
1661 &.frame {
|
|
|
1662 border: 1px solid $borders_color;
|
|
|
1663 &.top { border-bottom-width: 0; }
|
|
|
1664 &.bottom { border-top-width: 0; }
|
|
|
1665 &.right { border-left-width: 0; }
|
|
|
1666 &.left { border-right-width: 0; }
|
|
|
1667 &:backdrop { border-color: $backdrop_borders_color; }
|
|
|
1668 }
|
|
|
1669
|
|
|
1670 $_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85);
|
|
|
1671 &.top {
|
|
|
1672 box-shadow: $_header_shade,
|
|
|
1673 inset 0 -1px $borders_color; // border
|
|
|
1674 &:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; }
|
|
|
1675 }
|
|
|
1676 &.bottom {
|
|
|
1677 box-shadow: $_header_shade,
|
|
|
1678 inset 0 1px $borders_color;
|
|
|
1679 &:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; }
|
|
|
1680 }
|
|
|
1681 &.right {
|
|
|
1682 box-shadow: $_header_shade,
|
|
|
1683 inset 1px 0 $borders_color;
|
|
|
1684 &:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; }
|
|
|
1685 }
|
|
|
1686 &.left {
|
|
|
1687 box-shadow: $_header_shade,
|
|
|
1688 inset -1px 0 $borders_color;
|
|
|
1689 &:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; }
|
|
|
1690 }
|
|
|
1691 &:backdrop {
|
|
|
1692 // same color as backdrop pushed button
|
|
|
1693 background-color: $backdrop_dark_fill;
|
|
|
1694 box-shadow: none;
|
|
|
1695 }
|
|
|
1696 }
|
|
|
1697 tab {
|
|
|
1698 border-width: 0;
|
|
|
1699 border-style: solid;
|
|
|
1700 border-color: transparent;
|
|
|
1701 background-color: transparent;
|
|
|
1702
|
|
|
1703 outline-offset: 0;
|
|
|
1704
|
|
|
1705 $tab_indicator_size: 3px;
|
|
|
1706 //vertical tab sizing
|
|
|
1707 $vt_vpadding: 8px;
|
|
|
1708 $vt_hpadding: 20px;
|
|
|
1709 // horizontal tab sizing
|
|
|
1710 $ht_vpadding: 5px;
|
|
|
1711 $ht_hpadding: 20px;
|
|
|
1712
|
|
|
1713 //FIXME: we get double border in some cases, not considering the broken
|
|
|
1714 //notebook content frame...
|
|
|
1715 &.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
|
|
|
1716 &.left, &.right { padding: $ht_vpadding $ht_hpadding; }
|
|
|
1717
|
|
|
1718
|
|
|
1719 /* works for testnotebookdnd, but there's a superfluous border
|
|
|
1720 in gedit or web, commented out for now, needs gtk fixes
|
|
|
1721 &.reorderable-page {
|
|
|
1722 &.top {
|
|
|
1723 padding-top: ($vt_vpadding - 1px);
|
|
|
1724 border-top-width: 1px;
|
|
|
1725 border-left-width: 1px;
|
|
|
1726 border-right-width: 1px;
|
|
|
1727 }
|
|
|
1728 &.bottom {
|
|
|
1729 padding-bottom: ($vt_vpadding - 1px);
|
|
|
1730 border-bottom-width: 1px;
|
|
|
1731 border-left-width: 1px;
|
|
|
1732 border-right-width: 1px;
|
|
|
1733 }
|
|
|
1734 &.left {
|
|
|
1735 padding-left: ($ht_hpadding - 1px);
|
|
|
1736 border-left-width: 1px;
|
|
|
1737 border-top-width: 1px;
|
|
|
1738 border-bottom-width: 1px;
|
|
|
1739 }
|
|
|
1740 &.right {
|
|
|
1741 padding-right: ($ht_hpadding - 1px);
|
|
|
1742 border-right-width: 1px;
|
|
|
1743 border-top-width: 1px;
|
|
|
1744 border-bottom-width: 1px;
|
|
|
1745 }
|
|
|
1746 }
|
|
|
1747 */
|
|
|
1748 &.reorderable-page {
|
|
|
1749 &.top, &.bottom {
|
|
|
1750 padding-left: 12px; // for a nicer close button
|
|
|
1751 padding-right: 12px; // placement
|
|
|
1752 border-left-width: 1px;
|
|
|
1753 border-right-width: 1px;
|
|
|
1754 }
|
|
|
1755 &.left, &.right {
|
|
|
1756 border-bottom-width: 1px;
|
|
|
1757 border-top-width: 1px;
|
|
|
1758 }
|
|
|
1759 }
|
|
|
1760 &.top {
|
|
|
1761 //padding-bottom: ($vt_vpadding -$tab_indicator_size);
|
|
|
1762 border-bottom-width: $tab_indicator_size;
|
|
|
1763 }
|
|
|
1764 &.bottom {
|
|
|
1765 //padding-top: ($vt_vpadding -$tab_indicator_size);
|
|
|
1766 border-top-width: $tab_indicator_size;
|
|
|
1767 }
|
|
|
1768 &.left {
|
|
|
1769 //padding-right: ($ht_hpadding -$tab_indicator_size);
|
|
|
1770 border-right-width: $tab_indicator_size;
|
|
|
1771 }
|
|
|
1772 &.right {
|
|
|
1773 //padding-left: ($ht_hpadding -$tab_indicator_size);
|
|
|
1774 border-left-width: $tab_indicator_size;
|
|
|
1775 }
|
|
|
1776
|
|
|
1777 //here's the interesting stuff
|
|
|
1778 &:hover, &.prelight-page {
|
|
|
1779 border-color: $borders_color;
|
|
|
1780 }
|
|
|
1781 &:active, &.active-page, &:backdrop:active {
|
|
|
1782 border-color: $selected_bg_color;
|
|
|
1783 }
|
|
|
1784 &:backdrop {
|
|
|
1785 background-color: transparent;
|
|
|
1786 border-color: transparent;
|
|
|
1787 }
|
|
|
1788 @each $_tab, $_border in (top, bottom),
|
|
|
1789 (bottom, top),
|
|
|
1790 (left, right),
|
|
|
1791 (right, left) {
|
|
|
1792 &.reorderable-page.#{$_tab} {
|
|
|
1793 border-color: transparent;
|
|
|
1794 &:hover, &.prelight-page {
|
|
|
1795 border-color: transparentize($borders_color,0.7);
|
|
|
1796 border-#{$_border}-color: $borders_color;
|
|
|
1797 background-color: transparentize($bg_color,0.8);
|
|
|
1798 }
|
|
|
1799 &:active, &.active-page {
|
|
|
1800 background-color: transparentize($bg_color,0.5);
|
|
|
1801 border-color: transparentize($borders_color,0.5);
|
|
|
1802 border-#{$_border}-color: $selected_bg_color;
|
|
|
1803 &:hover { background-color: transparentize($bg_color,0.3); }
|
|
|
1804 &:backdrop {
|
|
|
1805 border-color: $backdrop_borders_color;
|
|
|
1806 background-color: $backdrop_bg_color;
|
|
|
1807 border-#{$_border}-color: $selected_bg_color;
|
|
|
1808 }
|
|
|
1809 }
|
|
|
1810 &:backdrop {
|
|
|
1811 border-color: transparent;
|
|
|
1812 background-color: transparent;
|
|
|
1813 }
|
|
|
1814 }
|
|
|
1815 }
|
|
|
1816 .label { //tab text
|
|
|
1817 padding: 0 2px; // needed for a nicer focus ring
|
|
|
1818 font-weight: bold;
|
|
|
1819 color: $insensitive_fg_color;
|
|
|
1820 &:backdrop, &.prelight-page:backdrop {
|
|
|
1821 color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
|
|
|
1822 }
|
|
|
1823 }
|
|
|
1824 .prelight-page .label, .label.prelight-page {
|
|
|
1825 // prelight tab text
|
|
|
1826 color: mix($fg_color, $insensitive_fg_color, 50%);
|
|
|
1827 &:backdrop { // FIXME, it's the same as .label:backdrop up here
|
|
|
1828 color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
|
|
|
1829 }
|
|
|
1830 }
|
|
|
1831 .active-page .label, .label.active-page {
|
|
|
1832 // active tab text
|
|
|
1833 color: $fg_color;
|
|
|
1834 &:backdrop { color: $backdrop_fg_color; }
|
|
|
1835 }
|
|
|
1836 .button { //tab close button
|
|
|
1837 padding: 0;
|
|
|
1838 border: 1px solid transparent;
|
|
|
1839 @extend %undecorated_button;
|
|
|
1840 icon-shadow: none;
|
|
|
1841 transition: none;
|
|
|
1842 color: transparentize($fg_color,0.7);
|
|
|
1843 &:hover {
|
|
|
1844 color: $fg_color;
|
|
|
1845 @include button(hover, $edge:none);
|
|
|
1846 background-image: none;
|
|
|
1847 box-shadow: none;
|
|
|
1848 }
|
|
|
1849 &:active {
|
|
|
1850 @include button(active, $edge:none);
|
|
|
1851 }
|
|
|
1852 &:backdrop {
|
|
|
1853 color: transparentize($backdrop_fg_color,0.7);
|
|
|
1854 border-color: transparent;
|
|
|
1855 }
|
|
|
1856 & > GtkImage { // this is a hack which makes tabs grow
|
|
|
1857 padding: 2px;
|
|
|
1858 }
|
|
|
1859 }
|
|
|
1860 }
|
|
|
1861 &.arrow {
|
|
|
1862 color: $insensitive_fg_color;
|
|
|
1863 &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); }
|
|
|
1864 &:active { color: $fg_color; }
|
|
|
1865 &:insensitive {
|
|
|
1866 color: transparentize($insensitive_fg_color,0.7);
|
|
|
1867 }
|
|
|
1868 &:backdrop {
|
|
|
1869 color: transparentize($backdrop_fg_color,0.6);
|
|
|
1870 &:insensitive {
|
|
|
1871 color: $backdrop_insensitive_color;
|
|
|
1872 }
|
|
|
1873 }
|
|
|
1874 }
|
|
|
1875 }
|
|
|
1876
|
|
|
1877 /**************
|
|
|
1878 * Scrollbars *
|
|
|
1879 **************/
|
|
|
1880
|
|
|
1881 .scrollbar {
|
|
|
1882 -GtkRange-slider-width: 13;
|
|
|
1883 -GtkRange-trough-border: 0;
|
|
|
1884 -GtkScrollbar-has-backward-stepper: false;
|
|
|
1885 -GtkScrollbar-has-forward-stepper: false;
|
|
|
1886 -GtkScrollbar-min-slider-length: 42; // minimum size for the slider.
|
|
|
1887 // sadly can't be in '.slider'
|
|
|
1888 // where it belongs
|
|
|
1889 -GtkRange-stepper-spacing: 0;
|
|
|
1890 -GtkRange-trough-under-steppers: 1;
|
|
|
1891
|
|
|
1892 $_slider_margin: 3px;
|
|
|
1893 $_slider_fine_tune_margin: 4px;
|
|
|
1894
|
|
|
1895 .button {
|
|
|
1896 border: none;
|
|
|
1897 }
|
|
|
1898
|
|
|
1899 &.overlay-indicator {
|
|
|
1900 &:not(.dragging):not(.hovering) { // Overlay scrolling indicator
|
|
|
1901 opacity: 0.4;
|
|
|
1902
|
|
|
1903 -GtkRange-slider-width: 5px;
|
|
|
1904
|
|
|
1905 .slider {
|
|
|
1906 margin: 0;
|
|
|
1907 background-color: $fg_color;
|
|
|
1908 border: 1px solid if($variant==light, white, black);
|
|
|
1909 background-clip: padding-box;
|
|
|
1910 }
|
|
|
1911
|
|
|
1912 .trough {
|
|
|
1913 border-style: none;
|
|
|
1914 background-color: transparent;
|
|
|
1915 }
|
|
|
1916
|
|
|
1917 // w/o the following margin tweaks the slider shrinks when hovering/dragging
|
|
|
1918 &.vertical .slider {
|
|
|
1919 margin-top: $_slider_margin - 1px;
|
|
|
1920 margin-bottom: $_slider_margin - 1px;
|
|
|
1921 }
|
|
|
1922
|
|
|
1923 &.horizontal .slider {
|
|
|
1924 margin-left: $_slider_margin - 1px;
|
|
|
1925 margin-right: $_slider_margin - 1px;
|
|
|
1926 }
|
|
|
1927
|
|
|
1928 }
|
|
|
1929
|
|
|
1930 &.dragging,
|
|
|
1931 &.hovering { opacity: 0.7; }
|
|
|
1932 }
|
|
|
1933
|
|
|
1934 // trough coloring
|
|
|
1935 .trough {
|
|
|
1936 background-color: $scrollbar_bg_color;
|
|
|
1937 border: 1px none $borders_color;
|
|
|
1938
|
|
|
1939 &:backdrop {
|
|
|
1940 background-color: $backdrop_scrollbar_bg_color;
|
|
|
1941 border-color: $backdrop_borders_color;
|
|
|
1942 }
|
|
|
1943 }
|
|
|
1944
|
|
|
1945 // slider coloring
|
|
|
1946 .slider {
|
|
|
1947 background-color: mix($fg_color, $bg_color, 60%);
|
|
|
1948
|
|
|
1949 &:hover { background-color: mix($fg_color, $bg_color, 80%); }
|
|
|
1950
|
|
|
1951 &:prelight:active { background-color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));}
|
|
|
1952
|
|
|
1953 &:backdrop { background-color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); }
|
|
|
1954
|
|
|
1955 &:insensitive {
|
|
|
1956 background-color: transparent;
|
|
|
1957 }
|
|
|
1958 }
|
|
|
1959
|
|
|
1960
|
|
|
1961 // sizing
|
|
|
1962 .slider {
|
|
|
1963 border-radius: 100px;
|
|
|
1964 margin: $_slider_margin;
|
|
|
1965 }
|
|
|
1966
|
|
|
1967 &.fine-tune .slider { margin: $_slider_fine_tune_margin; }
|
|
|
1968
|
|
|
1969 &.vertical {
|
|
|
1970
|
|
|
1971 .slider {
|
|
|
1972 margin-left: 1px + $_slider_margin;
|
|
|
1973
|
|
|
1974 &:dir(rtl) {
|
|
|
1975 margin-left: $_slider_margin;
|
|
|
1976 margin-right: 1px + $_slider_margin;
|
|
|
1977 }
|
|
|
1978 }
|
|
|
1979
|
|
|
1980 &.fine-tune .slider {
|
|
|
1981 margin-left: 1px + $_slider_fine_tune_margin;
|
|
|
1982
|
|
|
1983 &:dir(rtl) {
|
|
|
1984 margin-left: $_slider_fine_tune_margin;
|
|
|
1985 margin-right: 1px + $_slider_fine_tune_margin;
|
|
|
1986 }
|
|
|
1987 }
|
|
|
1988
|
|
|
1989 .trough {
|
|
|
1990 border-left-style: solid;
|
|
|
1991
|
|
|
1992 &:dir(rtl) {
|
|
|
1993 border-left-style: none;
|
|
|
1994 border-right-style: solid;
|
|
|
1995 }
|
|
|
1996 }
|
|
|
1997 }
|
|
|
1998
|
|
|
1999 &.horizontal {
|
|
|
2000
|
|
|
2001 .slider { margin-top: 1px + $_slider_margin; }
|
|
|
2002
|
|
|
2003 &.fine-tune .slider { margin-top: 1px + $_slider_fine_tune_margin; }
|
|
|
2004
|
|
|
2005 .trough { border-top-style: solid; }
|
|
|
2006 }
|
|
|
2007 }
|
|
|
2008
|
|
|
2009 .scrollbars-junction,
|
|
|
2010 .scrollbars-junction.frame { // the small square between two scrollbars
|
|
|
2011 border-color: transparent;
|
|
|
2012 // the border image is used to add the missing dot between the borders, details, details, details...
|
|
|
2013 border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
|
|
|
2014 background-color: $scrollbar_bg_color;
|
|
|
2015
|
|
|
2016 &:dir(rtl) { border-image-slice: 0 1 0 0; }
|
|
|
2017
|
|
|
2018 &:backdrop {
|
|
|
2019 border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
|
|
|
2020 background-color: $backdrop_scrollbar_bg_color;
|
|
|
2021 }
|
|
|
2022 }
|
|
|
2023
|
|
|
2024
|
|
|
2025 /**********
|
|
|
2026 * Switch *
|
|
|
2027 **********/
|
|
|
2028
|
|
|
2029 GtkSwitch {
|
|
|
2030 -GtkSwitch-slider-width: 45px; // 55px is the right value to make it as tall
|
|
|
2031 // as buttons, not doing that for now
|
|
|
2032 font-weight: bold;
|
|
|
2033 font-size: smaller;
|
|
|
2034 outline-offset: -4px;
|
|
|
2035 box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here
|
|
|
2036 _widget_edge(); // otherwise it gets
|
|
|
2037 // clipped
|
|
|
2038 &.trough {
|
|
|
2039 // similar to the .scale
|
|
|
2040 border: 1px solid $borders_color;
|
|
|
2041 border-radius: 3px;
|
|
|
2042 color: $fg_color;
|
|
|
2043 background-image: linear-gradient(to bottom, mix($bg_color, $borders_color, 60%));
|
|
|
2044 text-shadow: 0 1px transparentize(black, 0.9);
|
|
|
2045 &:active {
|
|
|
2046 @include progressbar_fill;
|
|
|
2047 color: white;
|
|
|
2048 border-color: $selected_borders_color;
|
|
|
2049 box-shadow: _widget_edge();
|
|
|
2050 text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
|
|
|
2051 0 0 2px transparentize(white, 0.4);
|
|
|
2052 }
|
|
|
2053 &:insensitive {
|
|
|
2054 color: $insensitive_fg_color;
|
|
|
2055 border-color: $borders_color;
|
|
|
2056 background-image: none;
|
|
|
2057 background-color: $insensitive_bg_color;
|
|
|
2058 box-shadow: _widget_edge();
|
|
|
2059 text-shadow: none;
|
|
|
2060 }
|
|
|
2061 &:backdrop {
|
|
|
2062 color: $backdrop_fg_color;
|
|
|
2063 border-color: $backdrop_borders_color;
|
|
|
2064 background-image: linear-gradient(to bottom, $backdrop_dark_fill);
|
|
|
2065 box-shadow: none;
|
|
|
2066 text-shadow: none;
|
|
|
2067 &:active {
|
|
|
2068 @if $variant == 'light' { color: $backdrop_bg_color; }
|
|
|
2069 border-color: if($variant == 'light', $selected_bg_color,
|
|
|
2070 $selected_borders_color);
|
|
|
2071 background-image: linear-gradient(to bottom, $selected_bg_color);
|
|
|
2072 box-shadow: none;
|
|
|
2073 }
|
|
|
2074 &:insensitive {
|
|
|
2075 color: $backdrop_insensitive_color;
|
|
|
2076 border-color: $backdrop_borders_color;
|
|
|
2077 background-image: none;
|
|
|
2078 background-color: $insensitive_bg_color;
|
|
|
2079 }
|
|
|
2080 }
|
|
|
2081 }
|
|
|
2082 &.slider {
|
|
|
2083 border: 1px solid;
|
|
|
2084 border-radius: 3px;
|
|
|
2085 @include button(normal);
|
|
|
2086 box-shadow: inset 0 1px if($variant=='light', white,
|
|
|
2087 transparentize(white, 0.85)),
|
|
|
2088 inset 0 -2px transparentize($bg_color, 0.4),
|
|
|
2089 inset 0 -1px mix($bg_color, $borders_color, 50%);
|
|
|
2090 &:hover {
|
|
|
2091 @include button(hover);
|
|
|
2092 box-shadow: inset 0 1px if($variant=='light', white,
|
|
|
2093 transparentize(white, 0.85)),
|
|
|
2094 inset 0 -2px transparentize($bg_color, 0.4),
|
|
|
2095 inset 0 -1px mix($bg_color, $borders_color, 50%);
|
|
|
2096 }
|
|
|
2097 &:active { border: 1px solid $selected_borders_color; }
|
|
|
2098 &:insensitive { @include button(insensitive, $edge:none); }
|
|
|
2099 &:backdrop {
|
|
|
2100 @include button(backdrop);
|
|
|
2101 box-shadow: none;
|
|
|
2102 &:active{
|
|
|
2103 border-color: if($variant == 'light', $selected_bg_color,
|
|
|
2104 $selected_borders_color);
|
|
|
2105 }
|
|
|
2106 &:insensitive {
|
|
|
2107 @include button(backdrop-insensitive);
|
|
|
2108 box-shadow: none;
|
|
|
2109 }
|
|
|
2110 }
|
|
|
2111 }
|
|
|
2112 .list-row:selected & {
|
|
|
2113 @if $variant == 'light' {
|
|
|
2114 box-shadow: none;
|
|
|
2115 border-color: $selected_borders_color;
|
|
|
2116 &:backdrop { border-color: $selected_borders_color; }
|
|
|
2117 &.slider:dir(rtl) { border-left-color: $borders_color; }
|
|
|
2118 &.slider:dir(ltr) { border-right-color: $borders_color; }
|
|
|
2119 &.slider,
|
|
|
2120 &.slider:active { border-color: $selected_borders_color; }
|
|
|
2121 }
|
|
|
2122 }
|
|
|
2123
|
|
|
2124 }
|
|
|
2125
|
|
|
2126 /*************************
|
|
|
2127 * Check and Radio items *
|
|
|
2128 *************************/
|
|
|
2129
|
|
|
2130 // draw regular check and radio items using our PNG assets
|
|
|
2131 // all assets are rendered from assets.svg. never add pngs directly
|
|
|
2132
|
|
|
2133 $asset_suffix: if($variant=='dark', '-dark', '');
|
|
|
2134 @each $w,$a in ('check', 'checkbox'),
|
|
|
2135 ('radio','radio') {
|
|
|
2136
|
|
|
2137 //standard checks and radios
|
|
|
2138 @each $s,$as in ('','-unchecked'),
|
|
|
2139 (':hover', '-unchecked-hover'),
|
|
|
2140 (':active', '-unchecked-active'),
|
|
|
2141 (':insensitive','-unchecked-insensitive'),
|
|
|
2142 (':backdrop', '-unchecked-backdrop'),
|
|
|
2143 (':backdrop:insensitive', '-unchecked-backdrop-insensitive'),
|
|
|
2144 (':inconsistent', '-mixed'),
|
|
|
2145 (':inconsistent:hover', '-mixed-hover'),
|
|
|
2146 (':inconsistent:selected', '-mixed-active'),
|
|
|
2147 (':inconsistent:backdrop', '-mixed-backdrop'),
|
|
|
2148 (':inconsistent:insensitive', '-mixed-insensitive'),
|
|
|
2149 (':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'),
|
|
|
2150 (':checked', '-checked'),
|
|
|
2151 (':checked:insensitive','-checked-insensitive'),
|
|
|
2152 (':checked:hover', '-checked-hover'),
|
|
|
2153 (':checked:active', '-checked-active'),
|
|
|
2154 (':backdrop:checked', '-checked-backdrop'),
|
|
|
2155 (':backdrop:checked:insensitive', '-checked-backdrop-insensitive') {
|
|
|
2156 .#{$w}#{$s} {
|
|
|
2157 -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
|
|
|
2158 url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
|
|
|
2159 icon-shadow: if(str-index($s,"backdrop"), none, 0 1px 0 $borders_edge); //no edge highlight for :backdrop
|
|
|
2160 &.button.flat { icon-shadow: none; }
|
|
|
2161 }
|
|
|
2162 @if $variant == 'light' {
|
|
|
2163 // the borders of the light variant versions of checks and radios are
|
|
|
2164 // too similar in luminosity to the selected background color, hence
|
|
|
2165 // we need special casing.
|
|
|
2166 .view.#{$w}#{$s}:selected,
|
|
|
2167 .list-row:selected .#{$w}#{$s} {
|
|
|
2168 -gtk-icon-source: -gtk-scaled(url("assets/selected-#{$a}#{$as}#{$asset_suffix}.png"),
|
|
|
2169 url("assets/selected-#{$a}#{$as}#{$asset_suffix}@2.png"));
|
|
|
2170 }
|
|
|
2171 }
|
|
|
2172 }
|
|
|
2173
|
|
|
2174 //menu
|
|
|
2175 .menu .menuitem.#{$w} {
|
|
|
2176 -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
|
|
|
2177 color: mix($fg_color, $bg_color, 60%);
|
|
|
2178 icon-shadow: none;
|
|
|
2179 &:active, &:checked {
|
|
|
2180 -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic');
|
|
|
2181 }
|
|
|
2182 &:inconsistent {
|
|
|
2183 -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic');
|
|
|
2184 }
|
|
|
2185 &:hover { color: $selected_fg_color; }
|
|
|
2186 &:insensitive { color: mix($insensitive_fg_color, $bg_color, 50%); }
|
|
|
2187 }
|
|
|
2188 }
|
|
|
2189
|
|
|
2190 //treeview and list-rows
|
|
|
2191 .view.check, .view.radio,
|
|
|
2192 .list-row .check, list-row .radio {
|
|
|
2193 icon-shadow: none;
|
|
|
2194 &:selected, &:hover { icon-shadow: none; }
|
|
|
2195 }
|
|
|
2196
|
|
|
2197 //content view (grid/list)
|
|
|
2198
|
|
|
2199 .content-view {
|
|
|
2200 background-color: darken($bg_color,7%);
|
|
|
2201 &:backdrop { background-color: darken($bg_color,7%); }
|
|
|
2202 &.rubberband { @extend .rubberband; }
|
|
|
2203 }
|
|
|
2204
|
|
|
2205 //selection-mode
|
|
|
2206 @each $s,$as in ('','-selectionmode'),
|
|
|
2207 (':hover', '-hover-selectionmode'),
|
|
|
2208 (':active', '-active-selectionmode'),
|
|
|
2209 (':backdrop', '-backdrop-selectionmode'),
|
|
|
2210 (':checked', '-checked-selectionmode'),
|
|
|
2211 (':checked:hover', '-checked-hover-selectionmode'),
|
|
|
2212 (':checked:active', '-checked-active-selectionmode'),
|
|
|
2213 (':backdrop:checked', '-checked-backdrop-selectionmode') {
|
|
|
2214 .view.content-view.check#{$s} {
|
|
|
2215 icon-shadow: none;
|
|
|
2216 -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
|
|
|
2217 url("assets/checkbox#{$as}@2.png"));
|
|
|
2218 background-color: transparent;
|
|
|
2219 }
|
|
|
2220 }
|
|
|
2221
|
|
|
2222 GtkCheckButton.text-button, GtkRadioButton.text-button {
|
|
|
2223 // this is for a nice focus on check and radios text
|
|
|
2224 padding: 1px 2px 4px;
|
|
|
2225 outline-offset: 0;
|
|
|
2226 &:insensitive,
|
|
|
2227 &:insensitive:active,
|
|
|
2228 &:insensitive:inconsistent {
|
|
|
2229 // set insensitive color, which is overriden otherwise
|
|
|
2230 color: $insensitive_fg_color;
|
|
|
2231 &:backdrop { color: $backdrop_insensitive_color; }
|
|
|
2232 }
|
|
|
2233 }
|
|
|
2234
|
|
|
2235 /************
|
|
|
2236 * GtkScale *
|
|
|
2237 ************/
|
|
|
2238 .scale,
|
|
|
2239 .scale.scale-has-marks-above.scale-has-marks-below,
|
|
|
2240 .scale.vertical.scale-has-marks-above.scale-has-marks-below {
|
|
|
2241 // FIXME: rationalize
|
|
|
2242 -GtkScale-slider-length: 20;
|
|
|
2243 -GtkRange-slider-width: 20;
|
|
|
2244 -GtkRange-trough-border: 2;
|
|
|
2245 outline-offset: -9px;
|
|
|
2246 outline-radius: 4px;
|
|
|
2247
|
|
|
2248 &.fine-tune {
|
|
|
2249 outline-offset: -7px;
|
|
|
2250 outline-radius: 6px;
|
|
|
2251 &.trough {
|
|
|
2252 margin: 8px;
|
|
|
2253 border-radius: 4px;
|
|
|
2254 }
|
|
|
2255 }
|
|
|
2256
|
|
|
2257 &.slider {
|
|
|
2258 //FIXME: better gradient on the slider and hover state
|
|
|
2259 @include button(normal);
|
|
|
2260 border: 1px solid;
|
|
|
2261 border-radius: 50%;
|
|
|
2262 border-color: darken($borders_color,3%);
|
|
|
2263 box-shadow: inset 0 1px if($variant=='light', white,
|
|
|
2264 transparentize(white,0.85)),
|
|
|
2265 inset 0 #{-2px} $bg_color,
|
|
|
2266 inset 0 #{-1px} mix($bg_color, $borders_color, 50%);
|
|
|
2267 &:hover {
|
|
|
2268 @include button(hover);
|
|
|
2269 border-color: darken($borders_color,3%);
|
|
|
2270 border-radius: 50%; // needed for double marks scales
|
|
|
2271 box-shadow: inset 0 1px if($variant=='light', white,
|
|
|
2272 transparentize(white, 0.85)),
|
|
|
2273 inset 0 #{-2px} if($variant=='light', white,
|
|
|
2274 transparentize(white, 0.86)),
|
|
|
2275 inset 0 #{-1px} mix($bg_color, $borders_color, 70%);
|
|
|
2276 }
|
|
|
2277 &:insensitive {
|
|
|
2278 border-style: solid; // needed for double marks scales or they'll get
|
|
|
2279 border-radius: 50%; // overridden
|
|
|
2280 background-image: linear-gradient(to bottom, $insensitive_bg_color);
|
|
|
2281 box-shadow: none;
|
|
|
2282 }
|
|
|
2283 &:backdrop {
|
|
|
2284 border-style: solid; // needed for double marks scales or they'll get
|
|
|
2285 border-radius: 50%; // overridden
|
|
|
2286 border-color: darken($backdrop_borders_color,3%);
|
|
|
2287 background-image: linear-gradient(to bottom, $backdrop_bg_color);
|
|
|
2288 box-shadow: none;
|
|
|
2289 }
|
|
|
2290 &:backdrop:insensitive {
|
|
|
2291 @include button(backdrop-insensitive);
|
|
|
2292 }
|
|
|
2293 &:active {
|
|
|
2294 border: 1px solid if($variant=='light',darken($selected_borders_color,3%),
|
|
|
2295 darken($selected_bg_color,15%));
|
|
|
2296 }
|
|
|
2297 //OSD sliders
|
|
|
2298 .osd & {
|
|
|
2299 @include button(osd);
|
|
|
2300 background-color: opacify($osd_bg_color, 1);
|
|
|
2301 &:hover { @include button(osd-hover); }
|
|
|
2302 &:active { @include button(osd-active); }
|
|
|
2303 &:backdrop { @include button(osd-backdrop); }
|
|
|
2304 }
|
|
|
2305 }
|
|
|
2306 &.trough {
|
|
|
2307 margin: 10px;
|
|
|
2308 border: 1px solid $borders_color;
|
|
|
2309 border-radius: 3px;
|
|
|
2310 background-color: mix($bg_color, $borders_color, 60%);
|
|
|
2311 box-shadow: inset 1px 1px transparentize(black, 0.9),
|
|
|
2312 _widget_edge();
|
|
|
2313 &.highlight {
|
|
|
2314 @include progressbar_fill;
|
|
|
2315 border-color: $selected_borders_color;
|
|
|
2316 box-shadow: _widget_edge();
|
|
|
2317 &.vertical { @include progressbar_fill(vertical); }
|
|
|
2318 &:backdrop {
|
|
|
2319 border-color: if($variant=='light', $selected_bg_color,
|
|
|
2320 $selected_borders_color);
|
|
|
2321 background-color: $selected_bg_color;
|
|
|
2322 box-shadow: none;
|
|
|
2323 }
|
|
|
2324 }
|
|
|
2325 &:insensitive, &.vertical:insensitive {
|
|
|
2326 border-color: $insensitive_borders_color;
|
|
|
2327 background-image: none;
|
|
|
2328 background-color: $insensitive_bg_color;
|
|
|
2329 box-shadow: _widget_edge();
|
|
|
2330 }
|
|
|
2331 &:backdrop {
|
|
|
2332 border-color: $backdrop_borders_color;
|
|
|
2333 background-color: mix($backdrop_bg_color, $borders_color, 50%);
|
|
|
2334 box-shadow: none;
|
|
|
2335 }
|
|
|
2336 &:backdrop:insensitive, .highlight:backdrop:insensitive {
|
|
|
2337 border-color: $backdrop_borders_color;
|
|
|
2338 background-color: $insensitive_bg_color;
|
|
|
2339 }
|
|
|
2340 //OSD troughs
|
|
|
2341 .osd & {
|
|
|
2342 border-color: $osd_borders_color;
|
|
|
2343 box-shadow: none;
|
|
|
2344 margin: 9px;
|
|
|
2345 &.fine-tune { margin: 7px; }
|
|
|
2346 background-color: transparentize($osd_borders_color, 0.2);
|
|
|
2347 outline-color: transparentize($osd_fg_color, 0.8);
|
|
|
2348 outline-offset: -8px;
|
|
|
2349 &.highlight {
|
|
|
2350 background-image: none;
|
|
|
2351 background-color: $selected_bg_color;
|
|
|
2352 }
|
|
|
2353 &:insensitive, &:backdrop:insensitive {
|
|
|
2354 border-color: transparent;
|
|
|
2355 background-color: transparent;
|
|
|
2356 }
|
|
|
2357 &:backdrop {
|
|
|
2358 border-color: $osd_borders_color;
|
|
|
2359 background-image: none;
|
|
|
2360 }
|
|
|
2361 }
|
|
|
2362 }
|
|
|
2363 }
|
|
|
2364
|
|
|
2365 $asset_suffix: if($variant=='dark', '-dark', '');
|
|
|
2366 @each $d,$dn in ('', 'horz'),
|
|
|
2367 ('.vertical', 'vert') {
|
|
|
2368 @each $w,$we in ('scale-has-marks-below','scale_marks_below'),
|
|
|
2369 ('scale-has-marks-above','scale_marks_above') {
|
|
|
2370 .scale#{$d}.#{$w} {
|
|
|
2371 -GtkScale-slider-length: 20;
|
|
|
2372 -GtkRange-slider-width: 24;
|
|
|
2373 -GtkRange-trough-border: 2;
|
|
|
2374
|
|
|
2375 @extend %#{$we}_#{$dn};
|
|
|
2376
|
|
|
2377 @each $s,$as in ('',''),
|
|
|
2378 (':hover','-hover'),
|
|
|
2379 (':active','-active'),
|
|
|
2380 (':insensitive','-insensitive'),
|
|
|
2381 (':backdrop','-backdrop'),
|
|
|
2382 (':backdrop:insensitive','-backdrop-insensitive') {
|
|
|
2383 &.slider#{$s} {
|
|
|
2384 $_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
|
|
|
2385 border-style: none;
|
|
|
2386 border-radius: 0;
|
|
|
2387 background-color: transparent;
|
|
|
2388 background-image: -gtk-scaled(url('#{$_url}.png'),
|
|
|
2389 url('#{$_url}@2.png'));
|
|
|
2390 background-repeat: no-repeat;
|
|
|
2391 background-position: center;
|
|
|
2392 box-shadow: none;
|
|
|
2393 }
|
|
|
2394 }
|
|
|
2395 }
|
|
|
2396 }
|
|
|
2397 }
|
|
|
2398
|
|
|
2399 %scale_marks_above_horz {
|
|
|
2400 .trough { margin: 14px 10px 10px; }
|
|
|
2401 &.fine-tune .trough { margin: 12px 8px 8px; }
|
|
|
2402 }
|
|
|
2403 %scale_marks_below_horz {
|
|
|
2404 .trough { margin: 10px 10px 14px; }
|
|
|
2405 &.fine-tune .trough { margin: 8px 8px 12px; }
|
|
|
2406 }
|
|
|
2407 %scale_marks_above_vert {
|
|
|
2408 .trough { margin: 10px 10px 10px 14px; }
|
|
|
2409 &.fine-tune .trough { margin: 8px 8px 8px 12px; }
|
|
|
2410 }
|
|
|
2411 %scale_marks_below_vert {
|
|
|
2412 .trough { margin: 10px 14px 10px 10px; }
|
|
|
2413 &.fine-tune .trough { margin: 8px 12px 8px 8px; }
|
|
|
2414 }
|
|
|
2415
|
|
|
2416 /*****************
|
|
|
2417 * Progress bars *
|
|
|
2418 *****************/
|
|
|
2419
|
|
|
2420 GtkProgressBar {
|
|
|
2421 padding: 0;
|
|
|
2422 font-size: smaller;
|
|
|
2423 color: transparentize($fg_color, 0.6);
|
|
|
2424 box-shadow: inset 1px 1px transparentize(black, 0.9), // needs to be set
|
|
|
2425 _widget_edge(); // here ot it gets
|
|
|
2426 // clipped
|
|
|
2427 &:backdrop {
|
|
|
2428 color: $backdrop_insensitive_color;
|
|
|
2429 }
|
|
|
2430 &.osd {
|
|
|
2431 -GtkProgressBar-xspacing: 0;
|
|
|
2432 -GtkProgressBar-yspacing: 0;
|
|
|
2433 -GtkProgressBar-min-horizontal-bar-height: 3;
|
|
|
2434 }
|
|
|
2435 &.trough { // background
|
|
|
2436 border: 1px solid $borders_color;
|
|
|
2437 border-radius: 3px;
|
|
|
2438 background-color: mix($borders_color, $bg_color, 35%);
|
|
|
2439 &:backdrop{
|
|
|
2440 border-color: $backdrop_borders_color;
|
|
|
2441 background-color: $backdrop_dark_fill;
|
|
|
2442 box-shadow: 0 1px transparentize(white,1);
|
|
|
2443 }
|
|
|
2444 &.osd {
|
|
|
2445 border-style: none;
|
|
|
2446 background-color: transparent;
|
|
|
2447 box-shadow: none;
|
|
|
2448 }
|
|
|
2449 }
|
|
|
2450 }
|
|
|
2451
|
|
|
2452 // moving bit
|
|
|
2453 .progressbar {
|
|
|
2454 @include progressbar_fill;
|
|
|
2455 border: 1px solid $selected_borders_color;
|
|
|
2456 border-radius: 1.5px;
|
|
|
2457 box-shadow: none; //needed for clipping
|
|
|
2458 &.left {
|
|
|
2459 border-top-left-radius: 3px;
|
|
|
2460 border-bottom-left-radius: 3px;
|
|
|
2461 }
|
|
|
2462 &.right {
|
|
|
2463 border-top-right-radius: 3px;
|
|
|
2464 border-bottom-right-radius: 3px;
|
|
|
2465 }
|
|
|
2466 &.left.right {
|
|
|
2467 box-shadow: none;
|
|
|
2468 }
|
|
|
2469 &.vertical {
|
|
|
2470 @include progressbar_fill(vertical);
|
|
|
2471 &.bottom {
|
|
|
2472 border-bottom-left-radius: 3px;
|
|
|
2473 border-bottom-right-radius: 3px;
|
|
|
2474 box-shadow: none;
|
|
|
2475 }
|
|
|
2476 &.top {
|
|
|
2477 border-top-left-radius: 3px;
|
|
|
2478 border-top-right-radius: 3px;
|
|
|
2479 }
|
|
|
2480 }
|
|
|
2481 &:backdrop {
|
|
|
2482 border-color: if($variant=='light', $selected_bg_color,
|
|
|
2483 $selected_borders_color);
|
|
|
2484 background-image: none;
|
|
|
2485 background-color: $selected_bg_color;
|
|
|
2486 box-shadow: none;
|
|
|
2487 }
|
|
|
2488 &.osd {
|
|
|
2489 background-image: none;
|
|
|
2490 background-color: $selected_bg_color;
|
|
|
2491 border-style: none;
|
|
|
2492 border-radius: 0;
|
|
|
2493 }
|
|
|
2494 }
|
|
|
2495
|
|
|
2496
|
|
|
2497 /*************
|
|
|
2498 * Level Bar *
|
|
|
2499 *************/
|
|
|
2500
|
|
|
2501 .level-bar.vertical {
|
|
|
2502 -GtkLevelBar-min-block-width: 3;
|
|
|
2503 -GtkLevelBar-min-block-height: 34;
|
|
|
2504 }
|
|
|
2505
|
|
|
2506 .level-bar {
|
|
|
2507 box-shadow: _widget_edge(); // needs to be set here to avoid clipping
|
|
|
2508 -GtkLevelBar-min-block-width: 34;
|
|
|
2509 -GtkLevelBar-min-block-height: 3;
|
|
|
2510 &.vertical {
|
|
|
2511 -GtkLevelBar-min-block-width: 3;
|
|
|
2512 -GtkLevelBar-min-block-height: 34;
|
|
|
2513 }
|
|
|
2514 &.trough {
|
|
|
2515 border: 1px solid;
|
|
|
2516 padding: 2px;
|
|
|
2517 border-radius: 3px;
|
|
|
2518 @include entry(normal);
|
|
|
2519 &:backdrop {
|
|
|
2520 @include entry(backdrop);
|
|
|
2521 }
|
|
|
2522 }
|
|
|
2523 &.fill-block {
|
|
|
2524 // FIXME: it would be nice to set make fill blocks bigger, but we'd need
|
|
|
2525 // :nth-child working on discrete indicators
|
|
|
2526 border: 1px solid if($variant=='light', darken($selected_bg_color,10%),
|
|
|
2527 darken($selected_bg_color,5%));
|
|
|
2528 background-color: $selected_bg_color;
|
|
|
2529 box-shadow: 0 1px transparentize(black, 0.9);
|
|
|
2530 border-radius: 1px;
|
|
|
2531 &:backdrop {
|
|
|
2532 border-color: $selected_bg_color;
|
|
|
2533 box-shadow: none;
|
|
|
2534 }
|
|
|
2535 &.indicator-discrete {
|
|
|
2536 &.horizontal { margin: 0 1px; }
|
|
|
2537 &.vertical { margin: 1px 0; }
|
|
|
2538 }
|
|
|
2539 &.level-high {
|
|
|
2540 border-color: darken($success_color,10%);
|
|
|
2541 background-color: $success_color;
|
|
|
2542 &:backdrop { border-color: $success_color; }
|
|
|
2543 }
|
|
|
2544 &.level-low {
|
|
|
2545 border-color: darken($warning_color,10%);
|
|
|
2546 background-color: $warning_color;
|
|
|
2547 &:backdrop { border-color: $warning_color; };
|
|
|
2548 }
|
|
|
2549 &.empty-fill-block {
|
|
|
2550 background-color: transparent;
|
|
|
2551 border-color: if($variant=='light', transparentize($fg_color,0.8),
|
|
|
2552 transparentize($fg_color,0.9));
|
|
|
2553 box-shadow: none;
|
|
|
2554 &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); }
|
|
|
2555 }
|
|
|
2556 }
|
|
|
2557 }
|
|
|
2558
|
|
|
2559
|
|
|
2560 /**********
|
|
|
2561 * Frames *
|
|
|
2562 **********/
|
|
|
2563 .frame {
|
|
|
2564 border: 1px solid $borders_color;
|
|
|
2565 &.flat { border-style: none; }
|
|
|
2566 &:backdrop { border-color: $backdrop_borders_color; }
|
|
|
2567 padding: 0;
|
|
|
2568 &.action-bar {
|
|
|
2569 padding: 6px;
|
|
|
2570 border-width: 1px 0 0;
|
|
|
2571 }
|
|
|
2572 }
|
|
|
2573
|
|
|
2574 GtkScrolledWindow {
|
|
|
2575 GtkViewport.frame { // avoid double borders when viewport inside
|
|
|
2576 // scrolled window
|
|
|
2577 border-style: none;
|
|
|
2578 }
|
|
|
2579 }
|
|
|
2580
|
|
|
2581 //vbox and hbox separators
|
|
|
2582 .separator {
|
|
|
2583 // always disable separators
|
|
|
2584 // -GtkWidget-wide-separators: true;
|
|
|
2585 color: transparentize(black, 0.9);
|
|
|
2586
|
|
|
2587 // Font and File button separators
|
|
|
2588 GtkFileChooserButton &.vertical,
|
|
|
2589 GtkFontButton &.vertical {
|
|
|
2590 // always disable separators
|
|
|
2591 -GtkWidget-wide-separators: true;
|
|
|
2592 }
|
|
|
2593 }
|
|
|
2594
|
|
|
2595 /*********
|
|
|
2596 * Lists *
|
|
|
2597 *********/
|
|
|
2598
|
|
|
2599 .list, .list-row {
|
|
|
2600 background-color: $base_color;
|
|
|
2601 border-color: $borders_color;
|
|
|
2602 &:backdrop {
|
|
|
2603 background-color: $backdrop_base_color;
|
|
|
2604 border-color: $backdrop_borders_color;
|
|
|
2605 }
|
|
|
2606 }
|
|
|
2607
|
|
|
2608 .list-row,
|
|
|
2609 .grid-child {
|
|
|
2610 padding: 2px;
|
|
|
2611 }
|
|
|
2612
|
|
|
2613 .list-row.button,
|
|
|
2614 .list-row.button:backdrop,
|
|
|
2615 .list-row.button:backdrop:active,
|
|
|
2616 .list-row.button:backdrop:checked,
|
|
|
2617 .list-row.button:backdrop:insensitive,
|
|
|
2618 .list-row.button:backdrop:insensitive:active,
|
|
|
2619 .list-row.button:backdrop:insensitive:checked,
|
|
|
2620 .list-row.button:insensitive:active,
|
|
|
2621 .list-row.button:insensitive:checked {
|
|
|
2622 // reset button inherited stuff
|
|
|
2623 @extend %undecorated_button;
|
|
|
2624 background-color: transparentize($base_color,1); // for the transition
|
|
|
2625 border-style: none; // I need no borders here
|
|
|
2626 border-radius: 0; // and no rounded corners
|
|
|
2627 box-shadow: none; // and no box-shadow
|
|
|
2628
|
|
|
2629 }
|
|
|
2630
|
|
|
2631 .list-row.button {
|
|
|
2632 // let's take care of background colors
|
|
|
2633 &:hover {
|
|
|
2634 background-color: mix($fg_color, $base_color, 5%);
|
|
|
2635 }
|
|
|
2636 &:active {
|
|
|
2637 box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
|
|
|
2638 }
|
|
|
2639 &:backdrop:hover { background-color: transparent; }
|
|
|
2640 &:selected {
|
|
|
2641 &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
|
|
|
2642 &:hover {
|
|
|
2643 background-color: mix($fg_color, $selected_bg_color, 10%);
|
|
|
2644 }
|
|
|
2645 &:backdrop { background-color: $selected_bg_color; }
|
|
|
2646 }
|
|
|
2647 }
|
|
|
2648
|
|
|
2649 .list-row:selected {
|
|
|
2650 @extend %selected_items;
|
|
|
2651 .button {
|
|
|
2652 @include button(normal, $edge:none);
|
|
|
2653 @if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
2654 &.flat {
|
|
|
2655 @include button(undecorated, $edge:none);
|
|
|
2656 color: $selected_fg_color;
|
|
|
2657 }
|
|
|
2658 &:hover {
|
|
|
2659 @include button(hover, $edge:none);
|
|
|
2660 @if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
2661 }
|
|
|
2662 &:active, &:checked {
|
|
|
2663 @include button(active, $edge:none);
|
|
|
2664 @if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
2665 }
|
|
|
2666 &:backdrop, &.flat:backdrop {
|
|
|
2667 @include button(backdrop, $edge:none);
|
|
|
2668 @if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
2669 &:active, &:checked {
|
|
|
2670 @include button(backdrop-active, $edge:none);
|
|
|
2671 @if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
2672 }
|
|
|
2673 &:insensitive {
|
|
|
2674 @include button(backdrop-insensitive, $edge:none);
|
|
|
2675 @if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
2676 &:active, &:checked {
|
|
|
2677 @include button(backdrop-insensitive-active, $edge:none);
|
|
|
2678 @if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
2679 }
|
|
|
2680 }
|
|
|
2681 }
|
|
|
2682 &.flat:backdrop {
|
|
|
2683 @include button(undecorated);
|
|
|
2684 color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color);
|
|
|
2685 }
|
|
|
2686 &:insensitive {
|
|
|
2687 @include button(insensitive, $edge:none);
|
|
|
2688 @if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
2689 &:active, &:checked { @include button(insensitive-active, $edge:none); }
|
|
|
2690 }
|
|
|
2691 //FIXME: make placeholder with buttons w/o edge to be extended around
|
|
|
2692 // istead of repeating everytime this stuff.
|
|
|
2693 }
|
|
|
2694 }
|
|
|
2695
|
|
|
2696 // transition
|
|
|
2697 .list-row, list-row.button {
|
|
|
2698 transition: all 300ms $ease-out-quad;
|
|
|
2699 &:hover { transition: none; }
|
|
|
2700 }
|
|
|
2701
|
|
|
2702
|
|
|
2703 /*********************
|
|
|
2704 * App Notifications *
|
|
|
2705 *********************/
|
|
|
2706
|
|
|
2707 .app-notification,
|
|
|
2708 .app-notification.frame {
|
|
|
2709 @extend %osd;
|
|
|
2710 padding: 10px;
|
|
|
2711 border: none;
|
|
|
2712 border-radius: 0 0 6px 6px;
|
|
|
2713 background-color: $osd_bg_color;
|
|
|
2714 background-image: linear-gradient(to bottom, transparentize(black, 0.8),
|
|
|
2715 transparent 2px);
|
|
|
2716 background-clip: padding-box;
|
|
|
2717 &:backdrop { background-image: none; }
|
|
|
2718 .button {
|
|
|
2719 @include button(osd);
|
|
|
2720 &.flat {
|
|
|
2721 @extend %undecorated_button;
|
|
|
2722 icon-shadow: 0 1px black;
|
|
|
2723 text-shadow: 0 1px black;
|
|
|
2724 &:backdrop,
|
|
|
2725 &:insensitive,
|
|
|
2726 &:backdrop:insensitive { @extend %undecorated_button; }
|
|
|
2727 }
|
|
|
2728 &:hover { @include button(osd-hover); }
|
|
|
2729 &:active,
|
|
|
2730 &:checked,
|
|
|
2731 &:backdrop:active,
|
|
|
2732 &:backdrop:checked {
|
|
|
2733 @include button(osd-active);
|
|
|
2734 }
|
|
|
2735 &:insensitive,
|
|
|
2736 &:backdrop:insensitive {
|
|
|
2737 @include button(osd-insensitive);
|
|
|
2738 }
|
|
|
2739 &:backdrop { @include button(osd-backdrop); }
|
|
|
2740 }
|
|
|
2741 }
|
|
|
2742
|
|
|
2743 /*************
|
|
|
2744 * Expanders *
|
|
|
2745 *************/
|
|
|
2746
|
|
|
2747 .expander {
|
|
|
2748 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
|
2749 &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
|
2750 &:hover { color: lighten($fg_color,30%); } //only lightens the arrow
|
|
|
2751 &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
|
2752 }
|
|
|
2753
|
|
|
2754 /************
|
|
|
2755 * Calendar *
|
|
|
2756 ***********/
|
|
|
2757 GtkCalendar {
|
|
|
2758 color: $text_color;
|
|
|
2759 border: 1px solid $borders_color;
|
|
|
2760
|
|
|
2761 &:selected {
|
|
|
2762 @extend .view:selected;
|
|
|
2763 }
|
|
|
2764
|
|
|
2765 &.header {
|
|
|
2766 border: 1px solid transparentize(black, 0.9);
|
|
|
2767 border-radius: 0;
|
|
|
2768
|
|
|
2769 &:backdrop { border-color: transparentize(black, 0.9); }
|
|
|
2770 }
|
|
|
2771
|
|
|
2772 &.button {
|
|
|
2773 @extend %undecorated_button;
|
|
|
2774 color: transparentize($fg_color, 0.55);
|
|
|
2775
|
|
|
2776 &:hover {
|
|
|
2777 @extend %undecorated_button;
|
|
|
2778 color: $fg_color;
|
|
|
2779 }
|
|
|
2780
|
|
|
2781 &:backdrop {
|
|
|
2782 @extend %undecorated_button;
|
|
|
2783 color: transparentize($backdrop_fg_color,0.55);
|
|
|
2784 }
|
|
|
2785 }
|
|
|
2786
|
|
|
2787 &:inconsistent, &:inconsistent:backdrop,
|
|
|
2788 &.highlight, &.highlight:backdrop { color: gtkalpha(currentColor, 0.55); }
|
|
|
2789
|
|
|
2790
|
|
|
2791 &:backdrop {
|
|
|
2792 color: $backdrop_text_color;
|
|
|
2793 border-color: $backdrop_borders_color;
|
|
|
2794 }
|
|
|
2795 }
|
|
|
2796
|
|
|
2797 /***********
|
|
|
2798 * Dialogs *
|
|
|
2799 ***********/
|
|
|
2800
|
|
|
2801 .message-dialog .dialog-action-area .button {
|
|
|
2802 padding: 8px;
|
|
|
2803 }
|
|
|
2804
|
|
|
2805 .message-dialog { // Message Dialog styling
|
|
|
2806 -GtkDialog-button-spacing: 0;
|
|
|
2807
|
|
|
2808 @if $variant==light {
|
|
|
2809 // the bright variant as a slightly darker bg which in this case clashes with the window decoration, overriding
|
|
|
2810 &.background { background-color: $bg_color; }
|
|
|
2811 }
|
|
|
2812
|
|
|
2813 .titlebar {
|
|
|
2814 border-style: none;
|
|
|
2815 box-shadow: inset 0 1px $borders_edge;
|
|
|
2816 }
|
|
|
2817 &.csd { // rounded bottom border styling for csd version
|
|
|
2818 &.background {
|
|
|
2819 // bigger radius for better antialiasing
|
|
|
2820 border-bottom-left-radius: 9px;
|
|
|
2821 border-bottom-right-radius: 9px;
|
|
|
2822 }
|
|
|
2823 .dialog-action-area .button {
|
|
|
2824 padding: 12px;
|
|
|
2825 border-radius: 0;
|
|
|
2826 @include button(normal, $edge:none);
|
|
|
2827 @extend %middle_button;
|
|
|
2828 &:hover {
|
|
|
2829 @include button(hover, $edge:none);
|
|
|
2830 @extend %middle_button;
|
|
|
2831 }
|
|
|
2832 &:active {
|
|
|
2833 @include button(active, $edge:none);
|
|
|
2834 @extend %middle_button;
|
|
|
2835 }
|
|
|
2836 &:insensitive {
|
|
|
2837 @include button(insensitive, $edge:none);
|
|
|
2838 @extend %middle_button;
|
|
|
2839 }
|
|
|
2840 &:backdrop {
|
|
|
2841 @include button(backdrop, $edge:none);
|
|
|
2842 @extend %middle_button;
|
|
|
2843 }
|
|
|
2844 &:backdrop:insensitive {
|
|
|
2845 @include button(backdrop-insensitive, $edge:none);
|
|
|
2846 @extend %middle_button;
|
|
|
2847 }
|
|
|
2848 @each $b_type, $b_color in (suggested-action, $selected_bg_color),
|
|
|
2849 (destructive-action, $destructive_color) {
|
|
|
2850 &.#{$b_type} {
|
|
|
2851 @include button(normal, $b_color, white, $edge:none);
|
|
|
2852 @extend %middle_button;
|
|
|
2853 &:hover {
|
|
|
2854 @include button(hover, $b_color, white, $edge:none);
|
|
|
2855 @extend %middle_button;
|
|
|
2856 }
|
|
|
2857 &:active {
|
|
|
2858 @include button(active, $b_color, white, $edge:none);
|
|
|
2859 @extend %middle_button;
|
|
|
2860 }
|
|
|
2861 &:backdrop {
|
|
|
2862 @include button(backdrop, $b_color, white, $edge:none);
|
|
|
2863 @extend %middle_button;
|
|
|
2864 &:insensitive {
|
|
|
2865 @include button(backdrop-insensitive, $edge:none);
|
|
|
2866 @extend %middle_button;
|
|
|
2867 }
|
|
|
2868 }
|
|
|
2869 &:insensitive {
|
|
|
2870 @include button(insensitive, $edge:none);
|
|
|
2871 @extend %middle_button;
|
|
|
2872 }
|
|
|
2873 }
|
|
|
2874 }
|
|
|
2875 &:first-child{ @extend %first_button; }
|
|
|
2876 &:last-child { @extend %last_button; }
|
|
|
2877 }
|
|
|
2878 %middle_button {
|
|
|
2879 border-left-style: solid;
|
|
|
2880 border-right-style: none;
|
|
|
2881 border-bottom-style: none;
|
|
|
2882 }
|
|
|
2883 %last_button {
|
|
|
2884 border-bottom-right-radius: 7px;
|
|
|
2885 outline-bottom-right-radius: 5px;
|
|
|
2886 }
|
|
|
2887 %first_button {
|
|
|
2888 border-left-style: none;
|
|
|
2889 border-bottom-left-radius: 7px;
|
|
|
2890 outline-bottom-left-radius: 5px;
|
|
|
2891 }
|
|
|
2892 }
|
|
|
2893 }
|
|
|
2894
|
|
|
2895 GtkFileChooserDialog {
|
|
|
2896 .search-bar {
|
|
|
2897 background-color: $base_color;
|
|
|
2898 border-color: $bg_color;
|
|
|
2899 box-shadow: none;
|
|
|
2900 &:backdrop {
|
|
|
2901 background-color: $backdrop_base_color;
|
|
|
2902 border-color: $backdrop_bg_color;
|
|
|
2903 }
|
|
|
2904 }
|
|
|
2905 .dialog-action-box {
|
|
|
2906 border-top: 1px solid $borders_color;
|
|
|
2907 &:backdrop { border-top-color: $backdrop_borders_color; }
|
|
|
2908 }
|
|
|
2909 }
|
|
|
2910
|
|
|
2911 /***********
|
|
|
2912 * Sidebar *
|
|
|
2913 ***********/
|
|
|
2914
|
|
|
2915 .sidebar {
|
|
|
2916 border: none;
|
|
|
2917 background-color: $sidebar_bg_color;
|
|
|
2918
|
|
|
2919 &:backdrop {
|
|
|
2920 background-color: $backdrop_sidebar_bg_color;
|
|
|
2921 }
|
|
|
2922
|
|
|
2923 &:selected {
|
|
|
2924 @extend %selected_items;
|
|
|
2925 }
|
|
|
2926 }
|
|
|
2927
|
|
|
2928 // Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color
|
|
|
2929 GtkPlacesSidebar.sidebar .view {
|
|
|
2930
|
|
|
2931 color: $fg_color;
|
|
|
2932 background-color: transparent;
|
|
|
2933
|
|
|
2934 .separator,
|
|
|
2935 .separator:backdrop { @extend .separator; }
|
|
|
2936
|
|
|
2937 .image { // icons color
|
|
|
2938 color: mix($fg_color, $sidebar_bg_color, 70%);
|
|
|
2939
|
|
|
2940 &:selected {
|
|
|
2941 color: mix($selected_fg_color, $selected_bg_color, 90%);
|
|
|
2942
|
|
|
2943 &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 90%); }
|
|
|
2944 }
|
|
|
2945
|
|
|
2946 &:insensitive { color: mix($insensitive_fg_color, $sidebar_bg_color, 70%); }
|
|
|
2947
|
|
|
2948 &:backdrop {
|
|
|
2949 color: mix($backdrop_fg_color, $sidebar_bg_color, 70%);
|
|
|
2950
|
|
|
2951 &:insensitive { color: mix($backdrop_insensitive_color, $sidebar_bg_color, 70%); }
|
|
|
2952 }
|
|
|
2953 }
|
|
|
2954
|
|
|
2955 &:insensitive { color: $insensitive_fg_color; }
|
|
|
2956
|
|
|
2957 &:backdrop {
|
|
|
2958 color: $backdrop_fg_color;
|
|
|
2959
|
|
|
2960 &:insensitive { color: $backdrop_insensitive_color; }
|
|
|
2961 }
|
|
|
2962
|
|
|
2963 &:selected {
|
|
|
2964 @extend %selected_items;
|
|
|
2965 }
|
|
|
2966 }
|
|
|
2967
|
|
|
2968
|
|
|
2969 .sidebar-item {
|
|
|
2970 padding: 10px 4px;
|
|
|
2971 > .label {
|
|
|
2972 padding-left: 6px;
|
|
|
2973 padding-right: 6px;
|
|
|
2974 }
|
|
|
2975 &.needs-attention > .label {
|
|
|
2976 @extend %needs_attention;
|
|
|
2977 background-size: 6px 6px, 0 0;
|
|
|
2978 }
|
|
|
2979 }
|
|
|
2980
|
|
|
2981
|
|
|
2982 /*********
|
|
|
2983 * Paned *
|
|
|
2984 *********/
|
|
|
2985
|
|
|
2986 GtkPaned { // this is for the standard paned separator
|
|
|
2987
|
|
|
2988 -GtkPaned-handle-size: 1; // sets separator width
|
|
|
2989
|
|
|
2990 -gtk-icon-source: none; // removes handle decoration
|
|
|
2991 margin: 0 8px 8px 0; // drag area of the separator, not a real margin
|
|
|
2992 &:dir(rtl) {
|
|
|
2993 margin-right: 0;
|
|
|
2994 margin-left: 8px;
|
|
|
2995 }
|
|
|
2996 .pane-separator {
|
|
|
2997 background-color: $borders_color;
|
|
|
2998 &:backdrop {
|
|
|
2999 background-color: $backdrop_borders_color;
|
|
|
3000 }
|
|
|
3001 }
|
|
|
3002 }
|
|
|
3003
|
|
|
3004 GtkPaned.wide { // this is for the paned with wide separator
|
|
|
3005 -GtkPaned-handle-size: 5; // wider separator here
|
|
|
3006 margin: 0; // no need of the invisible drag area so, reset margin
|
|
|
3007 .pane-separator {
|
|
|
3008 background-color: transparent;
|
|
|
3009 border-style: none solid;
|
|
|
3010 border-color: $borders_color;
|
|
|
3011 border-width: 1px;
|
|
|
3012 }
|
|
|
3013 &.vertical .pane-separator { border-style: solid none;}
|
|
|
3014 .pane-separator:backdrop { border-color: $backdrop_borders_color; }
|
|
|
3015 }
|
|
|
3016
|
|
|
3017
|
|
|
3018 /**************
|
|
|
3019 * GtkInfoBar *
|
|
|
3020 **************/
|
|
|
3021 GtkInfoBar {
|
|
|
3022 border-style: none;
|
|
|
3023 }
|
|
|
3024
|
|
|
3025 .info,
|
|
|
3026 .question,
|
|
|
3027 .warning,
|
|
|
3028 .error {
|
|
|
3029 background-color: $selected_bg_color;
|
|
|
3030 color: $selected_fg_color;
|
|
|
3031 text-shadow: 0 1px darken($selected_bg_color, 10%);
|
|
|
3032 border-color: darken($selected_bg_color, 10%);
|
|
|
3033 .button {
|
|
|
3034 // FIXME: extend selection mode buttons
|
|
|
3035 @include button(normal, $selected_bg_color, $selected_fg_color, none);
|
|
|
3036 &:hover {
|
|
|
3037 @include button(hover, $selected_bg_color, $selected_fg_color, none); }
|
|
|
3038 &:active {
|
|
|
3039 @include button(active, $selected_bg_color, $selected_fg_color, none); }
|
|
|
3040 &:insensitive {
|
|
|
3041 @include button(insensitive,$selected_bg_color,$selected_fg_color,none); }
|
|
|
3042 &:backdrop {
|
|
|
3043 @include button(backdrop, $selected_bg_color, $selected_fg_color, none);
|
|
|
3044 border-color: _border_color($selected_bg_color);
|
|
|
3045 &:insensitive {
|
|
|
3046 @include button(backdrop-insensitive, $selected_bg_color,
|
|
|
3047 $selected_fg_color, none);
|
|
|
3048 border-color: _border_color($selected_bg_color);
|
|
|
3049 }
|
|
|
3050 }
|
|
|
3051 }
|
|
|
3052 .label:selected,
|
|
|
3053 .label:selected:focus,
|
|
|
3054 .label:selected:hover {
|
|
|
3055 background-color: darken($selected_bg_color, 10%);
|
|
|
3056 }
|
|
|
3057 }
|
|
|
3058
|
|
|
3059 /************
|
|
|
3060 * Tooltips *
|
|
|
3061 ************/
|
|
|
3062
|
|
|
3063 .tooltip {
|
|
|
3064 &.background {
|
|
|
3065 // background-color needs to be set this way otherwise it gets drawn twice
|
|
|
3066 // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
|
|
|
3067 background-color: transparentize(black, 0.2);
|
|
|
3068 background-clip: padding-box;
|
|
|
3069 border: 1px solid $tooltip_borders_color; // this suble border is meant to
|
|
|
3070 // not make the tooltip melt with
|
|
|
3071 // very dark backgrounds
|
|
|
3072 }
|
|
|
3073
|
|
|
3074 color: white;
|
|
|
3075 padding: 4px; /* not working */
|
|
|
3076 border-radius: 5px;
|
|
|
3077 box-shadow: none; // otherwise it gets inherited by windowframe.csd
|
|
|
3078 text-shadow: 0 1px black;
|
|
|
3079 // FIXME: we need a border or tooltips vanish on black background.
|
|
|
3080 &.window-frame.csd {
|
|
|
3081 background-color: transparent;
|
|
|
3082 }
|
|
|
3083 }
|
|
|
3084
|
|
|
3085 .tooltip * { //Yeah this is ugly
|
|
|
3086 padding: 4px;
|
|
|
3087 background-color: transparent;
|
|
|
3088 color: inherit; // just to be sure
|
|
|
3089 }
|
|
|
3090
|
|
|
3091 /*****************
|
|
|
3092 * Color Chooser *
|
|
|
3093 *****************/
|
|
|
3094
|
|
|
3095 GtkColorSwatch {
|
|
|
3096 // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
|
|
|
3097 // is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
|
|
|
3098 // is applied to the overlay box.
|
|
|
3099
|
|
|
3100 $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
|
|
3101
|
|
|
3102 $_colorswatch_radius: 5px;
|
|
|
3103
|
|
|
3104 box-shadow: $_colorswatch_shadow;
|
|
|
3105
|
|
|
3106 // take care of colorswatches on selected elements
|
|
|
3107 :selected & {
|
|
|
3108 box-shadow: none;
|
|
|
3109 &.overlay, &.overlay:hover {
|
|
|
3110 border-color: $selected_fg_color;
|
|
|
3111 }
|
|
|
3112 }
|
|
|
3113
|
|
|
3114 // we need to re-set the shadow here since it get axed by the previous bit
|
|
|
3115 &:selected { box-shadow: $_colorswatch_shadow; }
|
|
|
3116
|
|
|
3117 // base color corners rounding
|
|
|
3118 // to avoid the artifacts caused by rounded corner anti-aliasing the base color
|
|
|
3119 // sports a bigger radius.
|
|
|
3120 // nth-child is needed by the custom color strip.
|
|
|
3121 // The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
|
|
|
3122 // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser.
|
|
|
3123 &.top {
|
|
|
3124 border-top-left-radius: $_colorswatch-radius + 1px;
|
|
|
3125 border-top-right-radius: $_colorswatch-radius + 1px;
|
|
|
3126 }
|
|
|
3127 &.bottom {
|
|
|
3128 border-bottom-left-radius: $_colorswatch-radius + 1px;
|
|
|
3129 border-bottom-right-radius: $_colorswatch-radius + 1px;
|
|
|
3130 }
|
|
|
3131 &.left, &:first-child:not(.overlay):not(.top) {
|
|
|
3132 border-top-left-radius: $_colorswatch-radius + 1px;
|
|
|
3133 border-bottom-left-radius: $_colorswatch-radius + 1px;
|
|
|
3134 }
|
|
|
3135 &.right, &:last-child:not(.overlay):not(.bottom) {
|
|
|
3136 border-top-right-radius: $_colorswatch-radius + 1px;
|
|
|
3137 border-bottom-right-radius: $_colorswatch-radius + 1px;
|
|
|
3138 }
|
|
|
3139 &:only-child:not(.overlay) { border-radius: $_colorswatch-radius + 1px; }
|
|
|
3140
|
|
|
3141 // overlay corner rounding
|
|
|
3142 &.top > .overlay {
|
|
|
3143 border-top-left-radius: $_colorswatch-radius;
|
|
|
3144 border-top-right-radius: $_colorswatch-radius;
|
|
|
3145 }
|
|
|
3146 &.bottom > .overlay {
|
|
|
3147 border-bottom-left-radius: $_colorswatch-radius;
|
|
|
3148 border-bottom-right-radius: $_colorswatch-radius;
|
|
|
3149 }
|
|
|
3150 &:first-child:not(.top) > .overlay {
|
|
|
3151 border-top-left-radius: $_colorswatch-radius;
|
|
|
3152 border-bottom-left-radius: $_colorswatch-radius;
|
|
|
3153 }
|
|
|
3154 &:last-child:not(.bottom) > .overlay {
|
|
|
3155 border-top-right-radius: $_colorswatch-radius;
|
|
|
3156 border-bottom-right-radius: $_colorswatch-radius;
|
|
|
3157 }
|
|
|
3158 &:only-child > .overlay { border-radius: $_colorswatch-radius; }
|
|
|
3159
|
|
|
3160 // hover effect
|
|
|
3161 &:hover,
|
|
|
3162 &:hover:selected {
|
|
|
3163 background-image: linear-gradient(135deg, transparentize(white, 0.3),
|
|
|
3164 transparentize(white, 1) 50%);
|
|
|
3165 box-shadow: inset 0 1px transparentize(white, 0.6),
|
|
|
3166 inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
|
|
|
3167 &.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class
|
|
|
3168 background-image: linear-gradient(135deg, transparentize(white, 0.5),
|
|
|
3169 transparentize(white, 1) 50%);
|
|
|
3170 }
|
|
|
3171 }
|
|
|
3172 &:backdrop,
|
|
|
3173 &:backdrop:selected
|
|
|
3174 &.color-dark:backdrop,
|
|
|
3175 &.color-dark:backdrop:selected {
|
|
|
3176 background-image: none;
|
|
|
3177 box-shadow: none;
|
|
|
3178 }
|
|
|
3179
|
|
|
3180 // no hover effect for the colorswatch in the color editor
|
|
|
3181 GtkColorEditor & {
|
|
|
3182 border-radius: 3px; // same radius as the entry
|
|
|
3183 &:hover {
|
|
|
3184 background-image: none;
|
|
|
3185 box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
|
|
3186 }
|
|
|
3187 &:backdrop { box-shadow: none; }
|
|
|
3188 }
|
|
|
3189
|
|
|
3190 // indicator and keynav outline colors
|
|
|
3191 &.color-dark {
|
|
|
3192 color: white;
|
|
|
3193 outline-color: transparentize(black, 0.7);
|
|
|
3194 &:backdrop { color: transparentize(white, 0.7); }
|
|
|
3195 }
|
|
|
3196 &.color-light {
|
|
|
3197 color: black;
|
|
|
3198 outline-color: transparentize(white, 0.5);
|
|
|
3199 &:backdrop { color: transparentize(black, 0.7); }
|
|
|
3200 }
|
|
|
3201
|
|
|
3202 // border color
|
|
|
3203 &.overlay,
|
|
|
3204 &.overlay:selected {
|
|
|
3205 border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
|
|
3206 &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
|
|
|
3207 }
|
|
|
3208
|
|
|
3209 // make the add color button looks like, well, a button
|
|
|
3210 &#add-color-button {
|
|
|
3211 border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi
|
|
|
3212 border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set
|
|
|
3213 @include button(normal);
|
|
|
3214 &:hover { @include button(hover); }
|
|
|
3215 &:backdrop { @include button(backdrop); }
|
|
|
3216 .overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
|
|
|
3217 }
|
|
|
3218 }
|
|
|
3219
|
|
|
3220
|
|
|
3221 /********
|
|
|
3222 * Misc *
|
|
|
3223 ********/
|
|
|
3224
|
|
|
3225 .scale-popup .button { // +/- buttons on GtkVolumeButton popup
|
|
|
3226 padding: 6px;
|
|
|
3227 &:hover {
|
|
|
3228 @extend %undecorated_button;
|
|
|
3229 background-color: transparentize($fg_color,0.9);
|
|
|
3230 border-radius: 5px;
|
|
|
3231 }
|
|
|
3232 &:backdrop,
|
|
|
3233 &:backdrop:hover,
|
|
|
3234 &:backdrop:insensitive { @extend %undecorated_button; }
|
|
|
3235 }
|
|
|
3236
|
|
|
3237 GtkVolumeButton.button { padding: 8px; }
|
|
|
3238
|
|
|
3239 /**********************
|
|
|
3240 * Window Decorations *
|
|
|
3241 *********************/
|
|
|
3242
|
|
|
3243 .window-frame {
|
|
|
3244 border-radius: 7px 7px 0 0;
|
|
|
3245 // lamefun trick to get rounded borders regardless of CSD use
|
|
|
3246 border-width: 0px;
|
|
|
3247
|
|
|
3248 // this needs to be transparent
|
|
|
3249 // see bug #722563
|
|
|
3250 $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
|
|
|
3251 $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
|
|
|
3252
|
|
|
3253 box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
|
|
|
3254 0 0 0 1px $_wm_border; //doing borders with box-shadow
|
|
|
3255
|
|
|
3256 // FIXME rationalize window-frame shadows
|
|
|
3257
|
|
|
3258 /* this is used for the resize cursor area */
|
|
|
3259 margin: 10px;
|
|
|
3260
|
|
|
3261 &:backdrop {
|
|
|
3262 box-shadow: 0 2px 6px 2px transparentize(black, 0.8),
|
|
|
3263 0 0 0 1px $_wm_border_backdrop;
|
|
|
3264 }
|
|
|
3265 &.tiled {
|
|
|
3266 border-radius: 0;
|
|
|
3267 }
|
|
|
3268 &.popup {
|
|
|
3269 box-shadow: none;
|
|
|
3270 }
|
|
|
3271 // server-side decorations as used by mutter
|
|
|
3272 &.ssd {
|
|
|
3273 box-shadow: 0 0 0 1px $_wm_border; //just doing borders, wm draws actual shadows
|
|
|
3274 }
|
|
|
3275 &.csd {
|
|
|
3276 .popup {
|
|
|
3277 border-radius: 0;
|
|
|
3278 box-shadow: 0 1px 2px transparentize(black, 0.8),
|
|
|
3279 0 0 0 1px transparentize($_wm_border,0.1);
|
|
|
3280 }
|
|
|
3281 &.tooltip {
|
|
|
3282 border-radius: 5px;
|
|
|
3283 box-shadow: none;
|
|
|
3284 }
|
|
|
3285 &.message-dialog {
|
|
|
3286 border-radius: 7px;
|
|
|
3287 box-shadow: 0 1px 2px transparentize(black, 0.8),
|
|
|
3288 0 0 0 1px transparentize($_wm_border,0.1);
|
|
|
3289 }
|
|
|
3290 }
|
|
|
3291 &.solid-csd {
|
|
|
3292 border-radius: 0;
|
|
|
3293 margin: 4px;
|
|
|
3294 background-color: $backdrop_bg_color;
|
|
|
3295 border: solid 1px $backdrop_borders_color;
|
|
|
3296 box-shadow: none;
|
|
|
3297 }
|
|
|
3298 }
|
|
|
3299
|
|
|
3300 // Window Close button
|
|
|
3301 .header-bar .button.titlebutton,
|
|
|
3302 .titlebar .button.titlebutton {
|
|
|
3303 @extend .button;
|
|
|
3304 @extend .button.flat;
|
|
|
3305 @extend .image-button;
|
|
|
3306 @include _button_text_shadow;
|
|
|
3307 &:backdrop { icon-shadow: none; }
|
|
|
3308 }
|
|
|
3309
|
|
|
3310 .header-bar.selection-mode .button.titlebutton,
|
|
|
3311 .titlebar.selection-mode .button.titlebutton {
|
|
|
3312 @include _button_text_shadow(white, $selected_bg_color);
|
|
|
3313 &:backdrop { icon-shadow: none; }
|
|
|
3314 }
|
|
|
3315
|
|
|
3316
|
|
|
3317 // catch all extend :)
|
|
|
3318
|
|
|
3319 %selected_items {
|
|
|
3320 background-color: $selected_bg_color;
|
|
|
3321 color: $selected_fg_color;
|
|
|
3322 @if $variant == 'light' {
|
|
|
3323 outline-color: transparentize($selected_fg_color, 0.7);
|
|
|
3324 }
|
|
|
3325 &:backdrop {
|
|
|
3326 color: $backdrop_selected_fg_color;
|
|
|
3327 background-color: $backdrop_selected_bg_color;
|
|
|
3328 }
|
|
|
3329 }
|
|
|
3330
|
|
|
3331 /* Decouple the font of context menus from their entry/textview */
|
|
|
3332 .touch-selection,
|
|
|
3333 .context-menu {
|
|
|
3334 font: initial;
|
|
|
3335 }
|
|
|
3336
|
|
|
3337 .monospace {
|
|
|
3338 font: Monospace;
|
|
|
3339 }
|
|
|
3340
|
|
|
3341 // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
|
|
|
3342 // This draws a box on top of the content, the size changes programmatically.
|
|
|
3343 .overshoot {
|
|
|
3344 &.top {
|
|
|
3345 @include overshoot(top);
|
|
|
3346 &:backdrop { @include overshoot(top, backdrop); }
|
|
|
3347 }
|
|
|
3348 &.bottom {
|
|
|
3349 @include overshoot(bottom);
|
|
|
3350 &:backdrop { @include overshoot(bottom, backdrop); }
|
|
|
3351 }
|
|
|
3352 &.left {
|
|
|
3353 @include overshoot(left);
|
|
|
3354 &:backdrop { @include overshoot(left, backdrop); }
|
|
|
3355 }
|
|
|
3356 &.right {
|
|
|
3357 @include overshoot(right);
|
|
|
3358 &:backdrop { @include overshoot(right, backdrop); }
|
|
|
3359 }
|
|
|
3360 }
|
|
|
3361
|
|
|
3362 // Overflow indication, works similarly to the overshoot, the size if fixed tho.
|
|
|
3363 .undershoot {
|
|
|
3364 &.top {
|
|
|
3365 @include undershoot(top);
|
|
|
3366 }
|
|
|
3367
|
|
|
3368 &.bottom {
|
|
|
3369 @include undershoot(bottom);
|
|
|
3370 }
|
|
|
3371
|
|
|
3372 &.left {
|
|
|
3373 @include undershoot(left);
|
|
|
3374 }
|
|
|
3375
|
|
|
3376 &.right {
|
|
|
3377 @include undershoot(right);
|
|
|
3378 }
|
|
|
3379 }
|
