332 lines
10 KiB
CSS
332 lines
10 KiB
CSS
/* =============================================================================
|
|
Dealspace Portal — app.css
|
|
Single canonical stylesheet for all portal pages.
|
|
============================================================================= */
|
|
|
|
/* ===== BASE ===== */
|
|
* { font-family: 'Inter', sans-serif; }
|
|
|
|
/* ===== THEMES ===== */
|
|
:root,
|
|
html[data-theme="midnight"] {
|
|
font-size: 13px;
|
|
--ds-bg: #0a1628;
|
|
--ds-sf: #0d1f3c;
|
|
--ds-tx: #fff;
|
|
--ds-tx2: #94a3b8;
|
|
--ds-tx3: #475569;
|
|
--ds-ac: #c9a84c;
|
|
--ds-ac2: #b8973f;
|
|
--ds-act: #0a1628;
|
|
--ds-bd: rgba(255,255,255,.08);
|
|
--ds-hv: rgba(255,255,255,.04);
|
|
--ds-inp: #0a1628;
|
|
--ds-hf: 'Inter', sans-serif;
|
|
}
|
|
|
|
html[data-theme="light"] {
|
|
font-size: 13px;
|
|
--ds-bg: #f0f2f5;
|
|
--ds-sf: #fff;
|
|
--ds-tx: #1a202c;
|
|
--ds-tx2: #64748b;
|
|
--ds-tx3: #94a3b8;
|
|
--ds-ac: #2563eb;
|
|
--ds-ac2: #1d4ed8;
|
|
--ds-act: #fff;
|
|
--ds-bd: rgba(0,0,0,.08);
|
|
--ds-hv: rgba(0,0,0,.05);
|
|
--ds-inp: #f8fafc;
|
|
--ds-hf: 'Inter', sans-serif;
|
|
}
|
|
|
|
html[data-theme="slate"] {
|
|
font-size: 13px;
|
|
--ds-bg: #1e293b;
|
|
--ds-sf: #334155;
|
|
--ds-tx: #f1f5f9;
|
|
--ds-tx2: #94a3b8;
|
|
--ds-tx3: #64748b;
|
|
--ds-ac: #14b8a6;
|
|
--ds-ac2: #0d9488;
|
|
--ds-act: #0f172a;
|
|
--ds-bd: rgba(148,163,184,.12);
|
|
--ds-hv: rgba(255,255,255,.05);
|
|
--ds-inp: #1e293b;
|
|
--ds-hf: 'Inter', sans-serif;
|
|
}
|
|
|
|
html[data-theme="compact"] {
|
|
font-size: 13.5px;
|
|
--ds-bg: #0a1628;
|
|
--ds-sf: #0d1f3c;
|
|
--ds-tx: #fff;
|
|
--ds-tx2: #94a3b8;
|
|
--ds-tx3: #475569;
|
|
--ds-ac: #c9a84c;
|
|
--ds-ac2: #b8973f;
|
|
--ds-act: #0a1628;
|
|
--ds-bd: rgba(255,255,255,.08);
|
|
--ds-hv: rgba(255,255,255,.04);
|
|
--ds-inp: #0a1628;
|
|
--ds-hf: 'Inter', sans-serif;
|
|
}
|
|
|
|
html[data-theme="executive"] {
|
|
font-size: 17px;
|
|
--ds-bg: #1a1410;
|
|
--ds-sf: #2a2218;
|
|
--ds-tx: #f5f0e8;
|
|
--ds-tx2: #c4b8a4;
|
|
--ds-tx3: #8a7e6e;
|
|
--ds-ac: #d4a843;
|
|
--ds-ac2: #c49835;
|
|
--ds-act: #1a1410;
|
|
--ds-bd: rgba(196,184,164,.12);
|
|
--ds-hv: rgba(212,168,67,.06);
|
|
--ds-inp: #1a1410;
|
|
--ds-hf: 'Georgia', 'Times New Roman', serif;
|
|
}
|
|
|
|
/* ===== THEME OVERRIDES (Tailwind hardcoded → CSS vars) ===== */
|
|
body { background: var(--ds-bg) !important; }
|
|
h1, h2, h3 { font-family: var(--ds-hf) !important; }
|
|
html[data-theme="executive"] * { font-family: 'Georgia', 'Times New Roman', serif !important; }
|
|
|
|
/* ===== STEEL THEME ===== */
|
|
html[data-theme="steel"] {
|
|
font-size: 13px;
|
|
--ds-bg: #0c0c0e;
|
|
--ds-sf: #141418;
|
|
--ds-tx: #f0f0f2;
|
|
--ds-tx2: #7a8494;
|
|
--ds-tx3: #4a5260;
|
|
--ds-ac: #3b82f6;
|
|
--ds-ac2: #2563eb;
|
|
--ds-act: #fff;
|
|
--ds-bd: rgba(255,255,255,.07);
|
|
--ds-hv: rgba(59,130,246,.06);
|
|
--ds-inp: #0c0c0e;
|
|
--ds-hf: 'DM Sans', sans-serif;
|
|
}
|
|
html[data-theme="steel"] * { font-family: 'DM Sans', sans-serif !important; }
|
|
html[data-theme="steel"] [class*="text-[#c9a84c]"],
|
|
html[data-theme="steel"] [class*="bg-[#c9a84c]"] { color: #3b82f6 !important; }
|
|
html[data-theme="steel"] [class*="bg-[#c9a84c]"] { background: #3b82f6 !important; }
|
|
html[data-theme="steel"] .sidebar-link.active { background: rgba(59,130,246,.12) !important; color: #3b82f6 !important; }
|
|
html[data-theme="steel"] #ds-theme-bar button.active { background: #3b82f6 !important; color: #fff !important; }
|
|
|
|
/* ===== BRUTALIST THEME ===== */
|
|
html[data-theme="brutalist"] {
|
|
font-size: 13px;
|
|
--ds-bg: #111111;
|
|
--ds-sf: #1c1c1c;
|
|
--ds-tx: #ffffff;
|
|
--ds-tx2: #999999;
|
|
--ds-tx3: #666666;
|
|
--ds-ac: #ff6600;
|
|
--ds-ac2: #e05500;
|
|
--ds-act: #fff;
|
|
--ds-bd: rgba(255,255,255,.09);
|
|
--ds-hv: rgba(255,102,0,.06);
|
|
--ds-inp: #111111;
|
|
--ds-hf: 'Space Mono', monospace;
|
|
}
|
|
html[data-theme="brutalist"] * { font-family: 'Space Mono', monospace !important; }
|
|
html[data-theme="brutalist"] [class*="text-[#c9a84c]"] { color: #ff6600 !important; }
|
|
html[data-theme="brutalist"] [class*="bg-[#c9a84c]"] { background: #ff6600 !important; }
|
|
html[data-theme="brutalist"] [class*="border-\[#c9a84c\]"] { border-color: #ff6600 !important; }
|
|
html[data-theme="brutalist"] .sidebar-link.active { background: rgba(255,102,0,.1) !important; color: #ff6600 !important; }
|
|
html[data-theme="brutalist"] #ds-theme-bar button.active { background: #ff6600 !important; color: #fff !important; }
|
|
header { background: var(--ds-sf) !important; border-color: var(--ds-bd) !important; }
|
|
nav { background: var(--ds-sf) !important; border-color: var(--ds-bd) !important; }
|
|
.text-white { color: var(--ds-tx) !important; }
|
|
[class*="text-white/"] { color: var(--ds-tx3) !important; }
|
|
[class*="bg-[#0d1f3c]"] { background-color: var(--ds-sf) !important; }
|
|
[class*="bg-[#0a1628]"] { background-color: var(--ds-bg) !important; }
|
|
[class*="text-[#c9a84c]"] { color: var(--ds-ac) !important; }
|
|
[class*="text-[#94a3b8]"] { color: var(--ds-tx2) !important; }
|
|
[class*="text-[#475569]"] { color: var(--ds-tx3) !important; }
|
|
[class*="text-[#0a1628]"] { color: var(--ds-act) !important; }
|
|
[class*="bg-[#c9a84c]"] { background-color: var(--ds-ac) !important; }
|
|
[class*="hover:bg-[#b8973f]"]:hover { background-color: var(--ds-ac2) !important; }
|
|
[class*="border-white"] { border-color: var(--ds-bd) !important; }
|
|
[class*="bg-white/"] { background-color: var(--ds-hv) !important; }
|
|
[class*="hover:bg-white/"]:hover { background-color: var(--ds-hv) !important; }
|
|
input, textarea, select { background-color: var(--ds-inp) !important; color: var(--ds-tx) !important; border-color: var(--ds-bd) !important; }
|
|
input:focus, textarea:focus, select:focus { border-color: var(--ds-ac) !important; }
|
|
[class*="bg-black/"] { background-color: rgba(0,0,0,.6) !important; }
|
|
|
|
/* ===== SIDEBAR ===== */
|
|
.sidebar-link.active {
|
|
background: color-mix(in srgb, var(--ds-ac) 10%, transparent) !important;
|
|
color: var(--ds-ac) !important;
|
|
border-left-color: var(--ds-ac) !important;
|
|
border-left: 3px solid var(--ds-ac);
|
|
}
|
|
.sidebar-link:hover:not(.active) { background: var(--ds-hv) !important; }
|
|
|
|
/* ===== TABS ===== */
|
|
.tab { border-bottom: 2px solid transparent; }
|
|
.tab.active { color: var(--ds-ac) !important; border-bottom-color: var(--ds-ac) !important; }
|
|
|
|
/* ===== BADGES ===== */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 1px 8px;
|
|
border-radius: 9999px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
}
|
|
.priority-high { background: #ef4444; }
|
|
.priority-normal { background: #c9a84c; }
|
|
.priority-low { background: #22c55e; }
|
|
|
|
/* ===== CARDS ===== */
|
|
.card:hover { border-color: rgba(201,168,76,0.3); transform: translateY(-1px); }
|
|
.task-card:hover { border-color: rgba(201,168,76,0.3); transform: translateY(-1px); }
|
|
|
|
/* ===== ACTIONS MENU ===== */
|
|
.actions-menu {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 100%;
|
|
background: var(--ds-sf, #0d1f3c);
|
|
border: 1px solid var(--ds-bd);
|
|
border-radius: 8px;
|
|
padding: 4px 0;
|
|
min-width: 160px;
|
|
z-index: 100;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,.4);
|
|
}
|
|
.actions-menu button {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
color: var(--ds-tx2, #94a3b8);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.actions-menu button:hover { background: var(--ds-hv); color: var(--ds-tx, #fff); }
|
|
|
|
/* ===== TREE TABLE ===== */
|
|
#reqTree { border-collapse: collapse; width: 100%; font-size: 13px; }
|
|
|
|
/* ===== PROJECT SWITCHER ===== */
|
|
#projectSwitcher {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--ds-tx);
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin: 0;
|
|
max-width: 320px;
|
|
}
|
|
#projectSwitcher option {
|
|
background: var(--ds-sf);
|
|
color: var(--ds-tx);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ===== TYPE HIERARCHY ===== */
|
|
/* Level 1 — Logo / Page title : 2xl (19.5px) — set inline */
|
|
/* Level 2 — Project name in header : xl (16.25px) — set inline */
|
|
/* Level 3 — Section / group labels : 13px bold — set inline in renderTree */
|
|
/* Level 4 — Body / table rows : 13px — base */
|
|
/* Level 5 — Metadata / counts / dates : 11px — set inline */
|
|
/* Tabs, sidebar links : text-base (13px) */
|
|
/* Badges, labels, pill text : 11px */
|
|
.tab { font-size: 13px; }
|
|
.sidebar-link { font-size: 13px; }
|
|
#reqTree th { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
|
|
#reqTree td { font-size: 13px; }
|
|
#reqTree th {
|
|
text-align: left;
|
|
padding: 6px 10px;
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--ds-tx3, #475569);
|
|
border-bottom: 1px solid var(--ds-bd, rgba(255,255,255,.08));
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
}
|
|
#reqTree td {
|
|
padding: 5px 10px;
|
|
border-bottom: 1px solid var(--ds-bd, rgba(255,255,255,.08));
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
#reqTree tbody tr { transition: background .1s; }
|
|
#reqTree tbody tr:hover { background: var(--ds-hv, rgba(255,255,255,.04)); }
|
|
#reqTree tbody tr.row-list { background: var(--ds-sf, #0d1f3c); }
|
|
#reqTree tbody tr.row-list:hover { background: color-mix(in srgb, var(--ds-sf, #0d1f3c) 85%, var(--ds-tx, white)); }
|
|
#reqTree tbody tr.row-section { background: rgba(255,255,255,.02); }
|
|
#reqTree .row-num { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ds-tx3, #475569); }
|
|
|
|
/* ===== DRAG & DROP ===== */
|
|
#reqTree .drag-handle { cursor: grab; opacity: 0.3; transition: opacity .15s; }
|
|
#reqTree tr:hover .drag-handle { opacity: 0.8; }
|
|
#reqTree .collapse-btn {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
display: inline-block;
|
|
width: 16px;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
color: var(--ds-tx3, #475569);
|
|
transition: transform .15s;
|
|
}
|
|
#reqTree .collapse-btn.collapsed { transform: rotate(-90deg); }
|
|
.drop-above { box-shadow: 0 -2px 0 var(--ds-ac, #c9a84c) inset; }
|
|
.drop-below { box-shadow: 0 2px 0 var(--ds-ac, #c9a84c) inset; }
|
|
.drop-into { box-shadow: inset 0 0 0 1px var(--ds-ac, #c9a84c); }
|
|
|
|
/* ===== THEME BAR ===== */
|
|
#ds-theme-bar {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
z-index: 9999;
|
|
display: flex;
|
|
gap: 3px;
|
|
padding: 4px;
|
|
background: var(--ds-sf);
|
|
border: 1px solid var(--ds-bd);
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,.3);
|
|
}
|
|
#ds-theme-bar button {
|
|
padding: 5px 10px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
color: var(--ds-tx2);
|
|
white-space: nowrap;
|
|
transition: all .15s;
|
|
font-size: 12px;
|
|
}
|
|
#ds-theme-bar button:hover { background: var(--ds-hv); }
|
|
#ds-theme-bar button.active { background: var(--ds-ac); color: var(--ds-act); font-weight: 600; }
|
|
#ds-theme-bar, #ds-theme-bar * { font-family: 'Inter', sans-serif !important; }
|
|
|
|
/* ===== AUTH PAGES ===== */
|
|
.code-input {
|
|
letter-spacing: 0.5em;
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
}
|