/* ═══════════════════════════════════════════════════════════════════════════ TiM → Qdrant · Svi @media blokovi (1180 / 1000 / 900 / 620 / reduced-motion). 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 MORA se ucitavati POSLEDNJI — ova pravila racunaju na to da gaze sve pre sebe. Pravila i uputstvo za dodavanje novih ekrana: docs/DESIGN_SYSTEM.md ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Responsive ────────────────────────────────────────────────────────── */ /* Log kolona pada ispod sadržaja */ @media (max-width: 1180px) { .workspace-body, .workspace-body[data-view="update"], .workspace-body[data-view="ingest"] { grid-template-columns: minmax(0, 1fr); padding-inline: var(--s-6); } .workspace-side { position: static; } .log-output { height: 300px; } .workspace-top { padding-inline: var(--s-6) 76px; } } /* Sidebar postaje horizontalna traka */ @media (max-width: 1000px) { /* Niti iznad razgovora: na uzem ekranu kolona od 300px pojede pola sirine, a razgovor je ono zbog cega se sekcija otvara. Visina razgovora se tada fiksira, jer bi u punoj visini spisak niti ostao van ekrana. */ .ai-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .ai-thread-list { max-height: 180px; } .ai-threads-head { flex-direction: row; align-items: center; justify-content: space-between; } .ai-threads-head .primary-btn { width: auto; } .ai-threads-head .ghost-btn { flex-shrink: 0; } /* Spisak predloga iznad diff-a, istim rezonovanjem kao spisak niti. */ .proposal-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .proposal-side { border-right: none; border-bottom: 1px solid var(--line); } .proposal-list { flex-direction: row; overflow-x: auto; /* Naslov plus meta-red koji se prelama po rečima (uz padding). Sa 96px se naslov gornje kartice sekao po sredini. */ max-height: 124px; } .proposal-item { min-width: 200px; } } @media (max-width: 900px) { /* Dve kolone diff-a ispod ove sirine daju dve trake od po 40 znakova. Unified prikaz nosi istu informaciju u jednom toku: obrisano precrtano, dodato podvuceno, oba na svom mestu u recenici. */ .diff-side { display: none; } .diff-unified { display: block; } .proposal-card { height: 96vh; } .proposal-foot { flex-wrap: wrap; } .proposal-foot input[type="text"] { flex-basis: 100%; } /* Isto rezonovanje i za probu: dugmad ne mogu da se skupe ispod svog teksta, pa bi polje sa pitanjem ostalo široko dva slova. */ .staging-row { flex-wrap: wrap; } .staging-row input[type="text"], .staging-row select { flex-basis: 100%; } /* Dno panela za uređivanje: objašnjenje uz dugme se na telefonu prelama u tri reda pored jednog dugmeta — čitljivije je jedno ispod drugog. */ .op-edit-actions { flex-wrap: wrap; } .op-edit-actions .hint { flex-basis: 100%; } .shell { grid-template-columns: minmax(0, 1fr); } /* Sidebar je ovde traka na vrhu, pa `height: 100vh` na `.shell` vise nije mera radnog prostora. AI sekcija se vraca u normalan tok stranice, a razgovor dobija svoj skrol kroz `max-height`. */ .shell:has(.workspace-body[data-view="ai"]) { height: auto; } .workspace-body[data-view="ai"] { flex: none; } .ai-messages { max-height: 60vh; } .sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-right: none; border-bottom: 1px solid var(--line); /* Bez overflow-a na sidebar-u: horizontalni skrol nosi `.nav`, jer bi svako overflow != visible ovde odseklo padajući meni korisnika. */ } .sidebar .brand { padding: 0; } .sidebar .brand-text { display: none; } .nav { flex-direction: row; align-items: center; gap: var(--s-1); overflow-x: auto; overflow-y: hidden; } .nav-group { display: none; } .nav-item { width: auto; white-space: nowrap; } .sidebar-foot { flex-direction: row; gap: var(--s-1); margin: 0; padding: 0 0 0 var(--s-3); border-top: none; border-left: 1px solid var(--line); } /* Sidebar je traka: kartica korisnika ostaje, ali bez korisničkog imena u drugom redu — ono se vidi na sekciji „Moj profil". Meni pada nadole jer je kartica sada na vrhu ekrana. */ .user-menu { margin-top: 0; } .user-chip { width: auto; } .user-chip-sub { display: none; } .user-dropdown { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; min-width: 180px; } .workspace-top-right { display: none; } /* Sidebar je sada horizontalna traka na vrhu — fiksni toggle bi je preklapao, pa ga spuštamo u donji desni ugao. */ .theme-toggle { top: auto; bottom: var(--s-5); right: var(--s-5); box-shadow: var(--sh-lg); } .workspace-top { padding-right: var(--s-6); } /* Editor: fiksnih 280px za listu stavki nema smisla kad panel padne ispod ~600px — kolone se slažu jedna ispod druge. */ .editor-split { grid-template-columns: minmax(0, 1fr); } /* Šest polja u jednom redu staje samo na širokoj kartici — ispod ovog praga se prelamaju, a naslov uzima ceo red. */ .editor-fields { flex-wrap: wrap; } .editor-field-wide { flex-basis: 100%; } .editor-field-status, .editor-field-sync { flex-grow: 1; } } @media (max-width: 620px) { .settings-layout { grid-template-columns: minmax(0, 1fr); } .settings-sidebar { position: static; } .settings-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-nav-item .ico:last-child { display: none; } .setting-prompt-head { flex-wrap: wrap; margin-bottom: var(--s-2); } .workspace-top { padding: var(--s-4); } .crumb-title { font-size: 16px; } .crumb-sub { display: none; } .workspace-body { padding: var(--s-4) var(--s-4) var(--s-8); } .card { padding: var(--s-5); border-radius: var(--r-lg); } .nav-label { display: none; } .nav-item { padding: 9px 11px; } /* Nav je sveden na ikonice — kartica korisnika ostaje samo avatar. */ .user-chip-text, .user-chip-caret { display: none; } .modal-actions { flex-direction: column-reverse; } .modal-actions .ghost-btn, .modal-actions .primary-btn { width: 100%; } /* Traka masovne izmene pravila: na širokom ekranu je jedan red i NE sme da se prelama (gmail.css), jer se inače sama skupi. Ovde više nema u šta da se ne prelomi — kartica je uža od trake — pa se pušta u dva reda i pada ispod „Označi sve". */ .gmail-rules-bulk { flex-wrap: wrap; white-space: normal; width: 100%; margin-left: 0; } .gmail-rules-bulk select { flex: 1 1 120px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }