GTK3 theme: Redesign check and radio widgets
This commit is contained in:
Daniel Ruiz de Alegría
parent
dd5bf80cdd
commit
5e6c80cfb0
@ -4730,6 +4730,45 @@ switch:backdrop slider {
|
|||||||
switch:backdrop:checked slider {
|
switch:backdrop:checked slider {
|
||||||
border-color: #111317; }
|
border-color: #111317; }
|
||||||
|
|
||||||
|
/*************************
|
||||||
|
* Check and Radio items *
|
||||||
|
*************************/
|
||||||
|
check,
|
||||||
|
radio {
|
||||||
|
background-image: linear-gradient(to bottom, #1e2128 20%, #1a1c23 90%);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27); }
|
||||||
|
check:checked:disabled,
|
||||||
|
radio:checked:disabled, check:indeterminate:disabled,
|
||||||
|
radio:indeterminate:disabled, check:backdrop:checked:disabled,
|
||||||
|
radio:backdrop:checked:disabled, check:backdrop:indeterminate:disabled,
|
||||||
|
radio:backdrop:indeterminate:disabled, check:disabled, check:disabled:backdrop,
|
||||||
|
radio:disabled,
|
||||||
|
radio:disabled:backdrop {
|
||||||
|
border-color: #0d0e11;
|
||||||
|
background-image: image(#23252e); }
|
||||||
|
check:checked,
|
||||||
|
radio:checked {
|
||||||
|
background-image: linear-gradient(to bottom, #2777ff 20%, #1d71ff 90%);
|
||||||
|
border-color: #00348d;
|
||||||
|
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.27); }
|
||||||
|
check:checked:active,
|
||||||
|
radio:checked:active {
|
||||||
|
box-shadow: none; }
|
||||||
|
check:checked:backdrop,
|
||||||
|
radio:checked:backdrop {
|
||||||
|
background-image: image(#2777ff); }
|
||||||
|
check:indeterminate,
|
||||||
|
radio:indeterminate {
|
||||||
|
background-image: linear-gradient(to bottom, #2777ff 20%, #1d71ff 90%);
|
||||||
|
border-color: #00348d;
|
||||||
|
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.27); }
|
||||||
|
check:indeterminate:active,
|
||||||
|
radio:indeterminate:active {
|
||||||
|
box-shadow: none; }
|
||||||
|
check:indeterminate:backdrop,
|
||||||
|
radio:indeterminate:backdrop {
|
||||||
|
background-image: image(#2777ff); }
|
||||||
|
|
||||||
/************
|
/************
|
||||||
* GtkScale *
|
* GtkScale *
|
||||||
************/
|
************/
|
||||||
|
|||||||
@ -4730,6 +4730,45 @@ switch:backdrop slider {
|
|||||||
switch:backdrop:checked slider {
|
switch:backdrop:checked slider {
|
||||||
border-color: #111317; }
|
border-color: #111317; }
|
||||||
|
|
||||||
|
/*************************
|
||||||
|
* Check and Radio items *
|
||||||
|
*************************/
|
||||||
|
check,
|
||||||
|
radio {
|
||||||
|
background-image: linear-gradient(to bottom, #1e2128 20%, #1a1c23 90%);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27); }
|
||||||
|
check:checked:disabled,
|
||||||
|
radio:checked:disabled, check:indeterminate:disabled,
|
||||||
|
radio:indeterminate:disabled, check:backdrop:checked:disabled,
|
||||||
|
radio:backdrop:checked:disabled, check:backdrop:indeterminate:disabled,
|
||||||
|
radio:backdrop:indeterminate:disabled, check:disabled, check:disabled:backdrop,
|
||||||
|
radio:disabled,
|
||||||
|
radio:disabled:backdrop {
|
||||||
|
border-color: #0d0e11;
|
||||||
|
background-image: image(#23252e); }
|
||||||
|
check:checked,
|
||||||
|
radio:checked {
|
||||||
|
background-image: linear-gradient(to bottom, #2777ff 20%, #1d71ff 90%);
|
||||||
|
border-color: #00348d;
|
||||||
|
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.27); }
|
||||||
|
check:checked:active,
|
||||||
|
radio:checked:active {
|
||||||
|
box-shadow: none; }
|
||||||
|
check:checked:backdrop,
|
||||||
|
radio:checked:backdrop {
|
||||||
|
background-image: image(#2777ff); }
|
||||||
|
check:indeterminate,
|
||||||
|
radio:indeterminate {
|
||||||
|
background-image: linear-gradient(to bottom, #2777ff 20%, #1d71ff 90%);
|
||||||
|
border-color: #00348d;
|
||||||
|
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.27); }
|
||||||
|
check:indeterminate:active,
|
||||||
|
radio:indeterminate:active {
|
||||||
|
box-shadow: none; }
|
||||||
|
check:indeterminate:backdrop,
|
||||||
|
radio:indeterminate:backdrop {
|
||||||
|
background-image: image(#2777ff); }
|
||||||
|
|
||||||
/************
|
/************
|
||||||
* GtkScale *
|
* GtkScale *
|
||||||
************/
|
************/
|
||||||
|
|||||||
@ -4751,6 +4751,45 @@ switch:backdrop slider {
|
|||||||
switch:backdrop:checked slider {
|
switch:backdrop:checked slider {
|
||||||
border-color: #2777ff; }
|
border-color: #2777ff; }
|
||||||
|
|
||||||
|
/*************************
|
||||||
|
* Check and Radio items *
|
||||||
|
*************************/
|
||||||
|
check,
|
||||||
|
radio {
|
||||||
|
background-image: linear-gradient(to bottom, white 20%, #fafafa 90%);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); }
|
||||||
|
check:checked:disabled,
|
||||||
|
radio:checked:disabled, check:indeterminate:disabled,
|
||||||
|
radio:indeterminate:disabled, check:backdrop:checked:disabled,
|
||||||
|
radio:backdrop:checked:disabled, check:backdrop:indeterminate:disabled,
|
||||||
|
radio:backdrop:indeterminate:disabled, check:disabled, check:disabled:backdrop,
|
||||||
|
radio:disabled,
|
||||||
|
radio:disabled:backdrop {
|
||||||
|
border-color: #d1d1d1;
|
||||||
|
background-image: image(#ffffff); }
|
||||||
|
check:checked,
|
||||||
|
radio:checked {
|
||||||
|
background-image: linear-gradient(to bottom, #2777ff 20%, #1d71ff 90%);
|
||||||
|
border-color: #0051da;
|
||||||
|
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); }
|
||||||
|
check:checked:active,
|
||||||
|
radio:checked:active {
|
||||||
|
box-shadow: none; }
|
||||||
|
check:checked:backdrop,
|
||||||
|
radio:checked:backdrop {
|
||||||
|
background-image: image(#2777ff); }
|
||||||
|
check:indeterminate,
|
||||||
|
radio:indeterminate {
|
||||||
|
background-image: linear-gradient(to bottom, #2777ff 20%, #1d71ff 90%);
|
||||||
|
border-color: #0051da;
|
||||||
|
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); }
|
||||||
|
check:indeterminate:active,
|
||||||
|
radio:indeterminate:active {
|
||||||
|
box-shadow: none; }
|
||||||
|
check:indeterminate:backdrop,
|
||||||
|
radio:indeterminate:backdrop {
|
||||||
|
background-image: image(#2777ff); }
|
||||||
|
|
||||||
/************
|
/************
|
||||||
* GtkScale *
|
* GtkScale *
|
||||||
************/
|
************/
|
||||||
|
|||||||
@ -54,6 +54,38 @@ switch {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*************************
|
||||||
|
* Check and Radio items *
|
||||||
|
*************************/
|
||||||
|
check,
|
||||||
|
radio {
|
||||||
|
$_c: if($variant=='light', white, darken($bg_color, 2%));
|
||||||
|
$_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
|
||||||
|
|
||||||
|
background-image: linear-gradient(to bottom, $_c 20%, darken($_c, 2%) 90%);
|
||||||
|
box-shadow: $_shadow;
|
||||||
|
|
||||||
|
@at-root %check_radio_disabled,
|
||||||
|
&:disabled {
|
||||||
|
&, &:backdrop {
|
||||||
|
border-color: $borders_color;
|
||||||
|
background-image: image($bg_color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $t in (':checked'), (':indeterminate') {
|
||||||
|
&#{$t} {
|
||||||
|
background-image: linear-gradient(to bottom, $selected_bg_color 20%, darken($selected_bg_color, 2%) 90%);
|
||||||
|
border-color: $selected_borders_color;
|
||||||
|
box-shadow: inset 0 1px transparentize(white, .9), $_shadow;
|
||||||
|
|
||||||
|
&:active { box-shadow: none; }
|
||||||
|
&:backdrop { background-image: image($checkradio_bg_color); }
|
||||||
|
&:disabled { @extend %check_radio_disabled; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/************
|
/************
|
||||||
* GtkScale *
|
* GtkScale *
|
||||||
************/
|
************/
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user