123 lines
3.9 KiB
Markdown
123 lines
3.9 KiB
Markdown
# 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"]`.
|