/* Guest Desk — the new look. Calm, fast, a little cinematic. Everything here is scoped to so the classic look is untouched. Sections: 1 tokens · 2 frame · 3 lists · 4 thread · 5 shared pieces · 6 motion 7 page-to-page transitions · 8 palette, shortcuts, toasts · 9 phones · 10 reduced motion */ /* ---------------------------------------------------------------- 1 tokens */ :root[data-look="v2"] { --sky: #0d1322; /* canvas: the thread, page background */ --sky-deep: #090e1a; /* rail, inputs */ --panel: #131b2e; /* surfaces: list pane, cards, side panel */ --panel-2: #1f2b47; /* selected */ --hover: #19233a; --line: rgba(150, 172, 228, .09); /* hairlines, only where shade isn't enough */ --ink: #e8edf7; --muted: #9ba6bf; --faint: #687391; --aurora: #3dd6ff; /* the one accent: actions, focus, waiting */ --aurora-ink: #04131f; --magenta: var(--aurora); /* counts used magenta; one accent now */ --violet: #a796f0; --good: #5fd3a2; /* done */ --warn: #e7b25a; /* pending, needs a look */ --bad: #ee7470; /* problem */ --c-sms: #5fd3a2; --c-wa: #4cc9b4; --c-fb: #7aa8f0; --c-ig: #e48ab8; --c-email: #e7b25a; --c-call: #9ba6bf; --c-note: #a796f0; --radius: 10px; --display: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.4, 0, 1, 1); --t-fast: 140ms; /* hovers, small UI */ --t-mid: 220ms; /* panels, layout */ --t-exit: 150ms; /* exits are quicker than entrances */ } [data-look="v2"] body { font-size: 14.5px; letter-spacing: -0.003em; background: var(--sky); } [data-look="v2"] h1, [data-look="v2"] h2, [data-look="v2"] h3 { letter-spacing: -0.015em; font-weight: 650; } [data-look="v2"] :focus-visible { outline: 2px solid var(--aurora); outline-offset: 2px; transition: outline-offset var(--t-fast) var(--ease); } [data-look="v2"] a:hover { text-decoration: none; } /* ---------------------------------------------------------------- 2 frame */ [data-look="v2"] .rail { background: var(--sky-deep); border-right: 0; padding: 14px 10px; } [data-look="v2"] .rail .mark { filter: none; width: 34px; height: 34px; } [data-look="v2"] .rail .brand { padding-bottom: 16px; } [data-look="v2"] .brand-name { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; } [data-look="v2"] .rail a:not(.brand) { padding: 8px 10px; border-radius: 8px; font-size: 14px; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } [data-look="v2"] .rail a:not(.brand):hover { background: var(--hover); } [data-look="v2"] .rail a.on { background: var(--panel); } [data-look="v2"] .rail .count, [data-look="v2"] .seg a b { background: var(--aurora); color: var(--aurora-ink); font-weight: 700; overflow: hidden; display: inline-block; } [data-look="v2"] .rail .who { border-top: 0; } [data-look="v2"] .top { background: color-mix(in srgb, var(--sky) 88%, transparent); border-bottom: 0; box-shadow: 0 1px 0 var(--line); padding: 12px 22px; } [data-look="v2"] .top h1 { font-size: 18px; } [data-look="v2"] .top-curtain { opacity: .38; } [data-look="v2"] .top-search input { background: var(--panel); border-color: transparent; } [data-look="v2"] .top-search input:focus { border-color: var(--line); background: var(--hover); } [data-look="v2"] .kbd-hint { display: inline-flex; gap: 3px; align-items: center; margin-left: 6px; } [data-look="v2"] kbd { font: 600 11px/1 "Instrument Sans", sans-serif; padding: 3px 5px; border-radius: 5px; background: var(--hover); color: var(--muted); box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); } /* ---------------------------------------------------------------- 3 lists */ [data-look="v2"] .inbox .pane { border-right: 0; } [data-look="v2"] .inbox .list-pane { background: var(--panel); } [data-look="v2"] .inbox .filters { background: var(--panel); border-bottom: 0; padding: 12px 12px 8px; } [data-look="v2"] .seg { background: var(--sky-deep); border: 0; border-radius: 9px; } [data-look="v2"] .seg a { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } [data-look="v2"] .seg a.on { background: var(--panel-2); box-shadow: none; } [data-look="v2"] .chan-tabs a { transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } [data-look="v2"] #convos { padding: 2px 8px 16px; } [data-look="v2"] .convo { view-transition-class: row; border-bottom: 0; border-radius: 9px; padding: 10px 12px 10px 14px; margin: 1px 0; gap: 2px 10px; transition: background-color var(--t-fast) var(--ease); isolation: isolate; } [data-look="v2"] .convo:hover { background: var(--hover); } [data-look="v2"] .convo.on { background: transparent; } /* The selected highlight is its own layer so it can glide from row to row. */ [data-look="v2"] .convo .sel-glow { display: block; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--panel-2); opacity: 0; pointer-events: none; } [data-look="v2"] .convo.on .sel-glow { opacity: 1; view-transition-name: sel-glow; } [data-look="v2"] .convo .name { font-size: 15px; font-weight: 600; color: var(--ink); } [data-look="v2"] .convo .when { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; } [data-look="v2"] .convo .preview { font-size: 13.5px; color: var(--muted); } [data-look="v2"] .convo.waiting .preview { color: #c6cfe2; } [data-look="v2"] .convo.waiting::before { top: 14px; bottom: auto; height: 18px; width: 3px; left: 3px; border-radius: 3px; } [data-look="v2"] .convo.waiting .name::after { display: none; } /* One tight block: name · channel dots · waiting · time, then the preview. */ [data-look="v2"] .convo { grid-template-columns: minmax(0, 1fr) auto auto; } [data-look="v2"] .convo .name { grid-column: 1; grid-row: 1; } [data-look="v2"] .convo .meta { grid-column: 2; grid-row: 1; gap: 5px; align-items: center; } [data-look="v2"] .convo .when { grid-column: 3; grid-row: 1; align-self: center; } [data-look="v2"] .convo .preview { grid-column: 1 / -1; grid-row: 2; } [data-look="v2"] .convo .meta .wait { margin-left: 2px; font-size: 11.5px; } /* Channel names fold down to their dots; the waiting time stays in words. */ [data-look="v2"] .convo .meta .ch { font-size: 0; gap: 0; } [data-look="v2"] .convo .meta .ch::before { width: 6px; height: 6px; opacity: .85; } [data-look="v2"] .list a.item, [data-look="v2"] td { border-color: var(--line); } [data-look="v2"] .list a.item { border-radius: 8px; padding: 10px 8px; margin: 0 -8px; transition: background-color var(--t-fast) var(--ease); } [data-look="v2"] .list a.item:hover { background: var(--hover); } [data-look="v2"] tbody tr { transition: background-color var(--t-fast) var(--ease); } [data-look="v2"] tbody tr:hover { background: rgba(255, 255, 255, .025); } /* ---------------------------------------------------------------- 4 thread */ [data-look="v2"] .thread { background: var(--sky); } [data-look="v2"] .thread-head { border-bottom: 0; box-shadow: 0 1px 0 var(--line); padding: 12px 20px; } [data-look="v2"] .thread-head h2 { font-size: 17px; } [data-look="v2"] .msgs { padding: 20px 22px; gap: 8px; } [data-look="v2"] .bubble { border: 0; background: var(--panel); border-radius: 16px; padding: 9px 13px; transition: box-shadow var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease); } [data-look="v2"] .bubble.in { border-bottom-left-radius: 5px; } [data-look="v2"] .bubble.out { background: #183253; border-bottom-right-radius: 5px; } [data-look="v2"] .bubble.open { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--aurora) 70%, transparent); } [data-look="v2"] .bubble .meta { color: var(--faint); font-size: 11.5px; } [data-look="v2"] .bubble .meta .ch { font-size: 11.5px; } /* Secondary actions wait for hover or focus. */ [data-look="v2"] .bubble .meta .del { opacity: 0; transition: opacity var(--t-fast) var(--ease); } [data-look="v2"] .bubble:hover .meta .del, [data-look="v2"] .bubble:focus-within .meta .del { opacity: 1; } [data-look="v2"] .event, [data-look="v2"] .event-card { border: 0; background: rgba(255, 255, 255, .03); } [data-look="v2"] .event-card.open, [data-look="v2"] .event.open { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--aurora) 60%, transparent); } [data-look="v2"] .note { border: 0; background: color-mix(in srgb, var(--c-note) 12%, transparent); color: #dcd4fb; } [data-look="v2"] .day-break { color: var(--faint); font-size: 11.5px; font-weight: 500; } [data-look="v2"] .composer { background: var(--sky); border-top: 0; box-shadow: 0 -1px 0 var(--line); padding: 12px 20px 14px; } [data-look="v2"] .composer textarea { background: var(--panel); border-color: transparent; border-radius: 12px; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-mid) var(--ease); } [data-look="v2"] .composer textarea:focus { border-color: color-mix(in srgb, var(--aurora) 45%, transparent); outline: none; } [data-look="v2"] .composer .choice { padding: 5px 11px; } [data-look="v2"] .inbox .side { background: var(--panel); } [data-look="v2"] .side .booking { border: 0; background: var(--hover); } [data-look="v2"] .rx-badges { border: 0; background: var(--panel-2); } /* ---------------------------------------------------------------- 5 shared pieces */ [data-look="v2"] .card, [data-look="v2"] .stat, [data-look="v2"] .tile { border: 0; background: var(--panel); } [data-look="v2"] .tile { transition: background-color var(--t-fast) var(--ease); } [data-look="v2"] .tile:hover { background: var(--hover); } [data-look="v2"] .week a { border: 0; background: var(--panel); transition: background-color var(--t-fast) var(--ease); } [data-look="v2"] .week a:hover { background: var(--hover); } [data-look="v2"] .subnav a, [data-look="v2"] .chips a { border-color: transparent; background: var(--panel); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } [data-look="v2"] .subnav a.on, [data-look="v2"] .chips a.on { background: var(--panel-2); border-color: transparent; color: var(--ink); } [data-look="v2"] button, [data-look="v2"] .btn { border-color: transparent; background: var(--hover); border-radius: 9px; transition: background-color var(--t-fast) var(--ease), transform 120ms var(--ease), box-shadow var(--t-fast) var(--ease); } [data-look="v2"] button:hover, [data-look="v2"] .btn:hover { background: #22304f; border-color: transparent; } [data-look="v2"] button.primary, [data-look="v2"] .btn.primary { background: var(--aurora); color: var(--aurora-ink); } [data-look="v2"] button.primary:hover, [data-look="v2"] .btn.primary:hover { background: #6ae0ff; } [data-look="v2"] button.link { background: none; } /* Press: buttons give a little under your finger. */ [data-look="v2"] button:not([disabled]):active, [data-look="v2"] .btn:active { transform: scale(.97); transition-duration: 60ms; } [data-look="v2"] input, [data-look="v2"] select, [data-look="v2"] textarea { border-color: var(--line); transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } [data-look="v2"] .pill { border-color: transparent; background: rgba(255, 255, 255, .05); transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease); } [data-look="v2"] .pill.good { background: color-mix(in srgb, var(--good) 14%, transparent); } [data-look="v2"] .pill.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); } [data-look="v2"] .pill.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); } [data-look="v2"] .pill.call { background: color-mix(in srgb, var(--violet) 14%, transparent); } [data-look="v2"] .flash { border: 0; } [data-look="v2"] .flash.notice { background: color-mix(in srgb, var(--aurora) 12%, transparent); } [data-look="v2"] .flash.error { background: color-mix(in srgb, var(--bad) 14%, transparent); } [data-look="v2"] .suggest { border: 0; background: #18213a; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); border-radius: 12px; } [data-look="v2"] .emoji-grid { border: 0; background: #18213a; } [data-look="v2"] details.batch { border-color: var(--line); } /* ---------------------------------------------------------------- 6 motion */ @media (prefers-reduced-motion: no-preference) { /* First load: the shell settles in, then the list cascades (18ms apart, done in under 400ms). */ [data-look="v2"] .shell-in .page, [data-look="v2"] .shell-in .rail { animation: v2-fade 200ms var(--ease) both; } [data-look="v2"] .cascade { animation: v2-rise 160ms var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); } /* A new conversation slides in at the top of the list with a soft highlight that fades. */ [data-look="v2"] .arrive { animation: v2-arrive 260ms var(--ease) both, v2-glow 1400ms ease-out both; } /* New message in the open conversation (and your own the moment you press Send). */ [data-look="v2"] .rise { animation: v2-rise 240ms var(--ease) both; } /* Status change: a tiny confirmation pulse. */ [data-look="v2"] .pulse { animation: v2-pulse 420ms var(--ease); } [data-look="v2"] .resolving { animation: v2-resolve 300ms var(--ease) both; } /* Popovers open from where they were triggered; closing is instant. */ [data-look="v2"] .emoji-grid:not([hidden]) { transform-origin: 100% 100%; animation: v2-pop 180ms var(--ease) both; } [data-look="v2"] .suggest:not([hidden]) { transform-origin: 50% 0; animation: v2-pop 160ms var(--ease) both; } [data-look="v2"] details[open] > :not(summary) { animation: v2-drop 180ms var(--ease) both; } [data-look="v2"] .inbox.show-side .side { animation: v2-from-right var(--t-mid) var(--ease) both; } [data-look="v2"] .inbox.show-side .side-scrim { animation: v2-fade var(--t-mid) var(--ease) both; } [data-look="v2"] .composer { transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease); } [data-look="v2"] .composer textarea.sent-clear { color: transparent; transition: color 160ms var(--ease-out); } [data-look="v2"] .flash { animation: v2-drop 260ms var(--ease) both; } } [data-look="v2"] .roll { display: inline-grid; overflow: hidden; vertical-align: top; height: 1.4em; } [data-look="v2"] .roll > span { grid-area: 1 / 1; transition: transform 260ms var(--ease), opacity 200ms var(--ease); } @keyframes v2-fade { from { opacity: 0; } } @keyframes v2-rise { from { opacity: 0; transform: translateY(6px); } } @keyframes v2-arrive { from { opacity: 0; transform: translateY(-10px); } } @keyframes v2-glow { 0%, 30% { background-color: color-mix(in srgb, var(--aurora) 14%, transparent); } 100% { background-color: transparent; } } @keyframes v2-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes v2-resolve { 50% { box-shadow: inset 0 0 0 1.5px var(--good); } 100% { box-shadow: inset 0 0 0 1.5px transparent; opacity: .6; } } @keyframes v2-pop { from { opacity: 0; transform: scale(.96); } } @keyframes v2-drop { from { opacity: 0; transform: translateY(-4px); } } @keyframes v2-from-right { from { opacity: .4; transform: translateX(24px); } } @keyframes v2-out { to { opacity: 0; } } /* Loading: shapes of what's coming instead of a blank pane or a spinner. */ [data-look="v2"] .skel { border-radius: 14px; background: linear-gradient(90deg, var(--panel) 0%, #1a2440 50%, var(--panel) 100%); background-size: 200% 100%; animation: v2-shimmer 1.1s linear infinite; } @keyframes v2-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } [data-look="v2"] .thread.loading .msgs > *, [data-look="v2"] .thread.loading .thread-head > * { visibility: hidden; } [data-look="v2"] .thread .skel-wrap { display: none; } [data-look="v2"] .thread.loading .skel-wrap { display: flex; flex-direction: column; gap: 10px; position: absolute; inset: 64px 22px auto 22px; animation: v2-fade 160ms var(--ease) both; } [data-look="v2"] .thread { position: relative; } [data-look="v2"] .skel-wrap .skel { height: 44px; width: 52%; } [data-look="v2"] .skel-wrap .skel.r { align-self: flex-end; width: 44%; } [data-look="v2"] .skel-wrap .skel.s { width: 30%; height: 34px; } /* ---------------------------------------------------------------- 7 page-to-page transitions */ /* Classic look never opts in, so none of this runs there. The page itself swaps instantly; only the parts that explain the move animate. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition { pointer-events: none; } /* never block a click mid-transition */ ::view-transition-group(*) { animation-duration: var(--t-mid, 220ms); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } ::view-transition-group(sel-glow) { animation-duration: 240ms; } /* The highlight glides underneath the rows, never over their text. */ ::view-transition-group(*.row) { z-index: 2; } @media (min-width: 861px) { [data-look="v2"] .inbox > .inbox-empty { view-transition-name: thread; } } ::view-transition-old(thread) { animation: v2-out 110ms cubic-bezier(0.4, 0, 1, 1) both; } ::view-transition-new(thread) { animation: v2-thread-in 230ms cubic-bezier(0.16, 1, 0.3, 1) both; } html[data-vt=same]::view-transition-old(thread) { animation: v2-out 120ms linear both; } html[data-vt=same]::view-transition-new(thread) { animation: v2-fade 120ms linear both; } ::view-transition-old(side) { animation: v2-out 110ms linear both; } ::view-transition-new(side) { animation: v2-fade 200ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes v2-thread-in { from { opacity: 0; transform: translateX(14px); } } [data-look="v2"] .inbox .thread { view-transition-name: thread; } [data-look="v2"] .inbox .side { view-transition-name: side; } [data-look="v2"] .rail { view-transition-name: rail; } [data-look="v2"] .top { view-transition-name: top; } [data-look="v2"] .inbox .filters { view-transition-name: filters; } /* ---------------------------------------------------------------- 8 palette, shortcuts, toasts */ [data-look="v2"] .cmdk-back { position: fixed; inset: 0; z-index: 200; background: rgba(5, 8, 16, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } [data-look="v2"] .cmdk { position: fixed; z-index: 201; left: 50%; top: 14vh; width: min(620px, calc(100vw - 32px)); transform: translateX(-50%); border-radius: 14px; background: #151e33; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, .6); } [data-look="v2"] .cmdk input { border: 0; border-radius: 0; background: transparent; font-size: 16px; padding: 16px 18px; box-shadow: 0 1px 0 var(--line); } [data-look="v2"] .cmdk input:focus { outline: none; } [data-look="v2"] .cmdk-list { max-height: min(58vh, 440px); overflow-y: auto; padding: 6px; } [data-look="v2"] .cmdk-h { padding: 10px 12px 4px; font-size: 12px; color: var(--faint); font-weight: 500; } [data-look="v2"] .cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--ink); cursor: pointer; transition: background-color 90ms var(--ease); } [data-look="v2"] .cmdk-item .sub { color: var(--faint); font-size: 12.5px; margin-left: auto; white-space: nowrap; } [data-look="v2"] .cmdk-item.on { background: var(--panel-2); } [data-look="v2"] .cmdk-item .ic { width: 20px; text-align: center; opacity: .8; } [data-look="v2"] .cmdk-empty { padding: 18px 14px; color: var(--muted); font-size: 14px; } [data-look="v2"] .cmdk-foot { display: flex; gap: 14px; padding: 9px 14px; font-size: 12px; color: var(--faint); box-shadow: 0 -1px 0 var(--line); } [data-look="v2"] .cmdk .skel { height: 34px; margin: 6px 6px; border-radius: 9px; } [data-look="v2"] .keys-sheet .cmdk-list { padding: 8px 16px 14px; } [data-look="v2"] .keys-sheet dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 0; align-items: center; } [data-look="v2"] .keys-sheet dt { display: flex; gap: 4px; justify-content: flex-end; } [data-look="v2"] .keys-sheet dd { margin: 0; color: var(--muted); } @media (prefers-reduced-motion: no-preference) { [data-look="v2"] .cmdk-back { animation: v2-fade 160ms var(--ease) both; } [data-look="v2"] .cmdk { animation: v2-cmdk 200ms var(--ease) both; } [data-look="v2"] .cmdk.closing { animation: v2-cmdk-out 120ms var(--ease-out) both; } [data-look="v2"] .cmdk-back.closing { animation: v2-out 120ms var(--ease-out) both; } } @keyframes v2-cmdk { from { opacity: 0; transform: translateX(-50%) scale(.96); filter: blur(4px); } } @keyframes v2-cmdk-out { to { opacity: 0; transform: translateX(-50%) scale(.98); } } /* Toasts: slide in from the corner, stack, fade away. */ [data-look="v2"] .news-item { background: #18213a; color: var(--ink); border-left: 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 14px 34px rgba(0, 0, 0, .45); } [data-look="v2"] .news-item .news-link { color: var(--ink); } [data-look="v2"] .news-item.is-call { box-shadow: inset 3px 0 0 var(--warn), 0 0 0 1px var(--line), 0 14px 34px rgba(0, 0, 0, .45); } [data-look="v2"] .news-item.is-clear { background: #18213a; } [data-look="v2"] .news-x { background: none; color: var(--faint); } [data-look="v2"] .call-toast { background: #18213a; color: var(--ink); border: 0; box-shadow: 0 14px 34px rgba(0,0,0,.45); } @media (prefers-reduced-motion: no-preference) { [data-look="v2"] .news-item { animation: v2-toast 260ms var(--ease) both; } [data-look="v2"] .news-item.leaving { animation: v2-toast-out 180ms var(--ease-out) both; } [data-look="v2"] .call-toast:not([hidden]) { animation: v2-rise 240ms var(--ease) both; } } @keyframes v2-toast { from { opacity: 0; transform: translateX(24px); } } @keyframes v2-toast-out { to { opacity: 0; transform: translateX(16px); } } /* ---------------------------------------------------------------- 9 phones */ @media (max-width: 860px) { [data-look="v2"] .rail { box-shadow: 0 -1px 0 var(--line); border-top: 0; } [data-look="v2"] .thread-head { padding: 8px 12px; flex-wrap: nowrap; } [data-look="v2"] .thread-head > .wrap:first-child { flex-wrap: nowrap; min-width: 0; gap: 4px; } [data-look="v2"] .thread-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } [data-look="v2"] .thread-head .back { background: none; color: var(--aurora); padding: 6px 8px 6px 0; font-size: 0; } [data-look="v2"] .thread-head .back::before { content: "‹"; font-size: 30px; line-height: 20px; font-weight: 300; } [data-look="v2"] .head-acts button { padding: 6px 10px; font-size: 13px; } [data-look="v2"] #convos { padding: 2px 6px 12px; } /* The conversation slides over the list like a native app, and back off it. */ ::view-transition-new(thread) { animation: v2-push 300ms cubic-bezier(0.16, 1, 0.3, 1) both; } ::view-transition-old(thread) { animation: none; } html[data-vt=close]::view-transition-old(thread) { animation: v2-pop-off 220ms cubic-bezier(0.4, 0, 1, 1) both; z-index: 2; } html[data-vt=close]::view-transition-new(thread) { animation: none; } html[data-vt=switch]::view-transition-new(thread), html[data-vt=same]::view-transition-new(thread) { animation: v2-fade 140ms linear both; } [data-look="v2"] .inbox .list-pane { view-transition-name: thread; } /* The list stays still underneath as one layer while the conversation slides over it. */ [data-look="v2"] .inbox .convo, [data-look="v2"] .inbox .filters { view-transition-name: none !important; } [data-look="v2"] .inbox.has-thread .list-pane { view-transition-name: none; } ::view-transition-group(sel-glow) { animation: none; } ::view-transition-old(sel-glow), ::view-transition-new(sel-glow) { animation: none; display: none; } } @keyframes v2-push { from { transform: translateX(100%); } } @keyframes v2-pop-off { to { transform: translateX(100%); } } /* ---------------------------------------------------------------- 10 reduced motion */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 1ms !important; } [data-look="v2"] .roll > span { transition: none; } [data-look="v2"] .skel { animation: none; } [data-look="v2"] button:not([disabled]):active, [data-look="v2"] .btn:active { transform: none; } }