DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

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

18
assets/components/actors/actors.vue
View File

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

2
assets/components/form/range.vue
View File

@ -124,7 +124,7 @@ export default {
background: var(--slider-thumb); background: var(--slider-thumb);
pointer-events: visible; pointer-events: visible;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 3px var(--shadow-weak); box-shadow: 0 0 3px var(--darken-weak);
} }
.range-container { .range-container {