275 lines
8.8 KiB
CSS
275 lines
8.8 KiB
CSS
/* ===============================
|
|
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);
|
|
} |