DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 36 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 {
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);
}
}

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

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