diff --git a/web/static/themes/forest.css b/web/static/themes/forest.css index adceb4f..53cf433 100644 --- a/web/static/themes/forest.css +++ b/web/static/themes/forest.css @@ -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); } \ No newline at end of file