Jesse_ChenandClaude Opus 5.5
dec36bce01
TASK-birth-sky-polish-20260928. - P1: chart page dialog shows only the picture on a dimmed stage, 「保存图片」 below, icon × in the corner. - P2: BFF returns one server-built `caption` (「1994年5月18日 07:40 · 杭州」); printed under the fact line in all three places; adopted time adds 「 · 校正后」. - P3: convergence 3 s + words 2.5 s + fade 1 s; settled frame still equals the exported cover. - P4: redeem paywall no longer opens when the starter home appears; first send refused for credits opens it, later ones open billing; convergence dialog portalled to <body>. BUG-1080 investigating (Chrome repro rules out the overlay covering the convergence). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01N4f2nya58RoRu4yEmJgRGE
90 lines
3.0 KiB
CSS
90 lines
3.0 KiB
CSS
/* 「那一刻的天空」 dialog (TASK-birth-sky-cover-20260928; poster only since
|
||
TASK-birth-sky-polish-20260928 P1). Loaded with the lazy dialog chunk only,
|
||
never on first paint. No panel and no title bar: the dialog is a dimmed
|
||
stage showing the painted picture, 「保存图片」 under it and an icon × in the
|
||
corner. The stage and controls use the night palette (DESIGN §17: the dark
|
||
theme floor #1a1a19 and ink #f2f0ea), because the picture is always night. */
|
||
.birth-sky-dialog {
|
||
position: fixed;
|
||
inset: 0;
|
||
width: 100%;
|
||
max-width: none;
|
||
height: 100%;
|
||
max-height: none;
|
||
margin: 0;
|
||
padding: var(--space-4);
|
||
padding-top: max(var(--space-4), env(safe-area-inset-top));
|
||
padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
|
||
border: 0;
|
||
background: transparent;
|
||
color: #f2f0ea;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
.birth-sky-dialog[open] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-4);
|
||
}
|
||
.birth-sky-dialog::backdrop { background: color-mix(in srgb, #1a1a19 90%, transparent); }
|
||
.birth-sky-image {
|
||
display: block;
|
||
flex: 0 1 auto;
|
||
min-height: 0;
|
||
width: auto;
|
||
height: auto;
|
||
/* Room for the save row (44px) + gap + stage padding. */
|
||
max-width: 100%;
|
||
max-height: calc(100vh - 44px - 3 * var(--space-4) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
|
||
aspect-ratio: 3 / 4;
|
||
border-radius: var(--radius-md);
|
||
-webkit-touch-callout: default;
|
||
}
|
||
@supports (height: 1dvh) {
|
||
.birth-sky-dialog { height: 100dvh; }
|
||
.birth-sky-image { max-height: calc(100dvh - 44px - 3 * var(--space-4) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
|
||
}
|
||
.birth-sky-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
flex-shrink: 0;
|
||
}
|
||
.birth-sky-actions p { margin: 0; text-align: center; color: #b3afa4; font-size: var(--type-body-sm); }
|
||
.birth-sky-save {
|
||
min-height: 44px;
|
||
padding: 0 var(--space-4);
|
||
border: 1px solid color-mix(in srgb, #f2f0ea 42%, transparent);
|
||
border-radius: var(--radius-md);
|
||
background: transparent;
|
||
color: #f2f0ea;
|
||
font: inherit;
|
||
font-size: var(--type-body-sm);
|
||
cursor: pointer;
|
||
transition: background-color 120ms ease-out, transform 120ms ease-out;
|
||
}
|
||
.birth-sky-save:hover { background: color-mix(in srgb, #f2f0ea 10%, transparent); }
|
||
.birth-sky-save:active { transform: scale(.96); }
|
||
.birth-sky-close {
|
||
position: absolute;
|
||
top: max(var(--space-2), env(safe-area-inset-top));
|
||
right: var(--space-2);
|
||
width: 44px;
|
||
height: 44px;
|
||
display: grid;
|
||
place-items: center;
|
||
border: 0;
|
||
border-radius: var(--radius-md);
|
||
background: transparent;
|
||
color: #f2f0ea;
|
||
cursor: pointer;
|
||
transition: background-color 120ms ease-out;
|
||
}
|
||
.birth-sky-close:hover { background: color-mix(in srgb, #f2f0ea 10%, transparent); }
|
||
.birth-sky-close svg { width: 20px; height: 20px; }
|
||
.birth-sky-save:focus-visible, .birth-sky-close:focus-visible { outline: 2px solid #f2f0ea; outline-offset: 2px; }
|
||
@media print { .birth-sky-dialog { display: none !important; } }
|