fix: clock zone layout — Ambient準拠(padding/font-size/letter-spacing/gap)

This commit is contained in:
posimai 2026-03-21 11:31:26 +09:00
parent 4304bcdc96
commit 033524fe73
1 changed files with 14 additions and 11 deletions

View File

@ -33,45 +33,48 @@
<style>
/* ── Clock zone ── */
.veil-clock {
padding: 28px 20px 16px;
padding: max(20px, env(safe-area-inset-top)) 16px 8px;
position: relative;
}
.veil-time {
font-size: 68px;
font-size: clamp(56px, 18vw, 80px);
font-weight: 300;
letter-spacing: -3px;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.veil-sub {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
gap: 8px;
font-size: 13px;
color: var(--text2);
margin-top: 8px;
margin-top: 4px;
}
.veil-sep { color: var(--text3); }
.veil-sep { color: var(--border); }
.veil-weather {
display: inline-flex;
align-items: center;
gap: 4px;
}
.veil-weather-icon {
width: 14px;
height: 14px;
width: 13px;
height: 13px;
stroke: var(--text2);
stroke-width: 1.75;
stroke-width: 2;
}
.veil-greeting {
font-size: 13px;
font-size: 11px;
font-weight: 300;
color: var(--text3);
margin-top: 4px;
min-height: 16px;
}
.veil-settings-btn {
position: absolute;
top: 20px;
top: max(16px, env(safe-area-inset-top));
right: 12px;
width: 36px;
height: 36px;