/** * Svarog Theme — bazne promenljive i globalne korekcije Gin-a. * * Gin izlaže sopstvene CSS varijable (--gin-color-primary, --gin-bg-app, * --gin-border-color, ...). Ovde definišemo SAMO naš semantički sloj * povrh Gin-a. Ne prepisivati Gin varijable direktno osim kad je nužno — * akcentna boja se podešava kroz Gin settings UI, ne ovde. */ :root { /* Statusne boje — jedinstvena paleta cele aplikacije (DEO A3 briefa). */ --svarog-status-planned-bg: #f0efe9; --svarog-status-planned-fg: #5f5e5a; --svarog-status-published-bg: #e6f1fb; --svarog-status-published-fg: #185fa5; --svarog-status-changed-bg: #faeeda; --svarog-status-changed-fg: #854f0b; --svarog-status-done-bg: #eaf3de; --svarog-status-done-fg: #3b6d11; --svarog-status-noshow-bg: #fcebeb; --svarog-status-noshow-fg: #a32d2d; --svarog-status-locked-bg: #e8e7e0; --svarog-status-locked-fg: #444441; /* Upozorenja o isteku (licenca, lekarski, ugovor). */ --svarog-expiry-soon-bg: #faeeda; /* <= 30 dana */ --svarog-expiry-soon-fg: #854f0b; --svarog-expiry-urgent-bg: #fcebeb; /* <= 7 dana */ --svarog-expiry-urgent-fg: #a32d2d; } /* Dark mode — Gin postavlja .gin--dark-mode na . */ .gin--dark-mode { --svarog-status-planned-bg: #3a3a37; --svarog-status-planned-fg: #b4b2a9; --svarog-status-published-bg: #0c447c; --svarog-status-published-fg: #b5d4f4; --svarog-status-changed-bg: #633806; --svarog-status-changed-fg: #fac775; --svarog-status-done-bg: #27500a; --svarog-status-done-fg: #c0dd97; --svarog-status-noshow-bg: #791f1f; --svarog-status-noshow-fg: #f7c1c1; --svarog-status-locked-bg: #2c2c2a; --svarog-status-locked-fg: #b4b2a9; --svarog-expiry-soon-bg: #633806; --svarog-expiry-soon-fg: #fac775; --svarog-expiry-urgent-bg: #791f1f; --svarog-expiry-urgent-fg: #f7c1c1; } /* * Gin-ova "navigation top bar" (core Navigation modul) rezerviše 54px * prostora na vrhu i kod nas je uvek prazna — lokalne akcije/tabovi se kod * nas prikazuju u breadcrumb redu ispod, ne ovde. Ovo je zaseban element od * .admin-toolbar-control-bar (koji sadrži "Expand/Collapse sidebar" dugme * za otvaranje bočnog menija na uskim ekranima) — taj control-bar ostaje * netaknut, pa nema razloga da top-bar zadržimo ni na mobilnom. * * !important je nužan: core-ov web/core/modules/navigation/css/components/ * top-bar.css koristi #extra-specificity-hack (ID specifičnost preko * :is()) i :has(.top-bar__tools:not(:empty), ...) — a Twig template * ostavlja razmak/novi red unutar tih divova, pa ih CSS :empty tretira kao * "ima sadržaja" iako su vizuelno prazni. Isto :has() pravilo dodaje * margin-block-start na .dialog-off-canvas-main-canvas nezavisno od toga * da li je traka i dalje vidljiva, pa tu marginu moramo posebno resetovati. */ .gin--navigation-top-bar { display: none !important; } .dialog-off-canvas-main-canvas { margin-block-start: 0 !important; } /* * Gin-ova .gin-secondary-toolbar (breadcrumb traka) ima fiksnu visinu * (--gin-toolbar-secondary-height) bez obzira na sadržaj. Na stranicama van * /admin (radnički ekrani) breadcrumb region je stvarno prazan — nema * "Nazad na sajt" link ni stazu — pa traku sakrivamo preko klase koju * postavlja svarog_theme_preprocess_html(). Na admin stranicama, gde * breadcrumb postoji, klasa se ne dodaje i traka ostaje. */ body.svarog-no-breadcrumb .gin-secondary-toolbar { display: none !important; } /* * Logo u gornjem levom uglu bočne trake. Gin fiksira * .admin-toolbar__logo img na width:40px / height:auto (dist/css/layout/ * navigation.css) — dobro za kvadratnu ikonicu, ali gnječi širi "wordmark" * logo.png (2520×224) u tanku traku od ~3.5px. Rešenje: kad je sidebar * skupljen prikazujemo logo_small.png (kvadratna ikonica isečena iz * logo.png preko GD-a), a kad je otvoren prikazujemo pun logo.png sa * object-fit: contain da zadrži razmeru. * * Stanje sidebar-a se NE prati preko klase "admin-toolbar-expanded" na * (ona se postavlja samo jednom, inline, u gin/templates/navigation/ * navigation--gin.html.twig, i u praksi je mrtav kod za ovu Drupal * verziju) — stvarni, uživo ažuriran indikator je atribut * data-admin-toolbar="expanded"/"collapsed", koji postavlja * core/modules/navigation/js/admin-toolbar-wrapper.js na svaki klik na * toggle dugme. !important je nužan jer se Gin-ov CSS u ovom projektu * učitava POSLE našeg (vidi napomenu uz .gin--navigation-top-bar iznad). */ .admin-toolbar__logo img { content: url('../logo_small.png') !important; width: 32px !important; height: 32px !important; object-fit: contain !important; } html[data-admin-toolbar="expanded"] .admin-toolbar__logo img { /* logo_wide.png je logo.png isečen na stvarne granice sadržaja (logo.png ima ogroman prazan prostor desno od znaka — 2520px širine kanvasa za ~1020px vidljivog sadržaja — pa je pri fiksnoj širini bio nepotrebno tanak). */ content: url('../logo_wide.png') !important; width: 100% !important; max-width: 230px !important; height: auto !important; object-fit: contain !important; }