/* ═══════════════════════════════════════════════════════════════════════════ TiM → Qdrant · Help centar, lista članaka: tabela, sortiranje, paginacija. Editor jednog članka je u help-editor.css (podeljeno zbog budžeta linija). 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 → feedback → help → help-editor → views → responsive Pravila i uputstvo za dodavanje novih ekrana: docs/DESIGN_SYSTEM.md ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Tabela podataka (Help centar) ─────────────────────────────────────── Prva tabela u aplikaciji. Bez zebre — nje nema nigde drugde; redovi se razdvajaju ivicom, a hover koristi istu površinu kao lista artikala. Široke kolone skroluju unutar omotača, pa telo stranice nikad ne dobije horizontalni skrol. */ .data-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { padding: 9px var(--s-4); border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: 0.7px; white-space: nowrap; } .data-table td { padding: 7px var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .dt-row { transition: background 0.12s var(--ease); } .dt-row:hover { background: var(--surface-2); } .dt-row.dragging { background: var(--accent-soft); } /* Dok se prevlači, tekst ne sme da se selektuje pod prstom/mišem. */ .data-table tbody.is-sorting { user-select: none; } .drag-handle { display: grid; place-items: center; width: 24px; height: 24px; color: var(--faint); cursor: grab; /* Bez ovoga bi dodir skrolovao stranicu umesto da pomera red. */ touch-action: none; } .drag-handle:active { cursor: grabbing; } .drag-handle .ico { font-size: 16px; } /* Ćelija naslova ostaje prava tabelarna ćelija — `display: flex` na ``-u ga izbaci iz tabelarnog layout-a, pa se ivice redova prestanu poklapati. Raspored (chevron, redni broj, tekst) nosi omotač unutra; `--depth` daje uvlačenje. */ .data-table .dt-title { min-width: 260px; } .dt-title-inner { display: flex; align-items: center; gap: var(--s-2); min-width: 0; padding-left: calc(var(--depth, 0) * 20px); } /* Naslov i (u pretrazi) putanja do njega stoje jedno ispod drugog, pa im treba sopstvena kolona unutar reda naslova. */ .dt-title-stack { display: flex; flex-direction: column; min-width: 0; } .dt-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-path { overflow: hidden; text-overflow: ellipsis; } /* Grana (članak sa podčlancima) je naglašena; list je sam članak. */ .dt-row-article .dt-title-text { font-weight: 600; } .dt-row-article.is-leaf .dt-title-text { font-weight: 500; color: var(--ink-2); } /* Rasklopljena grana gubi donju ivicu, pa se spaja sa svojom decom. */ .dt-row.is-open td { border-bottom-color: transparent; } .dt-ordinal { flex-shrink: 0; min-width: 20px; color: var(--faint); font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; } .dt-sub { color: var(--muted); font-size: 11.5px; white-space: nowrap; } .dt-chevron { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; background: transparent; border: none; border-radius: var(--r-xs); color: var(--muted); cursor: pointer; transition: color 0.16s var(--ease), background 0.16s var(--ease); } .dt-chevron:hover { background: var(--surface-3); color: var(--ink); } .dt-chevron .ico { font-size: 15px; } .dt-chevron-spacer { width: 22px; flex-shrink: 0; } .data-table .dt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .dt-id { font-family: var(--mono); font-size: 12px; color: var(--muted); } .dt-faint { color: var(--faint); } .dt-collection { display: block; font-family: var(--mono); font-size: 12px; } .data-table .dt-actions { width: 1%; white-space: nowrap; } .dt-action-group { display: inline-flex; align-items: center; gap: var(--s-1); } .dt-del:hover:not(:disabled) { color: var(--rose); background: var(--rose-soft); } /* Sortiranje po koloni — dugme popunjava ćelinu zaglavlja, pa je cela širina klikabilna. Strelica pokazuje smer; neaktivna kolona nosi prigušen `up-down`. */ .data-table th.dt-sortable { padding: 0; } .dt-sort { display: flex; align-items: center; gap: 5px; width: 100%; padding: 9px var(--s-4); background: transparent; border: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: color 0.16s var(--ease); } .dt-sort:hover { color: var(--ink); } .dt-sort.is-active { color: var(--accent); } .dt-sort .ico { font-size: 13px; } .dt-sort:not(.is-active) .ico { opacity: 0.45; } .data-table th.dt-num .dt-sort { justify-content: flex-end; } /* Paginacija ispod tabele. */ .dt-pager { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-4); } .dt-pager-info { /* Osnovica 210px na širokom ekranu, ali sme da se skupi — na 375px bi fiksna širina isterala dugmad iz trake. */ flex: 0 1 210px; min-width: 0; text-align: center; color: var(--muted); font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; } /* Prečica na prvu stranu se istakne tek kad korisnik nije na prvoj strani. */ .dt-pager .is-shortcut:not(:disabled) { color: var(--accent); background: var(--accent-soft); }