Update web/static/themes/forest.css

This commit is contained in:
Joshua Laymon 2025-09-06 22:17:58 +00:00
parent a122b28382
commit 9dd59706c8

View File

@ -26,6 +26,11 @@ html[data-theme="forest"] {
--forest-bar: #0b4f38; /* deep forest */ --forest-bar: #0b4f38; /* deep forest */
--forest-bar-ink: #ecfdf5; --forest-bar-ink: #ecfdf5;
/* Background shades */
--forest-bg-top: #e4f2ea;
--forest-bg-mid: #d5eadf;
--forest-bg-bot: #c8e2d6;
/* Controls */ /* Controls */
--btn-radius: 12px; --btn-radius: 12px;
--panel-radius: 14px; --panel-radius: 14px;
@ -36,8 +41,34 @@ html[data-theme="forest"] body {
min-height: 100vh; min-height: 100vh;
color: var(--forest-ink); color: var(--forest-ink);
background: background:
radial-gradient(1000px 360px at 80% -10%, rgba(22,163,74,.12), transparent 55%), /* Faint pine outline (single SVG, no-repeat) */
linear-gradient(180deg, #eef8f1 0%, #e9f6ee 40%, #e7f5ed 100%); url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 520' fill='none' stroke='%230b3f2d' stroke-opacity='.08' stroke-width='2'>\
<g transform='translate(40,40)'>\
<polygon points='140,40 100,100 180,100'/>\
<polygon points='140,90 90,160 190,160'/>\
<polygon points='140,150 80,230 200,230'/>\
<line x1='140' y1='40' x2='140' y2='270'/>\
</g>\
<g transform='translate(240,100) scale(0.8)'>\
<polygon points='140,40 100,100 180,100'/>\
<polygon points='140,90 90,160 190,160'/>\
<polygon points='140,150 80,230 200,230'/>\
<line x1='140' y1='40' x2='140' y2='270'/>\
</g>\
<g transform='translate(0,140) scale(0.7)'>\
<polygon points='140,40 100,100 180,100'/>\
<polygon points='140,90 90,160 190,160'/>\
<polygon points='140,150 80,230 200,230'/>\
<line x1='140' y1='40' x2='140' y2='270'/>\
</g>\
</svg>") right -60px top 30px / 440px auto no-repeat,
/* Dark green vignette */
radial-gradient(1200px 480px at 85% -10%, rgba(11,63,45,.22), transparent 62%),
/* Darker gradient base */
linear-gradient(180deg, var(--forest-bg-top) 0%, var(--forest-bg-mid) 46%, var(--forest-bg-bot) 100%);
} }
/* Subtle selection */ /* Subtle selection */
@ -57,7 +88,6 @@ html[data-theme="forest"] .version-link{
html[data-theme="forest"] .version-link:hover{ opacity:.9; text-decoration: underline; } html[data-theme="forest"] .version-link:hover{ opacity:.9; text-decoration: underline; }
/* ---------- Topbar actions (Find/Create/Insights) ---------- */ /* ---------- Topbar actions (Find/Create/Insights) ---------- */
/* Keep the same size everywhere (matches your Win95 sizing logic) */
html[data-theme="forest"] .topbar .nav-btn, html[data-theme="forest"] .topbar .nav-btn,
html[data-theme="forest"] .topbar .btn, html[data-theme="forest"] .topbar .btn,
html[data-theme="forest"] .topbar .btn-success{ html[data-theme="forest"] .topbar .btn-success{
@ -81,7 +111,7 @@ html[data-theme="forest"] .topbar .btn-success:hover{
border-color: rgba(236,253,245,.45) !important; border-color: rgba(236,253,245,.45) !important;
} }
/* Username chip stands out slightly */ /* Username chip */
html[data-theme="forest"] .topbar .user-chip{ html[data-theme="forest"] .topbar .user-chip{
height: 36px !important; padding: 6px 14px !important; box-sizing: border-box !important; height: 36px !important; padding: 6px 14px !important; box-sizing: border-box !important;
background: #0f2a1f20 !important; background: #0f2a1f20 !important;
@ -236,7 +266,7 @@ html[data-theme="forest"] .search-input.scripture-invalid{
box-shadow: 0 0 0 3px rgba(225,29,72,.18); box-shadow: 0 0 0 3px rgba(225,29,72,.18);
} }
/* Scripture/Source state chips if you use them */ /* Scripture/Source state chips */
html[data-theme="forest"] .scripture-pill-invalid{ html[data-theme="forest"] .scripture-pill-invalid{
background:#ffe6ea; background:#ffe6ea;
border:1px solid #f3a5b4; border:1px solid #f3a5b4;