GTK3: add inset shadow to switches

This commit is contained in:
Daniel Ruiz de Alegría 2020-03-06 12:04:45 +01:00
parent 87f2b7e506
commit c9aff30718
5 changed files with 97 additions and 127 deletions

View File

@ -3333,24 +3333,6 @@ radio {
menu menuitem check, menu menuitem menu menuitem check, menu menuitem
radio { radio {
margin: 0; } margin: 0; }
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem check:checked, menu menuitem check:checked:hover, menu menuitem check:checked:disabled, menu menuitem check:indeterminate, menu menuitem check:indeterminate:hover, menu menuitem check:indeterminate:disabled, menu menuitem
radio, menu menuitem
radio:hover, menu menuitem
radio:disabled, menu menuitem
radio:checked, menu menuitem
radio:checked:hover, menu menuitem
radio:checked:disabled, menu menuitem
radio:indeterminate, menu menuitem
radio:indeterminate:hover, menu menuitem
radio:indeterminate:disabled {
min-height: 14px;
min-width: 14px;
background-image: none;
background-color: transparent;
box-shadow: none;
-gtk-icon-shadow: none;
color: inherit;
border-color: currentColor; }
check { check {
@ -5082,7 +5064,9 @@ switch:hover slider, scale slider:active {
/********** /**********
* Switch * * Switch *
**********/ **********/
switch slider { switch {
box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.6); }
switch slider {
color: #eeeeec; color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3); outline-color: rgba(238, 238, 236, 0.3);
border-color: black; border-color: black;
@ -5093,17 +5077,20 @@ switch slider {
border: 1px solid black; border: 1px solid black;
border-radius: 50%; border-radius: 50%;
transition-property: background, border, box-shadow; } transition-property: background, border, box-shadow; }
switch:hover slider {
switch:hover slider {
border-color: #2777ff; } border-color: #2777ff; }
switch:checked {
switch:checked slider { border-color: rgba(0, 0, 0, 0.2);
border-right-width: 0;
margin-right: 1px;
box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.6); }
switch:checked slider {
border-color: black; } border-color: black; }
switch:backdrop, switch:disabled {
switch:backdrop slider { box-shadow: none; }
switch:backdrop slider, switch:disabled slider {
border-color: #111217; } border-color: #111217; }
switch:backdrop:checked slider, switch:disabled:checked slider {
switch:backdrop:checked slider {
border-color: #111217; } border-color: #111217; }
/************************* /*************************

View File

@ -3333,24 +3333,6 @@ radio {
menu menuitem check, menu menuitem menu menuitem check, menu menuitem
radio { radio {
margin: 0; } margin: 0; }
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem check:checked, menu menuitem check:checked:hover, menu menuitem check:checked:disabled, menu menuitem check:indeterminate, menu menuitem check:indeterminate:hover, menu menuitem check:indeterminate:disabled, menu menuitem
radio, menu menuitem
radio:hover, menu menuitem
radio:disabled, menu menuitem
radio:checked, menu menuitem
radio:checked:hover, menu menuitem
radio:checked:disabled, menu menuitem
radio:indeterminate, menu menuitem
radio:indeterminate:hover, menu menuitem
radio:indeterminate:disabled {
min-height: 14px;
min-width: 14px;
background-image: none;
background-color: transparent;
box-shadow: none;
-gtk-icon-shadow: none;
color: inherit;
border-color: currentColor; }
check { check {
@ -5082,7 +5064,9 @@ switch:hover slider, scale slider:active {
/********** /**********
* Switch * * Switch *
**********/ **********/
switch slider { switch {
box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.6); }
switch slider {
color: #eeeeec; color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3); outline-color: rgba(238, 238, 236, 0.3);
border-color: black; border-color: black;
@ -5093,17 +5077,20 @@ switch slider {
border: 1px solid black; border: 1px solid black;
border-radius: 50%; border-radius: 50%;
transition-property: background, border, box-shadow; } transition-property: background, border, box-shadow; }
switch:hover slider {
switch:hover slider {
border-color: #2777ff; } border-color: #2777ff; }
switch:checked {
switch:checked slider { border-color: rgba(0, 0, 0, 0.2);
border-right-width: 0;
margin-right: 1px;
box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.6); }
switch:checked slider {
border-color: black; } border-color: black; }
switch:backdrop, switch:disabled {
switch:backdrop slider { box-shadow: none; }
switch:backdrop slider, switch:disabled slider {
border-color: #111217; } border-color: #111217; }
switch:backdrop:checked slider, switch:disabled:checked slider {
switch:backdrop:checked slider {
border-color: #111217; } border-color: #111217; }
/************************* /*************************

View File

@ -3356,24 +3356,6 @@ radio {
menu menuitem check, menu menuitem menu menuitem check, menu menuitem
radio { radio {
margin: 0; } margin: 0; }
menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem check:checked, menu menuitem check:checked:hover, menu menuitem check:checked:disabled, menu menuitem check:indeterminate, menu menuitem check:indeterminate:hover, menu menuitem check:indeterminate:disabled, menu menuitem
radio, menu menuitem
radio:hover, menu menuitem
radio:disabled, menu menuitem
radio:checked, menu menuitem
radio:checked:hover, menu menuitem
radio:checked:disabled, menu menuitem
radio:indeterminate, menu menuitem
radio:indeterminate:hover, menu menuitem
radio:indeterminate:disabled {
min-height: 14px;
min-width: 14px;
background-image: none;
background-color: transparent;
box-shadow: none;
-gtk-icon-shadow: none;
color: inherit;
border-color: currentColor; }
check { check {
@ -5106,7 +5088,9 @@ switch:hover slider, scale slider:active {
/********** /**********
* Switch * * Switch *
**********/ **********/
switch slider { switch {
box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.2); }
switch slider {
color: #5c616c; color: #5c616c;
outline-color: rgba(92, 97, 108, 0.3); outline-color: rgba(92, 97, 108, 0.3);
border-color: #c2c2c2; border-color: #c2c2c2;
@ -5117,17 +5101,20 @@ switch slider {
border: 1px solid #bababa; border: 1px solid #bababa;
border-radius: 50%; border-radius: 50%;
transition-property: background, border, box-shadow; } transition-property: background, border, box-shadow; }
switch:hover slider {
switch:hover slider {
border-color: #2777ff; } border-color: #2777ff; }
switch:checked {
switch:checked slider { border-color: rgba(0, 0, 0, 0.2);
border-right-width: 0;
margin-right: 1px;
box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.6); }
switch:checked slider {
border-color: #0051da; } border-color: #0051da; }
switch:backdrop, switch:disabled {
switch:backdrop slider { box-shadow: none; }
switch:backdrop slider, switch:disabled slider {
border-color: #e0e0e0; } border-color: #e0e0e0; }
switch:backdrop:checked slider, switch:disabled:checked slider {
switch:backdrop:checked slider {
border-color: #2777ff; } border-color: #2777ff; }
/************************* /*************************

View File

@ -32,6 +32,8 @@ button:checked, {
switch { switch {
$_slider_border_color: darken($alt_borders_color, 3%); $_slider_border_color: darken($alt_borders_color, 3%);
box-shadow: inset 0 1px 2px -1px transparentize(black, if($variant=='light', .8, .4));
slider { slider {
@include button(normal-alt, $edge: $shadow_color); @include button(normal-alt, $edge: $shadow_color);
@ -45,11 +47,19 @@ switch {
border-color: $suggested_bg_color; border-color: $suggested_bg_color;
} }
&:checked slider { &:checked {
border-color: transparentize(black, .8);
border-right-width: 0; // Hack to prevent dirty right border-radius
margin-right: 1px; // Compensate missing right border
box-shadow: inset 0 1px 2px -1px transparentize(black, .4);
slider {
border-color: if($variant=='light', $suggested_border_color, $_slider_border_color); border-color: if($variant=='light', $suggested_border_color, $_slider_border_color);
} }
}
&:backdrop, &:disabled {
box-shadow: none;
&:backdrop {
slider { border-color: $backdrop_borders_color; } slider { border-color: $backdrop_borders_color; }
&:checked slider { &:checked slider {

View File

@ -3057,7 +3057,6 @@ radio {
min-height: 14px; min-height: 14px;
min-width: 14px; min-width: 14px;
background-image: none; background-image: none;
background-color: transparent;
box-shadow: none; box-shadow: none;
-gtk-icon-shadow: none; -gtk-icon-shadow: none;
color: inherit; color: inherit;