Controls: Update switcher stlye

This commit is contained in:
Rafael Mardojai CM 2022-05-21 22:15:54 -05:00
parent b7002576ea
commit 1a0a8c123f
3 changed files with 18 additions and 33 deletions

View File

@ -66,14 +66,10 @@
--gnome-focused-urlbar-border-color: rgba(120, 174, 237, .5); /* Same as --gnome-accent but with opacity*/
/* Switch */
--gnome-switch-background: #535353;
--gnome-switch-border-color: var(--gnome-switch-background);
--gnome-switch-slider-background: #FFFFFF;
--gnome-switch-slider-border-color: var(--gnome-switch-background);
--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-background: #3584E4;
--gnome-switch-active-border-color: var(--gnome-switch-active-background);
--gnome-switch-active-slider-border-color: var(--gnome-switch-active-background);
--gnome-switch-background: rgba(255, 255, 255, .15);
--gnome-switch-slider-background: #d2d2d2;
--gnome-switch-active-background: var(--gnome-accent-bg);
--gnome-switch-active-slider-background: #ffffff;
/* Tabs */
--gnome-tabbar-tab-color: rgb(141, 144, 145);

View File

@ -67,14 +67,10 @@
--gnome-focused-urlbar-border-color: var(--gnome-accent);
/* Switch */
--gnome-switch-background: #E0E0E0;
--gnome-switch-border-color: var(--gnome-switch-background);
--gnome-switch-slider-background: #FFFFFF;
--gnome-switch-slider-border-color: var(--gnome-switch-background);
--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
--gnome-switch-active-background: #3584E4;
--gnome-switch-active-border-color: var(--gnome-switch-active-background);
--gnome-switch-active-slider-border-color: var(--gnome-switch-active-background);
--gnome-switch-background: rgba(0, 0, 0, .12);
--gnome-switch-slider-background: #ffffff;
--gnome-switch-active-background: var(--gnome-accent-bg);
--gnome-switch-active-slider-background: #ffffff;
/* Tabs */
--gnome-tabbar-tab-color: #303030;

View File

@ -13,41 +13,34 @@
}
#protections-popup-tp-switch {
background: var(--gnome-switch-background) !important;
border: 1px solid var(--gnome-switch-border-color) !important;
border: 0 !important;
border-radius: 24px !important;
min-width: 50px !important;
width: 50px !important;
min-width: 48px !important;
width: 48px !important;
min-height: 26px !important;
padding: 0 !important;
position: relative !important;
display: block !important;
margin: 0 !important;
}
#protections-popup-tp-switch:hover {
border-color: var(--gnome-switch-border-color) !important;
}
#protections-popup-tp-switch::before {
position: absolute !important;
top: 0px;
left: 0px;
top: 2px;
left: 2px;
background: var(--gnome-switch-slider-background) !important;
border: 1px solid var(--gnome-switch-slider-border-color) !important;
box-shadow: var(--gnome-switch-slider-box-shadow);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
border: 0 !important;
border-radius: 24px !important;
height: 24px !important;
width: 24px !important;
height: 22px !important;
width: 22px !important;
transition: left .2s ease;
outline: 0 !important;
}
#protections-popup-tp-switch[enabled] {
background: var(--gnome-switch-active-background) !important;
border-color: var(--gnome-switch-active-border-color) !important;
padding-inline-start: 24px !important;
}
#protections-popup-tp-switch[enabled]:hover {
border-color: var(--gnome-switch-active-border-color) !important;
}
#protections-popup-tp-switch[enabled]::before {
border-color: var(--gnome-switch-active-slider-border-color) !important;
background: var(--gnome-switch-active-slider-background) !important;
left: 24px;
}