Something went wrong. Try again.
Attic is a cozy space with lofty ambitions. attic.social
Something went wrong. Try again.
2.2 kB · 97 lines
CSS
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798@layer base, components, utility;
@import "base/fonts.css" layer(base);@import "base/reset.css" layer(base);@import "base/global.css" layer(base);@import "base/properties.css" layer(base);@import "base/typography.css" layer(base);
@import "components/avatar.css" layer(base);@import "components/button.css" layer(base);@import "components/input.css" layer(base);@import "components/form.css" layer(base);@import "components/bookmark.css" layer(base);
@import "utility/hidden.css" layer(base);@import "utility/flex.css" layer(base);
.error { color: rgb(var(--color-red)); font-weight: 700;}
#pointer { --size: 50px; background: url("/images/pointer.svg") center / 100% auto no-repeat; block-size: var(--size); filter: drop-shadow(2px 2px 0px rgb(var(--color-brown) / 0.3)); inset-block-start: calc( anchor(start) + ((0.5 * anchor-size(block) - (0.5 * var(--size)))) ); inset-inline-end: calc(anchor(start) + 5px); inline-size: var(--size); pointer-events: none; position-anchor: --pointer; position: fixed; user-select: none; z-index: 999;
:where(body:not(:has(:is(a[href], button):hover, :focus-visible))) & { display: none; }
@supports not (inset: anchor(start)) { display: none; }}
#handle { anchor-name: --handle;
&:focus-visible { anchor-name: --pointer, --handle; }}
#handle-listbox { background: rgb(var(--color-white)); border: 5px solid rgb(var(--color-black)); display: grid; inline-size: anchor-size(--handle inline); inset-block-start: -5px; max-block-size: 230px; overflow-x: hidden; overflow-y: auto; position: fixed; position-anchor: --handle; position-area: block-end center; position-visibility: no-overflow;
& .Avatar { --size: 40px; padding: 5px 10px; }
& [aria-selected="true"] { background: rgb(var(--color-light-yellow)); }
& > p { background: rgb(var(--color-brown) / 0.2); color: rgb(var(--color-brown)); font-size: var(--font-size-1); padding: 5px 10px; }
& [role="option"] { cursor: pointer;
&:hover { background: rgb(var(--color-yellow)); } }
@supports not (inset: anchor(start)) { display: none; }}