/* PartEngine UI theme * Version: 2.1.0 * Modified: 2026-03-04 * Notes: * - Dark theme default (existing look) * - Light theme via body.theme-light (palette from ui css.txt) * - Fixed sticky table header background (no transparency bleed) * - Link colors tuned (Part No + Open) */ /* ----------------------------- 1) BASE TOKENS (DARK DEFAULT) ------------------------------ */ :root{ --radius:16px; --radius2:22px; --shadow: 0 12px 40px rgba(0,0,0,.45); /* DARK THEME */ --bg0:#212f3f; --bg1:#2c4159; --card:rgba(255,255,255,.06); --card-strong:rgba(255,255,255,.08); --border:rgba(255,255,255,.10); --text:#e9eef5; --text-strong:#ffffff; --muted:rgba(233,238,245,.65); --table-bg:rgba(0,0,0,.18); --table-head-bg:rgba(255,255,255,.06); /* IMPORTANT: opaque-ish for sticky */ --table-row-sep:rgba(255,255,255,.07); --btn-bg:rgba(255,255,255,.06); --btn-border:rgba(255,255,255,.14); --btn-hover-border:rgba(255,255,255,.22); --input-bg:rgba(0,0,0,.18); --input-border:rgba(255,255,255,.14); --progress-track:rgba(255,255,255,.10); --progress-fill-a:rgba(233,238,245,.55); --progress-fill-b:rgba(155,178,200,.85); /* Link colors (user request) */ --link:#BFC6C4; /* Part No / Open */ --link-hover:#E6ECEA; } /* ----------------------------- 2) LIGHT THEME OVERRIDES Apply with: Palette from ui css.txt ------------------------------ */ body.theme-light{ --bg0:#E9F1F7; /* --bg-main */ --bg1:#E9F1F7; /* keep flat / subtle gradient */ --card:#F0F5FA; /* --bg-card */ --card-strong:#FFFFFF;/* --bg-sidebar or stronger card */ --border:rgba(45,55,72,.10); --text:#2D3748; /* --text-header */ --text-strong:#2D3748; --muted:#718096; /* --text-body */ --table-bg:#FFFFFF; --table-head-bg:#F0F5FA; /* opaque header */ --table-row-sep:rgba(45,55,72,.08); --btn-bg:linear-gradient(180deg, #FFFFFF, #F0F5FA); --btn-border:rgba(45,55,72,.12); --btn-hover-border:rgba(45,55,72,.22); --input-bg:#FFFFFF; --input-border:rgba(45,55,72,.14); --progress-track:#E9F1F7; --progress-fill-a:#6DAAF2; /* --primary-light */ --progress-fill-b:#4A90E2; /* --primary-main */ --link:#357ABD; /* --primary-dark */ --link-hover:#4A90E2; /* --primary-main */ /* “neumorphic” shadows (from ui css.txt) */ --shadow: 10px 10px 20px rgba(165, 191, 219, 0.40), -10px -10px 20px rgba(255, 255, 255, 0.80); } /* ----------------------------- 3) GLOBAL ------------------------------ */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:"Manrope","Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); /* Dark gets your gradient; light becomes clean and airy automatically */ background: radial-gradient(1000px 700px at 20% -10%, rgba(255,177,98,.12), transparent 60%), radial-gradient(900px 650px at 90% 0%, rgba(44,59,77,.35), transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1)); } body.theme-light{ background: radial-gradient(900px 650px at 90% 0%, rgba(109,170,242,.25), transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1)); } /* App shell */ .shell{ width:min(92vw, 1760px); margin:28px auto; padding:0 14px; } @media (max-width: 1200px){ .shell{width:94vw;} } @media (max-width: 900px){ .shell{width:94vw;} } /* Headline row */ .h1{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; } .h1-left{ display:flex; align-items:baseline; gap:12px; } .h1 h1{ margin:0; font-size:28px; font-weight:800; letter-spacing:.2px; } .badge{ font-size:12px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted); } /* Cards */ .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius2); box-shadow:var(--shadow); padding:18px; } /* Tabs */ .tabs{display:flex; gap:8px; margin:12px 0 14px;} .tab{ padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:8px; } .tab.active{ background:rgba(255,255,255,.07); color:var(--text); border-color:rgba(255,255,255,.18); } body.theme-light .tab{ background:rgba(255,255,255,.60); } body.theme-light .tab.active{ background:#FFFFFF; } /* Inputs + buttons */ .row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;} .input{ flex:1 1 520px; min-width:260px; padding:14px 16px; border-radius:14px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); outline:none; } .input::placeholder{color:color-mix(in srgb, var(--muted) 80%, transparent);} .btn{ padding:12px 14px; border-radius:14px; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--text); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; user-select:none; } .btn.primary{ border-color:var(--btn-hover-border); } .btn:hover{border-color:var(--btn-hover-border)} .muted{color:var(--muted); font-size:12px} /* Theme toggle button (small) */ .theme-toggle{ padding:10px 12px; border-radius:12px; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--text); cursor:pointer; font-size:12px; } /* Links (Part No + Open) */ a, .link{ color:var(--link); text-decoration:none; } a:hover, .link:hover{ color:var(--link-hover); text-decoration:underline; } /* Tables */ .table{ width:100%; border-collapse:separate; border-spacing:0; margin-top:14px; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); background:var(--table-bg); } .table th, .table td{ padding:10px 10px; border-bottom:1px solid var(--table-row-sep); font-size:13px; vertical-align:top; } .table th{ color:color-mix(in srgb, var(--text) 85%, transparent); font-weight:700; background:var(--table-head-bg); } /* Sticky header FIX: make it solid, not transparent */ .table thead th{ position:sticky; top:0; z-index:10; background:var(--table-head-bg); backdrop-filter:none; } /* If you have second header rows inside supplier columns */ .table .subhead{ position:sticky; top:34px; /* adjust if needed */ z-index:9; background:var(--table-head-bg); } .table tr:last-child td{border-bottom:none} /* Progress bar */ .bar{ height:10px; background:var(--progress-track); border-radius:999px; overflow:hidden; } .bar > div{ height:100%; width:0%; background:linear-gradient(90deg, var(--progress-fill-a), var(--progress-fill-b)); }