Improved threeway toggle design.

This commit is contained in:
DebaucheryLibrarian
2021-03-03 04:05:27 +01:00
parent 25ec52f53e
commit 07bc49604e
2 changed files with 9 additions and 11 deletions

View File

@@ -387,10 +387,6 @@ export default {
}
}
.filter-section {
margin: 0 0 .5rem 0;
}
.filter-label {
display: flex;
justify-content: center;
@@ -428,7 +424,7 @@ export default {
}
.toggle {
background: radial-gradient(circle, var(--shadow-hint) .625rem, var(--enabled-background) calc(.625rem + 1px));
background-color: var(--enabled-background);
&::-webkit-slider-thumb {
background: var(--enabled);
@@ -446,7 +442,7 @@ export default {
}
.toggle {
background: radial-gradient(circle, var(--shadow-hint) .625rem, var(--disabled-background) calc(.625rem + 1px));
background-color: var(--disabled-background);
&::-webkit-slider-thumb {
background: var(--disabled);
@@ -487,26 +483,28 @@ export default {
flex-grow: 1;
height: 1.25rem;
appearance: none;
padding: 2px;
border-radius: 1rem;
background: radial-gradient(circle, var(--darken-hint) .625rem, var(--darken-hint) calc(.625rem + 1px));
background-color: var(--darken-hint);
background-image: radial-gradient(circle, var(--shadow-weak) .3rem, transparent calc(.3rem + 1px));
cursor: pointer;
&::-webkit-slider-thumb {
appearance: none;
background: var(--darken-hint);
background: var(--disabled-handle);
width: 1.25rem;
height: 1.25rem;
border-radius: .625rem;
box-shadow: 0 0 3px var(--darken-weak);
}
&::-moz-range-thumb {
appearance: none;
background: var(--darken-hint);
background: var(--disabled-handle);
width: 1.25rem;
height: 1.25rem;
border: none;
border-radius: .625rem;
box-shadow: 0 0 3px var(--darken-weak);
}
}