Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
4.1 kB · 207 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208.join { @apply inline-flex items-stretch; --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0;
:where(.join-item) { border-start-start-radius: var(--join-ss, 0); border-start-end-radius: var(--join-se, 0); border-end-start-radius: var(--join-es, 0); border-end-end-radius: var(--join-ee, 0); * { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } }
> .join-item:where(:first-child) { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; }
:first-child:not(:last-child) { :where(.join-item) { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } }
> .join-item:where(:last-child) { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); }
:last-child:not(:first-child) { :where(.join-item) { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } }
> .join-item:where(:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); }
:only-child { :where(.join-item) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } }
> :where(:focus, :has(:focus)) { z-index: 1; }
@media (hover: hover) { > :where(.btn:hover, :has(.btn:hover)) { isolation: isolate; } }}
.join-item { &:where(*:not(:first-child, :disabled, [disabled], .btn-disabled)) { margin-inline-start: calc(var(--border, 1px) * -1); margin-block-start: 0; }
&:where(*:is(:disabled, [disabled], .btn-disabled)) { border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px); }}
.join-vertical { @apply flex-col;
> .join-item:first-child { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: 0; --join-ee: 0; }
:first-child:not(:last-child) { .join-item { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: 0; --join-ee: 0; } }
> .join-item:last-child { --join-ss: 0; --join-se: 0; --join-es: var(--radius-field); --join-ee: var(--radius-field); }
:last-child:not(:first-child) { .join-item { --join-ss: 0; --join-se: 0; --join-es: var(--radius-field); --join-ee: var(--radius-field); } }
> .join-item:only-child { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); }
:only-child { .join-item { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } }
.join-item { &:where(*:not(:first-child)) { margin-inline-start: 0; margin-block-start: calc(var(--border, 1px) * -1); } }}
.join-horizontal { @apply flex-row;
> .join-item:first-child { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; }
:first-child:not(:last-child) { .join-item { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } }
> .join-item:last-child { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); }
:last-child:not(:first-child) { .join-item { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } }
> .join-item:only-child { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); }
:only-child { .join-item { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } }
.join-item { &:where(*:not(:first-child)) { margin-inline-start: calc(var(--border, 1px) * -1); margin-block-start: 0; } }}