/* ===================================================================== SEARCH RESULTS - deljeni facet+lista-kartica sistem (.cl-*) --------------------------------------------------------------------- Zajednicki vizuelni jezik za /sudska-praksa (CaseLaw/Index) i /misljenja (Opinions/Index). Ranije copy-paste inline u oba .cshtml. Ucitava se per-page u @section Styles. Stranicne razlike (CaseLaw: topics/paths/descriptors; Opinions: gz-filter; razlicit .cl-hints margin-top) stoje u pages/case-law.css i pages/opinions.css. ===================================================================== */ /* Sticky search panel - ostaje gore pri skrolu (paritet sa /propisi) */ #clFtsPanel, #opFtsPanel { position: sticky; top: 0; z-index: 5; } /* === Faceted layout: facet panel levo, rezultati desno === */ .cl-layout { display: flex; align-items: flex-start; gap: 1.85rem; margin-top: 20px; } .cl-layout__facets { flex: 0 0 240px; width: 240px; background: var(--c-surface-glass-2); border: 1px solid var(--c-border-hairline); border-radius: var(--p-radius-2xl); box-shadow: var(--p-shadow-glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); padding: 16px 18px; box-sizing: border-box; } .cl-layout__main { flex: 1 1 auto; min-width: 0; } /* „Pretraži" dugme nosi ikonu pored teksta (kao /propisi) — poravnaj. */ .pb-panel .pb-search-pill__go { display: inline-flex; align-items: center; gap: 7px; } .pb-panel .pb-search-pill__go svg { flex: 0 0 auto; } /* Desktop: dugme/heder fioke i backdrop ne postoje (facets su stalni sidebar). */ .cl-facet-toggle { display: none; } .cl-facet-drawer__head { display: none; } .cl-facets-backdrop { display: none; } /* Tablet (2-pane facet+rezultati → stack); 980 je dozvoljen za dvopanelni layout. */ @media (min-width: 721px) and (max-width: 980px) { .cl-layout { flex-direction: column; } .cl-layout__facets { position: static; width: 100%; flex-basis: auto; } /* Column smer + align-items:flex-start sa baznog pravila: bez width:100% se main skuplja na širinu sadržaja (uzak "Nema rezultata" box). */ .cl-layout__main { width: 100%; } } /* Mobilni (≤720): filteri su off-canvas fioka da ne pojedu ceo ekran. */ @media (max-width: 720px) { /* Rezultati u svom redu (fioka filtera je portalovana na ). */ .cl-layout { flex-direction: column; } .cl-layout__main { width: 100%; } /* „Filteri" dugme je u headeru „Rezultati", desno (space-between). */ .cl-facet-toggle { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--c-border-hairline, rgba(15,23,42,.12)); border-radius: 999px; background: var(--p-white); color: var(--c-text-primary); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.05); } .cl-facet-toggle svg { color: var(--c-brand); } .cl-layout__facets { position: fixed; top: var(--topbar-h, 56px); left: 0; bottom: 0; width: 86%; max-width: 330px; flex-basis: auto; margin: 0; border-radius: 0; z-index: 1300; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; } .cl-layout__facets.is-open { transform: translateX(0); box-shadow: 0 0 50px rgba(15,23,42,.3); } .cl-facet-drawer__head { display: flex; align-items: center; justify-content: space-between; margin: -4px -4px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border-hairline, rgba(15,23,42,.1)); } .cl-facet-drawer__title { font-size: var(--fs-base); font-weight: 700; color: var(--c-text-strong, var(--c-text-primary)); } .cl-facet-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 9px; background: rgba(15,23,42,.05); color: var(--p-slate-500); cursor: pointer; } .cl-facet-drawer__close:hover { background: rgba(15,23,42,.1); } .cl-facets-backdrop { display: block; position: fixed; inset: var(--topbar-h, 56px) 0 0 0; /* ispod topbara (header ostaje čist) */ background: rgba(15,23,42,.45); z-index: 1290; opacity: 0; transition: opacity .2s ease; } .cl-facets-backdrop.is-open { opacity: 1; } .cl-facets-backdrop[hidden] { display: none; } } /* === Primeri pretrage (chip-ovi ispod search input-a) === Sami čipovi koriste STAMP `.pb-chip --sm`; ovde ostaje samo raspored reda i „Probajte:" labela. .cl-hints margin-top je stranicno (10px CaseLaw / 12px Opinions). */ .cl-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } /* Predefinisani upiti u empty box-u — samo na mobilnom (desktop ima gornji „Probajte" red). Vidi @media (max-width:720px). */ .cl-empty-tries { display: none; } .cl-hint-label { font-size: var(--fs-2xs); color: var(--c-text-secondary, var(--c-text-subtle)); margin-right: 2px; } /* === Rezultati pretrage — STAMP `.pb-card` kao kontejner === Kontejner/hover/shadow nosi `.pb-card` iz primitives.css; ovde ostaju samo raspored liste i interna struktura rezultata (head/meta/snippet/pills). */ .cl-results { list-style: none; padding: 0; margin: 0; } .cl-result { margin-bottom: .85rem; } .cl-result:last-child { margin-bottom: 0; } .cl-result__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .cl-result__ident { min-width: 0; } .cl-result__court { margin: 0; font-size:var(--fs-md); font-weight: 600; line-height: 1.3; color: var(--c-text, var(--c-text-primary)); letter-spacing: -.005em; } .cl-result__court-link { color: inherit; text-decoration: none; } .cl-result__court-link:hover { color: var(--c-brand); text-decoration: none; } .cl-result__meta { margin-top: .25rem; font-size:var(--fs-sm); color: var(--c-text-muted, var(--c-text-secondary)); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; } .cl-result__meta-sep { opacity: .55; } .cl-result__badges { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; } /* Otvori-dokument akcija koristi STAMP `.pb-icon-btn --sm`. */ /* Snippet - primarni readability target */ .cl-result__snippet { display: block; width: 100%; margin-top: .7rem; position: relative; } .cl-result__snippet-body { display: block; width: 100%; font-size:var(--fs-sm); line-height: 1.65; color: var(--c-text, var(--c-text-primary)); } .cl-result__snippet[data-clamped="true"] .cl-result__snippet-body { display: -webkit-box; width: 100%; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, #000 75%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent 100%); } .cl-result__snippet-body :is(em, mark, b) { font-style: normal; font-weight: 600; background: rgba(250, 204, 21, .35); color: inherit; padding: 0 2px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .cl-result__expand { display: inline-flex; align-items: center; margin-top: .35rem; padding: 2px 0; font-size:var(--fs-sm); font-weight: 500; color: var(--c-brand); background: none; border: none; cursor: pointer; } .cl-result__expand:hover { text-decoration: underline; } .cl-result__snippet:not([data-clamped="true"]) .cl-result__expand { display: none; } /* Pills traka (pravnosnaznost / ishod / organ ...) */ .cl-result__pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; } /* Dark mode delicate tweaks (kontejner nosi `.pb-card`; ovde samo highlight). */ @media (prefers-color-scheme: dark) { .cl-result__snippet-body :is(em, mark, b) { background: rgba(250, 204, 21, .22); } } /* ===== Mobile umirenje + search fix (<=720px) ===== - Skracuje subtitle-ove, sklanja chip predloge i empty pomocni tekst. - Search pill se prelama u 2 reda: input puna sirina, "Pretrazi" pada ispod kao full-width CTA. Bez ovoga input je odsecen sa desne strane. */ @media (max-width: 720px) { .pb-page-head { margin-bottom: 10px; } .pb-page-head__subtitle { font-size: var(--fs-sm); line-height: 1.45; } /* Na uskom ekranu search panel naraste (input + dugme u 2 reda) - sticky bi jeo previse visine, pa ga vracamo u normalan tok (paritet sa /propisi). */ #clFtsPanel, #opFtsPanel { position: static !important; } /* Header panela - sklanjamo dugacak subtitle. */ .pb-panel__head .pb-panel__sub { display: none; } /* Search pill: rastavljamo glossy pill kontejner - input postaje samostalan rounded field, a "Pretrazi" pada ispod kao full-width CTA. */ .pb-panel .pb-search-pill { display: block; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; position: relative; } .pb-panel .pb-search-pill:focus-within { box-shadow: none !important; background: transparent !important; border: 0 !important; } .pb-panel .pb-search-pill__ico { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; z-index: 1; pointer-events: none; } .pb-panel .pb-search-pill__input { display: block; width: 100%; padding: 12px 14px 12px 42px; font-size: var(--fs-base); background: var(--p-white); border: 1.5px solid var(--p-line-navy-10, rgba(7, 31, 77, .10)); border-radius: 12px; margin-bottom: 10px; } /* „Pretraži" — kompaktan pill (kao na /propisi), ne full-width; sa ikonom. */ .pb-panel .pb-search-pill__go { display: inline-flex; align-items: center; gap: 7px; width: auto; padding: 11px 20px; font-size: var(--fs-base); border-radius: 999px; } .pb-panel .pb-search-pill__go svg { width: 15px; height: 15px; flex: 0 0 auto; } /* Sugestije pretrage su nice-to-have ali dodaju 3-4 reda teksta — iz vrha ih sklanjamo, a skladno prikazujemo unutar empty box-a (ispod fold-a). */ .cl-hints { display: none; } .cl-empty-tries { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } /* Empty state - naslov ostaje, dugacak pomocni paragraf se skracuje. */ .pb-empty__text { font-size: var(--fs-sm); line-height: 1.45; } /* Podigni sadržaj (manji padding) da se predefinisani upiti vide bez skrola. */ .pb-empty { padding: 26px 16px 28px; } .pb-empty__ico { margin-bottom: 12px; } }