Something went wrong. Try again.
🐦⬛ An observer for FOLK atproto records. folk.observer
atproto folk
Something went wrong. Try again.
3.3 kB · 151 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152.button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: fit-content; white-space: nowrap; border: 1px solid var(--button-border, transparent); border-radius: 999px; background: var(--button-bg); color: var(--button-fg); font-family: var(--font-mono); font-weight: 500; line-height: 1; cursor: var(--cursor-hand); user-select: none; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;}
.button:active:not(:disabled) { cursor: var(--cursor-hand-pressed);}
.button:hover:not(:disabled) { background: var(--button-bg-hover); border-color: var(--button-border-hover, var(--button-border, transparent)); color: var(--button-fg-hover, var(--button-fg));}
.button:focus-visible { outline: 2px solid var(--grass); outline-offset: 2px;}
.button:disabled { pointer-events: none; opacity: 0.5;}
.button svg { pointer-events: none; flex-shrink: 0; width: 1em; height: 1em;}
/* Sizes. md matches the search input's height so the two line up in a row. */
.sm { height: 2rem; padding: 0 0.7rem; font-size: 0.75rem;}
.md { height: 2.25rem; padding: 0 0.9rem; font-size: 0.8rem;}
.lg { height: 2.6rem; padding: 0 1.15rem; font-size: 0.875rem;}
/* Icon-only collapses the box to a circle; width has to track the size class. */
.iconOnly { padding: 0;}
.iconOnly.sm { width: 2rem;}
.iconOnly.md { width: 2.25rem;}
.iconOnly.lg { width: 2.6rem;}
/* Variants. The palette only has two accents (--grass, --danger), so success reads as a synonym for primary by design rather than by accident. */
.primary { --button-bg: var(--grass); --button-bg-hover: color-mix(in srgb, var(--grass) 85%, #fff); --button-fg: var(--bg);}
.secondary { --button-bg: var(--raised); --button-bg-hover: var(--raised); --button-border: var(--border); --button-border-hover: #3f3f46; --button-fg: var(--text-dim); --button-fg-hover: var(--text);}
.outline { --button-bg: transparent; --button-bg-hover: var(--raised); --button-border: var(--border); --button-border-hover: #3f3f46; --button-fg: var(--text-dim); --button-fg-hover: var(--text);}
.ghost { --button-bg: transparent; --button-bg-hover: var(--raised); --button-fg: var(--text-dim); --button-fg-hover: var(--text);}
.success { --button-bg: var(--grass); --button-bg-hover: color-mix(in srgb, var(--grass) 85%, #fff); --button-fg: var(--bg);}
.successSoft { --button-bg: color-mix(in srgb, var(--grass) 12%, transparent); --button-bg-hover: color-mix(in srgb, var(--grass) 20%, transparent); --button-border: color-mix(in srgb, var(--grass) 35%, transparent); --button-fg: var(--grass);}
.danger { --button-bg: var(--danger); --button-bg-hover: color-mix(in srgb, var(--danger) 85%, #fff); --button-fg: var(--bg);}
.dangerSoft { --button-bg: color-mix(in srgb, var(--danger) 12%, transparent); --button-bg-hover: color-mix(in srgb, var(--danger) 20%, transparent); --button-border: color-mix(in srgb, var(--danger) 35%, transparent); --button-fg: var(--danger);}