@charset "UTF-8"; /* =========================================================================== efollowr.shell.css — glava in noga javnega dela --------------------------------------------------------------------------- NAMESTITEV: v _Layout.cshtml kot ZADNJA stylesheet povezava, za OurStylesBase.css. Deluje samo, če ima razred `ef-shell`. Site.css in OurStyles.css ciljata #header, #menu, #menu1, #page_footer po id-jih in ponekod z !important. Zato so tukajšnja pravila vezana na `body.ef-shell ...` — s tem dobijo višjo specifičnost in !important potrebujemo le tam, kjer nasprotna stran uporablja isto orožje. Barve so iz dokumenta "Filozofija nove spletne strani". =========================================================================== */ body.ef-shell{ --sh-primary:#026679; --sh-secondary:#38889a; --sh-action:#d93025; --sh-action-dark:#b3241b; --sh-ink:#12304a; --sh-body:#4a5b6b; --sh-muted:#7b8794; --sh-line:#e6edf2; --sh-navy:#0d3c50; --sh-navy-2:#0a3143; --sh-r:15px; --sh-ease:cubic-bezier(.22,.7,.3,1); font-family:'Manrope','Roboto',system-ui,sans-serif !important; /* OurStyles.css sili Roboto z !important */ background:#fff; } /* --------------------------------------------------------------------------- GLAVA — bel lepljiv pas: logotip levo, meni na sredini, poziv desno ------------------------------------------------------------------------ */ body.ef-shell #header{ position:sticky; top:0; z-index:1000; background:#fff !important; /* OurStyles.css riše temno podlago */ color:var(--sh-ink); border-bottom:1px solid var(--sh-line); padding:0 !important; /* OurStylesBase.css doda 5em */ height:auto; box-shadow:0 1px 2px rgba(18,48,74,.04); } body.ef-shell .ef-bar{ max-width:1240px; margin-inline:auto; padding:14px clamp(20px,4vw,40px); display:flex; align-items:center; gap:clamp(16px,3vw,40px); } body.ef-shell .ef-brand{ flex:none; display:block; line-height:0; } body.ef-shell .ef-brand img{ height:44px; width:auto; max-width:none; display:block; } /* Glavni meni. #menu je ohranjen, ker se nanj veže slicknav. */ body.ef-shell .ef-bar .nav{ background:transparent !important; padding:0 !important; border:0; flex:1 1 auto; min-width:0; } body.ef-shell #menu{ list-style:none; margin:0; padding:0; display:flex; align-items:center; justify-content:center; gap:clamp(10px,1.8vw,28px); flex-wrap:wrap; } body.ef-shell #menu > li{ float:none; } body.ef-shell #menu > li > a{ display:block; padding:9px 2px; font-size:16px; font-weight:700; color:var(--sh-ink) !important; /* Site.css sili belo */ text-decoration:none; border-bottom:3px solid transparent; transition:color .18s var(--sh-ease), border-color .18s var(--sh-ease); white-space:nowrap; } body.ef-shell #menu > li > a:hover{ color:var(--sh-primary) !important; } body.ef-shell #menu > li > a.currentPageStyle{ color:var(--sh-primary) !important; border-bottom-color:var(--sh-primary); box-shadow:none; } /* Prijava in registracija */ body.ef-shell .ef-bar .nav1{ background:transparent !important; width:auto !important; float:none !important; padding:0 !important; flex:none; } body.ef-shell #menu1{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:8px; } body.ef-shell #menu1 > li{ float:none; } body.ef-shell #menu1 a{ display:inline-block; padding:9px 14px; font-size:15px; font-weight:700; color:var(--sh-body) !important; /* premaga podedovano belo */ text-decoration:none; border-radius:10px; transition:color .18s var(--sh-ease), background-color .18s var(--sh-ease); white-space:nowrap; } body.ef-shell #menu1 a:hover{ color:var(--sh-primary) !important; background:#f2f7fa; } /* Rdeči poziv na skrajni desni */ body.ef-shell #menu1 a.ef-cta, body.ef-shell .ef-cta{ background:var(--sh-action); color:#fff !important; padding:13px 22px; border-radius:var(--sh-r); box-shadow:0 6px 16px rgba(217,48,37,.22); } body.ef-shell #menu1 a.ef-cta:hover, body.ef-shell .ef-cta:hover{ background:var(--sh-action-dark); color:#fff !important; box-shadow:0 10px 22px rgba(217,48,37,.28); } body.ef-shell #header .icon-bar{ display:none; } /* Mobilni meni (slicknav) */ body.ef-shell .slicknav_menu{ background:#fff !important; border-bottom:1px solid var(--sh-line); padding:6px 10px; } body.ef-shell .slicknav_nav a{ color:var(--sh-ink) !important; font-weight:600; } body.ef-shell .slicknav_btn{ background:#f2f7fa; border-radius:10px; } body.ef-shell .slicknav_icon-bar{ background:var(--sh-ink) !important; } @media (max-width:991px){ body.ef-shell .ef-bar .nav:not(.nav1){ display:none; } body.ef-shell .ef-bar{ justify-content:space-between; } } @media (max-width:575px){ /* Jezik ostane tudi na najožjih zaslonih — skrčen na ikono globusa. */ body.ef-shell #menu1 > .ef-lang.ef-hide-xs, body.ef-shell #menu1 > li.ef-lang{ display:block !important; margin-left:2px; padding-left:0; border-left:0; } body.ef-shell .ef-lang__btn{ padding:8px 10px; gap:0; } /* Poziv malo ožji, da je za globus prostor pri 360px. */ body.ef-shell #menu1 a.ef-cta{ padding:11px 16px; font-size:14px; } } @media screen and (max-width:991px){ .js body.ef-shell .slicknav_menu{ display:block; } } @media screen and (min-width:992px){ .js body.ef-shell .slicknav_menu{ display:none; } } /* --------------------------------------------------------------------------- NOGA — temno modra, štirje stolpci ------------------------------------------------------------------------ */ body.ef-shell #page_footer{ background:var(--sh-navy) !important; color:#cfe0e6; padding:0 !important; margin:0; height:auto; overflow:visible; text-align:left; font-size:15px; } body.ef-shell .ef-foot{ max-width:1240px; margin-inline:auto; padding:clamp(48px,6vw,72px) clamp(20px,4vw,40px) 0; display:grid; gap:clamp(32px,4vw,48px); grid-template-columns:1fr; } @media (min-width:640px){ body.ef-shell .ef-foot{ grid-template-columns:1fr 1fr; } } @media (min-width:992px){ body.ef-shell .ef-foot{ grid-template-columns:1.5fr 1fr 1fr 1.3fr; } } body.ef-shell .ef-foot h4{ color:#4ec3d9; font-size:19px; font-weight:800; margin:0 0 20px; letter-spacing:-.01em; } body.ef-shell .ef-foot p{ margin:0 0 16px; line-height:1.65; color:#b9d2da; } body.ef-shell .ef-foot strong{ color:#fff; } body.ef-shell .ef-foot__brand img{ height:42px; width:auto; margin-bottom:22px; } body.ef-shell .ef-foot__claim{ color:#fff; font-size:20px; font-weight:800; line-height:1.35; margin-bottom:16px; } /* Stolpci s povezavami. #menu_footer ostaja, ker ga cilja Site.css. */ body.ef-shell .ef-foot ul{ list-style:none; margin:0; padding:0; } body.ef-shell .ef-foot ul li{ float:none; text-align:left; } body.ef-shell .ef-foot ul li a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; color:#dbe9ee !important; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.1); transition:color .18s var(--sh-ease), padding-left .18s var(--sh-ease); } body.ef-shell .ef-foot ul li a:hover{ color:#fff !important; padding-left:6px; } body.ef-shell .ef-foot ul li a::after{ content:"›"; color:rgba(255,255,255,.45); font-size:19px; line-height:1; } /* Site.css riše ločila s psevdo elementom – tu jih ne potrebujemo */ body.ef-shell .ef-foot .footer_sep:after{ content:""; padding:0; } body.ef-shell .ef-foot__contact li a{ border-bottom:0; } body.ef-shell .ef-foot__social{ display:flex; gap:12px; margin-top:22px; } body.ef-shell .ef-foot__social a{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; padding:0; border:0; } body.ef-shell .ef-foot__social a::after{ content:none; } body.ef-shell .ef-foot__social a:hover{ background:rgba(255,255,255,.2); padding-left:0; } body.ef-shell .ef-foot__social img{ width:20px; height:auto; } /* Spodnja vrstica */ body.ef-shell .ef-foot-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:clamp(36px,4vw,52px); } body.ef-shell .ef-foot-bottom__in{ max-width:1240px; margin-inline:auto; padding:24px clamp(20px,4vw,40px); display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; font-size:14px; color:#9fbcc6; } body.ef-shell .ef-foot-bottom__in a{ color:#cfe0e6 !important; font-weight:600; text-decoration:none; } body.ef-shell .ef-foot-bottom__in a:hover{ color:#fff !important; } body.ef-shell .ef-foot-bottom__sep{ margin-left:auto; text-align:right; } /* copy1 iz stare noge ostane v DOM-u, a ga postavimo v spodnjo vrstico */ body.ef-shell #page_footer .copy1{ float:none; width:auto; margin:0; } @media (prefers-reduced-motion:reduce){ body.ef-shell *{ transition-duration:.01ms !important; } } /* ZAOBLJENJE VHODOV (javni del) */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], select, textarea, .form-control{ border-radius:12px; } textarea{ border-radius:14px; } /* =========================================================================== POPRAVEK — noga: postavitev se je uredila šele ob prehodu z miško --------------------------------------------------------------------------- NAMESTITEV: na SAM KONEC datoteke Content/efollowr.shell.css. VZROK Site.css in OurStyles.css ciljata nogo po id-jih (#page_footer, #menu_footer), kar da specifičnost 1-0-0. Pravila v efollowr.shell.css so vezana na `body.ef-shell .ef-foot ul li a`, torej 0-4-1 — id vedno zmaga. Osnovno stanje je zato dobilo tujo postavitev (float, display:block, poravnave), ob prehodu z miško pa se je sprožilo naše pravilo :hover in postavitev je skočila na pravo. Od tod vtis, da "hover popravi postavitev". REŠITEV Ista pravila, a s #page_footer v selektorju — s tem imamo tudi mi 1-0-0 in osnovno stanje obvelja od prvega izrisa. Drugi možni vzrok, isti simptom: float iz Site.css se sesede, dokler prehod z miško ne izsili ponovnega izrisa. Zato float izrecno izničimo. =========================================================================== */ /* --- seznami v nogi: brez float, cela širina ------------------------------ */ body.ef-shell #page_footer .ef-foot ul{ list-style:none; margin:0; padding:0; display:block; width:100%; overflow:visible; } body.ef-shell #page_footer .ef-foot ul li{ float:none !important; /* Site.css: #menu_footer li{float:left} */ display:block; width:100%; margin:0; padding:0; text-align:left; white-space:normal; } /* --- povezave: osnovno stanje z isto specifičnostjo kot Site.css ---------- */ body.ef-shell #page_footer .ef-foot ul li a{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; float:none; padding:11px 0; color:#dbe9ee; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.1); /* Prehod je zdaj na transform in ne na padding-left. Animiranje odmika spremeni postavitev pri vsakem koraku; transform ne, zato ne more povzročiti premikanja sosednjih elementov. */ transition:color .18s var(--sh-ease), transform .18s var(--sh-ease); } body.ef-shell #page_footer .ef-foot ul li a:hover{ color:#fff; padding-left:0; /* prejšnja različica je tu dodajala 6px */ transform:translateX(6px); } /* puščica na desni */ body.ef-shell #page_footer .ef-foot ul li a::after{ content:"\203A"; flex:none; color:rgba(255,255,255,.45); font-size:19px; line-height:1; } /* Site.css riše ločila s psevdo elementom — v tej nogi jih ne potrebujemo */ body.ef-shell #page_footer .ef-foot .footer_sep::after{ content:""; padding:0; } /* --- kontakt in družbena omrežja ----------------------------------------- */ body.ef-shell #page_footer .ef-foot__contact li a{ border-bottom:0; } body.ef-shell #page_footer .ef-foot__social{ display:flex; gap:12px; margin-top:22px; } body.ef-shell #page_footer .ef-foot__social a{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; padding:0; border:0; transform:none; } body.ef-shell #page_footer .ef-foot__social a::after{ content:none; } body.ef-shell #page_footer .ef-foot__social a:hover{ background:rgba(255,255,255,.2); transform:none; /* ikone naj ne drsijo v desno */ } /* --- stolpci ------------------------------------------------------------- */ body.ef-shell #page_footer .ef-foot{ display:grid; grid-template-columns:1fr; gap:clamp(32px,4vw,48px); max-width:1240px; margin-inline:auto; padding:clamp(48px,6vw,72px) clamp(20px,4vw,40px) 0; } @media (min-width:640px){ body.ef-shell #page_footer .ef-foot{ grid-template-columns:1fr 1fr; } } @media (min-width:992px){ body.ef-shell #page_footer .ef-foot{ grid-template-columns:1.5fr 1fr 1fr 1.3fr; } } /* copy1 iz stare noge ostane v DOM-u, a brez float */ body.ef-shell #page_footer .copy1{ float:none !important; width:auto; margin:0; } /* =========================================================================== POPRAVEK 2 — noga: prva dva elementa sta bila v isti vrstici --------------------------------------------------------------------------- NAMESTITEV: na SAM KONEC datoteke Content/efollowr.shell.css, za prejšnji popravek noge. VZROK Site.css cilja postavke z DVEMA id-jema (#page_footer #menu_footer li), torej specifičnost 2-0-0. Moj prvi popravek je imel en id (1-0-2) in je izgubil, zato so postavke ostale v vrsti (display:inline oz. float:left). REŠITEV Dva id-ja tudi na naši strani, plus !important na tri lastnosti, ki določajo, ali je postavka v svoji vrstici. Trije so namenoma — ne vem, katero od njih tam nastavlja Site.css, in vsaka od treh zadostuje za napako, ki jo vidiš. Pokrit je tudi primer, ko sta v ISTI postavki dve povezavi: takrat vsaka dobi svojo vrstico. =========================================================================== */ body.ef-shell #page_footer #menu_footer, body.ef-shell #page_footer .ef-foot ul{ display:block !important; float:none !important; width:100% !important; list-style:none; margin:0; padding:0; } body.ef-shell #page_footer #menu_footer > li, body.ef-shell #page_footer .ef-foot ul > li{ display:block !important; float:none !important; width:100% !important; margin:0; padding:0; text-align:left; white-space:normal; } /* Dve povezavi v isti postavki: vsaka v svojo vrstico. */ body.ef-shell #page_footer #menu_footer > li > a, body.ef-shell #page_footer .ef-foot ul > li > a{ display:flex !important; float:none !important; width:100% !important; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; color:#dbe9ee !important; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.1); } /* Ločilo iz stare noge naj ne dodaja znaka pred naslednjo povezavo — prav ta je na posnetku videti kot "›Mnenja". */ body.ef-shell #page_footer .footer_sep, body.ef-shell #page_footer #menu_footer .footer_sep{ display:block !important; float:none !important; } body.ef-shell #page_footer .footer_sep::after, body.ef-shell #page_footer .footer_sep::before{ content:"" !important; padding:0 !important; margin:0 !important; } /* Puščica samo enkrat, na desnem robu povezave. */ body.ef-shell #page_footer #menu_footer > li > a::after, body.ef-shell #page_footer .ef-foot ul > li > a::after{ content:"\203A"; flex:none; color:rgba(255,255,255,.45); font-size:19px; line-height:1; } body.ef-shell #page_footer .ef-foot__social a::after{ content:none !important; } /* =========================================================================== IZBIRNIK JEZIKA --------------------------------------------------------------------------- NAMESTITEV: na SAM KONEC datoteke Content/efollowr.shell.css. Pravila NISO vezana na body.ef-shell, ker je izbirnik tudi v administraciji, kjer tega razreda ni. Zato so tu vezana na .ef-lang, kar je novo ime in ga Site.css, OurStyles.css in AdminLTE ne poznajo. Na dnu je različica za temno glavo (AdminLTE), kjer je podlaga temna. =========================================================================== */ .ef-lang{ float:none !important; /* Site.css: #menu1 li{float:left} */ list-style:none; position:relative; display:flex; align-items:center; } /* --- gumb ---------------------------------------------------------------- */ .ef-lang__box{ position:relative; } .ef-lang__btn{ display:flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid #e6edf2; border-radius:12px; background:#fff; cursor:pointer; list-style:none; /* Firefox riše svoj trikotnik */ user-select:none; font-size:14px; font-weight:700; color:#12304a; white-space:nowrap; transition:border-color .16s ease, background-color .16s ease; } .ef-lang__btn::-webkit-details-marker{ display:none; } .ef-lang__btn:hover{ border-color:#38889a; background:#f2f7fa; } .ef-lang__flag{ width:22px; height:22px; border-radius:50%; object-fit:cover; display:block; flex:none; } .ef-lang__code{ letter-spacing:.02em; } /* puščica navzdol, ki se ob odprtju obrne */ .ef-lang__caret{ width:0; height:0; border-left:4.5px solid transparent; border-right:4.5px solid transparent; border-top:5px solid #7b8794; transition:transform .16s ease; } .ef-lang__box[open] .ef-lang__caret{ transform:rotate(180deg); } /* --- spustni seznam ------------------------------------------------------ */ .ef-lang__list{ position:absolute; top:calc(100% + 6px); right:0; z-index:1200; /* glava ima z-index 1000 */ min-width:210px; margin:0; padding:6px; list-style:none; background:#fff; border:1px solid #e6edf2; border-radius:14px; box-shadow:0 12px 28px rgba(18,48,74,.16); } .ef-lang__list > li{ float:none !important; list-style:none; margin:0; width:100%; } .ef-lang__item{ display:flex !important; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; font-size:14px; font-weight:600; color:#12304a !important; /* premaga podedovano belo */ text-decoration:none !important; white-space:nowrap; } .ef-lang__item img{ width:20px; height:20px; border-radius:50%; object-fit:cover; flex:none; } .ef-lang__item:hover{ background:#f2f7fa; color:#026679 !important; } .ef-lang__item .ef-lang__code{ min-width:34px; font-size:12px; font-weight:800; color:#7b8794; } .ef-lang__item .ef-lang__name{ font-weight:600; } /* trenutni jezik: kljukica na desni, brez podvojenega poudarka */ .ef-lang__item.is-current{ background:#eef4f7; color:#026679 !important; } .ef-lang__item.is-current::after{ content:"\2713"; margin-left:auto; padding-left:10px; font-size:13px; color:#026679; } /* --- ozki zasloni: ime jezika odpade, oznaka ostane --------------------- */ @media (max-width:575px){ .ef-lang__btn .ef-lang__code{ display:none; } .ef-lang__list{ min-width:150px; } .ef-lang__item .ef-lang__name{ display:none; } } /* --------------------------------------------------------------------------- TEMNA GLAVA (AdminLTE) V administraciji je pas temen, zato ima gumb prosojno podlago in svetlo pisavo. Spustni seznam ostane bel — na temni podlagi je berljivejši. ------------------------------------------------------------------------ */ .main-header .ef-lang__btn, .navbar .ef-lang__btn{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); color:#fff; } .main-header .ef-lang__btn:hover, .navbar .ef-lang__btn:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); } .main-header .ef-lang__caret, .navbar .ef-lang__caret{ border-top-color:rgba(255,255,255,.75); } /* AdminLTE nastavi .main-header .nav li a{padding:0} — naš gumb ni , a postavke v seznamu so, zato jim odmik vrnemo. */ .main-header .ef-lang__list a, .navbar .ef-lang__list a{ padding:9px 11px !important; } /* =========================================================================== POPRAVEK — izbirnik jezika: bele zastavice na beli podlagi --------------------------------------------------------------------------- NAMESTITEV: na SAM KONEC datoteke Content/efollowr.shell.css, za blokom z izbirnikom jezika. VZROK Slike lang_*.png so bele — narejene so bile za staro temno glavo. Na novi beli glavi jih ni videti. To ni napaka postavitve, ampak barva slike. REŠITEV A (privzeta, spodaj) Zastavica dobi temen krog pod sabo. Bela slika je na njem vidna, gumb pa ostane bel in se ujema z ostalo glavo. REŠITEV B (na dnu, zakomentirana) Cel gumb je temno moder. Uporabi jo, če ti je ljubše, da izbirnik izstopa kot samostojen element — takrat temnega kroga ne potrebuješ. PRAVA REŠITEV Zamenjati slike z barvnimi zastavicami. Takrat vse spodnje odstrani in ostane samo `border-radius:50%` iz osnovnega bloka. =========================================================================== */ /* --- A: temen krog pod belo zastavico ------------------------------------ */ .ef-lang__flag, .ef-lang__item img{ background-color:#0d3c50; border-radius:50%; padding:3px; box-sizing:border-box; /* object-fit:cover je sliko z odmikom obrezal; contain jo pusti celo */ object-fit:contain; } .ef-lang__flag{ width:24px; height:24px; } .ef-lang__item img{ width:22px; height:22px; } /* V temni glavi administracije krog ni potreben in bi izginil v podlago. */ .main-header .ef-lang__btn .ef-lang__flag, .navbar .ef-lang__btn .ef-lang__flag{ background-color:rgba(255,255,255,.14); } /* Spustni seznam je bel tudi v administraciji, zato tam krog ostane temen. */ /* --------------------------------------------------------------------------- B: temno moder gumb — odkomentiraj in zgornji blok izbriši, če ti je ljubša ta različica. ------------------------------------------------------------------------ */ /* .ef-lang__btn{ background:#0d3c50; border-color:#0d3c50; color:#fff; } .ef-lang__btn:hover{ background:#0a2f3f; border-color:#0a2f3f; } .ef-lang__caret{ border-top-color:rgba(255,255,255,.8); } .ef-lang__flag{ background:none; padding:0; } */ /* =========================================================================== POPRAVEK — izbirnik jezika: bele zastavice na beli podlagi --------------------------------------------------------------------------- NAMESTITEV: na SAM KONEC datoteke Content/efollowr.shell.css, za blokom z izbirnikom jezika. VZROK Slike lang_*.png so bele — narejene so bile za staro temno glavo. Na novi beli glavi jih ni videti. To ni napaka postavitve, ampak barva slike. REŠITEV A (privzeta, spodaj) Zastavica dobi temen krog pod sabo. Bela slika je na njem vidna, gumb pa ostane bel in se ujema z ostalo glavo. REŠITEV B (na dnu, zakomentirana) Cel gumb je temno moder. Uporabi jo, če ti je ljubše, da izbirnik izstopa kot samostojen element — takrat temnega kroga ne potrebuješ. PRAVA REŠITEV Zamenjati slike z barvnimi zastavicami. Takrat vse spodnje odstrani in ostane samo `border-radius:50%` iz osnovnega bloka. =========================================================================== */ /* --- A: temen krog pod belo zastavico ------------------------------------ */ .ef-lang__flag, .ef-lang__item img{ background-color:#0d3c50; border-radius:50%; padding:3px; box-sizing:border-box; /* object-fit:cover je sliko z odmikom obrezal; contain jo pusti celo */ object-fit:contain; } .ef-lang__flag{ width:24px; height:24px; } .ef-lang__item img{ width:22px; height:22px; } /* V temni glavi administracije krog ni potreben in bi izginil v podlago. */ .main-header .ef-lang__btn .ef-lang__flag, .navbar .ef-lang__btn .ef-lang__flag{ background-color:rgba(255,255,255,.14); } /* Spustni seznam je bel tudi v administraciji, zato tam krog ostane temen. */ /* --------------------------------------------------------------------------- B: temno moder gumb — odkomentiraj in zgornji blok izbriši, če ti je ljubša ta različica. ------------------------------------------------------------------------ */ /* .ef-lang__btn{ background:#0d3c50; border-color:#0d3c50; color:#fff; } .ef-lang__btn:hover{ background:#0a2f3f; border-color:#0a2f3f; } .ef-lang__caret{ border-top-color:rgba(255,255,255,.8); } .ef-lang__flag{ background:none; padding:0; } */ /* =========================================================================== GLAVA — razporeditev: logotip levo, meni bolj zračen, desna skupina desno --------------------------------------------------------------------------- NAMESTITEV: na SAM KONEC datoteke Content/efollowr.shell.css. Vse štiri zahteve so posledica ene odločitve: .ef-bar je bil omejen na 1240px in sredinjen, zato sta bila logotip in desna skupina potisnjena proti sredini, meni pa stisnjen med njiju. Pas zdaj uporabi celo širino okna, z odmikom od robov — s tem gre logotip levo, desna skupina desno, meni pa dobi prostor za večje presledke. =========================================================================== */ body.ef-shell .ef-bar{ max-width:none; /* prej 1240px in margin-inline:auto */ width:100%; margin-inline:0; padding:14px clamp(16px,2.5vw,36px); gap:clamp(16px,2vw,32px); } /* --- 1. logotip bolj levo ------------------------------------------------ */ body.ef-shell .ef-brand{ margin-right:clamp(8px,1.5vw,24px); } /* --- 2. več prostora med postavkami menija ------------------------------- */ body.ef-shell #menu{ gap:clamp(18px,2.6vw,44px); /* prej clamp(10px,1.8vw,28px) */ } /* Meni je bil sredinjen v prostoru med logotipom in desno skupino. Ker je pas zdaj širok, ga poravnamo na levo, tik za logotip — sredinjen bi pri široki glavi odplaval predaleč od blagovne znamke. */ body.ef-shell #menu{ justify-content:flex-start; } /* --- 3. desna skupina bolj desno ---------------------------------------- */ body.ef-shell .ef-bar .nav1{ margin-left:auto; /* potisne skupino na skrajno desno */ } body.ef-shell #menu1{ gap:clamp(8px,1vw,16px); /* prej 8px */ } /* --- 4. izbirnik jezika na skrajno desno -------------------------------- */ /* Izbirnik je zadnja postavka v #menu1, torej je že skrajno desno. Tu mu dodamo le ločnico, da se loči od Prijave in Registracije — brez nje trije elementi zlijejo v eno gručo. */ body.ef-shell #menu1 > .ef-lang{ margin-left:clamp(6px,.8vw,14px); padding-left:clamp(10px,1vw,18px); border-left:1px solid var(--sh-line); } /* --- ikona globusa v gumbu ---------------------------------------------- */ .ef-lang__globe{ width:17px; height:17px; flex:none; color:#026679; /* na beli glavi */ } .main-header .ef-lang__globe, .navbar .ef-lang__globe{ color:rgba(255,255,255,.85); /* na temni glavi administracije */ } /* Zastavica je iz gumba odšla — ikona globusa in oznaka jezika povesta vse, zastavice pa so bele in so na beli glavi potrebovale temen krog. V spustnem seznamu ostanejo, ker tam pomagajo pri prepoznavi. */ .ef-lang__btn .ef-lang__flag{ display:none; } /* --- ozki zasloni -------------------------------------------------------- */ @media (max-width:991px){ body.ef-shell .ef-bar{ padding:12px clamp(14px,3vw,20px); } body.ef-shell #menu1 > .ef-lang{ border-left:0; padding-left:4px; margin-left:4px; } } /* --- pas in panel ---------------------------------------------------- */ .slicknav_menu { background: transparent; padding: 0; } .slicknav_nav { margin: 0 12px 10px; padding: 6px; color: #2c3b41; background: #fff; border: 1px solid rgba(16, 34, 48, .08); border-radius: 14px; box-shadow: 0 18px 40px rgba(16, 34, 48, .16), 0 2px 6px rgba(16, 34, 48, .06); } /* --- postavke -------------------------------------------------------- */ .slicknav_nav a, .slicknav_nav a:link, .slicknav_nav a:visited { display: block; margin: 0; padding: 11px 14px; border-radius: 9px; color: #2c3b41; font-size: 15px; font-weight: 500; text-decoration: none; } .slicknav_nav .slicknav_row { margin: 0; padding: 0; border-radius: 9px; } /* vrstica s pusico: in pusica sta v .slicknav_row, zato padding tam */ .slicknav_nav .slicknav_row > a, .slicknav_nav .slicknav_item > a, .slicknav_nav .slicknav_parent-link a { display: inline-block; padding: 11px 14px; } .slicknav_nav .slicknav_row:hover, .slicknav_nav .slicknav_row:focus, .slicknav_nav a:hover, .slicknav_nav a:focus { background: #f2f6f8; color: #0f6674; border-radius: 9px; text-decoration: none; } .slicknav_nav .slicknav_row:hover > a, .slicknav_nav .slicknav_row:hover .slicknav_arrow { color: #0f6674; } .slicknav_nav .slicknav_arrow { color: #8aa2ad; float: right; margin-right: 14px; } /* --- gnezdeni podmeni ------------------------------------------------ */ .slicknav_nav ul { margin: 0 0 4px 12px; padding-left: 8px; border-left: 2px solid #e6edf1; } /* --- trenutna stran -------------------------------------------------- */ .slicknav_nav .currentPageStyle { box-shadow: none !important; /* bel inset podcrtaj je bil za temen pas */ background: #eaf3f5; color: #0f6674 !important; font-weight: 600; } /* --- gumb (hamburger) ------------------------------------------------ */ .slicknav_btn { background: #eef3f5; box-shadow: none; text-shadow: none; } .slicknav_menu .slicknav_icon-bar { background-color: #2c3b41; box-shadow: none; } .slicknav_menu .slicknav_menutxt { color: #2c3b41; text-shadow: none; } /* --- pas in panel ---------------------------------------------------- */ .slicknav_menu { background: transparent; padding: 0; } .slicknav_menu .slicknav_nav { margin: 0 12px 10px; padding: 6px; color: #2c3b41 !important; background: #fff; border: 1px solid rgba(16, 34, 48, .08); border-radius: 14px; box-shadow: 0 18px 40px rgba(16, 34, 48, .16), 0 2px 6px rgba(16, 34, 48, .06); font-size: 15px; } /* --- postavke -------------------------------------------------------- */ .slicknav_menu .slicknav_nav a, .slicknav_menu .slicknav_nav a:link, .slicknav_menu .slicknav_nav a:visited, .slicknav_menu .slicknav_nav .slicknav_row, .slicknav_menu .slicknav_nav .slicknav_item, .slicknav_menu .slicknav_nav .slicknav_txtnode { color: #2c3b41 !important; text-shadow: none !important; } .slicknav_menu .slicknav_nav a { display: block; margin: 0; padding: 11px 14px; border-radius: 9px; font-weight: 500; text-decoration: none; } .slicknav_menu .slicknav_nav .slicknav_row { display: block; margin: 0; padding: 0; border-radius: 9px; } /* vrstica s pusico: in pusica sta znotraj .slicknav_row */ .slicknav_menu .slicknav_nav .slicknav_row > a, .slicknav_menu .slicknav_nav .slicknav_item > a, .slicknav_menu .slicknav_nav .slicknav_parent-link a { display: inline-block; padding: 11px 14px; } .slicknav_menu .slicknav_nav .slicknav_row:hover, .slicknav_menu .slicknav_nav .slicknav_row:focus, .slicknav_menu .slicknav_nav a:hover, .slicknav_menu .slicknav_nav a:focus { background: #f2f6f8 !important; color: #0f6674 !important; border-radius: 9px; text-decoration: none; } .slicknav_menu .slicknav_nav .slicknav_row:hover > a, .slicknav_menu .slicknav_nav .slicknav_row:hover .slicknav_arrow { color: #0f6674 !important; } .slicknav_menu .slicknav_nav .slicknav_arrow { color: #8aa2ad !important; float: right; margin-right: 14px; } /* --- gnezdeni podmeni ------------------------------------------------ */ .slicknav_menu .slicknav_nav ul { margin: 0 0 4px 12px; padding-left: 8px; border-left: 2px solid #e6edf1; } /* --- trenutna stran -------------------------------------------------- */ .slicknav_menu .slicknav_nav .currentPageStyle, .slicknav_menu .slicknav_nav a.currentPageStyle { box-shadow: none !important; /* bel inset podcrtaj je bil za temen pas */ background: #eaf3f5 !important; color: #0f6674 !important; font-weight: 600; } /* --- gumb (hamburger) ------------------------------------------------ */ .slicknav_btn { background: #eef3f5; box-shadow: none; text-shadow: none; } .slicknav_menu .slicknav_icon-bar { background-color: #2c3b41; box-shadow: none; } .slicknav_menu .slicknav_menutxt { color: #2c3b41 !important; text-shadow: none !important; } @media (max-width: 575px) { /* Kljucno: dovolimo prelom in preprecimo, da bi kateri koli otrok vsiljeval svojo najmanjso sirino (privzeti min-width: auto je tisto, kar povzroci razlitje cez rob). */ body.ef-shell .ef-bar { flex-wrap: wrap; row-gap: 8px; padding-right: 12px; padding-left: 12px; } body.ef-shell .ef-bar > * { min-width: 0; } body.ef-shell #menu1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; } body.ef-shell #menu1 > li { margin: 0; padding: 0; } /* Jezik v svojo vrstico, poravnan desno pod gumbi. */ body.ef-shell #menu1 > li.ef-lang { display: flex !important; order: 10; flex-basis: 100%; justify-content: flex-end; margin: 0; padding: 0; border-left: 0; } /* Gumba malo ozja, da Prijava in Registracija ostaneta v prvi vrstici. */ body.ef-shell #menu1 a.ef-cta { padding: 10px 14px; font-size: 14px; } body.ef-shell .ef-lang__btn { padding: 8px 10px; gap: 6px; } /* Spustni seznam jezikov naj ne stopi cez rob zaslona. */ body.ef-shell .ef-lang__list { right: 0; left: auto; max-width: calc(100vw - 24px); } }