Mercurial > repos > other > Adwaita-Dark-Green

comparison gtk-4.4/gtk.scss @ 98:9da64f7bb19c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add support for GTK4 Includes `gtk-minimal.css`, which can be used to override Adwaita colours by running `ln -s ~/.themes/Adwaita-Dark-Green/gtk-4.4/gtk-minimal.css ~/.config/gtk-4.0/gtk.css`
author IBBoard <dev@ibboard.co.uk>
date Sat, 26 Mar 2022 20:03:44 +0000
parents
children 374207f64e2f
comparison
equal deleted inserted replaced
97:d721ae7a505b 98:9da64f7bb19c
1 // General guidelines:
2 // - very unlikely you want to edit something else than _common.scss
3 // - keep the number of defined colors to a minimum, use the color blending functions if
4 // you need a subtle shade
5 // - if you need to inverse a color function use the @if directive to match for dark $variant
6
7
8
9 // FIXME: Backdrop checkboxes in treeview go from white to black in backdrop
10 // FIXME: Radio buttons in tree view go square when selected
11 // FIXME: Header bar now has a bottom border (may not be necessary, but adjusts positioning fractionally)
12 // FIXME: Strange lines appear in icon view on page 2 when clicking an icon
13
14 // XXX: Header bar buttons are flatter now
15
16
17
18 /// TODO:
19 /// * Firefox GTK3 defaults to grey page background (".background" CSS rule)
20 /// - https://bugzilla.mozilla.org/show_bug.cgi?id=1268618
21 /// - Can't fudge this because Synapse uses the background colour and
22 /// seems to create its own gradient from it
23 /// * LibreOffice button-menus (e.g. "More numbering" under bullet styles) have green-on-green
24 /// text on hover
25 ///
26 /// Unresolvable issues:
27 /// * Gnome Terminal uses #C6C6C6 for background
28 /// - This is because it uses @theme_base_color, and that is our base colour.
29 /// The only way to change it in the theme is to change the base colour, but
30 /// that would affect anything that relies on the base colour.
31 /// * Nautilus pathbar style doesn't properly change from "in bar" to "no bar"
32 /// when making the window wider. It needs an unfocus/focus cycle
33 /// - This is an Adwaita/Nautilus problem and can be seen in the base theme
34
35 $variant: 'light';
36 $contrast: 'normal';
37
38 // Import the colours
39 @import 'colors-custom';
40
41 // Import the default widgets
42 @import 'drawing';
43 // Style everything
44 @import 'common';
45
46 @import 'colors-public-custom';
47
48
49
50
51
52
53 /**************************
54 * *
55 * Adwaita Dark Overrides *
56 * *
57 * And now do our own *
58 * overrides of styling! *
59 * *
60 **************************/
61
62 avatar { border-radius: 4px }
63
64
65 *:disabled {
66 -gtk-icon-filter: opacity(0.5);
67 }
68
69 /***************
70 * Header bars *
71 ***************/
72 %titlebar,
73 headerbar {
74 color: $title_fg;
75 background-image: linear-gradient(to bottom, lighten($bg_dark_color, 3%) 0%, $bg_dark_color 45%);
76 border-color: shade($bg_dark_color, 0.90);
77 border-bottom-width: 0;
78 box-shadow: inset 0 2px $titlebar_highlight, inset 0 1px $header_button_border;
79 background-color: $bg_dark_color;
80
81 &:backdrop {
82 color: $fg_dark_color;
83 box-shadow: none;
84 background-color: $bg_dark_color;
85 background-image: none;
86 border-bottom-width: 0;
87 border-color: darken($bg_dark_color, 10%);
88 }
89
90 .title {
91 color: $title_fg;
92 }
93
94 .subtitle {
95 }
96
97 .tiled &,
98 .maximized & { &:backdrop, & { }}
99
100 &.default-decoration {
101 button.titlebutton {
102 }
103 }
104
105 label {
106 &, &:backdrop {
107 color: $fg_dark_color;
108 }
109 }
110
111 popover label {
112 &, &:backdrop {
113 color: $fg_color;
114 }
115 }
116 }
117
118 headerbar {
119 entry,
120 spinbutton,
121 separator,
122 button {
123 }
124 switch {
125 }
126 }
127
128 .background:not(.tiled):not(.maximized) .titlebar {
129 &:backdrop, & {
130 }
131 }
132
133 headerbar {
134 window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
135 window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { }}
136
137 window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { }}
138 }
139
140 .titlebar:not(headerbar) {
141 window.csd > & {
142 // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
143 padding: 0;
144 background-color: transparent;
145 background-image: none;
146 border-style: none;
147 border-color: transparent;
148 box-shadow: none;
149 }
150
151 > separator { background-color: $borders_color; }
152
153 @extend %titlebar;
154 }
155
156 headerbar button {
157 &, &:backdrop {
158 &, &:checked {
159 &, & label, & label:backdrop {
160 color: $fg_dark_color;
161 }
162 }
163 }
164 }
165 headerbar popover modelbutton {
166 &, &.title, & label {
167 color: $fg_color;
168 }
169 }
170 %titlebar headerbar:not(.selection-mode),
171 headerbar:not(.selection-mode) {
172 // FIXME: Tweak Tool header menu button not working
173 button, stackswitcher button {
174 color: $fg_dark_color;
175 background-image: linear-gradient(to bottom, $header_button_raised_gradient_color_a, $bg_dark_color);
176 text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
177 -gtk-icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
178 border-color: $header_button_border;
179 outline-color: $header_button_raised_gradient_color_a;
180 box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a;
181
182 &.flat, &.titlebutton {
183 color: $fg_dark_color;
184 background-image: none;
185 background-color: transparent;
186 border-color: transparent;
187 box-shadow: none;
188 text-shadow: none;
189 -gtk-icon-shadow: none;
190
191 &:hover, &:active, &:backdrop, &:checked {
192 color: $title_fg;
193 }
194 &:backdrop {
195 border-color: transparent;
196 }
197 }
198
199 &:hover, &.titlebutton:hover {
200 color: shade($fg_dark_color, 1.3);
201 outline-color: $header_button_raised_gradient_color_a;
202 border-color: $header_button_border;
203 background-image: linear-gradient(to bottom, shade($header_button_raised_gradient_color_a, 1.1), shade($bg_dark_color, 1.1));
204 text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
205 -gtk-icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
206 box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a;
207 }
208
209 &:active,
210 &:checked, &.titlebutton:active, &.titlebutton:active:backdrop, &.titlebutton:checked, &.titlebutton:checked:backdrop {
211 color: $title_fg;
212 outline-color: $header_button_raised_gradient_color_a;
213 border-color: $header_button_border;
214 background-image: linear-gradient(to bottom, $bg_dark_color, $header_button_checked);
215 text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
216 -gtk-icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
217 box-shadow: inset 0 1px transparentize($header_button_raised_gradient_color_a, 0.7), 0 1px $header_button_raised_gradient_color_a;
218 }
219
220 &:backdrop {
221 color: $fg_dark_color;
222 background-image: none;
223 background-color: $bg_dark_color;
224 border-color: $header_button_border;
225 box-shadow:none;
226 text-shadow: none;
227 -gtk-icon-shadow: none;
228
229 transition: $backdrop_transition;
230 -gtk-icon-filter: none;
231
232 &:active,
233 &:checked {
234 background-image: none;
235 background-color: $header_button_checked;
236 border-color: $header_button_border;
237 }
238
239 &:disabled, &.suggested-action:disabled {
240 color: $insensitive_dark_fg_color;
241 background-color: $bg_dark_color;
242 background-image: none;
243 border-color: $header_button_border;
244 box-shadow: none;
245
246 &:active,
247 &:checked { }
248 }
249 }
250
251 &.flat { &:backdrop, &:disabled, &:backdrop:disabled { } }
252
253 &:disabled, &.suggested-action:disabled {
254 color: $insensitive_dark_fg_color;
255 background-color: $bg_dark_color;
256 background-image: none;
257 border-color: $header_button_border;
258 box-shadow: 0 1px $header_button_raised_gradient_color_a;
259 }
260
261 &:drop(active) {
262 color: $drop_target_color;
263 border-color: $drop_target_color;
264 box-shadow: inset 0 0 0 1px $drop_target_color;
265 }
266 &.suggested-action {
267 @include button(normal, $selected_bg_color, white);
268 &.flat {
269 @include button(undecorated);
270
271 color: $selected_bg_color; //FIXME: does it work on the dark variant?
272 }
273
274 &:hover { @include button(hover, $selected_bg_color, white); }
275
276 &:active,
277 &:checked { @include button(active, $selected_bg_color, white); }
278
279 &:backdrop,
280 &.flat:backdrop {
281 @include button(backdrop, $selected_bg_color, white);
282 border-color: $selected_bg_border;
283
284 &:active,
285 &:checked { @include button(backdrop-active, $selected_bg_color, $insensitive_dark_fg_color); }
286
287 &:disabled, &:disabled label {
288 color: $insensitive_dark_fg_color;
289 background-color: $bg_dark_color;
290 background-image: none;
291 border-color: $header_button_border;
292 box-shadow: none;
293
294 &:active,
295 &:checked { @include button(backdrop-insensitive-active, $selected_bg_color, white); }
296 }
297 }
298
299 &.flat {
300 &:backdrop, &:disabled, &:backdrop:disabled {
301 @include button(undecorated);
302
303 color: transparentize($selected_bg_color, 0.2);
304 }
305 }
306 }
307 // &.suggested-action:backdrop {
308 // @include button(normal, $selected_bg_color, white);
309 // }
310 //
311 // &.suggested-action label { color: $selected_fg_color; }
312 }
313 }
314
315 column-header button, column-header headerbar button.titlebutton, headerbar column-header button.titlebutton,
316 column-header .titlebar button.titlebutton,
317 .titlebar column-header button.titlebutton {
318 color: $fg_color;
319 background-color: $bg_gradient_2;}
320 column-header button:hover, column-header headerbar button.titlebutton:hover, headerbar column-header button.titlebutton:hover,
321 column-header .titlebar button.titlebutton:hover,
322 .titlebar column-header button.titlebutton:hover {
323 color: $fg_color_emphasis; }
324
325 %entry,
326 entry {
327 background-color: $text_input_color;
328 &:disabled { background-color: $insensitive_bg_color; }
329 &:backdrop { background-color: $backdrop_text_input_color; }
330 &:backdrop:disabled { background-color: $insensitive_bg_color; }
331 }
332 spinbutton:not(.vertical) button:hover {
333 background-color: transparentize($bg_color,0.6);
334 border-top-color: transparent;
335 border-top-style: solid;
336 border-top-width:1px;
337 border-bottom-color: transparent;
338 border-bottom-style: solid;
339 border-bottom-width:1px;
340 background-clip: padding-box;
341 }
342
343 .view, .view text, iconview, iconview text, textview, textview text {
344 color: $text_color;
345 background-color: $text_input_color;
346 &:backdrop, &:backdrop:hover {
347 color: $backdrop_text_color;
348 background-color: $backdrop_text_input_color;
349 }
350 &:selected {
351 color: $selected_fg_color;
352 background-color: $selected_bg_color;
353 }
354 //&:hover {
355 // background-color: mix($fg_color, $text_input_color, 5%);
356 //}
357 &:active {
358 box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
359 }
360 &:selected {
361 &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
362 &:hover {
363 background-color: mix($fg_color, $selected_bg_color, 10%);
364 }
365 &:backdrop { background-color: $selected_bg_color; }
366 }
367 }
368
369 list, list-row, list-row.button {
370 background-color: darken($text_input_color, 6%);
371 &:backdrop, &:backdrop:hover {
372 color: $backdrop_text_color;
373 background-color: darken($backdrop_text_input_color, 6%);
374 }
375 &:selected {
376 color: $selected_fg_color;
377 background-color: $selected_bg_color;
378 }
379 &:hover {
380 background-color: mix($fg_color, darken($text_input_color, 6%), 5%);
381 }
382 &:active {
383 box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
384 }
385 &:selected {
386 &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
387 &:hover {
388 background-color: mix($fg_color, $selected_bg_color, 10%);
389 }
390 &:backdrop { background-color: $selected_bg_color; }
391 }
392 }
393
394 .sidebar list {
395 background: transparent;
396 }
397
398 // The path bar box in Open dialogs is classed as a view, but we don't
399 // want it that light
400 #pathbarbox {
401 background-color: $bg_color;
402 }
403 list-row {
404 // Set sidebar items back to something reasonable
405 &.sidebar-item {
406 background-color: $sidebar_bg_color;
407 border-color: $borders_color;
408 &:backdrop, &:backdrop:hover {
409 background-color: $backdrop_sidebar_bg_color;
410 border-color: $backdrop_borders_color;
411 }
412 // let's take care of background colors
413 &:hover {
414 background-color: mix($fg_color, $base_color, 5%);
415 }
416 &:active {
417 box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
418 }
419 &:selected {
420 background-color: $selected_bg_color;
421 &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
422 &:hover {
423 background-color: mix($fg_color, $selected_bg_color, 10%);
424 }
425 &:backdrop { background-color: $selected_bg_color; }
426 }
427 }
428 }
429
430 /* Fudge the Nautilus icon view background colour in the only way that seems to work */
431 .nautilus-window notebook > stack > box > grid { background-color: $text_input_color; }
432
433 /* And make the Nautilus places bar a bit darker, as it used to be */
434 placessidebar list {
435 background-color: $sidebar_bg_color;
436 border-color: $borders_color;
437 &:backdrop {
438 background-color: $backdrop_sidebar_bg_color;
439 border-color: $backdrop_borders_color;
440 }
441 }
442
443 // Fix the rubberband background after we gave lists and views a lighter background
444 .view.rubberband {
445 background-color: transparentize($selected_bg_color,0.8);
446 }
447 menubar {
448 background-color: $bg_dark_color;
449 color: $menu_fg_dark_color;
450 box-shadow: inset 0 -1px transparentize(black, 0.9);
451 &:backdrop {
452 background-color: $bg_dark_color;
453 color: $menu_fg_dark_color;
454 }
455 }
456
457 // Make all menus dark - we mainly want the menu bar menus dark, but
458 // Firefox and other non-standard apps use those colours for their
459 // context menus as well, so be consistent.
460 menubar popover.menu.background > contents {
461 border-top-width: 0;
462 border-radius: 0 0 9px 9px;
463 background-color: $bg_dark_color;
464 color: $menu_fg_dark_color;
465 border-color: $header_button_border;
466
467 & modelbutton.flat:selected, & modelbutton.flat:hover {
468 background-color: $selected_bg_color;
469 color: $selected_fg_color;
470 }
471 & check, & radio {
472 color: $menu_fg_dark_color;
473 &:hover {
474 color: $selected_fg_color;
475 }
476 }
477 }
478 // Except combo box backgrounds. We want those to be grey, like the
479 // combobox itself
480 popover.menu, #gtk-combobox-popup-menu {
481 color: $fg_color;
482 }
483 // Top-level menu text needs to be tweaked to match dark menus
484 menubar {
485 & > item {
486 &, & > label {
487 &:hover { //Seems like it :hover even with keyboard focus
488 color: $selected_bg_color
489 }
490 &:backdrop {
491 color: $menu_fg_dark_color;
492 }
493 & menuitem.check, & menuitem.radio {
494 color: $fg_dark_color;
495 }
496 }
497 }
498 }
499
500 .floating-bar {
501 opacity: 0.9;
502 color: $text_color;
503 background-color: $text_input_color;
504 border: 1px solid $borders_color;
505
506 @each $tb,$tb_corner in ('top','bottom'),
507 ('bottom','top') {
508 @each $lr,$lr_corner in ('left','right'),
509 ('right','left') {
510 &.#{$tb}.#{$lr} {
511 border-#{$tb_corner}-#{$lr_corner}-radius: 3px;
512 border-#{$tb}-width: 0;
513 border-#{$lr}-width: 0;
514 }
515 }
516 }
517 }
518
519 treeview.view header button {
520 &, &:hover, &:active, &:disabled {
521 &, &:backdrop {
522 border-color: lighten($borders_color, 20%);
523 }
524 }
525 }
526
527 treeview.view header button:last-child {
528 &:hover {
529 border-right-width: 0;
530 }
531 }
532
533 // Lighten selected tabs a bit to match other UI
534 notebook {
535 > header {
536 tab {
537 &:checked {
538 &.reorderable-page {
539 border-color: $borders_color;
540 background-color: $bg_color;
541 &:hover { background-color: lighten($bg_color, 5%); }
542 }
543 }
544
545 &:backdrop:checked {
546 &.reorderable-page {
547 background-color: $backdrop_bg_color;
548 }
549 }
550 }
551 }
552 }
553
554 // Stop the disabled spin button being dark grey
555 spinbutton:not(.vertical) button:backdrop:disabled { background: transparent none; }
556
557 // Fix the category icons in the Emoji input box
558 .emoji-section label {
559 font-family: "Symbola";
560 font-weight: bold;
561 font-size: 125%
562 }
563
564
565 // GTK 3.24 updates
566 headerbar frame > border, headerbar .frame,
567 headerbar frame > border:backdrop, headerbar .frame:backdrop
568 { border-color: $header_button_border; }
569
570 // Later GTK 3.24 updates
571 check, radio {
572 & {
573 // for unchecked
574 $_c: if($variant=='light', lighten($bg_color, 5%), $bg_color);
575
576 @each $state, $t in ("", "normal"),
577 (":hover", "hover"),
578 (":active", "active"),
579 (":disabled", "insensitive") {
580 &#{$state} {
581 @include check($t, $_c);
582 }
583 }
584 }
585
586 & {
587 // for checked
588 @each $t in (':checked'), (':indeterminate') {
589 &#{$t} {
590 @each $state, $t in ("", "normal"),
591 (":hover", "hover"),
592 (":active", "active"),
593 (":disabled", "insensitive") {
594 &#{$state} {
595 @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
596 }
597 }
598 }
599 }
600 }
601 }
602
603 button {
604 &.suggested-action {
605 @include button(normal, $selected_bg_color, white);
606 &.flat {
607 @include button(undecorated);
608
609 color: $selected_bg_color; //XXX: does it work on the dark variant?
610 }
611
612 &:hover { @include button(hover, $selected_bg_color, white); }
613
614 &:active,
615 &:checked { @include button(active, $selected_bg_color, white); }
616
617 &:backdrop,
618 &.flat:backdrop {
619 @include button(backdrop, $selected_bg_color, white);
620 border-color: $selected_bg_border;
621
622 &:active,
623 &:checked { @include button(backdrop-active, $selected_bg_color, $insensitive_dark_fg_color); }
624
625 &:disabled, &:disabled label {
626 color: $insensitive_dark_fg_color;
627 background-color: $bg_dark_color;
628 background-image: none;
629 border-color: $header_button_border;
630 box-shadow: none;
631
632 &:active,
633 &:checked { @include button(backdrop-insensitive-active, $selected_bg_color, white); }
634 }
635 }
636
637 &.flat {
638 &:backdrop, &:disabled, &:backdrop:disabled {
639 @include button(undecorated);
640
641 color: transparentize($selected_bg_color, 0.2);
642 }
643 }
644 }
645 }
646
647 popover.background {
648 .csd & {
649 $_popover_border: if($variant=='light', transparentize(black, 0.6), transparentize(black, 0.25));
650
651 border-color: $_popover_border;
652 }
653 }
654
655 infobar {
656 &.action:hover > revealer > box {
657 background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 22%), 30%),
658 desaturate(darken(invert($selected_bg_color), 42%), 70%));
659 }
660 .info,
661 &.question,
662 &.warning,
663 &.error {
664 > revealer > box {
665 background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 20%), 30%),
666 desaturate(darken(invert($selected_bg_color), 40%), 70%));
667 }
668 }
669 }