/* Tema prati CMS (Profil -> Svijetli/Tamni rezim): , vidi ludo_theme() u functions.php. Boje ispod su jedine koje se mijenjaju izmedju tema; narandzasta ispuna (#fca01c) i boje igraca su iste u obje. */ :root { color-scheme: dark; --l-bg: #131a24; --l-card: #1c2431; --l-border: #263041; --l-border-strong: #2c3646; --l-text: #e6e8ec; --l-text-2: #dfe3e9; --l-text-strong: #ffffff; --l-muted: #8a94a6; --l-faint: #5c6779; --l-accent-text: #fca01c; --l-btn2-bg: #263041; --l-btn2-text: #dfe3e9; --l-turn-bg: #2a2618; --l-pop-bg: #0d131c; --l-scroll: #3a4556; --l-danger-text: #f0a9a5; --l-note-text: #f0c674; --l-success-text: #45c4a0; --l-shadow: rgba(0, 0, 0, .5); } :root[data-theme="light"] { color-scheme: light; --l-bg: #ffffff; --l-card: #f7f8fa; --l-border: #e2e5ea; --l-border-strong: #d7dbe2; --l-text: #1a2130; --l-text-2: #3a4453; --l-text-strong: #10151d; --l-muted: #667085; --l-faint: #8a94a6; --l-accent-text: #ac6602; --l-btn2-bg: #e9ecf1; --l-btn2-text: #1a2130; --l-turn-bg: #fff4e0; --l-pop-bg: #ffffff; --l-scroll: #c3c9d3; --l-danger-text: #db3a33; --l-note-text: #8a6100; --l-success-text: #2a856b; --l-shadow: rgba(16, 21, 29, .18); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--l-bg); color: var(--l-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .ludo-wrap { max-width: 760px; margin: 0 auto; padding: 16px 12px 40px; } .ludo-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .ludo-title { font-size: 20px; font-weight: 700; margin: 0; } .ludo-back { color: var(--l-muted); text-decoration: none; font-size: 14px; } .ludo-back:hover { color: var(--l-accent-text); } .ludo-header-links { display: flex; gap: 14px; align-items: center; } /* ===== Lobi ===== */ .ludo-card { background: var(--l-card); border: 1px solid var(--l-border); border-radius: 12px; padding: 16px; margin-bottom: 16px; } .ludo-card h2 { font-size: 15px; margin: 0 0 12px; } .ludo-create-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .ludo-create-form select { background: var(--l-bg); border: 1px solid var(--l-border-strong); border-radius: 8px; color: var(--l-text); padding: 8px 10px; font-family: inherit; font-size: 14px; } .ludo-create-form label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--l-muted); } .ludo-btn { background: #fca01c; color: #131a24; border: none; border-radius: 8px; padding: 9px 18px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-block; white-space: nowrap; /* i za u lobiju */ } .ludo-btn:disabled { opacity: .5; cursor: default; } .ludo-btn-secondary { background: var(--l-btn2-bg); color: var(--l-btn2-text); } .ludo-room-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--l-border); } .ludo-room-row:last-child { border-bottom: none; } .ludo-room-title { flex: 1; font-size: 14px; } .ludo-room-title small { display: block; color: var(--l-muted); font-size: 12px; } .ludo-empty { color: var(--l-muted); font-size: 13px; padding: 6px 0; } .ludo-leader-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; } .ludo-leader-row .rank { width: 22px; color: var(--l-muted); } .ludo-leader-row .wins { margin-left: auto; color: var(--l-accent-text); font-weight: 700; } /* ===== Soba (cekaonica) ===== */ .ludo-seat-slot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; margin-bottom: 8px; background: var(--l-bg); border: 1px solid var(--l-border); } .ludo-seat-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .ludo-seat-empty { color: var(--l-faint); font-style: italic; } .ludo-player-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--l-border); } /* ===== Tabla ===== */ .ludo-game-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; } /* Kartice igraca (renderPlayers() u ludo.js) - dvije trake iste visine iznad i ispod table, svaka kartica uz cosak svoje kucice; desna kartica je u ogledalu. */ .ludo-players-strip { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 40px; } /* Slot = kartica + (samo kod igraca koji gleda) dugme za reakciju, sa unutrasnje strane */ .ludo-pslot { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: calc(50% - 4px); } .ludo-pslot-right { flex-direction: row-reverse; } .ludo-pcard { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 10px 3px 3px; border-radius: 20px; background: var(--l-card); border: 1px solid var(--l-border); outline: none; } .ludo-pcard-right { flex-direction: row-reverse; padding: 3px 3px 3px 10px; text-align: right; } .ludo-pcard-empty { visibility: hidden; } .ludo-pcard-turn { border-color: #fca01c; background: var(--l-turn-bg); box-shadow: 0 0 0 1px #fca01c; } .ludo-pcard-gone { opacity: .5; } .ludo-pcard-gone .ludo-pcard-name { text-decoration: line-through; } .ludo-pcard:focus-visible { box-shadow: 0 0 0 2px #fca01c; } .ludo-pcard-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--l-border); border: 2px solid var(--seat-color, #8a94a6); } .ludo-pcard-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .ludo-pcard-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ludo-pcard-meta { display: flex; align-items: center; gap: 6px; } .ludo-pcard-right .ludo-pcard-meta { flex-direction: row-reverse; } .ludo-tray { display: flex; gap: 3px; } .ludo-pawn-mini { width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 1.5px solid var(--seat-color, #8a94a6); } .ludo-pawn-mini-home { background: var(--seat-color, #8a94a6); } #ludo-turn-timer { font-size: 11px; font-weight: 700; color: var(--l-accent-text); white-space: nowrap; } #ludo-turn-timer.ludo-timer-low { color: #e0554f; } /* Puno ime na dodir/fokus kartice - lebdi, ne pomjera raspored */ .ludo-pcard-pop { display: none; position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 20; background: var(--l-pop-bg); border: 1px solid #fca01c; border-radius: 6px; padding: 4px 8px; font-size: 12px; white-space: nowrap; pointer-events: none; } .ludo-pcard-right .ludo-pcard-pop { left: auto; right: 0; } #ludo-players-bottom .ludo-pcard-pop { top: auto; bottom: 100%; margin: 0 0 4px; } .ludo-pcard:focus .ludo-pcard-pop { display: block; } /* ===== Emoji reakcije ===== */ .ludo-react-btn { flex: none; width: 34px; height: 34px; border-radius: 50%; padding: 0; background: var(--l-card); border: 1px solid var(--l-border); cursor: pointer; font-size: 18px; line-height: 1; transition: opacity .2s, border-color .2s; } .ludo-react-btn:hover, .ludo-react-btn:focus-visible, .ludo-react-btn[aria-expanded="true"] { border-color: #fca01c; outline: none; } .ludo-react-btn.ludo-react-cooldown { opacity: .4; cursor: default; } .ludo-react-picker { position: fixed; z-index: 40; display: grid; grid-template-columns: repeat(4, 42px); gap: 4px; padding: 6px; background: var(--l-card); border: 1px solid #fca01c; border-radius: 12px; box-shadow: 0 8px 24px var(--l-shadow); } .ludo-react-picker[hidden] { display: none; } .ludo-react-picker button { width: 42px; height: 42px; padding: 0; border: none; border-radius: 8px; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; } .ludo-react-picker button:hover, .ludo-react-picker button:focus-visible { background: var(--l-border); outline: none; } .ludo-reaction-fly { position: fixed; z-index: 30; pointer-events: none; font-size: 46px; line-height: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); } .ludo-board-outer { margin-bottom: 10px; } .ludo-board-col { display: flex; flex-direction: column; gap: 6px; margin: 0 auto; } #ludo-board { position: relative; width: 100%; /* sirinu odredjuje .ludo-board-col, vidi "Raspored stranice igre" */ aspect-ratio: 1 / 1; background-image: url('board.jpg'); background-size: 100% 100%; background-repeat: no-repeat; border: 1px solid var(--l-border); border-radius: 12px; overflow: hidden; } .ludo-pawn { position: absolute; width: 6.2%; height: 6.2%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 2px 4px rgba(0,0,0,.4); padding: 0; cursor: default; z-index: 2; /* trajanje dolazi iz ludo.js (PAWN_SLIDE) da zvuk "tak" ostane sinhronizovan */ transition: left var(--ludo-pawn-slide, .2s) ease-in-out, top var(--ludo-pawn-slide, .2s) ease-in-out; } @media (prefers-reduced-motion: reduce) { .ludo-pawn { transition: none; } } /* Pion koji se moze pomjeriti ovim bacanjem - pulsira sa zlatnim prstenom; iznad kockice (z-index 4) da se uvijek moze kliknuti. transform mora zadrzati translate(-50%,-50%) jer njime se pion centrira na polje. */ .ludo-pawn-movable { cursor: pointer; z-index: 5; animation: ludo-pawn-movable .9s ease-in-out infinite; } @keyframes ludo-pawn-movable { 0%, 100% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 0 0 3px #fca01c, 0 0 0 3px rgba(252,160,28,.9); } 50% { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 0 0 3px #fca01c, 0 0 0 15px rgba(252,160,28,0); } } @media (prefers-reduced-motion: reduce) { .ludo-pawn-movable { animation: none; box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 0 0 3px #fca01c; } } /* Kockica sjedi NA tabli, u centralnom "dijamant" polju - klik direktno na nju baca. Providna (.4) dok nije nas red, puna vidljivost (1) igracu na potezu. */ #ludo-dice { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15%; height: 15%; border-radius: 10px; background: var(--l-card); border: 2px solid rgba(255,255,255,.85); box-shadow: 0 2px 6px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--l-accent-text); z-index: 4; opacity: .4; transition: opacity .2s ease; } #ludo-dice img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; } #ludo-dice.ludo-dice-my-turn { opacity: 1; } #ludo-dice.ludo-dice-clickable { cursor: pointer; animation: ludo-dice-pulse 1.1s ease-in-out infinite; } #ludo-dice.ludo-dice-busy { pointer-events: none; opacity: .7; } /* Kockica se "kotrlja" dok traje zvuk - vide je svi (puna vidljivost), pa se otkriva broj. */ #ludo-dice.ludo-dice-rolling { opacity: 1; animation: ludo-dice-roll .26s ease-in-out infinite; } @keyframes ludo-dice-roll { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); } 30% { transform: translate(-50%, -50%) rotate(-14deg) scale(1.08); } 65% { transform: translate(-50%, -50%) rotate(12deg) scale(1.08); } } @media (prefers-reduced-motion: reduce) { #ludo-dice.ludo-dice-rolling { animation: none; } } @keyframes ludo-dice-pulse { 0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 0 0 rgba(252,160,28,.75); transform: translate(-50%, -50%) scale(1); } 50% { box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 0 16px rgba(252,160,28,0); transform: translate(-50%, -50%) scale(1.08); } } @media (prefers-reduced-motion: reduce) { #ludo-dice.ludo-dice-clickable { animation: none; } } #ludo-turn-info { font-size: 14px; color: var(--l-muted); text-align: center; margin-bottom: 10px; } #ludo-event-log { text-align: center; font-size: 13px; color: var(--l-muted); min-height: 18px; margin-bottom: 10px; } #ludo-message { display: none; background: rgba(224,85,79,.1); border: 1px solid rgba(224,85,79,.3); color: var(--l-danger-text); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; text-align: center; } .ludo-winner-banner { display: none; align-items: center; justify-content: center; gap: 10px; background: rgba(252,160,28,.12); border: 1px solid #fca01c; border-radius: 10px; padding: 14px; margin-bottom: 14px; font-weight: 700; font-size: 16px; } .ludo-rank-note { font-size: 12px; color: var(--l-note-text); text-align: center; margin: 0 0 8px; background: rgba(242,201,76,.08); border: 1px solid rgba(242,201,76,.3); border-radius: 8px; padding: 6px 10px; } .ludo-rank-note[hidden] { display: none; } /* ===== Prozorcic "Pravila igre" (ludo/rules.php) ===== Centriran preko cijelog prozora (ne vezan uz dugme) - u niskom iframe-u pored grupe dugme je u uskoj koloni, pa bi "tooltip" uz njega izletio van ekrana. */ .ludo-rules-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0,0,0,.6); } .ludo-rules-backdrop[hidden] { display: none; } .ludo-rules { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-color: var(--l-scroll) var(--l-card); background: var(--l-card); border: 1px solid var(--l-border); border-radius: 12px; padding: 16px 18px; box-shadow: 0 10px 30px var(--l-shadow); } .ludo-rules h2 { font-size: 17px; margin: 0 28px 4px 0; } .ludo-rules h3 { font-size: 12px; color: var(--l-accent-text); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .05em; } .ludo-rules ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--l-text-2); } .ludo-rules li { margin-bottom: 4px; } .ludo-rules strong { color: var(--l-text-strong); } .ludo-rules-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--l-muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; } .ludo-rules-close:hover, .ludo-rules-close:focus-visible { color: var(--l-accent-text); } /* ===== Raspored stranice igre ===== Isti HTML, dva rasporeda: - uspravno (podrazumijevano, mobilni): kolona koja popuni visinu prozora; traka igraca + tabla + traka igraca su jedan blok (.ludo-board-col) cija velicina se racuna iz STVARNO slobodnog prostora, pa 2 ili 4 igraca ne mijenjaju nista i nema skrolovanja. - sirok i nizak prozor (npr. igra pored otvorene grupe): tabla lijevo preko cijele visine, igraci/tajmer/red/poruke/dugmad u koloni desno */ .ludo-wrap-game { padding: 10px 12px 16px; } .ludo-game { display: flex; flex-direction: column; min-height: calc(100vh - 26px); /* 26px = gornji+donji padding .ludo-wrap-game */ min-height: calc(100dvh - 26px); /* mobilni: bez dijela ispod adresne trake */ } .ludo-back-game { align-self: flex-start; margin-bottom: 8px; } .ludo-game #ludo-turn-info { display: none; } /* uspravno: ko je na potezu vidi se po kartici */ .ludo-leave-wrap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } /* Stari preglednici (bez container query): procjena preko visine prozora. 250px = sve iznad i ispod bloka table; 260px = minimum da se pioni lako pogode. */ .ludo-board-col { width: min(100%, 480px, max(260px, calc(100vh - 250px))); } @supports (container-type: size) { .ludo-game { container-type: inline-size; } /* Blok table uzima sav slobodan prostor po visini, ali najvise koliko mu treba kad je tabla ogranicena sirinom - visak ostaje na dnu stranice, ne izmedju table i dugmadi. 92px = 2 trake (40px) + 2 razmaka (6px); 352 = 260 + 92. */ .ludo-board-outer { container-type: size; flex: 1 1 0; min-height: 352px; max-height: calc(min(100cqw, 480px) + 92px); } .ludo-board-col { width: min(100cqw, calc(100cqh - 92px), 480px); } } @media (min-aspect-ratio: 1/1) and (max-height: 720px) and (min-width: 560px) { .ludo-wrap-game { max-width: none; padding: 8px 12px; } .ludo-game { display: grid; min-height: 0; grid-template-columns: auto minmax(200px, 300px); grid-template-rows: repeat(8, auto) 1fr; grid-template-areas: "board back" "board winner" "board note" "board players" "board players2" "board turn" "board event" "board msg" "board leave"; column-gap: 16px; row-gap: 6px; justify-content: center; align-items: start; } /* Trake igraca izlaze iz bloka table u kolonu desno (display: contents) */ .ludo-board-outer, .ludo-board-col { display: contents; } .ludo-back-game { grid-area: back; justify-self: start; margin-bottom: 2px; } .ludo-game .ludo-winner-banner { grid-area: winner; margin-bottom: 0; } .ludo-game .ludo-rank-note { grid-area: note; margin: 0; text-align: left; } .ludo-game #ludo-players { grid-area: players; } .ludo-game #ludo-players-bottom { grid-area: players2; flex-direction: column-reverse; } /* Zuta pa Plava = redoslijed poteza */ .ludo-game #ludo-turn-info { grid-area: turn; display: block; text-align: left; margin-bottom: 0; } .ludo-game #ludo-board { grid-area: board; } .ludo-game #ludo-event-log { grid-area: event; text-align: left; margin-bottom: 0; } .ludo-game #ludo-message { grid-area: msg; margin-bottom: 0; } .ludo-leave-wrap { grid-area: leave; justify-content: flex-start; } /* 16px = gornji+donji padding; 240px = kolona desno (200px) + razmak + padding */ #ludo-board { width: min(640px, max(260px, calc(100vh - 16px)), calc(100vw - 240px)); } /* Kartice u koloni: jedna ispod druge, pune sirine, bez ogledala */ .ludo-players-strip { flex-direction: column; align-items: stretch; height: auto; gap: 6px; } .ludo-pslot, .ludo-pslot-right { max-width: none; flex-direction: row; } .ludo-pcard { flex: 1; } .ludo-pslot-empty { display: none; } .ludo-pcard-right { flex-direction: row; padding: 3px 10px 3px 3px; text-align: left; } .ludo-pcard-right .ludo-pcard-meta { flex-direction: row; } .ludo-pcard-right .ludo-pcard-pop { left: 0; right: auto; } #ludo-players-bottom .ludo-pcard-pop { top: 100%; bottom: auto; margin: 4px 0 0; } } /* ===== Lobi - raspored (index.php) ===== Kao i stranica igre: lobi popuni visinu prozora (iframe-a) i sama stranica ne skroluje. Kartice sa listama (.ludo-card-list) se po potrebi skupe (flex-shrink), a njihova lista (.ludo-card-scroll) tada skroluje unutar kartice. - uzak prozor (mobilni): sve u jednoj koloni - sirok prozor (npr. igra pored otvorene grupe): Nova igra / Moje / Otvorene lijevo, Ljestvica desno */ .ludo-wrap-lobby { padding: 12px 12px; } .ludo-lobby { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 24px); /* 24px = gornji+donji padding .ludo-wrap-lobby */ height: calc(100dvh - 24px); min-height: 360px; /* ispod toga radije skrol stranice nego necitljive liste */ } .ludo-lobby .ludo-header { margin-bottom: 0; flex: none; } .ludo-lobby-main, .ludo-lobby-side { display: contents; } /* uska kolona: kartice su direktno u .ludo-lobby */ .ludo-lobby .ludo-card { margin-bottom: 0; } .ludo-card-fixed { flex: none; } .ludo-card-list { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 96px; /* naslov + bar jedan red */ } .ludo-card-list h2 { flex: none; } .ludo-card-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--l-scroll) transparent; } @media (min-width: 640px) { .ludo-wrap-lobby { max-width: 980px; } .ludo-lobby { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head head" "main side"; gap: 12px; } .ludo-lobby .ludo-header { grid-area: head; } /* poruka "igra vise ne postoji" (istekao izazov) - red ispod naslova, preko obje kolone */ .ludo-lobby.ludo-lobby-has-note { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head head" "note note" "main side"; } .ludo-lobby .ludo-lobby-note { grid-area: note; margin: 0; } .ludo-lobby-main, .ludo-lobby-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; } .ludo-lobby-main { grid-area: main; } .ludo-lobby-side { grid-area: side; } } /* CMS stranica igre sa desnim panelom (ljestvica je tamo): lobi bez svoje kartice ljestvice, u jednoj koloni. Klasu na postavlja novosti/cms/cms-loader.js; u mini igri je nema. */ html.ludo-has-side .ludo-lobby-side { display: none; } @media (min-width: 640px) { html.ludo-has-side .ludo-wrap-lobby { max-width: 640px; } html.ludo-has-side .ludo-lobby { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main"; } html.ludo-has-side .ludo-lobby.ludo-lobby-has-note { grid-template-areas: "head" "note" "main"; } } /* Nizak prozor: zbijenije kartice da stane sto vise redova */ @media (max-height: 560px) { .ludo-lobby .ludo-title { font-size: 17px; } .ludo-lobby .ludo-card { padding: 10px 14px; } .ludo-lobby .ludo-card h2 { margin-bottom: 8px; } .ludo-lobby .ludo-room-row { padding: 6px 0; } .ludo-lobby .ludo-leader-row { padding: 4px 0; } }