Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
4.4 kB · 167 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168@utility range { appearance: none; -webkit-appearance: none; --range-thumb: var(--color-base-100); --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6); --range-progress: currentColor; --range-fill: 1; --range-p: 0.25rem; --range-bg: color-mix(in oklab, currentColor 10%, #0000); @apply cursor-pointer overflow-hidden bg-transparent align-middle; width: clamp(3rem, 20rem, 100%); /* --radius-selector-max is a separate variable because ~ calc(min(calc(--var))) ~ gives build error in PostCSS+Nuxt */ --radius-selector-max: calc( var(--radius-selector) + var(--radius-selector) + var(--radius-selector) ); border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); border: none; height: var(--range-thumb-size);
[dir="rtl"] & { --range-dir: -1; writing-mode: vertical-lr; }
&:focus { outline: none; }
&:focus-visible { outline: 2px solid; outline-offset: 2px; }
&::-webkit-slider-runnable-track { @apply w-full; background-color: var(--range-bg); border-radius: var(--radius-selector); height: calc(var(--range-thumb-size) * 0.5); } @media (forced-colors: active) { &::-webkit-slider-runnable-track { border: 1px solid; } }
&::-webkit-slider-thumb { @apply relative box-border; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); background-color: var(--range-thumb); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; appearance: none; -webkit-appearance: none; top: 50%; color: var(--range-progress); transform: translateY(-50%); box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill)); }
&::-moz-range-track { @apply w-full; background-color: var(--range-bg); border-radius: var(--radius-selector); height: calc(var(--range-thumb-size) * 0.5); } @media (forced-colors: active) { &::-moz-range-track { border: 1px solid; } }
&::-moz-range-thumb { @apply relative box-border; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); background-color: currentColor; height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; top: 50%; color: var(--range-progress); box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill)); } &:disabled { @apply cursor-not-allowed opacity-30; }}
@utility range-primary { @apply text-primary; --range-thumb: var(--color-primary-content);}
@utility range-secondary { @apply text-secondary; --range-thumb: var(--color-secondary-content);}
@utility range-accent { @apply text-accent; --range-thumb: var(--color-accent-content);}
@utility range-neutral { @apply text-neutral; --range-thumb: var(--color-neutral-content);}
@utility range-success { @apply text-success; --range-thumb: var(--color-success-content);}
@utility range-warning { @apply text-warning; --range-thumb: var(--color-warning-content);}
@utility range-info { @apply text-info; --range-thumb: var(--color-info-content);}
@utility range-error { @apply text-error; --range-thumb: var(--color-error-content);}@utility range-notice { @apply text-notice; --range-thumb: var(--color-notice-content);}@utility range-alert { @apply text-alert-color; --range-thumb: var(--color-alert-color-content);}
@utility range-xs { --range-thumb-size: calc(var(--size-selector, 0.25rem) * 4);}
@utility range-sm { --range-thumb-size: calc(var(--size-selector, 0.25rem) * 5);}
@utility range-md { --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);}
@utility range-lg { --range-thumb-size: calc(var(--size-selector, 0.25rem) * 7);}
@utility range-xl { --range-thumb-size: calc(var(--size-selector, 0.25rem) * 8);}