Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
4.8 kB · 247 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248@utility input { cursor: text; border: var(--border) solid #0000; @apply bg-base-100 relative flex shrink appearance-none items-center gap-2 px-3 align-middle whitespace-nowrap; width: clamp(3rem, 100%, 100%); height: var(--size); font-size: max(var(--font-size, 0.875rem), 0.875rem); touch-action: manipulation; 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)); border-color: var(--input-color); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; --size: calc(var(--size-field, 0.25rem) * 10); --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); &:where(input) { @apply inline-flex; } :where(input) { @apply inline-flex h-full w-full appearance-none bg-transparent; border: none;
&:focus, &:focus-within { @apply outline-hidden; } }
:where(input[type="url"]), :where(input[type="email"]) { direction: ltr; }
:where(input[type="date"]) { @apply inline-flex; }
&:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; }
/* increase font size in iOS so the page won't zoom */ @media (pointer: coarse) { @supports (-webkit-touch-callout: none) { &:focus, &:focus-within { --font-size: 1rem; } } }
&:has(> input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { @apply border-base-200 bg-base-200 text-base-content/40 placeholder-base-content/20 cursor-not-allowed; box-shadow: none; }
&:has(> input[disabled]) > input[disabled] { @apply cursor-not-allowed; }
&::-webkit-date-and-time-value { text-align: inherit; }
&[type="number"] { &::-webkit-inner-spin-button { @apply -my-3 -me-3; } }
&::-webkit-calendar-picker-indicator { position: absolute; inset-inline-end: 0.75em; }
&:has(> input[type="date"]) { :where(input[type="date"]) { @apply inline-flex; -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset-inline-end: 0.75em; width: 1em; height: 1em; cursor: pointer; } }}
@utility input-ghost { @apply bg-transparent; box-shadow: none; border-color: #0000;
&:focus, &:focus-within { @apply text-base-content bg-base-100; border-color: #0000; box-shadow: none; }}
@utility input-neutral { &, &:focus, &:focus-within { --input-color: var(--color-neutral); }}
@utility input-primary { &, &:focus, &:focus-within { --input-color: var(--color-primary); }}
@utility input-secondary { &, &:focus, &:focus-within { --input-color: var(--color-secondary); }}
@utility input-accent { &, &:focus, &:focus-within { --input-color: var(--color-accent); }}
@utility input-info { &, &:focus, &:focus-within { --input-color: var(--color-info); }}
@utility input-success { &, &:focus, &:focus-within { --input-color: var(--color-success); }}
@utility input-warning { &, &:focus, &:focus-within { --input-color: var(--color-warning); }}
@utility input-error { &, &:focus, &:focus-within { --input-color: var(--color-error); }}@utility input-notice { &, &:focus, &:focus-within { --input-color: var(--color-notice); }}@utility input-alert { &, &:focus, &:focus-within { --input-color: var(--color-alert-color); }}
@utility input-xs { --size: calc(var(--size-field, 0.25rem) * 6); font-size: max(var(--font-size, 0.75rem), 0.6875rem);
&[type="number"] { &::-webkit-inner-spin-button { @apply -my-1 -me-3; } }}
@utility input-sm { --size: calc(var(--size-field, 0.25rem) * 8); font-size: max(var(--font-size, 0.75rem), 0.75rem);
&[type="number"] { &::-webkit-inner-spin-button { @apply -my-2 -me-3; } }}
@utility input-md { --size: calc(var(--size-field, 0.25rem) * 10); font-size: max(var(--font-size, 0.875rem), 0.875rem);
&[type="number"] { &::-webkit-inner-spin-button { @apply -my-3 -me-3; } }}
@utility input-lg { --size: calc(var(--size-field, 0.25rem) * 12); font-size: max(var(--font-size, 1.125rem), 1.125rem);
&[type="number"] { &::-webkit-inner-spin-button { @apply -my-3 -me-3; } }}
@utility input-xl { --size: calc(var(--size-field, 0.25rem) * 14); font-size: max(var(--font-size, 1.375rem), 1.375rem);
&[type="number"] { &::-webkit-inner-spin-button { @apply -my-4 -me-3; } }}