/* Loop site: the Share section, round 2 option 1. Option 5's bento (one wide tile, two stacked beside it) with option 3's link card and setting switches. Share: a file dropped on the drop shelf (ShelfView.swift) becomes the link card. Control: Email, Password, Expiry and Watermark, drawn as the app draws a setting; each one switched on adds its badge to the link card in Share, so the two tiles work as one. Requests: the menu bar panel's Requests card (MenuBarView.swift), files arriving. Still at rest; plays once, in turn, when it comes into view. Every rule is scoped to #share; motion values are transitions.dev tokens. */ /* ---------- Context: the end of Use Cases above, the start of Formats below ---------- */ /* ---------- Tokens ---------- */ #share { --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms; --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms; --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --ease-out: ease-out; --ease-linear: linear; --ease-icon: cubic-bezier(0.2, 0, 0, 1); --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1); /* transitions.dev 27, toggle */ --toggle-dur: 350ms; --toggle-travel: 12px; --toggle-ov1: 1px; --toggle-ov2: 0px; --toggle-track: 200ms; --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1); /* transitions.dev 09, icon swap */ --icon-swap-dur: 250ms; --icon-swap-blur: 2px; --icon-swap-start-scale: 0.25; --icon-swap-ease: ease-in-out; /* transitions.dev 03, notification badge */ --badge-pop-dur: 500ms; --badge-pop-close-dur: 180ms; --badge-fade-dur: 400ms; --badge-fade-close-dur: 180ms; --badge-blur: 2px; --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1); --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1); --distance-micro: 4px; --distance-base: 8px; --distance-medium: 12px; --blur-small: 2px; --blur-medium: 3px; --blur-large: 8px; /* Layout: one grid, two rows of equal height */ --gap: 40px; --row: 180px; /* One point of the app's settings card and panel card */ --u: .95px; /* The link card's width, and the scale of the proposal's cover in it and on the dragged file */ --lc-w: 440px; --cz: 1px; --fz: .74px; /* The shelf's scale against the app's points */ --sh: .82; /* The app's panel and card colours, light (PanelKit.swift, PersonCard.swift) */ --k-ground: #F3F3F6; --k-card: #FFFFFF; --k-card-edge: rgba(0, 0, 0, .05); --k-field: #F3F3F6; --k-t1: #23262D; --k-t2: #6C727C; --k-t3: #9AA0AA; --k-glyph: #5C636E; --k-accent: #426DC8; --k-accent-fill: 106, 146, 232; --k-wash: rgba(106, 146, 232, .16); --k-badge: rgba(15, 20, 30, .055); --k-track: rgba(15, 20, 30, .14); --k-hover: #F8F8FA; --k-primary: #4B7BE3; --k-pop: 0 0 0 .6px rgba(0, 0, 0, .20), 0 2px 5px rgba(0, 0, 0, .06), 0 14px 30px rgba(20, 24, 40, .14); --k-lift: 0 0 0 .6px rgba(0, 0, 0, .07), 0 1.5px 5px rgba(0, 0, 0, .06), 0 12px 26px -12px rgba(20, 24, 40, .20); --k-btn: #FFFFFF; --k-btn-shadow: 0 0 0 .5px rgba(0, 0, 0, .16), 0 1px 1.5px rgba(0, 0, 0, .08); /* The drop shelf, light (ShelfInk) */ --s-ground: #F4F4F1; --s-edge: rgba(17, 16, 20, .10); --s-rim: rgba(255, 255, 255, .70); --s-wash: rgba(233, 238, 251, .95); --s-lit: #4B7BE3; --s-lit-top: #6A92E8; --s-on: #FFFFFF; --s-on2: rgba(255, 255, 255, .86); --s-accent: #426DC8; --s-text: #111014; --s-text2: #6C6B73; --s-near: rgba(58, 98, 196, .28); --s-far: rgba(58, 98, 196, .38); --s-shadow: 0 0 0 .5px rgba(17, 16, 20, .10), 0 2px 4px rgba(17, 22, 32, .05), 0 18px 40px -12px rgba(17, 22, 32, .24); /* The file */ --pg-dim: none; --f-sel: #4B7BE3; --f-on-sel: #FFFFFF; } :root[data-theme="dark"] #share { --k-ground: #1E1E20; --k-card: #2C2C2E; --k-card-edge: rgba(255, 255, 255, .06); --k-field: #232325; --k-t1: #ECEEF3; --k-t2: #9AA0AD; --k-t3: #6B7280; --k-glyph: #B7BECB; --k-accent: #86A9F2; --k-accent-fill: 134, 169, 242; --k-wash: rgba(134, 169, 242, .16); --k-badge: rgba(255, 255, 255, .075); --k-track: rgba(255, 255, 255, .16); --k-hover: #323235; --k-primary: #4B7BE3; --k-pop: 0 0 0 .6px rgba(255, 255, 255, .24), 0 2px 6px rgba(0, 0, 0, .30), 0 16px 34px rgba(0, 0, 0, .45); --k-lift: 0 0 0 .6px rgba(255, 255, 255, .09), 0 2px 6px rgba(0, 0, 0, .30), 0 14px 30px -12px rgba(0, 0, 0, .55); --k-btn: #4A4A4F; --k-btn-shadow: 0 0 0 .5px rgba(255, 255, 255, .10), 0 1px 1.5px rgba(0, 0, 0, .30); --s-ground: #1E1D22; --s-edge: rgba(255, 255, 255, .09); --s-rim: rgba(255, 255, 255, .14); --s-wash: rgba(45, 52, 71, .95); --s-lit: #86A9F2; --s-lit-top: #93B3F4; --s-on: #141317; --s-on2: rgba(20, 19, 23, .86); --s-accent: #86A9F2; --s-text: #F4F3F0; --s-text2: #9B9AA1; --s-near: rgba(0, 0, 0, .35); --s-far: rgba(134, 169, 242, .30); --s-shadow: 0 0 0 .5px rgba(255, 255, 255, .09), 0 2px 6px rgba(0, 0, 0, .35), 0 22px 44px -14px rgba(0, 0, 0, .7); --pg-dim: brightness(.9); --f-sel: #4B7BE3; --f-on-sel: #FFFFFF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #share { --k-ground: #1E1E20; --k-card: #2C2C2E; --k-card-edge: rgba(255, 255, 255, .06); --k-field: #232325; --k-t1: #ECEEF3; --k-t2: #9AA0AD; --k-t3: #6B7280; --k-glyph: #B7BECB; --k-accent: #86A9F2; --k-accent-fill: 134, 169, 242; --k-wash: rgba(134, 169, 242, .16); --k-badge: rgba(255, 255, 255, .075); --k-track: rgba(255, 255, 255, .16); --k-hover: #323235; --k-primary: #4B7BE3; --k-pop: 0 0 0 .6px rgba(255, 255, 255, .24), 0 2px 6px rgba(0, 0, 0, .30), 0 16px 34px rgba(0, 0, 0, .45); --k-lift: 0 0 0 .6px rgba(255, 255, 255, .09), 0 2px 6px rgba(0, 0, 0, .30), 0 14px 30px -12px rgba(0, 0, 0, .55); --k-btn: #4A4A4F; --k-btn-shadow: 0 0 0 .5px rgba(255, 255, 255, .10), 0 1px 1.5px rgba(0, 0, 0, .30); --s-ground: #1E1D22; --s-edge: rgba(255, 255, 255, .09); --s-rim: rgba(255, 255, 255, .14); --s-wash: rgba(45, 52, 71, .95); --s-lit: #86A9F2; --s-lit-top: #93B3F4; --s-on: #141317; --s-on2: rgba(20, 19, 23, .86); --s-accent: #86A9F2; --s-text: #F4F3F0; --s-text2: #9B9AA1; --s-near: rgba(0, 0, 0, .35); --s-far: rgba(134, 169, 242, .30); --s-shadow: 0 0 0 .5px rgba(255, 255, 255, .09), 0 2px 6px rgba(0, 0, 0, .35), 0 22px 44px -14px rgba(0, 0, 0, .7); --pg-dim: brightness(.9); --f-sel: #4B7BE3; --f-on-sel: #FFFFFF; } } /* ---------- Head ---------- */ #share .head h2 { font-size: clamp(30px, 3.4vw, 40px); } /* ---------- The bento: a wide tile over two rows, two tiles stacked beside it ---------- */ #share .bento { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(2, var(--row)); gap: var(--s4); margin-top: var(--gap); } #share .t-ways { grid-column: 1; grid-row: 1 / span 2; } #share .t-ctl { grid-column: 2; grid-row: 1; } #share .t-req { grid-column: 2; grid-row: 2; } #share .tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 24px 16px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-card); outline: none; -webkit-tap-highlight-color: transparent; cursor: default; transition: box-shadow var(--duration-fast) var(--ease-smooth-out); } #share .tile:hover, #share .tile.is-playing { box-shadow: var(--shadow-lift); } #share .tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } /* The tile playing: a soft ring in Loop blue, as the Capture section's chosen box has */ #share .tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 1.5px rgba(var(--k-accent-fill), .55); transition: opacity var(--duration-fast) var(--ease-smooth-out); } #share .tile.is-playing::before { opacity: 1; } /* A tile playing sits above its neighbours, so anything that travels past its edge is drawn on top. */ #share .tile.is-playing { z-index: 2; } #share .tt { position: relative; z-index: 1; } #share .tile-t { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink1); } /* One line at every width (measured down to 320) */ #share .tile-p { margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ink2); white-space: nowrap; } #share .vg { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 12px; } #share .cv, #share .rv { display: flex; align-items: flex-end; } /* The app's own type, as Capture's bar draws it */ #share .vg { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.2; } /* ================= Share: the shelf on the tile's right edge ================= */ #share .wi { --shelf-w: calc(204px * var(--sh)); --shelf-h: calc(304px * var(--sh)); } /* The file, centred in the room left of the shelf */ #share .wi-file { position: absolute; z-index: 3; left: calc((100% + 12px - var(--shelf-w)) / 2); top: 50%; display: flex; flex-direction: column; align-items: center; gap: 7px; transform: translate(-50%, -50%) translate(var(--fx, 0px), var(--fy, 0px)) scale(var(--fs, 1)); transition: transform 720ms var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out); } /* The proposal's cover, in Cobalt's colours: drawn once, sized by --cz (one point of the cover) */ #share .cv-pg { position: relative; display: block; flex: none; width: calc(76 * var(--cz)); height: calc(98 * var(--cz)); border-radius: calc(6 * var(--cz)); overflow: hidden; background: #E7ECF8; filter: var(--pg-dim); box-shadow: 0 0 0 1px rgba(13, 26, 58, .08), 0 2px 6px -2px rgba(13, 26, 58, .18); } #share .cv-pg > * { position: absolute; left: calc(9 * var(--cz)); display: block; } #share .cv-mark { top: calc(9 * var(--cz)); width: calc(13 * var(--cz)); height: calc(13 * var(--cz)); border-radius: 50%; } #share .cv-t { height: calc(5 * var(--cz)); border-radius: calc(2 * var(--cz)); background: #0D1A3A; } #share .cv-t.a { top: calc(34 * var(--cz)); width: calc(50 * var(--cz)); } #share .cv-t.b { top: calc(42 * var(--cz)); width: calc(34 * var(--cz)); } #share .cv-hl { top: calc(53 * var(--cz)); width: calc(16 * var(--cz)); height: calc(3 * var(--cz)); border-radius: calc(2 * var(--cz)); background: #2448C2; } #share .cv-l { width: calc(56 * var(--cz)); height: calc(2.5 * var(--cz)); border-radius: calc(2 * var(--cz)); background: rgba(13, 26, 58, .16); } #share .cv-l.l1 { top: calc(70 * var(--cz)); } #share .cv-l.l2 { top: calc(76 * var(--cz)); } #share .cv-l.l3 { top: calc(82 * var(--cz)); width: calc(38 * var(--cz)); } /* On the dragged file, as Finder previews it */ #share .doc { display: block; --cz: var(--fz); filter: drop-shadow(0 6px 10px rgba(17, 22, 32, .10)); transition: filter var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); } #share .fname { padding: 2px 6px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--k-t1); white-space: nowrap; transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out), opacity var(--duration-fast) var(--ease-smooth-out); } /* Picked up: Finder selects it, and the icon lifts */ #share .wi-file.is-held .fname { background: var(--f-sel); color: var(--f-on-sel); } #share .wi-file.is-held .doc { transform: scale(1.04); filter: drop-shadow(0 2px 2px rgba(17, 22, 32, .10)) drop-shadow(0 14px 18px rgba(17, 22, 32, .16)); } #share .wi-file.is-drag { opacity: .9; } /* Over the shelf its name would sit on the shelf's own words, so the name steps out of the way */ #share .wi-file.is-drag .fname { opacity: 0; transition-delay: 120ms; } /* Let go over Create Link: drawn into its icon */ #share .wi-file.is-in { opacity: 0; transition: transform var(--duration-fast) var(--ease-in-out), opacity 200ms var(--ease-in-out); } #share .wi-file.is-gone { opacity: 0; visibility: hidden; transition: none; } #share .wi-file.is-back { transition: opacity var(--duration-slow) var(--ease-smooth-out) 120ms, transform 0s; } /* The shelf: lightly frosted ground, two targets */ #share .shelf { position: absolute; z-index: 2; right: -12px; top: 50%; display: flex; flex-direction: column; width: var(--shelf-w); height: var(--shelf-h); padding: calc(8px * var(--sh)); border-radius: calc(14px * var(--sh)); background: var(--s-ground); box-shadow: inset 0 1px 0 var(--s-rim), var(--s-shadow); transform: translateY(-50%); opacity: 1; transition: opacity 380ms var(--ease-smooth-out) 60ms, transform 380ms var(--ease-smooth-out) 60ms; } #share .shelf.is-away { opacity: 0; transform: translateY(-50%) translateX(10px); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); } #share .tg { position: relative; display: grid; place-items: center; flex: none; overflow: hidden; border-radius: calc(10px * var(--sh)); background: var(--s-wash); transition: height var(--duration-fast) var(--ease-smooth-out), margin-top var(--duration-fast) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out); } #share .tg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: linear-gradient(to bottom, var(--s-lit-top) 0%, var(--s-lit) 46%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); transition: opacity var(--duration-quick) var(--ease-smooth-out); } #share .tg-create { height: calc(288px * var(--sh)); } #share .tg-custom { height: 0; margin-top: 0; } #share .shelf[data-l="split"] .tg-create { height: calc(186px * var(--sh)); } #share .shelf[data-l="split"] .tg-custom { height: calc(94px * var(--sh)); margin-top: calc(8px * var(--sh)); } #share .tg .tl { position: relative; display: flex; flex-direction: column; align-items: center; color: var(--s-text); white-space: nowrap; transition: color var(--duration-quick) var(--ease-smooth-out), opacity 200ms var(--ease-smooth-out), transform 200ms var(--ease-smooth-out); } #share .tg .ic { width: calc(24px * var(--sh)); height: calc(24px * var(--sh)); margin-bottom: calc(9px * var(--sh)); overflow: visible; fill: none; stroke: var(--s-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); } #share .tg-custom .ic { margin-bottom: calc(6px * var(--sh)); } #share .tg .ic.sl circle { fill: var(--s-wash); transition: transform var(--duration-quick) var(--ease-smooth-out), fill var(--duration-quick) var(--ease-smooth-out); } #share .tg b { font-size: calc(15px * var(--sh)); font-weight: 600; letter-spacing: calc(-.15px * var(--sh)); } #share .tg i { margin-top: calc(2px * var(--sh)); font-size: calc(12px * var(--sh)); font-weight: 500; font-style: normal; color: var(--s-text2); transition: color var(--duration-quick) var(--ease-smooth-out); } /* Customise Link rises in under Create Link once the file is over the shelf */ #share .tg-custom .tl { opacity: 0; transform: translateY(calc(8px * var(--sh))); } #share .shelf[data-l="split"] .tg-custom .tl { opacity: 1; transform: none; transition-delay: 30ms; } /* Lit: the file is over it */ #share .tg.is-lit { transform: translateY(-1px) scale(1.012); box-shadow: 0 1px 2px var(--s-near), 0 6px 14px var(--s-far); } #share .tg.is-lit::before { opacity: 1; } #share .tg.is-lit .tl { color: var(--s-on); } #share .tg.is-lit .ic { stroke: var(--s-on); } #share .tg.is-lit i { color: var(--s-on2); } #share .tg.is-lit .ua { transform: translateY(-2px); } #share .tg.is-recede { transform: scale(.985); opacity: .5; } /* The upload arrow and the tick that replaces it */ #share .tg .ua { transition: transform var(--duration-quick) var(--ease-smooth-out), opacity var(--duration-quick) cubic-bezier(.5, 0, .75, 0); } #share .tg .tk { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 200ms var(--ease-smooth-out); } #share .tg.is-press { transform: scale(.965); transition-duration: 90ms; } #share .tg .ic.is-swell { transform: scale(1.1); } #share .tg.is-landed .ua { transform: translateY(-7px); opacity: 0; } #share .tg.is-landed .tk { stroke-dashoffset: 0; transition-delay: 60ms; } /* The link: the file, its address, Copied, and a badge for each setting that is on. It is one of Loop's panels (the app's ground, a white card on it; outer radius = inner radius + padding) and keeps one size whatever is on. */ #share .lc { position: absolute; z-index: 2; left: 50%; top: 50%; width: var(--lc-w); max-width: 100%; padding: 8px; border-radius: 18px; background: var(--k-ground); box-shadow: var(--k-pop); color: var(--k-t1); opacity: 0; visibility: hidden; filter: blur(var(--blur-medium)); transform: translate(-50%, calc(-50% + var(--distance-base))); transition: opacity var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), visibility 0s linear var(--duration-quick); } #share .lc.on { opacity: 1; visibility: visible; filter: blur(0); transform: translate(-50%, -50%); transition: opacity var(--duration-slow) var(--ease-smooth-out), filter var(--duration-slow) var(--ease-smooth-out), transform var(--duration-slow) var(--ease-smooth-out), visibility 0s; } #share .lk { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "pg nm" "pg ad" "pg ft"; column-gap: 16px; padding: 14px; border-radius: 10px; background: var(--k-card); box-shadow: inset 0 0 0 .5px var(--k-card-edge), 0 1.5px 5px rgba(0, 0, 0, .06); } #share .lk > .cv-pg { grid-area: pg; } #share .lk-nm { grid-area: nm; padding-top: 2px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; } #share .lk-ad { grid-area: ad; margin-top: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap; } #share .lk-ad .dom { color: var(--k-t3); font-weight: 500; } #share .lk-ad .nm { color: var(--k-t2); font-weight: 500; } #share .lk-ft { grid-area: ft; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; height: 28px; } /* Badges: one for each setting that is on. Each sits in a slot whose width eases open to the badge's own width (--bw, measured) while the badge pops in (transitions.dev 03); the row moves, never the card. */ #share .bdgs { display: flex; align-items: center; height: 26px; min-width: 0; } #share .bw { display: block; flex: none; width: 0; height: 26px; transition: width var(--duration-slow) var(--ease-smooth-out); } #share .bw.on { width: var(--bw, 32px); } #share .bb { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; min-width: 26px; border-radius: 7px; background: var(--k-wash); color: var(--k-accent); font-size: 12px; font-weight: 600; letter-spacing: -0.003em; white-space: nowrap; transform: scale(0); opacity: 0; filter: blur(var(--badge-blur)); transition: transform var(--badge-pop-close-dur) var(--badge-close-ease), opacity var(--badge-fade-close-dur) var(--badge-close-ease), filter var(--badge-pop-close-dur) var(--badge-close-ease); } #share .bb.wide { padding: 0 9px 0 7px; } #share .bw.on .bb { transform: scale(1); opacity: 1; filter: blur(0); transition: transform var(--badge-pop-dur) var(--badge-pop-ease) 60ms, opacity var(--badge-fade-dur) var(--badge-pop-ease) 60ms, filter var(--badge-pop-dur) var(--badge-pop-ease) 60ms; } #share .gl { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #share .bt { font-variant-numeric: tabular-nums; } /* Copied: the link is on the clipboard; the tick draws as the card arrives (transitions.dev 10) */ #share .cpd { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 11px 0 9px; border-radius: 8px; background: var(--k-wash); color: var(--k-accent); font-size: 12.5px; font-weight: 600; letter-spacing: -0.003em; } #share .ck { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } #share .ck path { stroke-dasharray: 15; stroke-dashoffset: 15; } #share .lc.on .ck path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duration-medium) var(--ease-smooth-out) 220ms; } /* The pointer */ #share .ptr { position: absolute; z-index: 6; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); opacity: 0; transform: translate(var(--px, 0px), var(--py, 0px)); transition: opacity var(--duration-quick) var(--ease-out), transform 720ms var(--ease-smooth-out); } #share .ptr.on { opacity: 1; } #share .ptr.is-down { transform: translate(var(--px, 0px), var(--py, 0px)) scale(.92); } #share .ptr.is-snap { transition: opacity var(--duration-quick) var(--ease-out), transform 0s; } #share .ptr.is-slow { transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-very-slow) var(--ease-smooth-out); } /* ================= The app's cards: Control and Requests ================= */ #share .sc { width: 100%; padding: calc(4 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--k-card); box-shadow: var(--k-lift); color: var(--k-t1); } #share .row { display: flex; align-items: center; gap: calc(11 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(8 * var(--u)); } #share .rg { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: 0 calc(2 * var(--u)); fill: none; stroke: var(--k-glyph); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); } #share .rl { font-size: calc(13 * var(--u)); font-weight: 500; white-space: nowrap; } /* ---- Control: the four settings, two by two, drawn as the app draws a setting (a symbol, its name, a switch) ---- */ #share .sw4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; } #share .st { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 11px; border: 0; border-radius: 10px; background: var(--k-card); color: var(--k-t1); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.003em; text-align: left; cursor: pointer; box-shadow: var(--k-lift); -webkit-tap-highlight-color: transparent; transition: transform var(--duration-quick) var(--ease-out), background-color var(--duration-fast) var(--ease-smooth-out); } #share .st:hover { background: var(--k-hover); } #share .st:active { transform: scale(.97); } #share .st:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } #share .stl { white-space: nowrap; } /* transitions.dev 09, icon swap: the outline symbol and the filled one share a cell */ #share .isw { position: relative; display: inline-grid; width: 16px; height: 16px; color: var(--k-glyph); transition: color var(--duration-fast) var(--ease-in-out); } #share .st[aria-pressed="true"] .isw { color: var(--k-accent); } #share .ii { grid-area: 1 / 1; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease); } #share .ii.fill { fill: currentColor; stroke: none; } #share .ii.fill .ln { fill: none; stroke: currentColor; stroke-width: 1.4; } #share .isw[data-state="a"] .ii[data-icon="a"], #share .isw[data-state="b"] .ii[data-icon="b"] { opacity: 1; filter: blur(0); transform: scale(1); } #share .isw[data-state="a"] .ii[data-icon="b"], #share .isw[data-state="b"] .ii[data-icon="a"] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); } /* transitions.dev 27, toggle: the thumb travels with a double bounce; the track's colour has its own clock */ #share .tgl { position: relative; display: block; width: 28px; height: 16px; border-radius: 8px; background: var(--k-track); transition: background-color var(--toggle-track) var(--toggle-ease); } #share .tgl[data-on="true"] { background: var(--k-primary); } #share .tgl-th { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .22); translate: 0 0; } #share .tgl[data-on="true"] .tgl-th { translate: var(--toggle-travel) 0; } #share .tgl.is-init[data-on="true"] .tgl-th { animation: sh-toggle-on var(--toggle-dur) var(--toggle-ease) both; } #share .tgl.is-init[data-on="false"] .tgl-th { animation: sh-toggle-off var(--toggle-dur) var(--toggle-ease) both; } @keyframes sh-toggle-on { 0% { translate: 0 0; } 55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; } 80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; } 100% { translate: var(--toggle-travel) 0; } } @keyframes sh-toggle-off { 0% { translate: var(--toggle-travel) 0; } 55% { translate: calc(0px - var(--toggle-ov1)) 0; } 80% { translate: var(--toggle-ov2) 0; } 100% { translate: 0 0; } } /* ---- Requests: files arriving ---- */ #share .rq-tx { display: flex; flex-direction: column; gap: calc(1 * var(--u)); min-width: 0; } #share .rt { font-size: calc(12.5 * var(--u)); font-weight: 500; white-space: nowrap; } #share .det { display: grid; grid-template-columns: max-content; font-size: calc(10.5 * var(--u)); color: var(--k-t2); } #share .det .d { grid-area: 1 / 1; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); visibility: hidden; transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out), visibility 0s linear var(--duration-quick); } #share .det .d.on { opacity: 1; transform: none; filter: blur(0); visibility: visible; transition: opacity var(--duration-fast) var(--ease-in-out) 40ms, transform var(--duration-fast) var(--ease-in-out) 40ms, filter var(--duration-fast) var(--ease-in-out) 40ms, visibility 0s; } #share .det .d.was { transform: translateY(calc(var(--distance-micro) * -1)); } #share .det em { font-style: normal; font-weight: 600; color: var(--k-accent); } #share .rq.live.is-busy .tray { stroke: var(--k-accent); } #share .rq .tray.is-bob { transform: translateY(calc(1.5 * var(--u))) scale(1.08); transition-duration: var(--duration-micro); } /* The kind of each file that came in (RequestCanvas.swift KindTile) */ #share .kinds { display: flex; gap: calc(4 * var(--u)); margin-left: auto; } #share .kt { display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--k-badge); color: var(--k-t2); font-size: calc(9 * var(--u)); font-weight: 700; letter-spacing: calc(.2 * var(--u)); opacity: 0; transform: translateY(calc(-26 * var(--u))) scale(.92); filter: blur(var(--blur-medium)); } #share .kt.pic { background: var(--k-wash); color: var(--k-accent); } #share .kt.in { opacity: 1; transform: none; filter: blur(0); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-slow) cubic-bezier(0.34, 1.36, 0.64, 1), filter var(--duration-fast) var(--ease-smooth-out); } #share .kt.out { transition: opacity var(--duration-quick) var(--ease-in-out); opacity: 0; transform: none; filter: blur(0); } #share .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Narrower: the wide tile across the top, the two below it ---------- */ @media (max-width: 960px) { #share .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; } #share .t-ways { grid-column: 1 / span 2; grid-row: 1; min-height: 360px; } #share .t-ctl { grid-column: 1; grid-row: 2; } #share .t-req { grid-column: 2; grid-row: 2; } #share .tile { padding-left: 20px; padding-right: 20px; } #share .sw4 { gap: 6px; } #share .st { gap: 6px; padding: 0 8px 0 9px; } } /* ---------- Too narrow for two tiles side by side: one column, still the desktop card ---------- */ @media (max-width: 760px) { #share .bento { grid-template-columns: minmax(0, 1fr); } #share .t-ways, #share .t-ctl, #share .t-req { grid-column: 1; grid-row: auto; } } /* ---------- Phones: one column. The card puts its badges and Copied on their own line under the file. ---------- */ @media (max-width: 640px) { #share { --gap: 36px; --sh: .58; --u: .92px; --cz: .6px; --fz: .62px; } #share .bento { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } #share .t-ways, #share .t-ctl, #share .t-req { grid-column: 1; grid-row: auto; } #share .t-ways { min-height: 0; } #share .tile { padding: 16px 18px 16px; border-radius: 18px; } #share .wi { flex: none; height: 204px; } #share .shelf { right: -10px; } #share .lc { width: 100%; } #share .lk { grid-template-rows: auto auto auto; grid-template-areas: "pg nm" "pg ad" "ft ft"; padding: 12px; column-gap: 12px; } #share .lk-nm { font-size: 15px; padding-top: 4px; } /* The address on two even lines, its domain then its name */ #share .lk-ad { display: flex; flex-direction: column; font-size: 12.5px; } #share .lk-ft { margin-top: 12px; } #share .bw.on { width: var(--bw, 30px); } #share .st { gap: 7px; padding: 0 9px 0 10px; } } /* The narrowest phones: the switches keep their name and switch (the symbol steps aside), and the Expiry badge shows its calendar alone, so the badges and Copied share one line */ @media (max-width: 360px) { #share .tile { padding-left: 16px; padding-right: 16px; } #share .tile-p { font-size: 14px; } #share .lc { padding: 6px; border-radius: 16px; } #share .st { grid-template-columns: minmax(0, 1fr) auto; padding: 0 9px 0 12px; font-size: 12.5px; } #share .st .isw { display: none; } #share .bb.wide { padding: 0; width: 26px; } #share .bb.wide .bt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } #share .lk-ft { gap: 8px; } #share .cpd { gap: 5px; padding: 0 9px 0 7px; } } @media (prefers-reduced-motion: reduce) { #share .tile, #share .tile::before, #share .wi-file, #share .doc, #share .fname, #share .shelf, #share .tg, #share .tg::before, #share .tg .tl, #share .tg .ic, #share .tg .ua, #share .tg .tk, #share .tg i, #share .lc, #share .ck path, #share .ptr, #share .rg, #share .bw, #share .bb, #share .st, #share .isw, #share .ii, #share .tgl, #share .det .d, #share .kt { transition: none !important; } #share .tgl-th { animation: none !important; } } /* ================= Requests, round 2 ================= */ /* States that share one cell and swap in place (transitions.dev 04, text states swap) */ #share .qs { grid-area: 1 / 1; opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); visibility: hidden; transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out), visibility 0s linear var(--duration-quick); } #share .qs.on { opacity: 1; transform: none; filter: blur(0); visibility: visible; transition: opacity var(--duration-fast) var(--ease-in-out) 40ms, transform var(--duration-fast) var(--ease-in-out) 40ms, filter var(--duration-fast) var(--ease-in-out) 40ms, visibility 0s; } #share .qs.was { transform: translateY(calc(var(--distance-micro) * -1)); } #share .xk { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #share .xk path { stroke-dasharray: 15; stroke-dashoffset: 15; transition: stroke-dashoffset var(--duration-quick) var(--ease-out); } #share .is-ticked .xk path, #share .is-ticked.xk path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duration-medium) var(--ease-smooth-out) 120ms; } /* ---- Requests: the drop area of the page the person you ask sees (pages/assets/request.js, viewer.css .rq-drop), on its own. It spans the tile's content width and is exactly the height of the Control tile's switches, so the two right-hand tiles line up. Files fall in, each uploads in its row, and the page says All Done. ---- */ #share .ra-pg { position: relative; width: 100%; color: var(--k-t1); } /* The well: the page's own drop area, a dashed edge inside a soft sunken square */ #share .ra-well { position: relative; display: grid; height: calc(2 * 38px + 8px); border-radius: 12px; background: var(--k-ground); box-shadow: inset 0 1.5px 4px rgba(32, 30, 26, .05), inset 0 0 0 1px rgba(0, 0, 0, .04); transition: background-color var(--duration-medium) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out); } #share .ra-well::after { content: ""; position: absolute; inset: 6px; border-radius: 8px; border: 1.25px dashed rgba(var(--k-accent-fill), 0); pointer-events: none; transition: border-color var(--duration-medium) var(--ease-smooth-out); } #share .ra-well.is-drop::after { border-color: rgba(var(--k-accent-fill), .32); } #share .ra-well.is-over { background: var(--k-wash); transform: scale(1.01); } #share .ra-well.is-over::after { border-color: var(--k-accent); } #share .ra-drop, #share .ra-done { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; } #share .ra-glyph { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--k-wash); color: var(--k-accent); } #share .ra-glyph svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #share .ra-dw { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; } #share .ra-dw b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; } #share .ra-dw i { font-style: normal; font-size: 11.5px; color: var(--k-t3); } #share .ra-done .ra-dw i { color: var(--k-t2); } /* Each file on its way: a soft wash fills the row from the left, then the size and a tick take the percentage's place. Three rows share the well's height evenly, inside the same 6px edge as the dashed line. */ #share .ra-ups { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 6px; } #share .ra-up { position: relative; display: flex; align-items: center; gap: 8px; min-height: 0; padding: 0 10px 0 6px; border-radius: 6px; overflow: hidden; isolation: isolate; font-size: 11.5px; } #share .ra-fill { position: absolute; inset: 0; z-index: -1; background: rgba(var(--k-accent-fill), .16); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 160ms linear, opacity var(--duration-very-slow) var(--ease-smooth-out) 200ms; } #share .ra-up.done .ra-fill { opacity: 0; } /* The square at the start of a row: a picture mark or a document mark, as the page draws a file it has no preview of */ #share .ra-k { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--k-badge); color: var(--k-t2); } #share .ra-k svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } #share .ra-k.pic { background: var(--k-wash); color: var(--k-accent); } #share .ra-n { flex: 1 1 auto; min-width: 0; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; } #share .ra-st { display: grid; justify-items: end; align-items: center; flex: none; } #share .ra-st > * { grid-area: 1 / 1; } #share .ra-pct { color: var(--k-t3); font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity var(--duration-quick) var(--ease-in-out), transform var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out); } #share .ra-up.done .ra-pct { opacity: 0; transform: translateY(calc(var(--distance-micro) * -1)); filter: blur(var(--blur-small)); } #share .ra-fin { display: inline-flex; align-items: center; gap: 6px; color: var(--k-t3); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transform: translateY(var(--distance-micro)); filter: blur(var(--blur-small)); transition: opacity var(--duration-fast) var(--ease-in-out) 100ms, transform var(--duration-fast) var(--ease-in-out) 100ms, filter var(--duration-fast) var(--ease-in-out) 100ms; } #share .ra-up.done .ra-fin { opacity: 1; transform: none; filter: blur(0); } #share .ra-ok { width: 11px; height: 11px; fill: none; stroke: var(--k-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: scale(.4); opacity: 0; transition: transform var(--duration-very-slow) var(--ease-bounce) 160ms, opacity var(--duration-fast) var(--ease-out) 160ms; } #share .ra-up.done .ra-ok { transform: none; opacity: 1; } /* All Done: a disc blooms and the tick draws */ #share .ra-seal { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--k-wash); color: var(--k-accent); transform: scale(.6); transition: transform var(--duration-very-slow) var(--ease-bounce); } #share .ra-done.on .ra-seal { transform: none; } #share .ra-seal .xk { width: 16px; height: 16px; } /* Three files on their way in, from above the middle of the well */ #share .ra-drag { position: absolute; z-index: 3; left: 50%; top: -34px; width: 40px; height: 34px; margin-left: -20px; pointer-events: none; opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--ds, 1)); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform 560ms var(--ease-smooth-out); } #share .ra-drag.on { opacity: 1; } #share .ra-drag.in { --dy: 52px; --ds: .7; opacity: 0; transition: opacity var(--duration-fast) var(--ease-in-out) 300ms, transform 560ms var(--ease-smooth-out); } #share .ra-f { position: absolute; left: 9px; top: 2px; width: 22px; height: 28px; border-radius: 4px; background: var(--k-card); box-shadow: 0 0 0 .6px rgba(0, 0, 0, .14), 0 4px 10px -3px rgba(20, 24, 40, .25); } #share .ra-f:nth-child(1) { transform: rotate(-9deg) translateX(-5px); background: #E7ECF8; } #share .ra-f:nth-child(2) { transform: rotate(6deg) translateX(5px); } #share .ra-f:nth-child(3) { background: linear-gradient(to bottom, #A9C2EE 0 58%, #7E9B86 58%); } /* Where the switches sit 6px apart, the well matches their block */ @media (max-width: 960px) { #share .ra-well { height: calc(2 * 38px + 6px); } } /* The narrowest phones: the switches above lose their symbol, so the rows lose a little air to match */ @media (max-width: 360px) { #share .ra-up { gap: 6px; padding: 0 8px 0 5px; } } @media (prefers-reduced-motion: reduce) { #share .ra-well, #share .ra-well::after, #share .ra-fill, #share .ra-pct, #share .ra-fin, #share .ra-ok, #share .ra-seal, #share .ra-drag, #share .qs, #share .xk path { transition: none !important; } }