312 lines
10 KiB
CSS
312 lines
10 KiB
CSS
/* ===============================
|
|
Forest — bright, readable greens (with pine pattern)
|
|
=============================== */
|
|
|
|
html[data-theme="forest"] {
|
|
/* Core palette */
|
|
--forest-ink: #0f2a1f; /* deep evergreen text */
|
|
--forest-ink-muted: #3b5a4b; /* muted labels */
|
|
--forest-face: #ffffff; /* cards/panels */
|
|
--forest-elev: #f7fbf8; /* elevated/secondary face */
|
|
--forest-border: #cde7d8; /* soft mint border */
|
|
--forest-shadow: rgba(9, 30, 22, .06);
|
|
|
|
/* Accents */
|
|
--forest-accent: #16a34a; /* green-600 */
|
|
--forest-accent-600: #15803d; /* green-700 (hover) */
|
|
--forest-accent-200: #bbf7d0; /* light chips / outlines */
|
|
|
|
/* Status */
|
|
--forest-success: #16a34a;
|
|
--forest-warning: #d97706;
|
|
--forest-danger: #e11d48;
|
|
--forest-info: #2563eb;
|
|
|
|
/* Topbar */
|
|
--forest-bar: #0b4f38; /* deep forest */
|
|
--forest-bar-ink: #ecfdf5;
|
|
|
|
/* Background shades (darker) */
|
|
--forest-bg-top: #dcece4;
|
|
--forest-bg-mid: #cfe4da;
|
|
--forest-bg-bot: #c2dcd2;
|
|
|
|
/* Controls */
|
|
--btn-radius: 12px;
|
|
--panel-radius: 14px;
|
|
}
|
|
|
|
/* Page background & base ink */
|
|
html[data-theme="forest"] body {
|
|
min-height: 100vh;
|
|
color: var(--forest-ink);
|
|
|
|
/* Layer order: vignette (top), pattern layers, base gradient (bottom) */
|
|
background:
|
|
/* 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 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>\
|
|
</svg>") left top / 220px 300px repeat,
|
|
|
|
/* 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,
|
|
|
|
/* Base gradient */
|
|
linear-gradient(180deg, var(--forest-bg-top) 0%, var(--forest-bg-mid) 46%, var(--forest-bg-bot) 100%);
|
|
}
|
|
|
|
/* Subtle selection */
|
|
html[data-theme="forest"] ::selection { background: rgba(22,163,74,.28); }
|
|
|
|
/* ---------- Top bar ---------- */
|
|
html[data-theme="forest"] .topbar-wrap{
|
|
background: linear-gradient(180deg, var(--forest-bar) 0%, #0a3f2d 100%);
|
|
border-bottom: 1px solid rgba(12, 58, 43, .35);
|
|
box-shadow: 0 6px 20px rgba(3, 25, 19, .18);
|
|
}
|
|
html[data-theme="forest"] .brand-title,
|
|
html[data-theme="forest"] .brand .tagline,
|
|
html[data-theme="forest"] .version-link{
|
|
color: var(--forest-bar-ink) !important;
|
|
}
|
|
html[data-theme="forest"] .version-link:hover{ opacity:.9; text-decoration: underline; }
|
|
|
|
/* ---------- Topbar actions (Find/Create/Insights) ---------- */
|
|
html[data-theme="forest"] .topbar .nav-btn,
|
|
html[data-theme="forest"] .topbar .btn,
|
|
html[data-theme="forest"] .topbar .btn-success{
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
height: 36px !important;
|
|
padding: 6px 14px !important;
|
|
box-sizing: border-box !important;
|
|
|
|
background: #0f2a1f0a !important;
|
|
color: #ecfdf5 !important;
|
|
border: 1px solid rgba(236, 253, 245, .28) !important;
|
|
border-radius: var(--btn-radius) !important;
|
|
backdrop-filter: saturate(110%) blur(2px);
|
|
}
|
|
html[data-theme="forest"] .topbar .nav-btn:hover,
|
|
html[data-theme="forest"] .topbar .btn:hover,
|
|
html[data-theme="forest"] .topbar .btn-success:hover{
|
|
background: #0f2a1f1a !important;
|
|
border-color: rgba(236,253,245,.45) !important;
|
|
}
|
|
|
|
/* Username chip */
|
|
html[data-theme="forest"] .topbar .user-chip{
|
|
height: 36px !important; padding: 6px 14px !important; box-sizing: border-box !important;
|
|
background: #0f2a1f20 !important;
|
|
color: #eafaf2 !important;
|
|
border: 1px solid rgba(236,253,245,.35) !important;
|
|
border-radius: 999px !important;
|
|
}
|
|
|
|
/* ---------- Cards / panels ---------- */
|
|
html[data-theme="forest"] .card,
|
|
html[data-theme="forest"] .result-card,
|
|
html[data-theme="forest"] .search-form,
|
|
html[data-theme="forest"] .form-card,
|
|
html[data-theme="forest"] .user-menu,
|
|
html[data-theme="forest"] .mobile-menu-inner{
|
|
background: var(--forest-face);
|
|
border: 1px solid var(--forest-border);
|
|
color: var(--forest-ink);
|
|
border-radius: var(--panel-radius);
|
|
box-shadow: 0 10px 28px var(--forest-shadow);
|
|
}
|
|
|
|
/* Section headings & muted text */
|
|
html[data-theme="forest"] .cc-panel-title,
|
|
html[data-theme="forest"] .page-title,
|
|
html[data-theme="forest"] .subject-title{ color: var(--forest-ink); }
|
|
html[data-theme="forest"] .section-label,
|
|
html[data-theme="forest"] .meta-label,
|
|
html[data-theme="forest"] .page-subtitle,
|
|
html[data-theme="forest"] .muted{ color: var(--forest-ink-muted); }
|
|
|
|
/* ---------- Inputs ---------- */
|
|
html[data-theme="forest"] .search-input,
|
|
html[data-theme="forest"] .form-control,
|
|
html[data-theme="forest"] .login-input,
|
|
html[data-theme="forest"] .tool-input,
|
|
html[data-theme="forest"] textarea{
|
|
background: #ffffff;
|
|
border: 1px solid var(--forest-border);
|
|
color: var(--forest-ink);
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 0 rgba(16, 24, 40, .02) inset;
|
|
}
|
|
html[data-theme="forest"] .search-input::placeholder,
|
|
html[data-theme="forest"] .form-control::placeholder{ color:#6a8a79; }
|
|
html[data-theme="forest"] .search-input:focus,
|
|
html[data-theme="forest"] .form-control:focus,
|
|
html[data-theme="forest"] .login-input:focus,
|
|
html[data-theme="forest"] .tool-input:focus{
|
|
border-color: var(--forest-accent);
|
|
box-shadow: 0 0 0 3px rgba(22,163,74,.22);
|
|
outline: none;
|
|
}
|
|
|
|
/* Pills / chips */
|
|
html[data-theme="forest"] .chip,
|
|
html[data-theme="forest"] .chip-link{
|
|
background: #f0fdf4;
|
|
border: 1px solid var(--forest-accent-200);
|
|
color: #0b3b2a;
|
|
}
|
|
html[data-theme="forest"] .chip-muted{
|
|
background: #ecfdf5;
|
|
color: #0b3b2a;
|
|
}
|
|
|
|
/* ---------- Buttons ---------- */
|
|
html[data-theme="forest"] .btn{
|
|
background: #ffffff;
|
|
border: 1px solid var(--forest-border);
|
|
color: var(--forest-ink);
|
|
border-radius: var(--btn-radius);
|
|
}
|
|
html[data-theme="forest"] .btn:hover{ background:#f7fbf8; }
|
|
html[data-theme="forest"] .btn-primary{
|
|
background: var(--forest-accent);
|
|
border-color: var(--forest-accent);
|
|
color: #fff;
|
|
}
|
|
html[data-theme="forest"] .btn-primary:hover{
|
|
background: var(--forest-accent-600);
|
|
border-color: var(--forest-accent-600);
|
|
}
|
|
html[data-theme="forest"] .btn-danger{
|
|
background: var(--forest-danger);
|
|
border-color: var(--forest-danger);
|
|
color:#fff;
|
|
}
|
|
html[data-theme="forest"] .btn-danger:hover{ filter: brightness(.95); }
|
|
|
|
/* ---------- Messages ---------- */
|
|
html[data-theme="forest"] .msg{
|
|
background:#ffffff;
|
|
border-color: var(--forest-border);
|
|
color: var(--forest-ink);
|
|
}
|
|
html[data-theme="forest"] .msg.info { border-left:4px solid var(--forest-info); background:#eef4ff; }
|
|
html[data-theme="forest"] .msg.success { border-left:4px solid var(--forest-success); background:#ecfdf5; }
|
|
html[data-theme="forest"] .msg.warning { border-left:4px solid var(--forest-warning); background:#fff7ed; }
|
|
html[data-theme="forest"] .msg.error { border-left:4px solid var(--forest-danger); background:#fff1f3; }
|
|
|
|
/* ---------- Links ---------- */
|
|
html[data-theme="forest"] a{ color:#0e7e49; }
|
|
html[data-theme="forest"] a:hover{ color:#0b5f38; text-decoration: underline; }
|
|
|
|
/* ---------- Command Center accents ---------- */
|
|
html[data-theme="forest"] .settings-console .sec-tile{
|
|
background: var(--forest-elev);
|
|
border: 1px solid var(--forest-border);
|
|
color: var(--forest-ink);
|
|
border-radius: 12px;
|
|
}
|
|
html[data-theme="forest"] .settings-console .sec-tile:hover{
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 10px 24px rgba(9,30,22,.10);
|
|
}
|
|
html[data-theme="forest"] .settings-console .sec-icon{
|
|
background: #e7f7ef;
|
|
color:#0b3b2a;
|
|
border: 1px solid var(--forest-border);
|
|
}
|
|
|
|
/* Theme swatches */
|
|
html[data-theme="forest"] .settings-console .swatch{
|
|
border:1px solid var(--forest-border);
|
|
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);
|
|
color: var(--forest-ink);
|
|
}
|
|
|
|
/* ---------- Highlights & Validation ---------- */
|
|
html[data-theme="forest"] .mark-hit{
|
|
background: #fff59d;
|
|
color: #0b2f22;
|
|
padding: 0 2px;
|
|
border: 1px solid #f3e27a;
|
|
}
|
|
|
|
html[data-theme="forest"] .form-control.scripture-valid,
|
|
html[data-theme="forest"] .search-input.scripture-valid{
|
|
border-color: var(--forest-success);
|
|
background:#f0fff6;
|
|
box-shadow: 0 0 0 3px rgba(22,163,74,.18);
|
|
}
|
|
|
|
html[data-theme="forest"] .form-control.scripture-invalid,
|
|
html[data-theme="forest"] .search-input.scripture-invalid{
|
|
border-color: var(--forest-danger);
|
|
background:#fff1f3;
|
|
box-shadow: 0 0 0 3px rgba(225,29,72,.18);
|
|
}
|
|
|
|
/* Scripture/Source state chips */
|
|
html[data-theme="forest"] .scripture-pill-invalid{
|
|
background:#ffe6ea;
|
|
border:1px solid #f3a5b4;
|
|
color:#7a1d2a;
|
|
}
|
|
html[data-theme="forest"] .scripture-pill-wol{
|
|
background:#e6fbff;
|
|
border:1px solid #a8dcf3;
|
|
color:#0f3d4f;
|
|
}
|
|
|
|
/* ---------- Menus ---------- */
|
|
html[data-theme="forest"] .user-menu,
|
|
html[data-theme="forest"] .mobile-menu-inner{
|
|
background: var(--forest-face);
|
|
border: 1px solid var(--forest-border);
|
|
}
|
|
html[data-theme="forest"] .user-menu .menu-item:hover,
|
|
html[data-theme="forest"] .mobile-link:hover{
|
|
background:#ecfdf5;
|
|
}
|
|
|
|
/* ---------- Tables ---------- */
|
|
html[data-theme="forest"] table{ border-collapse: collapse; }
|
|
html[data-theme="forest"] th,
|
|
html[data-theme="forest"] td{
|
|
border:1px solid var(--forest-border);
|
|
background:#ffffff;
|
|
color: var(--forest-ink);
|
|
}
|
|
|
|
/* ---------- Misc ---------- */
|
|
html[data-theme="forest"] .topbar-wrap.is-scrolled{
|
|
box-shadow: 0 6px 24px rgba(3,25,19,.20);
|
|
border-bottom-color: rgba(12,58,43,.25);
|
|
} |