joshlaymon/Illustrations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/static/themes/forest.css

Browse Source
This commit is contained in:
Joshua Laymon 2025-09-06 22:22:08 +00:00
parent 5a9d2ac45c
commit 0511b018ca
1 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
web/static/themes/forest.css
View File

@ -1,5 +1,5 @@
/* ===============================
Forest — bright, readable greens
Forest — bright, readable greens (with pine pattern)
=============================== */
html[data-theme="forest"] {
@ -26,10 +26,10 @@ html[data-theme="forest"] {
--forest-bar: #0b4f38; /* deep forest */
--forest-bar-ink: #ecfdf5;
/* Background shades */
--forest-bg-top: #e4f2ea;
--forest-bg-mid: #d5eadf;
--forest-bg-bot: #c8e2d6;
/* Background shades (darker) */
--forest-bg-top: #dcece4;
--forest-bg-mid: #cfe4da;
--forest-bg-bot: #c2dcd2;
/* Controls */
--btn-radius: 12px;
@ -40,34 +40,35 @@ html[data-theme="forest"] {
html[data-theme="forest"] body {
min-height: 100vh;
color: var(--forest-ink);
/* Layer order: vignette (top), pattern layers, base gradient (bottom) */
background:
/* Faint pine outline (single SVG, no-repeat) */
/* Dark green vignette to anchor the page */
radial-gradient(1200px 520px at 85% -10%, rgba(11,63,45,.24), transparent 62%),
/* Pine pattern — fine grid */
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'/>\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220' fill='none'>\
<g stroke='%230b3f2d' stroke-opacity='.08' stroke-width='2'>\
<polygon points='80,16 58,48 102,48'/>\
<polygon points='80,46 50,88 110,88'/>\
<polygon points='80,86 44,136 116,136'/>\
<line x1='80' y1='16' x2='80' y2='172'/>\
</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,
</svg>") left top / 220px 300px repeat,
/* Dark green vignette */
radial-gradient(1200px 480px at 85% -10%, rgba(11,63,45,.22), transparent 62%),
/* Pine pattern — larger, offset for variation */
url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220' fill='none'>\
<g stroke='%230b3f2d' stroke-opacity='.06' stroke-width='2'>\
<polygon points='80,16 58,48 102,48'/>\
<polygon points='80,46 50,88 110,88'/>\
<polygon points='80,86 44,136 116,136'/>\
<line x1='80' y1='16' x2='80' y2='172'/>\
</g>\
</svg>") 60px 40px / 300px 410px repeat,
/* Darker gradient base */
/* Base gradient */
linear-gradient(180deg, var(--forest-bg-top) 0%, var(--forest-bg-mid) 46%, var(--forest-bg-bot) 100%);
}
@ -237,7 +238,13 @@ html[data-theme="forest"] .settings-console .sec-icon{
/* Theme swatches */
html[data-theme="forest"] .settings-console .swatch{
border:1px solid var(--forest-border);
background: linear-gradient(135deg,#e8fbef,#cdeedd);
background:
url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'>\
<polygon points='50,12 38,30 62,30' stroke='%230b3f2d' stroke-opacity='.18' stroke-width='3'/>\
<polygon points='50,28 34,50 66,50' stroke='%230b3f2d' stroke-opacity='.14' stroke-width='3'/>\
</svg>") center/80% 80% no-repeat,
linear-gradient(135deg,#e8fbef,#cdeedd);
}
html[data-theme="forest"] .settings-console .swatch-name{
background: rgba(255,255,255,.85);