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"] { html[data-theme="forest"] {
@ -26,10 +26,10 @@ html[data-theme="forest"] {
--forest-bar: #0b4f38; /* deep forest */ --forest-bar: #0b4f38; /* deep forest */
--forest-bar-ink: #ecfdf5; --forest-bar-ink: #ecfdf5;
/* Background shades */ /* Background shades (darker) */
--forest-bg-top: #e4f2ea; --forest-bg-top: #dcece4;
--forest-bg-mid: #d5eadf; --forest-bg-mid: #cfe4da;
--forest-bg-bot: #c8e2d6; --forest-bg-bot: #c2dcd2;
/* Controls */ /* Controls */
--btn-radius: 12px; --btn-radius: 12px;
@ -40,34 +40,35 @@ html[data-theme="forest"] {
html[data-theme="forest"] body { html[data-theme="forest"] body {
min-height: 100vh; min-height: 100vh;
color: var(--forest-ink); color: var(--forest-ink);
/* Layer order: vignette (top), pattern layers, base gradient (bottom) */
background: 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,\ 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'>\ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220' fill='none'>\
<g transform='translate(40,40)'>\ <g stroke='%230b3f2d' stroke-opacity='.08' stroke-width='2'>\
<polygon points='140,40 100,100 180,100'/>\ <polygon points='80,16 58,48 102,48'/>\
<polygon points='140,90 90,160 190,160'/>\ <polygon points='80,46 50,88 110,88'/>\
<polygon points='140,150 80,230 200,230'/>\ <polygon points='80,86 44,136 116,136'/>\
<line x1='140' y1='40' x2='140' y2='270'/>\ <line x1='80' y1='16' x2='80' y2='172'/>\
</g>\ </g>\
<g transform='translate(240,100) scale(0.8)'>\ </svg>") left top / 220px 300px repeat,
<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 */ /* Pine pattern — larger, offset for variation */
radial-gradient(1200px 480px at 85% -10%, rgba(11,63,45,.22), transparent 62%), 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%); 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 */ /* Theme swatches */
html[data-theme="forest"] .settings-console .swatch{ html[data-theme="forest"] .settings-console .swatch{
border:1px solid var(--forest-border); 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{ html[data-theme="forest"] .settings-console .swatch-name{
background: rgba(255,255,255,.85); background: rgba(255,255,255,.85);