AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Adwaita: updated switch control

Browse Source 
- might be nasty to hide labels with CSS. We can fix properly later.
- the blue border seesm aliased when :checked
This commit is contained in:
Jakub Steiner 2018-11-30 20:53:13 +01:00
parent 8921c868a5
commit f3c704b82e
3 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
gtk/theme/Adwaita/_common.scss
View File

@ -2647,10 +2647,11 @@ switch {
// similar to the .scale
border: 1px solid $borders_color;
border-radius: 3px;
border-radius: 14px;
color: $fg_color;
background-color: $dark_fill;
text-shadow: 0 1px transparentize(black, 0.9);
font-size: 0; /*FIXME: quick workaround for the labels*/
&:checked {
color: $selected_fg_color;
@ -2690,11 +2691,12 @@ switch {
slider {
margin: -1px;
min-width: 44px;
min-height: 26px;
min-width: 24px;
min-height: 24px;
border: 1px solid;
border-radius: 3px;
border-radius: 50%;
transition: $button_transition;
-gtk-outline-radius: 20px;
@include button(normal-alt, $edge: $shadow_color);
}
@ -2730,6 +2732,7 @@ switch {
slider { &:checked, & { border-color: $selected_borders_color; } }
}
}
}

4
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -1075,7 +1075,7 @@ scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-start-sym
treeview ~ scrollbar.vertical { border-top: 1px solid #252526; margin-top: -1px; }
/********** Switch * */
switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #252526; border-radius: 3px; color: #eeeeec; background-color: #323233; text-shadow: 0 1px rgba(0, 0, 0, 0.1); }
switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #252526; border-radius: 14px; color: #eeeeec; background-color: #323233; text-shadow: 0 1px rgba(0, 0, 0, 0.1); font-size: 0; /*quick woraround for the labels*/ }
switch:checked { color: #ffffff; border-color: #092444; background-color: #15539e; text-shadow: 0 1px rgba(9, 36, 68, 0.5), 0 0 2px rgba(255, 255, 255, 0.6); }
@ -1087,7 +1087,7 @@ switch:backdrop:checked { border-color: #092444; background-color: #15539e; }
switch:backdrop:disabled { color: #656466; border-color: #2a2a2b; background-color: #353338; }
switch slider { margin: -1px; min-width: 44px; min-height: 26px; border: 1px solid; border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; text-shadow: 0 -1px rgba(0, 0, 0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); background-image: linear-gradient(to bottom, #373738 20%, #302f30 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #353435, inset 0 -1px #282828, 0 1px rgba(0, 0, 0, 0.1); }
switch slider { margin: -1px; min-width: 24px; min-height: 24px; border: 1px solid; border-radius: 50%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-outline-radius: 20px; color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; text-shadow: 0 -1px rgba(0, 0, 0, 0.802353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.802353); background-image: linear-gradient(to bottom, #373738 20%, #302f30 90%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #353435, inset 0 -1px #282828, 0 1px rgba(0, 0, 0, 0.1); }
switch:hover slider { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #111111; box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #373738, inset 0 -1px #302f30, 0 1px rgba(0, 0, 0, 0.1); background-image: linear-gradient(to bottom, #3f3e40 20%, #353435 90%); }

4
gtk/theme/Adwaita/gtk-contained.css
View File

@ -1083,7 +1083,7 @@ scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-start-sym
treeview ~ scrollbar.vertical { border-top: 1px solid #cdc7c2; margin-top: -1px; }
/********** Switch * */
switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #cdc7c2; border-radius: 3px; color: #2e3436; background-color: #e1dedb; text-shadow: 0 1px rgba(0, 0, 0, 0.1); }
switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #cdc7c2; border-radius: 14px; color: #2e3436; background-color: #e1dedb; text-shadow: 0 1px rgba(0, 0, 0, 0.1); font-size: 0; /*quick woraround for the labels*/ }
switch:checked { color: #ffffff; border-color: #0f3b71; background-color: #3584e4; text-shadow: 0 1px rgba(15, 59, 113, 0.5), 0 0 2px rgba(255, 255, 255, 0.6); }
@ -1095,7 +1095,7 @@ switch:backdrop:checked { color: #f6f5f4; border-color: #3584e4; background-colo
switch:backdrop:disabled { color: #d4cfca; border-color: #d5d0cc; background-color: #faf9f8; }
switch slider { margin: -1px; min-width: 44px; min-height: 26px; border: 1px solid; border-radius: 3px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: linear-gradient(to bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, inset 0 -2px #fbfafa, inset 0 -1px #dad6d2, 0 1px rgba(0, 0, 0, 0.1); }
switch slider { margin: -1px; min-width: 24px; min-height: 24px; border: 1px solid; border-radius: 50%; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); -gtk-outline-radius: 20px; color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); background-image: linear-gradient(to bottom, white 20%, #f6f5f4 90%); box-shadow: inset 0 1px white, inset 0 -2px #fbfafa, inset 0 -1px #dad6d2, 0 1px rgba(0, 0, 0, 0.1); }
switch:hover slider { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #bfb8b1; box-shadow: inset 0 1px white, inset 0 -2px white, inset 0 -1px #dfdcd8, 0 1px rgba(0, 0, 0, 0.1); background-image: linear-gradient(to bottom, white 10%, white 90%); }