162 lines
5.0 KiB
CSS
162 lines
5.0 KiB
CSS
/* Modern light theme with subtle shadows and good spacing */
|
|
:root{
|
|
--bg:#f5f7fb;
|
|
--text:#0f172a;
|
|
--muted:#64748b;
|
|
--card:#ffffff;
|
|
--line:#e2e8f0;
|
|
--brand:#0ea5e9;
|
|
--brand-600:#0284c7;
|
|
--primary:#2563eb;
|
|
--primary-600:#1d4ed8;
|
|
--success:#16a34a;
|
|
--warn:#f59e0b;
|
|
--danger:#ef4444;
|
|
--dup:#fff7e6;
|
|
|
|
--radius:12px;
|
|
--shadow: 0 12px 28px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.06);
|
|
|
|
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
|
--font: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
*{box-sizing:border-box}
|
|
html,body{height:100%}
|
|
body.tk{
|
|
margin:0;
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
font-family:var(--font);
|
|
line-height:1.5;
|
|
}
|
|
|
|
/* Header / nav */
|
|
.tk-header{
|
|
position:sticky;top:0;z-index:10;
|
|
background:#ffffffc0; backdrop-filter:saturate(180%) blur(12px);
|
|
border-bottom:1px solid var(--line);
|
|
}
|
|
.tk-header-inner{
|
|
max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
|
|
padding:12px 20px;
|
|
}
|
|
.tk-brand{
|
|
font-weight:800;letter-spacing:.2px;text-decoration:none;color:var(--brand-600);
|
|
}
|
|
.tk-nav{display:flex;gap:12px}
|
|
.tk-nav-link{
|
|
color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;transition:.15s;
|
|
}
|
|
.tk-nav-link:hover{color:var(--text);background:#f1f5f9}
|
|
.tk-nav-link.danger{color:var(--danger)}
|
|
|
|
/* Main page container */
|
|
.tk-container{
|
|
max-width:100%;
|
|
margin:18px auto;
|
|
padding:0 20px;
|
|
display:flex;
|
|
justify-content:center; /* default for most pages */
|
|
align-items:flex-start;
|
|
}
|
|
|
|
/* Viewer: make the editor span full width and cancel left/right padding so the sidebar sits at the window edge */
|
|
.page-wide{
|
|
flex:1 1 auto; /* occupy full width of the container */
|
|
margin:0 -20px; /* negate tk-container left/right padding */
|
|
width:calc(100% + 40px); /* keep content full width after negative margins */
|
|
}
|
|
|
|
/* Layout */
|
|
.editor-grid{
|
|
display:grid;
|
|
grid-template-columns:280px minmax(0,1fr); /* fixed sidebar + fluid editor */
|
|
gap:18px;
|
|
width:100%;
|
|
}
|
|
@media (max-width:960px){.editor-grid{grid-template-columns:1fr}}
|
|
|
|
.panel{
|
|
background:var(--card);
|
|
border:1px solid var(--line);
|
|
border-radius:var(--radius);
|
|
box-shadow:var(--shadow);
|
|
padding:14px;
|
|
}
|
|
.panel.sidebar{position:sticky;top:84px;height:fit-content}
|
|
.panel.main{min-height:480px}
|
|
.panel.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
|
.panel-title{font-weight:700;margin-bottom:8px}
|
|
.divider{height:1px;background:var(--line);margin:12px 0}
|
|
|
|
/* Sidebar */
|
|
.emp-list{list-style:none;margin:0;padding:0;max-height:52vh;overflow:auto}
|
|
.emp-list li{margin:0}
|
|
.emp-list li a{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--text)}
|
|
.emp-list li.active a{background:#eaf2ff;border:1px solid #c9dbff}
|
|
.emp-list li a:hover{background:#f7fafc}
|
|
.emp-list .empty{color:var(--muted);padding:6px 8px}
|
|
.actions .btn{margin-bottom:8px}
|
|
.w-full{width:100%}
|
|
|
|
/* Controls */
|
|
.label{color:var(--muted);margin-right:8px}
|
|
.input,.select{
|
|
background:#fff;border:1px solid var(--line);color:var(--text);
|
|
padding:8px 10px;border-radius:10px;outline:none;min-width:90px;
|
|
transition:.15s border-color, .15s box-shadow;
|
|
}
|
|
.input:focus,.select:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(147,197,253,.35)}
|
|
.inline{display:inline-flex;gap:10px;align-items:center}
|
|
|
|
/* Buttons */
|
|
.btn{
|
|
appearance:none;border:1px solid var(--line);background:#f8fafc;color:var(--text);
|
|
padding:10px 14px;border-radius:12px;text-decoration:none;cursor:pointer;
|
|
transition:.15s filter, .15s transform;
|
|
}
|
|
.btn:hover{filter:brightness(1.02)}
|
|
.btn.primary{background:linear-gradient(180deg,#60a5fa,#3b82f6);color:white;border-color:#3b82f6}
|
|
.btn.primary.sm{padding:8px 12px;border-radius:10px}
|
|
.btn.danger{background:linear-gradient(180deg,#fca5a5,#ef4444);color:white;border-color:#ef4444}
|
|
|
|
/* Alerts */
|
|
.alert{border-radius:12px;padding:12px}
|
|
.alert.success{background:#ecfdf5;border:1px solid #a7f3d0}
|
|
.alert.warn{background:#fff7ed;border:1px solid #fed7aa}
|
|
.mb-8{margin-bottom:8px}
|
|
.mt-8{margin-top:8px}
|
|
|
|
/* Totals */
|
|
.panel.totals{
|
|
display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
|
|
}
|
|
.total{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:10px}
|
|
.t-label{color:var(--muted);font-size:12px;margin-bottom:4px}
|
|
.t-val{font-weight:800}
|
|
|
|
/* Table */
|
|
.table-wrap{overflow:auto}
|
|
.table{
|
|
width:100%;border-collapse:separate;border-spacing:0;
|
|
font-size:14px;
|
|
}
|
|
.table thead th{
|
|
position:sticky;top:0;background:#f1f5f9;border-bottom:1px solid var(--line);
|
|
text-align:left;padding:10px;font-weight:700;
|
|
}
|
|
.table td{
|
|
border-bottom:1px solid var(--line);
|
|
padding:8px 10px;vertical-align:middle;
|
|
}
|
|
.table .num{text-align:right}
|
|
.table .mono{font-family:var(--mono)}
|
|
.table.compact td,.table.compact th{padding:8px}
|
|
.table tr.total td{font-weight:700;border-top:2px solid var(--line)}
|
|
.dup-row{background:var(--dup)}
|
|
.table input.input{width:110px}
|
|
.table .select{width:130px}
|
|
|
|
/* Utility */
|
|
.mr-8{margin-right:8px} |