/* assets/css/site.css * ------------------- * Minimalni stilovi za v1.0 da stranica bude čitljiva. * Kasnije možemo preći na nešto ljepše (tailwind, custom, itd.) */ /* * v1.1.14 — THEME VARIJABLE * ------------------------- * Default vrijednosti su ovdje, ali se primarno prepisuju kroz: * - core/data/theme.json (učitavanje u preko theme_css_vars()) */ :root { --bg: #ffffff; --text: #111111; --muted_text: #555555; --primary: #1f4aa8; --primary_text: #ffffff; --card_bg: #ffffff; --border: #e5e5e5; --header_bg: #ffffff; --header_border: #e5e5e5; --nav_bg: #ffffff; --nav_border: #e5e5e5; --section_title_bg: #f5f6f8; --section_text_bg: #ffffff; --radius-card: 14px; --radius-button: 12px; --font-heading: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-body: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --header_text: #111111; --header_link: #111111; --header_link_hover: #1f4aa8; --nav_text: #111111; --nav_link_hover_bg: #eef2ff; --nav_link_hover_text: #111111; --nav_active_bg: #1f4aa8; --nav_active_text: #ffffff; --submenu_bg: #111827; --submenu_border: #e5e5e5; --submenu_text: #ffffff; --submenu_hover_bg: rgba(255,255,255,.10); --submenu_hover_text: #ffffff; --btn_bg: #1f4aa8; --btn_text: #ffffff; --btn_border: #1f4aa8; --btn_hover_bg: #163a86; --btn_hover_text: #ffffff; --auth_btn_bg: #1f4aa8; --auth_btn_text: #ffffff; --auth_btn_border: #1f4aa8; --auth_btn_hover_bg: #163a86; --auth_btn_hover_text: #ffffff; --user_pill_bg: #f3f4f6; --user_pill_text: #111111; --user_pill_border: #e5e5e5; /* Alias varijable radi kompatibilnosti sa starim stilovima */ --line: var(--border); --accent: var(--primary); --link: var(--primary); --card: var(--card_bg); --muted: var(--muted_text); } * { box-sizing: border-box; } body { margin:0; font-family: var(--font-body); background: var(--bg); color: var(--text); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: 1100px; margin: 0 auto; padding: 16px; } .site-header { border-bottom: 1px solid var(--header_border); background: var(--header_bg); color: var(--header_text, var(--text)); position: sticky; top:0; z-index: 1000; } .header-row { display:flex; align-items:center; justify-content:space-between; gap:16px; } .brand-link { font-weight: 700; font-size: 16px; color: var(--header_link, var(--text)); font-family: var(--font-heading); } .brand-sub { font-size: 12px; color: var(--muted_text); margin-top:2px; } /* v1.1.43 — finije trake (gornja + meni) */ .site-header .container { padding-top: 10px; padding-bottom: 10px; } .site-nav .container { padding-top: 6px; padding-bottom: 6px; } .site-nav { border-bottom: 1px solid var(--nav_border); background: var(--nav_bg); /* * v1.1.12 — FIX: dropdown podmenija na naslovnici je bio "prekriven" sadržajem. * Tipično se to dogodi kada neki element ispod navigacije ima veći z-index * ili kreira svoj stacking context (position + z-index, transform, filter...). * * Rješenje: * - napravimo stacking context na .site-nav i dignemo z-index dovoljno visoko * - eksplicitno omogućimo overflow: visible da dropdown ne bude "odrezan" */ position: relative; z-index: 5000; overflow: visible; } /* * Navigacija (public + admin) * -------------------------- * Problemi koje rješavamo (prema testu korisnika): * - Desktop: stavke ponekad nisu u ravnini. * - Tablet: stavke završavaju jedna ispod druge (nepregledno). * - Mobitel: OK, ali želimo zadržati čitljivost. * * Rješenje: * - Flex red s centriranjem po visini. * - Bez wrapa; ako je usko, dozvoli horizontalni scroll. * - Nav linkovi su bijeli radi bolje čitljivosti; crvena ostaje za hover. */ .nav-row { display: flex; gap: 10px; align-items: center; /* * v1.1.13 — KRITIČAN FIX (podmeni mora biti iznad svega) * ------------------------------------------------------ * Problem (prema testu korisnika): * - Na desktopu se dropdown vidi samo djelomično + pojavi se scrollbar. * - Na mobitelu se taj scrollbar ne može koristiti, pa podmeni izgleda "odrezano". * * Uzrok: * - `.nav-row` je do sada imao `overflow-x: auto` radi horizontalnog scrolla. * - U praksi (ovisno o browseru) overflow na jednom axisu može "odrezati" * apsolutno pozicionirani dropdown i ignorirati `overflow-y: visible`. * * Rješenje: * - maknuti overflow scroll iz `.nav-row` da dropdown nikad ne bude odrezan. * - dopustiti wrap stavki kad je ekran uzak (umjesto scrolla). */ flex-wrap: wrap; overflow: visible; /* v1.1.12 — osiguraj da dropdown ima prioritet u slojevima */ position: relative; z-index: 5001; } .nav-link { padding: 6px 8px; border-radius: 10px; white-space: nowrap; color: var(--nav_text, var(--text)); font-size: 14px; } .nav-link:hover { background: var(--nav_link_hover_bg, rgba(255,255,255,.06)); color: var(--nav_link_hover_text, var(--nav_text, var(--text))); text-decoration:none; } /* v1.1.13 — scrollbar više nije potreban jer nema overflow scrolla u .nav-row */ .btn { display:inline-block; padding: 6px 10px; border: 1px solid var(--btn_border, var(--border)); border-radius: var(--radius-button); background: var(--btn_bg, var(--primary)); color: var(--btn_text, var(--primary_text)); font-size: 13px; } .btn:hover { background: var(--btn_hover_bg, var(--primary)); color: var(--btn_hover_text, var(--btn_text, var(--primary_text))); text-decoration:none; } .user-pill { display:inline-block; padding: 4px 8px; border-radius: 999px; background: var(--user_pill_bg, var(--card_bg)); color: var(--user_pill_text, var(--text)); border: 1px solid var(--user_pill_border, var(--border)); margin-right: 8px; font-size: 12px; } main { min-height: 70vh; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; } .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; } input, select, textarea { width: 100%; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); } label { display:block; margin: 10px 0 6px; color: var(--muted); } table { width:100%; border-collapse: collapse; } th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align:left; } .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .right { margin-left:auto; } .notice { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(143,211,255,.08); } .error { padding: 10px 12px; border: 1px solid #7a2b2b; border-radius: 12px; background: rgba(255,60,60,.08); } .site-footer { border-top: 1px solid var(--line); color: var(--muted); } /* v1.0.8 — podmeni (dropdown) */ .nav-group { position: relative; display: flex; align-items: center; /* v1.1.12 — osiguraj prioritet u slojevima */ z-index: 7000; } .nav-group-title { cursor: default; } .nav-dropdown { display: none; position: absolute; /* v1.1.43 — dropdown pomaknut gore (nema "rupe" između trake i dropdowna) */ top: 100%; margin-top: 3px; left: 0; min-width: 220px; background: var(--submenu_bg, rgba(20,20,22,.98)); border: 1px solid var(--submenu_border, var(--line)); border-radius: 14px; padding: 8px; /* v1.1.12 — iznad sadržaja stranice (dodatno podignuto jer je i dalje bilo prekriveno) */ z-index: 9999; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .nav-dropdown:before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; } .nav-dropdown-link { display:block; padding: 8px 10px; border-radius: 10px; color: var(--submenu_text, var(--text)); } .nav-dropdown-link:hover { background: var(--submenu_hover_bg, rgba(255,255,255,.06)); color: var(--submenu_hover_text, var(--submenu_text, var(--text))); text-decoration:none; } .nav-group:hover .nav-dropdown { display:block; } /* v1.1.16 — gumbi su tematski (podešava se kroz Tema modul) */ /* v1.0.8 — logo u headeru */ .brand-flex { display:flex; align-items:center; gap:10px; } .brand-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); background: rgba(255,255,255,.04); } /* v1.0.9 — FIX select/dropdown (admin UI) */ select { background: #141416; color: #ffffff; border: 1px solid #333; } select option { background: #141416; color: #ffffff; } select option:hover, select option:checked { background: #ff3b3b; color: #ffffff; } select:focus { outline: none; border-color: #ff3b3b; } .brand-link:hover { color: var(--header_link_hover, var(--primary)); text-decoration:none; } /* v1.1.16 — prijava/odjava gumb (posebne boje) */ .btn-auth { background: var(--auth_btn_bg, var(--btn_bg, var(--primary))); color: var(--auth_btn_text, var(--btn_text, var(--primary_text))); border-color: var(--auth_btn_border, var(--btn_border, var(--primary))); } .btn-auth:hover { background: var(--auth_btn_hover_bg, var(--btn_hover_bg, var(--primary))); color: var(--auth_btn_hover_text, var(--auth_btn_text, var(--btn_text, var(--primary_text)))); }