/* =================================================================== SharpCoderVibe — site.css (FULL FILE) - Theme variables (light/dark) - Shell layout (sidebar / topbar / content / footer) - Cards, tiles, prompt/editor boxes - Buttons and form controls - Hard overrides for the requested light theme palette =================================================================== */ /* 0) Base / Resets -------------------------------------------------- */ :root { --radius-md: 12px; --radius-sm: 8px; --shadow-sm: 0 4px 14px rgba(0,0,0,.08); --shadow-md: 0 10px 24px rgba(0,0,0,.12); --input-background: #0f1320; --ps-radius-lg: 16px; --ps-radius-sm: 10px; } /* The app toggles data-theme on . Default to light. */ html { color-scheme: light dark; } html:not([data-theme]) { --_force-light: 1; } /* so light rules apply if unset */ * { box-sizing: border-box; } img, svg { display: inline-block; vertical-align: middle; } a { text-decoration: none; } a:focus { outline: 2px solid #8ab4ff; outline-offset: 2px; } button:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; } /* 1) THEME TOKENS --------------------------------------------------- */ /* DARK */ html[data-theme="dark"] { --bg-body: #0b0f1a; --bg-elev-1: #0f1320; --bg-elev-2: #141a2b; --bg-elev-3: #1a2033; --border-weak: #232a44; --border-strong: #2b3558; --text: #e6ebff; --text-dim: #c9d3ff; --text-mute: #9fb0e0; --brand: #d8d8ff; --brand-strong: #ffffff; --accent: #6c5ce7; /* violet */ --accent-2: #8a7af7; --accent-3: #3fb7ff; --danger: #ff5572; --success: #30d57a; --warning: #ffb347; --box-dark: #0f1526; /* prompt/editor surface */ --box-panel: #141a2b; /* cards/tiles */ --emphasis: #ffbd59; --label-color: #cdd6ff; --ghost-btn-background: rgba(255, 255, 255, 0.03); --ghost-btn-background-hover: rgba(255,255,255,0.08); --ghost-btn-border-hover: rgba(255, 255, 255, 0.15); --ghost-btn-border: rgba(255,255,255,0.06); } html[data-theme="dark"] .btn-outline-light, html[data-theme="dark"] .auth-input { --bs-btn-border-color: rgba(255,255,255,.28) !important; } /* LIGHT (requested palette) */ html[data-theme="light"], html[--_force-light] { --bg-body: #f6f8ff; --bg-elev-1: #ffffff; --bg-elev-2: #f2f4ff; --bg-elev-3: #eef2ff; --border-weak: #e4e8ff; --border-strong: #4b5563; /* Deep indigo heading color (requested) */ --heading: #f8f9fa; --text: #2b2f55; --text-dim: #3b4275; --text-mute: #f8f9fa; --brand: #241c57; /* Sidebar brand uses this (requested) */ --brand-strong: #241c57; --accent: #6c5ce7; --accent-2: #8a7af7; --accent-3: #3b82f6; --danger: #e23b60; --success: #1f9d5c; --warning: #ff9a3c; /* All boxes should be dark gray (not black) in light theme (requested) */ --box-panel: #202536; /* cards/tiles container */ --box-dark: #0f1526; /* inner textarea/editor */ /* Emphasis inside dark boxes uses orange (requested) */ --emphasis: #ff9a3c; --label-color: #e9eeff; --ghost-btn-background: rgba(255, 255, 255, 0.03); --ghost-btn-background-hover: #4b5563; --ghost-btn-border-hover: rgba(255, 255, 255, 0.03); --ghost-btn-border: #4b5563; --dull-background: rgb(102 105 114 / 86%); } html[data-theme="light"] .auth-input, html[data-theme="light"] input.form-control[type="text"] { background: var(--ghost-btn-background) !important; color: var(--text) !important; border: 1px solid var(--ghost-btn-border) !important; } label, .form-label, .link-light, .link-light:hover { color: var(--text) !important; } /* 2) BODY / LAYOUT -------------------------------------------------- */ body .scv-body { min-height: 100vh; background: var(--bg-body); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; } /* Shell */ .scv-shell { min-height: 100vh; display: flex; } /* Sidebar */ .scv-sidebar { position: relative; z-index: 1020; min-width: 240px; max-width: 280px; background: var(--bg-elev-1); border-right: 1px solid var(--border-weak); padding: 16px; } /* Brand line (requested: use deep indigo in light) */ .scv-logo { width: 28px; height: 28px; display: grid; place-items: center; background: #2a1d3f; border-radius: 8px; } .scv-brand, .scv-sidebar .fw-semibold { color: var(--brand); } /* Sidebar nav */ .scv-nav .nav-link { display: flex; align-items: center; gap: .5rem; color: var(--text); padding: .5rem .75rem; border-radius: .5rem; } .scv-nav .nav-link:hover { background: var(--bg-elev-3); color: var(--brand-strong); } /* Main column */ .scv-main { position: relative; z-index: 1; flex: 1 1 auto; } .scv-topbar { min-height: 56px; border-bottom: 1px solid var(--border-weak); background: var(--bg-elev-1); } .scv-content { background: var(--bg-body); } .scv-footer { color: var(--text); background: var(--bg-topbar); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border-top: 1px solid var(--border); } /* 3) HEADINGS / TEXT ------------------------------------------------ */ h1, h2, h3, .page-title, .section-title, .lead { color: var(--heading, var(--text)); } .text-muted, .form-text, .text-body-secondary { color: var(--text-mute) !important; } html[data-theme="light"] .text-muted { color: #f8f9fa; } /* 4) CARDS / BOXES / TILES ----------------------------------------- */ /* General card style */ .card { background: var(--bg-elev-1); border: 1px solid var(--border-weak); color: var(--text); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } /* “Work surfaces / boxes” (requested: dark gray in light theme) */ .scv-box, .template-card, .prompt-panel, .editor-box { background: var(--box-panel) !important; border: 1px solid var(--border-strong) !important; color: #f2f4ff !important; border-radius: var(--radius-md); } /* Emphasis inside those dark boxes = orange (requested) */ .scv-box .card-title, .scv-box .card-header, .scv-box h5, .scv-box h6, .scv-box strong, .template-card .card-title, .template-card .card-header, .template-card h5, .template-card h6, .template-card strong, .prompt-panel .card-title, .prompt-panel .card-header, .editor-box .card-title, .editor-box .card-header { color: var(--emphasis) !important; } /* Specific prompt textarea surface (inner darker panel) */ textarea.form-control, input.form-control[type="text"], input.form-control[type="search"] { background: var(--box-dark) !important; border: 1px solid var(--bs-btn-border-color) !important; color: #cfe3ff !important; border-radius: var(--radius-sm); } textarea.form-control::placeholder, .form-control.ps-input::placeholder, .form-control.auth-input::placeholder { color: #9eb2dd !important; } /* “Muted text” inside dark panels stays readable */ .scv-box .text-muted, .template-card .text-muted, .prompt-panel .text-muted { color: rgba(255,255,255,.75) !important; } /* 5) BUTTONS -------------------------------------------------------- */ .btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } .btn-primary:hover { filter: brightness(.95); } .btn-outline-light { color: #f2f4ff !important; border: 1px solid var(--bs-btn-border-color) !important; } .btn-outline-light:hover { background: rgba(255,255,255,.08) !important; } .btn-outline-secondary { color: var(--text); border-color: var(--border-strong); } .btn-outline-secondary:hover { background: var(--bg-elev-3); } .scv-ghost-btn { padding: 8px 16px; transition: all 0.3s ease; background: var(--ghost-btn-background); color: var(--text); border: 1px solid var(--ghost-btn-border); border-radius: 10px !important; } .scv-ghost-btn:hover { background: var(--ghost-btn-background-hover); border: 1px solid var(--ghost-btn-border-hover); color: #fff; transform: translateY(-1px); } /* Chips (toolbar buttons near the prompt) */ .chip-btn { border-radius: 999px; } /* 6) UTILITIES ------------------------------------------------------ */ .rounded-md { border-radius: var(--radius-md); } .rounded-sm { border-radius: var(--radius-sm); } /* Code/Preview area */ #codeBox { background: #0b0e15; border: 1px solid #30384f; } /* Status banner (right column in Generate page) */ .status-wrap { background: #0b0f17; border: 1px solid #2a3452; border-radius: 12px; margin-top: 12px; padding: 14px 18px; min-height: 72px; display: flex; align-items: center; overflow: hidden; } .status-msg { font-size: 26px; line-height: 1.15; color: var(--warning); letter-spacing: .2px; white-space: nowrap; animation: statusSlideIn .45s ease-out; } .status-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background: var(--warning); box-shadow: 0 0 0 0 rgba(255,154,60,.6); animation: pulse 1.6s infinite; } @keyframes statusSlideIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,154,60,.7); } 70% { box-shadow: 0 0 0 14px rgba(255,154,60,0); } 100% { box-shadow: 0 0 0 0 rgba(255,154,60,0); } } /* 7) LIGHT THEME HARD OVERRIDES (explicit per your notes) ----------- */ /* Headings and sidebar brand already bind to --heading / --brand. */ /* Make sure these apply even if upstream markup uses other classes. */ html[data-theme="light"] body { color: var(--text); background: var(--bg-body); } html[data-theme="light"] .scv-content h1, html[data-theme="light"] .scv-content h2, html[data-theme="light"] .scv-content h3, html[data-theme="light"] .page-title, html[data-theme="light"] .section-title, html[data-theme="light"] .lead, html[data-theme="light"] .scv-brand, html[data-theme="light"] .scv-sidebar .fw-semibold { color: var(--heading) !important; } /* Ensure every “card-like” surface turns dark-gray in light theme */ html[data-theme="light"] .card, html[data-theme="light"] .panel, html[data-theme="light"] .tile, html[data-theme="light"] .template-card, html[data-theme="light"] .prompt-panel, html[data-theme="light"] .editor-box, html[data-theme="light"] .scv-box { background: var(--box-panel) !important; border-color: var(--border-strong) !important; color: #f2f4ff !important; } /* Emphasis in those boxes = orange */ html[data-theme="light"] .card .card-title, html[data-theme="light"] .card .card-header, html[data-theme="light"] .card h5, html[data-theme="light"] .card h6, html[data-theme="light"] .card strong, html[data-theme="light"] .template-card .card-title, html[data-theme="light"] .template-card .card-header, html[data-theme="light"] .prompt-panel .card-title, html[data-theme="light"] .prompt-panel .card-header, html[data-theme="light"] .editor-box .card-title, html[data-theme="light"] .editor-box .card-header, html[data-theme="light"] .scv-box .card-title, html[data-theme="light"] .scv-box .card-header, html[data-theme="light"] .scv-box h5, html[data-theme="light"] .scv-box h6, html[data-theme="light"] .scv-box strong { color: var(--emphasis) !important; } /* Sidebar nav hover contrast in light */ html[data-theme="light"] .scv-nav .nav-link { color: var(--text) !important; } html[data-theme="light"] .scv-nav .nav-link:hover { background: var(--ghost-btn-background-hover) !important; color: var(--heading) !important; } html[data-theme="light"] .scv-nav .nav-link:hover i { color: #fff; } /* Chips on dark panels remain readable */ html[data-theme="light"] .card .btn-outline-light, html[data-theme="light"] .scv-box .btn-outline-light, html[data-theme="light"] .prompt-panel .btn-outline-light { color: #f2f4ff !important; border-color: rgba(255,255,255,.28) !important; } html[data-theme="light"] .card .btn-outline-light:hover, html[data-theme="light"] .scv-box .btn-outline-light:hover, html[data-theme="light"] .prompt-panel .btn-outline-light:hover { background: rgba(255,255,255,.08) !important; } /* Prompt textarea inside the dark panel */ html[data-theme="light"] textarea.form-control, html[data-theme="light"] input.form-control[type="search"] { background: var(--box-dark) !important; border-color: var(--bs-btn-border-color) !important; color: var(--text) !important; } /* 8) SMALL RADIUS TWEAKS FOR BOOTSTRAP ELEMENTS -------------------- */ .card, .modal-content, .dropdown-menu, .form-control, .btn { border-radius: var(--radius-sm); } html[data-theme="light"] .scv-content { background: #ffffff !important; }