Something went wrong. Try again.
Attic is a cozy space with lofty ambitions. attic.social
Something went wrong. Try again.
2.0 kB · 101 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102.Tags,input,select { border: 15px solid transparent; border-image: var(--input-border) 15 fill stretch; block-size: calc(var(--font-size-button) + 30px); color: rgb(var(--color-black)); font-family: var(--font-family-1); font-size: var(--font-size-3); font-weight: 400; inline-size: min(100%, 400px); line-height: var(--line-height-1); padding: 0;}
select { background-image: var(--select-arrow), linear-gradient(to right, rgb(var(--color-brown)), rgb(var(--color-brown))); background-size: 15px auto, 100%; background-repeat: no-repeat; background-position: right center; border-image: var(--select-border) 15 stretch; color: rgb(var(--color-off-white)); font-weight: bold; padding-inline-end: 25px;}
input { &::placeholder { color: rgb(var(--color-black) / 0.5); opacity: 1; }
&:disabled { opacity: 0.5; pointer-events: none; }
&:user-invalid { border-image-source: var(--input-border-error); }}
.Tags { block-size: auto; column-gap: 5px; display: flex; flex-wrap: wrap; inline-size: 100%; min-inline-size: 0; row-gap: 15px;
&:has(:focus-visible) { outline: 4px solid magenta; outline-offset: 2px; }
& :is(input) { border: 2px solid black; block-size: calc(var(--font-size-button) + 10px); field-sizing: content; inline-size: fit-content; line-height: 1; margin-block: -5px; min-inline-size: 0; overflow: hidden; padding: 5px; text-overflow: ellipsis; white-space: nowrap;
&:focus-visible { outline: none; }
&:not([readonly]) { border-color: transparent; min-inline-size: 5ch; flex-grow: 1; }
&[readonly] { background: rgb(var(--color-yellow));
&::selection { background: transparent; }
&:focus-visible { background: rgb(var(--color-light-yellow)); }
&:hover { background: rgb(var(--color-light-yellow)); cursor: pointer; } } }}