diff --git a/TODO.md b/TODO.md index 2f34721..495dd33 100644 --- a/TODO.md +++ b/TODO.md @@ -8,6 +8,8 @@ ## Polish +- [x] Refresh both themes with legible texture and nautical flair, and give the Event Log / My Notes the regular panel surface. + - [x] Do a pass on condensing overly verbose UI elements. For example, "Current Difficulty" could be replaced by "Difficulty" and "The Obstacle List" could be replaced by "Obstacles" - [x] Event log button should be the same size and position when expanded and collapsed in all screens - [x] Align the "Current Difficulty" and "Successes" boxes diff --git a/frontend/src/assets/css/base.css b/frontend/src/assets/css/base.css index 1b19c75..9bebc2e 100644 --- a/frontend/src/assets/css/base.css +++ b/frontend/src/assets/css/base.css @@ -6,9 +6,13 @@ } body { - background: - radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 55%), - radial-gradient(circle at 50% 60%, var(--bg) 0%, var(--bg-deep) 100%); + background-color: var(--bg-deep); + background-image: + radial-gradient(ellipse at 15% 0%, var(--chart-glow), transparent 55%), + repeating-linear-gradient(30deg, transparent 0 159px, var(--chart-line) 159px 160px), + repeating-linear-gradient(150deg, transparent 0 159px, var(--chart-line) 159px 160px), + repeating-radial-gradient(circle at 85% 15%, transparent 0 119px, var(--chart-line) 119px 120px, transparent 120px 240px), + radial-gradient(ellipse at 50% 20%, var(--bg), var(--bg-deep)); background-attachment: fixed; color: var(--text); font-family: var(--font-body); diff --git a/frontend/src/assets/css/components.css b/frontend/src/assets/css/components.css index 16866d4..f672ee2 100644 --- a/frontend/src/assets/css/components.css +++ b/frontend/src/assets/css/components.css @@ -1,10 +1,10 @@ /* --- Panels --- */ .glass-panel { - background: color-mix(in srgb, var(--surface) 88%, transparent); + background: var(--panel-background); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: 2rem; - box-shadow: var(--shadow-soft); + box-shadow: var(--panel-highlight), var(--shadow-soft); transition: var(--transition-smooth); } @@ -13,12 +13,12 @@ } .card { - background: var(--surface); + background: var(--panel-background); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; - box-shadow: var(--shadow-soft); + box-shadow: var(--panel-highlight), var(--shadow-soft); } .card h3 { diff --git a/frontend/src/assets/css/theme.css b/frontend/src/assets/css/theme.css index 5343f7f..106b707 100644 --- a/frontend/src/assets/css/theme.css +++ b/frontend/src/assets/css/theme.css @@ -18,19 +18,19 @@ :root { /* --- "Fair Winds" raw palette (light, default) ----------- */ - --sky: #cde6f5; /* page background: midday sky */ - --sky-deep: #9fc9e2; /* page edges: deeper blue toward the horizon */ + --sky: #c9e4e5; /* page background: midday sky */ + --sky-deep: #8dbcc4; /* page edges: deeper blue toward the horizon */ --sail: #f8f1dd; /* panel surface: weathered sailcloth */ --sail-bright: #fffaec; /* raised surface */ --map-ink: #33291a; /* primary text: sepia chart ink */ - --map-faded: #7d6e54; /* muted text */ + --map-faded: #6e604b; /* muted text */ - --doubloon: #a8770f; /* primary accent: antique gold */ + --doubloon: #8c6010; /* primary accent: antique gold */ --doubloon-bright: #c08a13; --doubloon-dark: #7c560a; - --lagoon: #0c8d96; /* the Deep: tropical shallows */ + --lagoon: #08747d; /* the Deep: tropical shallows */ --palm: #2f8f4e; /* Pi-Rats, success */ --x-red: #c92a35; /* danger: the X that marks the spot */ --cannonball: #2c3245; /* black suits: dark navy iron */ @@ -75,6 +75,19 @@ --edge-soft: color-mix(in srgb, var(--map-ink) 11%, transparent); --edge-accent: color-mix(in srgb, var(--accent) 40%, transparent); + /* Static chart lines stay on the page; fine weave stays on surfaces. + Every panel retains an opaque base beneath its decorative layers. */ + --chart-line: color-mix(in srgb, var(--deep) 9%, transparent); + --chart-glow: color-mix(in srgb, var(--sail-bright) 48%, transparent); + --weave: color-mix(in srgb, var(--text) 3%, transparent); + --panel-sheen: color-mix(in srgb, var(--accent) 7%, transparent); + --panel-texture: + linear-gradient(135deg, var(--panel-sheen), transparent 48%), + repeating-linear-gradient(0deg, var(--weave) 0 1px, transparent 1px 4px), + repeating-linear-gradient(90deg, var(--weave) 0 1px, transparent 1px 5px); + --panel-background: var(--panel-texture), var(--surface); + --panel-highlight: inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 70%, transparent); + /* --- Type ------------------------------------------------ */ --font-display: 'Pirata One', 'Alegreya SC', serif; --font-heading: 'Alegreya SC', serif; @@ -94,10 +107,10 @@ :root[data-theme="dark"] { /* --- "Lantern & Brine" raw palette ----------------------- */ - --ink-deep: #0a0d13; /* darkest: page edges, sunken wells */ - --ink: #131822; /* page background */ - --hull: #1b212e; /* panel surface */ - --hull-light: #262e3f; /* raised surface */ + --ink-deep: #09131c; /* darkest: page edges, sunken wells */ + --ink: #101f27; /* page background */ + --hull: #1c2c32; /* panel surface */ + --hull-light: #293c42; /* raised surface */ --parchment: #efe7d3; /* primary text */ --driftwood: #a89e8a; /* muted text */ @@ -147,6 +160,11 @@ --edge-soft: color-mix(in srgb, var(--parchment) 8%, transparent); --edge-accent: color-mix(in srgb, var(--accent) 35%, transparent); + --chart-line: color-mix(in srgb, var(--deep) 6%, transparent); + --chart-glow: color-mix(in srgb, var(--brass) 12%, transparent); + --weave: color-mix(in srgb, var(--text) 2%, transparent); + --panel-sheen: color-mix(in srgb, var(--accent) 9%, transparent); + /* --- Shadows --------------------------------------------- */ --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-deep: 0 10px 30px rgba(0, 0, 0, 0.5); diff --git a/frontend/src/components/EventLog.svelte b/frontend/src/components/EventLog.svelte index f192e09..c02699b 100644 --- a/frontend/src/components/EventLog.svelte +++ b/frontend/src/components/EventLog.svelte @@ -259,7 +259,7 @@ bottom: 20px; right: 20px; width: 380px; - background: color-mix(in srgb, var(--bg-deep) 95%, transparent); + background: var(--panel-background); border: 1px solid var(--edge); border-radius: var(--radius-md); box-shadow: var(--shadow-deep); @@ -267,7 +267,6 @@ display: flex; flex-direction: column; max-height: 60vh; - backdrop-filter: blur(10px); } .floating-event-log:not(.open) { width: auto; @@ -464,12 +463,11 @@ gap: 8px; text-align: left; padding: 10px 12px; - background: color-mix(in srgb, var(--bg-deep) 95%, transparent); + background: var(--panel-background); border: 1px solid var(--edge); border-left: 4px solid var(--accent); border-radius: var(--radius-md); box-shadow: var(--shadow-deep); - backdrop-filter: blur(10px); color: var(--text); font-family: var(--font-body); cursor: pointer; diff --git a/frontend/src/components/GameNotebook.svelte b/frontend/src/components/GameNotebook.svelte index eecfcaa..0b9d050 100644 --- a/frontend/src/components/GameNotebook.svelte +++ b/frontend/src/components/GameNotebook.svelte @@ -117,7 +117,7 @@