Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
3.1 kB · 163 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164@utility textarea { border: var(--border) solid #0000; @apply bg-base-100 rounded-field min-h-20 shrink appearance-none py-2 align-middle; width: clamp(3rem, 20rem, 100%); padding-inline-start: 0.75rem; padding-inline-end: 0.75rem; font-size: max(var(--font-size, 0.875rem), 0.875rem); touch-action: manipulation; 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; --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); textarea { @apply appearance-none bg-transparent; border: none;
&:focus, &:focus-within { @apply outline-hidden; } }
&: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(> textarea[disabled]), &:is(:disabled, [disabled]) { @apply border-base-200 bg-base-200 placeholder-base-content text-base-content/40 placeholder-base-content/20 cursor-not-allowed; box-shadow: none; }
&:has(> textarea[disabled]) > textarea[disabled] { @apply cursor-not-allowed; }}
@utility textarea-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 textarea-neutral { &, &:focus, &:focus-within { --input-color: var(--color-neutral); }}
@utility textarea-primary { &, &:focus, &:focus-within { --input-color: var(--color-primary); }}
@utility textarea-secondary { &, &:focus, &:focus-within { --input-color: var(--color-secondary); }}
@utility textarea-accent { &, &:focus, &:focus-within { --input-color: var(--color-accent); }}
@utility textarea-info { &, &:focus, &:focus-within { --input-color: var(--color-info); }}
@utility textarea-success { &, &:focus, &:focus-within { --input-color: var(--color-success); }}
@utility textarea-warning { &, &:focus, &:focus-within { --input-color: var(--color-warning); }}
@utility textarea-error { &, &:focus, &:focus-within { --input-color: var(--color-error); }}@utility textarea-notice { &, &:focus, &:focus-within { --input-color: var(--color-notice); }}@utility textarea-alert { &, &:focus, &:focus-within { --input-color: var(--color-alert-color); }}
@utility textarea-xs { font-size: max(var(--font-size, 0.6875rem), 0.6875rem);}
@utility textarea-sm { font-size: max(var(--font-size, 0.75rem), 0.75rem);}
@utility textarea-md { font-size: max(var(--font-size, 0.875rem), 0.875rem);}
@utility textarea-lg { font-size: max(var(--font-size, 1.125rem), 1.125rem);}
@utility textarea-xl { font-size: max(var(--font-size, 1.375rem), 1.375rem);}