clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-02-01 22:48:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: view transition safari

Browse Source
This commit is contained in:
Aaron Iker
2026-01-15 23:47:15 +01:00
parent 306fc05c00
commit b45a01ac71
2 changed files with 7 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/console/app/src/routes/black.css
View File

@@ -98,7 +98,7 @@
::view-transition-new(actions-20), ::view-transition-new(actions-20),
::view-transition-new(actions-100), ::view-transition-new(actions-100),
::view-transition-new(actions-200) { ::view-transition-new(actions-200) {
animation: fade-in-up 200ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards; animation: fade-in-up 300ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
opacity: 0; opacity: 0;
} }
@@ -109,25 +109,6 @@
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
} }
::view-transition-image-pair(card-20),
::view-transition-image-pair(card-100),
::view-transition-image-pair(card-200) {
isolation: isolate;
overflow: hidden;
}
::view-transition-old(card-20),
::view-transition-old(card-100),
::view-transition-old(card-200) {
mix-blend-mode: normal;
}
::view-transition-new(card-20),
::view-transition-new(card-100),
::view-transition-new(card-200) {
mix-blend-mode: normal;
}
[data-page="black"] { [data-page="black"] {
background: #000; background: #000;
min-height: 100vh; min-height: 100vh;
@@ -600,6 +581,8 @@
[data-slot="icon"] { [data-slot="icon"] {
color: rgba(255, 255, 255, 0.59); color: rgba(255, 255, 255, 0.59);
isolation: isolate;
transform: translateZ(0);
} }
[data-slot="price"] { [data-slot="price"] {

8
packages/console/app/src/routes/black/index.tsx
View File

@@ -49,10 +49,10 @@ export default function Black() {
data-slot="pricing-card" data-slot="pricing-card"
style={{ "view-transition-name": `card-${plan.id}` }} style={{ "view-transition-name": `card-${plan.id}` }}
> >
<div data-slot="icon" style={{ "view-transition-name": `icon-${plan.id}` }}> <div data-slot="icon">
<PlanIcon plan={plan.id} /> <PlanIcon plan={plan.id} />
</div> </div>
<p data-slot="price" style={{ "view-transition-name": `price-${plan.id}` }}> <p data-slot="price">
<span data-slot="amount">${plan.id}</span> <span data-slot="period">per month</span> <span data-slot="amount">${plan.id}</span> <span data-slot="period">per month</span>
<Show when={plan.multiplier}> <Show when={plan.multiplier}>
<span data-slot="multiplier">{plan.multiplier}</span> <span data-slot="multiplier">{plan.multiplier}</span>
@@ -67,10 +67,10 @@ export default function Black() {
{(plan) => ( {(plan) => (
<div data-slot="selected-plan"> <div data-slot="selected-plan">
<div data-slot="selected-card" style={{ "view-transition-name": `card-${plan().id}` }}> <div data-slot="selected-card" style={{ "view-transition-name": `card-${plan().id}` }}>
<div data-slot="icon" style={{ "view-transition-name": `icon-${plan().id}` }}> <div data-slot="icon">
<PlanIcon plan={plan().id} /> <PlanIcon plan={plan().id} />
</div> </div>
<p data-slot="price" style={{ "view-transition-name": `price-${plan().id}` }}> <p data-slot="price">
<span data-slot="amount">${plan().id}</span>{" "} <span data-slot="amount">${plan().id}</span>{" "}
<span data-slot="period">per person billed monthly</span> <span data-slot="period">per person billed monthly</span>
<Show when={plan().multiplier}> <Show when={plan().multiplier}>