mai
/
posimai-veil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

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