Mercurial > repos > other > Adwaita-Dark-Green
comparison gtk-3.20/_common.scss @ 43:d8eaee5178b7
Update to GTK 3.22 at revision ecf9c06
author | IBBoard <dev@ibboard.co.uk> |
---|---|
date | Sat, 01 Apr 2017 11:21:01 +0100 |
parents | 1b8713fff1e1 |
children | b85e4f7ff7c8 |
comparison
equal
deleted
inserted
replaced
42:464e0bd93ed9 | 43:d8eaee5178b7 |
---|---|
29 | 29 |
30 // We use the outline properties to signal the focus properties | 30 // We use the outline properties to signal the focus properties |
31 // to the adwaita engine: using real CSS properties is faster, | 31 // to the adwaita engine: using real CSS properties is faster, |
32 // and we don't use any outlines for now. | 32 // and we don't use any outlines for now. |
33 | 33 |
34 outline-color: transparentize($fg_color, 0.7); | 34 outline-color: gtkalpha(currentColor, 0.3); |
35 outline-style: dashed; | 35 outline-style: dashed; |
36 outline-offset: -3px; | 36 outline-offset: -3px; |
37 outline-width: 1px; | 37 outline-width: 1px; |
38 -gtk-outline-radius: 2px; | 38 -gtk-outline-radius: 2px; |
39 | 39 |
96 background-color: $base_color; | 96 background-color: $base_color; |
97 | 97 |
98 &:backdrop { | 98 &:backdrop { |
99 color: $backdrop_text_color; | 99 color: $backdrop_text_color; |
100 background-color: $backdrop_base_color; | 100 background-color: $backdrop_base_color; |
101 &:disabled { color: $backdrop_insensitive_color; } | |
102 } | |
103 | |
104 &:disabled { | |
105 color: $insensitive_fg_color; | |
106 background-color: $insensitive_bg_color; | |
101 } | 107 } |
102 | 108 |
103 &:selected { | 109 &:selected { |
104 &:focus, & { | 110 &:focus, & { |
105 @extend %selected_items; | 111 @extend %selected_items; |
131 flowbox { | 137 flowbox { |
132 rubberband { @extend rubberband; } | 138 rubberband { @extend rubberband; } |
133 | 139 |
134 flowboxchild { | 140 flowboxchild { |
135 padding: 3px; | 141 padding: 3px; |
136 border-radius: 3px; | |
137 | 142 |
138 &:selected { | 143 &:selected { |
139 @extend %selected_items; | 144 @extend %selected_items; |
140 | 145 |
141 outline-offset: -2px; | 146 outline-offset: -2px; |
142 } | 147 } |
143 } | 148 } |
149 } | |
150 | |
151 .content-view .tile { | |
152 margin: 2px; | |
153 background-color: if($variant=='light', transparent, black); | |
154 border-radius: 0; | |
155 padding: 0; | |
156 | |
157 &:backdrop { background-color: if($variant=='light', transparent, darken($backdrop_base_color,5%)); } | |
158 &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); } | |
159 &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); } | |
144 } | 160 } |
145 | 161 |
146 label { | 162 label { |
147 caret-color: currentColor; // this shouldn't be needed. | 163 caret-color: currentColor; // this shouldn't be needed. |
148 | 164 |
198 .sidebar label { padding: 6px 12px; } | 214 .sidebar label { padding: 6px 12px; } |
199 | 215 |
200 .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); } | 216 .sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); } |
201 } | 217 } |
202 | 218 |
203 %osd, .osd { | 219 %osd, |
220 .osd { | |
204 color: $osd_fg_color; | 221 color: $osd_fg_color; |
205 border: none; | 222 border: none; |
206 background-color: $osd_bg_color; | 223 background-color: $osd_bg_color; |
207 background-clip: padding-box; | 224 background-clip: padding-box; |
208 outline-color: transparentize($osd_fg_color, 0.7); | |
209 text-shadow: 0 1px black; | 225 text-shadow: 0 1px black; |
210 -gtk-icon-shadow: 0 1px black; | 226 -gtk-icon-shadow: 0 1px black; |
211 | 227 |
212 &:backdrop { | 228 &:backdrop { |
213 text-shadow: none; | 229 text-shadow: none; |
252 transition: all 200ms $ease-out-quad; | 268 transition: all 200ms $ease-out-quad; |
253 | 269 |
254 @include entry(normal); | 270 @include entry(normal); |
255 | 271 |
256 image { // icons inside the entry | 272 image { // icons inside the entry |
257 &.left { padding-left: 0; padding-right: 6px; } | 273 &.left { margin-right: 6px; } |
258 &.right { padding-left: 6px; padding-right: 0; } | 274 &.right { margin-left: 6px; } |
259 } | 275 } |
260 | 276 |
261 undershoot { | 277 undershoot { |
262 &.left { @include undershoot(left); } | 278 &.left { @include undershoot(left); } |
263 &.right { @include undershoot(right); } | 279 &.right { @include undershoot(right); } |
265 | 281 |
266 &.flat { | 282 &.flat { |
267 &:focus, & { | 283 &:focus, & { |
268 min-height: 0; | 284 min-height: 0; |
269 padding: 2px; | 285 padding: 2px; |
270 background-image: none; | 286 background-color: transparent; |
271 border-color: transparent; | 287 border-color: transparent; |
272 border-radius: 0; | 288 border-radius: 0; |
273 } | 289 } |
274 } | 290 } |
275 | 291 |
298 | 314 |
299 selection { background-color: $e_color; } | 315 selection { background-color: $e_color; } |
300 } | 316 } |
301 } | 317 } |
302 | 318 |
303 & image { // entry icons colors | 319 image { // entry icons colors |
304 color: mix($fg_color, $base_color, 80%); | 320 color: mix($fg_color, $base_color, 80%); |
305 | 321 |
306 &:hover { color: $fg_color; } | 322 &:hover { color: $fg_color; } |
307 | 323 |
308 &:active { color: $selected_bg_color; } | 324 &:active { color: $selected_bg_color; } |
358 | 374 |
359 // brighter border between linked entries | 375 // brighter border between linked entries |
360 &:not(:disabled) + entry:not(:disabled), | 376 &:not(:disabled) + entry:not(:disabled), |
361 &:not(:disabled) + %entry:not(:disabled) { | 377 &:not(:disabled) + %entry:not(:disabled) { |
362 border-top-color: mix($borders_color, $base_color, 30%); | 378 border-top-color: mix($borders_color, $base_color, 30%); |
363 background-image: linear-gradient(to bottom, $base_color); | 379 |
364 | 380 &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); } |
365 &:backdrop { | |
366 border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); | |
367 background-image: linear-gradient(to bottom, $backdrop_base_color); | |
368 } | |
369 } | 381 } |
370 | 382 |
371 // brighter border between linked insensitive entries | 383 // brighter border between linked insensitive entries |
372 &:disabled + %entry:disabled, | 384 &:disabled + %entry:disabled, |
373 &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); } | 385 &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); } |
374 | 386 |
375 // color back the top border of a linked focused entry following another entry and add back the focus shadow. | 387 // color back the top border of a linked focused entry following another entry. |
376 // :not(:only-child) is a specificity bump hack. | 388 // :not(:only-child) is a specificity bump hack. |
377 + %entry:focus:not(:only-child), | 389 + %entry:focus:not(:only-child), |
378 + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); } | 390 + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); } |
379 | 391 |
380 + %entry:drop(active):not(:only-child), | 392 + %entry:drop(active):not(:only-child), |
558 | 570 |
559 &.image-button { min-width: 32px; } | 571 &.image-button { min-width: 32px; } |
560 | 572 |
561 color: $osd_fg_color; | 573 color: $osd_fg_color; |
562 border-radius: 5px; | 574 border-radius: 5px; |
563 outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var? | |
564 | 575 |
565 @include button(osd); | 576 @include button(osd); |
566 | 577 |
567 border: none; | 578 border: none; |
568 box-shadow: none; | 579 box-shadow: none; |
741 } | 752 } |
742 } | 753 } |
743 } | 754 } |
744 } | 755 } |
745 | 756 |
746 //inline-toolbar buttons | 757 // hide separators |
758 &.font, | |
759 &.file { separator { background-color: transparent; }} | |
760 | |
761 &.font { > box > box > label { font-weight: bold; }} | |
762 | |
763 // inline-toolbar buttons | |
747 .inline-toolbar &, .inline-toolbar &:backdrop { | 764 .inline-toolbar &, .inline-toolbar &:backdrop { |
748 border-radius: 2px; | 765 border-radius: 2px; |
749 border-width: 1px; | 766 border-width: 1px; |
750 @extend %linked; | 767 @extend %linked; |
751 } | 768 } |
761 .linked.vertical > &, | 778 .linked.vertical > &, |
762 .linked.vertical > &:hover, | 779 .linked.vertical > &:hover, |
763 .linked.vertical > &:active, | 780 .linked.vertical > &:active, |
764 .linked.vertical > &:checked, | 781 .linked.vertical > &:checked, |
765 .linked.vertical > &:backdrop { @extend %linked_vertical; } | 782 .linked.vertical > &:backdrop { @extend %linked_vertical; } |
783 | |
784 &.circular { // The Bloody Circul Button | |
785 border-radius: 9999px; | |
786 -gtk-outline-radius: 9999px; | |
787 | |
788 label { padding: 0; } | |
789 | |
790 // the followind code is needed since we use a darker bottom border on buttons, which looks pretty | |
791 // bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details), | |
792 // so on relevant states we an additional background-image with a gradient clipped on the border-box, | |
793 // so setting a transparent border would reveal it. | |
794 // FIXME: take care of colored circular button. | |
795 $_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%); | |
796 | |
797 &:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) { | |
798 @include button(normal); | |
799 background-image: $button_fill, $_border_bg; | |
800 border-color: transparent; | |
801 } | |
802 | |
803 &:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) { | |
804 @include button(hover); | |
805 background-image: $button_fill, $_border_bg; | |
806 border-color: transparent; | |
807 } | |
808 | |
809 background-origin: padding-box, border-box; | |
810 background-clip: padding-box, border-box; | |
811 } | |
766 } | 812 } |
767 | 813 |
768 %needs_attention { | 814 %needs_attention { |
769 animation: needs_attention 150ms ease-in; | 815 animation: needs_attention 150ms ease-in; |
770 $_dot_shadow: _text_shadow_color(); | 816 $_dot_shadow: _text_shadow_color(); |
893 | 939 |
894 %undecorated_button { | 940 %undecorated_button { |
895 background-color: transparent; | 941 background-color: transparent; |
896 background-image: none; | 942 background-image: none; |
897 border-color: transparent; | 943 border-color: transparent; |
898 box-shadow: inset 0 1px transparentize(white,1), | 944 box-shadow: inset 0 1px transparentize(white, 1), |
899 0 1px transparentize(white, 1); | 945 0 1px transparentize(white, 1); |
900 text-shadow: none; | 946 text-shadow: none; |
901 -gtk-icon-shadow: none; | 947 -gtk-icon-shadow: none; |
902 } | 948 } |
903 | 949 |
916 | 962 |
917 &:selected { @extend %selected_items; } | 963 &:selected { @extend %selected_items; } |
918 | 964 |
919 &:backdrop, | 965 &:backdrop, |
920 &:backdrop:hover { @extend %undecorated_button; } | 966 &:backdrop:hover { @extend %undecorated_button; } |
921 | |
922 // FIXME: remove the following when the checks/radios rewrite lands | |
923 check:last-child, | |
924 radio:last-child { margin-left: 8px; } | |
925 | |
926 check:first-child, | |
927 radio:first-child { margin-right: 8px; } | |
928 } | 967 } |
929 | 968 |
930 modelbutton.flat arrow { | 969 modelbutton.flat arrow { |
931 background: none; | 970 background: none; |
932 | 971 |
944 &, overlay { border-radius: 0; } | 983 &, overlay { border-radius: 0; } |
945 | 984 |
946 @if $variant == 'light' { | 985 @if $variant == 'light' { |
947 box-shadow: 0 1px _text_shadow_color(); | 986 box-shadow: 0 1px _text_shadow_color(); |
948 | 987 |
988 .osd & { box-shadow: none; } | |
989 } | |
990 } | |
991 | |
992 @if $variant == 'light' { | |
993 .osd &, & { | |
949 &:disabled, | 994 &:disabled, |
950 &:backdrop { box-shadow: none; } | 995 &:backdrop, |
996 &:active, | |
997 &:checked { colorswatch:only-child { box-shadow: none; }} | |
951 } | 998 } |
952 } | 999 } |
953 } | 1000 } |
954 | 1001 |
955 | 1002 |
956 /********* | 1003 /********* |
957 * Links * | 1004 * Links * |
958 *********/ | 1005 *********/ |
1006 | |
1007 %link, | |
959 *:link { | 1008 *:link { |
960 color: $link_color; | 1009 color: $link_color; |
961 | 1010 |
962 &:visited { | 1011 &:visited { |
963 color: $link_visited_color; | 1012 color: $link_visited_color; |
998 @extend %undecorated_button; | 1047 @extend %undecorated_button; |
999 | 1048 |
1000 text-shadow: none; | 1049 text-shadow: none; |
1001 } | 1050 } |
1002 | 1051 |
1003 > label { text-decoration-line: underline; } | 1052 > label { |
1053 @extend %link; | |
1054 | |
1055 text-decoration-line: underline; | |
1056 } | |
1004 } | 1057 } |
1005 | 1058 |
1006 | 1059 |
1007 /***************** | 1060 /***************** |
1008 * GtkSpinButton * | 1061 * GtkSpinButton * |
1023 background: none; | 1076 background: none; |
1024 background-color: transparent; | 1077 background-color: transparent; |
1025 border: none; | 1078 border: none; |
1026 border-radius: 0; | 1079 border-radius: 0; |
1027 box-shadow: none; | 1080 box-shadow: none; |
1081 | |
1082 &:backdrop:disabled { background-color: transparent; } | |
1028 } | 1083 } |
1029 | 1084 |
1030 button { | 1085 button { |
1031 min-height: 16px; | 1086 min-height: 16px; |
1032 margin: 0; | 1087 margin: 0; |
1044 &:hover { | 1099 &:hover { |
1045 color: $fg_color; | 1100 color: $fg_color; |
1046 background-color: $base_hover_color; | 1101 background-color: $base_hover_color; |
1047 } | 1102 } |
1048 | 1103 |
1049 &:disabled { color: transparentize($insensitive_fg_color, 0.7); } | 1104 &:disabled { |
1105 color: transparentize($insensitive_fg_color, 0.7); | |
1106 background-color: transparent; | |
1107 } | |
1050 | 1108 |
1051 &:active { | 1109 &:active { |
1052 background-color: transparentize(black, 0.9); | 1110 background-color: transparentize(black, 0.9); |
1053 box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8); | 1111 box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8); |
1054 } | 1112 } |
1060 transition: $backdrop_transition; | 1118 transition: $backdrop_transition; |
1061 } | 1119 } |
1062 | 1120 |
1063 &:backdrop:disabled { | 1121 &:backdrop:disabled { |
1064 color: transparentize($backdrop_insensitive_color,0.7); | 1122 color: transparentize($backdrop_insensitive_color,0.7); |
1065 background-image: none; | 1123 background-color: transparent; |
1066 border-style: none none none solid; // It is needed or it gets overridden | 1124 border-style: none none none solid; // It is needed or it gets overridden |
1067 | 1125 |
1068 &:dir(rtl) { border-style: none solid none none; } | 1126 &:dir(rtl) { border-style: none solid none none; } |
1069 } | 1127 } |
1128 | |
1129 &:dir(ltr):last-child { border-radius: 0 3px 3px 0; } | |
1130 | |
1131 &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } | |
1070 } | 1132 } |
1071 } | 1133 } |
1072 | 1134 |
1073 // OSD horizontal | 1135 // OSD horizontal |
1074 .osd &:not(.vertical) { | 1136 .osd &:not(.vertical) { |
1110 border-color: transparentize(opacify($osd_borders_color, 1), 0.5); | 1172 border-color: transparentize(opacify($osd_borders_color, 1), 0.5); |
1111 -gtk-icon-shadow: none; | 1173 -gtk-icon-shadow: none; |
1112 box-shadow: none; | 1174 box-shadow: none; |
1113 } | 1175 } |
1114 | 1176 |
1115 &:last-child { border-radius: 0 3px 3px 0; } | 1177 &:dir(ltr):last-child { border-radius: 0 3px 3px 0; } |
1116 | 1178 |
1117 &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } | 1179 &:dir(rtl):first-child { border-radius: 3px 0 0 3px; } |
1118 } | 1180 } |
1119 } | 1181 } |
1120 | 1182 |
1125 // so that it's linked | 1187 // so that it's linked |
1126 | 1188 |
1127 // FIXME: this should not be set at all, but otherwise it gets the wrong | 1189 // FIXME: this should not be set at all, but otherwise it gets the wrong |
1128 // color | 1190 // color |
1129 &:disabled { color: $insensitive_fg_color; } | 1191 &:disabled { color: $insensitive_fg_color; } |
1192 | |
1130 &:backdrop:disabled { color: $backdrop_insensitive_color; } | 1193 &:backdrop:disabled { color: $backdrop_insensitive_color; } |
1131 | 1194 |
1132 &:drop(active) { | 1195 &:drop(active) { |
1133 border-color: transparent; | 1196 border-color: transparent; |
1134 box-shadow: none; | 1197 box-shadow: none; |
1321 headerbar { | 1384 headerbar { |
1322 padding: 0 6px; | 1385 padding: 0 6px; |
1323 min-height: 46px; | 1386 min-height: 46px; |
1324 border-width: 0 0 1px; | 1387 border-width: 0 0 1px; |
1325 border-style: solid; | 1388 border-style: solid; |
1326 border-color: $borders_color; | 1389 border-color: $alt_borders_color; |
1327 border-radius: 0; | 1390 border-radius: 0; |
1328 | 1391 |
1329 @include headerbar_fill; | 1392 @include headerbar_fill; |
1330 | 1393 |
1331 &:backdrop { | 1394 &:backdrop { |
1336 | 1399 |
1337 transition: $backdrop_transition; | 1400 transition: $backdrop_transition; |
1338 } | 1401 } |
1339 | 1402 |
1340 .title { | 1403 .title { |
1341 font-weight: bold; | |
1342 padding-left: 12px; | 1404 padding-left: 12px; |
1343 padding-right: 12px; | 1405 padding-right: 12px; |
1406 font-weight: bold; | |
1344 } | 1407 } |
1345 | 1408 |
1346 .subtitle { | 1409 .subtitle { |
1347 font-size: smaller; | 1410 font-size: smaller; |
1348 padding-left: 12px; | 1411 padding-left: 12px; |
1353 | 1416 |
1354 &.selection-mode { | 1417 &.selection-mode { |
1355 $_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color | 1418 $_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color |
1356 | 1419 |
1357 color: $selected_fg_color; | 1420 color: $selected_fg_color; |
1421 border-color: $selected_borders_color; | |
1358 text-shadow: 0 -1px transparentize(black, 0.5); | 1422 text-shadow: 0 -1px transparentize(black, 0.5); |
1359 border-color: $selected_borders_color; | |
1360 | 1423 |
1361 @include headerbar_fill($selected_bg_color, $_hc); | 1424 @include headerbar_fill($selected_bg_color, $_hc); |
1362 | 1425 |
1363 &:backdrop { | 1426 &:backdrop { |
1364 background-color: $selected_bg_color; | 1427 background-color: $selected_bg_color; |
1453 } | 1516 } |
1454 | 1517 |
1455 .selection-menu { | 1518 .selection-menu { |
1456 &:backdrop, & { | 1519 &:backdrop, & { |
1457 border-color: transparentize($selected_bg_color, 1); | 1520 border-color: transparentize($selected_bg_color, 1); |
1458 background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1)); | 1521 background-color: transparentize($selected_bg_color, 1); |
1522 background-image: none; | |
1459 box-shadow: none; | 1523 box-shadow: none; |
1460 padding-left: 10px; | 1524 padding-left: 10px; |
1461 padding-right: 10px; | 1525 padding-right: 10px; |
1462 | 1526 |
1463 GtkArrow { -GtkArrow-arrow-scaling: 1; } | 1527 GtkArrow { -GtkArrow-arrow-scaling: 1; } |
1473 | 1537 |
1474 .tiled &, | 1538 .tiled &, |
1475 .maximized & { &:backdrop, & { border-radius: 0; }} // squared corners when the window is maximized or tiled | 1539 .maximized & { &:backdrop, & { border-radius: 0; }} // squared corners when the window is maximized or tiled |
1476 | 1540 |
1477 &.default-decoration { | 1541 &.default-decoration { |
1542 min-height: 28px; | |
1478 padding: 4px; | 1543 padding: 4px; |
1479 min-height: 28px; | |
1480 | 1544 |
1481 button.titlebutton { | 1545 button.titlebutton { |
1482 min-height: 26px; | 1546 min-height: 26px; |
1483 min-width: 26px; | 1547 min-width: 26px; |
1484 margin: 0; | 1548 margin: 0; |
1485 padding: 0; | 1549 padding: 0; |
1550 } | |
1551 } | |
1552 | |
1553 .solid-csd & { | |
1554 &:backdrop, & { | |
1555 &:dir(rtl), &:dir(ltr) { // specificity bump | |
1556 margin-left: -1px; | |
1557 margin-right: -1px; | |
1558 margin-top: -1px; | |
1559 border-radius: 0; | |
1560 box-shadow: none; | |
1561 } | |
1486 } | 1562 } |
1487 } | 1563 } |
1488 } | 1564 } |
1489 | 1565 |
1490 headerbar { | 1566 headerbar { |
1500 margin-top: 9px; | 1576 margin-top: 9px; |
1501 margin-bottom: 9px; | 1577 margin-bottom: 9px; |
1502 } | 1578 } |
1503 } | 1579 } |
1504 | 1580 |
1505 .background:not(.tiled):not(.maximized) .titlebar { | 1581 .background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar { |
1506 &:backdrop, & { | 1582 &:backdrop, & { |
1507 border-top-left-radius: 7px; | 1583 border-top-left-radius: 7px; |
1508 border-top-right-radius: 7px; | 1584 border-top-right-radius: 7px; |
1509 } | 1585 } |
1510 } | 1586 } |
1511 | 1587 |
1512 headerbar { | 1588 headerbar { // headerbar border rounding |
1513 window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case | 1589 window:not(.tiled):not(.maximized):not(.solid-csd) separator:first-child + &, // tackles the paned container case |
1514 window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 7px; }} | 1590 window:not(.tiled):not(.maximized):not(.solid-csd) &:first-child { &:backdrop, & { border-top-left-radius: 7px; }} |
1515 | 1591 window:not(.tiled):not(.maximized):not(.solid-csd) &:last-child { &:backdrop, & { border-top-right-radius: 7px; }} |
1516 window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 7px; }} | 1592 window:not(.tiled):not(.maximized):not(.solid-csd) stack & { // tackles the stacked headerbars case |
1593 &:first-child, &:last-child { | |
1594 &:backdrop, & { | |
1595 border-top-left-radius: 7px; | |
1596 border-top-right-radius: 7px; | |
1597 } | |
1598 } | |
1599 } | |
1517 } | 1600 } |
1518 | 1601 |
1519 .titlebar:not(headerbar) { | 1602 .titlebar:not(headerbar) { |
1520 window.csd > & { | 1603 window.csd > & { |
1521 // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases | 1604 // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases |
1525 border-style: none; | 1608 border-style: none; |
1526 border-color: transparent; | 1609 border-color: transparent; |
1527 box-shadow: none; | 1610 box-shadow: none; |
1528 } | 1611 } |
1529 | 1612 |
1530 > separator { background-color: $borders_color; } | 1613 > separator { background-color: $borders_color; } // FIXME: use darker border? |
1531 | 1614 |
1532 @extend %titlebar; | 1615 @extend %titlebar; |
1533 } | 1616 } |
1534 | 1617 |
1535 | 1618 |
1572 -GtkTreeView-grid-line-width: 1; | 1655 -GtkTreeView-grid-line-width: 1; |
1573 -GtkTreeView-grid-line-pattern: ''; | 1656 -GtkTreeView-grid-line-pattern: ''; |
1574 -GtkTreeView-tree-line-width: 1; | 1657 -GtkTreeView-tree-line-width: 1; |
1575 -GtkTreeView-tree-line-pattern: ''; | 1658 -GtkTreeView-tree-line-pattern: ''; |
1576 -GtkTreeView-expander-size: 16; | 1659 -GtkTreeView-expander-size: 16; |
1577 } | 1660 } |
1578 | 1661 |
1579 border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color, | 1662 border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color, |
1580 border-top-color: $bg_color; // while this is the grid lines color, better then nothing | 1663 border-top-color: $bg_color; // while this is the grid lines color, better then nothing |
1581 | 1664 |
1582 rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props | 1665 rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props |
1629 &.expander { | 1712 &.expander { |
1630 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); | 1713 -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); |
1631 | 1714 |
1632 &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } | 1715 &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } |
1633 | 1716 |
1634 color: mix($fg_color, $base_color, 70%); | 1717 color: mix($text_color, $base_color, 70%); |
1635 | 1718 |
1636 &:hover { color: $fg_color; } | 1719 &:hover { color: $text_color; } |
1637 | 1720 |
1638 &:selected { | 1721 &:selected { |
1639 color: mix($selected_fg_color, $selected_bg_color, 70%); | 1722 color: mix($selected_fg_color, $selected_bg_color, 70%); |
1640 | 1723 |
1641 &:hover { color: $selected_fg_color; } | 1724 &:hover { color: $selected_fg_color; } |
1654 border: 1px solid $selected_borders_color; | 1737 border: 1px solid $selected_borders_color; |
1655 border-radius: 4px; | 1738 border-radius: 4px; |
1656 background-color: $selected_bg_color; | 1739 background-color: $selected_bg_color; |
1657 background-image: linear-gradient(to bottom, | 1740 background-image: linear-gradient(to bottom, |
1658 $selected_bg_color, | 1741 $selected_bg_color, |
1659 darken($selected_bg_color,10%)); | 1742 darken($selected_bg_color, 10%)); |
1660 box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7), | 1743 box-shadow: inset 0 1px if($variant=='light', transparentize(white, 0.7), transparentize(white, 0.85)), |
1661 transparentize(white,0.85)), | 1744 0 1px if($variant=='light', transparentize(black, 0.8), transparentize(black, 0.9)); |
1662 0 1px if($variant=='light', transparentize(black, 0.8), | |
1663 transparentize(black,0.9)); | |
1664 | 1745 |
1665 &:selected { | 1746 &:selected { |
1666 &:focus, & { | 1747 &:focus, & { |
1667 border-radius: 4px; | 1748 border-radius: 4px; |
1668 | 1749 |
1671 box-shadow: none; | 1752 box-shadow: none; |
1672 } | 1753 } |
1673 | 1754 |
1674 @else { box-shadow: inset 0 1px transparentize(white, 0.95); } | 1755 @else { box-shadow: inset 0 1px transparentize(white, 0.95); } |
1675 | 1756 |
1676 background-image: linear-gradient(to bottom, | 1757 background-image: linear-gradient(to bottom, $base_color, darken($base_color,10%)); |
1677 $base_color, | |
1678 darken($base_color,10%)); | |
1679 | 1758 |
1680 &:backdrop { | 1759 &:backdrop { |
1681 @if $variant == 'light' { | 1760 @if $variant == 'light' { |
1682 color: $selected_bg_color; | 1761 color: $selected_bg_color; |
1683 border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) | 1762 border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?) |
1753 | 1832 |
1754 button.dnd, | 1833 button.dnd, |
1755 header.button.dnd { // for treeview-like derive widgets | 1834 header.button.dnd { // for treeview-like derive widgets |
1756 &:active, &:selected, &:hover, & { | 1835 &:active, &:selected, &:hover, & { |
1757 padding: 0 6px; | 1836 padding: 0 6px; |
1758 transition: none; | 1837 color: $base_color; |
1759 background-image: none; | 1838 background-image: none; |
1760 background-color: $selected_bg_color; | 1839 background-color: $selected_bg_color; |
1761 color: $base_color; | 1840 border-style: none; |
1762 border-radius: 0; | 1841 border-radius: 0; |
1763 border-style: none; | |
1764 box-shadow: inset 0 0 0 1px $base_color; | 1842 box-shadow: inset 0 0 0 1px $base_color; |
1765 text-shadow: none; | 1843 text-shadow: none; |
1844 transition: none; | |
1766 } | 1845 } |
1767 } | 1846 } |
1768 | 1847 |
1769 acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test | 1848 acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test |
1770 } | 1849 } |
1771 | 1850 |
1772 %column_header_button { | 1851 %column_header_button { |
1773 padding: 0 6px; | 1852 padding: 0 6px; |
1774 border-radius: 0; | |
1775 background-image: none; | 1853 background-image: none; |
1776 text-shadow: none; | |
1777 border-style: none solid solid none; | 1854 border-style: none solid solid none; |
1778 border-color: $bg_color; | 1855 border-color: $bg_color; |
1856 border-radius: 0; | |
1857 text-shadow: none; | |
1779 | 1858 |
1780 &:disabled { | 1859 &:disabled { |
1781 border-color: $bg_color; | 1860 border-color: $bg_color; |
1782 background-image: none; | 1861 background-image: none; |
1783 } | 1862 } |
1784 | 1863 |
1785 &:backdrop { | 1864 &:backdrop { |
1865 color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); | |
1786 border-color: $backdrop_bg_color; | 1866 border-color: $backdrop_bg_color; |
1787 border-style: none solid solid none; | 1867 border-style: none solid solid none; |
1788 color: mix($backdrop_fg_color, $backdrop_bg_color, 50%); | |
1789 background-image: none; | 1868 background-image: none; |
1790 background-color: $backdrop_base_color; | 1869 background-color: $backdrop_base_color; |
1791 | 1870 |
1792 &:disabled { | 1871 &:disabled { |
1793 border-color: $backdrop_bg_color; | 1872 border-color: $backdrop_bg_color; |
1965 } | 2044 } |
1966 | 2045 |
1967 separator { margin: 3px; } | 2046 separator { margin: 3px; } |
1968 | 2047 |
1969 list separator { margin: 0px; } | 2048 list separator { margin: 0px; } |
1970 | |
1971 checkbutton, | |
1972 radiobutton { @extend modelbutton.flat; } | |
1973 } | 2049 } |
1974 | 2050 |
1975 /************* | 2051 /************* |
1976 * Notebooks * | 2052 * Notebooks * |
1977 *************/ | 2053 *************/ |
2407 } | 2483 } |
2408 } | 2484 } |
2409 | 2485 |
2410 &.horizontal { | 2486 &.horizontal { |
2411 button { | 2487 button { |
2412 &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); } | 2488 &.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } |
2413 | 2489 |
2414 &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); } | 2490 &.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } |
2415 } | 2491 } |
2416 } | 2492 } |
2417 } | 2493 } |
2418 | 2494 |
2419 treeview ~ scrollbar.vertical { | 2495 treeview ~ scrollbar.vertical { |
2426 **********/ | 2502 **********/ |
2427 switch { | 2503 switch { |
2428 font-weight: bold; | 2504 font-weight: bold; |
2429 font-size: smaller; | 2505 font-size: smaller; |
2430 outline-offset: -4px; | 2506 outline-offset: -4px; |
2431 box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here | 2507 |
2432 _widget_edge(transparent); // otherwise it gets | |
2433 // clipped | |
2434 // similar to the .scale | 2508 // similar to the .scale |
2435 border: 1px solid $borders_color; | 2509 border: 1px solid $borders_color; |
2436 border-radius: 3px; | 2510 border-radius: 3px; |
2437 color: $fg_color; | 2511 color: $fg_color; |
2438 background-image: linear-gradient(to bottom, mix($bg_color, $borders_color, 60%)); | 2512 background-color: $dark_fill; |
2439 text-shadow: 0 1px transparentize(black, 0.9); | 2513 text-shadow: 0 1px transparentize(black, 0.9); |
2440 | 2514 |
2441 &:checked { | 2515 &:checked { |
2442 color: white; | 2516 color: $selected_fg_color; |
2443 border-color: $selected_borders_color; | 2517 border-color: $selected_borders_color; |
2444 background-color: $selected_bg_color; | 2518 background-color: $selected_bg_color; |
2445 background-image: none; | |
2446 box-shadow: _widget_edge(transparent); | |
2447 text-shadow: 0 1px transparentize($selected_borders_color, 0.5), | 2519 text-shadow: 0 1px transparentize($selected_borders_color, 0.5), |
2448 0 0 2px transparentize(white, 0.4); | 2520 0 0 2px transparentize(white, 0.4); |
2449 } | 2521 } |
2450 | 2522 |
2451 &:disabled { | 2523 &:disabled { |
2452 color: $insensitive_fg_color; | 2524 color: $insensitive_fg_color; |
2453 border-color: $borders_color; | 2525 border-color: $borders_color; |
2454 background-image: none; | |
2455 background-color: $insensitive_bg_color; | 2526 background-color: $insensitive_bg_color; |
2456 box-shadow: _widget_edge(transparent); | |
2457 text-shadow: none; | 2527 text-shadow: none; |
2458 } | 2528 } |
2459 | 2529 |
2460 &:backdrop { | 2530 &:backdrop { |
2461 color: $backdrop_fg_color; | 2531 color: $backdrop_fg_color; |
2462 border-color: $backdrop_borders_color; | 2532 border-color: $backdrop_borders_color; |
2463 background-image: linear-gradient(to bottom, $backdrop_dark_fill); | 2533 background-color: $backdrop_dark_fill; |
2464 box-shadow: none; | |
2465 text-shadow: none; | 2534 text-shadow: none; |
2466 transition: $backdrop_transition; | 2535 transition: $backdrop_transition; |
2467 | 2536 |
2468 &:checked { | 2537 &:checked { |
2469 @if $variant == 'light' { color: $backdrop_bg_color; } | 2538 @if $variant == 'light' { color: $backdrop_bg_color; } |
2470 border-color: if($variant == 'light', $selected_bg_color, | 2539 border-color: if($variant == 'light', $selected_bg_color, |
2471 $selected_borders_color); | 2540 $selected_borders_color); |
2472 background-image: linear-gradient(to bottom, $selected_bg_color); | 2541 background-color: $selected_bg_color; |
2473 box-shadow: none; | 2542 } |
2474 } | 2543 |
2475 } | 2544 &:disabled { |
2476 | 2545 color: $backdrop_insensitive_color; |
2477 &:disabled { | 2546 border-color: $backdrop_borders_color; |
2478 color: $backdrop_insensitive_color; | 2547 background-color: $insensitive_bg_color; |
2479 border-color: $backdrop_borders_color; | 2548 } |
2480 background-image: none; | |
2481 background-color: $insensitive_bg_color; | |
2482 } | 2549 } |
2483 | 2550 |
2484 slider { | 2551 slider { |
2485 margin: -1px; | 2552 margin: -1px; |
2486 min-width: 44px; | 2553 min-width: 44px; |
2540 (':backdrop', '-backdrop-selectionmode'), | 2607 (':backdrop', '-backdrop-selectionmode'), |
2541 (':checked', '-checked-selectionmode'), | 2608 (':checked', '-checked-selectionmode'), |
2542 (':checked:hover', '-checked-hover-selectionmode'), | 2609 (':checked:hover', '-checked-hover-selectionmode'), |
2543 (':checked:active', '-checked-active-selectionmode'), | 2610 (':checked:active', '-checked-active-selectionmode'), |
2544 (':backdrop:checked', '-checked-backdrop-selectionmode') { | 2611 (':backdrop:checked', '-checked-backdrop-selectionmode') { |
2545 .view.content-view.check#{$s}:not(list) { | 2612 .view.content-view.check#{$s}:not(list), |
2613 .content-view .tile check#{$s}:not(list) { | |
2546 -gtk-icon-shadow: none; | 2614 -gtk-icon-shadow: none; |
2547 -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"), | 2615 -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"), url("assets/checkbox#{$as}@2.png")); |
2548 url("assets/checkbox#{$as}@2.png")); | |
2549 background-color: transparent; | 2616 background-color: transparent; |
2617 min-width: 40px; | |
2618 min-height: 40px; | |
2619 background-image: none; | |
2620 transition: none; | |
2621 box-shadow: none; | |
2622 border-width: 0; | |
2550 } | 2623 } |
2551 } | 2624 } |
2552 | 2625 |
2553 checkbutton.text-button, radiobutton.text-button { | 2626 checkbutton.text-button, radiobutton.text-button { |
2554 // this is for a nice focus on check and radios text | 2627 // this is for a nice focus on check and radios text |
2610 background-color: transparent; | 2683 background-color: transparent; |
2611 box-shadow: none; | 2684 box-shadow: none; |
2612 -gtk-icon-shadow: none; | 2685 -gtk-icon-shadow: none; |
2613 color: inherit; | 2686 color: inherit; |
2614 border-color: currentColor; | 2687 border-color: currentColor; |
2615 animation: none; | |
2616 } | 2688 } |
2617 } | 2689 } |
2618 } | 2690 } |
2619 | 2691 |
2620 %check, | 2692 %check, |
2637 | 2709 |
2638 &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), | 2710 &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), |
2639 -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); } | 2711 -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); } |
2640 } | 2712 } |
2641 | 2713 |
2642 // let's animate things | 2714 // ANIMATION: |
2643 @keyframes check_check { | 2715 // this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes, |
2644 from { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); } | 2716 // the transformation is set on the active state and it get reset on the checked state. |
2645 to { -gtk-icon-transform: unset; } | 2717 radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); } |
2646 } | 2718 |
2647 | 2719 check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); } |
2648 @keyframes check_radio { | 2720 |
2649 from { -gtk-icon-transform: scale(0); } | 2721 radio, |
2650 to { -gtk-icon-transform: unset; } | 2722 check { |
2651 } | 2723 &:active { -gtk-icon-transform: scale(0, 1); } // should tackle the indeterminate state, untested |
2652 | 2724 |
2653 @keyframes check_indeterminate { | 2725 &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { |
2654 from { -gtk-icon-transform: scale(0, 1); } | 2726 -gtk-icon-transform: unset; |
2655 to { -gtk-icon-transform: unset; } | 2727 transition: 400ms; |
2656 } | 2728 } |
2657 | 2729 } |
2658 check:not(:indeterminate):checked { animation: check_check 400ms; } | 2730 |
2659 | |
2660 radio:not(:indeterminate):checked { animation: check_radio 400ms; } | |
2661 | |
2662 check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate 400ms; } | |
2663 | |
2664 // no animations in menus | |
2665 menu menuitem { | 2731 menu menuitem { |
2666 check:not(:indeterminate):checked, | 2732 radio, |
2667 radio:not(:indeterminate):checked, | 2733 check { |
2668 check:indeterminate:checked:active, | 2734 &:checked:not(:backdrop), &:indeterminate:not(:backdrop) { transition: none; } |
2669 radio:indeterminate:checked { animation: none; } | 2735 } |
2670 } | 2736 } |
2671 | 2737 |
2672 treeview.view check, | 2738 treeview.view check, |
2673 treeview.view radio { | 2739 treeview.view radio { |
2674 &:selected { | 2740 &:selected { |
2696 ************/ | 2762 ************/ |
2697 %scale_trough { | 2763 %scale_trough { |
2698 border: 1px solid $borders_color; | 2764 border: 1px solid $borders_color; |
2699 border-radius: 3px; | 2765 border-radius: 3px; |
2700 background-color: $dark_fill; | 2766 background-color: $dark_fill; |
2701 box-shadow: inset 1px 1px transparentize(black, 0.9); | 2767 |
2702 | 2768 &:disabled { background-color: $insensitive_bg_color; } |
2703 &:disabled { | |
2704 background-color: $insensitive_bg_color; | |
2705 box-shadow: none; | |
2706 } | |
2707 | 2769 |
2708 &:backdrop { | 2770 &:backdrop { |
2709 background-color: $backdrop_dark_fill; | 2771 background-color: $backdrop_dark_fill; |
2710 border-color: $backdrop_borders_color; | 2772 border-color: $backdrop_borders_color; |
2711 box-shadow: none; | |
2712 transition: $backdrop_transition; | 2773 transition: $backdrop_transition; |
2713 | 2774 |
2714 &:disabled { background-color: $insensitive_bg_color; } | 2775 &:disabled { background-color: $insensitive_bg_color; } |
2715 } | 2776 } |
2716 | 2777 |
2717 // ...on selected list rows | 2778 // ...on selected list rows |
2718 row:selected & { | 2779 row:selected & { &:disabled, & { border-color: $selected_borders_color; }} |
2719 box-shadow: none; | |
2720 | |
2721 &, &:disabled { border-color: $selected_borders_color; } | |
2722 } | |
2723 | 2780 |
2724 // OSD | 2781 // OSD |
2725 .osd & { | 2782 .osd & { |
2726 border-color: $osd_borders_color; | 2783 border-color: $osd_borders_color; |
2727 background-color: transparentize($osd_borders_color, 0.2); | 2784 background-color: transparentize($osd_borders_color, 0.2); |
2728 box-shadow: none; | |
2729 outline-color: transparentize($osd_fg_color, 0.8); | |
2730 | 2785 |
2731 &:disabled { background-color: $osd_insensitive_bg_color; } | 2786 &:disabled { background-color: $osd_insensitive_bg_color; } |
2732 } | 2787 } |
2733 } | 2788 } |
2734 | 2789 |
2750 border-color: transparent; | 2805 border-color: transparent; |
2751 } | 2806 } |
2752 } | 2807 } |
2753 | 2808 |
2754 // ...on selected list rows | 2809 // ...on selected list rows |
2755 row:selected & { &:disabled, & { border-color: $selected_borders_color; } } | 2810 row:selected & { &:disabled, & { border-color: $selected_borders_color; }} |
2756 | 2811 |
2757 // OSD | 2812 // OSD |
2758 .osd & { | 2813 .osd & { |
2759 border-color: $osd_borders_color; | 2814 border-color: $osd_borders_color; |
2760 | 2815 |
2822 // this is another differently styled part of the backing bit, the most relevant use case is for example | 2877 // this is another differently styled part of the backing bit, the most relevant use case is for example |
2823 // in media player to indicate how much video stream as been cached | 2878 // in media player to indicate how much video stream as been cached |
2824 fill { | 2879 fill { |
2825 @extend %scale_trough; | 2880 @extend %scale_trough; |
2826 | 2881 |
2827 &, &:backdrop { | 2882 &:backdrop, & { background-color: $borders_color; } |
2828 background-color: $borders_color; | |
2829 box-shadow: none; | |
2830 } | |
2831 | 2883 |
2832 &:disabled { | 2884 &:disabled { |
2833 &, &:backdrop { | 2885 &:backdrop, & { |
2834 border-color: transparent; | 2886 border-color: transparent; |
2835 background-color: transparent; | 2887 background-color: transparent; |
2836 } | 2888 } |
2837 } | 2889 } |
2838 | 2890 |
2839 // OSD | 2891 // OSD |
2840 .osd & { | 2892 .osd & { |
2841 background-color: mix($osd_fg_color, $osd_borders_color, 25%); | 2893 background-color: mix($osd_fg_color, $osd_borders_color, 25%); |
2842 | 2894 |
2843 &:disabled { | 2895 &:disabled { |
2844 &, &:backdrop { | 2896 &:backdrop, & { |
2845 border-color: transparent; | 2897 border-color: transparent; |
2846 background-color: transparent; | 2898 background-color: transparent; |
2847 } | 2899 } |
2848 } | 2900 } |
2849 } | 2901 } |
2850 } | 2902 } |
2851 | 2903 |
2852 slider { | 2904 slider { |
2853 @include button(normal-alt, $edge: $shadow_color); | 2905 @include button(normal-alt, $edge: $shadow_color); |
2854 | 2906 |
2855 border: 1px solid darken($borders_color, 3%); | 2907 border: 1px solid darken($alt_borders_color, 3%); |
2856 border-radius: 100%; | 2908 border-radius: 100%; |
2857 transition: $button_transition; | 2909 transition: $button_transition; |
2858 transition-property: background, border, box-shadow; | 2910 transition-property: background, border, box-shadow; |
2859 | 2911 |
2860 &:hover { @include button(hover-alt, $edge: $shadow_color); } | 2912 &:hover { @include button(hover-alt, $edge: $shadow_color); } |
2861 | 2913 |
2862 &:active { border-color: $selected_borders_color; } | 2914 &:active { border-color: $selected_borders_color; } |
2863 | 2915 |
2864 &:disabled { @include button (insensitive); } | 2916 &:disabled { @include button(insensitive); } |
2865 | 2917 |
2866 &:backdrop { | 2918 &:backdrop { |
2867 transition: $backdrop_transition; | 2919 transition: $backdrop_transition; |
2868 | 2920 |
2869 @include button(backdrop); | 2921 @include button(backdrop); |
2870 | 2922 |
2871 &:disabled { @include button(backdrop-insensitive); } | 2923 &:disabled { @include button(backdrop-insensitive); } |
2872 } | 2924 } |
2873 | 2925 |
2874 // ...on selected list rows | 2926 // ...on selected list rows |
2875 row:selected & { &, &:disabled { border-color: $selected_borders_color; } } | 2927 row:selected & { &:disabled, & { border-color: $selected_borders_color; } } |
2876 | 2928 |
2877 // OSD | 2929 // OSD |
2878 .osd & { | 2930 .osd & { |
2879 @include button(osd); | 2931 @include button(osd); |
2880 border-color: darken($osd_borders_color, 3%); | 2932 border-color: darken($osd_borders_color, 3%); |
2881 background-color: opacify($osd_bg_color, 1); // solid background needed here | 2933 background-color: opacify($osd_bg_color, 1); // solid background needed here |
2882 | 2934 |
2883 &:hover { @include button(osd-hover); } | 2935 &:hover { |
2884 | 2936 @include button(osd-hover); |
2885 &:active { @include button(osd-active); } | 2937 background-color: opacify($osd_bg_color, 1); // solid background needed here |
2886 | 2938 } |
2887 &:disabled { @include button(osd-insensitive); } | 2939 |
2940 &:active { | |
2941 @include button(osd-active); | |
2942 background-color: opacify($osd_bg_color, 1); // solid background needed here | |
2943 } | |
2944 | |
2945 &:disabled { | |
2946 @include button(osd-insensitive); | |
2947 background-color: opacify($osd_bg_color, 1); // solid background needed here | |
2948 } | |
2888 | 2949 |
2889 &:backdrop { | 2950 &:backdrop { |
2890 @include button(osd-backdrop); | 2951 @include button(osd-backdrop); |
2891 | 2952 background-color: opacify($osd_bg_color, 1); // solid background needed here |
2892 &:disabled { @include button(osd-backdrop-insensitive); } | 2953 |
2893 } | 2954 &:disabled { |
2894 } | 2955 @include button(osd-backdrop-insensitive); |
2895 } | 2956 background-color: opacify($osd_bg_color, 1); // solid background needed here |
2896 | 2957 } |
2897 value { color: gtkalpha(currentColor, 0.4); } | 2958 } |
2959 } | |
2960 } | |
2961 | |
2962 value { color: gtkalpha(currentColor, 0.55); } | |
2898 | 2963 |
2899 marks { | 2964 marks { |
2900 color: gtkalpha(currentColor, 0.4); | 2965 color: gtkalpha(currentColor, 0.55); |
2901 | 2966 |
2902 @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), | 2967 @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), |
2903 (bottom, bottom, top), | 2968 (bottom, bottom, top), |
2904 (top, left, right), | 2969 (top, left, right), |
2905 (bottom, right, left) { | 2970 (bottom, right, left) { |
2919 margin-#{$marks_margin}: $_marks_distance; | 2984 margin-#{$marks_margin}: $_marks_distance; |
2920 margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px); | 2985 margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px); |
2921 } | 2986 } |
2922 } | 2987 } |
2923 } | 2988 } |
2989 | |
2924 &.horizontal { | 2990 &.horizontal { |
2925 indicator { | 2991 indicator { |
2926 min-height: $_marks_lenght; | 2992 min-height: $_marks_lenght; |
2927 min-width: 1px; | 2993 min-width: 1px; |
2928 } | 2994 } |
2929 | 2995 |
2930 &.fine-tune indicator { min-height: ($_marks_lenght - 3px); } | 2996 &.fine-tune indicator { min-height: ($_marks_lenght - 3px); } |
2931 } | 2997 } |
2998 | |
2932 &.vertical { | 2999 &.vertical { |
2933 indicator { | 3000 indicator { |
2934 min-height: 1px; | 3001 min-height: 1px; |
2935 min-width: $_marks_lenght; | 3002 min-width: $_marks_lenght; |
2936 } | 3003 } |
2937 | 3004 |
2938 &.fine-tune indicator { min-width: ($_marks_lenght - 3px); } | 3005 &.fine-tune indicator { min-width: ($_marks_lenght - 3px); } |
2939 } | 3006 } |
3007 | |
2940 // *WARNING* scale with marks madness following | 3008 // *WARNING* scale with marks madness following |
2941 | 3009 |
2942 // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those... | 3010 // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those... |
2943 $suffix: if($variant == 'light', '', '-dark'); | 3011 $suffix: if($variant == 'light', '', '-dark'); |
2944 | 3012 |
2961 margin: -10px; | 3029 margin: -10px; |
2962 $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}'; | 3030 $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}'; |
2963 border-style: none; | 3031 border-style: none; |
2964 border-radius: 0; | 3032 border-radius: 0; |
2965 | 3033 |
3034 background-color: transparent; | |
2966 background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')); | 3035 background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')); |
2967 | 3036 |
2968 $_scale_slider_bg_pos: bottom; | 3037 $_scale_slider_bg_pos: bottom; |
2969 | 3038 |
2970 @if $dir_class == 'horizontal' { | 3039 @if $dir_class == 'horizontal' { |
3027 &.color { | 3096 &.color { |
3028 min-height: 0; | 3097 min-height: 0; |
3029 min-width: 0; | 3098 min-width: 0; |
3030 | 3099 |
3031 trough { | 3100 trough { |
3032 background-image: linear-gradient(to top, $borders_color); | 3101 background-image: image($borders_color); |
3033 background-repeat: no-repeat; | 3102 background-repeat: no-repeat; |
3034 } | 3103 } |
3035 | 3104 |
3036 &.horizontal { | 3105 &.horizontal { |
3037 padding: 0 0 15px 0; | 3106 padding: 0 0 15px 0; |
3217 progress { | 3286 progress { |
3218 border-style: none; | 3287 border-style: none; |
3219 border-radius: 0; | 3288 border-radius: 0; |
3220 } | 3289 } |
3221 } | 3290 } |
3291 | |
3292 trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0 | |
3222 } | 3293 } |
3223 | 3294 |
3224 | 3295 |
3225 /************* | 3296 /************* |
3226 * Level Bar * | 3297 * Level Bar * |
3252 &.vertical.discrete block { margin: 1px 0; } | 3323 &.vertical.discrete block { margin: 1px 0; } |
3253 | 3324 |
3254 block { | 3325 block { |
3255 border: 1px solid; | 3326 border: 1px solid; |
3256 border-radius: 1px; | 3327 border-radius: 1px; |
3257 box-shadow: 0 1px transparentize(black, 0.8); | |
3258 | |
3259 &:backdrop { box-shadow: none; } | |
3260 | 3328 |
3261 &.low { | 3329 &.low { |
3262 border-color: if($variant == 'light', darken($warning_color, 20%), $warning_color); | 3330 border-color: if($variant == 'light', darken($warning_color, 20%), $warning_color); |
3263 background-color: $warning_color; | 3331 background-color: $warning_color; |
3264 | 3332 |
3281 } | 3349 } |
3282 | 3350 |
3283 &.empty { | 3351 &.empty { |
3284 background-color: transparent; | 3352 background-color: transparent; |
3285 border-color: if($variant == 'light', transparentize($fg_color,0.8), transparentize($fg_color,0.9)); | 3353 border-color: if($variant == 'light', transparentize($fg_color,0.8), transparentize($fg_color,0.9)); |
3286 box-shadow: none; | |
3287 | 3354 |
3288 &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); } | 3355 &:backdrop { border-color: transparentize($backdrop_fg_color,0.85); } |
3289 } | 3356 } |
3290 } | 3357 } |
3291 } | 3358 } |
3915 colorswatch { | 3982 colorswatch { |
3916 // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one | 3983 // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one |
3917 // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is | 3984 // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is |
3918 // applied to the overlay box. | 3985 // applied to the overlay box. |
3919 | 3986 |
3920 &, &:drop(active) { border-style: none; } // FIXME: implement a proper drop(active) state | 3987 &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state |
3921 | 3988 |
3922 $_colorswatch_radius: 5px; | 3989 $_colorswatch_radius: 5px; |
3923 $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3), | |
3924 inset 0 3px 2px -2px transparentize(black, 0.5)); | |
3925 | 3990 |
3926 // base color corners rounding | 3991 // base color corners rounding |
3927 // to avoid the artifacts caused by rounded corner anti-aliasing the base color | 3992 // to avoid the artifacts caused by rounded corner anti-aliasing the base color |
3928 // sports a bigger radius. | 3993 // sports a bigger radius. |
3929 // nth-child is needed by the custom color strip. | 3994 // nth-child is needed by the custom color strip. |
4001 inset 0 0 0 1px $drop_target_color; | 4066 inset 0 0 0 1px $drop_target_color; |
4002 } | 4067 } |
4003 } | 4068 } |
4004 | 4069 |
4005 overlay { | 4070 overlay { |
4006 box-shadow: $_colorswatch_overlay_shadow; | |
4007 border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); | 4071 border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); |
4008 | 4072 |
4009 &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); } | 4073 &:hover { |
4074 box-shadow: inset 0 1px transparentize(white, 0.6), | |
4075 inset 0 -1px transparentize(black, 0.8); | |
4076 } | |
4010 | 4077 |
4011 &:backdrop, &:backdrop:hover { | 4078 &:backdrop, &:backdrop:hover { |
4012 border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color); | 4079 border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color); |
4013 box-shadow: none; | 4080 box-shadow: none; |
4014 } | 4081 } |
4058 | 4125 |
4059 &:hover { -gtk-icon-effect: highlight; } | 4126 &:hover { -gtk-icon-effect: highlight; } |
4060 | 4127 |
4061 &:backdrop { background-color: darken($bg_color,7%); } | 4128 &:backdrop { background-color: darken($bg_color,7%); } |
4062 | 4129 |
4063 rubberband { @extend rubberband; } | 4130 rubberband, .rubberband { @extend rubberband; } |
4064 } | 4131 } |
4065 | 4132 |
4066 .scale-popup { | 4133 .scale-popup { |
4067 .osd & { @extend %osd; } | 4134 .osd & { @extend %osd; } |
4068 | 4135 |
4125 .ssd & { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows | 4192 .ssd & { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows |
4126 | 4193 |
4127 .csd.popup & { | 4194 .csd.popup & { |
4128 border-radius: 0; | 4195 border-radius: 0; |
4129 box-shadow: 0 1px 2px transparentize(black, 0.8), | 4196 box-shadow: 0 1px 2px transparentize(black, 0.8), |
4130 0 0 0 1px transparentize($_wm_border,0.1); | 4197 0 0 0 1px transparentize($_wm_border, 0.1); |
4131 } | 4198 } |
4132 | 4199 |
4133 tooltip.csd & { | 4200 tooltip.csd & { |
4134 border-radius: 5px; | 4201 border-radius: 5px; |
4135 box-shadow: none; | 4202 box-shadow: none; |
4136 } | 4203 } |
4137 | 4204 |
4138 messagedialog.csd & { | 4205 messagedialog.csd & { |
4139 border-radius: 7px; | 4206 border-radius: 7px; |
4140 box-shadow: 0 1px 2px transparentize(black, 0.8), | 4207 box-shadow: 0 1px 2px transparentize(black, 0.8), |
4141 0 0 0 1px transparentize($_wm_border,0.1); | 4208 0 0 0 1px transparentize($_wm_border, 0.1); |
4142 } | 4209 } |
4143 | 4210 |
4144 .solid-csd & { | 4211 .solid-csd & { |
4212 margin: 0; | |
4213 padding: 4px; | |
4214 background-color: $borders_color; | |
4215 border: solid 1px $borders_color; | |
4145 border-radius: 0; | 4216 border-radius: 0; |
4146 margin: 4px; | 4217 box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight; |
4147 background-color: $backdrop_bg_color; | 4218 |
4148 border: solid 1px $backdrop_borders_color; | 4219 &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; } |
4149 box-shadow: none; | |
4150 } | 4220 } |
4151 } | 4221 } |
4152 | 4222 |
4153 // Window Close button | 4223 // Window Close button |
4154 button.titlebutton { | 4224 button.titlebutton { |
4181 background-color: $selected_bg_color; | 4251 background-color: $selected_bg_color; |
4182 | 4252 |
4183 @at-root %nobg_selected_items, & { | 4253 @at-root %nobg_selected_items, & { |
4184 color: $selected_fg_color; | 4254 color: $selected_fg_color; |
4185 | 4255 |
4186 @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); } | |
4187 | |
4188 &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } | 4256 &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } |
4189 | 4257 |
4190 &:backdrop { | 4258 &:backdrop { |
4191 color: $backdrop_selected_fg_color; | 4259 color: $backdrop_selected_fg_color; |
4192 | 4260 |
4193 &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } | 4261 &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); } |
4194 } | 4262 } |
4195 } | 4263 } |
4196 } | 4264 } |
4197 | 4265 |
4198 .monospace { font: Monospace; } | 4266 .monospace { font-family: monospace; } |
4199 | 4267 |
4200 | 4268 |
4201 /********************** | 4269 /********************** |
4202 * Touch Copy & Paste * | 4270 * Touch Copy & Paste * |
4203 *********************/ | 4271 *********************/ |
4233 } | 4301 } |
4234 } | 4302 } |
4235 | 4303 |
4236 .context-menu { font: initial; } // Decouple the font of context menus from their entry/textview | 4304 .context-menu { font: initial; } // Decouple the font of context menus from their entry/textview |
4237 | 4305 |
4238 button.circular { // FIXME: aggregate to buttons | |
4239 border-radius: 9999px; | |
4240 -gtk-outline-radius: 9999px; | |
4241 | |
4242 label { padding: 0; } | |
4243 } | |
4244 | |
4245 // shortcut window keys | 4306 // shortcut window keys |
4246 .keycap { | 4307 .keycap { |
4247 min-width: 20px; | 4308 min-width: 20px; |
4248 min-height: 25px; | 4309 min-height: 25px; |
4249 margin-top: 2px; | 4310 margin-top: 2px; |
4268 | 4329 |
4269 :not(decoration):not(window):drop(active):focus, | 4330 :not(decoration):not(window):drop(active):focus, |
4270 :not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die | 4331 :not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die |
4271 border-color: $drop_target_color; | 4332 border-color: $drop_target_color; |
4272 box-shadow: inset 0 0 0 1px $drop_target_color; | 4333 box-shadow: inset 0 0 0 1px $drop_target_color; |
4334 caret-color: $drop_target_color; | |
4273 } | 4335 } |
4274 | 4336 |
4275 stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons | 4337 stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons |
4276 | 4338 |
4277 stackswitcher button.circular, | 4339 stackswitcher button.circular, |