Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
5.4 kB · 204 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205.prose :where(a.btn:not(.btn-link)):not(:where([class~="not-prose"], [class~="not-prose"] *)) { @apply no-underline;}
.select { --tw-prose-links: var(--btn-fg); --size: calc(var(--size-field, 0.25rem) * 10); --btn-bg: var(--btn-color, var(--color-neutral)); --btn-fg: var(--color-neutral-content); --btn-p: 1rem; --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); &.select-button { @apply inline-flex shrink-0 cursor-pointer flex-nowrap items-center justify-between gap-1.5 text-center align-middle outline-offset-2 select-none;
padding-inline: var(--btn-p); color: var(--btn-fg); height: var(--size); font-size: var(--fontsize, 0.875rem); font-weight: 600; outline-color: var(--btn-color, var(--color-base-content)); transition-property: color, background-color, border-color, box-shadow; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-duration: 0.2s; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); background-color: var(--btn-bg); border-width: var(--border); border-style: solid; border-color: var(--btn-border); text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15)); touch-action: manipulation; box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
@media (hover: hover) { &:hover { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } }
&:focus-visible, &:has(:focus-visible) { outline-width: 2px; outline-style: solid; isolation: isolate; }
&:active:not(.btn-active) { translate: 0 0.5px; --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); --btn-shadow: 0 0 0 0 oklch(0% 0 0 / 0), 0 0 0 0 oklch(0% 0 0 / 0); }
&:is(input[type="checkbox"], input[type="radio"]) { @apply appearance-none;
/* &:not(.btn-square, .btn-circle) { @apply w-auto; } */
&[aria-label]::after { --tw-content: attr(aria-label); content: var(--tw-content); } } &:where(input:checked:not(.filter .btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); isolation: isolate; } }}
.select-disabled,.select:disabled,.select[data-disabled],.select[disabled] { &.select-button { &:not(.btn-link, .btn-ghost) { box-shadow: none; @apply brightness-75 saturate-50; }
@apply pointer-events-none; --btn-border: #0000; --btn-noise: none; --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); }}
@utility select-active { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 15%); --btn-shadow: 0 0 0 0 oklch(0% 0 0 / 0), 0 0 0 0 oklch(0% 0 0 / 0); isolation: isolate;}
@utility select-primary { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content);}
@utility select-secondary { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content);}
@utility select-accent { --btn-color: var(--color-accent); --btn-fg: var(--color-accent-content);}
@utility select-neutral { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content);}
@utility select-info { --btn-color: var(--color-info); --btn-fg: var(--color-info-content);}
@utility select-success { --btn-color: var(--color-success); --btn-fg: var(--color-success-content);}
@utility select-warning { --btn-color: var(--color-warning); --btn-fg: var(--color-warning-content);}
@utility select-error { --btn-color: var(--color-error); --btn-fg: var(--color-error-content);}@utility select-notice { --btn-color: var(--color-notice); --btn-fg: var(--color-notice-content);}@utility select-alert { --btn-color: var(--color-alert); --btn-fg: var(--color-alert-content);}
@utility select-ghost { &:not(.btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn)) { --btn-shadow: ""; --btn-bg: #0000; --btn-border: #0000; --btn-noise: none; &:not(:disabled, [disabled], .btn-disabled) { @apply outline-current; --btn-fg: var(--btn-color, currentColor); } }
@media (hover: none) { &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover { @apply outline-current; --btn-shadow: ""; --btn-bg: #0000; --btn-fg: var(--btn-color, currentColor); --btn-border: #0000; --btn-noise: none; } }}
@utility select-xs { --fontsize: 0.6875rem; --btn-p: 0.5rem; --size: calc(var(--size-field, 0.25rem) * 6);}
@utility select-sm { --fontsize: 0.75rem; --btn-p: 0.75rem; --size: calc(var(--size-field, 0.25rem) * 8);}
@utility select-md { --fontsize: 0.875rem; --btn-p: 1rem; --size: calc(var(--size-field, 0.25rem) * 10);}
@utility select-lg { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, 0.25rem) * 12);}
@utility select-xl { --fontsize: 1.375rem; --btn-p: 1.5rem; --size: calc(var(--size-field, 0.25rem) * 14);}