diff --git a/assets/components/actors/actors.vue b/assets/components/actors/actors.vue index f07fa117..0a89b409 100644 --- a/assets/components/actors/actors.vue +++ b/assets/components/actors/actors.vue @@ -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); } } diff --git a/assets/components/form/range.vue b/assets/components/form/range.vue index f88a9789..1a6f48c8 100644 --- a/assets/components/form/range.vue +++ b/assets/components/form/range.vue @@ -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 {