/* ═══════════════════════════════════════════════════════════════════════════ TiM → Qdrant · Layout: sidebar, workspace, .workspace-body[data-view], .card-duo. Deo je podeljenog design sistema (static/css/). REDOSLED UČITAVANJA JE KASKADA i stoji u -u index.html — ne menjaj ga: vendor/phosphor → tokens → primitives → layout → components → help → views → responsive Pravila i uputstvo za dodavanje novih ekrana: docs/DESIGN_SYSTEM.md ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 4. LAYOUT ─────────────────────────────────────────────────────────── */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } /* Sidebar */ .sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; height: 100vh; padding: var(--s-5) var(--s-4); background: var(--sidebar-bg); border-right: 1px solid var(--line); } .sidebar .brand { padding: 0 var(--s-2) var(--s-6); } .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; min-height: 0; } .nav-group { margin: var(--s-5) 0 var(--s-2); padding: 0 var(--s-3); font-size: 11px; font-weight: 500; color: var(--faint); letter-spacing: 0.2px; } .nav-group:first-child { margin-top: 0; } .nav-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: 9px var(--s-3); background: transparent; border: 1px solid transparent; border-radius: var(--r-md); color: var(--ink-2); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.16s var(--ease), color 0.16s var(--ease); } .nav-item .ico { color: var(--muted); transition: color 0.16s var(--ease); } .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item:hover { background: var(--surface-3); color: var(--ink); } .nav-item:hover .ico { color: var(--ink-2); } .nav-item.active { background: var(--surface); border-color: var(--line); color: var(--accent); font-weight: 600; box-shadow: var(--sh-nav); } .nav-item.active .ico { color: var(--accent); } .nav-item.danger:hover { background: var(--rose-soft); color: var(--rose); } .nav-item.danger:hover .ico { color: var(--rose); } .nav-badge { flex-shrink: 0; min-width: 22px; padding: 1px 7px; background: var(--accent); color: var(--on-accent); border-radius: var(--r-sm); font-family: var(--mono); font-size: 11px; font-weight: 700; text-align: center; line-height: 1.5; } .sidebar-foot { display: flex; flex-direction: column; gap: 2px; padding-top: var(--s-4); margin-top: var(--s-4); border-top: 1px solid var(--line); } /* Workspace */ .workspace { display: flex; flex-direction: column; min-width: 0; } .workspace-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-8); padding-right: 76px; /* prostor za fiksni theme toggle */ background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .crumb { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .crumb-text { min-width: 0; } .crumb-title { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.25; } .crumb-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-top-right { display: flex; align-items: center; gap: var(--s-5); flex-shrink: 0; } .meta-block { display: flex; flex-direction: column; line-height: 1.3; } .meta-key { font-size: 11px; color: var(--faint); } .meta-val { font-size: 13px; font-weight: 600; letter-spacing: 0.2px; } .meta-sep { width: 1px; height: 28px; background: var(--line); } .workspace-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-col-w); gap: var(--s-6); align-items: start; padding: var(--s-6) var(--s-8) var(--s-10); } /* Ažuriranje i Ubacivanje su radni tokovi u kojima se log prati uporedo sa formom — te dve sekcije dele prostor 50-50. Ostale (dashboard, kolekcije, istorija) zadržavaju uski log stub. `data-view` postavlja nav.js. */ .workspace-body[data-view="update"], .workspace-body[data-view="ingest"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Sekcije bez svog SSE toka (dashboard, kolekcije, istorija, profil, korisnici) nemaju šta da prikažu u logu — kartica „Tok" se sakriva, ali kolona ostaje u grid-u (`display: none` ne dira `grid-template-columns`), pa sadržaj levo zadržava istu širinu kao na ostalim sekcijama. */ .workspace-body[data-view="overview"] .workspace-side, .workspace-body[data-view="collections"] .workspace-side, .workspace-body[data-view="history"] .workspace-side, .workspace-body[data-view="profile"] .workspace-side, .workspace-body[data-view="users"] .workspace-side, .workspace-body[data-view="settings"] .workspace-side, .workspace-body[data-view="ai"] .workspace-side, .workspace-body[data-view="aiAudit"] .workspace-side, .workspace-body[data-view="help"] .workspace-side, .workspace-body[data-view="gmailQa"] .workspace-side, .workspace-body[data-view="helpEditor"] .workspace-side { display: none; } /* Help centar je izuzetak od pravila „kolona ostaje rezervisana”: tabela članaka ima sedam kolona, a editor dve — na rezervisanih ~700px oboje bi imalo horizontalni skrol dok pored stoji prazno mesto. Zato ove sekcije preuzimaju i širinu log kolone. „AI trag” je tu iz istog razloga: tri grupe razbijanja stoje jedna pored druge samo ako imaju punu širinu. */ .workspace-body[data-view="help"], .workspace-body[data-view="helpEditor"], .workspace-body[data-view="settings"], .workspace-body[data-view="aiAudit"], .workspace-body[data-view="gmailQa"], .workspace-body[data-view="ai"] { grid-template-columns: minmax(0, 1fr); } /* `.shell` namerno ima `min-height`, a ne `height` — svaka druga sekcija sme da bude duža od ekrana. Ali AI sekciji unutrašnji skrol treba definitivnu visinu: bez nje lanac `flex: 1` nema od čega da računa, pa razgovor gura celu stranicu umesto da napravi svoj skrol. Zato samo ta sekcija fiksira visinu ljuske. `:has()` je jedini način da se predak ograniči prema stanju potomka bez JS-a. Ne podiže zahteve za browser: `color-mix()` iznad traži noviji browser od `:has()`. */ .shell:has(.workspace-body[data-view="ai"]) { height: 100vh; /* Implicitni red je `auto` — sam `height` ga ne zaustavlja, pa bi grid item prerastao ljusku. */ grid-template-rows: minmax(0, 1fr); } /* `min-height: auto` je podrazumevano za grid item i brani mu da se skupi ispod sadrzaja; bez ovoga ceo lanac `flex: 1` ispod ostaje bez efekta. */ .shell:has(.workspace-body[data-view="ai"]) .workspace { min-height: 0; } /* AI je jedina sekcija koja traži punu visinu ekrana: razgovor mora da ima SVOJ skrol, a polje za pitanje da ostane na dnu. Ostale sekcije rastu sa sadržajem — zato je ovo vezano za `data-view="ai"`, a `align-items: start` iznad ostaje pravilo za sve ostale. */ .workspace-body[data-view="ai"] { flex: 1; align-items: stretch; min-height: 0; /* Implicitni red grida je `auto`, tj. po sadrzaju — bez ovoga se kolona razvuce koliko i razgovor, pa unutrasnji skrol nikad ne nastane. */ grid-template-rows: minmax(0, 1fr); } .workspace-body[data-view="ai"] .panel[data-panel="ai"] { flex: 1; min-height: 0; } .workspace-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-5); min-height: 0; } .workspace-side { position: sticky; top: 96px; min-width: 0; } .panel { display: flex; flex-direction: column; gap: var(--s-5); animation: rise 0.34s var(--ease) both; } /* Dve kartice u istom redu unutar panela. Razmak nosi grid gap, pa ukupna širina ostaje identična kartici preko cele širine panela. `auto-fit` umesto media upita namerno: panel je uži od prozora za sidebar i za rezervisanu log kolonu (koja je na profilu sakrivena, ali ostaje u grid-u), pa širina prozora ne govori koliko prostora kartice stvarno imaju. Ispod ~300px po kartici se svejedno slažu jedna ispod druge. */ .card-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }