Magacin: modal za premeštanje + ujednačen slajder na svim brauzerima

Premeštanje artikla:
  - Padajući <details> meni zamenjen nativnim <dialog> modalom (showModal),
    koji ide u „top layer" pa je uvek iznad svega bez obzira na z-index/overflow.
  - Dodato zatamnjenje pozadine (::backdrop) i fade in/out animacije
    (@starting-style + transition-behavior: allow-discrete).
  - Klik van modala, × dugme i Escape zatvaraju; klik na kategoriju i dalje
    odmah premešta artikal.

  Tema i HTMX:
  - CSS modala premešten iz magacin.html (dodatni-css u headeru) u main.css,
    jer se header ne menja pri HTMX navigaciji (hx-select=#glavni-sadrzaj),
    pa je stil sada uvek prisutan.
  - Modal prati svetlu/tamnu temu preko CSS promenljivih; kad je aktivna
    pozadinska slika, glass-override u base.html ga čini providnim i zamućenim
    kao kartice.
  - Modal centriran (margin:auto, jer reset gazi UA podrazumevano) i pojačana senka.

  Slajder (input[type=range]):
  - Dodata zajednička klasa .klizac sa ručnim stilom za oba motora
    (::-webkit-slider-* i ::-moz-range-*), da svuda izgleda kao u Firefox-u.
  - Plava popunjenost pre glave: Firefox preko ::-moz-range-progress, Chromium
    preko gradijenta i CSS promenljive --popunjeno koju postavlja JS.
  - Svih 12 slajdera (profil_tema, podesavanja_izgled, podesavanja) prešlo sa
    inline accent-color stila na klasu .klizac.

web/static/css/main.css

@@ -331,6 +331,101 @@ body {
     box-shadow: var(--senka);
 }
 
+/* modal za premeštanje artikla — koristi promenljive teme, pa prati svetlu/tamnu;
+   kad je aktivna slika u pozadini, glass-override u base.html ga čini providnim kao kartice */
+.premesti-modal {
+    border: 0.5px solid var(--ivica);
+    border-radius: 12px;
+    padding: 0;
+    background: var(--pozadina);
+    color: var(--tekst-glavni);
+    width: min(90vw, 320px);
+    /* eksplicitno centriranje — main.css reset gazi UA „margin:auto", pa bez ovoga modal padne u gornji levi ćošak */
+    margin: auto;
+    /* dvoslojna senka: meka difuzna + dublja bliža, da modal jače „iskoči" iznad pozadine */
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35),
+                0 32px 80px rgba(0, 0, 0, 0.55);
+    /* polazno stanje + prelaz za fade in/out (transform daje blagi „zoom") */
+    opacity: 0;
+    transform: scale(0.96);
+    transition: opacity 0.32s ease, transform 0.32s ease,
+                overlay 0.32s ease allow-discrete, display 0.32s ease allow-discrete;
+}
+.premesti-modal[open] {
+    opacity: 1;
+    transform: scale(1);
+}
+/* početno stanje na samom otvaranju — bez ovoga nema fade in animacije */
+@starting-style {
+    .premesti-modal[open] {
+        opacity: 0;
+        transform: scale(0.96);
+    }
+}
+/* zatamnjena pozadina iza modala */
+.premesti-modal::backdrop {
+    background: rgba(0, 0, 0, 0);
+    transition: background 0.32s ease,
+                overlay 0.32s ease allow-discrete, display 0.32s ease allow-discrete;
+}
+.premesti-modal[open]::backdrop {
+    background: rgba(0, 0, 0, 0.72);
+}
+@starting-style {
+    .premesti-modal[open]::backdrop {
+        background: rgba(0, 0, 0, 0);
+    }
+}
+/* zaglavlje modala: naslov + dugme za zatvaranje */
+.premesti-zaglavlje {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 14px;
+    margin: 0;
+    border-bottom: 0.5px solid var(--ivica);
+}
+.premesti-zaglavlje h3 {
+    margin: 0;
+    font-size: 15px;
+    color: var(--tekst-glavni);
+}
+.premesti-zatvori {
+    background: none;
+    border: none;
+    color: var(--tekst-sporedni);
+    font-size: 22px;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0 4px;
+}
+/* spisak kategorija unutar modala */
+.premesti-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 8px;
+    margin: 0;
+}
+.premesti-opcija {
+    text-align: left;
+    padding: 9px 12px;
+    background: none;
+    border: none;
+    border-radius: 6px;
+    color: var(--tekst-glavni);
+    font-size: 14px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+.premesti-opcija:hover { background: var(--pozadina-hover); }
+.premesti-opcija-prazno {
+    color: var(--tekst-sporedni);
+    border-top: 0.5px solid var(--ivica);
+    margin-top: 4px;
+    padding-top: 11px;
+}
+
 /* primarna dugmad — rade na svim temama */
 .btn-primarno {
     display: inline-flex;
@@ -443,6 +538,62 @@ body {
     flex-shrink: 0;
 }
 
+/* klizač (input[type=range]) — ujednačen izgled na svim brauzerima.
+   Chromium ne stilizuje nativni slajder kao Firefox niti popunjava deo pre glave,
+   pa oblik crtamo ručno preko pseudo-elemenata oba motora. */
+.klizac {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 18px;            /* visina klik-zone; sama staza je tanja, crta se u pseudo-elementima */
+    background: transparent;
+    cursor: pointer;
+    --popunjeno: 0%;          /* postavlja JS; Firefox to ne koristi (ima ::-moz-range-progress) */
+}
+/* ——— Chromium/Blink: Opera, Chrome, Edge ——— */
+.klizac::-webkit-slider-runnable-track {
+    height: 6px;
+    border-radius: 999px;
+    /* plavo do --popunjeno, dalje siva staza — tvrdi prelaz na istom procentu */
+    background: linear-gradient(to right,
+        var(--sb-akcent) var(--popunjeno),
+        var(--pozadina-hover) var(--popunjeno));
+}
+.klizac::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    margin-top: -5px;         /* (6px staza − 16px glava) / 2 — centrira glavu na stazu */
+    border-radius: 50%;
+    background: #b0b6be;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+}
+/* ——— Firefox ——— */
+.klizac::-moz-range-track {
+    height: 6px;
+    border-radius: 999px;
+    background: var(--pozadina-hover);
+}
+.klizac::-moz-range-progress {
+    height: 6px;
+    border-radius: 999px;
+    background: var(--sb-akcent);
+}
+.klizac::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    background: #b0b6be;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+}
+/* fokus — suptilan prsten oko glave (bez podrazumevanog outline-a) */
+.klizac:focus { outline: none; }
+.klizac:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.25); }
+.klizac:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.25); }
+
 /* input polja — konzistentna za sve teme */
 input[type="text"],
 input[type="email"],

web/static/js/ntech.js

@@ -257,3 +257,30 @@ document.addEventListener('alpine:init', () => {
 // za prvo učitavanje (defer script) — sprečava animaciju podmenia koji su inicijalno otvoreni
 ntechInicijalizujPodmeni()
 ntechDodajPodmeniListenere()
+
+// klizač (input[type=range].klizac): popunjava plavom deo pre glave u Chromium-u
+// preko CSS promenljive --popunjeno. Firefox to radi sam (::-moz-range-progress).
+function ntechAzurirajKlizac(el) {
+    var min = parseFloat(el.min) || 0
+    var max = parseFloat(el.max)
+    if (isNaN(max)) max = 100
+    var v = parseFloat(el.value) || 0
+    var procenat = max > min ? ((v - min) / (max - min)) * 100 : 0
+    el.style.setProperty('--popunjeno', procenat + '%')
+}
+function ntechInicijalizujKlizace() {
+    document.querySelectorAll('input[type="range"].klizac').forEach(ntechAzurirajKlizac)
+}
+(function() {
+    if (window._ntechKlizacDodato) return
+    window._ntechKlizacDodato = true
+    // delegirani listener — hvata i klizače ubačene kasnije (HTMX swap)
+    document.addEventListener('input', function(e) {
+        var t = e.target
+        if (t && t.classList && t.classList.contains('klizac')) ntechAzurirajKlizac(t)
+    })
+    // početno popunjavanje: posle učitavanja, posle HTMX swap-a i kad Alpine postavi vrednosti
+    document.addEventListener('DOMContentLoaded', ntechInicijalizujKlizace)
+    document.addEventListener('htmx:afterSettle', ntechInicijalizujKlizace)
+    document.addEventListener('alpine:initialized', ntechInicijalizujKlizace)
+})()

web/templates/stranice/magacin.html

@@ -20,33 +20,7 @@
     .magacin-kartica:nth-child(4) { animation-delay: 0.22s; }
     .magacin-kartica:nth-child(5) { animation-delay: 0.28s; }
 
-    /* padajući meni za premeštanje artikla u drugu kategoriju */
-    .premesti-meni summary { list-style: none; }
-    .premesti-meni summary::-webkit-details-marker { display: none; }
-    .premesti-meni .premesti-panel {
-        margin-top: 6px;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        background: var(--pozadina);
-        border: 0.5px solid var(--ivica);
-        border-radius: 8px;
-        padding: 4px;
-        min-width: 150px;
-    }
-    .premesti-opcija {
-        text-align: left;
-        padding: 7px 10px;
-        background: none;
-        border: none;
-        border-radius: 6px;
-        color: var(--tekst-glavni);
-        font-size: 13px;
-        cursor: pointer;
-        white-space: nowrap;
-    }
-    .premesti-opcija:hover { background: var(--pozadina-hover); }
-    .premesti-opcija-prazno { color: var(--tekst-sporedni); border-top: 0.5px solid var(--ivica); }
+    /* CSS modala „premesti" je u main.css — mora preživeti HTMX swap (header se ne menja) */
 </style>
 {{end}}
 
@@ -209,13 +183,20 @@
 
 {{/* padajući meni za premeštanje artikla — prima dict {ID, Kategorije}; koristi se i u tabeli i u mobilnoj kartici */}}
 {{define "premestiMeni"}}
-<details class="premesti-meni" style="align-self:center;">
-    <summary class="btn-primarno-malo" style="cursor:pointer;">Premesti</summary>
+<button type="button" class="btn-primarno-malo" style="cursor:pointer;align-self:center;"
+        onclick="document.getElementById('premesti-{{.ID}}').showModal()">Premesti</button>
+{{/* nativni modal — showModal() ga stavlja u „top layer", pa je uvek iznad svega bez obzira na z-index/overflow */}}
+<dialog id="premesti-{{.ID}}" class="premesti-modal" onclick="if(event.target===this)this.close()">
+    {{/* zaglavlje sa dugmetom za zatvaranje; method="dialog" zatvara modal bez slanja */}}
+    <form method="dialog" class="premesti-zaglavlje">
+        <h3>Premesti artikal</h3>
+        <button type="submit" class="premesti-zatvori" aria-label="Zatvori">&times;</button>
+    </form>
     <form method="POST" action="/magacin/premesti/{{.ID}}" class="premesti-panel">
         {{range .Kategorije}}
         <button type="submit" name="kategorija_id" value="{{.ID}}" class="premesti-opcija">{{.Naziv}}</button>
         {{end}}
         <button type="submit" name="kategorija_id" value="" class="premesti-opcija premesti-opcija-prazno">Bez kategorije</button>
     </form>
-</details>
+</dialog>
 {{end}}

web/templates/stranice/podesavanja.html

@@ -47,8 +47,14 @@
             </div>
             {{end}}
             <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
-                <input type="file" name="logo" accept=".png,.jpg,.jpeg,.svg"
-                    style="flex:1;min-width:200px;font-size:13px;color:var(--tekst-sporedni);">
+                <input type="file" id="logo-file" name="logo" accept=".png,.jpg,.jpeg,.svg"
+                    style="display:none;"
+                    onchange="var s=document.getElementById('logo-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
+                <label for="logo-file"
+                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;font-weight:500;">
+                    Izaberi fajl
+                </label>
+                <span id="logo-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                 <button type="submit"
                     style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;"
                     onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
@@ -161,9 +167,15 @@
         {{end}}
         <form method="POST" action="/podesavanja/login-pozadina" enctype="multipart/form-data">
             <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
-            <div style="display:flex;gap:8px;align-items:center;">
-                <input type="file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
-                    style="font-size:13px;color:var(--tekst-sporedni);">
+            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+                <input type="file" id="login-pozadina-file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
+                    style="display:none;"
+                    onchange="var s=document.getElementById('login-pozadina-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
+                <label for="login-pozadina-file"
+                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;font-weight:500;">
+                    Izaberi fajl
+                </label>
+                <span id="login-pozadina-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                 <button type="submit"
                     style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;flex-shrink:0;"
                     onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
@@ -203,7 +215,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                 </div>
                 <input type="range" x-model.number="blurPozadine" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
 
             <!-- slider: zamućenje kartice -->
@@ -213,7 +225,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
                 </div>
                 <input type="range" x-model.number="blurKartice" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
 
             <!-- slider: zatamnjivanje pozadine -->
@@ -223,7 +235,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                 </div>
                 <input type="range" x-model.number="opacity" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
 
             <!-- slider: zatamnjivanje kartice NTech -->
@@ -233,7 +245,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
                 </div>
                 <input type="range" x-model.number="zatamnjenjeKartice" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
 
             <!-- forma za čuvanje stilova -->

web/templates/stranice/podesavanja_izgled.html

@@ -40,9 +40,15 @@
         {{end}}
         <form method="POST" action="/podesavanja/login-pozadina" enctype="multipart/form-data">
             <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
-            <div style="display:flex;gap:8px;align-items:center;">
-                <input type="file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
-                    style="font-size:13px;color:var(--tekst-sporedni);">
+            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+                <input type="file" id="login-pozadina-file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
+                    style="display:none;"
+                    onchange="var s=document.getElementById('login-pozadina-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
+                <label for="login-pozadina-file"
+                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0;font-weight:500;">
+                    Izaberi fajl
+                </label>
+                <span id="login-pozadina-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                 <button type="submit"
                     style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;flex-shrink:0;"
                     onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
@@ -79,7 +85,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                 </div>
                 <input type="range" x-model.number="blurPozadine" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <div style="margin-top:12px;">
                 <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -87,7 +93,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
                 </div>
                 <input type="range" x-model.number="blurKartice" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <div style="margin-top:12px;">
                 <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -95,7 +101,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                 </div>
                 <input type="range" x-model.number="opacity" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <div style="margin-top:12px;">
                 <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -103,7 +109,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
                 </div>
                 <input type="range" x-model.number="zatamnjenjeKartice" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <form method="POST" action="/podesavanja/login-pozadina/stilovi" style="margin-top:16px;">
                 <input type="hidden" name="_csrf" value="{{.CsrfToken}}">

web/templates/stranice/podesavanja_opste.html

@@ -37,8 +37,14 @@
             </div>
             {{end}}
             <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
-                <input type="file" name="logo" accept=".png,.jpg,.jpeg,.svg"
-                    style="flex:1;min-width:200px;font-size:13px;color:var(--tekst-sporedni);">
+                <input type="file" id="logo-file" name="logo" accept=".png,.jpg,.jpeg,.svg"
+                    style="display:none;"
+                    onchange="var s=document.getElementById('logo-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
+                <label for="logo-file"
+                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;font-weight:500;">
+                    Izaberi fajl
+                </label>
+                <span id="logo-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                 <button type="submit"
                     style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;"
                     onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">

web/templates/stranice/profil_tema.html

@@ -106,13 +106,15 @@
 
         <form method="POST" action="/profil/pozadina" enctype="multipart/form-data">
             <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
-            <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;">
                 <input type="file" id="lok-bg-file" name="lokalna_pozadina" accept=".jpg,.jpeg,.png,.webp"
-                    style="display:none;">
+                    style="display:none;"
+                    onchange="var s=document.getElementById('lok-bg-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
                 <label for="lok-bg-file"
-                    style="display:inline-flex;align-items:center;padding:8px 14px;background:var(--pozadina);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;color:var(--tekst-sporedni);cursor:pointer;user-select:none;">
-                    Odaberi sliku
+                    style="display:inline-flex;align-items:center;padding:8px 14px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;user-select:none;font-weight:500;">
+                    Izaberi fajl
                 </label>
+                <span id="lok-bg-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                 <button type="submit"
                     style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;">
                     Otpremi sliku
@@ -156,7 +158,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                 </div>
                 <input type="range" x-model.number="blurPozadine" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <div style="margin-top:12px;">
                 <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -164,7 +166,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blur + 'px'"></span>
                 </div>
                 <input type="range" x-model.number="blur" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <div style="margin-top:12px;">
                 <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -172,7 +174,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                 </div>
                 <input type="range" x-model.number="opacity" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <div style="margin-top:12px;">
                 <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -180,7 +182,7 @@
                     <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="glassOpacity + '%'"></span>
                 </div>
                 <input type="range" x-model.number="glassOpacity" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
             </div>
             <form method="POST" action="/profil/pozadina/stilovi" style="margin-top:16px;">
                 <input type="hidden" name="_csrf" value="{{.CsrfToken}}">

web/templates/teme/podrazumevana/base.html

@@ -54,8 +54,11 @@
       .sidebar .nav-stavka svg { color: rgba(255,255,255,0.95) !important; stroke: rgba(255,255,255,0.95) !important; }
       .sidebar .nav-oznaka { text-shadow: 0 1px 3px rgba(0,0,0,0.8); color: rgba(255,255,255,0.7) !important; }
       .topbar { background: rgba(0,0,0,{{if .AppPozadinaGlassOpacity}}{{.AppPozadinaGlassOpacity}}%{{else}}0.08{{end}}) !important; backdrop-filter: blur({{.AppPozadinaBlur}}px); -webkit-backdrop-filter: blur({{.AppPozadinaBlur}}px); border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
-      .kartica { background: rgba(0,0,0,{{if .AppPozadinaGlassOpacity}}{{.AppPozadinaGlassOpacity}}%{{else}}0.08{{end}}) !important; backdrop-filter: blur({{.AppPozadinaBlur}}px); -webkit-backdrop-filter: blur({{.AppPozadinaBlur}}px); border: 1px solid rgba(255,255,255,0.12) !important; }
+      .kartica, .premesti-modal { background: rgba(0,0,0,{{if .AppPozadinaGlassOpacity}}{{.AppPozadinaGlassOpacity}}%{{else}}0.08{{end}}) !important; backdrop-filter: blur({{.AppPozadinaBlur}}px); -webkit-backdrop-filter: blur({{.AppPozadinaBlur}}px); border: 1px solid rgba(255,255,255,0.12) !important; }
       .kartica p, .kartica span, .kartica h1, .kartica h2, .kartica h3, .kartica h4, .kartica label, .kartica td, .kartica th, .kartica li, .kartica a { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
+      /* modal nasleđuje glass izgled od kartica: providno staklo, beli tekst, lakše zatamnjenje da se slika nazire */
+      .premesti-modal h3, .premesti-modal .premesti-opcija, .premesti-modal .premesti-zatvori { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
+      .premesti-modal[open]::backdrop { background: rgba(0,0,0,0.45) !important; }
       table, th, td { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
       tr { background: rgba(0,0,0,0.2); }
       tr:hover { background: rgba(0,0,0,0.35); }