Dasko/GoNtech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Dashboard: inline stilovi → CSS klase, hover zatamnjuje ikone u glass modu

Browse Source
This commit is contained in:
Dalibor Marković
2026-06-19 02:51:55 +02:00
parent 057c17dcdd
commit a20d2baae2
3 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/main.css
+16
View File
@@ -1121,6 +1121,22 @@ select {
.dash-stat.animiraj:nth-child(4) { animation-delay: 0.23s; } .dash-stat.animiraj:nth-child(4) { animation-delay: 0.23s; }
.dash-stat.animiraj:nth-child(5) { animation-delay: 0.28s; } .dash-stat.animiraj:nth-child(5) { animation-delay: 0.28s; }
/* kartica koja je ujedno i link — zamena za inline text-decoration/display/cursor */
.kartica-link { text-decoration: none; display: block; cursor: pointer; }
/* ikona wrapper na stat karticama dashboarda */
.dash-ikona {
width: 36px; height: 36px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 10px;
transition: filter 0.25s;
}
.dash-ikona-plava { background: #eff2ff; }
.dash-ikona-zelena { background: #f0fdf4; }
.dash-ikona-narandzasta { background: #fff7ed; }
.dash-ikona-crvena { background: #fef2f2; }
.dash-ikona-nebo { background: #f0f9ff; }
/* Bedž statusa servisnog naloga — JEDNO mesto za izgled i boje statusa (lista i detalji). /* Bedž statusa servisnog naloga — JEDNO mesto za izgled i boje statusa (lista i detalji).
Mora biti u main.css: HTMX navigacija odbacuje <head>, pa page <style> ne bi važio. */ Mora biti u main.css: HTMX navigacija odbacuje <head>, pa page <style> ne bi važio. */
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; } .status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; }
web/templates/stranice/dashboard.html
+10 -10
View File
@@ -21,8 +21,8 @@
{{ end }} {{ end }}
<div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6"> <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
<!-- stat kartice --> <!-- stat kartice -->
<a href="/magacin" class="kartica dash-stat animiraj" style="text-decoration:none;display:block;cursor:pointer;"> <a href="/magacin" class="kartica dash-stat animiraj kartica-link">
<div style="width:36px;height:36px;border-radius:8px;background:#eff2ff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;"> <div class="dash-ikona dash-ikona-plava">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4f7ef8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4f7ef8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /> <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
</svg> </svg>
@@ -31,8 +31,8 @@
<div style="font-size:14px;color:var(--tekst-glavni);margin-top:4px;font-weight:500;">Artikala na stanju</div> <div style="font-size:14px;color:var(--tekst-glavni);margin-top:4px;font-weight:500;">Artikala na stanju</div>
</a> </a>
<a href="/servis" class="kartica dash-stat animiraj" style="text-decoration:none;display:block;cursor:pointer;"> <a href="/servis" class="kartica dash-stat animiraj kartica-link">
<div style="width:36px;height:36px;border-radius:8px;background:#f0fdf4;display:flex;align-items:center;justify-content:center;margin-bottom:10px;"> <div class="dash-ikona dash-ikona-zelena">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /> <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
</svg> </svg>
@@ -42,8 +42,8 @@
</a> </a>
{{ if index .Dozvole "dashboard.prihod" }} {{ if index .Dozvole "dashboard.prihod" }}
<a href="/izvestaji" class="kartica dash-stat animiraj" style="text-decoration:none;display:block;cursor:pointer;"> <a href="/izvestaji" class="kartica dash-stat animiraj kartica-link">
<div style="width:36px;height:36px;border-radius:8px;background:#fff7ed;display:flex;align-items:center;justify-content:center;margin-bottom:10px;"> <div class="dash-ikona dash-ikona-narandzasta">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="9" cy="21" r="1" /> <circle cx="9" cy="21" r="1" />
<circle cx="20" cy="21" r="1" /> <circle cx="20" cy="21" r="1" />
@@ -55,8 +55,8 @@
</a> </a>
{{ end }} {{ end }}
<a href="/magacin?kriticni=1" class="kartica dash-stat animiraj" style="text-decoration:none;display:block;cursor:pointer;"> <a href="/magacin?kriticni=1" class="kartica dash-stat animiraj kartica-link">
<div style="width:36px;height:36px;border-radius:8px;background:#fef2f2;display:flex;align-items:center;justify-content:center;margin-bottom:10px;"> <div class="dash-ikona dash-ikona-crvena">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /> <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
<line x1="12" y1="9" x2="12" y2="13" /> <line x1="12" y1="9" x2="12" y2="13" />
@@ -67,8 +67,8 @@
<div style="font-size:14px;color:var(--tekst-glavni);margin-top:4px;font-weight:500;">Kritično niska zaliha</div> <div style="font-size:14px;color:var(--tekst-glavni);margin-top:4px;font-weight:500;">Kritično niska zaliha</div>
</a> </a>
<a href="/podsetnici" class="kartica dash-stat animiraj" style="text-decoration:none;display:block;cursor:pointer;"> <a href="/podsetnici" class="kartica dash-stat animiraj kartica-link">
<div style="width:36px;height:36px;border-radius:8px;background:#f0f9ff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;"> <div class="dash-ikona dash-ikona-nebo">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
<path d="M13.73 21a2 2 0 0 1-3.46 0" /> <path d="M13.73 21a2 2 0 0 1-3.46 0" />
web/templates/teme/podrazumevana/base.html
+1
View File
@@ -57,6 +57,7 @@
.topbar-naslov { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.55); } .topbar-naslov { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.55); }
.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, .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; }
body:not([data-hover]) .kartica:hover { background: rgba(0,0,0,0.38) !important; } body:not([data-hover]) .kartica:hover { background: rgba(0,0,0,0.38) !important; }
body:not([data-hover]) .kartica:hover .dash-ikona { filter: brightness(0.55); }
.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 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.55); } .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 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.55); }
/* naslovi kartica i labele su goli <div> (boju im NE diramo, da namerno obojeni — crveni/akcenat — ostanu) — samo senka da se vide */ /* naslovi kartica i labele su goli <div> (boju im NE diramo, da namerno obojeni — crveni/akcenat — ostanu) — samo senka da se vide */
.kartica div { text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.55); } .kartica div { text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.55); }