Something went wrong. Try again.
Attic is a cozy space with lofty ambitions. attic.social
Something went wrong. Try again.
2.4 kB · 126 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127form { background: rgb(var(--color-off-white)); border: 5px solid rgb(var(--color-black)); box-shadow: inset 0 0 0 4px rgb(var(--color-yellow)); border-radius: 10px; border-start-start-radius: 20px; border-end-end-radius: 20px; corner-shape: bevel; color: rgb(var(--color-black)); display: grid; gap: 10px; justify-items: start; padding: 30px; padding-block-start: 25px; position: relative;
& label { display: block; font-size: var(--font-size-3); font-weight: 700; inline-size: fit-content; line-height: var(--line-height-2);
& span { font-weight: 400; } }
& > * { grid-column: 1 / -1; }
& > :is(.flex) { inline-size: 100%; }
:where(&[action*="editBookmark"]), :where(&[action*="createBookmark"]) { & input { inline-size: 100%; }
& div:has(input + button) { display: grid; inline-size: 100%; gap: 10px;
& button { --min-inline-size: 7ch; }
& [type="url"] + button { &:disabled { text-decoration: line-through; } }
@media (width >= 600px) { grid-template-columns: 1fr auto; & input { grid-column: 1; }
& button { grid-column: 2; } } } }
@media (width >= 600px) { &[action*="logout"] { grid-template-columns: 1fr auto;
& > * { grid-column: 1 / 2; }
& > button { grid-column: 2; grid-row: 1 / 3; } } }
&[action*="login"] { position: relative;
&::before { background: rgb(var(--color-brown) / 0.2); content: "@" / ""; display: grid; place-items: center; inline-size: 40px; inset-inline-start: calc(anchor(start) + 5px); inset-block-start: calc(anchor(start) + 5px); inset-block-end: calc(anchor(end) + 5px); position: fixed; position-anchor: --handle;
@supports not (inset: anchor(start)) { display: none; } }
& > input { inline-size: 100%;
@supports (inset: anchor(start)) { padding-inline-start: 40px; } }
@media (width >= 600px) { grid-template-columns: 1fr auto;
& > input { grid-column: 1 / 2; }
& > button { grid-column: 2 / 3; } } }}