Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139@reference "../../../app.css";
@property --lit { syntax: "<number>"; inherits: true; initial-value: 1;}
/* ---------- The hero's notification stack (IsoStack.svelte) ---------- */.landing { .iso { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; } /* A slot (.at, by its centre): an upright box much bigger than its card, so only the card takes the pointer and the links on the card under it stay clickable. The slots step straight down the screen, the stack's z axis, so every card keeps its size. New ones drop in from a step above. */ .ii { --ax: 50%; --ay: 50%; display: grid; place-items: center; width: 420px; height: 240px; transition: translate 0.7s var(--ease-glide), --lit 0.5s ease; pointer-events: none; @starting-style { translate: calc(var(--x) - var(--ax)) calc(var(--y) - var(--ay) - 44px); } } /* The card: a hairline plate on the vouch chat's iso plane, mirrored to rise to the right. */ .icard { --rim: var(--hl-edge); --rim-inset: -1px; --av: 36px; --fade: linear-gradient( color-mix(in srgb, var(--bg) calc((1 - var(--lit)) * 100%), transparent) 0 0 ); --glass-bg: var(--fade), var(--glass-fill); position: relative; grid-area: 1 / 1; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 360px; height: 52px; padding: 7px 14px 7px 9px; border: 1px solid transparent; border-radius: 12px; transform: var(--iso-hero); transition: opacity 0.5s ease; pointer-events: auto; @starting-style { opacity: 0; } } .icard::before, .icard::after, .icard > * { opacity: var(--lit); } .ii.gone .icard { opacity: 0; } /* The plate's thickness: its silhouette again, --hl-depth straight down the screen. */ .icard.rim-copy { translate: 0 var(--hl-depth); background: var(--fade), var(--hl-side); }
/* A party shrinks to fit the card and its name ends in an ellipsis, so a long handle or repo never runs out past the card's edge. */ .ip { display: flex; align-items: center; gap: 4.98px; flex: 0 1 auto; min-width: 0; } a.ip { text-decoration: none; border-radius: 18px; } a.ip:hover .in { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); text-underline-offset: 2px; } a.ip:hover .avatar { box-shadow: 0 0 0 1px var(--hl-hi); } a.ip:focus-visible { outline-offset: 2px; } .in, .iv { font-size: 12.95px; font-weight: 450; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; color: var(--text); } .in { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .iv { flex: none; color: var(--text-3); } /* How long ago, pushed to the card's right edge. */ .it { flex: none; margin-left: auto; padding-left: 1.37px; font-size: 11px; font-weight: 450; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ii { transition: none; } }}