Add birthday previews and restore checklist taps
This commit is contained in:
parent
d2c7f004ea
commit
aaa3013890
11 changed files with 146 additions and 27 deletions
|
|
@ -76,10 +76,12 @@ h1 { margin-bottom: 3px; font: 700 clamp(2.8rem, 8vw, 5.8rem)/.92 Georgia, serif
|
|||
.season-tabs button span { margin-right: 7px; }
|
||||
.season-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--season); background: var(--season-soft); }
|
||||
.day-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; margin-top: 12px; }
|
||||
.day-grid button { aspect-ratio: 1.1; min-width: 0; border: 1px solid var(--line); background: rgba(19,39,32,.65); color: var(--muted); border-radius: 10px; cursor: pointer; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.day-grid button { position: relative; aspect-ratio: 1.1; min-width: 0; border: 1px solid var(--line); background: rgba(19,39,32,.65); color: var(--muted); border-radius: 10px; cursor: pointer; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.day-grid button small { font-size: .58rem; font-weight: 800; opacity: .6; line-height: 1; margin-bottom: 2px; }
|
||||
.day-grid button:hover { border-color: rgba(241,201,109,.45); color: var(--ink); }
|
||||
.day-grid button.selected { color: var(--deep); background: var(--season); border-color: var(--season); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
|
||||
.birthday-marker { position: absolute; top: 3px; right: 3px; font-size: clamp(.57rem, 1vw, .72rem); line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
|
||||
.calendar-key { display: flex; justify-content: flex-end; align-items: center; gap: 6px; color: var(--muted); margin: 9px 2px 0; font-size: .72rem; }
|
||||
|
||||
.section-nav { position: sticky; top: 0; z-index: 10; display: flex; gap: 8px; background: rgba(12,24,20,.88); backdrop-filter: blur(14px); border-block: 1px solid var(--line); padding: 10px 0; }
|
||||
.section-nav a { text-decoration: none; padding: 8px 13px; border-radius: 999px; color: var(--muted); font-size: .9rem; font-weight: 750; }
|
||||
|
|
@ -93,13 +95,18 @@ h1 { margin-bottom: 3px; font: 700 clamp(2.8rem, 8vw, 5.8rem)/.92 Georgia, serif
|
|||
.today-card { min-height: 180px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; }
|
||||
label.today-card { display: block; cursor: pointer; transition: border-color .15s ease, opacity .15s ease; }
|
||||
label.today-card:hover { border-color: color-mix(in srgb, var(--season) 55%, transparent); }
|
||||
.today-card > input { position: absolute; opacity: 0; pointer-events: none; }
|
||||
.today-card > .checkmark { position: absolute; z-index: 2; top: 18px; right: 18px; background: var(--panel-2); }
|
||||
.today-card.complete { opacity: .58; }
|
||||
.today-card.complete h3 { text-decoration: line-through; }
|
||||
.today-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -42px; bottom: -42px; border: 22px solid var(--season-soft); border-radius: 50%; }
|
||||
.today-card h3 { font: 700 1.35rem/1.1 Georgia, serif; margin: 25px 0 9px; }
|
||||
.today-card p { color: var(--muted); margin: 0; font-size: .91rem; max-width: 26rem; }
|
||||
.gift-guide { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }
|
||||
.gift-guide strong { display: flex; align-items: center; gap: 5px; color: var(--ink); font-size: .74rem; }
|
||||
.gift-guide > div:first-child strong span { color: #ef8b9a; }
|
||||
.gift-guide > div:last-child strong span { color: var(--danger); }
|
||||
.gift-guide ul { list-style: none; margin: 6px 0 0; padding: 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
|
||||
.gift-guide li + li { margin-top: 2px; }
|
||||
.card-label { display: flex; align-items: center; gap: 8px; color: var(--season); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 850; }
|
||||
.card-label span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
|
||||
.today-card.birthday { --season: #f1c96d; }
|
||||
|
|
@ -107,11 +114,13 @@ label.today-card:hover { border-color: color-mix(in srgb, var(--season) 55%, tra
|
|||
.today-card.event { --season: #86bcd8; }
|
||||
|
||||
.crop-list { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow: hidden; }
|
||||
.crop-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 90px 110px; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s ease; }
|
||||
.crop-row { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) 90px 110px; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s ease; }
|
||||
.crop-row:last-child { border: 0; }
|
||||
.crop-row:hover { background: rgba(255,255,255,.025); }
|
||||
.crop-row input, .bundle-item input { position: absolute; opacity: 0; pointer-events: none; }
|
||||
.checkmark { width: 22px; height: 22px; border: 1.5px solid #61746a; border-radius: 7px; display: grid; place-items: center; transition: .15s ease; }
|
||||
.today-card > input, .crop-row input, .bundle-item input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
|
||||
.today-card > input:disabled, .crop-row input:disabled, .bundle-item input:disabled { cursor: wait; }
|
||||
.checkmark { width: 22px; height: 22px; border: 1.5px solid #61746a; border-radius: 7px; display: grid; place-items: center; pointer-events: none; transition: .15s ease; }
|
||||
.today-card > input:focus-visible + .checkmark, .crop-row input:focus-visible + .checkmark, .bundle-item input:focus-visible + .checkmark { outline: 3px solid var(--accent); outline-offset: 3px; }
|
||||
.complete .checkmark { background: var(--season); border-color: var(--season); }
|
||||
.complete .checkmark::after { content: "✓"; color: var(--deep); font-weight: 950; font-size: .86rem; }
|
||||
.crop-name strong, .bundle-item strong { display: block; font-size: .96rem; }
|
||||
|
|
@ -150,7 +159,7 @@ label.today-card:hover { border-color: color-mix(in srgb, var(--season) 55%, tra
|
|||
.bundle-card header > span { color: var(--muted); font-size: .8rem; font-weight: 800; }
|
||||
.bundle-card.complete > header { background: var(--season-soft); }
|
||||
.bundle-card.complete header > span { color: var(--season); }
|
||||
.bundle-item { min-height: 59px; display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; cursor: pointer; }
|
||||
.bundle-item { position: relative; min-height: 59px; display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; cursor: pointer; }
|
||||
.bundle-item:last-child { border-bottom: 0; }
|
||||
.bundle-item:hover { background: rgba(255,255,255,.025); }
|
||||
.bundle-item.complete > span:last-child { opacity: .5; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue