Update web/static/themes/forest.css
This commit is contained in:
parent
d7703cea12
commit
291219e7f9
@ -1,17 +1,275 @@
|
||||
/* Forest: calming greens */
|
||||
:root {
|
||||
--bg: #0d1411;
|
||||
--bg-elev: #121a16;
|
||||
--text: #e7f2ea;
|
||||
--muted: #a6b9ac;
|
||||
--card: #0f1813;
|
||||
--border: #203428;
|
||||
--accent: #3da67a;
|
||||
--accent-contrast: #0b1411;
|
||||
--accent-soft: rgba(61,166,122,.18);
|
||||
--success: #46d093;
|
||||
--warning: #d2b04a;
|
||||
--danger: #e0727c;
|
||||
--shadow: 0 10px 28px rgba(0,0,0,.28);
|
||||
--radius: 14px;
|
||||
/* ===============================
|
||||
Forest — bright, readable greens
|
||||
=============================== */
|
||||
|
||||
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;
|
||||
|
||||
/* Controls */
|
||||
--btn-radius: 12px;
|
||||
--panel-radius: 14px;
|
||||
}
|
||||
|
||||
/* Page background & base ink */
|
||||
html[data-theme="forest"] body {
|
||||
min-height: 100vh;
|
||||
color: var(--forest-ink);
|
||||
background:
|
||||
radial-gradient(1000px 360px at 80% -10%, rgba(22,163,74,.12), transparent 55%),
|
||||
linear-gradient(180deg, #eef8f1 0%, #e9f6ee 40%, #e7f5ed 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) ---------- */
|
||||
/* Keep the same size everywhere (matches your Win95 sizing logic) */
|
||||
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 stands out slightly */
|
||||
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: 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 if you use them */
|
||||
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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user