/* ============================================================ Ultimate Evolution — Social Club · v2 modern redesign Loads AFTER tableindex.css + ucp.css (this file wins). ============================================================ */ /* CYAN "gaming panel" tema (po screenshotu korisnika, 2026-08-16): tamna plavo-crna pozadina, cyan glavni akcenat (glow pilule/aktivno/linkovi), crveni logo, zlatni bedzevi vozila, zelen novac. Vecina komponenti koristi ove varijable pa se preslika. */ :root{ --bg:#0a0e15; --bg2:#0c1119; --glow1:rgba(34,211,238,.12); --glow2:rgba(34,211,238,.06); --nav-bg:rgba(9,12,18,.9); --card1:#12161f; --card2:#161b26; --card3:#1b2130; --line:#232b39; --line2:#2e3849; --txt:#eaf0f7; --mut:#93a1b5; --mut2:#657085; --acc:#22d3ee; --acc2:#38bdf8; --accsoft:rgba(34,211,238,.14); --cyan:#22d3ee; --cyansoft:rgba(34,211,238,.14); --in:#0d131c; --inln:#243244; --ok:#22c55e; --err:#fb7185; --warn:#fbbf24; --gold:#f0b429; /* Izvedene akcentne varijable (dodano uz "launcher" temu): --acc3 = tamniji partner akcenta u gradijentima (dugmad, aktivni tab) --accrgb = RGB trojka akcenta, za rgba(var(--accrgb),.XX) tonove --onacc = boja teksta koji stoji NA akcentnoj podlozi --mention = boja @spomena u tekstu */ --acc3:#06b6d4; --accrgb:34,211,238; --onacc:#04252c; --mention:#2d88ff; --nav-h:64px; --radius:16px; --shadow:0 18px 40px rgba(0,0,0,.5); --shadow-sm:0 6px 18px rgba(0,0,0,.35); /* Chat widget (float) — teme mijenjaju ove; chat.css ih koristi. */ --cw-win:#141820; --cw-win2:#1b2029; --cw-line:#2a323f; --cw-body:#10141b; --cw-me1:#2563eb; --cw-me2:#1d4ed8; } /* ===================================================================== TEME SOCIJALA — bira ih admin (admin.php -> tab "Teme"), pamte se globalno. Postavljaju se kao data-ue-theme na . Podrazumijevana ("default"/Crimson) je vec definisana u :root iznad; ispod su 4 alternativne "brutalne" teme. Vecina komponenti koristi CSS varijable pa se preslikaju automatski. ===================================================================== */ /* ---- NEON CYBER: magenta + cyan na tamnoljubicastoj ---- */ html[data-ue-theme="cyber"]{ --bg:#080611; --bg2:#05040c; --glow1:rgba(255,43,214,.16); --glow2:rgba(34,211,238,.13); --nav-bg:rgba(8,6,17,.85); --card1:#14122a; --card2:#181535; --card3:#1f1a44; --line:#2c2556; --line2:#3d3470; --txt:#f2ecff; --mut:#a99fce; --mut2:#7a6fa6; --acc:#ff2bd6; --acc2:#b829ff; --accsoft:rgba(255,43,214,.16); --cyan:#22e0ff; --cyansoft:rgba(34,224,255,.16); --in:#0e0b1e; --inln:#2c2556; --ok:#3ee6b0; --err:#ff5c8a; --warn:#ffc64d; --gold:#f5d020; --cw-win:#0e0b1e; --cw-win2:#151130; --cw-line:#2c2556; --cw-body:#0a0818; --cw-me1:#b829ff; --cw-me2:#ff2bd6; --acc3:#b829ff; --accrgb:255,43,214; --onacc:#1a0620; --mention:#22e0ff; } /* ---- MATRIX: hakerska zelena na crnoj ---- */ html[data-ue-theme="matrix"]{ --bg:#020604; --bg2:#010301; --glow1:rgba(0,255,133,.13); --glow2:rgba(57,255,20,.08); --nav-bg:rgba(2,6,4,.88); --card1:#08120b; --card2:#0b1810; --card3:#0f2016; --line:#123a22; --line2:#1c4d30; --txt:#d7ffe6; --mut:#6fbf8e; --mut2:#4b8c66; --acc:#00ff85; --acc2:#00c853; --accsoft:rgba(0,255,133,.15); --cyan:#39ff14; --cyansoft:rgba(57,255,20,.14); --in:#06110a; --inln:#123a22; --ok:#39ff14; --err:#ff5b5b; --warn:#eaff00; --gold:#b6ff00; --cw-win:#06110a; --cw-win2:#0b1810; --cw-line:#123a22; --cw-body:#040d07; --cw-me1:#00c853; --cw-me2:#00ff85; --acc3:#00c853; --accrgb:0,255,133; --onacc:#04180d; --mention:#39ff14; } /* ---- ROYAL GOLD: duboka mornarska + zlatna, luksuz ---- */ html[data-ue-theme="gold"]{ --bg:#0a0d16; --bg2:#070912; --glow1:rgba(246,196,83,.11); --glow2:rgba(122,162,255,.08); --nav-bg:rgba(10,13,22,.85); --card1:#12172a; --card2:#161c33; --card3:#1c2340; --line:#2a3352; --line2:#3a4670; --txt:#f5f1e4; --mut:#b3b28f; --mut2:#8a8a76; --acc:#f6c453; --acc2:#e0a020; --accsoft:rgba(246,196,83,.15); --cyan:#7aa2ff; --cyansoft:rgba(122,162,255,.15); --in:#0d1120; --inln:#2a3352; --ok:#5fd6a0; --err:#ef8f7a; --warn:#f6c453; --gold:#f6c453; --cw-win:#0d1120; --cw-win2:#161c33; --cw-line:#2a3352; --cw-body:#0a0d18; --cw-me1:#e0a020; --cw-me2:#f6c453; --acc3:#e0a020; --accrgb:246,196,83; --onacc:#241a06; --mention:#7aa2ff; } /* ---- INFERNO: brutalna vatra crveno/narandzasto na uglju ---- */ html[data-ue-theme="inferno"]{ --bg:#0b0705; --bg2:#070302; --glow1:rgba(255,87,34,.18); --glow2:rgba(255,45,0,.11); --nav-bg:rgba(11,7,5,.88); --card1:#1a0f0a; --card2:#211410; --card3:#2b1a14; --line:#4a2418; --line2:#6b3320; --txt:#ffeee6; --mut:#c79a86; --mut2:#966d5c; --acc:#ff5722; --acc2:#ff2d00; --accsoft:rgba(255,87,34,.17); --cyan:#ffb300; --cyansoft:rgba(255,179,0,.15); --in:#160c08; --inln:#4a2418; --ok:#ffb300; --err:#ff5b5b; --warn:#ffd000; --gold:#ffb300; --cw-win:#160c08; --cw-win2:#211410; --cw-line:#4a2418; --cw-body:#100805; --cw-me1:#ff2d00; --cw-me2:#ff5722; --acc3:#ff2d00; --accrgb:255,87,34; --onacc:#2a0c04; --mention:#ffb300; } /* ---- LAUNCHER: crveno/ugljena tema iz UE launchera (paleta UiTheme.cs) ---- */ html[data-ue-theme="launcher"]{ --bg:#0B0809; --bg2:#080607; --glow1:rgba(216,30,53,.13); --glow2:rgba(139,15,32,.10); --nav-bg:rgba(13,9,10,.92); --card1:#140E10; --card2:#181113; --card3:#1B1416; --line:#2B1E22; --line2:#3A282D; --txt:#F2ECEE; --mut:#95868B; --mut2:#5E5257; --acc:#D81E35; --acc2:#8B0F20; --accsoft:rgba(216,30,53,.14); --acc3:#B0142A; --accrgb:216,30,53; --onacc:#fff; --mention:#FF8A9B; --cyan:#FF3A51; --cyansoft:rgba(255,58,81,.14); --in:#120C0E; --inln:#2B1E22; --ok:#3FD07A; --err:#FF6B6B; --warn:#FF922E; --gold:#F0B429; --cw-win:#140E10; --cw-win2:#1B1416; --cw-line:#2B1E22; --cw-body:#0E0A0B; --cw-me1:#D81E35; --cw-me2:#8B0F20; } /* ===================================================================== SVIJETLA (bijela) TEMA — prebacuje se dugmetom u navigaciji (data-theme). Vecina komponenti koristi CSS varijable pa se preslikaju automatski; ispod su i ciljane korekcije za hardkodirane tamne povrsine. ===================================================================== */ /* Svjetla tema UKLONJENA — social je uvijek tamni. */ /* zastita od prebrzog mijenjanja teme: dugme kratko onemoguceno */ .ue-theme-toggle.is-busy,.ue-theme-toggle[disabled]{opacity:.5; cursor:not-allowed; pointer-events:none;} *{scrollbar-color:var(--line2) transparent;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:20px;border:2px solid transparent;background-clip:padding-box;} ::-webkit-scrollbar-thumb:hover{background:var(--mut2);background-clip:padding-box;} html,body{min-height:100%;} /* Solid canvas so nothing gray shows when scrolled past the body (below footer). */ html{background:var(--bg) !important;} body{ background:var(--bg) !important; background-image: radial-gradient(1200px 600px at 15% -10%, var(--glow1), transparent 60%), radial-gradient(1000px 600px at 100% 0%, var(--glow2), transparent 55%), linear-gradient(180deg,var(--bg),var(--bg2)) !important; background-attachment:fixed !important; color:var(--txt); font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif !important; margin:0; padding:0 0 44px !important; overflow-x:hidden; -webkit-font-smoothing:antialiased; } a{transition:color .15s ease;} div#wrapper{width:auto !important; max-width:1180px !important; margin:0 auto !important; padding:22px 16px 0 !important;} /* ============================================================ TOP NAV ============================================================ */ .ue-nav{position:sticky; top:0; left:0; width:100%; z-index:2000; background:var(--nav-bg); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line);} .ue-nav-inner{max-width:1400px; margin:0 auto; min-height:var(--nav-h); display:flex; align-items:center; gap:18px; padding:8px 26px; flex-wrap:nowrap;} .ue-logo{flex:0 0 auto; display:flex; align-items:center; gap:11px; font-weight:800; font-size:16px; letter-spacing:.4px; color:#fff; text-decoration:none;} /* Logo je crveni zaobljeni kvadrat sa ikonom dzojstika (kao na screenshotu). */ .ue-logo .dot{width:40px; height:40px; border-radius:12px; background:linear-gradient(140deg,#ff5b3a,#e0342b); border:0; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; color:#fff; box-shadow:0 5px 16px rgba(224,52,43,.45);} .ue-tabs{display:flex; gap:2px; align-items:center; flex-wrap:wrap; min-width:0; margin:0 auto;} .ue-nav .ue-tab{background:transparent; border:0; color:var(--mut) !important; font-size:14px; font-weight:600; padding:9px 15px; border-radius:10px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-family:inherit; white-space:nowrap; transition:background .18s ease,color .18s ease,box-shadow .18s ease;} .ue-nav .ue-tab i{color:var(--acc); font-size:13px;} .ue-nav .ue-tab:hover{color:#fff !important; background:rgba(var(--accrgb),.08); text-decoration:none;} /* Aktivni tab = svijetli cyan "glow" taster (kao Social Club na screenshotu). */ .ue-nav .ue-tab.active{color:var(--onacc) !important; background:linear-gradient(135deg,var(--cyan),var(--acc3)); box-shadow:0 0 18px rgba(var(--accrgb),.5); text-decoration:none;} .ue-nav .ue-tab.active i{color:var(--onacc);} .ue-nav-toggle{display:none; margin-left:auto; background:rgba(255,255,255,.05); border:1px solid var(--line2); color:#fff; width:42px; height:42px; border-radius:11px; font-size:18px; cursor:pointer; align-items:center; justify-content:center;} .ue-nav-right{flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:12px; position:relative;} .ue-search{position:relative;} #search.ue-search input,.ue-search input{position:static !important; top:auto !important; background:var(--in) !important; border:1px solid var(--inln); color:var(--txt) !important; border-radius:10px; height:38px; width:220px; max-width:52vw; padding:6px 14px; font-size:13px; outline:none; text-align:left; box-sizing:border-box; margin:0; transition:border-color .15s, box-shadow .15s;} .ue-search input::placeholder{color:var(--mut2);} .ue-search input:focus{border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyansoft);} .ue-search .result{position:absolute; z-index:2500; top:calc(100% + 8px); left:0; width:100%; background:var(--card2); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);} .ue-search .result p{margin:0; padding:10px 14px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--txt); cursor:pointer; font-size:13px;} .ue-search .result p:first-child{border-top:0;} .ue-search .result p:hover{background:var(--accsoft); color:#fff;} .ue-logout{color:var(--acc); font-weight:600; font-size:13px; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:9px; border:1px solid transparent;} .ue-logout:hover{color:#fff; background:rgba(var(--accrgb),.14); border-color:rgba(var(--accrgb),.35); text-decoration:none;} /* ============================================================ PROFILE LAYOUT ============================================================ */ #obavestenja{background:transparent !important; border:0 !important; padding:0 !important; overflow:visible !important; display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; margin:0 auto !important;} /* ---------- LEFT CARD (player stats) ---------- */ #levo{float:none !important; width:320px !important; flex:0 0 320px; margin:0 !important; position:relative; background:linear-gradient(160deg,var(--card1),var(--card2)); border:1px solid var(--line); border-radius:var(--radius); overflow:visible; box-shadow:var(--shadow);} #levo>table{width:100% !important; border-collapse:collapse;} /* First table = name header / online badge / notifications bell */ #levo>table:first-of-type th{ background:linear-gradient(135deg,rgba(var(--accrgb),.16),rgba(var(--accrgb),.10)) !important; color:#fff !important; font-size:16px !important; font-weight:800 !important; letter-spacing:.3px; text-shadow:none !important; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:var(--radius) var(--radius) 0 0; padding:16px 14px !important; position:relative;} #levo>table:first-of-type th font{font-weight:700;} #levo>table:first-of-type th font[color="red"]{color:#fb7185 !important; font-size:12px; background:rgba(251,113,133,.14); padding:2px 8px; border-radius:20px; margin-left:4px;} /* BANNED oznaka preko skina (igrac banovan na SA-MP serveru). */ /* Avatar u cistom tamnom zaobljenom okviru (bez uglova — na zahtjev korisnika). */ .ue-skinwrap{position:relative; display:block; width:-moz-fit-content; width:fit-content; margin:8px auto 2px; padding:12px 20px; background:var(--in); border:1px solid var(--line2); border-radius:16px;} /* Suptilna "circuit" tekstura u gornjem desnom uglu kartice (kao na screenshotu). */ #levo::after{content:""; position:absolute; top:0; right:0; width:150px; height:150px; pointer-events:none; z-index:0; background-image: repeating-linear-gradient(45deg, rgba(var(--accrgb),.06) 0 1px, transparent 1px 13px), repeating-linear-gradient(-45deg, rgba(var(--accrgb),.06) 0 1px, transparent 1px 13px); -webkit-mask:linear-gradient(215deg,#000,transparent 72%); mask:linear-gradient(215deg,#000,transparent 72%); border-radius:0 var(--radius) 0 0;} .ue-banned{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-12deg); background:rgba(220,38,38,.92); color:#fff; font-weight:900; letter-spacing:2px; font-size:20px; padding:6px 16px; border:2px solid #fff; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.5); text-shadow:1px 1px 0 #7f1d1d; pointer-events:none; white-space:nowrap;} /* Online/Offline badge. Boju NE forsiramo ovdje (bila je zelena !important za oba stanja) — nego je odredjuje klasa is-on (zeleno) / is-off (crveno). */ #levo>table:first-of-type th font.onbadge{font-size:12px; padding:2px 8px; border-radius:20px; margin-left:4px;} #levo>table:first-of-type th font.onbadge.is-on{color:#22c55e !important; background:rgba(34,197,94,.16);} #levo>table:first-of-type th font.onbadge.is-off{color:#ef4444 !important; background:rgba(239,68,68,.16);} /* ---- Facebook-stil traka reakcija (hover na Like) ---- */ .ue-reactbar{position:absolute; z-index:7000; display:none; gap:4px; padding:6px 8px; background:var(--card2); border:1px solid var(--line); border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.5); transform:translateY(6px) scale(.9); opacity:0; transition:transform .14s ease, opacity .14s ease;} .ue-reactbar.show{transform:translateY(0) scale(1); opacity:1;} .ue-reactbar .rx{border:0; background:transparent; cursor:pointer; font-size:24px; line-height:1; padding:2px 3px; border-radius:50%; transition:transform .12s ease;} .ue-reactbar .rx:hover{transform:scale(1.45) translateY(-3px);} .likedislike .btn.reacted{font-weight:800;} .likedislike .rx-e{font-size:14px; vertical-align:-2px; font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;} /* ---- Prijatelji tab: status tackica poslije imena + izbaci dugme ---- */ .friend-dot{display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle; margin-left:4px;} .friend-dot.on{background:#34d399; box-shadow:0 0 5px rgba(52,211,153,.85);} .friend-dot.off{background:#f04a5d; box-shadow:0 0 5px rgba(240,74,93,.6);} .friend-remove{position:absolute; top:4px; right:8px; z-index:4; font-size:20px; line-height:1; color:#fb7185; cursor:pointer; opacity:.55; transition:opacity .15s, transform .15s;} .friend-remove:hover{opacity:1; transform:scale(1.15); color:#ff4b5c;} #notifimg{cursor:pointer; vertical-align:middle; margin-left:8px; width:18px; opacity:.85; font-size:17px; color:#fff; line-height:1;} #notifimg:hover{opacity:1; color:#ffe08a;} /* Bell blinks while there are unread notifications */ #notifimg.blink{animation:notifblink 1s ease-in-out infinite; opacity:1;} @keyframes notifblink{0%,100%{transform:scale(1); filter:drop-shadow(0 0 0 rgba(var(--accrgb),0));} 50%{transform:scale(1.22); filter:drop-shadow(0 0 6px rgba(var(--accrgb),.95));}} /* Small unread counter badge on the bell */ .notifwrap{position:relative; display:inline-block;} #notifcount{position:absolute; top:-8px; right:-9px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; font-size:10px; font-weight:800; line-height:16px; border-radius:999px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.5); display:none;} /* Skin avatar */ #levo img[src*="skins/"]{max-width:120px; height:auto; display:block; margin:6px auto 4px; filter:drop-shadow(0 12px 18px rgba(0,0,0,.6));} #levo>table:nth-of-type(2) tr:first-child td{padding-top:14px !important;} /* Like / dislike pills — kao na screenshotu: Like = svijetli cyan, Dislike = tamna neutralna */ #profilelikes,#profiledislikes{border-radius:999px !important; font-weight:700; padding:5px 16px !important; font-size:12px !important; border:0 !important; margin:2px;} #profilelikes{background:linear-gradient(135deg,var(--cyan),var(--acc3)) !important; color:var(--onacc) !important; box-shadow:0 0 16px rgba(var(--accrgb),.4);} #profiledislikes{background:var(--card3) !important; color:var(--mut) !important; box-shadow:inset 0 0 0 1px var(--line2);} /* Stat rows: label left (muted), value right (accent) */ #levo td{overflow:hidden; border-bottom:1px solid rgba(255,255,255,.045); padding:9px 16px !important;} #levo>table:nth-of-type(2) tr:last-child td{border-bottom:0;} #levo p#statsinfo1{color:var(--mut) !important; display:block; float:left; margin:0; padding:0; font-size:12.5px !important; font-weight:600; text-transform:uppercase; letter-spacing:.3px;} #levo p#statsinfo{color:var(--txt) !important; display:block; float:right; margin:0; padding:0; font-size:13px !important; font-weight:700; text-align:right; max-width:60%; word-break:break-word;} #levo p#statsinfo font{color:var(--cyan) !important;} #levo p#statsinfo.stats-money{color:#4caf50 !important;} #levo tr:hover td{background:rgba(255,255,255,.02);} /* ---------- CENTER (tabs + content) ---------- */ #centarprofil{float:none !important; flex:1 1 540px; min-width:0; width:auto !important;} #centarprofil .container{width:auto !important; max-width:100% !important; padding:0 !important;} .tab-content{background:linear-gradient(160deg,var(--card1),var(--card2)); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--radius) var(--radius); padding:20px; box-shadow:var(--shadow); overflow-x:auto;} /* Tabs */ .nav-tabs{border:0 !important; display:flex; flex-wrap:wrap; gap:4px; background:linear-gradient(160deg,var(--card1),var(--card2)); border:1px solid var(--line) !important; border-bottom:0 !important; border-radius:var(--radius) var(--radius) 0 0; padding:10px 10px 0; margin:0;} .nav-tabs>li{float:none; margin:0;} .nav-tabs>li>a{border:0 !important; margin:0; color:var(--mut) !important; background:transparent !important; border-radius:9px 9px 0 0 !important; padding:9px 15px; font-weight:600; font-size:13.5px; transition:background .15s,color .15s;} .nav-tabs>li>a:hover{background:rgba(255,255,255,.06) !important; color:#fff !important;} .nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{ color:#fff !important; background:linear-gradient(135deg,var(--acc),var(--acc2)) !important; border:0 !important; box-shadow:0 6px 16px rgba(var(--accrgb),.3);} /* ---------- Status / blockquote ---------- */ .tab-content blockquote,#statusesarea blockquote,#novosti blockquote,.signature blockquote{ background:var(--card3); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 14px; color:var(--txt); transition:opacity .35s ease, transform .35s ease, max-height .4s ease, margin .35s ease, padding .35s ease;} .tab-content blockquote blockquote{background:rgba(0,0,0,.28); border-color:var(--line2); margin-top:12px;} .postername a{color:var(--cyan) !important; font-weight:700;} .statusdate{color:var(--mut2);} /* smooth removal state (JS adds .removing before deleting node) */ blockquote.removing{opacity:0 !important; transform:translateX(24px) scale(.98); max-height:0 !important; margin-top:0 !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; overflow:hidden;} /* smooth "just added" state (JS adds .adding, then removes it next frame) */ blockquote.adding{opacity:0; transform:translateY(-14px) scale(.98); overflow:hidden; padding-top:0 !important; padding-bottom:0 !important; margin-bottom:0 !important;} /* Post box */ #postbox{background:var(--card3); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:8px;} #postmenubtn{background:var(--in); border:1px solid var(--inln); color:var(--txt); border-radius:7px;} #postmenubtn:hover{border-color:var(--acc); color:var(--acc);} textarea.statustext,textarea.commenttext,.statustext,.commenttext,#signform textarea{ width:100% !important; max-width:100% !important; box-sizing:border-box; background:var(--in) !important; border:1px solid var(--inln) !important; color:var(--txt) !important; border-radius:12px; padding:12px;} textarea:focus{border-color:var(--cyan) !important; box-shadow:0 0 0 3px var(--cyansoft);} #statusbtn,.commentbtn .btn,#signform button{background:linear-gradient(135deg,var(--acc),var(--acc2)) !important; border:0 !important; color:#fff !important; font-weight:700; border-radius:10px !important;} #statusbtn:hover,.commentbtn .btn:hover,#signform button:hover{filter:brightness(1.08);} /* ---------- Notifications dropdown ---------- */ #notification{position:absolute; right:8px; z-index:2600; background:var(--card2); border:1px solid var(--line); border-radius:14px; width:300px; max-width:92vw; height:auto; max-height:460px; display:none; overflow:hidden; box-shadow:var(--shadow); opacity:1; text-align:left;} #notheader{background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; border:0; border-radius:14px 14px 0 0; padding:11px 14px; margin:0; font-weight:800; letter-spacing:.4px;} #notarea{height:auto; max-height:400px; overflow:auto; padding:4px 0;} #notarea .notitem{position:relative; border-bottom:1px solid var(--line); padding:10px 30px 10px 14px; font-size:13px; color:var(--txt); line-height:1.5;} #notarea .notitem:last-child{border-bottom:0;} #notarea .notitem.unread{background:var(--cyansoft);} #notarea .notitem .who{color:var(--cyan); font-weight:700;} #notarea .notitem .who a{color:var(--cyan) !important; text-decoration:none;} #notarea .notitem .when{display:block; color:var(--mut2); font-size:11px; margin-top:3px;} /* Delete-one (x) button on each notification */ #notarea .notitem .notx{position:absolute; top:8px; right:9px; color:var(--mut2); font-size:15px; font-weight:800; line-height:1; cursor:pointer; opacity:.5; transition:opacity .15s,color .15s;} #notarea .notitem .notx:hover{opacity:1; color:var(--err);} /* Accept friend-request button inside a notification */ #notarea .notitem .notaccept{display:inline-flex; align-items:center; gap:6px; margin-top:7px; padding:5px 12px; border:0; border-radius:8px; cursor:pointer; font-family:inherit; font-weight:700; font-size:12px; color:#fff; background:linear-gradient(135deg,var(--cyan),var(--acc3));} #notarea .notitem .notaccept:hover{filter:brightness(1.08);} #notarea .notitem .notaccept[disabled]{background:linear-gradient(135deg,#22c55e,#16a34a); cursor:default; opacity:.95;} /* Prihvati/Odbij red + rezultat */ #notarea .notitem .notactions{display:flex; gap:7px; margin-top:7px; flex-wrap:wrap;} #notarea .notitem .notdecline{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:0; border-radius:8px; cursor:pointer; font-family:inherit; font-weight:700; font-size:12px; color:#fff; background:linear-gradient(135deg,#fb7185,#e11d48);} #notarea .notitem .notdecline:hover{filter:brightness(1.08);} #notarea .notitem .notactions button[disabled]{opacity:.6; cursor:default;} #notarea .notitem .notdone{display:inline-flex; align-items:center; gap:6px; margin-top:7px; font-weight:700; font-size:12px; color:#22c55e;} #notarea .notitem .notdone.declined{color:#fb7185;} /* Notifikacija sa deep-linkom (klik vodi do komentara) */ #notarea .notitem.haslink{cursor:pointer;} #notarea .notitem.haslink:hover{background:rgba(var(--accrgb),.10);} /* Kratko oznaci komentar na koji smo dosli iz notifikacije */ .notif-highlight{outline:2px solid var(--cyan); outline-offset:2px; box-shadow:0 0 0 4px rgba(var(--accrgb),.18); border-radius:8px; transition:box-shadow .4s, outline-color .4s; animation:notifpulse 1s ease-in-out 2;} @keyframes notifpulse{0%,100%{box-shadow:0 0 0 4px rgba(var(--accrgb),.18);} 50%{box-shadow:0 0 0 8px rgba(var(--accrgb),.32);}} #notarea .notitem.removing{opacity:0; transition:opacity .3s ease;} #nonewnot{text-align:center; padding:14px;} #nonewnot a{color:var(--mut); cursor:pointer;} #nonewnot a:hover{color:#fff;} /* ---------- Reusable "head" avatar cut from a full-body 113x140 skin ---------- Skinovi su portret cijelog tijela; glava je horizontalno centrirana u platnu, pa je translateX(-50%) uvijek centrira. Zumiramo na glavu+ramena. Koristi se za prijatelje, potpis (Carbon) i chat. Radi na bilo kojoj kvadratnoj velicini. */ .skin-head{position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--line2); background:var(--in); flex:0 0 auto;} .skin-head img{position:absolute; left:50%; top:-4%; width:222%; height:auto; max-width:none; transform:translateX(-50%); display:block;} /* ---------- FRIENDS ---------- */ #prijatelji{display:flex; flex-wrap:wrap; gap:14px;} .friend{width:230px; max-width:100%; background:var(--card3); border:1px solid var(--line); border-radius:14px; padding:14px; position:relative; transition:border-color .2s, transform .2s; cursor:pointer; display:flex; align-items:center; gap:12px;} .friend:hover{border-color:var(--acc); transform:translateY(-2px);} .friend .friendimg{height:56px; width:56px; min-width:56px;} .friend .friendmeta{display:flex; flex-direction:column; gap:2px; min-width:0;} .friendname{color:var(--cyan) !important; position:static; display:block; padding:0; font-weight:700;} .friendinfo{color:var(--mut) !important; position:static; display:block; padding:0; font-size:12px; margin-top:2px;} /* Add-friend button (left card) */ .ue-friendbtn-wrap{padding:12px 16px 4px; text-align:center;} .ue-friendbtn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:10px 14px; border-radius:11px; border:0; cursor:pointer; font-weight:700; font-size:13.5px; font-family:inherit; color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2)); box-shadow:0 6px 16px rgba(var(--accrgb),.28); transition:filter .15s, transform .15s;} .ue-friendbtn:hover{filter:brightness(1.08);} .ue-friendbtn:active{transform:scale(.98);} .ue-friendbtn.is-friends{background:linear-gradient(135deg,#22c55e,#16a34a); box-shadow:0 6px 16px rgba(34,197,94,.28); cursor:default;} .ue-friendbtn.is-pending{background:var(--card3); color:var(--mut); border:1px solid var(--line2); box-shadow:none; cursor:default;} .ue-friendbtn.is-accept{background:linear-gradient(135deg,var(--cyan),var(--acc3));} .ue-friendbtn[disabled]{opacity:.9;} /* Blokiraj / Odblokiraj dugme */ .ue-blockbtn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:8px 14px; border-radius:11px; cursor:pointer; font-weight:700; font-size:13px; font-family:inherit; color:var(--mut); background:var(--card3); border:1px solid var(--line2); transition:filter .15s, transform .15s, color .15s;} .ue-blockbtn:hover{color:#fff; border-color:rgba(251,113,133,.5); background:rgba(251,113,133,.12);} .ue-blockbtn:active{transform:scale(.98);} .ue-blockbtn.is-blocked{color:#fff; background:linear-gradient(135deg,#fb7185,#e11d48); border-color:transparent;} .ue-blockbtn[disabled]{opacity:.7; cursor:default;} /* ---------- SIGNATURE BANNER (Potpisi) ---------- */ .sig-wrap{display:flex; flex-direction:column; align-items:center; gap:14px;} .sig-banner{position:relative; width:100%; max-width:520px; min-height:190px; border-radius:16px; overflow:hidden; border:1px solid var(--line2); box-shadow:var(--shadow); background: radial-gradient(600px 200px at 90% 120%, rgba(var(--accrgb),.18), transparent 60%), radial-gradient(500px 200px at 0% -20%, rgba(var(--accrgb),.28), transparent 60%), linear-gradient(135deg,var(--card2),var(--bg2)); display:flex; align-items:stretch;} .sig-banner::before{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px); pointer-events:none;} .sig-skin{flex:0 0 150px; position:relative; display:flex; align-items:flex-end; justify-content:center; background:radial-gradient(120px 120px at 50% 40%, rgba(var(--accrgb),.25), transparent 70%);} .sig-skin img{height:170px; width:auto; filter:drop-shadow(0 14px 16px rgba(0,0,0,.65)); margin-bottom:4px;} .sig-body{flex:1 1 auto; padding:16px 18px; display:flex; flex-direction:column; gap:2px; position:relative; z-index:1; min-width:0;} .sig-name{font-size:20px; font-weight:800; letter-spacing:.3px; color:#fff; margin-bottom:2px; text-shadow:0 2px 10px rgba(0,0,0,.5); word-break:break-word;} .sig-org{font-size:12.5px; color:var(--cyan); font-weight:700; margin-bottom:10px;} .sig-org .rank{color:var(--mut);} .sig-stats{display:grid; grid-template-columns:1fr 1fr; gap:7px 14px;} .sig-stat{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--txt); min-width:0;} .sig-stat i{width:16px; text-align:center; color:var(--acc);} .sig-stat b{color:#fff; font-weight:700;} .sig-badge{position:absolute; top:12px; right:14px; z-index:2; font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2)); padding:4px 10px; border-radius:999px; box-shadow:0 4px 12px rgba(var(--accrgb),.4);} .sig-foot{width:100%; max-width:520px; color:var(--mut); font-size:12px; text-align:center; line-height:1.6;} .sig-divider{width:100%; max-width:520px; display:flex; align-items:center; gap:12px; color:var(--mut2); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin:6px 0 2px;} .sig-divider::before,.sig-divider::after{content:""; flex:1; height:1px; background:var(--line);} #signform{width:100%; max-width:520px;} #signform button{margin-top:8px; padding:9px 20px; border-radius:10px; cursor:pointer;} .signature{width:100%; max-width:520px; margin-top:6px;} .ue-empty{color:var(--mut); text-align:center; padding:28px 12px; font-size:14px;} /* ---------- NOT FOUND ---------- */ .ue-notfound{max-width:520px; margin:40px auto; text-align:center; padding:40px 28px; background:linear-gradient(160deg,var(--card1),var(--card2)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);} .ue-notfound .nf-ico{font-size:52px; color:var(--acc); margin-bottom:14px;} .ue-notfound h2{color:#fff; font-size:22px; font-weight:800; margin:0 0 8px;} .ue-notfound p{color:var(--mut); font-size:14px; margin:0 0 20px; line-height:1.6;} .ue-notfound .nf-name{color:var(--cyan); font-weight:700;} .ue-searchbox{display:flex; gap:8px; max-width:360px; margin:0 auto;} .ue-searchbox input{flex:1; background:var(--in); border:1px solid var(--inln); color:var(--txt); border-radius:10px; padding:11px 14px; font-size:14px; outline:none; text-align:left;} .ue-searchbox input:focus{border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyansoft);} .ue-btn{background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; border:0; border-radius:10px; padding:11px 20px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:filter .15s;} .ue-btn:hover{filter:brightness(1.08); color:#fff; text-decoration:none;} /* ---------- Login / search card (shared) ---------- */ #ucpformbg{background:linear-gradient(160deg,var(--card1),var(--card2)) !important; border:1px solid var(--line) !important; width:360px !important; max-width:92vw; padding:28px 24px !important; margin:40px auto !important; text-align:center; border-radius:var(--radius) !important; box-shadow:var(--shadow);} #ucpform{width:100% !important; max-width:280px; margin:auto; text-align:center;} #ucpform label,#lgninfo{color:var(--mut); font-weight:600;} #lgninfo{color:var(--gold) !important; margin-bottom:14px;} #ucpform input[type=text],#ucpform input[type=password]{width:100%; box-sizing:border-box; background:var(--in); border:1px solid var(--inln); color:var(--txt); border-radius:10px; padding:11px 14px; margin:6px 0; text-align:left; outline:none;} #ucpform input:focus{border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyansoft);} #loginbtn,#prikaz{width:auto !important; min-width:130px; margin-top:14px !important; background:linear-gradient(135deg,var(--acc),var(--acc2)); border:0; color:#fff; font-weight:700; border-radius:10px; padding:11px 20px; cursor:pointer;} #loginbtn:hover,#prikaz:hover{filter:brightness(1.08);} #ucpform a{color:var(--cyan); font-size:13px; display:inline-block; margin-top:12px;} /* ============================================================ DATA TABLES (imovina / donacije) — fix broken layout ============================================================ */ #centarprofil table,#imovina table,#DonTable{width:100% !important; border-collapse:collapse; margin:0 0 14px; font-size:13px;} #DonTable{max-width:100%;} #imovina th,#DonTable th,#centarprofil .tab-content > table th{ background:linear-gradient(135deg,rgba(var(--accrgb),.16),rgba(var(--accrgb),.10)) !important; color:#fff !important; border:1px solid var(--line) !important; padding:9px 10px !important; text-shadow:none !important; font-weight:700;} #imovina td,#DonTable td{border:1px solid var(--line); padding:8px 10px; color:var(--txt); background:rgba(255,255,255,.015);} #DonTable tr:hover td{background:rgba(255,255,255,.04);} #DonTable img,.okvir{max-width:100%; height:auto; border-radius:8px;} .okvir{border:1px solid var(--line2);} /* Donacije form */ #donatecont{background:var(--card3) !important; border:1px solid var(--line) !important; border-radius:14px !important; width:100% !important; max-width:460px; box-sizing:border-box; margin:16px auto !important; padding:20px !important;} #donateform > p{color:var(--cyan) !important;} #donateform label{color:var(--mut) !important;} #donateform input,#donateform select{width:100% !important; box-sizing:border-box; background:var(--in) !important; border:1px solid var(--inln) !important; color:var(--txt) !important; border-radius:9px; padding:9px 12px; text-align:left;} #donateform button,#donatebtn{width:auto !important; min-width:140px; background:linear-gradient(135deg,var(--acc),var(--acc2)) !important; border:0 !important; color:#fff !important; font-weight:700; border-radius:10px; padding:10px 20px; cursor:pointer;} .warnmsg{color:var(--err) !important; font-size:14px !important;} .approved{color:var(--ok) !important;} .waiting{color:var(--gold) !important;} .rejected{color:var(--err) !important;} /* Property images */ .smallimg{cursor:zoom-in;} /* ---------- Error box ---------- */ #errormsg{color:var(--err); background:rgba(251,113,133,.12) !important; border:1px solid rgba(251,113,133,.35) !important; border-radius:12px !important; font-size:14px; font-weight:600; margin:12px 0; padding:12px 16px; text-align:center;} /* Login / reset password page: ne koristi 2-kolonski flex layout profila, nego stack (greska centrirana iznad forme, a ne odbjegla skroz lijevo). */ #obavestenja.authpage{display:block !important;} #obavestenja.authpage #errormsg{max-width:360px; margin:40px auto 0 auto;} #obavestenja.authpage #ucpformbg{margin-top:16px !important;} .status{font-weight:700; color:var(--err); text-align:center;} .commentinfo{font-weight:700; color:var(--cyan); text-align:center;} /* ---------- Footer ---------- */ #footer{background:linear-gradient(160deg,var(--card1),var(--card2)) !important; border:1px solid var(--line) !important; border-radius:var(--radius); margin-top:22px; margin-bottom:0 !important; color:var(--mut) !important; padding:16px 20px;} #footer .ds_copyright font{color:var(--acc) !important;} .backtop{filter:grayscale(.2);} /* ---------- Tabela kazni (bez ikonica, tip = obojeni bedz) ---------- */ .pz-wrap{background:var(--card1); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:6px;} .pz-head{display:flex; align-items:center; gap:10px; padding:15px 18px; font-weight:800; font-size:15px; color:var(--txt); background:linear-gradient(135deg,rgba(var(--accrgb),.12),rgba(var(--accrgb),.04)); border-bottom:1px solid var(--line2);} .pz-head i{color:var(--acc);} .pz-count{margin-left:auto; background:var(--accsoft); color:var(--acc); font-size:12px; font-weight:800; padding:3px 11px; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(var(--accrgb),.3);} .pz-scroll{overflow-x:auto;} .pz-table{width:100%; border-collapse:collapse; font-size:13px; min-width:560px;} .pz-table th{text-align:left; padding:11px 16px; color:var(--mut2); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.6px; background:var(--bg2); border-bottom:1px solid var(--line2);} .pz-table td{padding:12px 16px; border-bottom:1px solid var(--line); color:var(--txt); vertical-align:middle;} .pz-table tbody tr{transition:background .12s ease;} .pz-table tbody tr:nth-child(even){background:rgba(255,255,255,.015);} .pz-table tbody tr:hover{background:var(--accsoft);} .pz-table tbody tr:last-child td{border-bottom:0;} .pz-when{color:var(--mut); white-space:nowrap; font-variant-numeric:tabular-nums; font-size:12.5px;} /* Vrsta: badge + iznos uvijek u jednom redu (bez lomljenja ispod). */ .pz-vrsta{white-space:nowrap;} /* Tip kazne = cist tekst, bez bedza (na zahtjev korisnika). */ .pz-type{font-weight:700; font-size:13px; color:var(--txt); white-space:nowrap;} .pz-amt{margin-left:8px; color:var(--mut); font-weight:700; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums;} .pz-admin{font-weight:700; white-space:nowrap;} .pz-admin a{color:var(--acc);} .pz-admin a:hover{color:#fff; text-decoration:underline;} .pz-reason{color:var(--mut); word-break:break-word;} /* ---------- Issue 6: alatka za komentare (smajlići + BBCode + tag) ---------- */ .cmt-tools{display:flex; gap:6px; align-items:center; margin:2px 0 8px;} .cmt-tools button{background:var(--card2); border:1px solid var(--line); color:var(--mut); width:30px; height:28px; border-radius:8px; cursor:pointer; font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:background .15s,color .15s,border-color .15s;} .cmt-tools button:hover{background:var(--card3); color:var(--txt); border-color:var(--cyan);} .cmt-tools .cmt-emoji-btn{color:var(--gold);} .ue-cmt-smiles{position:absolute; z-index:8000; display:none; max-width:300px; max-height:190px; overflow-y:auto; background:var(--card1); border:1px solid var(--line2); border-radius:12px; padding:8px; gap:4px; box-shadow:var(--shadow); flex-wrap:wrap;} .ue-cmt-smiles.open{display:flex;} .ue-cmt-smiles img{width:26px; height:26px; cursor:pointer; border-radius:6px; padding:2px; transition:transform .1s, background .15s;} .ue-cmt-smiles img:hover{transform:scale(1.2); background:var(--card3);} /* ---------- Live preview (status box) ---------- */ #statuspreview{display:none; margin-top:12px; padding:12px 14px; border:1px dashed var(--inln); border-radius:12px; background:rgba(255,255,255,.02); color:var(--txt); word-break:break-word;} #statuspreview.show{display:block;} #statuspreview .pvlabel{display:block; color:var(--mut2); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px;} #statuspreview img{max-width:100%; height:auto; vertical-align:middle;} #statuspreview .video-container iframe{max-width:100%;} /* ---------- Reply button on comments ---------- */ .replybtn{background:transparent; border:0; color:var(--mut); font-weight:700; cursor:pointer; font-family:inherit; font-size:12px; padding:0 4px;} .replybtn:hover{color:var(--cyan);} .btn-xs.replybtn{line-height:1.4;} /* ============================================================ SIGNATURE VARIANTS (Potpisi) — multiple styles to choose from ============================================================ */ .sig-variant-label{width:100%; max-width:560px; color:var(--mut2); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin:8px 0 2px;} /* Variant 2 — Carbon / neon strip (compact, horizontal) */ .sig2{position:relative; width:100%; max-width:560px; border-radius:14px; overflow:hidden; border:1px solid var(--line2); box-shadow:var(--shadow); display:flex; align-items:center; gap:16px; padding:14px 18px; background:linear-gradient(120deg,var(--bg2),var(--card2) 60%,var(--bg2)); background-image:linear-gradient(120deg,var(--bg2),var(--card2) 60%,var(--bg2)),repeating-linear-gradient(90deg,rgba(var(--accrgb),.05) 0 1px,transparent 1px 6px);} .sig2 .s2-skin{flex:0 0 66px; height:66px; width:66px; border-radius:12px; overflow:hidden; position:relative; border:1px solid var(--line2); background:radial-gradient(60px 60px at 50% 30%,rgba(var(--accrgb),.25),transparent 70%);} .sig2 .s2-skin img{position:absolute; left:50%; top:-4%; width:222%; height:auto; max-width:none; transform:translateX(-50%);} .sig2 .s2-body{flex:1 1 auto; min-width:0;} .sig2 .s2-name{font-size:18px; font-weight:800; color:#fff;} .sig2 .s2-name span{color:var(--cyan);} .sig2 .s2-sub{color:var(--mut); font-size:12px; margin-top:2px;} .sig2 .s2-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;} .sig2 .s2-tags b{font-size:11px; font-weight:700; color:var(--txt); background:rgba(var(--accrgb),.12); border:1px solid rgba(var(--accrgb),.25); border-radius:999px; padding:3px 9px;} /* Variant 3 — Premium gold */ .sig3{position:relative; width:100%; max-width:560px; min-height:150px; border-radius:16px; overflow:hidden; border:1px solid #6b5a1f; box-shadow:var(--shadow); display:flex; align-items:stretch; background:radial-gradient(500px 200px at 100% -10%,rgba(250,204,21,.22),transparent 60%),linear-gradient(135deg,#1a1710,#0f0d09);} .sig3::after{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(-45deg,rgba(250,204,21,.05) 0 2px,transparent 2px 10px);} .sig3 .s3-skin{flex:0 0 140px; position:relative; display:flex; align-items:flex-end; justify-content:center;} .sig3 .s3-skin img{height:158px; width:auto; filter:drop-shadow(0 14px 16px rgba(0,0,0,.7));} .sig3 .s3-body{flex:1 1 auto; padding:18px 20px; position:relative; z-index:1; min-width:0;} .sig3 .s3-name{font-size:21px; font-weight:800; color:#facc15; text-shadow:0 2px 10px rgba(0,0,0,.6); word-break:break-word;} .sig3 .s3-org{color:#e6d9a8; font-size:12.5px; font-weight:700; margin:2px 0 10px;} .sig3 .s3-stats{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;} .sig3 .s3-stats div{font-size:12.5px; color:#efe7c8;} .sig3 .s3-stats b{color:#fff;} .sig3 .s3-badge{position:absolute; top:12px; right:14px; z-index:2; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#1a1710; background:linear-gradient(135deg,#facc15,#eab308); padding:4px 10px; border-radius:999px;} /* Variant 4 — Cyber / terminal */ .sig4{position:relative; width:100%; max-width:560px; border-radius:14px; overflow:hidden; border:1px solid #1f3a44; box-shadow:var(--shadow); background:linear-gradient(135deg,#07110f,#0a1a17);} .sig4 .s4-top{display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid #14312c; background:rgba(0,0,0,.35);} .sig4 .s4-top i{width:10px; height:10px; border-radius:50%; background:#34d399; box-shadow:0 0 8px #34d399;} .sig4 .s4-top span{color:#5eead4; font-size:11px; font-weight:700; letter-spacing:1px; font-family:Consolas,monospace;} .sig4 .s4-main{display:flex; align-items:center; gap:16px; padding:14px 16px;} .sig4 .s4-skin{flex:0 0 84px; text-align:center;} .sig4 .s4-skin img{height:96px; width:auto; filter:drop-shadow(0 10px 12px rgba(0,0,0,.7));} .sig4 .s4-body{flex:1 1 auto; min-width:0; font-family:Consolas,'Courier New',monospace; font-size:12.5px; color:#7fe0cf;} .sig4 .s4-body .row{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .sig4 .s4-body .k{color:#2f9e8c;} .sig4 .s4-body .v{color:#e7fff9; font-weight:700;} .sig4 .s4-name{font-size:17px; color:#5eead4; font-weight:800; margin-bottom:6px; font-family:'Segoe UI',sans-serif;} /* ---------- Kopiranje koda potpisa ---------- */ .sig-copy{width:100%; max-width:560px; margin:-4px auto 4px; display:flex; flex-direction:column; gap:6px;} .sig-copy-row{display:flex; align-items:center; gap:8px;} .sig-copy-k{flex:0 0 54px; font-size:11px; font-weight:700; color:var(--mut); text-transform:uppercase; letter-spacing:.4px;} .sig-copy-row input{flex:1 1 auto; min-width:0; background:var(--in); border:1px solid var(--inln); color:var(--txt); border-radius:8px; padding:7px 10px; font-size:12px; font-family:Consolas,monospace;} .sig-copy-row input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyansoft);} .sig-copy-row button{flex:0 0 auto; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; border:0; border-radius:8px; padding:7px 12px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;} .sig-copy-row button:hover{filter:brightness(1.08);} .sig-copy-row button.copied{background:linear-gradient(135deg,#22c55e,#16a34a);} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:920px){ .ue-nav{position:sticky;} body{padding-top:0 !important;} .ue-nav-inner{gap:10px; padding:10px 14px; flex-wrap:nowrap; position:relative;} .ue-logo-txt{display:inline;} .ue-nav-toggle{display:inline-flex;} /* tabovi -> hamburger dropdown (potpuno skriven kad je zatvoren) */ .ue-tabs{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--card1); border-bottom:1px solid var(--line); padding:8px; gap:4px; margin:0; max-height:80vh; overflow:auto; box-shadow:0 22px 44px rgba(0,0,0,.55); z-index:2600;} .ue-nav.open .ue-tabs{display:flex;} .ue-tab{width:100%; justify-content:flex-start; padding:13px 15px; font-size:15px; border-radius:11px;} .ue-tab i{width:22px; text-align:center; font-size:15px;} .ue-nav-right{order:2; margin-left:auto;} .ue-search input,#search.ue-search input{width:150px !important; max-width:40vw;} #obavestenja{flex-direction:column;} #levo{width:100% !important; flex:1 1 100%;} #centarprofil{flex:1 1 100%;} } @media(max-width:560px){ .ue-logo-txt{display:none;} .ue-nav-right{width:100%; order:3; margin-left:0;} .ue-search input,#search.ue-search input{width:100% !important; max-width:none;} } @media(max-width:560px){ .nav-tabs>li>a{padding:8px 10px; font-size:12.5px;} .video-container iframe,#novosti iframe,#statusesarea iframe{width:100% !important; height:auto !important; aspect-ratio:16/9;} .sig-banner{flex-direction:column;} .sig-skin{flex:0 0 auto; padding-top:10px;} .sig-skin img{height:150px;} .sig-stats{grid-template-columns:1fr;} .sig3{flex-direction:column;} .sig3 .s3-skin{flex:0 0 auto; padding-top:10px;} .sig3 .s3-stats{grid-template-columns:1fr;} .sig2{flex-direction:column; text-align:center;} .sig2 .s2-tags{justify-content:center;} } /* ---------- Issue 8: dodatna mobilna optimizacija panela ---------- */ @media(max-width:768px){ /* Slike u statusima/komentarima nikad ne prelaze širinu. */ .uebody img, #statusesarea img, #novosti img{max-width:100% !important; height:auto !important;} /* Duge tabele (statistika, kazne, imovina) dobijaju horizontalni skrol umjesto da razvuku stranicu. */ #statistika table, #imovina table, .container .table-responsive{display:block; max-width:100%; overflow-x:auto;} /* Modali reakcija/kazni stanu na ekran. */ .ue-modal-box, .ue-rx-box{width:94vw !important; max-width:94vw !important;} /* Sprječi horizontalni skrol cijele stranice. */ html, body{overflow-x:hidden;} } @media(max-width:560px){ /* Kompaktniji tabovi i sadržaj profila. */ #centarprofil .container, #levo .container{padding-left:10px; padding-right:10px;} .nav-tabs{flex-wrap:wrap;} /* Statistika: labela iznad vrijednosti, čitljivije na uskom. */ #levo table td{padding:6px 8px !important;} #statsinfo1{font-size:12px;} #statsinfo{font-size:13px; word-break:break-word;} /* Polje za status i komentar preko pune širine + bez iOS zooma. */ .statustext, .commenttext, .ueeditarea{font-size:16px !important;} /* Smajli traka u kompozeru se prelama i skroluje. */ #smilebox{max-width:100%; flex-wrap:wrap;} /* Dugmad reakcija/komentara veće dodirne mete. */ .likedislike .btn{padding:6px 10px;} /* Datum ispod, poravnat desno, da ne gura reakcije. */ .statusfooter{gap:6px;} } /* ============================================================ NOVE FUNKCIJE: akcije statusa, uređivanje, prijava, toast, YouTube facade, popravke friend boksa ============================================================ */ /* Blok statusa/komentara mora biti pozicioni kontekst za akcije. */ .uepost{position:relative;} /* Akcije (obriši / uredi / prijavi) gore-desno u statusu/komentaru. */ .statusactions{float:right; display:inline-flex; align-items:center; gap:8px; margin-left:10px; position:relative; z-index:3;} .statusactions .stx{cursor:pointer; line-height:1; font-weight:700; opacity:.55; transition:opacity .15s, color .15s; text-decoration:none;} .statusactions .stx:hover{opacity:1; text-decoration:none;} .statusactions .stx.del{color:var(--err) !important; font-size:20px;} .statusactions .stx.edit{color:var(--mut) !important; font-size:13px;} .statusactions .stx.edit:hover{color:var(--cyan) !important;} .statusactions .stx.report{color:var(--mut) !important; font-size:13px;} .statusactions .stx.report:hover{color:var(--err) !important;} /* "· uređeno " pored datuma. */ .editedtag{color:var(--mut2); font-style:italic; font-size:92%;} /* Inline uređivanje teksta. */ .ueeditbox{margin:6px 0 4px;} .ueeditarea{width:100% !important; box-sizing:border-box; background:var(--in) !important; color:var(--txt) !important; border:1px solid var(--inln) !important; border-radius:10px; padding:10px; min-height:64px; resize:vertical;} .ueeditbtns{display:flex; align-items:center; gap:8px; margin-top:6px;} .ueeditbtns .ueediterr{margin:0; padding:0; background:none; border:0; font-size:12px;} /* ---------- Prijava (modal) ---------- */ .ue-modal{position:fixed; inset:0; background:rgba(4,6,12,.66); z-index:5000; display:none; align-items:center; justify-content:center; padding:16px;} .ue-modal.open{display:flex;} .ue-modal-box{width:440px; max-width:96vw; background:linear-gradient(160deg,var(--card1),var(--card2)); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden;} .ue-modal-head{background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; font-weight:800; padding:12px 16px; display:flex; align-items:center; gap:8px; position:relative;} .ue-modal-head .ue-modal-x{margin-left:auto; cursor:pointer; font-size:22px; line-height:1; opacity:.9;} .ue-modal-head .ue-modal-x:hover{opacity:1;} .ue-modal-body{padding:16px;} .ue-modal-sub{color:var(--mut); margin:0 0 10px; font-weight:600;} .ue-report-reasons{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;} .ue-report-reason{display:flex; align-items:center; gap:9px; color:var(--txt); cursor:pointer; background:var(--card3); border:1px solid var(--line); border-radius:10px; padding:9px 12px; transition:border-color .15s;} .ue-report-reason:hover{border-color:var(--acc);} .ue-report-reason input{accent-color:var(--acc); width:16px; height:16px;} #ue-report-details{width:100%; box-sizing:border-box; background:var(--in); color:var(--txt); border:1px solid var(--inln); border-radius:10px; padding:10px; min-height:72px; resize:vertical;} #ue-report-err{background:none; border:0; margin:8px 0 0; padding:0; font-size:13px;} .ue-modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:12px 16px; border-top:1px solid var(--line);} .ue-modal-foot .btn{border-radius:10px; font-weight:700;} .ue-modal-foot .btn-danger{background:linear-gradient(135deg,var(--acc),var(--acc2)); border:0; color:#fff;} /* ---------- Toast ---------- */ #ue-toasts{position:fixed; right:18px; bottom:18px; z-index:6000; display:flex; flex-direction:column; gap:10px;} .ue-toast{background:var(--card2); color:var(--txt); border:1px solid var(--line); border-left:4px solid var(--cyan); border-radius:10px; padding:11px 16px; box-shadow:var(--shadow-sm); font-size:13.5px; font-weight:600; opacity:0; transform:translateY(12px); transition:opacity .25s, transform .25s; max-width:320px;} .ue-toast.show{opacity:1; transform:translateY(0);} .ue-toast.ok{border-left-color:var(--ok);} .ue-toast.err{border-left-color:var(--err);} /* ---------- YouTube facade ---------- */ .video-container{display:flex; justify-content:center; align-items:center; margin:8px 0;} .ytfacade{position:relative; width:560px; max-width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; cursor:pointer; background:#000; border:1px solid var(--line2);} .ytfacade .ytthumb{width:100%; height:100%; object-fit:cover; display:block; opacity:.92; transition:opacity .2s, transform .3s;} .ytfacade:hover .ytthumb{opacity:1; transform:scale(1.03);} .ytfacade .ytplay{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:68px; height:48px; border-radius:12px; background:rgba(255,0,0,.85); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 4px 16px rgba(0,0,0,.5); transition:background .2s, transform .2s;} .ytfacade:hover .ytplay{background:#f00; transform:translate(-50%,-50%) scale(1.06);} .video-container iframe{width:560px; height:315px; max-width:100%; aspect-ratio:16/9; border-radius:12px; border:0;} /* ---------- Friend boks: popravka overflow-a teksta (level ispada) ---------- */ .friend{overflow:hidden;} .friend .friendmeta{overflow:hidden; flex:1 1 auto;} .friend .friendname{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;} .friend .friendinfo{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;} .friend .friendimg.skin-head{overflow:hidden;} .friend .friendimg.skin-head img{position:absolute; left:50%; top:-6%; width:230%; height:auto; transform:translateX(-50%);} /* ============================================================ ADMIN PANEL (admin.php) ============================================================ */ /* ---- Admin panel: tabovi (Prijave / Pitanja / Web Chat) — Issue 2/14 ---- */ .ue-admin-wrap{max-width:1000px; margin:0 auto; padding:14px 6px 48px;} .ue-admin-topbar{margin:6px 0 22px;} .ue-admin-topbar h1{color:var(--txt); font-size:26px; font-weight:800; margin:0 0 16px; display:flex; align-items:center; gap:11px;} .ue-admin-topbar h1 i{color:var(--acc);} .ue-admin-tabs{display:flex; gap:6px; background:var(--card1); border:1px solid var(--line); border-radius:14px; padding:6px;} .ue-atab{flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 14px; border:0; background:transparent; color:var(--mut); font-family:inherit; font-weight:700; font-size:14.5px; border-radius:10px; cursor:pointer; transition:background .15s,color .15s;} .ue-atab i{font-size:15px;} .ue-atab:hover{color:#fff; background:var(--card2);} .ue-atab.active{color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2)); box-shadow:0 6px 16px rgba(var(--accrgb),.28);} .ue-atab .ue-atab-n{min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:rgba(0,0,0,.28); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;} .ue-atab.active .ue-atab-n{background:rgba(255,255,255,.25);} .ue-atab-pane{display:none; animation:ueFadeIn .18s ease;} .ue-atab-pane.active{display:block;} @keyframes ueFadeIn{from{opacity:0; transform:translateY(4px);}to{opacity:1; transform:none;}} @media(max-width:560px){ .ue-atab span:not(.ue-atab-n){display:none;} /* na mobilnom samo ikonice + broj */ .ue-atab{padding:12px 8px;} } .ue-admin{max-width:960px; margin:0 auto; padding:8px 4px 40px;} .ue-admin-q, .ue-admin-chat{margin-top:0;} /* razmak sada nose tabovi, ne stacking */ .ue-admin-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:8px 0 18px;} .ue-admin-head h2{color:var(--txt); margin:0; font-size:22px; display:flex; align-items:center; gap:10px;} .ue-admin-head h2 i{color:var(--acc);} .ue-admin-stats{display:flex; gap:10px;} .ue-chip{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:700; border:1px solid var(--line); background:var(--card2); color:var(--txt);} .ue-chip.open{border-color:rgba(251,113,133,.5);} .ue-chip.open i{color:var(--err);} .ue-chip.done{border-color:rgba(52,211,153,.5);} .ue-chip.done i{color:var(--ok);} .ue-chip b{color:var(--cyan);} .ue-admin-filters{display:flex; gap:8px; margin-bottom:16px;} .ue-fbtn{background:var(--card2); border:1px solid var(--line); color:var(--mut); font-weight:700; font-family:inherit; padding:7px 15px; border-radius:10px; cursor:pointer; transition:all .15s;} .ue-fbtn:hover{color:#fff; border-color:var(--acc);} .ue-fbtn.active{color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2)); border-color:transparent;} .ue-report{background:linear-gradient(160deg,var(--card1),var(--card2)); border:1px solid var(--line); border-radius:14px; padding:15px 17px; margin-bottom:14px; box-shadow:var(--shadow-sm);} .ue-report.open{border-left:4px solid var(--err);} .ue-report.resolved{border-left:4px solid var(--ok); opacity:.85;} .ue-report-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px;} .ue-badge{font-size:11px; font-weight:800; letter-spacing:.5px; padding:3px 9px; border-radius:6px; color:#fff;} .ue-badge.open{background:linear-gradient(135deg,var(--acc),var(--acc2));} .ue-badge.done{background:linear-gradient(135deg,#22c55e,#16a34a);} .ue-reason{color:var(--warn); font-weight:700; display:inline-flex; align-items:center; gap:6px;} .ue-report-date{margin-left:auto; color:var(--mut2); font-size:12px;} .ue-report-meta{display:flex; gap:18px; flex-wrap:wrap; color:var(--mut); font-size:13px; margin-bottom:8px;} .ue-report-meta a{color:var(--cyan) !important; font-weight:700;} .ue-report-det{background:var(--card3); border:1px solid var(--line); border-radius:9px; padding:8px 12px; color:var(--txt); font-size:13px; margin-bottom:8px;} .ue-report-det i{color:var(--mut2); margin-right:5px;} .ue-report-body{background:var(--in); border:1px solid var(--inln); border-radius:10px; padding:11px 13px; color:var(--txt); font-size:13.5px; line-height:1.5; word-break:break-word; margin-bottom:11px;} .ue-muted{color:var(--mut2);} .ue-report-actions{display:flex; gap:9px; align-items:center; flex-wrap:wrap;} /* Issue 10: sekcija neodgovorenih /askq pitanja u admin panelu */ .ue-admin-q{margin-top:0;} .ue-qanswer{margin-top:4px;} .ue-qtext{width:100%; box-sizing:border-box; min-height:64px; resize:vertical; background:var(--in); border:1px solid var(--inln); border-radius:10px; padding:10px 12px; color:var(--txt); font-size:13.5px; font-family:inherit; line-height:1.5; outline:none; margin-bottom:10px;} .ue-qtext:focus{border-color:var(--acc);} /* Issue 8: ugradjeni Admin Web Chat */ .ue-admin-chat{margin-top:0;} .ue-webchat-wrap{border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); background:var(--bg2);} .ue-webchat-frame{display:block; width:100%; height:calc(100vh - 250px); min-height:620px; border:0;} .ue-webchat-note{color:var(--mut); font-size:12.5px; margin:10px 2px 0; display:flex; align-items:center; gap:7px;} .ue-webchat-note i{color:var(--acc);} @media(max-width:640px){ .ue-webchat-frame{height:70vh;} } .ue-report-actions .btn{border-radius:9px; font-weight:700;} .ue-report-actions .btn-success{background:linear-gradient(135deg,#22c55e,#16a34a); border:0; color:#fff;} .ue-report-actions .btn-danger{background:linear-gradient(135deg,var(--acc),var(--acc2)); border:0; color:#fff;} .ue-resolved-by{color:var(--mut2); font-size:12px; font-style:italic;} /* ============================================================ BATCH 2026-08-04 — dodaci (mentions, imovina, reakcije, notif animacija) ============================================================ */ /* Issue 5: @Ime spomen -> plavi klikabilni link */ .ue-mention{color:var(--mention) !important; font-weight:700; text-decoration:none;} .ue-mention:hover{text-decoration:underline;} /* Issue 12: zivi pregled @spomena ispod polja za komentar */ .cmt-mprev{display:none; margin:6px 0 2px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card2); color:var(--txt); font-size:13px; line-height:1.5; word-break:break-word;} .cmt-mprev .cmt-mprev-lbl{color:var(--mut); font-size:11px; font-weight:700; margin-right:6px; text-transform:uppercase; letter-spacing:.3px;} /* Issue 2: "Prijatelji" dugme je sada klikabilno (raskini prijateljstvo) */ .ue-friendbtn.is-friends{cursor:pointer !important;} .ue-friendbtn.is-friends:hover{filter:brightness(1.05); background:linear-gradient(135deg,#ef4444,#dc2626) !important; box-shadow:0 6px 16px rgba(239,68,68,.3);} /* Issue 12/2: moderne imovinske kartice (grid, slika + badge + mapa, detalji) */ /* Scope na .active da ne pregazi bootstrap .tab-pane skrivanje (inace uvijek vidljivo). */ #imovina.active{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; align-items:start;} .pcard{background:linear-gradient(160deg,var(--card2),var(--card1)); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:transform .18s, border-color .18s;} .pcard:hover{transform:translateY(-3px); border-color:var(--cyan);} .pcard-media{position:relative; width:100%; aspect-ratio:16/10; background:var(--in); overflow:hidden;} .pcard-media .pcard-img{width:100%; height:100%; object-fit:cover; display:block;} .pcard-media::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,10,16,.85),rgba(6,10,16,0) 45%);} .pcard-badge{position:absolute; left:10px; bottom:10px; z-index:2; color:#fff; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; background:linear-gradient(135deg,var(--acc),var(--acc2)); box-shadow:0 4px 12px rgba(0,0,0,.4);} .pcard-badge b{font-weight:800;} .pcard-map{position:absolute; right:10px; bottom:10px; z-index:2; width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.15); transition:background .15s;} .pcard-map:hover{background:var(--cyan); color:var(--onacc);} .pcard-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px 6px;} .pcard-owner{color:var(--txt); font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .pcard-owner i{color:var(--cyan); margin-right:5px;} .pcard-price{color:#22c55e; font-weight:800; font-size:15px; white-space:nowrap;} .pcard-rows{padding:4px 16px 14px;} .pcrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05);} .pcrow:last-child{border-bottom:0;} .pcrow .pk{color:var(--mut); font-size:12.5px; font-weight:600; white-space:nowrap;} .pcrow .pk i{width:16px; text-align:center; color:var(--mut2); margin-right:5px;} .pcrow .pv{color:var(--txt); font-size:13px; font-weight:700; text-align:right; word-break:break-word;} .pcard-safe{margin:0 12px 14px; border:1px solid rgba(var(--accrgb),.35); border-radius:12px; overflow:hidden; background:rgba(var(--accrgb),.06);} .pcard-safe-h{background:rgba(var(--accrgb),.14); color:var(--cyan); font-weight:800; font-size:12.5px; padding:8px 14px;} .pcard-safe-h i{margin-right:6px;} .pcard-safe-b{padding:2px 14px 8px;} .pcard-safe-b .pcrow .pv{color:var(--cyan);} /* Oruzje u sefu: svaki slot u svom redu (odozgo prema dole) + municija u obliku "Municija: (100)" */ .pw-slot{display:flex; align-items:center; justify-content:flex-end; gap:8px; line-height:1.5;} .pw-slot .pw-name{color:var(--cyan); font-weight:800;} .pw-slot .pw-ammo{color:var(--mut); font-weight:600; font-size:12px; white-space:nowrap;} /* Issue 10: sazetak reakcija (desna strana footera) + lista "ko je reagovao" */ .statusfooter{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .statusfooter .likedislike{display:flex; gap:6px; flex-wrap:wrap; margin-right:auto;} /* Reakcije i datum uvijek uz desnu ivicu (i kad red prelama). */ .statusfooter .rxsum{margin-left:auto;} .statusfooter .statusdate{margin-left:auto; text-align:right; white-space:nowrap;} /* Facebook stil: prve tri reakcije kao preklopljeni krugovi + ukupan broj. */ .rxsum-inner{display:inline-flex; align-items:center; cursor:pointer; padding:2px 4px 2px 2px; border-radius:999px; transition:background .15s;} .rxsum-inner:hover{background:var(--card2);} /* Svaka reakcija (npr. 👍 ❤️ 😆) mora biti POTPUNO vidljiva. Prije su se krugovi preklapali (margin-right:-7px) pa je prvi (palac) prekrivao ostale ikonice. */ .rxsum-inner .rxs-e{font-size:13px; line-height:1; width:21px; height:21px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--card3); box-shadow:0 0 0 2px var(--bg); margin-right:2px; font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;} .rxsum-inner .rxs-n{font-size:12px; font-weight:700; color:var(--mut); margin-left:4px;} .ue-rx-box{width:400px;} .ue-rx-tabs{display:flex; gap:6px; padding:10px 14px 0; flex-wrap:wrap; border-bottom:1px solid var(--line);} .ue-rx-tab{background:transparent; border:0; border-bottom:2px solid transparent; color:var(--mut); font-weight:700; font-size:13px; padding:6px 10px 9px; cursor:pointer;} .ue-rx-tab:hover{color:#fff;} .ue-rx-tab.active{color:#fff; border-bottom-color:var(--cyan);} .ue-rx-list{max-height:52vh; overflow-y:auto; padding:8px 6px;} .ue-rx-row{display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:10px; text-decoration:none; transition:background .15s;} .ue-rx-row:hover{background:rgba(255,255,255,.05);} .ue-rx-av{width:40px; height:40px; border-radius:50%;} .ue-rx-name{flex:1 1 auto; color:var(--txt); font-weight:700; font-size:14px;} .ue-rx-badge{font-size:20px; line-height:1;} /* Issue 7: notifikacije — klizna animacija otvaranja/zatvaranja (odozgo->dole / dole->gore) */ #notification{transform-origin:top center; transform:translateY(-14px) scaleY(.96); opacity:0; transition:transform .24s ease, opacity .24s ease;} #notification.open{transform:translateY(0) scaleY(1); opacity:1;} /* Issue 8: Prihvati/Odbij ista visina i sirina */ #notarea .notitem .notactions{display:flex; gap:8px; margin-top:8px; flex-wrap:nowrap;} #notarea .notitem .notactions .notaccept, #notarea .notitem .notactions .notdecline{flex:1 1 0; justify-content:center; margin-top:0; height:34px; padding:0 10px; box-sizing:border-box; white-space:nowrap;} /* ============================================================ SHOP - prodavnica vozila (Issue 13) ============================================================ */ .shop-head{font-size:18px; font-weight:800; padding:12px 4px 4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .shop-head .shop-note{font-size:12px; font-weight:600; color:var(--mut); margin-left:auto;} .shop-cats{display:flex; gap:8px; flex-wrap:wrap; padding:10px 0 14px; border-bottom:1px solid var(--line); margin-bottom:14px;} .shop-cat{background:var(--card2); color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s;} .shop-cat:hover{color:#fff;} .shop-cat.active{background:var(--acc); color:#fff; border-color:var(--acc);} .shop-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; padding-bottom:20px;} .shop-card{background:var(--card2); border:1px solid rgba(239,83,94,.38); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:transform .12s, box-shadow .15s, border-color .18s;} .shop-card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.35); border-color:rgba(239,83,94,.7);} .shop-media{background:linear-gradient(160deg,var(--card3),var(--bg2)); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;} .shop-media img{width:100%; height:100%; object-fit:cover;} .shop-name{font-weight:800; font-size:14px; padding:9px 12px 2px;} .shop-info{display:flex; align-items:center; justify-content:space-between; padding:2px 12px 8px; font-size:12px; color:var(--mut);} .shop-info .shop-price{color:#22c55e; font-weight:800; font-size:14px;} /* specifikacije vozila */ .shop-specs{list-style:none; margin:0 12px 12px; padding:8px 10px; border:1px solid rgba(239,83,94,.22); border-radius:9px; background:rgba(239,83,94,.05);} .shop-specs li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:3px 0; font-size:12px;} .shop-specs li span{color:var(--mut); font-weight:600;} .shop-specs li b{color:var(--txt); font-weight:700; text-align:right;} .shop-specs .shop-yes{color:#22c55e;} .shop-specs .shop-no{color:#f0868f;} .shop-buy{margin:0 12px 12px; background:linear-gradient(135deg,#e8636f,#cf4a56); color:#fff; border:0; border-radius:8px; padding:9px; font-weight:800; font-size:13.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; box-shadow:0 3px 10px rgba(207,74,86,.28); transition:filter .15s, transform .12s;} .shop-buy:hover{filter:brightness(1.06); transform:translateY(-1px);} /* pay-method modal */ .shop-modal{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100000; display:none; align-items:center; justify-content:center;} .shop-modal.open{display:flex;} .shop-modal-box{background:var(--card1); border:1px solid var(--line); border-radius:14px; width:min(92vw,380px); padding:20px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.6);} .shop-modal-h{font-size:17px; font-weight:800; margin-bottom:4px;} .shop-modal-price{color:#22c55e; font-weight:800; margin-bottom:10px;} .shop-modal-q{color:var(--mut); font-size:13px; margin:0 0 14px;} .shop-modal-btns{display:flex; gap:10px; margin-bottom:12px;} .shop-pay{flex:1; border:0; border-radius:9px; padding:12px 8px; font-weight:800; font-size:13px; color:#fff; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; transition:filter .15s;} .shop-pay:hover{filter:brightness(1.12);} .shop-pay.bank{background:var(--acc);} .shop-pay.cash{background:#16a34a;} .shop-modal-x{background:transparent; border:0; color:var(--mut); cursor:pointer; font-size:13px; font-weight:700;} .shop-modal-msg{margin-top:10px; font-size:13px; font-weight:700; min-height:18px;} .shop-modal-msg.ok{color:#22c55e;} .shop-modal-msg.err{color:#f87171;} /* ============================================================ HOMEPAGE-STYLE POLISH (kao download.php: akcentna traka na karticama, puls loga, vatromet intro, vinjeta) — 2026-08-15 ============================================================ */ /* Vinjeta + "circuit" tekstura preko CIJELE pozadine socijala (fiksno, iza sadrzaja). Radial vinjeta zatamnjuje ivice; dvije dijagonalne rese prave vidljivu tech-mrezu. */ body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(120% 85% at 50% -10%, transparent 52%, rgba(0,0,0,.5) 100%), repeating-linear-gradient(45deg, rgba(var(--accrgb),.07) 0 1px, transparent 1px 24px), repeating-linear-gradient(-45deg, rgba(var(--accrgb),.07) 0 1px, transparent 1px 24px); background-size:auto, 48px 48px, 48px 48px;} /* Vatromet canvas (kratki intro, sam se ugasi) — iza sadrzaja */ #fireworksCanvas{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; transition:opacity 1.5s ease;} div#wrapper{position:relative; z-index:2;} /* sadrzaj iznad vatrometa/vinjete */ /* Logo u navigaciji je STATICAN (puls uklonjen na zahtjev — kao na pocetnoj). */ /* Crveno-narandzasta akcentna traka na vrhu glavnih kartica (download.php ::before) */ #levo,.nav-tabs,#ucpformbg,#footer,.ue-notfound,.ue-admin-tabs,.pz-wrap,.ue-modal-box{position:relative;} #levo::before,.nav-tabs::before,#ucpformbg::before,#footer::before, .ue-notfound::before,.ue-admin-tabs::before,.pz-wrap::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; z-index:4; background:linear-gradient(90deg,var(--acc),var(--acc2)); border-radius:var(--radius) var(--radius) 0 0;} /* Jaci glow na hover glavnih kartica (mocniji, "premium" osjecaj) */ #levo,.tab-content{transition:box-shadow .3s ease;} #levo:hover,.tab-content:hover{box-shadow:0 22px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--accrgb),.12);} /* Na malim ekranima nav nije sticky pa akcentna traka footer-a i dalje radi; vatromet ostaje jeftin (auto-stop), ali ga na mobilnom potpuno gasimo radi performansi */ @media(max-width:768px){ #fireworksCanvas{display:none;} /* Zadrzi tech-teksturu i na mobilnom (bez teske vinjete). */ body::before{background: repeating-linear-gradient(45deg, rgba(var(--accrgb),.06) 0 1px, transparent 1px 24px), repeating-linear-gradient(-45deg, rgba(var(--accrgb),.06) 0 1px, transparent 1px 24px); background-size:48px 48px, 48px 48px;} } /* ============================================================ ADMIN — izbor teme socijala (kartice sa mini-pregledom) ============================================================ */ .ue-theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px;} .ue-theme-card{position:relative; background:var(--card2); border:2px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s;} .ue-theme-card:hover{transform:translateY(-3px); border-color:var(--line2); box-shadow:var(--shadow-sm);} .ue-theme-card.active{border-color:var(--acc); box-shadow:0 0 0 3px var(--accsoft);} .ue-theme-card.is-busy{opacity:.55; pointer-events:none;} .ue-theme-prev{position:relative; height:104px; padding:14px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; border-bottom:1px solid var(--line);} .ue-theme-dots{position:absolute; top:12px; left:14px; display:flex; gap:7px;} .ue-theme-dots i{width:16px; height:16px; border-radius:50%; box-shadow:0 0 10px rgba(0,0,0,.4);} .ue-theme-bar{height:14px; width:78%; border-radius:8px;} .ue-theme-bar.sm{height:10px; width:52%; opacity:.85;} .ue-theme-name{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 13px; font-weight:700; font-size:14px; color:var(--txt);} .ue-theme-chk{color:var(--acc); opacity:0; transition:opacity .16s; font-size:14px;} .ue-theme-card.active .ue-theme-chk{opacity:1;} .ue-theme-card.active .ue-theme-name{color:#fff;} /* ============================================================ Sakrij DOM koji ubacuje browser ekstenzija "MaxAI / Use ChatGPT AI" (id USE_CHAT_GPT_AI_ROOT_..., klase use-chat-gpt-ai--Mui..., max-ai__...). NIJE dio sajta — vidi ga samo korisnik koji ima tu ekstenziju. Za trajno uklanjanje treba iskljuciti ekstenziju u browseru; ovo je samo zastita. */ [id^="USE_CHAT_GPT_AI"], [class*="use-chat-gpt-ai"], [class*="max-ai__"], [class*="maxai-"]{ display:none !important; } /* ============================================================ NASLIJEDJENE BOJE (ucp.css / bootstrap) — vezane za temu Ove komponente su ranije nosile plavu iz bootstrap-a odnosno ucp.css-a, pa su odudarale kad se promijeni tema. ============================================================ */ /* Like / Dislike / Comments ispod statusa i komentara. */ .likedislike .btn{border:0 !important; border-radius:999px !important; font-weight:700; padding:5px 14px !important; font-size:12px !important; margin:2px 2px 2px 0;} .likedislike .btn-primary{background:linear-gradient(135deg,var(--acc),var(--acc3)) !important; color:var(--onacc) !important; box-shadow:0 0 14px rgba(var(--accrgb),.35);} .likedislike .btn-danger,.likedislike .btn-warning{background:var(--card3) !important; color:var(--mut) !important; box-shadow:inset 0 0 0 1px var(--line2);} .likedislike .btn-warning{color:var(--gold) !important;} .likedislike .btn:hover{filter:brightness(1.08);} .likedislike .btn.replybtn{background:transparent !important; box-shadow:none; color:var(--mut) !important;} .likedislike .btn.replybtn:hover{color:var(--cyan) !important;} /* Ime autora statusa (kad nije link) i zakacen (pinned) status. */ .postername{color:var(--cyan) !important;} .pinned{border-bottom-color:var(--acc) !important;} /* Isprekidani razdjelnik u profilu. */ #separator{border-color:var(--line) !important; color:var(--line) !important;} /* Autofill polja (Chrome ih boji svojom plavom). */ input:-webkit-autofill,textarea:-webkit-autofill{-webkit-text-fill-color:var(--txt) !important; -webkit-box-shadow:0 0 0 1000px var(--in) inset !important; caret-color:var(--txt);} /* tableindex.css boji SVE linkove svojom plavom preko `a:link,a:visited` (specificnost 0,1,1) pa gazi obicne klase iz ove datoteke. Zato ovdje ciljano vracamo boje linkova koje pripadaju temi. */ .ue-nav .ue-logo:link,.ue-nav .ue-logo:visited{color:#fff;} .ue-logout:link,.ue-logout:visited{color:var(--acc);} .ue-logout:hover,.ue-logout:link:hover{color:#fff;} .uebody a:link,.uebody a:visited,#novosti a:link,#novosti a:visited, .signature a:link,.signature a:visited{color:var(--cyan);} .pz-admin a:link,.pz-admin a:visited{color:var(--acc);} .pcard-map:link,.pcard-map:visited{color:#fff;} .friend .friendname:link,.friend .friendname:visited{color:var(--cyan) !important;} .ue-rx-row:link,.ue-rx-row:visited{color:var(--txt);} .ue-btn:link,.ue-btn:visited{color:#fff;} /* Chat (chat.css) — isti problem sa linkovima. */ .cw-menu .cw-mi:link,.cw-menu .cw-mi:visited,.cw-mem:link,.cw-mem:visited{color:var(--txt);} .cw-head .cw-name a:link,.cw-head .cw-name a:visited{color:#fff;} .cbubble .cw-link:link,.cbubble .cw-link:visited{color:var(--cyan);} .cmsg.me .cbubble .cw-link:link,.cmsg.me .cbubble .cw-link:visited{color:#fff;} /* ============================================================ ISPRAVKE 2026-09-12 1) mobilni prikaz statusa (tekst je izlazio iz kartice, dugmad su se slagala jedno ispod drugog) 2) navigacija u jednom redu (prelazila je u drugi red) ============================================================ */ /* ---- 1a) Prelamanje dugih nizova znakova i linkova ---- Bez ovoga browser niz od 40 slova "M" tretira kao jednu rijec koju ne smije prelomiti, pa je gurne izvan kartice; html,body{overflow-x:hidden} to onda odsijece i na telefonu izgleda kao da je tekst pobjegao. Vrijedi i na desktopu — tamo je isti kvar, samo je kartica sira. */ .uebody,.postername,.uepost .statusdate{overflow-wrap:anywhere; word-break:break-word; min-width:0;} .uebody a{overflow-wrap:anywhere;} /* ---- 1b) Podnozje statusa na telefonu u dva reda ---- .statusfooter je flex koji prelama, a .rxsum i .statusdate su stajali u istom redu s dugmadima i uzimali sirinu — pa se .likedislike stisnuo i njegova tri dugmeta prelomila svako u svoj red. Sada dugmad dobiju cijeli red za sebe, a reakcije i datum silaze u red ispod. */ @media(max-width:768px){ .statusfooter{gap:9px 10px;} .statusfooter .likedislike{flex:1 1 100%; flex-wrap:nowrap; margin-right:0; gap:7px;} .statusfooter .likedislike .btn{ flex:1 1 auto; min-width:0; margin:0 !important; padding:0 8px !important; min-height:38px; font-size:12.5px !important; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .statusfooter .rxsum{margin-left:0;} .statusfooter .statusdate{margin-left:auto;} /* Vece dodirne mete za ikone obrisi/uredi/prijavi (bile su skoro slijepljene). */ .statusactions{gap:14px;} .statusactions .stx{display:inline-flex; align-items:center; justify-content:center; min-width:28px; min-height:28px; opacity:.7;} } /* ---- 2) Navigacija u JEDNOM redu (kao na pocetnoj stranici) ---- .ue-tabs je imao flex-wrap:wrap, pa je 9 tabova + trazilica + Odjava prelazilo u drugi red. Sada se ne prelama nikad; ako ekran bude preuzak, red tabova se klize vodoravno umjesto da raste u visinu. Ograniceno na desktop — ispod 769px tabovi su padajuci meni (hamburger). */ @media(min-width:769px){ .ue-nav-inner{max-width:1760px; gap:10px; padding:8px 14px;} .ue-tabs{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;} .ue-tabs::-webkit-scrollbar{display:none;} .ue-nav .ue-tab{flex:0 0 auto; padding:8px 9px; font-size:13.5px; gap:7px;} .ue-nav .ue-tab i{font-size:12.5px;} #search.ue-search input,.ue-search input{width:150px;} } @media(min-width:1700px){ /* Na sirokim ekranima ima mjesta za raniji, prozracniji razmak. Prag je 1700 jer ispod njega prosireni tabovi vise ne stanu u jedan red. */ .ue-nav-inner{gap:14px; padding:8px 18px;} .ue-nav .ue-tab{padding:9px 14px; font-size:14px;} .ue-nav .ue-tab i{font-size:13px;} #search.ue-search input,.ue-search input{width:200px;} }