/* ============================================================================ Jezgra POS — globalni sloj teme. Sve boje su CSS varijable; tema se mijenja atributom [data-theme] na . Layout pojedine komponente živi u scoped CSS-u (npr. Blagajna.razor.css). ============================================================================ */ /* --- Svijetla tema (zadano) --- */ :root { --bg: #eaeef3; --surface: #ffffff; --surface-2: #f3f6fa; --surface-3: #e9eef4; --border: #e1e6ee; --border-2: #d4dae4; --text: #161a21; --text-dim: #6b7280; --text-mut: #99a0ad; --accent: #2563eb; --accent-2: #1d4ed8; --accent-soft: #dce7ff; --green: #15a34a; --green-soft: #d6f0df; --red: #e23b3b; --red-soft: #fbe0e0; --amber: #cf8005; --amber-soft: #fbedd2; --logo-chip: #ffffff; --shadow: 0 1px 2px rgba(20, 30, 50, .05), 0 8px 24px rgba(20, 30, 50, .06); /* Scrollbar (vertikalne skrol-liste: QuickKeys, lista stavki, modali) */ --scrollbar-thumb: #c4ccd8; --scrollbar-thumb-hover: #a9b3c2; /* Tipografija */ --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* Layout tokeni (nisu u prototipu kao varijable — uvedeni radi dosljednosti shell-a) */ --radius: 12px; --radius-sm: 8px; --gap: 10px; } /* --- Tamna tema --- */ [data-theme="dark"] { --bg: #0d1016; --surface: #161b23; --surface-2: #1c232d; --surface-3: #232c38; --border: #283039; --border-2: #323c49; --text: #e8ebef; --text-dim: #9aa3b0; --text-mut: #6c7686; --accent: #4f8cff; --accent-2: #3b78f0; --accent-soft: #1a2c4d; --green: #34d27f; --green-soft: #16341f; --red: #ff6161; --red-soft: #3a1d1d; --amber: #e8a93c; --amber-soft: #3a2c12; --logo-chip: #1c232d; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35); --scrollbar-thumb: #343f4d; --scrollbar-thumb-hover: #44505f; } /* --- Reset / baza --- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; /* Ugašen pull-to-refresh / swipe-back na touch terminalu. */ overscroll-behavior: none; font-family: var(--font-ui); background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; /* Touch POS: zabranjeno označavanje teksta (slučajni dvoklik/povlačenje pri horizontalnom skrolu ne smiju ostaviti plavi highlight). Stvarna polja za unos to vraćaju ispod. */ -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* Polja za unos i dalje dopuštaju označavanje/uređivanje (Pretraži, UNOS, PIN…). */ input, textarea, [contenteditable="true"] { -webkit-user-select: text; -moz-user-select: text; user-select: text; } #app { height: 100%; } button { font-family: inherit; color: inherit; cursor: pointer; } /* --- Scrollbar (tema-svjestan, vrijedi za sve vertikalne skrol-liste) ------- Stilizira generalni „ružni" sistemski scrollbar u skladu s temom. Horizontalne trake grupa/lokacija ostaju skrivene preko [data-hscroll] (veća specifičnost), pa ih ova pravila ne diraju (skrol je povlačenjem/kotačićem). POS cilja Chromium (Edge) → bogati ::-webkit-scrollbar izgled niže. Standardna svojstva (scrollbar-width/-color) daju se samo preglednicima bez ::-webkit-scrollbar (npr. Firefox); u Chromiumu bi ona isključila pseudo-elemente i izgubila zaobljeni stil. */ @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Monospace utility za cijene/iznose/EAN/PIN. */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* --- Dijeljeni UI primitivi (koriste ih header + više komponenti) --- */ .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .section-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-mut); white-space: nowrap; } /* Traka tabova (grupe lokacija / lokacije) — dijele GrupaLokacijaTabs i LokacijaTabs. Struktura: .lane-tabs [ .tabstrip (skrol) | .tab-add ]. */ .lane-tabs { display: flex; align-items: center; gap: 8px; flex: 1 1 0%; min-width: 0; } .tabstrip { display: flex; align-items: center; gap: 8px; flex: 1 1 0%; min-width: 0; overflow-x: auto; padding: 2px 0; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); } /* Skrolabilne trake bez vidljivog scrollbara — skrol je povlačenjem miša (pos.enableDragScroll) ili kotačićem. */ [data-hscroll] { scrollbar-width: none; -ms-overflow-style: none; } [data-hscroll]::-webkit-scrollbar { width: 0; height: 0; display: none; } .tab { display: flex; align-items: center; gap: 10px; padding: 8px 11px 8px 13px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); white-space: nowrap; cursor: pointer; flex-shrink: 0; opacity: .9; } .tab:hover { opacity: 1; } .tab.is-active { border: 1.5px solid var(--tab-color); background: color-mix(in srgb, var(--surface) 80%, var(--tab-color)); opacity: 1; } .tab .dot { width: 8px; height: 8px; background: var(--tab-color); } .tab.is-active .dot { width: 10px; height: 10px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tab-color) 28%, transparent); } .tab-text { line-height: 1.15; } .tab-name { font-weight: 600; font-size: 13.5px; } .tab-val { font-size: 11px; font-weight: 500; color: var(--text-mut); } .tab.is-active .tab-val { color: var(--tab-color); font-weight: 700; } .tab-x { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; color: var(--text-mut); font-size: 15px; line-height: 1; border-radius: 6px; flex-shrink: 0; } .tab.is-active .tab-x { color: var(--tab-color); } .tab-x:hover { color: var(--red); background: var(--red-soft); } .tab-add { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; border: 1.5px dashed var(--border-2); background: transparent; color: var(--accent); flex: 0 0 auto; align-self: center; } .tab-add:hover { background: var(--accent-soft); border-color: var(--accent); } h1:focus { outline: none; } /* --- Modali (zajednički primitivi za sve dijaloge) --- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(8, 12, 20, .55); backdrop-filter: blur(2px); } .modal-panel { width: var(--modal-w, 460px); max-width: 100%; max-height: 92vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .modal-title { font-size: 15px; font-weight: 700; } .modal-x { width: 30px; height: 30px; border: none; background: var(--surface-2); border-radius: 8px; font-size: 17px; color: var(--text-dim); } .modal-x:hover { background: var(--surface-3); color: var(--text); } .modal-body { padding: 18px; overflow-y: auto; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--border); } /* Polja u dijalozima */ .field { margin-bottom: 14px; } .field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; } .field-input { width: 100%; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: var(--font-ui); font-size: 14px; } .field-input:focus { outline: none; border-color: var(--accent); background: var(--surface); } /* Gumbi u dijalozima */ .btn { height: 42px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; } .btn:hover:not(:disabled) { background: var(--surface-3); } .btn:disabled { opacity: .5; cursor: default; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--accent-2); } .btn-green { background: var(--green); border-color: var(--green); color: #fff; } .btn-danger { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, var(--border)); color: var(--red); } /* --- Loading / error UI (zadržano iz template-a, u-POS boje) --- */ #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 1rem; color: white; } .blazor-error-boundary::after { content: "Došlo je do pogreške."; } .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto 0 auto; } .loading-progress circle { fill: none; stroke: #d4dae4; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: #2563eb; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; color: #6b7280; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Učitavanje"); }