luneko/SweetTokyoNight
1
0
Fork 0
mirror of https://github.com/luneko/SweetTokyoNight.git synced 2025-12-13 07:29:51 +01:00
Code Issues Projects Releases Wiki Activity

Gtk-4: Fix switch styling issues

Browse Source
This commit is contained in:
EliverLara
2021-12-05 14:48:59 -06:00
parent ba6147f6b8
commit bbf5c60492
3 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
gtk-4.0/gtk-dark.css
View File

@@ -4112,11 +4112,12 @@ switch {
font-weight: bold;
outline-offset: -4px;
transition: all 200ms ease-in;
border: 1px solid rgba(238, 238, 238, 0.1);
border: none;
border-radius: 14px;
color: transparent;
padding: 2.3px 0px;
background: linear-gradient(to right, #1E2233, #1E2233); }
background: linear-gradient(to right, #859398, #859398);
box-shadow: 0px 2px 3px rgba(138, 138, 138, 0.753); }
switch:disabled {
background-color: #171a26; }
switch:backdrop {
@@ -4125,11 +4126,11 @@ switch {
switch:backdrop:disabled {
background-color: #171a26; }
switch:active, switch:checked {
background: linear-gradient(to right, #f7005a, #fadd00); }
background: linear-gradient(to right, #ff9200, #fadd00); }
switch:active slider, switch:checked slider {
background: #fff; }
switch:active:backdrop, switch:checked:backdrop {
background: linear-gradient(to right, #de0051, #e1c600); }
background: linear-gradient(to right, #e68300, #e1c600); }
switch:active:backdrop slider:backdrop, switch:checked:backdrop slider:backdrop {
box-shadow: none;
background-color: rgba(24, 27, 40, 0.9);
@@ -4141,7 +4142,7 @@ switch {
min-height: 12px;
border-radius: 100%;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-color: #151723; }
background-color: #bcc4c7; }
switch slider:backdrop {
padding: 2px;
box-shadow: none;

11
gtk-4.0/gtk.css
View File

@@ -4118,11 +4118,12 @@ switch {
font-weight: bold;
outline-offset: -4px;
transition: all 200ms ease-in;
border: 1px solid rgba(0, 0, 0, 0.13);
border: none;
border-radius: 14px;
color: transparent;
padding: 2.3px 0px;
background: linear-gradient(to right, #1E2233, #1E2233); }
background: linear-gradient(to right, #859398, #859398);
box-shadow: 0px 2px 3px rgba(138, 138, 138, 0.753); }
switch:disabled {
background-color: #e8eaec; }
switch:backdrop {
@@ -4131,11 +4132,11 @@ switch {
switch:backdrop:disabled {
background-color: #e8eaec; }
switch:active, switch:checked {
background: linear-gradient(to right, #f7005a, #fadd00); }
background: linear-gradient(to right, #ff9200, #fadd00); }
switch:active slider, switch:checked slider {
background: #fff; }
switch:active:backdrop, switch:checked:backdrop {
background: linear-gradient(to right, #de0051, #e1c600); }
background: linear-gradient(to right, #e68300, #e1c600); }
switch:active:backdrop slider:backdrop, switch:checked:backdrop slider:backdrop {
box-shadow: none;
background-color: rgba(235, 240, 245, 0.9);
@@ -4147,7 +4148,7 @@ switch {
min-height: 12px;
border-radius: 100%;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-color: #151723; }
background-color: #bcc4c7; }
switch slider:backdrop {
padding: 2px;
box-shadow: none;

14
gtk-4.0/widgets/_switches.scss
View File

@@ -7,12 +7,14 @@ switch {
outline-offset: -4px;
transition: all 200ms ease-in;
border: 1px solid $borders_color;
border: none;
border-radius: 14px;
color: transparent;
padding: 2.3px 0px;
background: linear-gradient(to right, #1E2233, #1E2233);
background: linear-gradient(to right, #859398, #859398);
// border: 1px solid rgba(170, 170, 170, 0.4);
box-shadow: 0px 2px 3px rgba(138, 138, 138, 0.753);
&:disabled {
background-color: $insensitive_bg_color;
}
@@ -27,12 +29,14 @@ switch {
&:active,
&:checked {
background: linear-gradient(to right, #f7005a, #fadd00);
// border: 1px solid $teal;
background: linear-gradient(to right, #ff9200, #fadd00);
slider{
background: #fff;
}
&:backdrop {
background: linear-gradient(to right, darken(#f7005a, 5%), darken(#fadd00, 5%));
//border: 1px solid $teal;
background: linear-gradient(to right, darken(#ff9200, 5%), darken(#fadd00, 5%));
slider {
&:backdrop {
box-shadow:none;
@@ -52,7 +56,7 @@ switch {
border-radius: 100%;
transition: $button_transition;
background-color: darken(#1E2233, 5%);
background-color: lighten(#859398, 20%);
&:backdrop {
padding:2px;