Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
7.0 kB · 295 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296.prose :where(a.btn:not(.btn-link)):not(:where([class~="not-prose"], [class~="not-prose"] *)) { @apply no-underline;}
@utility btn { @apply inline-flex shrink-0 cursor-pointer flex-nowrap items-center justify-center gap-1.5 text-center align-middle outline-offset-2 select-none;
padding-inline: var(--btn-p); color: var(--btn-fg); --tw-prose-links: 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); --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); @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; }}
.btn-disabled,.btn:disabled,.btn[disabled] { &: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 btn-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 btn-primary { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content);}
@utility btn-secondary { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content);}
@utility btn-accent { --btn-color: var(--color-accent); --btn-fg: var(--color-accent-content);}
@utility btn-neutral { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content);}
@utility btn-info { --btn-color: var(--color-info); --btn-fg: var(--color-info-content);}
@utility btn-success { --btn-color: var(--color-success); --btn-fg: var(--color-success-content);}
@utility btn-warning { --btn-color: var(--color-warning); --btn-fg: var(--color-warning-content);}
@utility btn-error { --btn-color: var(--color-error); --btn-fg: var(--color-error-content);}@utility btn-notice { --btn-color: var(--color-notice); --btn-fg: var(--color-notice-content);}@utility btn-alert { --btn-color: var(--color-alert); --btn-fg: var(--color-alert-content);}
@utility btn-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 btn-link { @apply underline outline-current; --btn-border: #0000; --btn-bg: #0000; --btn-noise: none; --btn-shadow: "";
&:not(.btn-disabled, .btn:disabled, .btn[disabled]) { --btn-fg: var(--btn-color, var(--color-primary)); }
&:is(.btn-active, :hover, :active:focus, :focus-visible) { --btn-border: #0000; --btn-bg: #0000; }}
@utility btn-outline { &:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) { --btn-shadow: ""; --btn-bg: #0008; --btn-fg: var(--btn-color); --btn-border: var(--btn-color); --btn-noise: none; }
@media (hover: none) { &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover { --btn-shadow: ""; --btn-bg: #0000; --btn-fg: var(--btn-color); --btn-border: var(--btn-color); --btn-noise: none; } }}
@utility btn-dash { &:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) { --btn-shadow: ""; --btn-bg: #0000; --btn-fg: var(--btn-color); --btn-border: var(--btn-color); --btn-noise: none; }
@media (hover: none) { &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover { --btn-shadow: ""; --btn-bg: #0000; --btn-fg: var(--btn-color); --btn-border: var(--btn-color); --btn-noise: none; } }
border-style: dashed;}
@utility btn-xs { --fontsize: 0.6875rem; --btn-p: 0.5rem; --size: calc(var(--size-field, 0.25rem) * 6);}
@utility btn-sm { --fontsize: 0.75rem; --btn-p: 0.75rem; --size: calc(var(--size-field, 0.25rem) * 8);}
@utility btn-md { --fontsize: 0.875rem; --btn-p: 1rem; --size: calc(var(--size-field, 0.25rem) * 10);}
@utility btn-lg { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, 0.25rem) * 12);}
@utility btn-xl { --fontsize: 1.375rem; --btn-p: 1.5rem; --size: calc(var(--size-field, 0.25rem) * 14);}
@utility btn-square { @apply px-0; width: var(--size); height: var(--size);}
@utility btn-circle { @apply rounded-full px-0; width: var(--size); height: var(--size);}
@utility btn-wide { @apply w-full max-w-64;}
@utility btn-block { @apply w-full;}