/* * Retention layer (growth plan Part 3): the [+ deck] button, the toast, the daily-goal * ring, the badge wall and the review session surface. * * Everything here is theme-aware through Bootstrap 5.3 CSS variables rather than * hard-coded colours, because the site's dark mode is applied via data-bs-theme on * before paint and a literal #fff here would flash white in dark mode. */ /* ── [+ deck] button ─────────────────────────────────────────────────────── */ .tpl-add-btn { line-height: 1.4; white-space: nowrap; } .tpl-add-btn.tpl-add-in { color: var(--bs-success-text-emphasis, #0a3622); background-color: var(--bs-success-bg-subtle, #d1e7dd); border-color: var(--bs-success-border-subtle, #a3cfbb); } .tpl-add-col { width: 3rem; } /* The button is chrome, not content: keep it off printed word lists and worksheets. */ @media print { .tpl-add-btn, .tpl-add-col, .tpl-toast { display: none !important; } } /* ── toast ───────────────────────────────────────────────────────────────── */ .tpl-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1rem); z-index: 1090; max-width: min(90vw, 26rem); padding: 0.55rem 1rem; border-radius: 0.5rem; font-size: 0.9rem; color: var(--bs-body-bg); background: var(--bs-emphasis-color); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .tpl-toast-show { opacity: 1; transform: translate(-50%, 0); } .tpl-toast-error { background: var(--bs-danger); color: #fff; } @media (prefers-reduced-motion: reduce) { .tpl-toast { transition: none; } } /* ── daily goal ring ─────────────────────────────────────────────────────── */ .tpl-goal-ring { --tpl-goal-pct: 0; width: 7.5rem; height: 7.5rem; border-radius: 50%; display: grid; place-items: center; margin-inline: auto; background: conic-gradient(var(--bs-success) calc(var(--tpl-goal-pct) * 1%), var(--bs-secondary-bg) 0); } .tpl-goal-ring-inner { width: 5.9rem; height: 5.9rem; border-radius: 50%; background: var(--bs-body-bg); display: grid; place-items: center; text-align: center; line-height: 1.1; } .tpl-goal-ring-xp { font-size: 1.5rem; font-weight: 700; } /* ── XP history strip ────────────────────────────────────────────────────── */ .tpl-xp-strip { display: flex; align-items: flex-end; gap: 2px; height: 3.5rem; } .tpl-xp-bar { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--bs-secondary-bg); } .tpl-xp-bar.tpl-xp-met { background: var(--bs-success); } .tpl-xp-bar.tpl-xp-some { background: var(--bs-warning); } /* ── badge wall ──────────────────────────────────────────────────────────── */ .tpl-badge { text-align: center; padding: 0.75rem 0.5rem; border: 1px solid var(--bs-border-color); border-radius: 0.5rem; height: 100%; background: var(--bs-body-bg); } .tpl-badge-locked { opacity: 0.42; filter: grayscale(1); } .tpl-badge-icon { font-size: 1.9rem; line-height: 1; display: block; margin-bottom: 0.35rem; } .tpl-badge-name { font-weight: 600; font-size: 0.85rem; } .tpl-badge-desc, .tpl-badge-date { font-size: 0.72rem; color: var(--bs-secondary-color); } /* ── review session ──────────────────────────────────────────────────────── */ .tpl-review-card { min-height: 15rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem 1rem; } .tpl-review-front { font-size: clamp(2.25rem, 9vw, 3.75rem); line-height: 1.25; font-weight: 600; word-break: break-word; } .tpl-review-read { font-size: 1.15rem; color: var(--bs-secondary-color); margin-top: 0.35rem; } .tpl-review-back { font-size: 1.25rem; margin-top: 0.75rem; } /* Four equal grading buttons that stay tappable at 320px. */ .tpl-grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; } .tpl-grade-row .btn { padding-inline: 0.25rem; } .tpl-grade-ivl { display: block; font-size: 0.7rem; opacity: 0.85; } .tpl-due-pill { font-variant-numeric: tabular-nums; }