PoliEcho/kaliish-orange-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GTK3: add inset shadow to switches

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
share/themes/Kali-Dark/gtk-3.0/gtk.css
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,29 +5064,34 @@ switch:hover slider, scale slider:active {
/********** /**********
* Switch * * Switch *
**********/ **********/
switch slider { switch {
color: #eeeeec; box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.6); }
outline-color: rgba(238, 238, 236, 0.3); switch slider {
border-color: black; color: #eeeeec;
text-shadow: 0 -1px rgba(0, 0, 0, 0.873255); outline-color: rgba(238, 238, 236, 0.3);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873255); border-color: black;
background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%); text-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.27); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
border: 1px solid black; background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%);
border-radius: 50%; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.27);
transition-property: background, border, box-shadow; } border: 1px solid black;
border-radius: 50%;
switch:hover slider { transition-property: background, border, box-shadow; }
border-color: #2777ff; } switch:hover slider {
border-color: #2777ff; }
switch:checked slider { switch:checked {
border-color: black; } border-color: rgba(0, 0, 0, 0.2);
border-right-width: 0;
switch:backdrop slider { margin-right: 1px;
border-color: #111217; } box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.6); }
switch:checked slider {
switch:backdrop:checked slider { border-color: black; }
border-color: #111217; } switch:backdrop, switch:disabled {
box-shadow: none; }
switch:backdrop slider, switch:disabled slider {
border-color: #111217; }
switch:backdrop:checked slider, switch:disabled:checked slider {
border-color: #111217; }
/************************* /*************************
* Check and Radio items * * Check and Radio items *

69
share/themes/Kali-Light/gtk-3.0/gtk-dark.css
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,29 +5064,34 @@ switch:hover slider, scale slider:active {
/********** /**********
* Switch * * Switch *
**********/ **********/
switch slider { switch {
color: #eeeeec; box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.6); }
outline-color: rgba(238, 238, 236, 0.3); switch slider {
border-color: black; color: #eeeeec;
text-shadow: 0 -1px rgba(0, 0, 0, 0.873255); outline-color: rgba(238, 238, 236, 0.3);
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873255); border-color: black;
background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%); text-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.27); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
border: 1px solid black; background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%);
border-radius: 50%; box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.27);
transition-property: background, border, box-shadow; } border: 1px solid black;
border-radius: 50%;
switch:hover slider { transition-property: background, border, box-shadow; }
border-color: #2777ff; } switch:hover slider {
border-color: #2777ff; }
switch:checked slider { switch:checked {
border-color: black; } border-color: rgba(0, 0, 0, 0.2);
border-right-width: 0;
switch:backdrop slider { margin-right: 1px;
border-color: #111217; } box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.6); }
switch:checked slider {
switch:backdrop:checked slider { border-color: black; }
border-color: #111217; } switch:backdrop, switch:disabled {
box-shadow: none; }
switch:backdrop slider, switch:disabled slider {
border-color: #111217; }
switch:backdrop:checked slider, switch:disabled:checked slider {
border-color: #111217; }
/************************* /*************************
* Check and Radio items * * Check and Radio items *

69
share/themes/Kali-Light/gtk-3.0/gtk.css
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,29 +5088,34 @@ switch:hover slider, scale slider:active {
/********** /**********
* Switch * * Switch *
**********/ **********/
switch slider { switch {
color: #5c616c; box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.2); }
outline-color: rgba(92, 97, 108, 0.3); switch slider {
border-color: #c2c2c2; color: #5c616c;
text-shadow: 0 1px rgba(255, 255, 255, 0.769231); outline-color: rgba(92, 97, 108, 0.3);
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); border-color: #c2c2c2;
background-image: linear-gradient(to bottom, white 20%, #ffffff 90%); text-shadow: 0 1px rgba(255, 255, 255, 0.769231);
box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231);
border: 1px solid #bababa; background-image: linear-gradient(to bottom, white 20%, #ffffff 90%);
border-radius: 50%; box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
transition-property: background, border, box-shadow; } border: 1px solid #bababa;
border-radius: 50%;
switch:hover slider { transition-property: background, border, box-shadow; }
border-color: #2777ff; } switch:hover slider {
border-color: #2777ff; }
switch:checked slider { switch:checked {
border-color: #0051da; } border-color: rgba(0, 0, 0, 0.2);
border-right-width: 0;
switch:backdrop slider { margin-right: 1px;
border-color: #e0e0e0; } box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.6); }
switch:checked slider {
switch:backdrop:checked slider { border-color: #0051da; }
border-color: #2777ff; } switch:backdrop, switch:disabled {
box-shadow: none; }
switch:backdrop slider, switch:disabled slider {
border-color: #e0e0e0; }
switch:backdrop:checked slider, switch:disabled:checked slider {
border-color: #2777ff; }
/************************* /*************************
* Check and Radio items * * Check and Radio items *

16
src/themes/Kali/sass/gtk-sass/_common-tweaks.scss
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: if($variant=='light', $suggested_border_color, $_slider_border_color); 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);
}
} }
&:backdrop { &:backdrop, &:disabled {
box-shadow: none;
slider { border-color: $backdrop_borders_color; } slider { border-color: $backdrop_borders_color; }
&:checked slider { &:checked slider {

1
src/themes/Kali/sass/gtk-sass/upstream/_common.scss
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;