diff --git a/liquidglass.md b/liquidglass.md new file mode 100644 index 0000000..01dfab3 --- /dev/null +++ b/liquidglass.md @@ -0,0 +1,122 @@ +# Liquid Glass Theme Implementation + +## Overview +Replaces solid white/dark card surfaces with a unified glassmorphism effect using CSS `backdrop-filter`. No library needed — pure CSS. Works identically on both light and dark themes with only variable overrides per theme. + +--- + +## 1. `src/index.css` changes + +### `:root` — replace `--card-bg-opacity` + `--color-surface` with: +```css +--glass-bg: rgba(255, 255, 255, 0.55); +--glass-blur: blur(18px) saturate(160%); +--glass-border: 1px solid rgba(255, 255, 255, 0.5); +--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); +--color-surface: var(--glass-bg); +``` + +### `[data-theme="dark"]` — replace `--color-surface: rgb(26 26 26 / ...)` with: +```css +--glass-bg: rgba(255, 255, 255, 0.07); +--glass-border: 1px solid rgba(255, 255, 255, 0.12); +--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); +--color-surface: var(--glass-bg); +``` +> `--glass-blur` is NOT redeclared in dark — it inherits the same blur from `:root`. + +--- + +## 2. `src/App.css` additions + +### Add this block BEFORE the `SHARED PAGE SHELL` section (~line 403): +```css +/* ============================ + LIQUID GLASS – applied to all card/surface elements + ============================ */ +.journal-card, +.calendar-card, +.entry-card, +.entry-modal, +.confirm-modal, +.settings-profile, +.settings-card, +.settings-tutorial-btn, +.settings-clear-btn, +.settings-signout-btn, +.bottom-nav, +.lp__form { + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + border: var(--glass-border); + box-shadow: var(--glass-shadow); +} +``` + +### Remove individual `box-shadow` from these classes (glass rule handles it): +- `.journal-card` — remove `box-shadow: 0 2px 12px rgba(0,0,0,0.07)` +- `.calendar-card` — remove `box-shadow: 0 2px 10px rgba(0,0,0,0.06)` +- `.entry-card` — remove `box-shadow: 0 2px 6px rgba(0,0,0,0.05)` +- `.settings-profile` — remove `box-shadow: 0 2px 10px rgba(0,0,0,0.06)` +- `.settings-card` — remove `box-shadow: 0 2px 10px rgba(0,0,0,0.06)` + +--- + +## 3. `src/App.css` dark mode cleanup + +### Remove entire block (now redundant — glass vars handle background + shadow): +```css +/* -- Cards & surfaces -- */ +[data-theme="dark"] .journal-card, +[data-theme="dark"] .calendar-card, +[data-theme="dark"] .settings-card, +[data-theme="dark"] .settings-profile, +[data-theme="dark"] .entry-card { + background: var(--color-surface); + border-color: rgba(74, 222, 128, 0.12); + box-shadow: + 0 2px 16px rgba(0, 0, 0, 0.4), + 0 0 0 1px rgba(74, 222, 128, 0.06); +} +``` + +### Collapse settings buttons dark overrides to color-only: +```css +/* -- Settings buttons -- */ +[data-theme="dark"] .settings-clear-btn { color: #f87171; } +[data-theme="dark"] .settings-signout-btn { color: #9ca3af; } +[data-theme="dark"] .settings-signout-btn:hover { color: #d1d5db; } +``` +> Remove the full blocks that were setting `background: var(--color-surface)` and `box-shadow` for `.settings-tutorial-btn`, `.settings-clear-btn`, `.settings-signout-btn`. + +### Entry modal dark override — keep only the border accent: +```css +[data-theme="dark"] .entry-modal { + border-top-color: #4ade80; +} +``` +> Remove the `background` and `box-shadow` lines. + +### Remove entirely: +```css +[data-theme="dark"] .delete-confirm-modal { background: var(--color-surface); } +[data-theme="dark"] .confirm-modal { background: var(--color-surface); box-shadow: ...; } +``` + +### History search button — keep only color: +```css +[data-theme="dark"] .history-search-btn { color: #7a8a7a; } +``` +> Remove `background` and `border-color` lines. + +--- + +## Tuning + +| Variable | What it controls | +|---|---| +| `--glass-bg` opacity | How transparent the cards are (0.55 = light, 0.07 = dark) | +| `--glass-blur` value | How much the background blurs through | +| `--glass-border` opacity | Strength of the frosted edge highlight | + +To make glass more/less opaque: change the alpha in `--glass-bg` in `:root` / `[data-theme="dark"]`.