/* ============================================================================= mapa-legenda.css - legenda na /Mapa ----------------------------------------------------------------------------- Stara legenda je bila jedan spisak od trideset redova u crnoj kutiji sa sivim okvirom, a da bi stala na nizak ekran postojala su TRI stila koji se biraju po `screen.availHeight` i razlikuju se u jednom jedinom redu (`top`). Ovde to resava `max-height` sa skrolom, pa visina ekrana vise nikoga ne zanima. Boje su napisane doslovno: mapa je stara stranica i ne ucitava `theme.css`. Uvuci ceo token sistem zbog pet boja znacilo bi da stranica nasledi i sve ostalo iz novog dizajna i raspadne se. Klase su `nbl-*`, nove. Stari `style.css` stize u tek kad ga ubaci `231095102.js`, dakle POSLE ovog fajla - na istoj specificnosti bi pobedio. Sa novim imenima njegova pravila prosto ne pogadjaju nista. ========================================================================== */ .nbl, .nbl-jezicak { --nbl-povrs: #16181a; --nbl-uzdignut:#1e2124; --nbl-ivica: #2b2f33; --nbl-tekst: #e6e8ea; --nbl-blago: #9aa4ad; --nbl-akcenat: #d63c3c; font-family: Tahoma, Arial, sans-serif; box-sizing: border-box; } .nbl *, .nbl-jezicak * { box-sizing: inherit; } /* ------------------------------------------------------------- jezicak ---- */ .nbl-jezicak { position: absolute; left: 0; top: 90px; z-index: 5; padding: 14px 7px; background: var(--nbl-povrs); border: 1px solid var(--nbl-ivica); border-left: 0; border-radius: 0 6px 6px 0; cursor: pointer; box-shadow: 0 3px 14px rgba(0, 0, 0, .45); transition: transform .25s ease, opacity .25s ease, background .15s ease; } .nbl-jezicak:hover { background: var(--nbl-uzdignut); } /* Uspravan natpis umesto slova u zasebnim redovima. */ .nbl-jezicak span { display: block; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .22em; font-size: 11px; font-weight: 700; color: var(--nbl-tekst); } .nbl-jezicak.nbl-sakriven { transform: translateX(-100%); opacity: 0; pointer-events: none; } /* --------------------------------------------------------------- panel ---- */ .nbl { position: absolute; left: 0; top: 10px; z-index: 6; width: 246px; max-height: calc(100% - 20px); display: flex; flex-direction: column; background: var(--nbl-povrs); border: 1px solid var(--nbl-ivica); border-left: 0; border-radius: 0 8px 8px 0; box-shadow: 0 6px 26px rgba(0, 0, 0, .55); color: var(--nbl-tekst); /* Zatvorena je van ekrana, ne `display:none` - da klizne kad se otvori. */ transform: translateX(-100%); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease; } .nbl.nbl-otvoren { transform: translateX(0); opacity: 1; pointer-events: auto; } /* ----------------------------------------------------------------- vrh ---- */ .nbl-vrh { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--nbl-ivica); background: var(--nbl-uzdignut); border-radius: 0 8px 0 0; flex: 0 0 auto; } .nbl-naslov { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; flex: 1 1 auto; } .nbl-sve { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--nbl-blago); cursor: pointer; } .nbl-sve input { width: 13px; height: 13px; accent-color: var(--nbl-akcenat); cursor: pointer; margin: 0; } .nbl-zatvori { border: 0; background: none; color: var(--nbl-blago); font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; transition: color .15s ease; } .nbl-zatvori:hover { color: var(--nbl-akcenat); } /* ---------------------------------------------------------------- telo ---- */ /* Skrol je OVDE, ne na celoj stranici - zato visina ekrana vise ne trazi poseban stil kao sto je trazila kod tri stare varijante. */ .nbl-telo { overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 8px; flex: 1 1 auto; } .nbl-telo::-webkit-scrollbar { width: 8px; } .nbl-telo::-webkit-scrollbar-thumb { background: #33393f; border-radius: 4px; } .nbl-telo::-webkit-scrollbar-track { background: transparent; } .nbl-grupa h4 { margin: 10px 0 3px; padding: 0 12px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nbl-blago); } .nbl-grupa--admin h4 { color: var(--nbl-akcenat); } /* ----------------------------------------------------------------- red ---- */ .nbl-red { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 12px; line-height: 1.25; cursor: pointer; transition: background .12s ease; } .nbl-red:hover { background: var(--nbl-uzdignut); } .nbl-red img { width: 16px; height: 16px; object-fit: contain; flex: 0 0 16px; } .nbl-red > span:not([class]), .nbl-red > span.nbi-legenda-tacka + span { flex: 1 1 auto; } /* Ugasen red se vidi da je ugasen i bez gledanja u kvacicu. */ .nbl-red:has(input:not(:checked)) { color: #6b737a; } .nbl-red:has(input:not(:checked)) img { opacity: .4; filter: grayscale(1); } .nbl-red input { position: absolute; opacity: 0; pointer-events: none; } /* Kvacica je nacrtana, ne sistemska - sistemska u ovoj velicini izgleda drugacije u svakom pregledacu. */ .nbl-kvacica { position: relative; flex: 0 0 15px; width: 15px; height: 15px; border: 1px solid #3a4046; border-radius: 3px; background: #101214; transition: background .15s ease, border-color .15s ease; } .nbl-red input:checked + .nbl-kvacica { background: var(--nbl-akcenat); border-color: var(--nbl-akcenat); } .nbl-red input:checked + .nbl-kvacica::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .nbl-red input:focus-visible + .nbl-kvacica { box-shadow: 0 0 0 2px rgba(214, 60, 60, .45); } /* Tackica sloja stoji u istoj koloni kao ikone ostalih redova. */ .nbl-red > .nbi-legenda-tacka { flex: 0 0 16px; margin: 0; } /* Brojac igraca ispod admin reda. */ .nbl-grupa--admin .nbi-broj { padding: 0 12px 4px 36px; } /* -------------------------------------------------------------- telefon ---- */ @media (max-width: 560px) { .nbl { width: 210px; } .nbl-red { padding: 7px 10px; } }