Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441@reference "../../../../app.css";
/* ---------- Pull requests, reimagined: the stack and its version picker in iso (PrCard.svelte) ---------- */.landing { /* The group, 502 × 480: the PR lower left, the picker floating above to the right. */ .pr-iso { position: relative; width: 502px; height: 480px; font-size: 12px; font-weight: 450; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); } /* Desktop: the stage is taller than the group — lift it so the PR sits centred and the picker opens into the space above; and 10px left, so the card's near corner, not its box, sits on the column's edge. */ @media (width >= 64rem) { .pr-iso { translate: -10px -70px; } } /* Narrower desktops: shrunk, as the updates' stage is, so the open picker still clears the screen's edge. */ @media (width >= 64rem) and (width < 80rem) { .pr-iso { zoom: 0.86; } } /* The panels: flat plates drawn by their silhouette. */ .pr-panel { box-sizing: border-box; border: 1px solid var(--hl-edge); background: var(--hl-glass); -webkit-backdrop-filter: var(--hl-blur); backdrop-filter: var(--hl-blur); } /* The pull request, on the feature plane (.at). */ .pr-main { --x: 58px; --y: 187px; width: 319px; height: 259px; border-radius: 16px; transform: var(--iso-plane); } /* The slab's thickness: a copy of the silhouette, --hl-depth straight down the screen. */ .pr-main.rim-copy { --y: calc(187px + var(--hl-depth)); background: var(--hl-side); } .pr-bar { display: flex; align-items: center; justify-content: space-between; height: 41px; padding: 0 12px; border-bottom: 1px solid var(--hl-mid); } .pr-mode, .pr-ver, .pr-item { font: inherit; color: inherit; cursor: pointer; transition: background-color 0.15s ease, scale 0.15s var(--ease-out); } .pr-mode { display: flex; align-items: center; gap: 4px; padding: 3px 5px; margin-left: -5px; border: 0; border-radius: 5px; background: none; } .pr-n, .pr-id, .pr-age { color: var(--text-3); } .pr-ver { display: flex; align-items: center; gap: 4px; padding: 5px 4px 5px 6px; border: 1px solid var(--hl-mid); border-radius: 6px; background: none; } .pr-mode:hover, .pr-ver:hover { background: var(--glass-solid-hover); } .pr-ver[aria-expanded="true"] { border-color: var(--hl-hi); } .pr-mode:active, .pr-ver:active { scale: 0.97; } .pr-ver svg { display: block; color: var(--muted); } .pr-file { width: 12px; height: 12px; } .pr-caret { width: 10px; height: 10px; transition: rotate 0.2s var(--ease-out); } .pr-ver[aria-expanded="true"] .pr-caret { rotate: 180deg; } :is(.pr-mode, .pr-ver, .pr-item):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* The stack: dot · ID · title · diff on a 40px rhythm, a line joining the dots. */ .pr-list { position: relative; padding: 8px; } .pr-list ol { margin: 0; padding: 0; list-style: none; } .pr-row { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 9px 0 18px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease; } .pr-row.base { cursor: default; } button.pr-row:not([aria-current]):hover { background: var(--glass-solid-hover); } button.pr-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } /* The selection: one hairline box, with a ring round its dot, slid to the selected row on the 40px rhythm. */ .pr-sel { position: absolute; top: 8px; right: 8px; left: 8px; height: 40px; box-sizing: border-box; border: 1px solid var(--hl-mid); border-radius: 8px; pointer-events: none; transform: translateY(calc(var(--sel) * 40px)); transition: transform 0.26s var(--ease-in-out); } .pr-sel::before { content: ""; position: absolute; top: 50%; left: 19.7px; width: 17.4px; height: 17.4px; box-sizing: border-box; border: 1px solid var(--hl-mid); border-radius: 50%; transform: translate(-50%, -50%); } .pr-row i { position: relative; flex: none; width: 5.4px; height: 5.4px; box-sizing: border-box; border: 1px solid var(--text-3); border-radius: 50%; transition: border-color 0.2s ease; } .pr-row i::after { content: ""; position: absolute; top: calc(100% + 1px); left: 50%; width: 1px; height: 34px; margin-left: -0.5px; background: var(--hl-mid); } .pr-row.base i::after { content: none; } /* The selected change's dot is the one highlight. */ .pr-row[aria-current] i { border-color: var(--hl-hi); } /* While the picker is open, its button has the highlight instead. */ .pr-group[data-open] .pr-row[aria-current] i { border-color: var(--muted); } .pr-id { flex: none; width: 62.75px; margin-left: 12px; } .pr-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pr-df { display: flex; flex: none; margin-left: 6px; font-size: 10px; font-weight: 500; } .pr-df b, .pr-df s { display: flex; align-items: center; gap: 1px; padding: 3px; font-weight: inherit; text-decoration: none; } .pr-df svg { width: 8px; height: 8px; } .pr-df b { border-radius: 4px 0 0 4px; background: var(--color-background-success-subtle); color: var(--color-foreground-success); } .pr-df s { border-radius: 0 4px 4px 0; background: var(--color-background-danger-subtle); color: var(--color-foreground-danger); } /* New content settles in row by row, top of the stack first. */ .pr-swap { animation: pr-swap 0.26s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); } /* The picker floats above, on its own plane. Opening, it slides straight up while its plate grows upward out of the slide; then the rows fade in, a waterfall from the top. Closing, the rows go at once and the panel sinks back, a little quicker. */ .pr-menu { --x: 393.2px; --y: 132.3px; z-index: 1; outline: none; transition: opacity 0.2s var(--ease-out), transform 0.28s var(--ease-out), visibility 0s; } .pr-menu[inert] { visibility: hidden; opacity: 0; transform: translateY(40px); transition: opacity 0.18s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s 0.2s; } /* Rotate 19°, skew 19°, squash to 95%, at 80%. */ .pr-pick { position: relative; border-radius: 12px 16px 16px 12px; transform: translate(-50%, -50%) var(--iso-picker); } /* Inside the iso plane, so "up" is the panel's own height: it grows from its bottom edge. The picker's plane stands upright (its local y is straight down the screen), a wall facing the viewer, so its thickness runs back across the floor: up and to the right, showing as a wall along its right end and a sliver over its top. A box-shadow is laid in the plane, so the screen offset (3.1, -5.15) — 6px along the floor's depth — is local (3.27, -6.22). */ .pr-pick-bg { position: absolute; z-index: -1; inset: 0; border-radius: inherit; box-shadow: 3.27px -6.22px 0 -1px var(--hl-side), 3.27px -6.22px 0 0 var(--hl-edge); transform-origin: 50% 100%; transition: transform 0.3s var(--ease-out); } .pr-menu[inert] .pr-pick-bg { transform: scaleY(0.4); transition-duration: 0.2s; } .pr-in { transition: opacity 0.2s ease calc(0.16s + var(--i) * 40ms); } .pr-item.pr-in { transition: opacity 0.2s ease calc(0.16s + var(--i) * 40ms), background-color 0.15s ease; } .pr-menu[inert] .pr-in { opacity: 0; transition: opacity 0.1s ease; } /* `p` too: out-ranks the landing copy's paragraph margins. */ .pr-pick p.pr-pick-h { margin: 0; padding: 16px 16px 8px; } .pr-pick-list { display: flex; flex-direction: column; width: 232px; box-sizing: border-box; padding: 4px 8px 8px; } .pr-item { display: flex; align-items: center; gap: 16px; padding: 5px 9px; border: 1px solid transparent; border-radius: 8px; background: none; text-align: left; } .pr-item:hover { background: var(--glass-solid-hover); } .pr-item[aria-checked="true"] { border-color: var(--hl-mid); } .pr-v { width: 16px; } .pr-hash { padding: 3px 4px; border: 1px solid var(--hl-mid); border-radius: 5px; color: var(--muted); } .pr-age { margin-left: auto; } @media (prefers-reduced-motion: reduce) { .pr-caret, .pr-sel { transition: none; } .pr-menu, .pr-menu[inert], .pr-pick-bg, .pr-menu[inert] .pr-pick-bg { transform: none; } .pr-swap { animation-name: pr-fade; } } @media (width < 64rem) { .pr-iso { padding: 0; zoom: 0.66; } /* Phones: a size up, the art having the column to itself. */ @media (width < 48rem) { .pr-iso { zoom: 0.78; } } /* Small phones: a little less, so the open picker stays on screen. */ @media (width < 380px) { .pr-iso { zoom: 0.7; } } /* Small screens: the picker opens where it stands, a fade and its rows' waterfall, no slide or growth. */ .pr-menu[inert], .pr-menu[inert] .pr-pick-bg { transform: none; } } /* Small phones: the picker comes in over the PR, its right edge on the PR's, so it stays on screen, and a little higher, so that it clears the PR's top edge. */ @media (width < 420px) { .pr-menu { --x: 325px; --y: 112px; } }}
.landing { @variant light { /* The light ring is a step lighter than --text-3. */ .pr-row i { border-color: var(--color-foreground-placeholder); } .pr-hash { color: var(--text); } }}
@keyframes pr-swap { from { opacity: 0; transform: translateY(4px); }}
@keyframes pr-fade { from { opacity: 0; }}