:root { --zm: 1; } /* ════════════════════════════════════════════════════════════════════ rezija.css — REŽIJA (ZEV-REZIJA-V1) Dvorana ponoči: modro-črna podlaga, papirnato besedilo, jantarni kazalec (lučka na pultu). Rdeča in zelena sta rezervirani za tally. ════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(pisave/barlow-condensed-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(pisave/barlow-condensed-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(pisave/barlow-condensed-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(pisave/barlow-condensed-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(pisave/barlow-condensed-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(pisave/barlow-condensed-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: normal; font-display: swap; src: url(pisave/source-serif-4-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: normal; font-display: swap; src: url(pisave/source-serif-4-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: italic; font-display: swap; src: url(pisave/source-serif-4-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: italic; font-display: swap; src: url(pisave/source-serif-4-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url(pisave/source-serif-4-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url(pisave/source-serif-4-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ZEV-REZIJA-V77 lestvica: pisava 14/16/18/22/28/40/96, zaobljenosti 4/8/polno, razmiki 4/8/12/16/24 (orodja/krpa77.py) */ :root { --noc: #0E141B; --grafit: #151E28; --plast: #1C2733; --plast2: #243140; --crta: #2B3947; --papir: #ECE5D3; --siva: #9AA7B4; --temna: #6F7B87; --jantar: #E8B04B; --pgm: #E5484D; --pvw: #30C77B; --sans: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif; --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --r: calc(6px * var(--zm)); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--noc); color: var(--papir); font-family: var(--sans); font-weight: 500; font-size: calc(16px * var(--zm)); line-height: 1.3; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } button, input, select { font: inherit; color: inherit; } h1, h2, h3 { font-weight: 700; margin: 0; } .serif { font-family: var(--serif); } i.serif, .serif i, .odsek-pod, .besedilo { font-style: italic; } .tiho { color: var(--siva); } .namig { color: var(--temna); font-size: calc(16px * var(--zm)); margin: calc(8px * var(--zm)) 0; } .prazno { color: var(--siva); font-size: calc(16px * var(--zm)); padding: calc(10px * var(--zm)) 2px; } :focus-visible { outline: 2px solid var(--jantar); outline-offset: 2px; } .nalagam { display: grid; place-items: center; height: 100vh; color: var(--siva); font-size: calc(22px * var(--zm)); } /* ── gumbi ─────────────────────────────────────────────────────────── */ .gumb { display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--zm)); min-height: calc(40px * var(--zm)); padding: calc(6px * var(--zm)) calc(14px * var(--zm)); border-radius: var(--r); border: 1px solid var(--crta); background: var(--plast); cursor: pointer; font-weight: 600; font-size: calc(16px * var(--zm)); letter-spacing: .01em; touch-action: manipulation; user-select: none; } .gumb:hover { background: var(--plast2); } .gumb:active { transform: translateY(1px); } .gumb:disabled { opacity: .45; cursor: default; } .gumb.glavni { background: var(--jantar); border-color: var(--jantar); color: #1A1305; } .gumb.glavni:hover { background: #F1BE5E; } .gumb.tiho { background: transparent; } .gumb.ikona { width: calc(42px * var(--zm)); padding: 0; font-size: calc(22px * var(--zm)); line-height: 1; } .gumb.velik { min-height: calc(56px * var(--zm)); font-size: calc(21px * var(--zm)); padding: calc(8px * var(--zm)) calc(18px * var(--zm)); } .gumb.ogromen { min-height: calc(120px * var(--zm)); font-size: calc(38px * var(--zm)); font-weight: 800; width: 100%; border-radius: calc(8px * var(--zm)); } .gumb.majhen { min-height: calc(32px * var(--zm)); padding: 2px calc(10px * var(--zm)); font-size: calc(16px * var(--zm)); } .gumb.pgm { background: var(--pgm); border-color: var(--pgm); color: #fff; } .gumb.pvw { background: transparent; border-color: var(--pvw); color: var(--pvw); } .gumb.vklop { background: var(--jantar); color: #1A1305; border-color: var(--jantar); } input, select { background: var(--noc); border: 1px solid var(--crta); border-radius: var(--r); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); min-height: calc(40px * var(--zm)); } input[type=range] { padding: 0; min-height: calc(28px * var(--zm)); accent-color: var(--jantar); } input[type=checkbox] { min-height: 0; width: calc(20px * var(--zm)); height: calc(20px * var(--zm)); accent-color: var(--jantar); } label { display: grid; gap: calc(4px * var(--zm)); color: var(--siva); font-size: calc(16px * var(--zm)); } label > input, label > select { color: var(--papir); font-size: calc(16px * var(--zm)); } label.stikalo { display: flex; align-items: center; gap: calc(12px * var(--zm)); color: var(--papir); font-size: calc(16px * var(--zm)); } /* ── obvestilo in zveza ────────────────────────────────────────────── */ #obvestilo { position: fixed; left: 50%; bottom: calc(22px * var(--zm)); transform: translate(-50%, calc(30px * var(--zm))); opacity: 0; pointer-events: none; background: var(--papir); color: var(--noc); padding: calc(12px * var(--zm)) calc(18px * var(--zm)); border-radius: calc(8px * var(--zm)); font-weight: 600; font-size: calc(18px * var(--zm)); max-width: min(92vw, calc(640px * var(--zm))); z-index: 90; transition: opacity .2s, transform .2s; } #obvestilo.vidno { opacity: 1; transform: translate(-50%, 0); } #obvestilo.napaka { background: #FFD9D6; color: #5A0F0C; } body.brez-zveze::before { content: 'Ni povezave s strežnikom. Poskušam znova …'; position: fixed; top: 0; left: 0; right: 0; z-index: 95; background: var(--pgm); color: #fff; text-align: center; font-weight: 700; padding: calc(6px * var(--zm)); font-size: calc(18px * var(--zm)); } .zveza { display: flex; align-items: center; gap: calc(8px * var(--zm)); color: var(--siva); font-size: calc(16px * var(--zm)); white-space: nowrap; } .pika-zveza { width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: var(--pvw); } body.brez-zveze .pika-zveza { background: var(--pgm); } .pika-st { display: inline-block; width: calc(9px * var(--zm)); height: calc(9px * var(--zm)); border-radius: 50%; margin-right: calc(5px * var(--zm)); background: var(--temna); vertical-align: 1px; } .pika-st.da { background: var(--pvw); } .pika-st.mogoce { background: var(--jantar); } .pika-st.ne { background: var(--pgm); } /* ── vadbena oznaka (kot v partituri) ──────────────────────────────── */ .vadbena { display: inline-grid; place-items: center; min-width: calc(34px * var(--zm)); height: calc(30px * var(--zm)); padding: 0 calc(6px * var(--zm)); border: 1.5px solid var(--papir); border-radius: 2px; font-family: var(--serif); font-weight: 600; font-size: calc(18px * var(--zm)); line-height: 1; } .vadbena.prazna { border-style: dashed; border-color: var(--temna); color: var(--siva); font-family: var(--sans); font-weight: 500; font-size: calc(14px * var(--zm)); } .znacke { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .znacka { display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); padding: 2px calc(9px * var(--zm)) 2px calc(7px * var(--zm)); border-radius: calc(999px * var(--zm)); background: color-mix(in srgb, var(--b) 14%, transparent); border: 1px solid color-mix(in srgb, var(--b) 45%, transparent); font-size: calc(16px * var(--zm)); } .znacka::before { content: ''; width: calc(8px * var(--zm)); height: calc(8px * var(--zm)); border-radius: 50%; background: var(--b); } .znacka.vodi { background: var(--b); color: #10161D; font-weight: 700; } .znacka.vodi::before { background: #10161D; } .znacka.vrh { --b: var(--jantar); border-style: dashed; } .znacka.pgm-znacka { --b: var(--pgm); } .kam-st { display: inline-grid; place-items: center; min-width: calc(26px * var(--zm)); height: calc(26px * var(--zm)); border-radius: calc(4px * var(--zm)); padding: 0 calc(5px * var(--zm)); background: var(--b); color: #10161D; font-weight: 800; font-size: calc(16px * var(--zm)); margin-right: calc(6px * var(--zm)); } .kam-st.velik { min-width: calc(44px * var(--zm)); height: calc(44px * var(--zm)); font-size: calc(28px * var(--zm)); } .pika { display: inline-block; width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: var(--b); margin-right: calc(7px * var(--zm)); } /* ── vstop ─────────────────────────────────────────────────────────── */ .vstop { max-width: calc(560px * var(--zm)); margin: 0 auto; padding: calc(28px * var(--zm)) calc(18px * var(--zm)) calc(60px * var(--zm)); display: grid; gap: calc(18px * var(--zm)); } .vstop-glava { display: flex; gap: calc(16px * var(--zm)); align-items: center; } .vstop-glava h1 { font-size: calc(40px * var(--zm)); font-weight: 800; letter-spacing: .01em; } .vstop-glava p { margin: 0; color: var(--siva); font-size: calc(18px * var(--zm)); font-style: italic; } .znak { width: calc(54px * var(--zm)); height: calc(54px * var(--zm)); border: 2px solid var(--jantar); color: var(--jantar); display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: calc(32px * var(--zm)); border-radius: calc(4px * var(--zm)); } .vstop-karta { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(18px * var(--zm)); display: grid; gap: calc(16px * var(--zm)); } .vstop-karta.tiho { background: transparent; } .vstop-karta h2 { font-size: calc(22px * var(--zm)); } .vstop-karta p { margin: 0; } #v-koda { font-size: calc(40px * var(--zm)); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; text-align: center; } .vloge { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8px * var(--zm)); } .vloga { min-height: calc(52px * var(--zm)); border-radius: var(--r); border: 1px solid var(--crta); background: var(--noc); font-weight: 600; font-size: calc(18px * var(--zm)); cursor: pointer; } .vloga.izbrana { border-color: var(--jantar); background: color-mix(in srgb, var(--jantar) 16%, var(--noc)); } .izbor-kamer { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); margin-top: calc(8px * var(--zm)); } .kam-izbor { display: flex; gap: calc(12px * var(--zm)); align-items: center; text-align: left; padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: var(--r); border: 1px solid var(--crta); background: var(--noc); cursor: pointer; min-height: calc(56px * var(--zm)); } .kam-izbor b { font-size: calc(28px * var(--zm)); font-weight: 800; min-width: calc(26px * var(--zm)); } .kam-izbor span { display: grid; font-size: calc(16px * var(--zm)); line-height: 1.15; } .kam-izbor small { color: var(--jantar); } .kam-izbor.izbrana { border-color: var(--jantar); background: color-mix(in srgb, var(--jantar) 16%, var(--noc)); } .kam-izbor.zasedena { opacity: .7; } .napaka-vrstica { color: #FFB4AE; margin: 0; } .cakam { text-align: center; justify-items: center; } .cakam dl { display: grid; grid-template-columns: auto auto; gap: calc(4px * var(--zm)) calc(16px * var(--zm)); text-align: left; margin: 0; } .cakam dt { color: var(--siva); } .cakam dd { margin: 0; font-weight: 600; } .utrip { width: calc(18px * var(--zm)); height: calc(18px * var(--zm)); border-radius: 50%; background: var(--jantar); animation: utrip 1.6s ease-in-out infinite; } @keyframes utrip { 50% { opacity: .25; transform: scale(.7); } } .sobe { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(8px * var(--zm)); } .soba { width: 100%; display: flex; gap: calc(12px * var(--zm)); align-items: center; text-align: left; padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: var(--r); border: 1px solid var(--crta); background: var(--noc); cursor: pointer; } .soba b { font-size: calc(22px * var(--zm)); font-weight: 800; letter-spacing: .12em; color: var(--jantar); } .soba span { display: grid; } .soba small { color: var(--siva); } /* ── režiser ───────────────────────────────────────────────────────── */ .rez-ovoj { display: grid; grid-template-rows: auto auto auto 1fr; height: 100dvh; min-height: 100vh; } .rez-glava { display: flex; align-items: center; gap: calc(16px * var(--zm)); padding: calc(8px * var(--zm)) calc(14px * var(--zm)); background: var(--grafit); border-bottom: 1px solid var(--crta); } .koda { font-weight: 800; font-size: calc(22px * var(--zm)); letter-spacing: .14em; color: var(--jantar); background: transparent; border: 1.5px solid var(--jantar); border-radius: calc(4px * var(--zm)); padding: 2px calc(10px * var(--zm)); cursor: pointer; } .polozaj { display: flex; align-items: center; gap: calc(12px * var(--zm)); flex: 1; min-width: 0; } .p-stavek { font-size: calc(28px * var(--zm)); font-weight: 800; color: var(--siva); } .p-takt { font-size: calc(40px * var(--zm)); font-weight: 800; line-height: 1; min-width: calc(70px * var(--zm)); } .p-takt small { font-size: calc(18px * var(--zm)); color: var(--temna); font-weight: 600; } .p-opis { display: grid; line-height: 1.15; min-width: 0; } .p-opis b { font-size: calc(18px * var(--zm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-opis i { color: var(--siva); font-size: calc(16px * var(--zm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-bralec { margin-left: auto; color: var(--siva); font-size: calc(16px * var(--zm)); white-space: nowrap; } .rez-premik { display: flex; gap: calc(8px * var(--zm)); } .zavihki { display: flex; gap: calc(4px * var(--zm)); padding: 0 calc(10px * var(--zm)); background: var(--grafit); border-bottom: 1px solid var(--crta); align-items: stretch; overflow-x: auto; } .zavihki button { background: none; border: 0; border-bottom: calc(3px * var(--zm)) solid transparent; padding: calc(10px * var(--zm)) calc(14px * var(--zm)) calc(8px * var(--zm)); font-weight: 600; font-size: calc(18px * var(--zm)); color: var(--siva); cursor: pointer; white-space: nowrap; } .zavihki button.izbran { color: var(--papir); border-bottom-color: var(--jantar); } .shranjeno { margin-left: auto; align-self: center; font-size: calc(14px * var(--zm)); color: var(--temna); white-space: nowrap; padding: 0 calc(6px * var(--zm)); } .shranjeno.caka { color: var(--jantar); } .shranjeno.ne { color: var(--pgm); } .rez-vsebina { overflow: auto; padding: calc(12px * var(--zm)) calc(14px * var(--zm)) calc(24px * var(--zm)); } .zivo-mreza { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(calc(330px * var(--zm)), 1fr); gap: calc(16px * var(--zm)); align-items: start; } .cas-okvir { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); height: calc(300px * var(--zm)); padding: calc(4px * var(--zm)); } .cas-okvir.visok { height: calc(330px * var(--zm)); } .cas-okvir.nizek { height: calc(118px * var(--zm)); border-radius: 0; border-width: 1px 0 0; } canvas.casovnica { width: 100%; height: 100%; display: block; cursor: pointer; touch-action: manipulation; } .zivo-spodaj { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(12px * var(--zm)); margin-top: calc(12px * var(--zm)); } .odsek-karta { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(14px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); align-content: start; } .odsek-glava { display: grid; grid-template-columns: auto 1fr auto; gap: calc(12px * var(--zm)); align-items: center; } .odsek-glava .vadbena { min-width: calc(46px * var(--zm)); height: calc(42px * var(--zm)); font-size: calc(28px * var(--zm)); } .odsek-naslov { font-size: calc(21px * var(--zm)); font-weight: 700; line-height: 1.1; } .odsek-pod { color: var(--siva); font-size: calc(16px * var(--zm)); } .odsek-cas { display: grid; text-align: right; line-height: 1; } .odsek-cas b { font-size: calc(28px * var(--zm)); font-weight: 800; } .odsek-cas small { color: var(--temna); font-size: calc(14px * var(--zm)); } .besedilo { font-size: calc(18px * var(--zm)); line-height: 1.4; color: var(--papir); border-left: calc(3px * var(--zm)) solid var(--jantar); padding-left: calc(10px * var(--zm)); } .kmalu-okvir { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(12px * var(--zm)) calc(14px * var(--zm)); display: grid; gap: calc(8px * var(--zm)); align-content: start; } .kmalu-okvir h3 { font-size: calc(16px * var(--zm)); color: var(--siva); font-weight: 600; } .kmalu { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(4px * var(--zm)); } .kmalu li { display: grid; grid-template-columns: calc(62px * var(--zm)) 1fr; gap: calc(12px * var(--zm)); align-items: center; padding: calc(5px * var(--zm)) 0; border-bottom: 1px solid var(--crta); font-size: calc(16px * var(--zm)); } .kmalu li:last-child { border-bottom: 0; } .kmalu .cez { display: grid; font-weight: 700; line-height: 1.05; } .kmalu .cez small { color: var(--temna); font-weight: 500; font-size: calc(14px * var(--zm)); } .kmalu li.e-kader { color: var(--papir); } .kmalu li.e-vrh { color: var(--jantar); } .kmalu li.e-tempo, .kmalu li.e-fermata { color: var(--siva); font-style: italic; font-family: var(--serif); font-size: calc(16px * var(--zm)); } .kam-banka { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .kam { position: relative; display: grid; grid-template-columns: 1fr auto; background: var(--plast); border: 1px solid transparent; border-left: calc(6px * var(--zm)) solid var(--b); border-radius: var(--r); min-height: calc(86px * var(--zm)); overflow: hidden; } .kam.dodaj { border-left-color: var(--crta); display: grid; place-items: center; color: var(--siva); cursor: pointer; font-weight: 600; font-size: calc(16px * var(--zm)); grid-template-columns: 1fr; } .kam-telo { background: none; border: 0; text-align: left; padding: calc(8px * var(--zm)) calc(6px * var(--zm)) calc(8px * var(--zm)) calc(10px * var(--zm)); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: calc(4px * var(--zm)) calc(8px * var(--zm)); cursor: pointer; } .kam-telo .kam-st { grid-row: span 2; min-width: calc(34px * var(--zm)); height: calc(34px * var(--zm)); font-size: calc(22px * var(--zm)); margin: 0; align-self: start; } .kam-ime { font-size: calc(16px * var(--zm)); font-weight: 600; line-height: 1.1; display: grid; } .kam-ime small { color: var(--siva); font-weight: 500; font-size: calc(14px * var(--zm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kam-kader { grid-column: 2; font-size: calc(18px * var(--zm)); font-weight: 800; line-height: 1.05; display: grid; } .kam-kader small { font-size: calc(14px * var(--zm)); font-weight: 500; color: var(--siva); } .kam-vzivo { border: 0; border-left: 1px solid var(--crta); background: transparent; width: calc(52px * var(--zm)); font-weight: 800; font-size: calc(16px * var(--zm)); cursor: pointer; color: var(--siva); } .kam-vzivo:hover { background: color-mix(in srgb, var(--pgm) 25%, transparent); color: #fff; } .kam.pvw { box-shadow: inset 0 0 0 2px var(--pvw); } .kam.pgm { background: color-mix(in srgb, var(--pgm) 26%, var(--plast)); box-shadow: inset 0 0 0 2px var(--pgm); } .kam.pgm .kam-vzivo { background: var(--pgm); color: #fff; } .kam.izbrana { outline: 2px solid var(--papir); outline-offset: 1px; } .kam.naslednja .kam-telo .kam-st { outline: 2px dashed var(--jantar); outline-offset: 2px; } .graditelj { margin-top: calc(12px * var(--zm)); background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(12px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); } .gr-glava { display: flex; align-items: center; gap: calc(12px * var(--zm)); } .gr-glava b { flex: 1; font-size: calc(18px * var(--zm)); } .gr-vrsta, .gr-hitra { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .izb { min-height: calc(38px * var(--zm)); padding: calc(4px * var(--zm)) calc(11px * var(--zm)); border-radius: calc(999px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); cursor: pointer; font-size: calc(16px * var(--zm)); font-weight: 600; } .izb.izbran { background: var(--papir); color: var(--noc); border-color: var(--papir); } .gr-hitra .izb { border-style: dashed; font-weight: 500; } .gr-vnos { display: flex; gap: calc(8px * var(--zm)); } .gr-vnos input { flex: 1; min-width: 0; } /* kadrirka */ .kadrirka { display: grid; gap: calc(12px * var(--zm)); } .kad-orodja { display: flex; flex-wrap: wrap; gap: calc(12px * var(--zm)); align-items: end; justify-content: space-between; } .stavki { display: flex; gap: calc(4px * var(--zm)); } .stavki button, .bra-stavki button { width: calc(44px * var(--zm)); height: calc(44px * var(--zm)); border-radius: calc(4px * var(--zm)); border: 1.5px solid var(--crta); background: var(--noc); font-family: var(--serif); font-weight: 600; font-size: calc(22px * var(--zm)); cursor: pointer; } .stavki button.izbran { border-color: var(--jantar); color: var(--jantar); } .kad-gumbi { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); align-items: end; } label.majhno { font-size: calc(14px * var(--zm)); } label.majhno select { min-height: calc(40px * var(--zm)); } .kad-povzetek { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)) calc(16px * var(--zm)); align-items: baseline; margin: calc(6px * var(--zm)) 0 calc(8px * var(--zm)); } .kad-povzetek b { font-size: calc(22px * var(--zm)); } .kad-povzetek .serif { color: var(--siva); font-style: italic; } .kad-tabela { width: 100%; border-collapse: collapse; font-size: calc(16px * var(--zm)); } .kad-tabela th { text-align: left; color: var(--temna); font-weight: 600; font-size: calc(14px * var(--zm)); padding: calc(4px * var(--zm)) calc(6px * var(--zm)); border-bottom: 1px solid var(--crta); } .kad-tabela td { padding: calc(4px * var(--zm)) calc(6px * var(--zm)); border-bottom: 1px solid var(--crta); vertical-align: middle; } .kad-tabela td:first-child { white-space: nowrap; } .kad-tabela td:first-child small { color: var(--siva); margin-left: calc(6px * var(--zm)); font-family: var(--serif); font-weight: 600; } .kad-tabela td:nth-child(2) { white-space: nowrap; } .kad-tabela select, .kad-tabela input { min-height: calc(36px * var(--zm)); padding: calc(4px * var(--zm)) calc(6px * var(--zm)); font-size: calc(16px * var(--zm)); } .kad-tabela .k-takt { width: calc(70px * var(--zm)); } .kad-tabela td:nth-child(6) input { width: 100%; min-width: calc(140px * var(--zm)); } .kad-tabela tr.predlog td { background: color-mix(in srgb, var(--jantar) 5%, transparent); } /* shema */ .shema-ovoj { display: grid; grid-template-columns: minmax(0, 1fr) calc(310px * var(--zm)); gap: calc(16px * var(--zm)); align-items: start; } .shema-platno { background: #0B1117; border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); overflow: hidden; } svg.shema { width: 100%; height: auto; display: block; touch-action: none; user-select: none; } .shema .oder { fill: #16202B; stroke: #2E3C4B; stroke-width: 2; } .shema .praktikabel { fill: none; stroke: #2A3747; stroke-width: 14; stroke-linecap: round; } .shema .kabina { fill: #141C26; stroke: #2E3C4B; stroke-dasharray: 6 5; } .shema .dvorana { fill: #4F5C69; font: 600 calc(18px * var(--zm)) var(--sans); text-anchor: middle; } .shema .zona ellipse { fill: rgba(236, 229, 211, .045); stroke: #3A4958; stroke-width: 1.5; } .shema .zona text { fill: #9AA7B4; font: 600 calc(17px * var(--zm)) var(--sans); text-anchor: middle; pointer-events: none; } .shema .z-sop_solo ellipse { stroke: #FFD166; } .shema .z-ten_solo ellipse { stroke: #FF9F5A; } .shema .z-vl_solo ellipse { stroke: #FF7EB6; } .shema .z-zbor ellipse { stroke: #7CC4FF; } .shema .z-dirigent ellipse { stroke: var(--papir); } .shema .kamera .stozec { fill: var(--b); fill-opacity: .12; stroke: var(--b); stroke-opacity: .45; stroke-width: 1.5; pointer-events: none; } .shema .kamera .smer { stroke: var(--b); stroke-width: 3; } .shema .kamera .rocaj { fill: var(--noc); stroke: var(--b); stroke-width: 3; cursor: grab; } .shema .kamera .telo { fill: var(--b); stroke: #0B1117; stroke-width: 3; cursor: move; } .shema .kamera.izbrana .telo { stroke: var(--papir); stroke-width: 4; } .shema .kamera .st { fill: #0E141B; font: 800 calc(24px * var(--zm)) var(--sans); text-anchor: middle; pointer-events: none; } .shema .kamera .ime { fill: var(--papir); font: 600 calc(16px * var(--zm)) var(--sans); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #0B1117; stroke-width: calc(4px * var(--zm)); } .shema-panel { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(12px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); } .shema-panel h3 { font-size: calc(18px * var(--zm)); } .sh-seznam { display: grid; gap: calc(4px * var(--zm)); } .sh-kam { display: flex; align-items: center; gap: calc(4px * var(--zm)); text-align: left; background: none; border: 1px solid transparent; border-radius: var(--r); padding: calc(5px * var(--zm)) calc(6px * var(--zm)); cursor: pointer; font-size: calc(16px * var(--zm)); } .sh-kam small { margin-left: auto; color: var(--temna); } .sh-kam.izbrana { border-color: var(--crta); background: var(--plast); } .sh-gumbi { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .sh-uredi { display: grid; gap: calc(12px * var(--zm)); border-top: 1px solid var(--crta); padding-top: calc(12px * var(--zm)); } .sh-uredi label b { color: var(--papir); margin-left: calc(6px * var(--zm)); } /* preddverje */ .preddverje { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: calc(16px * var(--zm)); align-items: start; } .preddverje section { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(14px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); align-content: start; } .preddverje h3 { font-size: calc(18px * var(--zm)); } .pd-vabilo { grid-template-columns: auto 1fr; } .pd-koda { display: grid; align-content: start; gap: calc(4px * var(--zm)); } .pd-koda small { color: var(--siva); } .pd-koda b { font-size: calc(64px * var(--zm)); font-weight: 800; letter-spacing: .12em; color: var(--jantar); line-height: 1; } .pd-koda span { font-style: italic; color: var(--siva); } .pd-qr { display: grid; justify-items: center; gap: calc(4px * var(--zm)); } .pd-qr svg { width: calc(170px * var(--zm)); height: calc(170px * var(--zm)); background: #fff; border-radius: calc(4px * var(--zm)); } .pd-qr small { color: var(--temna); font-size: calc(14px * var(--zm)); word-break: break-all; text-align: center; } .pd-nastavitve { grid-column: 1 / -1; display: grid; gap: calc(12px * var(--zm)); grid-template-columns: repeat(auto-fill, minmax(calc(220px * var(--zm)), 1fr)); align-items: end; } .pd-udelezenci ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(8px * var(--zm)); } .pd-udelezenci li { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); padding: calc(8px * var(--zm)); border-radius: var(--r); background: var(--noc); border: 1px solid var(--crta); } .pd-udelezenci li.caka { border-color: var(--jantar); } .pd-ime { flex: 1; min-width: calc(160px * var(--zm)); display: grid; } .pd-ime small { color: var(--siva); } .pd-udelezenci select { min-height: calc(36px * var(--zm)); padding: calc(4px * var(--zm)) calc(6px * var(--zm)); } .pd-kamere, .pd-tally { grid-column: 1 / -1; } .pd-qr-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--zm)), 1fr)); gap: calc(12px * var(--zm)); } .pd-qr-mreza figure { margin: 0; display: grid; gap: calc(8px * var(--zm)); justify-items: center; } .pd-qr-mreza figure div { background: #fff; border-radius: calc(4px * var(--zm)); width: calc(132px * var(--zm)); height: calc(132px * var(--zm)); } .pd-qr-mreza figure svg { width: calc(132px * var(--zm)); height: calc(132px * var(--zm)); display: block; } .pd-qr-mreza figcaption { display: flex; align-items: center; font-size: calc(16px * var(--zm)); text-align: center; } .pd-tally code { display: block; background: var(--noc); border: 1px solid var(--crta); border-radius: var(--r); padding: calc(10px * var(--zm)); word-break: break-all; font-size: calc(14px * var(--zm)); color: var(--jantar); } .pd-tally p { margin: 0; color: var(--siva); } /* partitura */ .partitura-ovoj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(16px * var(--zm)); align-items: start; } .pt-pregled { display: grid; gap: calc(12px * var(--zm)); } .pt-pregled h2 { font-size: calc(28px * var(--zm)); } .pt-pregled > p { margin: 0; } .pt-stavek { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(14px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); } .pt-stavek header { display: grid; grid-template-columns: auto 1fr auto; gap: calc(12px * var(--zm)); align-items: center; } .pt-stavek header > div { display: grid; line-height: 1.2; } .pt-stavek header b { font-size: calc(22px * var(--zm)); } .pt-stavek header i { color: var(--siva); } .pt-stavek header small { color: var(--temna); } .pt-st { font-family: var(--serif); font-weight: 600; font-size: calc(28px * var(--zm)); width: calc(46px * var(--zm)); height: calc(46px * var(--zm)); display: grid; place-items: center; border: 1.5px solid var(--papir); border-radius: 2px; } .pt-cas { display: grid; text-align: right; font-size: calc(22px * var(--zm)); font-weight: 800; line-height: 1.1; } .pt-cas small { font-size: calc(14px * var(--zm)); color: var(--temna); font-weight: 500; } .pt-stavek > p { margin: 0; font-family: var(--serif); font-size: calc(16px * var(--zm)); line-height: 1.5; color: #D9D2C1; max-width: 70ch; } .pt-odseki { display: grid; gap: calc(4px * var(--zm)); } .pt-odsek { display: grid; grid-template-columns: auto calc(110px * var(--zm)) 1fr; gap: calc(12px * var(--zm)); align-items: center; text-align: left; background: none; border: 0; border-top: 1px solid var(--crta); padding: calc(6px * var(--zm)) 2px; cursor: pointer; } .pt-odsek > span:nth-child(2) { display: grid; font-size: calc(16px * var(--zm)); } .pt-odsek small { color: var(--temna); } .pt-stavek details summary { cursor: pointer; color: var(--siva); } .pt-stavek details p { font-size: calc(16px * var(--zm)); line-height: 1.55; font-style: italic; } .pt-pdf { position: sticky; top: 0; display: grid; gap: calc(8px * var(--zm)); } .pdf-orodja { display: flex; gap: calc(12px * var(--zm)); align-items: center; flex-wrap: wrap; } .pdf-stran { background: #1A232E; border-radius: calc(8px * var(--zm)); min-height: calc(200px * var(--zm)); } .pdf-ovoj { position: relative; line-height: 0; margin: 0 auto; } .pdf-ovoj canvas { display: block; border-radius: calc(4px * var(--zm)); } .pdf-takt { position: absolute; border: calc(3px * var(--zm)) solid var(--jantar); background: rgba(232, 176, 75, .16); border-radius: calc(4px * var(--zm)); pointer-events: none; transition: left .12s, top .12s, width .12s, height .12s; box-shadow: 0 0 0 calc(9999px * var(--zm)) rgba(10, 14, 20, .10); } .pdf-prazno { display: grid; gap: calc(16px * var(--zm)); justify-items: center; text-align: center; padding: calc(40px * var(--zm)) calc(20px * var(--zm)); color: var(--siva); } .pdf-prazno p { max-width: 42ch; margin: 0; } /* ── bralec not ───────────────────────────────────────────────────── */ .bra-ovoj { display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; min-height: 100vh; } .bra-glava { display: flex; align-items: center; gap: calc(12px * var(--zm)); padding: calc(8px * var(--zm)) calc(14px * var(--zm)); background: var(--grafit); border-bottom: 1px solid var(--crta); } .bra-polozaj { display: flex; align-items: center; gap: calc(12px * var(--zm)); flex: 1; min-width: 0; font-size: calc(18px * var(--zm)); } .bra-polozaj b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bra-polozaj i { color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bra-polozaj span { color: var(--temna); white-space: nowrap; } .bra-telo { display: grid; grid-template-columns: minmax(0, 1fr) calc(340px * var(--zm)); min-height: 0; } .bra-partitura { overflow: auto; padding: calc(10px * var(--zm)); } .bra-nadzor { border-left: 1px solid var(--crta); padding: calc(12px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); align-content: start; overflow: auto; background: var(--grafit); } .bra-veliko { display: grid; gap: calc(8px * var(--zm)); } .bv-takt { font-size: calc(96px * var(--zm)); font-weight: 800; line-height: .9; } .bv-takt small { font-size: calc(28px * var(--zm)); color: var(--temna); } .bv-met { color: var(--siva); font-size: calc(18px * var(--zm)); } .ferm { color: var(--jantar); font-style: italic; font-family: var(--serif); } .bv-nasl { display: flex; align-items: center; gap: calc(8px * var(--zm)); color: var(--siva); } .bra-vrsta { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8px * var(--zm)); } .bra-tek { display: grid; gap: calc(8px * var(--zm)); } .bra-faktor { display: flex; gap: calc(8px * var(--zm)); align-items: center; } .bra-faktor span { min-width: calc(64px * var(--zm)); text-align: center; font-size: calc(22px * var(--zm)); font-weight: 800; } .bra-stavki { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)); } /* ── kamera (tablica) ─────────────────────────────────────────────── */ body.kam-tab { overflow: hidden; } .tab { position: relative; height: 100dvh; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(calc(280px * var(--zm)), 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: 'glava glava' 'bus bus' 'zdaj desno' 'cas cas'; padding: calc(22px * var(--zm)) calc(26px * var(--zm)) calc(16px * var(--zm)); gap: calc(12px * var(--zm)) calc(18px * var(--zm)); } .tally-okvir { position: fixed; inset: 0; pointer-events: none; border: 0 solid transparent; z-index: 5; transition: border-color .1s; } .tab.pgm .tally-okvir { border: calc(20px * var(--zm)) solid var(--pgm); } .tab.pvw .tally-okvir { border: calc(14px * var(--zm)) solid var(--pvw); } .tab.kmalu .tally-okvir { border: calc(8px * var(--zm)) dashed var(--jantar); animation: kmalu 1.4s ease-in-out infinite; } @keyframes kmalu { 50% { border-color: rgba(232, 176, 75, .35); } } .tab.pgm { background: #1C0D10; } .tab-glava { display: grid; grid-template-columns: auto 1fr auto; gap: calc(16px * var(--zm)); align-items: center; } .tab-st { font-size: clamp(calc(56px * var(--zm)), 13vmin, calc(130px * var(--zm))); font-weight: 800; line-height: 1; min-width: 1.3em; padding: 2px calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 0; background: var(--b); color: #0E141B; cursor: pointer; } .tab-ime { display: grid; line-height: 1.1; } .tab-ime b { font-size: clamp(calc(20px * var(--zm)), 3.6vmin, calc(34px * var(--zm))); } .tab-ime span { font-size: clamp(calc(22px * var(--zm)), 4.4vmin, calc(44px * var(--zm))); font-weight: 800; color: var(--siva); } .tab.pgm .tab-ime span { color: var(--pgm); } .tab.pvw .tab-ime span { color: var(--pvw); } .tab.kmalu .tab-ime span { color: var(--jantar); } .tab-polozaj { display: grid; justify-items: end; line-height: 1; gap: calc(4px * var(--zm)); } .tab-polozaj span { color: var(--siva); font-size: calc(16px * var(--zm)); } .tab-polozaj b { font-size: clamp(calc(34px * var(--zm)), 7vmin, calc(70px * var(--zm))); font-weight: 800; } .tab-zdaj { display: grid; align-content: center; justify-items: start; gap: calc(8px * var(--zm)); min-height: 0; } .tz-vel { font-size: clamp(calc(56px * var(--zm)), 15vmin, calc(170px * var(--zm))); font-weight: 800; line-height: .92; } .tz-sub { font-size: clamp(calc(32px * var(--zm)), 8vmin, calc(90px * var(--zm))); font-weight: 600; line-height: 1; } .tz-gib { font-size: clamp(calc(20px * var(--zm)), 4.2vmin, calc(42px * var(--zm))); color: #D9D2C1; font-style: italic; max-width: 36ch; } .tz-vir { color: var(--temna); font-size: calc(16px * var(--zm)); } .tz-prazno { color: var(--siva); font-size: clamp(calc(22px * var(--zm)), 5vmin, calc(44px * var(--zm))); max-width: 24ch; } .gumb.imam { max-width: calc(420px * var(--zm)); margin-top: calc(10px * var(--zm)); min-height: calc(96px * var(--zm)); font-size: calc(40px * var(--zm)); background: var(--papir); color: var(--noc); border-color: var(--papir); } .tz-imam.potrjeno { margin-top: calc(10px * var(--zm)); font-size: calc(22px * var(--zm)); color: var(--pvw); font-weight: 700; } .tab-zdaj.utrip-nov { animation: nov .9s ease-out 2; } @keyframes nov { 0% { background: color-mix(in srgb, var(--jantar) 30%, transparent); } 100% { background: transparent; } } .tab-naslednji { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(12px * var(--zm)) calc(14px * var(--zm)); display: grid; gap: calc(8px * var(--zm)); } .tn-glava { display: flex; align-items: baseline; gap: calc(12px * var(--zm)); flex-wrap: wrap; } .tn-glava span { color: var(--siva); font-size: calc(18px * var(--zm)); } .tn-glava b { font-size: clamp(calc(26px * var(--zm)), 5vmin, calc(44px * var(--zm))); font-weight: 800; color: var(--jantar); } .tn-glava small { color: var(--siva); font-size: calc(22px * var(--zm)); } .tn-vrstica { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); font-size: clamp(calc(20px * var(--zm)), 3.8vmin, calc(32px * var(--zm))); } .tn-vrstica i { color: var(--siva); font-size: .8em; } .tn-takt { margin-left: auto; display: flex; align-items: center; gap: calc(8px * var(--zm)); color: var(--siva); font-size: calc(18px * var(--zm)); } .tn-pas { height: calc(8px * var(--zm)); background: var(--noc); border-radius: calc(4px * var(--zm)); overflow: hidden; } .tn-pas i { display: block; height: 100%; background: var(--jantar); transition: width .3s; } .tab-cas { height: calc(112px * var(--zm)); } .tab-sporocilo { position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(24px * var(--zm)); background: rgba(8, 11, 16, .93); padding: calc(30px * var(--zm)); text-align: center; } .tab-sporocilo.vidno { display: flex; } .tab-sporocilo p { font-size: clamp(calc(44px * var(--zm)), 12vmin, calc(140px * var(--zm))); font-weight: 800; margin: 0; line-height: 1; } .tab-sporocilo .gumb { min-width: calc(260px * var(--zm)); } .tab-meni { position: fixed; right: calc(18px * var(--zm)); top: calc(18px * var(--zm)); z-index: 30; display: none; background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(16px * var(--zm)); gap: calc(12px * var(--zm)); width: min(calc(360px * var(--zm)), 90vw); } .tab-meni.vidno { display: grid; } .zatemni { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 40; } /* ── gost ─────────────────────────────────────────────────────────── */ .gost { display: grid; gap: calc(12px * var(--zm)); padding-bottom: calc(20px * var(--zm)); } .gost .cas-okvir { margin: 0 calc(12px * var(--zm)); } .gost-spodaj { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(12px * var(--zm)); padding: 0 calc(12px * var(--zm)); } /* ── ožji zasloni ─────────────────────────────────────────────────── */ @media (max-width: 1100px) { .zivo-mreza { grid-template-columns: 1fr; } .preddverje, .partitura-ovoj { grid-template-columns: 1fr; } .pt-pdf { position: static; } } @media (max-width: 820px) { .zivo-spodaj, .gost-spodaj { grid-template-columns: 1fr; } .shema-ovoj { grid-template-columns: 1fr; } .bra-telo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .bra-nadzor { border-left: 0; border-top: 1px solid var(--crta); } .bra-nadzor .namig, .bra-veliko .besedilo { display: none; } .bv-takt { font-size: calc(64px * var(--zm)); } .gumb.ogromen { min-height: calc(90px * var(--zm)); font-size: calc(32px * var(--zm)); } .p-opis, .p-bralec { display: none; } .cas-okvir { height: calc(240px * var(--zm)); } .pd-vabilo { grid-template-columns: 1fr; } .tab { padding: calc(18px * var(--zm)) calc(16px * var(--zm)) calc(12px * var(--zm)); } .tab-cas { height: calc(90px * var(--zm)); } } @media (max-width: 520px) { body { font-size: calc(16px * var(--zm)); } .rez-glava { flex-wrap: wrap; } .kam-banka { grid-template-columns: 1fr 1fr; } .kad-tabela th:nth-child(5), .kad-tabela td:nth-child(5), .kad-tabela th:nth-child(6), .kad-tabela td:nth-child(6) { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ── ZEV-REZIJA-V1b: popravki po pregledu posnetkov ───────────────── */ .nota { display: inline-block; width: .5em; height: 1em; vertical-align: -.14em; margin: 0 .08em; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Cellipse cx='4.2' cy='16.2' rx='3.9' ry='2.8' transform='rotate(-22 4.2 16.2)'/%3E%3Crect x='7.05' y='1' width='1.35' height='15.3'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Cellipse cx='4.2' cy='16.2' rx='3.9' ry='2.8' transform='rotate(-22 4.2 16.2)'/%3E%3Crect x='7.05' y='1' width='1.35' height='15.3'/%3E%3C/svg%3E") no-repeat center / contain; } .kam-banka { grid-template-columns: repeat(auto-fill, minmax(calc(215px * var(--zm)), 1fr)); } .kam-telo { grid-template-columns: auto minmax(0, 1fr); min-width: 0; } .kam-ime { min-width: 0; } .kam-ime b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kam-kader { min-width: 0; } .kam-kader small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kmalu-okvir > .gumb.glavni { margin-bottom: calc(4px * var(--zm)); } /* tablica: vsebina vedno znotraj tally okvirja (do 20 px) */ .tab { padding: calc(34px * var(--zm)) calc(38px * var(--zm)) calc(24px * var(--zm)); } @media (max-width: 820px) { .tab { padding: calc(32px * var(--zm)) calc(30px * var(--zm)) calc(22px * var(--zm)); } } @media (orientation: landscape) { .tab-st { font-size: clamp(calc(46px * var(--zm)), 11vmin, calc(110px * var(--zm))); } .tz-vel { font-size: clamp(calc(46px * var(--zm)), 12vmin, calc(140px * var(--zm))); } .tz-sub { font-size: clamp(calc(26px * var(--zm)), 6.5vmin, calc(76px * var(--zm))); } .tz-gib { font-size: clamp(calc(18px * var(--zm)), 3.4vmin, calc(36px * var(--zm))); } .tab-cas { height: clamp(calc(72px * var(--zm)), 13vh, calc(112px * var(--zm))); } } /* bralec na pokončni tablici: nadzor v dveh stolpcih, da partitura dobi prostor */ @media (max-width: 820px) { .bra-glava { flex-wrap: wrap; row-gap: calc(6px * var(--zm)); } .bra-polozaj { flex-basis: 100%; } .bra-polozaj i { display: none; } .bra-nadzor { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: calc(8px * var(--zm)); padding: calc(10px * var(--zm)); } .bra-nadzor > .bra-veliko { grid-column: 1; grid-row: 1; } .bra-nadzor > .gumb.ogromen { grid-column: 2; grid-row: 1; min-height: 0; height: 100%; } .bra-nadzor > .bra-vrsta, .bra-nadzor > .bra-tek, .bra-nadzor > .bra-stavki { grid-column: 1 / -1; } .bra-tek { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .bv-takt { font-size: calc(56px * var(--zm)); } .bra-vrsta .gumb.velik, .bra-tek .gumb.velik { min-height: calc(48px * var(--zm)); font-size: calc(18px * var(--zm)); } } /* ── priprava: čarovnik ───────────────────────────────────────────── */ .nacini { display: flex; gap: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(14px * var(--zm)) 0; background: var(--grafit); } .nacini button { border: 1px solid var(--crta); background: var(--noc); color: var(--siva); border-radius: calc(999px * var(--zm)); padding: calc(6px * var(--zm)) calc(18px * var(--zm)); font-weight: 700; font-size: calc(16px * var(--zm)); cursor: pointer; } .nacini button.izbran { background: var(--papir); color: var(--noc); border-color: var(--papir); } .carovnik { display: grid; grid-template-columns: calc(300px * var(--zm)) minmax(0, 1fr); gap: calc(16px * var(--zm)); align-items: start; } .car-koraki { position: sticky; top: 0; display: grid; gap: calc(4px * var(--zm)); } .car-korak { display: grid; grid-template-columns: calc(34px * var(--zm)) 1fr; gap: calc(12px * var(--zm)); align-items: center; text-align: left; background: var(--grafit); border: 1px solid transparent; border-radius: var(--r); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); cursor: pointer; } .car-korak span:last-child { display: grid; line-height: 1.15; min-width: 0; } .car-korak small { color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .car-st { width: calc(30px * var(--zm)); height: calc(30px * var(--zm)); border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--jantar); color: var(--jantar); font-weight: 800; } .car-korak.ok .car-st { background: var(--pvw); border-color: var(--pvw); color: var(--noc); } .car-korak.ok b { color: var(--siva); } .car-vsebina { display: grid; gap: calc(16px * var(--zm)); } .car-sekcija { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(14px * var(--zm)) calc(16px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); scroll-margin-top: calc(10px * var(--zm)); } .car-sekcija h3 { font-size: calc(22px * var(--zm)); } .car-sekcija h4 { margin: calc(6px * var(--zm)) 0 0; font-size: calc(16px * var(--zm)); color: var(--siva); font-weight: 600; } .car-sekcija p { margin: 0; } .car-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(240px * var(--zm)), 1fr)); gap: calc(12px * var(--zm)); } .car-vrsta { display: flex; flex-wrap: wrap; gap: calc(12px * var(--zm)); align-items: center; } .car-sekcija textarea { background: var(--noc); border: 1px solid var(--crta); border-radius: var(--r); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); color: var(--papir); font: inherit; resize: vertical; } .izb-mreza { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .po-stavek { display: grid; grid-template-columns: auto minmax(0, 1fr) calc(90px * var(--zm)) auto; gap: calc(8px * var(--zm)); align-items: center; margin-bottom: calc(6px * var(--zm)); } .po-stavek .pt-st { width: calc(36px * var(--zm)); height: calc(36px * var(--zm)); font-size: calc(22px * var(--zm)); } .porocilo { white-space: pre-wrap; font-family: var(--serif); font-size: calc(16px * var(--zm)); color: #D9D2C1; background: var(--noc); border-radius: var(--r); padding: calc(10px * var(--zm)); } /* tloris s conami */ .sh-nacini { display: flex; gap: calc(8px * var(--zm)); align-items: center; padding: calc(8px * var(--zm)) calc(10px * var(--zm)); flex-wrap: wrap; } .shema .tloris-slika { opacity: .78; } .shema .tloris-zatemni { fill: #0B1117; fill-opacity: .18; } .shema.s-tlorisom .zona ellipse { fill: rgba(232, 176, 75, .10); stroke: rgba(232, 176, 75, .8); stroke-width: 2.5; } .shema.s-tlorisom .zona text { fill: #0E141B; font-weight: 700; paint-order: stroke; stroke: rgba(236, 229, 211, .85); stroke-width: calc(5px * var(--zm)); } .shema .zona.urejam ellipse { cursor: move; } .shema .zona.izbrana ellipse { stroke: var(--pvw); stroke-width: 4; } .shema .kamera.pasivna { opacity: .45; pointer-events: none; } .shema.s-tlorisom .kamera .ime { fill: #0E141B; stroke: rgba(236, 229, 211, .9); stroke-width: calc(5px * var(--zm)); } /* zvok */ .zvok-mreza { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(calc(320px * var(--zm)), 1fr); gap: calc(16px * var(--zm)); align-items: start; } .zvok-levo, .zvok-desno { display: grid; gap: calc(12px * var(--zm)); } .zvok-pl { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); min-height: calc(60px * var(--zm)); padding: calc(6px * var(--zm)); } .zvok-pl iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: calc(8px * var(--zm)); } .zvok-pl audio { width: 100%; } .zvok-nadzor { display: grid; gap: calc(12px * var(--zm)); } .gumb.ogromen.tap { display: grid; gap: calc(4px * var(--zm)); background: var(--papir); color: var(--noc); border-color: var(--papir); } .gumb.ogromen.tap small { font-size: calc(16px * var(--zm)); font-weight: 500; color: var(--temna); } .gumb.tap.tapnjen { animation: tapnjen .25s ease-out; } @keyframes tapnjen { 0% { background: var(--pvw); } 100% { background: var(--papir); } } .zvok-skok { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .zvok-stanje { display: flex; gap: calc(24px * var(--zm)); background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(10px * var(--zm)) calc(14px * var(--zm)); } .zs-cas, .zs-takt { display: grid; line-height: 1; font-size: calc(36px * var(--zm)); font-weight: 800; } .zs-cas small, .zs-takt small { font-size: calc(14px * var(--zm)); font-weight: 500; color: var(--siva); margin-top: calc(4px * var(--zm)); } .zvok-kader { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--zm)); } .zk { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); display: grid; gap: calc(4px * var(--zm)); } .zk small:first-child { color: var(--temna); text-transform: uppercase; letter-spacing: .06em; font-size: calc(14px * var(--zm)); } .zk-glava { display: flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(22px * var(--zm)); } .zvok-stran { min-height: calc(120px * var(--zm)); } .sidra { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(4px * var(--zm)); } .sidra li { display: flex; align-items: center; gap: calc(8px * var(--zm)); } .sidra li > button:first-child { flex: 1; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--crta); padding: calc(6px * var(--zm)) 2px; cursor: pointer; } @media (max-width: 1000px) { .carovnik { grid-template-columns: 1fr; } .car-koraki { position: static; grid-template-columns: 1fr 1fr; } .zvok-mreza { grid-template-columns: 1fr; } } svg.shema.s-tlorisom { max-height: calc(100vh - calc(240px * var(--zm))); width: auto; max-width: 100%; margin: 0 auto; } .zvok-stran { max-height: 62vh; overflow: auto; } .kad-tabela td.pravila { white-space: nowrap; } .opozorilo { display: inline-block; margin: 1px calc(3px * var(--zm)) 1px 0; padding: 2px calc(7px * var(--zm)); border-radius: calc(4px * var(--zm)); background: color-mix(in srgb, var(--jantar) 22%, transparent); border: 1px solid var(--jantar); color: var(--jantar); font-size: calc(14px * var(--zm)); font-weight: 700; cursor: help; } .izb small { margin-left: calc(6px * var(--zm)); font-weight: 500; font-size: calc(14px * var(--zm)); opacity: .72; } .vstop-vrsta { display: flex; flex-wrap: wrap; gap: calc(12px * var(--zm)); } a.gumb { text-decoration: none; } .tz-vel small { margin-left: .28em; font-size: .42em; font-weight: 600; color: var(--siva); } .kad-namig { position: fixed; z-index: 70; pointer-events: none; background: var(--papir); color: var(--noc); padding: calc(6px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); font: 600 calc(15px * var(--zm))/1.2 var(--sans); box-shadow: 0 calc(4px * var(--zm)) calc(14px * var(--zm)) rgba(0,0,0,.4); display: none; white-space: nowrap; } .kad-tabela tr.izbrana td { background: color-mix(in srgb, var(--papir) 10%, transparent); } .cas-okvir.visok { height: calc(360px * var(--zm)); } /* kadri v partituri, igla */ .pdf-kadri { position: absolute; inset: 0; pointer-events: none; } .pdf-kader { position: absolute; width: 0; border-left: calc(4px * var(--zm)) solid var(--b); pointer-events: auto; cursor: grab; touch-action: none; } .pdf-kader.izbran { border-left-width: calc(7px * var(--zm)); filter: drop-shadow(0 0 calc(4px * var(--zm)) var(--b)); } .pdf-kader-oz { position: absolute; top: calc(calc(-22px * var(--zm)) - var(--lvl, 0) * calc(20px * var(--zm))); left: -2px; transform: none; white-space: nowrap; background: var(--b); color: #0E141B; font: 700 calc(12px * var(--zm))/1 var(--sans); padding: calc(4px * var(--zm)) calc(6px * var(--zm)); border-radius: calc(4px * var(--zm)) calc(4px * var(--zm)) calc(4px * var(--zm)) 0; box-shadow: 0 2px calc(6px * var(--zm)) rgba(0,0,0,.35); } .pdf-kader-oz b { font-weight: 800; } .pdf-igla { position: absolute; width: 0; border-left: 2px solid var(--pgm); pointer-events: none; display: none; box-shadow: 0 0 calc(6px * var(--zm)) rgba(214,59,64,.7); } .kad-pogledi { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); align-items: center; margin: calc(4px * var(--zm)) 0; } .kad-dvoje { display: grid; grid-template-columns: 1fr; gap: calc(12px * var(--zm)); } .kad-dvoje .kad-pdf { display: none; } .kad-dvoje.oboje { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } .kad-dvoje.oboje .kad-pdf, .kad-dvoje.samo-pdf .kad-pdf { display: block; } .kad-dvoje.samo-pdf .cas-okvir { display: none; } .kad-pdf { max-height: 70vh; overflow: auto; } .st-kadra { color: var(--jantar); font-weight: 700; margin-right: calc(4px * var(--zm)); } @media (max-width: 1100px) { .kad-dvoje.oboje { grid-template-columns: 1fr; } } .tz-st { font: 800 clamp(calc(20px * var(--zm)), 4vmin, calc(40px * var(--zm)))/1 var(--sans); color: var(--jantar); } /* tablica: nova postavitev */ .tab-glava { grid-area: glava; grid-template-columns: auto 1fr auto auto; } .tab-zdaj { grid-area: zdaj; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(18px * var(--zm)); align-items: center; align-content: center; justify-items: start; } .tab-zdaj > .tz-slika { grid-column: 1; } .tab-zdaj > .tz-besedilo { grid-column: 2; display: grid; gap: calc(8px * var(--zm)); justify-items: start; min-width: 0; } .tab-zdaj > .tz-prosto { grid-column: 1 / -1; } .tz-slika .pl-slika { width: clamp(calc(80px * var(--zm)), 12vmin, calc(140px * var(--zm))); height: auto; border-radius: calc(8px * var(--zm)); } .tab-desno { grid-area: desno; display: grid; grid-template-rows: auto 1fr; gap: calc(8px * var(--zm)); align-content: start; min-height: 0; } .tab-prihaja-glava { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--zm)); } .tab-prihaja-glava > span { font-size: calc(16px * var(--zm)); color: var(--siva); letter-spacing: .08em; text-transform: uppercase; } .tab-stikala { display: flex; gap: calc(4px * var(--zm)); } .tab-stikala .izb { min-height: calc(32px * var(--zm)); padding: 2px calc(11px * var(--zm)); font-size: calc(16px * var(--zm)); } .tab-prihaja { display: grid; gap: calc(8px * var(--zm)); align-content: start; overflow: auto; } .tp { display: grid; grid-template-columns: calc(58px * var(--zm)) auto minmax(0, 1fr); gap: calc(8px * var(--zm)); align-items: center; padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; font-size: calc(16px * var(--zm)); } .tp .kam-st { margin: 0; } .tp.moj { border-color: color-mix(in srgb, var(--b) 60%, transparent); } .tp.prvi { border: 2px solid var(--b); } .tp-cas { font-size: calc(22px * var(--zm)); font-weight: 800; color: var(--siva); } .tp.prvi .tp-cas { color: var(--jantar); } .tp-op { display: grid; line-height: 1.15; min-width: 0; } .tp-op i { color: var(--siva); } .tp-op small { color: var(--temna); } .tab-odst { display: grid; justify-items: end; line-height: 1; gap: calc(4px * var(--zm)); } .tab-odst small { font-size: calc(14px * var(--zm)); color: var(--siva); letter-spacing: .08em; text-transform: uppercase; } .tab-odst b { font-size: clamp(calc(40px * var(--zm)), 8vmin, calc(84px * var(--zm))); font-weight: 800; color: var(--jantar); font-variant-numeric: tabular-nums; } .tab-odst.blizu b { color: var(--pvw); } .tab.pgm .tab-odst b { color: var(--papir); } .tab-odst span { font-size: calc(16px * var(--zm)); color: var(--siva); } .tab-cas { grid-area: cas; } .tz-prosto { display: grid; gap: calc(12px * var(--zm)); padding: calc(18px * var(--zm)) calc(20px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px dashed #3A4958; max-width: calc(640px * var(--zm)); } .tz-prosto-naslov { font-size: clamp(calc(26px * var(--zm)), 5vmin, calc(44px * var(--zm))); font-weight: 800; } .tz-prosto p { margin: 0; font-size: calc(18px * var(--zm)); color: #D9D2C1; } .tz-prosto ul { margin: 0; padding-left: calc(22px * var(--zm)); font-size: calc(18px * var(--zm)); line-height: 1.5; } .izb.s-sliko { display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); } .izb.s-sliko .pl-slika { border-radius: calc(4px * var(--zm)); } .td-plan { white-space: nowrap; } .td-plan .pl-slika { vertical-align: middle; margin-right: calc(4px * var(--zm)); border-radius: calc(4px * var(--zm)); } @media (max-width: 900px) and (orientation: portrait) { .tab { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; grid-template-areas: 'glava' 'bus' 'zdaj' 'desno' 'cas'; padding: calc(30px * var(--zm)) calc(28px * var(--zm)) calc(26px * var(--zm)); gap: calc(8px * var(--zm)); } .tab-glava { grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(12px * var(--zm)); } .tab { width: 100vw; max-width: 100vw; overflow: hidden; } .tz-gib, .tz-prosto, .tz-sub, .tz-vel { max-width: 100%; } .tz-gib { font-size: calc(18px * var(--zm)); } .tz-sub { font-size: calc(40px * var(--zm)); } .tz-vel { font-size: calc(76px * var(--zm)); } .tab-st { font-size: calc(44px * var(--zm)); min-width: 1.2em; } .tab-ime b { font-size: calc(18px * var(--zm)); } .tab-ime span { font-size: calc(22px * var(--zm)); } .tab-polozaj b { font-size: calc(40px * var(--zm)); } .tab-polozaj span { font-size: calc(14px * var(--zm)); } .tab-odst { grid-column: 1 / -1; grid-template-columns: 1fr auto; justify-items: start; align-items: end; padding: calc(8px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .tab-odst small { grid-column: 1; } .tab-odst span { grid-column: 1; } .tab-odst b { grid-column: 2; grid-row: 1 / 3; font-size: calc(44px * var(--zm)); } .tab-zdaj { grid-template-columns: 1fr; } .tab-zdaj > .tz-slika { display: none; } .tab-zdaj > .tz-besedilo { grid-column: 1; } .tab-prihaja .tp:nth-child(n+3) { display: none; } .tab-cas { height: calc(72px * var(--zm)); } } @media (orientation: landscape) and (max-height: 500px) { .tab { padding: calc(26px * var(--zm)) calc(30px * var(--zm)) calc(24px * var(--zm)); gap: calc(8px * var(--zm)) calc(16px * var(--zm)); grid-template-columns: minmax(0, 1.25fr) minmax(calc(240px * var(--zm)), 1fr); } .tab-st { font-size: calc(40px * var(--zm)); padding: 2px calc(10px * var(--zm)); } .tz-slika .pl-slika { width: calc(64px * var(--zm)); } .tab-prihaja .tp:nth-child(n+3) { display: none; } .tab-cas { height: calc(46px * var(--zm)); } .tab-odst b { font-size: calc(46px * var(--zm)); } .tab-zdaj .imam { min-height: calc(60px * var(--zm)); font-size: calc(28px * var(--zm)); } } .gr-oznaka { align-self: center; font-size: calc(14px * var(--zm)); color: var(--temna); text-transform: uppercase; letter-spacing: .06em; margin-right: calc(4px * var(--zm)); } .gr-predogled { display: flex; align-items: center; gap: calc(12px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--noc); border: 1px solid var(--crta); font-size: calc(16px * var(--zm)); } .gr-predogled .pl-slika { border-radius: calc(8px * var(--zm)); } .td-gib { white-space: nowrap; } .td-gib select { margin-right: calc(4px * var(--zm)); } /* V9: vodilo programa, številka kadra, seznam kadrov */ .tab-glava { grid-template-columns: auto 1fr auto; } .tab-odst { grid-template-columns: auto auto; column-gap: calc(12px * var(--zm)); align-items: end; justify-items: stretch; } .tab-odst small { grid-column: 1 / -1; justify-self: end; } .tab-odst span { text-align: right; padding-bottom: .3em; } .tab-odst span b { color: var(--jantar); font-weight: 800; font-size: 1em; } .tab-bus { grid-area: bus; display: flex; align-items: center; gap: calc(12px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); background: #111922; border: 1px solid transparent; min-width: 0; } .tab-bus > span { font-size: calc(16px * var(--zm)); color: var(--siva); letter-spacing: .06em; text-transform: uppercase; } .bus-k { display: grid; justify-items: center; gap: calc(4px * var(--zm)); min-width: calc(52px * var(--zm)); } .bus-k b { width: calc(52px * var(--zm)); height: calc(52px * var(--zm)); border-radius: calc(9px * var(--zm)); display: grid; place-items: center; font: 800 calc(32px * var(--zm))/1 var(--sans); color: var(--b); border: 2px solid color-mix(in srgb, var(--b) 45%, transparent); } .bus-k small { font-size: calc(16px * var(--zm)); color: var(--temna); white-space: nowrap; min-height: 1.1em; font-variant-numeric: tabular-nums; } .bus-k.zivo b { background: var(--pgm); color: #fff; border-color: var(--pgm); box-shadow: 0 0 0 calc(3px * var(--zm)) rgba(229, 72, 77, .35); } .bus-k.zivo small { color: #FF8A8E; font-weight: 700; } .bus-k.nasl b { border-color: var(--pvw); color: var(--pvw); } .bus-k.nasl small { color: var(--pvw); font-weight: 700; } .bus-k.jaz b { outline: calc(3px * var(--zm)) solid var(--papir); outline-offset: calc(3px * var(--zm)); } .tab-zdaj { grid-template-columns: auto auto minmax(0, 1fr); } .tab-zdaj > .tz-kn { grid-column: 1; } .tab-zdaj > .tz-slika { grid-column: 2; } .tab-zdaj > .tz-besedilo { grid-column: 3; } .tab-zdaj > .tz-kn.tih + .tz-prosto { grid-column: 2 / -1; } .tz-kn { display: grid; justify-items: start; line-height: .86; } .tz-kn small { font-size: calc(16px * var(--zm)); color: var(--siva); letter-spacing: .08em; text-transform: uppercase; } .tz-kn b { font-size: clamp(calc(64px * var(--zm)), 17vmin, calc(170px * var(--zm))); font-weight: 800; color: var(--jantar); font-variant-numeric: tabular-nums; } .tab.pgm .tz-kn b { color: var(--papir); } .tz-kn.tih b { color: var(--temna); } .tab-prihaja .kv { display: grid; grid-template-columns: 3.2em 1.7em minmax(0, 1fr) auto; gap: .5em; align-items: center; padding: .4em .6em; border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; font-size: calc(16px * var(--zm)); line-height: 1.12; } .kv .kn { font-size: 1.45em; font-weight: 800; color: var(--siva); font-variant-numeric: tabular-nums; } .kv .ch { width: 1.6em; height: 1.6em; border-radius: calc(4px * var(--zm)); display: grid; place-items: center; background: var(--b); color: #0E141B; font-weight: 800; } .kv .tx { display: grid; min-width: 0; } .kv .tx > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kv .tx i { color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9em; } .kv .pc { font-size: 1.25em; font-weight: 800; color: var(--siva); font-variant-numeric: tabular-nums; } .kv.moj { border: 2px solid var(--b); } .kv.moj .kn { color: var(--jantar); } .kv.zivo { background: #2A1419; border-color: var(--pgm); } .kv.zivo .kn { color: #fff; } .kv.zivo .pc { color: #FF8A8E; font-size: .95em; text-transform: uppercase; } .kv.zdaj { border-color: var(--papir); } .kv.tuj { opacity: .8; } .tab-cas-w { grid-area: cas; display: grid; gap: calc(4px * var(--zm)); } .tab-cas-nap { display: flex; justify-content: space-between; font-size: calc(14px * var(--zm)); color: var(--temna); } .tab-cas-nap b { color: var(--siva); } .tab-cas-w .tab-cas { grid-area: auto; } @media (max-width: 900px) and (orientation: portrait) { .tab-bus { justify-content: space-between; gap: calc(4px * var(--zm)); padding: calc(6px * var(--zm)) calc(8px * var(--zm)); } .tab-bus > span { display: none; } .bus-k { min-width: calc(36px * var(--zm)); } .bus-k b { width: calc(36px * var(--zm)); height: calc(36px * var(--zm)); font-size: calc(22px * var(--zm)); } .bus-k small { font-size: calc(14px * var(--zm)); } .tab-zdaj { grid-template-columns: auto auto minmax(0, 1fr); gap: calc(12px * var(--zm)); } .tab-zdaj > .tz-slika { display: block; } .tz-slika .pl-slika { width: calc(64px * var(--zm)); } .tz-kn b { font-size: calc(70px * var(--zm)); } .tz-kn small { font-size: calc(14px * var(--zm)); } .kv .tx i { display: none; } .tab-prihaja .kv { font-size: calc(16px * var(--zm)); } } @media (orientation: landscape) and (max-height: 500px) { .tab-bus { justify-content: space-between; padding: calc(4px * var(--zm)) calc(8px * var(--zm)); } .tab-bus > span { display: none; } .bus-k b { width: calc(32px * var(--zm)); height: calc(32px * var(--zm)); font-size: calc(22px * var(--zm)); } .bus-k small { font-size: calc(14px * var(--zm)); } .tz-kn b { font-size: calc(76px * var(--zm)); } .kv .tx i { display: none; } .tab-prihaja .kv { font-size: calc(14px * var(--zm)); } .tab-prihaja .kv:nth-child(n+4) { display: none; } .tab-cas-nap { display: none; } } /* V6b: način, bloki, krogi, spored */ .zivo-nacin { display: grid; gap: calc(8px * var(--zm)); } .zn-vrsta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)) calc(16px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; font-size: calc(16px * var(--zm)); } .zn-oz { font-size: calc(14px * var(--zm)); color: var(--temna); text-transform: uppercase; letter-spacing: .06em; } .zn-blok, .zn-vodi, .zn-krog, .zn-spored { display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); color: var(--siva); } .zn-blok b, .zn-vodi b, .zn-krog b { color: var(--papir); } .zn-krog { padding-left: calc(12px * var(--zm)); border-left: 1px solid var(--crta); } .sp-t { display: inline-grid; place-items: center; width: calc(24px * var(--zm)); height: calc(24px * var(--zm)); border-radius: calc(4px * var(--zm)); border: 1px solid var(--crta); font-style: normal; font-weight: 700; font-size: calc(14px * var(--zm)); color: var(--siva); } .sp-t.zdaj { background: var(--papir); color: var(--noc); border-color: var(--papir); } .bra-nacin { display: grid; gap: calc(8px * var(--zm)); } .bra-nacin .gumb.odobri { background: #10301F; border: 2px solid var(--pvw); color: var(--papir); display: grid; gap: calc(4px * var(--zm)); } .bra-nacin .gumb.odobri small { font-size: calc(16px * var(--zm)); color: #9FE2BF; font-weight: 600; } .bn-info { font-size: calc(16px * var(--zm)); color: var(--siva); text-align: center; } .bn-krog { display: grid; gap: calc(8px * var(--zm)); padding: calc(8px * var(--zm)); border: 1px dashed #3A4958; border-radius: calc(8px * var(--zm)); text-align: center; } .sp-seznam { margin: calc(6px * var(--zm)) 0; padding-left: calc(22px * var(--zm)); display: grid; gap: calc(4px * var(--zm)); } .sp-seznam li { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)) calc(12px * var(--zm)); align-items: center; } .sp-seznam li.zdaj b { color: var(--jantar); } .od-mreza { display: grid; gap: calc(8px * var(--zm)); } .od-vrsta { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)) calc(16px * var(--zm)); align-items: center; padding: calc(6px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .od-vrsta.odprt { border-color: var(--jantar); } .od-vrsta label { display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); } .od-vrsta input[type=number] { width: 4.5em; } .od-vrsta input[data-f=solisti] { min-width: 16em; } /* doba po dirigentu */ .bra-doba { display: grid; grid-template-columns: 1fr auto; gap: calc(8px * var(--zm)); align-items: stretch; } .gumb.doba { display: grid; gap: calc(4px * var(--zm)); line-height: 1; background: #10301F; border: 2px solid var(--pvw); color: var(--papir); } .gumb.doba small { font-size: calc(14px * var(--zm)); color: #9FE2BF; font-weight: 600; } .gumb.doba.utrip { animation: doba-utrip .18s ease-out; } @keyframes doba-utrip { from { background: var(--pvw); color: var(--noc); } to { background: #10301F; } } .bra-doba-info { display: grid; place-items: center; min-width: calc(96px * var(--zm)); padding: calc(6px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; line-height: 1; } .bra-doba-info b { font-size: calc(40px * var(--zm)); font-weight: 800; font-variant-numeric: tabular-nums; } .bra-doba-info span { font-size: calc(14px * var(--zm)); color: var(--siva); margin-top: calc(3px * var(--zm)); } /* sledenje po zvoku */ .bra-sled { display: grid; gap: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .bs-glava { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--zm)); } .bs-predlog { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)) calc(12px * var(--zm)); font-size: calc(16px * var(--zm)); min-height: calc(28px * var(--zm)); } .bs-takt b { font-size: calc(22px * var(--zm)); font-weight: 800; } .bs-takt.ok b { color: var(--pvw); } .bs-takt.narazen b { color: var(--pgm); } .bs-pike { letter-spacing: 2px; color: var(--jantar); } .bs-drugi { font-size: calc(14px * var(--zm)); flex-basis: 100%; } #b-sled-nacin { min-height: calc(36px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--plast); color: var(--papir); border: 1px solid transparent; padding: 0 calc(8px * var(--zm)); } #b-sled-naprava { min-height: calc(34px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--plast); color: var(--papir); border: 1px solid transparent; padding: 0 calc(8px * var(--zm)); max-width: 100%; } /* ─── orodja za pripravo ─── */ .kad-orodjarna { display: grid; gap: calc(8px * var(--zm)); margin: calc(6px * var(--zm)) 0; } .or-vrstica { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); align-items: center; } .or-loc { width: 1px; height: calc(22px * var(--zm)); background: var(--crta); margin: 0 calc(4px * var(--zm)); } .or-oz { font-size: calc(14px * var(--zm)); color: var(--temna); text-transform: uppercase; letter-spacing: .06em; } .or-hitra { display: grid; gap: calc(8px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); background: #0F1C2B; border: 1px solid #5AA9FF; } .or-hitra-info { font-size: calc(16px * var(--zm)); } .or-hitra-info b { color: var(--papir); } .or-kamere { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); align-items: center; } .or-kam { display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); min-height: calc(40px * var(--zm)); padding: calc(3px * var(--zm)) calc(12px * var(--zm)) calc(3px * var(--zm)) calc(4px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid transparent; background: var(--grafit); color: var(--papir); font: 600 calc(15px * var(--zm))/1 var(--sans); cursor: pointer; } .or-kam b { display: inline-grid; place-items: center; width: calc(32px * var(--zm)); height: calc(32px * var(--zm)); border-radius: calc(7px * var(--zm)); background: var(--b); color: #0E141B; font-size: calc(18px * var(--zm)); } .or-kam:active { transform: scale(.97); } .or-obseg:empty { display: none; } .or-obseg { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); align-items: center; padding: calc(8px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); background: rgba(90,169,255,.08); border: 1px dashed rgba(90,169,255,.6); } .or-panel { display: grid; gap: calc(8px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .or-tabs { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .or-izbran { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(16px * var(--zm)); } .or-izbran input { flex: 1 1 calc(260px * var(--zm)); min-height: calc(36px * var(--zm)); } .or-cipi { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .or-cip { display: inline-flex; align-items: stretch; border-radius: calc(9px * var(--zm)); border: 1px solid transparent; background: var(--plast); overflow: hidden; } .or-cip > button:first-child { display: grid; text-align: left; gap: calc(4px * var(--zm)); padding: calc(6px * var(--zm)) calc(10px * var(--zm)); background: transparent; border: 0; color: var(--papir); font: 600 calc(15px * var(--zm))/1.1 var(--sans); cursor: pointer; } .or-cip > button:first-child small { color: var(--siva); font-weight: 500; font-size: calc(14px * var(--zm)); } .or-cip > button:first-child:disabled { cursor: default; } .or-x { border: 0; border-left: 1px solid var(--crta); background: transparent; color: var(--siva); font-size: calc(18px * var(--zm)); padding: 0 calc(9px * var(--zm)); cursor: pointer; } .or-x:hover { color: var(--pgm); } .or-vrsta { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); align-items: center; } .or-vrsta input, .or-vrsta select { min-height: calc(36px * var(--zm)); } .or-vrsta input { flex: 1 1 calc(240px * var(--zm)); } .or-panel h4 { margin: calc(6px * var(--zm)) 0 0; font-size: calc(14px * var(--zm)); color: var(--siva); } .or-kopombe { display: grid; gap: calc(8px * var(--zm)); } .or-kopombe label { display: flex; gap: calc(8px * var(--zm)); align-items: center; } .or-kopombe input { flex: 1; min-height: calc(34px * var(--zm)); } .or-modal { position: fixed; inset: 0; z-index: 900; background: rgba(5, 8, 11, .72); display: grid; place-items: center; padding: calc(16px * var(--zm)); } .or-okno { width: min(calc(760px * var(--zm)), 100%); max-height: 88vh; overflow: auto; background: var(--grafit); border: 1px solid transparent; border-radius: calc(14px * var(--zm)); padding: calc(16px * var(--zm)) calc(18px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); } .or-okno h3 { margin: 0; font-size: calc(22px * var(--zm)); } .or-tabela { max-height: 52vh; overflow: auto; } .or-tabela table { width: 100%; border-collapse: collapse; font-size: calc(16px * var(--zm)); } .or-tabela td, .or-tabela th { padding: calc(6px * var(--zm)) calc(8px * var(--zm)); border-bottom: 1px solid var(--crta); text-align: left; } .solo-po b { font-size: calc(40px * var(--zm)); font-weight: 800; min-width: calc(70px * var(--zm)); text-align: center; } .gumb.solo { background: #2A1F10; border: 2px solid var(--jantar); color: var(--papir); } .bn-solo { display: grid; gap: calc(8px * var(--zm)); padding: calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: #2A1F10; border: 2px solid var(--jantar); text-align: center; } .bn-solo-nas { font-size: calc(22px * var(--zm)); letter-spacing: .06em; } .bn-solo-nas b { font-size: calc(28px * var(--zm)); color: var(--jantar); } .gumb.solo-konec { background: var(--jantar); color: #0E141B; border-color: var(--jantar); } .zn-solo b { color: var(--jantar); } .tab-kopomba { display: block; font-size: calc(16px * var(--zm)); color: var(--jantar); font-weight: 600; margin-top: 2px; } .tab-kopomba:empty { display: none; } .tab-solo { position: absolute; top: calc(14px * var(--zm)); left: 50%; transform: translateX(-50%); z-index: 6; padding: calc(8px * var(--zm)) calc(18px * var(--zm)); border-radius: calc(999px * var(--zm)); background: var(--jantar); color: #0E141B; font: 800 calc(22px * var(--zm))/1 var(--sans); letter-spacing: .04em; box-shadow: 0 calc(6px * var(--zm)) calc(18px * var(--zm)) rgba(0,0,0,.4); } .tab-solo b { font-size: calc(28px * var(--zm)); } /* stran s QR kodami za asistenta */ .qr-as { position: fixed; inset: 0; z-index: 950; background: #0E141B; color: var(--papir); display: grid; grid-template-rows: auto minmax(0, 1fr); } .qr-as-glava { display: flex; align-items: center; gap: calc(16px * var(--zm)); padding: calc(12px * var(--zm)) calc(18px * var(--zm)); border-bottom: 1px solid var(--crta); } .qr-as-glava b { font-size: calc(22px * var(--zm)); } .qr-as-glava .koda { font: 800 calc(24px * var(--zm))/1 var(--sans); color: var(--jantar); border: 2px solid var(--jantar); padding: calc(4px * var(--zm)) calc(9px * var(--zm)); border-radius: calc(8px * var(--zm)); letter-spacing: .1em; } .qr-as-preklop { display: flex; gap: calc(8px * var(--zm)); margin-left: auto; } .qr-as-preklop button { min-height: calc(44px * var(--zm)); padding: calc(4px * var(--zm)) calc(18px * var(--zm)); border-radius: calc(999px * var(--zm)); border: 1px solid var(--crta); background: transparent; color: var(--papir); font: 700 calc(18px * var(--zm))/1 var(--sans); cursor: pointer; } .qr-as-preklop button.izbran { background: var(--papir); color: var(--noc); } .qr-as-x { width: calc(44px * var(--zm)); height: calc(44px * var(--zm)); border-radius: 50%; border: 1px solid var(--crta); background: transparent; color: var(--papir); font-size: calc(28px * var(--zm)); cursor: pointer; } .qr-as-telo { display: grid; grid-template-columns: minmax(0, 1fr) calc(360px * var(--zm)); gap: calc(18px * var(--zm)); padding: calc(18px * var(--zm)); min-height: 0; } .qr-as-koda { display: grid; justify-items: center; align-content: center; gap: calc(12px * var(--zm)); min-height: 0; } .qr-as-koda svg { width: min(62vh, 92%); height: auto; background: #fff; border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)); } .qr-as-ime { display: flex; align-items: center; gap: calc(12px * var(--zm)); font: 800 calc(30px * var(--zm))/1.1 var(--sans); } .qr-as-koda small { color: var(--siva); font-size: calc(14px * var(--zm)); word-break: break-all; text-align: center; } .qr-as-seznam { display: grid; gap: calc(8px * var(--zm)); align-content: start; overflow: auto; } .qr-as-t { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(12px * var(--zm)); align-items: center; min-height: calc(46px * var(--zm)); padding: calc(4px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid transparent; background: var(--grafit); color: var(--papir); font: 600 calc(16px * var(--zm))/1.1 var(--sans); text-align: left; cursor: pointer; } .qr-as-t.izbran { border-color: var(--jantar); box-shadow: 0 0 0 1px var(--jantar); } .qr-as-tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qr-as-t i { font-style: normal; font-size: calc(14px * var(--zm)); color: var(--temna); } .qr-as-t i.ok { color: var(--pvw); font-weight: 700; } .qr-as-t i.caka { color: var(--jantar); } @media (max-width: 800px) { .qr-as-telo { grid-template-columns: minmax(0, 1fr); } .qr-as-glava { flex-wrap: wrap; } } /* priprava kamer na terenu: tablica */ .teren-tab { position: absolute; inset: 0; z-index: 7; background: #0E141B; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: calc(12px * var(--zm)); padding: calc(18px * var(--zm)) calc(22px * var(--zm)); } .teren-tab[hidden] { display: none; } .tr-glava { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(16px * var(--zm)); align-items: center; } .tr-glava b { display: block; font-size: calc(22px * var(--zm)); } .tr-glava span { color: var(--siva); font-size: calc(16px * var(--zm)); } .tr-napr { text-align: right; font-size: calc(22px * var(--zm)); min-width: calc(150px * var(--zm)); } .tr-napr b { font-size: calc(40px * var(--zm)); color: var(--pvw); } .tr-napr i { font-style: normal; color: var(--jantar); font-size: calc(18px * var(--zm)); } .tr-trak { height: calc(8px * var(--zm)); border-radius: calc(4px * var(--zm)); background: var(--plast); overflow: hidden; margin-top: calc(4px * var(--zm)); } .tr-trak i { display: block; height: 100%; background: var(--pvw); } .tr-telo { display: grid; align-content: center; gap: calc(16px * var(--zm)); min-height: 0; } .tr-kader { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: calc(20px * var(--zm)); align-items: center; } .tr-kn { display: grid; line-height: .86; } .tr-kn small { font-size: calc(16px * var(--zm)); color: var(--siva); letter-spacing: .08em; text-transform: uppercase; } .tr-kn b { font-size: clamp(calc(70px * var(--zm)), 18vmin, calc(160px * var(--zm))); font-weight: 800; color: var(--jantar); } .tr-sl .pl-slika { width: clamp(calc(110px * var(--zm)), 20vmin, calc(170px * var(--zm))); } .tr-plan { font-size: clamp(calc(44px * var(--zm)), 9vmin, calc(90px * var(--zm))); font-weight: 800; line-height: .95; } .tr-plan small { font-size: .45em; color: var(--siva); font-weight: 600; } .tr-gib { font: italic 400 calc(22px * var(--zm))/1.3 var(--serif); color: #D9D2C1; } .tr-gib b { font-style: normal; font-family: var(--sans); color: var(--jantar); } .tr-kje { font-size: calc(16px * var(--zm)); color: var(--siva); margin-top: calc(4px * var(--zm)); } .tr-stanje { margin-top: calc(8px * var(--zm)); font-size: calc(22px * var(--zm)); font-weight: 800; } .tr-stanje.ok { color: var(--pvw); } .tr-stanje.tez { color: var(--jantar); } .tr-gumbi { display: grid; grid-template-columns: 2fr 1fr; gap: calc(12px * var(--zm)); } .gumb.tr-da { background: #10301F; border: calc(3px * var(--zm)) solid var(--pvw); color: var(--papir); font-size: calc(28px * var(--zm)); min-height: calc(90px * var(--zm)); } .gumb.tr-ne { background: #2A1F10; border: 2px solid var(--jantar); color: var(--papir); min-height: calc(90px * var(--zm)); } .tr-razlogi { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); align-items: center; } .tr-razlogi b { width: 100%; font-size: calc(18px * var(--zm)); } .tr-konec { text-align: center; display: grid; gap: calc(12px * var(--zm)); justify-items: center; } .tr-konec .tr-kn { font-size: calc(90px * var(--zm)); color: var(--pvw); } .tr-konec h2 { margin: 0; font-size: calc(40px * var(--zm)); } .tr-konec p { font: 400 calc(18px * var(--zm))/1.45 var(--serif); color: var(--siva); max-width: 60ch; } .tr-vrsta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(8px * var(--zm)); align-items: center; } .tr-vrstica { display: flex; gap: calc(8px * var(--zm)); overflow-x: auto; padding-bottom: 2px; } .tr-v { display: grid; gap: 1px; min-width: calc(64px * var(--zm)); padding: calc(5px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid transparent; background: var(--grafit); color: var(--papir); font: 700 calc(15px * var(--zm))/1 var(--sans); cursor: pointer; } .tr-v span { font-size: calc(14px * var(--zm)); color: var(--siva); font-weight: 500; } .tr-v.zdaj { border-color: var(--papir); box-shadow: 0 0 0 1px var(--papir); } .tr-v.ok { border-color: var(--pvw); background: #10301F; } .tr-v.tez { border-color: var(--jantar); background: #2A1F10; } @media (max-width: 900px) and (orientation: portrait) { .tr-kader { grid-template-columns: auto minmax(0, 1fr); } .tr-sl { display: none; } .tr-gumbi { grid-template-columns: 1fr; } } /* priprava na terenu: režiser in asistent */ .pd-teren { display: grid; gap: calc(8px * var(--zm)); } .pd-teren:empty { display: none; } .tr-skupaj { font-size: calc(16px * var(--zm)); } .tr-skupaj i { font-style: normal; color: var(--jantar); } .tr-tabela { display: grid; gap: calc(8px * var(--zm)); } .tr-vr { display: grid; grid-template-columns: auto minmax(0, 1fr) calc(150px * var(--zm)); gap: calc(12px * var(--zm)); align-items: center; padding: calc(7px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(9px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .tr-vr.vse { border-color: var(--pvw); } .tr-ime b { display: block; font-size: calc(16px * var(--zm)); } .tr-ime small { color: var(--siva); font-size: calc(14px * var(--zm)); } .tr-stev { text-align: right; font-size: calc(16px * var(--zm)); } .tr-stev b { font-size: calc(22px * var(--zm)); } .tr-stev i { font-style: normal; color: var(--jantar); } .tr-tez { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .tr-tez span { font-size: calc(14px * var(--zm)); padding: calc(3px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(999px * var(--zm)); background: #2A1F10; border: 1px solid var(--jantar); color: var(--papir); } .asis-ovoj { min-height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #0E141B; } .asis-glava { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12px * var(--zm)); padding: calc(12px * var(--zm)) calc(18px * var(--zm)); border-bottom: 1px solid var(--crta); } .asis-glava b { font-size: calc(22px * var(--zm)); } .asis-glava .koda { font: 800 calc(22px * var(--zm))/1 var(--sans); color: var(--jantar); border: 2px solid var(--jantar); padding: calc(4px * var(--zm)) calc(9px * var(--zm)); border-radius: calc(8px * var(--zm)); letter-spacing: .1em; } .asis-glava nav { margin-left: auto; display: flex; gap: calc(8px * var(--zm)); } .asis-telo { min-height: 0; padding: 0 0 calc(12px * var(--zm)); } .asis-telo .qr-as-glava { border-bottom: 0; padding-bottom: 0; } .asis-teren { padding: calc(16px * var(--zm)) calc(18px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); } .or-predlog { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); padding: calc(6px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px dashed var(--jantar); background: rgba(232,176,75,.06); font-size: calc(16px * var(--zm)); } .or-predlog-oz { font-size: calc(14px * var(--zm)); letter-spacing: .08em; text-transform: uppercase; color: var(--jantar); } .or-predlog i { color: var(--siva); } .or-stik { font-size: calc(14px * var(--zm)); } /* zveza in čakalna vrsta */ body.brez-zveze::before { content: attr(data-zveza); position: fixed; top: 0; left: 0; right: 0; z-index: 1200; padding: calc(6px * var(--zm)) calc(14px * var(--zm)); background: var(--pgm); color: #fff; font: 700 calc(15px * var(--zm))/1.2 var(--sans); text-align: center; } body.vrsta-caka:not(.brez-zveze)::before { content: 'Pošiljam ukaze, ki so čakali …'; position: fixed; top: 0; left: 0; right: 0; z-index: 1200; padding: calc(6px * var(--zm)) calc(14px * var(--zm)); background: var(--jantar); color: #0E141B; font: 700 calc(15px * var(--zm))/1.2 var(--sans); text-align: center; } .bs-glava { flex-wrap: wrap; } .bs-glava > * { min-width: 0; } .bra-nadzor { min-width: 0; overflow: hidden; } .bra-nadzor .gumb, .bra-nadzor select { max-width: 100%; } .car-analize:empty { display: none; } .an-st { display: inline-block; padding: 2px calc(8px * var(--zm)); border-radius: calc(999px * var(--zm)); border: 1px solid var(--crta); margin: 2px calc(4px * var(--zm)) 0 0; } .an-st.koncano { border-color: var(--pvw); } .an-st.caka, .an-st.dela { border-color: var(--jantar); } .an-st.zavrnjeno { border-color: var(--pgm); } .an-svoj { margin-top: calc(10px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid transparent; background: var(--grafit); } .an-svoj summary { cursor: pointer; font-size: calc(16px * var(--zm)); } .an-svoj .or-vrsta { margin-top: calc(8px * var(--zm)); } .an-svoj input { flex: 1 1 calc(260px * var(--zm)); min-height: calc(36px * var(--zm)); } .an-dnevnik { margin: calc(6px * var(--zm)) 0 0; max-height: calc(160px * var(--zm)); overflow: auto; font: calc(13px * var(--zm))/1.4 ui-monospace, monospace; color: var(--siva); white-space: pre-wrap; } /* ─── dirigent in zasedba ─── */ .dg-ovoj { min-height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #0E141B; } .dg-glava { display: flex; flex-wrap: wrap; align-items: center; gap: calc(16px * var(--zm)); padding: calc(10px * var(--zm)) calc(18px * var(--zm)); border-bottom: 1px solid var(--crta); } .dg-glava b { display: block; font-size: calc(22px * var(--zm)); } .dg-glava span { color: var(--siva); font-size: calc(16px * var(--zm)); } .dg-znacka { height: calc(46px * var(--zm)); border-radius: calc(8px * var(--zm)); } .dg-glava nav { margin-left: auto; display: flex; gap: calc(8px * var(--zm)); flex-wrap: wrap; } .dg-telo { padding: calc(14px * var(--zm)) calc(18px * var(--zm)); min-height: 0; } .dg-sek { display: grid; gap: calc(12px * var(--zm)); max-width: calc(980px * var(--zm)); } .dg-sek h2 { margin: 0; font-size: calc(28px * var(--zm)); } .dg-sek h3 { margin: calc(12px * var(--zm)) 0 0; font-size: calc(16px * var(--zm)); color: var(--siva); } .dg-sek textarea { min-height: calc(90px * var(--zm)); width: 100%; box-sizing: border-box; } .dg-seznam { display: grid; gap: calc(8px * var(--zm)); } .dg-g { display: grid; grid-template-columns: calc(52px * var(--zm)) minmax(0, 1fr) auto; gap: calc(12px * var(--zm)); align-items: start; padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .dg-g-ik { display: grid; place-items: center; width: calc(52px * var(--zm)); height: calc(60px * var(--zm)); border-radius: calc(7px * var(--zm)); background: #2B3947; font: 800 calc(13px * var(--zm))/1 var(--sans); color: var(--papir); } .dg-g-ik.partitura { background: #E8B04B; color: #0E141B; } .dg-g-ik.zvok { background: #30C77B; color: #0E141B; } .dg-g-ik.midi { background: #C792EA; color: #0E141B; } .dg-g-ik.notacija { background: #5AA9FF; color: #0E141B; } .dg-g-ik.youtube { background: #E5484D; } .dg-g-b b { display: block; font-size: calc(16px * var(--zm)); word-break: break-word; } .dg-g-b small { color: var(--siva); font-size: calc(14px * var(--zm)); } .dg-g-obseg { margin-top: calc(6px * var(--zm)); font-size: calc(14px * var(--zm)); color: #D9D2C1; line-height: 1.4; } .dg-g-b a { color: var(--pvw); font-size: calc(14px * var(--zm)); } .zas { display: grid; grid-template-columns: calc(300px * var(--zm)) minmax(0, 1fr); gap: calc(16px * var(--zm)); height: calc(100vh - calc(90px * var(--zm))); min-height: calc(480px * var(--zm)); } .zas-paleta { overflow: auto; display: grid; gap: calc(8px * var(--zm)); align-content: start; padding-right: calc(4px * var(--zm)); } .zas-paleta h3 { margin: calc(6px * var(--zm)) 0 0; font-size: calc(16px * var(--zm)); color: var(--siva); text-transform: uppercase; letter-spacing: .06em; } .zas-paleta label { display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); } .zas-paleta input[type=number] { width: calc(64px * var(--zm)); min-height: calc(32px * var(--zm)); } .zas-predloge { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .zas-predloge .izb { font-size: calc(14px * var(--zm)); padding: calc(5px * var(--zm)) calc(10px * var(--zm)); } .zas-predloge small { color: var(--siva); } .zas-skupine { display: grid; gap: calc(4px * var(--zm)); } .zas-skupine .izb { display: flex; align-items: center; gap: calc(8px * var(--zm)); text-align: left; } .zas-skupine .izb i { width: calc(12px * var(--zm)); height: calc(12px * var(--zm)); border-radius: 50%; background: var(--b); } .zas-skupine small { margin-left: auto; color: var(--siva); } .zas-sk-ur { display: grid; gap: calc(8px * var(--zm)); padding: calc(8px * var(--zm)); border-radius: calc(9px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .zas-sk-ur input, .zas-sk-ur select { min-height: calc(34px * var(--zm)); } .zas-barve { display: flex; gap: calc(4px * var(--zm)); flex-wrap: wrap; } .zas-barve button { width: calc(22px * var(--zm)); height: calc(22px * var(--zm)); border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .zas-barve button.izbran { border-color: var(--papir); } .zas-platno { min-height: 0; display: grid; place-items: center; border-radius: calc(8px * var(--zm)); background: #111922; border: 1px solid transparent; padding: calc(8px * var(--zm)); touch-action: none; } .zas-svg { max-height: 100%; } .zas-el.vlecljiv { cursor: grab; } .zas-sk { cursor: grab; } .zas-rez { margin-top: calc(12px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .zas-rez h3 { margin: 0 0 calc(8px * var(--zm)); font-size: calc(16px * var(--zm)); } .zas-rez h3 small { color: var(--siva); font-weight: 500; } .zas-rez .zas-svg { max-width: calc(900px * var(--zm)); } .pd-povabi { display: grid; gap: calc(8px * var(--zm)); } .pd-povabi .or-vrsta input, .pd-povabi .or-vrsta select { min-height: calc(36px * var(--zm)); } .pd-znacke { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .pd-znacke img { height: calc(44px * var(--zm)); border-radius: calc(8px * var(--zm)); } @media (max-width: 900px) { .zas { grid-template-columns: minmax(0, 1fr); height: auto; } .zas-platno { min-height: 60vh; } } .dg-g-obseg b { display: inline; font-size: inherit; } .dg-sek textarea { background: var(--grafit); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); font: 400 calc(16px * var(--zm))/1.45 var(--serif); } .dg-sek > .gumb, .dg-sek > label.gumb { justify-self: start; min-width: calc(220px * var(--zm)); } /* klepet */ .kl-gumb { position: fixed; right: calc(132px * var(--zm)); bottom: calc(16px * var(--zm)); z-index: 880; display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); min-height: calc(42px * var(--zm)); padding: calc(4px * var(--zm)) calc(16px * var(--zm)); border-radius: calc(999px * var(--zm)); border: 1px solid var(--crta); background: var(--grafit); color: var(--papir); font: 700 calc(16px * var(--zm))/1 var(--sans); cursor: pointer; box-shadow: 0 calc(6px * var(--zm)) calc(18px * var(--zm)) rgba(0,0,0,.35); } .kl-gumb i { width: calc(9px * var(--zm)); height: calc(9px * var(--zm)); border-radius: 50%; background: var(--temna); } .kl-gumb.novo i { background: var(--pgm); box-shadow: 0 0 0 calc(4px * var(--zm)) rgba(229,72,77,.25); } .kl-okno { position: fixed; right: calc(16px * var(--zm)); bottom: calc(70px * var(--zm)); z-index: 890; width: min(calc(420px * var(--zm)), calc(100vw - calc(32px * var(--zm)))); height: min(calc(560px * var(--zm)), calc(100vh - calc(110px * var(--zm)))); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--grafit); border: 1px solid transparent; border-radius: calc(14px * var(--zm)); box-shadow: 0 calc(18px * var(--zm)) calc(40px * var(--zm)) rgba(0,0,0,.5); overflow: hidden; } .kl-okno header { display: flex; align-items: center; gap: calc(12px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-bottom: 1px solid var(--crta); } .kl-okno header b { font-size: calc(18px * var(--zm)); } .kl-okno header span { color: var(--siva); font-size: calc(14px * var(--zm)); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kl-okno header button { width: calc(34px * var(--zm)); height: calc(34px * var(--zm)); border-radius: 50%; border: 1px solid var(--crta); background: transparent; color: var(--papir); font-size: calc(22px * var(--zm)); cursor: pointer; } .kl-seznam { overflow: auto; padding: calc(10px * var(--zm)) calc(12px * var(--zm)); display: grid; gap: calc(8px * var(--zm)); align-content: start; } .kl-s { max-width: 86%; padding: calc(7px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--plast); } .kl-s.moje { justify-self: end; background: #2A2413; border: 1px solid rgba(232,176,75,.35); } .kl-g { display: flex; gap: calc(8px * var(--zm)); align-items: baseline; font-size: calc(14px * var(--zm)); } .kl-g b { font-size: calc(14px * var(--zm)); } .kl-g span { color: var(--siva); } .kl-b { font: 400 calc(16px * var(--zm))/1.4 var(--serif); margin-top: 2px; overflow-wrap: anywhere; } .kl-prazno { color: var(--siva); font: 400 calc(15px * var(--zm))/1.45 var(--serif); } .kl-okno form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(8px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-top: 1px solid var(--crta); } .kl-okno textarea { min-height: calc(44px * var(--zm)); resize: none; background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)); font: 400 calc(15px * var(--zm))/1.35 var(--sans); } .pom-znak { margin-left: calc(10px * var(--zm)); padding: calc(3px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(999px * var(--zm)); background: #1C2A3A; border: 1px solid #5AA9FF; color: #BFDDFF; font-size: calc(14px * var(--zm)); font-weight: 700; } @media (max-width: 640px) { .kl-gumb { right: calc(112px * var(--zm)); bottom: calc(12px * var(--zm)); min-height: calc(38px * var(--zm)); padding: calc(3px * var(--zm)) calc(12px * var(--zm)); } } /* generalka, pregled kadrov */ .gen-zivo { display: flex; align-items: center; gap: calc(12px * var(--zm)); margin: calc(6px * var(--zm)) 0; } .gen-zivo .gumb.slab { background: #3A1416; border-color: var(--pgm); color: #FFD6D7; } .gen-st { font-size: calc(14px * var(--zm)); color: var(--siva); } .gen-f { padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(9px * var(--zm)); border: 1px dashed var(--pgm); background: rgba(229,72,77,.06); margin-bottom: calc(8px * var(--zm)); display: grid; gap: calc(8px * var(--zm)); } .gen-f-g { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(16px * var(--zm)); } .gen-f-g i { color: var(--siva); } .gen-f-gumbi { margin-left: auto; display: flex; gap: calc(8px * var(--zm)); } .gen-f-pon { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .gen-f-pon.prazno { color: var(--siva); font-size: calc(14px * var(--zm)); } .gen-p { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(4px * var(--zm)) calc(8px * var(--zm)); align-items: center; padding: calc(6px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(9px * var(--zm)); border: 1px solid transparent; background: var(--plast); color: var(--papir); text-align: left; cursor: pointer; font: 600 calc(14px * var(--zm))/1.2 var(--sans); max-width: calc(320px * var(--zm)); } .gen-p .kam-st { grid-row: span 3; } .gen-p small { color: var(--siva); font-weight: 500; } .gen-p em { font-style: normal; color: var(--pvw); font-size: calc(14px * var(--zm)); } .gen-pregled { position: fixed; inset: 0; z-index: 920; background: #0E141B; display: grid; grid-template-rows: auto minmax(0, 1fr); } .gen-pregled header { display: flex; align-items: center; gap: calc(12px * var(--zm)); padding: calc(12px * var(--zm)) calc(16px * var(--zm)); border-bottom: 1px solid var(--crta); } .gen-pregled header div { flex: 1; } .gen-pregled header b { display: block; font-size: calc(22px * var(--zm)); } .gen-pregled header span { color: var(--siva); } .gen-pr-sez { overflow: auto; padding: calc(10px * var(--zm)) calc(16px * var(--zm)) calc(30px * var(--zm)); display: grid; gap: calc(8px * var(--zm)); align-content: start; } .gen-pr-v { display: grid; grid-template-columns: calc(70px * var(--zm)) calc(64px * var(--zm)) minmax(0, 1fr) calc(90px * var(--zm)); gap: calc(12px * var(--zm)); align-items: center; padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .gen-pr-v.mimo { opacity: .45; } .gen-pr-st { font: 800 calc(30px * var(--zm))/1 var(--sans); color: var(--jantar); } .gen-pr-b b { display: block; font-size: calc(18px * var(--zm)); } .gen-pr-b span { color: #D9D2C1; font: italic 400 calc(16px * var(--zm))/1.3 var(--serif); } .gen-pr-b i { display: block; color: var(--jantar); font-style: normal; font-size: calc(14px * var(--zm)); margin-top: 2px; } .gen-pr-kje { font-size: calc(14px * var(--zm)); color: var(--siva); text-align: right; } .gen-pr-v .pl-slika { width: calc(64px * var(--zm)); } @media (max-width: 640px) { .gen-pr-v { grid-template-columns: calc(54px * var(--zm)) minmax(0, 1fr) calc(70px * var(--zm)); } .gen-pr-v .pl-slika { display: none; } } .gen-f-pon.predlog .gen-p { border-style: dashed; } /* urejanje skupine v zasedbi */ .zas-sk-ur { display: grid; gap: calc(8px * var(--zm)); padding: calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border-left: calc(4px * var(--zm)) solid var(--b, var(--crta)); } .zas-ur-g { display: flex; gap: calc(8px * var(--zm)); } .zas-ur-g input { flex: 1; min-height: calc(36px * var(--zm)); font-weight: 700; } .zas-ur-v { display: grid; gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); } .zas-ur-v > span { text-transform: uppercase; letter-spacing: .05em; font-size: calc(14px * var(--zm)); } .zas-step { display: inline-flex; align-items: center; gap: calc(4px * var(--zm)); } .zas-step button { width: calc(40px * var(--zm)); height: calc(36px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); color: var(--papir); font-size: calc(22px * var(--zm)); cursor: pointer; } .zas-step b { min-width: calc(34px * var(--zm)); text-align: center; color: var(--papir); font-size: calc(18px * var(--zm)); } .zas-obl { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)); } .zas-obl button { min-height: calc(32px * var(--zm)); padding: 2px calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); color: var(--papir); font: 600 calc(14px * var(--zm)) var(--sans); cursor: pointer; } .zas-obl button.izbran { background: var(--papir); color: var(--noc); } .zas-dr { display: grid; gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); } .zas-dr b { color: var(--papir); font-weight: 700; } .zas-dr input { width: 100%; accent-color: var(--b, #E8B04B); } .car-zasedba-ur .zas { height: calc(560px * var(--zm)); min-height: 0; grid-template-columns: calc(280px * var(--zm)) minmax(0, 1fr); } .car-zasedba-ur .zas-paleta { max-height: calc(560px * var(--zm)); } .car-sekcija .ek-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(300px * var(--zm)), 1fr)); gap: calc(16px * var(--zm)); margin: calc(10px * var(--zm)) 0; } .car-sekcija fieldset { border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); display: grid; gap: calc(8px * var(--zm)); min-width: 0; } .car-sekcija legend { padding: 0 calc(6px * var(--zm)); font-weight: 700; } .car-sekcija fieldset label:not(.ek-kl) { display: grid; gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); } .car-sekcija .ek-kl { display: flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(16px * var(--zm)); color: var(--papir); } .car-sekcija .ek-kl small { color: var(--siva); } .car-sekcija .ek-dov { display: grid; gap: calc(4px * var(--zm)); } .car-sekcija .ek-stanje { font-size: calc(14px * var(--zm)); color: var(--siva); } .pika-sk { display: inline-block; width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: var(--b, var(--siva)); margin-right: calc(6px * var(--zm)); } .zas-sledi { padding: calc(6px * var(--zm)) 0; } /* kader s klikom na oder */ .oder-platno { background: #111922; border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(6px * var(--zm)); touch-action: manipulation; user-select: none; } .oder-platno svg { width: 100%; max-height: 52vh; } .oder-stol { cursor: pointer; } .oder-stol.izbran rect, .oder-stol.izbran circle, .oder-stol.izbran path { stroke: #ECE5D3; stroke-width: .12; fill-opacity: 1 !important; } .oder-stol.v-kadru rect, .oder-stol.v-kadru circle, .oder-stol.v-kadru path { stroke: #E8B04B; stroke-width: .1; stroke-dasharray: .15 .1; } .oder-kam { cursor: pointer; } .oder-kam.najboljsa circle:first-child { stroke: #30C77B; stroke-width: .12; } .oder-obr { display: grid; gap: calc(8px * var(--zm)); margin-top: calc(10px * var(--zm)); } .oder-ime { display: flex; align-items: baseline; gap: calc(12px * var(--zm)); flex-wrap: wrap; } .oder-ime b { font-size: calc(22px * var(--zm)); } .oder-ime small { color: var(--siva); } .oder-vr { display: grid; gap: calc(4px * var(--zm)); } .oder-vr > span { font-size: calc(14px * var(--zm)); text-transform: uppercase; letter-spacing: .05em; color: var(--siva); } .oder-vr input { min-height: calc(36px * var(--zm)); } .oder-kam-izb, .oder-plani { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .oder-plani .izb { min-height: calc(32px * var(--zm)); padding: 2px calc(9px * var(--zm)); font-size: calc(14px * var(--zm)); } .oder-kam-izb .izb small { opacity: .8; } #oder-obr-box { min-height: calc(250px * var(--zm)); } .oder-orodja { display: flex; flex-wrap: wrap; gap: calc(16px * var(--zm)); align-items: center; margin: calc(8px * var(--zm)) 0 2px; font-size: calc(14px * var(--zm)); } .oder-orodja .ek-kl { display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); } .zas-glasb summary { cursor: pointer; font-size: calc(14px * var(--zm)); color: var(--siva); } .zas-glasb-seznam { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(120px * var(--zm)), 1fr)); gap: calc(4px * var(--zm)); margin-top: calc(6px * var(--zm)); } .zas-glasb-seznam label { display: flex; align-items: center; gap: calc(4px * var(--zm)); } .zas-glasb-seznam b { min-width: calc(18px * var(--zm)); text-align: right; font-size: calc(14px * var(--zm)); color: var(--siva); } .zas-glasb-seznam input { min-height: calc(30px * var(--zm)); font-size: calc(14px * var(--zm)); flex: 1; min-width: 0; } .gen-pr-veriga { grid-column: 1 / -1; display: flex; gap: calc(18px * var(--zm)); flex-wrap: wrap; font-size: calc(14px * var(--zm)); color: var(--siva); padding-top: calc(4px * var(--zm)); border-top: 1px dashed var(--crta); } .kam-st.mala { min-width: calc(20px * var(--zm)); height: calc(20px * var(--zm)); font-size: calc(14px * var(--zm)); } /* partitura na odru: kdo igra, kdo je v fokusu */ .oder-stol.tiho rect, .oder-stol.tiho circle, .oder-stol.tiho path { fill-opacity: .32; } .oder-stol.igra rect, .oder-stol.igra circle, .oder-stol.igra path { fill-opacity: .95; } .oder-stol.fokus { animation: oder-fokus 1.2s ease-in-out infinite; } @keyframes oder-fokus { 50% { filter: brightness(1.6) drop-shadow(0 0 .25px #ECE5D3); } } .oder-trak { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); margin-bottom: calc(8px * var(--zm)); font-size: calc(16px * var(--zm)); } .oder-takt b { font-size: calc(18px * var(--zm)); } .oder-takt small { color: var(--siva); } .oder-takt i { color: var(--jantar); font-family: var(--serif); } .oder-trak .izb i { display: inline-block; width: calc(9px * var(--zm)); height: calc(9px * var(--zm)); border-radius: 50%; background: var(--b); margin-right: calc(5px * var(--zm)); } .oder-trak .izb.mala { min-height: calc(30px * var(--zm)); padding: 2px calc(9px * var(--zm)); font-size: calc(14px * var(--zm)); } .oder-igrajo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--zm)); color: var(--siva); font-size: calc(14px * var(--zm)); } .oder-fokus { border-color: var(--b); font-weight: 700; } .oder-predlog { border-style: dashed; gap: calc(8px * var(--zm)); display: inline-flex; align-items: center; } #oder-anim { pointer-events: none; } .dg-cas { flex: 0 0 calc(90px * var(--zm)) !important; min-width: calc(90px * var(--zm)); } .oder-zivo { margin: calc(8px * var(--zm)) 0; } .oder-zivo.zaprt { margin: calc(4px * var(--zm)) 0; } .oder-zivo-g { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12px * var(--zm)); margin-bottom: calc(6px * var(--zm)); font-size: calc(14px * var(--zm)); } .oder-zivo-g b { font-size: calc(16px * var(--zm)); } .oder-zivo .oder-platno svg { max-height: 40vh; } .oder-stol.naslednji rect, .oder-stol.naslednji circle, .oder-stol.naslednji path { stroke: #30C77B; stroke-width: .12; } .oder-kam.pgm circle:first-child { filter: drop-shadow(0 0 .3px #E5484D); } #oder-zivo-anim { pointer-events: none; } /* referenca za analizo */ .ref-karta { margin-top: calc(12px * var(--zm)); padding: calc(12px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; display: grid; gap: calc(12px * var(--zm)); } .ref-karta h4 { margin: 0; font-size: calc(16px * var(--zm)); } .ref-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: calc(16px * var(--zm)); align-items: start; } .ref-opis { display: grid; gap: calc(8px * var(--zm)); } .ref-opis b { font-size: calc(16px * var(--zm)); } .ref-opis small { color: var(--siva); } .ref-kaj { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); } .ref-kaj li::before { content: '✓ '; color: var(--pvw); font-weight: 800; } .ref-kaj li.ne { color: var(--siva); } .ref-kaj li.ne::before { content: '✕ '; color: var(--pgm); } .ref-kamer { display: flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); } .ref-kamer .izb { min-height: calc(30px * var(--zm)); padding: 2px calc(10px * var(--zm)); } .ref-pogled img { width: 100%; border-radius: calc(8px * var(--zm)); border: 1px solid var(--crta); display: block; } .ref-pogled.izklop img { opacity: .35; filter: grayscale(1); } .ref-napredek { display: grid; gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); } @media (max-width: 760px) { .ref-g { grid-template-columns: minmax(0, 1fr); } } .ref-napredek[hidden] { display: none; } /* naprave: mešalka in luč */ .np { display: grid; gap: calc(16px * var(--zm)); max-width: calc(1100px * var(--zm)); padding: calc(6px * var(--zm)) 0 calc(40px * var(--zm)); } .np-karta { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(14px * var(--zm)) calc(16px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); } .np-karta header { display: flex; align-items: center; gap: calc(12px * var(--zm)); } .np-karta h3 { font-size: calc(22px * var(--zm)); } .np-karta header small { color: var(--siva); } .np-stikalo { position: relative; width: calc(52px * var(--zm)); height: calc(30px * var(--zm)); flex: none; } .np-stikalo input { opacity: 0; width: 0; height: 0; position: absolute; } .np-stikalo span { position: absolute; inset: 0; border-radius: calc(999px * var(--zm)); background: #2B3947; transition: background .15s; cursor: pointer; } .np-stikalo span::after { content: ''; position: absolute; left: calc(3px * var(--zm)); top: calc(3px * var(--zm)); width: calc(24px * var(--zm)); height: calc(24px * var(--zm)); border-radius: 50%; background: var(--papir); transition: transform .15s; } .np-stikalo input:checked + span { background: var(--pvw); } .np-stikalo input:checked + span::after { transform: translateX(calc(22px * var(--zm))); } .np-stikalo input:focus-visible + span { outline: 2px solid var(--jantar); outline-offset: 2px; } .np-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(180px * var(--zm)), 1fr)); gap: calc(12px * var(--zm)); } .np-mreza label { display: grid; gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); } .np-mreza input, .np-mreza select { min-height: calc(38px * var(--zm)); } .np-vr { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); } .np-vr > span:first-child { font-size: calc(14px * var(--zm)); text-transform: uppercase; letter-spacing: .05em; color: var(--siva); margin-right: calc(4px * var(--zm)); } .np-vr small { color: var(--siva); } .np-vr.ne { color: #FF8A8E; } .np-okv { display: inline-flex; align-items: center; gap: calc(4px * var(--zm)); color: var(--siva); font-size: calc(14px * var(--zm)); } .np-okv input { width: calc(70px * var(--zm)); min-height: calc(32px * var(--zm)); } .np-karta h4 { margin: calc(4px * var(--zm)) 0 0; font-size: calc(16px * var(--zm)); } .np-karta h4 small { color: var(--siva); font-weight: 500; } .np-vhodi { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(250px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .np-vhodi label { display: flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); } .np-vhodi input { width: calc(110px * var(--zm)); min-height: calc(34px * var(--zm)); margin-left: auto; } .np-pika { display: inline-block; width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: #56626E; margin-right: calc(6px * var(--zm)); } .np-pika.ok { background: var(--pvw); } .np-pika.caka { background: var(--jantar); } .np-pika.ne { background: var(--pgm); } .np-most input { min-height: calc(30px * var(--zm)); width: calc(220px * var(--zm)); } .np-zivo { display: grid; gap: calc(4px * var(--zm)); padding: calc(6px * var(--zm)) calc(10px * var(--zm)); margin: calc(6px * var(--zm)) 0; border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .np-luc { display: grid; gap: calc(8px * var(--zm)); } .np-luc-seznam { display: grid; gap: calc(4px * var(--zm)); } .np-luc-v { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); padding: calc(4px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); font-size: calc(14px * var(--zm)); } .np-luc-t { color: var(--siva); min-width: calc(64px * var(--zm)); } .np-luc-v b { color: var(--jantar); } .np-luc-v span:nth-of-type(2) { flex: 1; } .np-pov { color: var(--jantar); } .np-h { margin: calc(10px * var(--zm)) 0 calc(4px * var(--zm)); font-size: calc(16px * var(--zm)); } .np-h small { color: var(--siva); font-weight: 500; } .ns-ur { display: grid; gap: calc(8px * var(--zm)); padding: calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .ns-kanali { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(300px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .ns-k { display: grid; grid-template-columns: calc(32px * var(--zm)) calc(100px * var(--zm)) 1fr calc(36px * var(--zm)) calc(26px * var(--zm)); align-items: center; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); } .ns-k b { text-align: right; color: var(--siva); } .ns-k input[type=range] { width: 100%; } .ns-ime { min-height: calc(30px * var(--zm)); font-size: calc(14px * var(--zm)); } .ns-v { text-align: right; font-weight: 700; } .np-vhod { min-height: calc(26px * var(--zm)); padding: 1px calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); cursor: default; } /* naprave: vodeni postopek */ .np-koraki { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(170px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .np-k { display: flex; align-items: center; gap: calc(12px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .np-k.ok { border-color: rgba(48,199,123,.6); } .np-k.ne { border-color: rgba(229,72,77,.6); } .np-k.caka { border-color: rgba(232,176,75,.6); } .np-k-st { width: calc(30px * var(--zm)); height: calc(30px * var(--zm)); border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--plast); flex: none; } .np-k.ok .np-k-st { background: var(--pvw); color: #06261A; } .np-k div { display: grid; min-width: 0; } .np-k small { color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .np-n { display: inline-grid; place-items: center; width: calc(26px * var(--zm)); height: calc(26px * var(--zm)); border-radius: 50%; background: var(--plast2); font-size: calc(16px * var(--zm)); margin-right: calc(8px * var(--zm)); vertical-align: middle; } .np-kartice { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(190px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .np-kart { display: grid; grid-template-columns: calc(48px * var(--zm)) 1fr; grid-template-rows: auto auto; column-gap: calc(10px * var(--zm)); align-items: center; text-align: left; padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); color: var(--papir); cursor: pointer; } .np-kart .np-ik { grid-row: 1 / 3; } .np-kart b { font-size: calc(16px * var(--zm)); } .np-kart small { color: var(--siva); font-size: calc(14px * var(--zm)); line-height: 1.2; } .np-kart.izbran { border-color: var(--jantar); background: #2A2210; } .np-ik { display: inline-block; width: calc(48px * var(--zm)); height: calc(32px * var(--zm)); color: var(--jantar); } .np-ik svg { width: 100%; height: 100%; } .np-najdene { display: inline-flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); align-items: center; } .np-najdena { display: grid; grid-template-columns: calc(44px * var(--zm)) 1fr; column-gap: calc(8px * var(--zm)); align-items: center; text-align: left; padding: calc(4px * var(--zm)) calc(10px * var(--zm)) calc(4px * var(--zm)) calc(6px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--pvw); background: #0F2A1E; color: var(--papir); cursor: pointer; } .np-najdena .np-ik { grid-row: 1 / 3; width: calc(44px * var(--zm)); color: var(--pvw); } .np-najdena small { color: var(--siva); } .np-st { display: flex; align-items: center; min-height: calc(38px * var(--zm)); gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--papir); } .np-vh { display: grid; grid-template-columns: calc(34px * var(--zm)) 1fr auto auto; align-items: center; gap: calc(8px * var(--zm)); padding: calc(4px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--noc); } .np-vh.pgm { outline: 2px solid var(--pgm); } .np-vh-ime { font-size: calc(14px * var(--zm)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .np-vh select, .np-vh input { width: calc(150px * var(--zm)); min-height: calc(34px * var(--zm)); font-size: calc(14px * var(--zm)); } .np-nav summary { cursor: pointer; color: var(--siva); font-size: calc(14px * var(--zm)); } .np-nav pre { background: var(--noc); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); overflow-x: auto; } .np-preizkus-rez { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .np-pr { display: inline-flex; align-items: center; gap: calc(4px * var(--zm)); padding: calc(3px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(999px * var(--zm)); background: var(--noc); font-size: calc(14px * var(--zm)); } .np-pr.ok { border: 1px solid rgba(48,199,123,.5); } .np-pr.ne { border: 1px solid var(--pgm); } button.np-k { cursor: pointer; color: var(--papir); font: inherit; text-align: left; } .np-k.izbran { background: var(--plast2); box-shadow: inset 0 calc(-3px * var(--zm)) 0 var(--jantar); } .np-karta[hidden] { display: none; } /* ── ZEV-REZIJA-TLORIS-V1: tloris na zaslonu je vedno črn; oder na tlorisu; zasedba po glasbilih ── */ .shema-platno.s-tl { background: #000; } .shema .tloris-slika { opacity: 1; } .shema .tloris-slika.caka, .zas-tl image.caka { visibility: hidden; } .shema .tloris-zatemni { display: none; } .shema.s-tlorisom .dvorana { fill: #6F7B87; } .shema.s-tlorisom .zona ellipse { fill: rgba(232, 176, 75, .07); stroke: rgba(232, 176, 75, .7); stroke-width: 2; } .shema.s-tlorisom .zona text { fill: #ECE5D3; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: calc(5px * var(--zm)); } .shema.s-tlorisom .kamera .ime { fill: #ECE5D3; stroke: #000; stroke-width: calc(5px * var(--zm)); } .shema.s-zas .zona.sk ellipse { fill: none; stroke-opacity: .35; stroke-dasharray: 6 5; } .shema.s-zas:not(.m-cone) .zona.sk text { display: none; } .shema #sh-zas { pointer-events: none; } .shema.m-oder .kamera, .shema.m-oder .zona { opacity: .45; pointer-events: none; } .shema .tl-oder { fill: rgba(232, 176, 75, .08); stroke: #E8B04B; stroke-width: 2.5; stroke-dasharray: 12 7; cursor: move; } .shema .tl-rob { stroke: #E8B04B; stroke-width: 6; stroke-linecap: round; pointer-events: none; } .shema .tl-os { stroke: #E8B04B; stroke-width: 1.5; stroke-dasharray: 4 5; pointer-events: none; } .shema .tl-rocaj { fill: #000; stroke: #E8B04B; stroke-width: 3.5; cursor: grab; } .shema .tl-napis { fill: #E8B04B; font: 700 calc(17px * var(--zm)) var(--sans); text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: calc(5px * var(--zm)); pointer-events: none; } .tl-opozorilo { background: rgba(232, 176, 75, .12); border-left: calc(3px * var(--zm)) solid var(--jantar); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(4px * var(--zm)); margin: calc(6px * var(--zm)) 0; font-size: calc(16px * var(--zm)); } .zas-svg.s-tlorisom { background: #000; } .zas-mesta { display: grid; gap: calc(4px * var(--zm)); margin: calc(6px * var(--zm)) 0; } .zas-m { display: grid; grid-template-columns: calc(22px * var(--zm)) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr) calc(58px * var(--zm)); gap: calc(4px * var(--zm)); align-items: center; } .zas-m b { color: var(--siva); text-align: right; font-size: calc(14px * var(--zm)); } .zas-m select, .zas-m input { min-height: calc(32px * var(--zm)); font-size: calc(16px * var(--zm)); padding: 2px calc(6px * var(--zm)); background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(4px * var(--zm)); min-width: 0; width: 100%; } .zas-pv { font-size: calc(14px * var(--zm)); color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zas-pv.pv-rocno { color: var(--papir); } .zas-pv.pv-analiza { color: var(--pvw); } .zas-pv.pv-predlog { color: var(--jantar); } .zas-hitro { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)); align-items: center; margin: calc(6px * var(--zm)) 0; font-size: calc(14px * var(--zm)); color: var(--siva); } .zas-vsi label { display: flex; gap: calc(8px * var(--zm)); align-items: center; font-size: calc(14px * var(--zm)); color: var(--siva); } .zas-vsi select { min-height: calc(32px * var(--zm)); flex: 1; background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(4px * var(--zm)); } .zas-stanje-odra { font-size: calc(14px * var(--zm)); margin: calc(4px * var(--zm)) 0; color: var(--siva); } .zas-stanje-odra.cez { color: var(--pgm); } .zas-ime-l { display: grid; gap: calc(4px * var(--zm)); flex: 1; min-width: 0; font-size: calc(14px * var(--zm)); color: var(--siva); } .zas-ime-l input { width: 100%; font-size: calc(16px * var(--zm)); font-weight: 700; } /* ── ZEV-REZIJA-UREJANJE-V1: ročaji na odru, tesni stoli, plasti tlorisa ── */ .zas-rocaji { pointer-events: none; } .zas-rocaji .zr-roc { pointer-events: all; fill: #0E141B; stroke: #E8B04B; stroke-width: .06; cursor: grab; } .zas-rocaji .zr-os { stroke: #E8B04B; stroke-width: .03; stroke-dasharray: .12 .1; } .zas-el.tesno > rect:first-child { stroke: #E5484D; stroke-width: .07; } .zas-sk-orodja { display: flex; gap: calc(8px * var(--zm)); flex-wrap: wrap; margin: calc(6px * var(--zm)) 0 2px; } .zas-pos { margin-top: calc(6px * var(--zm)); } body.dirig .zas-za-rez { display: none; } .sh-plasti { display: inline-flex; gap: calc(12px * var(--zm)); align-items: center; margin: 0 calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); } .sh-plasti label { display: inline-flex; gap: calc(4px * var(--zm)); align-items: center; cursor: pointer; color: var(--papir); } .shema.skrij-cone #sh-cone, .shema.skrij-kam #sh-kamere { display: none; } .shema.s-zas:not(.m-cone) .zona.sk { display: none; } .shema .tl-rocaj.rob { fill: #E8B04B; stroke: #000; } .tl-mer { display: grid; gap: calc(4px * var(--zm)); margin: calc(6px * var(--zm)) 0; font-size: calc(14px * var(--zm)); color: var(--siva); } .tl-mer select, .tl-mer input { min-height: calc(36px * var(--zm)); background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(4px * var(--zm)) calc(8px * var(--zm)); font-size: calc(16px * var(--zm)); } /* ZEV-REZIJA-V55: zaslon snemalca na telefonu. Polje »zdaj« dobi višino po vsebini, seznam kadrov vzame ostanek in se odreže; stanje Prosto je zbito in ne prekrije več odštevanja, vrstice kamer in časovnice (prej je v pokončnem in ležečem telefonu besedilo stanja Prosto teklo čez ves zaslon). */ @media (max-width: 900px) and (orientation: portrait) { .tab { grid-template-rows: auto auto auto minmax(0, 1fr) auto; } .tab-zdaj { align-content: start; overflow: hidden; min-height: 0; } .tab-desno { overflow: hidden; } .tab-zdaj > .tz-kn.tih + .tz-prosto { grid-column: 2 / -1; } .tz-prosto { padding: calc(10px * var(--zm)) calc(12px * var(--zm)); gap: calc(8px * var(--zm)); } .tz-prosto-naslov { font-size: calc(22px * var(--zm)); } .tz-prosto p { font-size: calc(16px * var(--zm)); line-height: 1.35; } .tz-prosto ul { font-size: calc(16px * var(--zm)); line-height: 1.3; } .tz-prosto li:nth-child(n+4) { display: none; } } @media (orientation: landscape) and (max-height: 500px) { .tab-zdaj { align-content: start; overflow: hidden; min-height: 0; } .tab-desno { overflow: hidden; } .tz-prosto { padding: calc(8px * var(--zm)) calc(12px * var(--zm)); gap: calc(4px * var(--zm)); } .tz-prosto-naslov { font-size: calc(22px * var(--zm)); } .tz-prosto p { display: none; } .tz-prosto ul { font-size: calc(14px * var(--zm)); line-height: 1.25; } .tz-prosto li:nth-child(n+3) { display: none; } } /* ZEV-REZIJA-V56: koncert po skladbah */ .kn { display: grid; gap: calc(16px * var(--zm)); } .kn-glava h2 { margin: 0 0 calc(4px * var(--zm)); } .kn-zavihki { display: flex; gap: calc(8px * var(--zm)); flex-wrap: wrap; align-items: center; } .kn-zavihki button { border: 1px solid transparent; background: var(--grafit); color: var(--papir); border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); font: 700 calc(16px * var(--zm)) "Barlow Condensed", system-ui, sans-serif; cursor: pointer; display: inline-flex; gap: calc(8px * var(--zm)); align-items: center; } .kn-zavihki button b { color: #E8B04B; } .kn-zavihki button.izbran { background: var(--papir); color: var(--noc); border-color: var(--papir); } .kn-zavihki button.izbran b { color: var(--noc); } .kn-pika { width: calc(8px * var(--zm)); height: calc(8px * var(--zm)); border-radius: 50%; background: #E5484D; display: inline-block; } .kn-sk { border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(12px * var(--zm)) calc(14px * var(--zm)); background: #111922; display: grid; gap: calc(8px * var(--zm)); } .kn-sk h3 { margin: calc(10px * var(--zm)) 0 2px; font-size: calc(18px * var(--zm)); } .kn-sk-g { display: flex; gap: calc(12px * var(--zm)); align-items: end; flex-wrap: wrap; justify-content: space-between; } .kn-sk-g label { display: grid; gap: calc(4px * var(--zm)); flex: 1 1 calc(260px * var(--zm)); color: var(--siva); font-size: calc(14px * var(--zm)); } .kn-sk-g input { font: 700 calc(20px * var(--zm)) "Barlow Condensed", system-ui, sans-serif; background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); } .kn-red { display: inline-flex; gap: calc(8px * var(--zm)); align-items: center; color: var(--siva); font-size: calc(14px * var(--zm)); } .kn-vr { display: flex; gap: calc(12px * var(--zm)); justify-content: space-between; align-items: center; flex-wrap: wrap; padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--noc); } .kn-vr > div:first-child { display: grid; gap: calc(4px * var(--zm)); min-width: 0; } .kn-vr b { overflow-wrap: anywhere; } .kn-vr small { color: var(--siva); } .kn-gumbi { display: flex; gap: calc(8px * var(--zm)); flex-wrap: wrap; align-items: center; } .kn-opoz { margin: 0; padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: rgba(229, 72, 77, .14); border: 1px solid #E5484D; } .kn-ukaz { margin: 0; padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: #0B1016; color: #B8C4D6; font-size: calc(14px * var(--zm)); white-space: pre-wrap; word-break: break-all; user-select: all; } .kn-dodaj { display: flex; gap: calc(8px * var(--zm)); flex-wrap: wrap; } .kn-dodaj input { flex: 1 1 calc(90px * var(--zm)); min-height: calc(36px * var(--zm)); background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(6px * var(--zm)) calc(8px * var(--zm)); } .kn-dodaj input#kn-yt { flex: 3 1 calc(220px * var(--zm)); } .kn-nalozi { justify-self: start; } .kn-stanje { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(4px * var(--zm)); } .kn-stanje .ok { color: #30C77B; } .kn-stanje .ni { color: #E8B04B; } .kn-brez { border: 1px dashed var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); display: grid; gap: calc(8px * var(--zm)); } .kn-brez select { background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(6px * var(--zm)) calc(8px * var(--zm)); } .kn-sk code { font-size: calc(14px * var(--zm)); color: #B8C4D6; } .kn-odstrani { margin: calc(6px * var(--zm)) 0 0; text-align: right; } .kn-opoz .gumb { margin-left: calc(6px * var(--zm)); } /* ZEV-REZIJA-V57: zasedba na tlorisu, velikost znakov, ritem sekcija, kota za merilo, video v Koncertu */ .shema.m-zasedba #sh-zas { pointer-events: auto; } .shema.m-zasedba #sh-zas .zas-el, .shema.m-zasedba #sh-zas .zas-sk { cursor: grab; } .shema.m-zasedba #sh-kamere, .shema.m-zasedba #sh-cone { pointer-events: none; opacity: .35; } .zas-znaki { display: inline-flex; gap: calc(8px * var(--zm)); align-items: center; color: var(--siva); font-size: calc(14px * var(--zm)); margin-right: calc(8px * var(--zm)); } .zas-znaki select, .zas-clani select { background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(5px * var(--zm)) calc(8px * var(--zm)); font: inherit; } .zas-clani { display: grid; gap: calc(8px * var(--zm)); margin: calc(6px * var(--zm)) 0; } .zas-clani > span { color: var(--siva); font-size: calc(14px * var(--zm)); } .zas-clani-s, .zas-clani-d { display: flex; gap: calc(8px * var(--zm)); flex-wrap: wrap; align-items: center; } .tl-kota { stroke: #E8B04B; stroke-width: 3; stroke-dasharray: 8 5; } .tl-kota-t { fill: #E8B04B; stroke: #0E141B; stroke-width: 2; } .tl-kota-ur { display: grid; gap: calc(8px * var(--zm)); } .kn-mali { font-size: calc(14px * var(--zm)); color: var(--siva); display: inline-flex; gap: calc(4px * var(--zm)); align-items: center; } select.kn-mali { background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(3px * var(--zm)) calc(6px * var(--zm)); } /* ZEV-REZIJA-V59: predogledi v Koncertu, stanje koncerta, okno za pošto dirigentu */ .kn-vr .kn-op { display: grid; gap: calc(4px * var(--zm)); min-width: 0; flex: 1 1 calc(200px * var(--zm)); } .kn-vr > .kn-pv { flex: 0 0 auto; display: flex; align-items: center; } .kn-pdf-sl { display: block; width: calc(130px * var(--zm)); min-height: calc(90px * var(--zm)); border-radius: calc(8px * var(--zm)); overflow: hidden; background: #fff; border: 1px solid var(--crta); } .kn-pdf-sl img { display: block; width: 100%; height: auto; } .kn-pdf-sl span { display: block; padding: calc(34px * var(--zm)) calc(8px * var(--zm)); text-align: center; color: #55606D; font-size: calc(14px * var(--zm)); } .kn-yt-sl, .kn-pole { display: block; width: calc(160px * var(--zm)); height: auto; border-radius: calc(8px * var(--zm)); border: 1px solid var(--crta); } .kn-zvok { width: calc(260px * var(--zm)); max-width: 100%; height: calc(36px * var(--zm)); } .kn-ytn { display: block; color: var(--papir); font-size: calc(14px * var(--zm)); font-weight: 400; overflow-wrap: anywhere; } .kn-sk-stanje { display: flex; gap: calc(12px * var(--zm)); justify-content: space-between; align-items: center; flex-wrap: wrap; padding: calc(10px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid #E8B04B; background: rgba(232, 176, 75, .08); } .kn-sk-stanje.ok { border-color: #30C77B; background: rgba(48, 199, 123, .08); } .kn-sk-stanje .kn-op { display: grid; gap: calc(4px * var(--zm)); } .kn-sk-stanje small { color: var(--siva); } .kn-okno { position: fixed; inset: 0; z-index: 60; background: rgba(8, 11, 16, .72); display: flex; align-items: center; justify-content: center; padding: calc(16px * var(--zm)); } .kn-okno-v { width: min(calc(760px * var(--zm)), 100%); max-height: 100%; overflow: auto; background: var(--grafit); border: 1px solid transparent; border-radius: calc(14px * var(--zm)); padding: calc(16px * var(--zm)) calc(18px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); } .kn-okno-v h3 { margin: 0; } .kn-p { display: grid; gap: calc(4px * var(--zm)); color: var(--siva); font-size: calc(14px * var(--zm)); } .kn-p input, .kn-p textarea { background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); font: calc(15px * var(--zm))/1.45 system-ui, sans-serif; } .kn-p textarea { resize: vertical; min-height: calc(280px * var(--zm)); } /* ZEV-REZIJA-V60: skladba brez PDF */ .kn-zavihki button.kn-caka { border-style: dashed; } .kn-ni { font-style: normal; font-size: calc(14px * var(--zm)); color: #E8B04B; font-family: system-ui, sans-serif; font-weight: 500; } .kn-zavihki button.izbran .kn-ni { color: #7A5410; } .kn-sk.kn-caka { border-style: dashed; } /* ZEV-REZIJA-V60B: izklop skladbe, glasbeniki na tlorisu, ročaji odra, natančna poravnava */ .kn-zavihki button.kn-izkl { opacity: .55; text-decoration: line-through; } .kn-vklop { font-size: calc(14px * var(--zm)); color: var(--siva); } .shema .tl-rocaj.sred { fill: rgba(0, 0, 0, .55); stroke: #E8B04B; stroke-width: 3; cursor: move; } .shema .tl-rocaj.vrti { fill: #000; stroke: #E8B04B; stroke-width: 3.5; cursor: grab; } .shema .tl-znak { fill: none; stroke: #E8B04B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; } .shema .tl-znak.rob { stroke: #000; } .tl-pomik { display: flex; gap: calc(8px * var(--zm)); align-items: center; flex-wrap: wrap; margin: calc(4px * var(--zm)) 0; } .tl-pomik > span { min-width: calc(64px * var(--zm)); color: var(--siva); font-size: calc(14px * var(--zm)); } .tl-pomik .gumb { min-width: calc(44px * var(--zm)); min-height: calc(40px * var(--zm)); font-size: calc(16px * var(--zm)); } .tl-pomik input, .tl-pomik select { width: calc(84px * var(--zm)); min-height: calc(38px * var(--zm)); background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(4px * var(--zm)) calc(8px * var(--zm)); } .tz-sk { border-left: calc(4px * var(--zm)) solid var(--b, #E8B04B); padding: calc(6px * var(--zm)) 0 calc(6px * var(--zm)) calc(10px * var(--zm)); display: grid; gap: calc(8px * var(--zm)); margin: calc(6px * var(--zm)) 0; } .tz-stol { display: grid; gap: calc(8px * var(--zm)); padding: calc(8px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--noc); } .tz-stol label { display: grid; gap: calc(4px * var(--zm)); color: var(--siva); font-size: calc(14px * var(--zm)); } .tz-stol select, .tz-stol input { background: var(--grafit); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(5px * var(--zm)) calc(8px * var(--zm)); font: inherit; } .zas-novo { margin: calc(6px * var(--zm)) 0; } /* ZEV-REZIJA-V61: pregleden tloris, poudarjena kamera, kader in objektiv, kdo igra */ .shema .tloris-slika { opacity: var(--risba, 1); } .shema.skrij-imena .zas-napis-sk, .shema.skrij-imena .zas-napis-el { display: none; } .shema.ima-izbrano .kamera:not(.izbrana) { opacity: .35; } .shema.ima-izbrano .kamera.izbrana .stozec { fill-opacity: .22; stroke-opacity: .8; } .sh-risba { display: inline-flex; gap: calc(4px * var(--zm)); align-items: center; } .sh-risba input { width: calc(90px * var(--zm)); } #oder-svg.anim-akt .oder-kam { transition: opacity .25s; } #oder-svg.anim-akt .oder-kam:not(.aktivna) { opacity: .22; } #oder-svg.anim-akt .oder-kam.aktivna { opacity: .55; } #oder-anim circle { filter: drop-shadow(0 0 .35px #ECE5D3); } #oder-zivo-svg:has(.oder-kam.pgm) .oder-kam:not(.pgm):not(.pvw) { opacity: .25; } .sh-kader { display: grid; gap: calc(8px * var(--zm)); margin: calc(10px * var(--zm)) 0; padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--noc); } .sh-kader h4 { margin: 0; } .sh-razdalja { margin: 2px 0; } .sh-plani { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--zm)); } .sh-plani td { padding: calc(3px * var(--zm)) calc(4px * var(--zm)); border-bottom: 1px solid var(--crta); } .sh-plani td:nth-child(2) { text-align: right; white-space: nowrap; } .sh-plani tr.izven td { color: #E5484D; } .kn-igra { display: flex; gap: calc(8px * var(--zm)); flex-wrap: wrap; } .kn-ig { display: inline-flex; gap: calc(8px * var(--zm)); align-items: center; padding: calc(4px * var(--zm)) calc(9px * var(--zm)); border-radius: calc(999px * var(--zm)); border: 1px solid var(--b, var(--crta)); font-size: calc(14px * var(--zm)); } /* ZEV-REZIJA-V62: različica ob zvezi in v meniju tablice */ .zv-izd { opacity: .7; font-size: .85em; } .tab-razl { margin: calc(4px * var(--zm)) 0; color: var(--siva); font-size: calc(14px * var(--zm)); text-align: center; } /* ZEV-REZIJA-V63: skladba po korakih, pregled koncerta */ .kn-pk { display: inline-grid; place-items: center; width: calc(24px * var(--zm)); height: calc(24px * var(--zm)); border-radius: 50%; font: 700 calc(12px * var(--zm)) system-ui, sans-serif; font-style: normal; border: 1.5px solid var(--crta); color: var(--siva); flex: 0 0 auto; } .kn-pk.ok { background: #30C77B; border-color: #30C77B; color: #0E141B; } .kn-pk.zast { background: #E8B04B; border-color: #E8B04B; color: #0E141B; } .kn-pk.manj { border-color: #E5484D; color: #E5484D; } .kn-pk.del { border-color: #E8B04B; color: #E8B04B; border-style: dashed; } .kn-pike-vr { display: flex; gap: calc(8px * var(--zm)); flex-wrap: wrap; margin: 2px 0 calc(6px * var(--zm)); } .kn-korak { border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); background: #0F1720; } .kn-korak.ok { border-color: rgba(48, 199, 123, .45); } .kn-korak.zast { border-color: #E8B04B; } .kn-korak > summary { list-style: none; display: flex; gap: calc(12px * var(--zm)); align-items: center; padding: calc(10px * var(--zm)) calc(12px * var(--zm)); cursor: pointer; } .kn-korak > summary::-webkit-details-marker { display: none; } .kn-korak > summary b { font-size: calc(16px * var(--zm)); } .kn-korak > summary small { margin-left: auto; color: var(--siva); font-size: calc(14px * var(--zm)); text-align: right; } .kn-korak[open] > summary { border-bottom: 1px solid var(--crta); } .kn-korak-t { padding: calc(10px * var(--zm)) calc(12px * var(--zm)); display: grid; gap: calc(8px * var(--zm)); } .kn-ukaz-vr { display: grid; gap: calc(8px * var(--zm)); } .kn-pomoc > summary { cursor: pointer; color: var(--siva); font-size: calc(14px * var(--zm)); } .kn-video { width: calc(260px * var(--zm)); max-width: 100%; border-radius: calc(8px * var(--zm)); background: #000; } .kn-v-kadrirko { display: flex; gap: calc(12px * var(--zm)); justify-content: space-between; align-items: center; flex-wrap: wrap; padding: calc(12px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid #E8B04B; background: rgba(232, 176, 75, .08); margin-top: calc(6px * var(--zm)); } .kn-v-kadrirko .kn-op { display: grid; gap: calc(4px * var(--zm)); } .kn-v-kadrirko small { color: var(--siva); } .kn-pregled { display: grid; gap: calc(4px * var(--zm)); } .kn-pr-vr { display: grid; grid-template-columns: calc(28px * var(--zm)) minmax(0, 1fr) auto; gap: calc(8px * var(--zm)); align-items: center; padding: calc(6px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid transparent; background: var(--grafit); color: var(--papir); text-align: left; cursor: pointer; font: inherit; } .kn-pr-vr.izbran { border-color: var(--papir); } .kn-pr-vr > b { color: #E8B04B; font-size: calc(16px * var(--zm)); } .kn-pr-ime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .kn-pr-pike { display: flex; gap: calc(4px * var(--zm)); flex-wrap: wrap; justify-content: flex-end; } .kn-pr-pike .kn-pk { width: calc(18px * var(--zm)); height: calc(18px * var(--zm)); font-size: calc(10px * var(--zm)); } .kn-v-kadr { color: #30C77B; font-weight: 600; } .kn-an-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(120px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .kn-an-mreza > div { display: grid; gap: calc(4px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--noc); } .kn-an-mreza small { color: var(--siva); font-size: calc(14px * var(--zm)); } .kn-an-mreza b { font-size: calc(18px * var(--zm)); } .kn-an-kamere { display: flex; gap: calc(8px * var(--zm)); flex-wrap: wrap; align-items: center; } .kn-an-kamere > small { color: var(--siva); margin-right: calc(4px * var(--zm)); } .kn-an-kam { display: inline-flex; gap: calc(4px * var(--zm)); align-items: center; padding: 2px calc(8px * var(--zm)); border-radius: calc(999px * var(--zm)); border: 1px solid var(--b); font-size: calc(14px * var(--zm)); } .kn-an-kam b { color: var(--b); } .kn-an-stavki { margin: 0; padding-left: calc(18px * var(--zm)); color: var(--siva); font-size: calc(14px * var(--zm)); } .kn-porocilo { white-space: pre-wrap; font: calc(13px * var(--zm))/1.45 system-ui, sans-serif; color: var(--papir); background: var(--noc); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); max-height: calc(320px * var(--zm)); overflow: auto; } /* ZEV-REZIJA-V64A: predogled v strnjeni vrstici koraka */ .kn-mini { display: inline-flex; gap: calc(4px * var(--zm)); margin-left: auto; } .kn-mini img { height: calc(30px * var(--zm)); width: auto; border-radius: calc(4px * var(--zm)); border: 1px solid var(--crta); background: #fff; } /* ZEV-REZIJA-V66: solo na tablici snemalca in navodila režiserja */ .tab-solo.velik { top: calc(64px * var(--zm)); width: min(92%, calc(680px * var(--zm))); border-radius: calc(16px * var(--zm)); padding: calc(14px * var(--zm)) calc(18px * var(--zm)) calc(16px * var(--zm)); text-align: center; display: grid; gap: calc(8px * var(--zm)); box-shadow: 0 calc(10px * var(--zm)) calc(30px * var(--zm)) rgba(0, 0, 0, .55); } .tab-solo.velik[hidden] { display: none; } .tab-solo .tso-g { font: 800 calc(34px * var(--zm))/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .02em; } .tab-solo .tso-g b { font-size: calc(38px * var(--zm)); } .tab-solo .tso-s { display: flex; gap: calc(16px * var(--zm)); justify-content: center; flex-wrap: wrap; font: 600 calc(18px * var(--zm))/1.2 "Barlow Condensed", system-ui, sans-serif; } .tab-solo .tso-nav { background: rgba(14, 20, 27, .88); color: #ECE5D3; border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); } .tab-solo .tso-nav small { display: block; color: #9AA7B4; font-size: calc(14px * var(--zm)); text-transform: uppercase; letter-spacing: .06em; } .tab-solo .tso-nav p { margin: 2px 0 0; font: 700 calc(26px * var(--zm))/1.2 "Barlow Condensed", system-ui, sans-serif; } body.kam-tab.v-solu .tab-zdaj, body.kam-tab.v-solu .tab-desno { opacity: .35; } .solo-nav { margin: calc(8px * var(--zm)) 0; padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--jantar, #E8B04B); background: rgba(232, 176, 75, .08); display: grid; gap: calc(8px * var(--zm)); } .solo-nav .sn-g { display: grid; gap: calc(4px * var(--zm)); } .solo-nav .sn-g small { color: var(--siva); } .solo-nav .sn-kam { display: grid; gap: calc(4px * var(--zm)); } .solo-nav .sn-k { display: flex; gap: calc(4px * var(--zm)); align-items: center; flex-wrap: wrap; padding: calc(3px * var(--zm)) calc(4px * var(--zm)); border-radius: calc(8px * var(--zm)); } .solo-nav .sn-k.naj { background: rgba(48, 199, 123, .12); } .solo-nav .sn-k .izb { min-height: calc(30px * var(--zm)); padding: 2px calc(9px * var(--zm)); font-size: calc(14px * var(--zm)); } /* ZEV-REZIJA-V67: avtorji pod partituro */ .kn-avtorji { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(180px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); margin-bottom: calc(6px * var(--zm)); } .kn-avtorji label { display: grid; gap: calc(4px * var(--zm)); color: var(--siva); font-size: calc(14px * var(--zm)); } .kn-avtorji input { background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(6px * var(--zm)) calc(8px * var(--zm)); font: inherit; } /* ── ZEV-REZIJA-V68: spored v Izvedbi, točka na tablici in pri bralcu, urejevalnik v Koncertu ── */ .sp-pas:empty { display: none; } .sp-pas { display: flex; align-items: center; gap: calc(8px * var(--zm)) calc(12px * var(--zm)); flex-wrap: wrap; padding: calc(8px * var(--zm)) calc(12px * var(--zm)); margin-bottom: calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; } .sp-tocke { display: flex; gap: calc(8px * var(--zm)); list-style: none; margin: 0; padding: 0; overflow-x: auto; flex: 1 1 calc(320px * var(--zm)); min-width: 0; scrollbar-width: thin; } .sp-tc { display: inline-flex; align-items: center; gap: calc(7px * var(--zm)); min-height: calc(38px * var(--zm)); padding: calc(4px * var(--zm)) calc(11px * var(--zm)) calc(4px * var(--zm)) calc(4px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid transparent; background: var(--plast); color: var(--siva); cursor: pointer; white-space: nowrap; font-size: calc(16px * var(--zm)); touch-action: manipulation; } .sp-tc b { display: inline-grid; place-items: center; min-width: calc(28px * var(--zm)); height: calc(28px * var(--zm)); border-radius: calc(4px * var(--zm)); background: var(--noc); color: var(--papir); font-size: calc(16px * var(--zm)); } .sp-tc.mimo { opacity: .45; } .sp-tc.zdaj { background: var(--papir); color: var(--noc); border-color: var(--papir); font-weight: 700; } .sp-tc.zdaj b { color: var(--jantar); } .sp-tc.nalozena { border-color: var(--jantar); color: var(--papir); } .sp-tc.sp-nagovor b, .sp-tc.sp-premor b, .sp-tc.sp-soba b { background: transparent; border: 1px dashed var(--temna); color: var(--siva); } .sp-tc.brez { border-style: dashed; opacity: .6; } .sp-nk { width: calc(7px * var(--zm)); height: calc(7px * var(--zm)); border-radius: 50%; background: var(--temna); display: inline-block; } .sp-naprej { flex: 0 0 auto; } .sp-cas { color: var(--jantar); font-weight: 700; } .sp-konec, .sp-pdf { color: var(--temna); font-size: calc(14px * var(--zm)); } .tab-solo.tab-tocka { background: var(--papir); } .tab-solo.tab-tocka.premor { background: var(--siva); } body.kam-tab.v-tocki .tab-zdaj, body.kam-tab.v-tocki .tab-desno { opacity: .35; } .tn-sk { color: var(--papir); font-weight: 700; margin-right: calc(10px * var(--zm)); } .bra-spored { font-size: calc(16px * var(--zm)); color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; } .bra-spored b { color: var(--papir); } .bra-spored.v-tocki { color: var(--noc); background: var(--papir); padding: calc(3px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(999px * var(--zm)); } .bra-spored.v-tocki b { color: var(--noc); } .kn-spored { margin: calc(10px * var(--zm)) 0 calc(14px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); background: var(--grafit); } .kn-spored > summary { cursor: pointer; display: flex; gap: calc(12px * var(--zm)); align-items: baseline; flex-wrap: wrap; } .kn-spored > summary small { color: var(--siva); } .sp-ured { list-style: none; margin: calc(8px * var(--zm)) 0; padding: 0; display: grid; gap: calc(8px * var(--zm)); } .sp-ured li { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)) calc(12px * var(--zm)); align-items: center; padding: calc(6px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--plast); } .sp-ured li.zdaj { box-shadow: inset calc(3px * var(--zm)) 0 0 var(--jantar); } .sp-u-sk b { min-width: calc(24px * var(--zm)); text-align: center; } .sp-u-sk small { color: var(--temna); margin-left: auto; } .sp-ured li.sp-u-t { border: 1px dashed var(--temna); background: transparent; } .sp-u-t input, .sp-u-t select { min-height: calc(38px * var(--zm)); background: var(--noc); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(4px * var(--zm)) calc(8px * var(--zm)); } .sp-u-t input[data-sp-f=ime] { flex: 1 1 calc(160px * var(--zm)); } .sp-u-t input[data-sp-f=opomba] { flex: 2 1 calc(240px * var(--zm)); } .sp-u-t .sp-min { width: 4.5em; } .sp-min-l { display: inline-flex; align-items: center; gap: calc(4px * var(--zm)); color: var(--siva); } .sp-u-g { display: inline-flex; gap: calc(4px * var(--zm)); margin-left: auto; } /* ── ZEV-REZIJA-V69: zasedba iz partiture v koraku 7 ── */ .kn-zas { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); margin: calc(6px * var(--zm)) 0; } .kn-zs { padding: calc(3px * var(--zm)) calc(9px * var(--zm)); border-radius: calc(4px * var(--zm)); border-left: calc(4px * var(--zm)) solid var(--b); background: var(--plast); font-size: calc(14px * var(--zm)); color: var(--siva); } .kn-zs b { color: var(--papir); font-weight: 600; } .kn-zs.ne { opacity: .5; } /* ── ZEV-REZIJA-V71: številčnost iz baze glasbil ── */ .kn-st-nacin { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)) calc(18px * var(--zm)); margin: calc(6px * var(--zm)) 0; } .kn-st-nacin label { display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); min-height: calc(36px * var(--zm)); } .kn-st { display: grid; gap: calc(8px * var(--zm)); margin: calc(6px * var(--zm)) 0; } .kn-st-sk { border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(4px * var(--zm)) calc(10px * var(--zm)); background: var(--plast); } .kn-st-sk > summary { cursor: pointer; display: flex; gap: calc(12px * var(--zm)); align-items: baseline; min-height: calc(34px * var(--zm)); padding-top: calc(6px * var(--zm)); } .kn-st-sk > summary small { color: var(--siva); } .kn-st-vr { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(230px * var(--zm)), 1fr)); gap: calc(4px * var(--zm)) calc(16px * var(--zm)); margin: calc(6px * var(--zm)) 0; } .kn-st-g { display: grid; grid-template-columns: 1fr auto 4em auto; align-items: center; gap: calc(4px * var(--zm)); } .kn-st-g.nic span { color: var(--temna); } .kn-st-g input { min-height: calc(36px * var(--zm)); width: 4em; text-align: center; background: var(--noc); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); } #kn-st-dodaj { min-height: calc(36px * var(--zm)); margin: calc(4px * var(--zm)) 0 calc(8px * var(--zm)); background: var(--noc); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(4px * var(--zm)) calc(8px * var(--zm)); max-width: 100%; } /* ── ZEV-REZIJA-V72: vodič za ključ Claude in analiza skladbe ── */ .an-koraki { margin: calc(8px * var(--zm)) 0; padding-left: calc(26px * var(--zm)); display: grid; gap: calc(12px * var(--zm)); } .an-koraki li b { display: block; color: var(--papir); } .an-koraki li p { margin: 2px 0 0; color: var(--siva); font-size: calc(16px * var(--zm)); line-height: 1.4; max-width: 72ch; } .an-koraki a { color: var(--jantar); } .an-koraki code { font-size: calc(14px * var(--zm)); color: var(--papir); } .an-vrsta { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); margin: calc(6px * var(--zm)) 0 2px; } .an-vrsta input { flex: 1 1 calc(260px * var(--zm)); min-height: calc(40px * var(--zm)); background: var(--noc); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(4px * var(--zm)) calc(10px * var(--zm)); } .kn-an-api { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)) calc(12px * var(--zm)); margin: calc(6px * var(--zm)) 0; } .kn-an-api small { color: var(--siva); } .kn-an-api .an-dnevnik { flex: 1 1 100%; max-height: 10em; overflow: auto; margin: calc(4px * var(--zm)) 0 0; padding: calc(6px * var(--zm)) calc(8px * var(--zm)); background: var(--noc); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); white-space: pre-wrap; } /* ─── ZEV-REZIJA-V73: Kreativa ─────────────────────────────────────── */ .kr { display: flex; flex-direction: column; gap: calc(12px * var(--zm)); position: relative; } .kr-glava { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12px * var(--zm)) calc(16px * var(--zm)); } .kr-slogi, .kr-hitrost, .kr-zoom, .kr-mesto { display: inline-flex; } .kr-slogi .izb, .kr-hitrost .izb, .kr-zoom .izb, .kr-mesto .izb { border-radius: 0; margin: 0; } .kr-slogi .izb:first-child, .kr-hitrost .izb:first-child, .kr-zoom .izb:first-child, .kr-mesto .izb:first-child { border-radius: calc(8px * var(--zm)) 0 0 calc(8px * var(--zm)); } .kr-slogi .izb:last-child, .kr-hitrost .izb:last-child, .kr-zoom .izb:last-child, .kr-mesto .izb:last-child { border-radius: 0 calc(8px * var(--zm)) calc(8px * var(--zm)) 0; } .kr-transport { display: flex; align-items: center; gap: calc(8px * var(--zm)); flex-wrap: wrap; } .kr-igraj { background: #C9363B; border-color: #E5484D; color: #fff; } .kr-ustavi { background: var(--plast2); border-color: var(--pgm); } .kr-poz { font-size: calc(16px * var(--zm)); color: var(--siva); white-space: nowrap; } .kr-poz b { color: var(--papir); font-size: calc(18px * var(--zm)); } .kr-pomoc-gumb { margin-left: auto; border-color: var(--jantar); color: #F3C872; } .kr-telo { display: grid; grid-template-columns: minmax(0, 1fr) calc(400px * var(--zm)); gap: calc(12px * var(--zm)); align-items: start; } @media (max-width: 1100px) { .kr-telo { grid-template-columns: minmax(0, 1fr); } } .kr-levo { display: flex; flex-direction: column; gap: calc(12px * var(--zm)); min-width: 0; } .kr-glavno { display: flex; gap: calc(12px * var(--zm)); align-items: stretch; min-width: 0; } .kr-glavno[hidden] { display: none; } @media (max-width: 900px) { .kr-glavno { flex-direction: column; } } .kr-desno { display: flex; flex-direction: column; gap: calc(12px * var(--zm)); min-width: 0; max-height: calc(100vh - calc(150px * var(--zm))); overflow-y: auto; } .kr-plosca { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)) calc(10px * var(--zm)); min-width: 0; box-sizing: border-box; } .kr-plosca.v-glavnem { max-height: calc(470px * var(--zm)); overflow: auto; } .kr-pl-glava { display: flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--siva); margin-bottom: calc(6px * var(--zm)); } .kr-pl-glava .tiho { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--temna); } .kr-x { margin-left: auto; min-width: calc(32px * var(--zm)); min-height: calc(32px * var(--zm)); border: 0; background: transparent; color: var(--siva); font-size: calc(22px * var(--zm)); line-height: 1; cursor: pointer; border-radius: calc(8px * var(--zm)); } .kr-x:hover { background: var(--plast2); color: var(--papir); } .kr h4 { margin: calc(10px * var(--zm)) 0 calc(5px * var(--zm)); font-size: calc(14px * var(--zm)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--siva); } .kr .namig { font-size: calc(14px * var(--zm)); color: var(--siva); margin: calc(6px * var(--zm)) 0 0; } .kr .prazno { color: var(--siva); margin: calc(6px * var(--zm)) 0; } .kr-vrsta { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); margin-top: calc(8px * var(--zm)); } .kr-polje { display: flex; flex-direction: column; gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); margin-top: calc(8px * var(--zm)); } .kr-polje input, .kr-polje select, .kr-op-vnos input { min-height: calc(38px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(16px * var(--zm)); padding: 0 calc(10px * var(--zm)); } .kr-cipi { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .kr-cipi .izb { margin: 0; } .kr-brisi { color: #F2A5A8; border-color: #5A2A2D; } /* časovnica */ .kr-cas { background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)) calc(10px * var(--zm)); } .kr-cas-glava { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)) calc(12px * var(--zm)); margin-bottom: calc(6px * var(--zm)); } .kr-cas-glava > b { font-size: calc(14px * var(--zm)); letter-spacing: .08em; text-transform: uppercase; color: var(--siva); } .kr-stevec { margin-left: auto; font-size: calc(14px * var(--zm)); color: var(--siva); } .kr-sledi { position: relative; display: flex; flex-direction: column; gap: calc(4px * var(--zm)); outline: none; border-radius: calc(8px * var(--zm)); } .kr-sledi:focus-visible { box-shadow: 0 0 0 2px var(--jantar); } .kr-vrsta-s { display: grid; grid-template-columns: calc(96px * var(--zm)) minmax(0, 1fr); } .kr-oz { font-size: calc(14px * var(--zm)); color: var(--siva); align-self: center; padding-right: calc(6px * var(--zm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kr-s-kadri .kr-oz, .kr-s-analiza .kr-oz { color: var(--papir); font-weight: 600; } .kr-pas { position: relative; height: calc(20px * var(--zm)); min-width: 0; overflow: hidden; } .kr-s-fokus .kr-pas { height: calc(14px * var(--zm)); } .kr-s-dinamika .kr-pas { height: calc(26px * var(--zm)); } .kr-s-analiza .kr-pas { height: calc(34px * var(--zm)); } .kr-s-analiza.tanka .kr-pas { height: calc(10px * var(--zm)); } .kr-s-kadri .kr-pas { height: calc(64px * var(--zm)); } .kr[data-slog="mini"] .kr-s-kadri .kr-pas, .kr[data-slog="diskretno"] .kr-s-kadri .kr-pas { height: calc(150px * var(--zm)); } .kr-s-predlogi .kr-pas { height: calc(28px * var(--zm)); } .kr-s-prestavljanje .kr-pas { height: auto; } .kr-s-luc .kr-pas { height: calc(18px * var(--zm)); } .kr-s-opombe .kr-pas { height: calc(22px * var(--zm)); } .kr-s-celota .kr-pas { height: calc(22px * var(--zm)); } .kr-ods, .kr-fok, .kr-an, .kr-kd, .kr-duh, .kr-meja { position: absolute; top: 0; bottom: 0; box-sizing: border-box; } .kr-ods { border-left: 2px solid var(--temna); padding-left: calc(5px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--papir); white-space: nowrap; overflow: hidden; line-height: calc(20px * var(--zm)); } .kr-meja { width: 0; border-left: 2px solid var(--papir); opacity: .5; } .kr-fok { border-top: 2px solid var(--b); background: color-mix(in srgb, var(--b) 18%, transparent); font-size: calc(10px * var(--zm)); line-height: calc(12px * var(--zm)); padding-left: calc(3px * var(--zm)); white-space: nowrap; overflow: hidden; color: var(--papir); } .kr-s-dinamika svg { width: 100%; height: calc(26px * var(--zm)); display: block; } .kr-ravnilo { position: absolute; inset: 0; cursor: pointer; border-bottom: 1px solid var(--crta); } .kr-t { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--crta); padding-left: 2px; font-size: calc(10px * var(--zm)); color: var(--siva); pointer-events: none; } .kr-an { top: 2px; bottom: 2px; border: 1.5px solid var(--b); border-radius: calc(4px * var(--zm)); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(14px * var(--zm)); font-weight: 600; padding: 0 calc(4px * var(--zm)); display: flex; align-items: center; gap: calc(4px * var(--zm)); overflow: hidden; white-space: nowrap; cursor: pointer; } .kr-an i { font-style: normal; font-size: calc(14px * var(--zm)); } .kr-an.st-odprt { border-style: dashed; } .kr-an.st-odprt i { color: var(--siva); } .kr-an.st-sprejet { background: #10241A; } .kr-an.st-sprejet i { color: var(--pvw); } .kr-an.st-drugace { background: #2A2210; } .kr-an.st-drugace i { color: var(--jantar); } .kr-an.st-pregl { opacity: .45; } .kr-an.zdaj { box-shadow: 0 0 0 2px var(--noc), 0 0 0 calc(3.5px * var(--zm)) var(--jantar); z-index: 2; } .kr-s-analiza.tanka .kr-an { top: 1px; bottom: 1px; border-width: 1px; padding: 0; background: transparent; opacity: .45; } .kr-s-analiza.tanka .kr-an.st-odprt { opacity: .9; } .kr-kadri-pas { position: absolute; inset: 0; background: #0C131A; border-radius: calc(4px * var(--zm)); cursor: pointer; } .kr-kd { top: calc(4px * var(--zm)); bottom: calc(4px * var(--zm)); background: var(--b); color: var(--noc); border: 0; border-right: 2px solid #0C131A; border-radius: calc(4px * var(--zm)); padding: calc(3px * var(--zm)) calc(5px * var(--zm)); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; overflow: hidden; text-align: left; font: inherit; font-size: calc(14px * var(--zm)); font-weight: 600; cursor: pointer; } .kr-kd b { font-size: calc(16px * var(--zm)); } .kr-kd span { white-space: nowrap; } .kr-kd.izbran { box-shadow: 0 0 0 2px var(--noc), 0 0 0 calc(4px * var(--zm)) var(--jantar); z-index: 2; } .kr-kd.zivo { box-shadow: 0 0 0 2px var(--noc), 0 0 0 calc(4px * var(--zm)) var(--pgm); z-index: 2; } .kr-pika { position: absolute; right: calc(3px * var(--zm)); top: calc(3px * var(--zm)); width: calc(15px * var(--zm)); height: calc(15px * var(--zm)); border-radius: 50%; background: var(--noc); color: var(--jantar); font-style: normal; font-size: calc(14px * var(--zm)); line-height: calc(15px * var(--zm)); text-align: center; } .kr-crka-k { position: absolute; right: calc(3px * var(--zm)); bottom: calc(3px * var(--zm)); min-width: calc(15px * var(--zm)); height: calc(15px * var(--zm)); border-radius: calc(4px * var(--zm)); background: var(--noc); color: var(--papir); font-style: normal; font-size: calc(10px * var(--zm)); line-height: calc(15px * var(--zm)); text-align: center; } .kr-prazno { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4px * var(--zm)); text-align: center; color: var(--siva); font-size: calc(14px * var(--zm)); padding: 0 calc(20px * var(--zm)); pointer-events: none; } .kr-prazno b { color: var(--papir); font-size: calc(16px * var(--zm)); } .kr-dchip { position: absolute; top: calc(8px * var(--zm)); display: flex; gap: calc(4px * var(--zm)); z-index: 3; } .kr-dchip button { min-height: calc(32px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px dashed var(--b); background: var(--noc); color: #C9D1DA; font: inherit; font-size: calc(14px * var(--zm)); padding: 0 calc(8px * var(--zm)); cursor: pointer; white-space: nowrap; } .kr-duh { top: 1px; bottom: 1px; border: 1.5px dashed var(--b); border-radius: calc(4px * var(--zm)); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(14px * var(--zm)); font-weight: 600; padding: 0 calc(5px * var(--zm)); text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; } .kr-lane { position: relative; height: calc(12px * var(--zm)); border-bottom: 1px solid #16202A; } .kr-lane i { position: absolute; font-style: normal; } .kr-lane .zi { top: 2px; height: calc(8px * var(--zm)); background: var(--b); border-radius: 2px; } .kr-lane .ti { top: calc(5px * var(--zm)); height: 2px; background: var(--b); opacity: .4; } .kr-lane .pr { top: 2px; height: calc(8px * var(--zm)); background-image: repeating-linear-gradient(135deg, var(--b) 0 2px, transparent 2px calc(6px * var(--zm))); opacity: .7; } .kr-lane .pr.malo { background-image: repeating-linear-gradient(135deg, var(--jantar) 0 2px, transparent 2px calc(6px * var(--zm))); opacity: 1; } .kr-lz { position: absolute; top: 1px; height: calc(16px * var(--zm)); border: 0; border-left: 2px solid #E8C77A; background: #2A2412; color: #F3DFA6; font: inherit; font-size: calc(14px * var(--zm)); padding: 0 calc(5px * var(--zm)); cursor: pointer; } .kr-op { position: absolute; top: 1px; display: flex; } .kr-op button:first-child { height: calc(20px * var(--zm)); border: 0; border-left: 2px solid #F28FAD; background: #2A1A22; color: #F7C6D4; font: inherit; font-size: calc(14px * var(--zm)); padding: 0 calc(6px * var(--zm)); white-space: nowrap; cursor: pointer; } .kr-op .kr-x { min-width: calc(20px * var(--zm)); min-height: calc(20px * var(--zm)); font-size: calc(14px * var(--zm)); margin: 0; } .kr-celota { position: absolute; inset: 0; background: #0C131A; border-radius: calc(4px * var(--zm)); cursor: pointer; overflow: hidden; } .kr-cel-st { position: absolute; top: 0; bottom: 0; border: 0; border-left: 1px solid var(--crta); background: transparent; color: var(--siva); font: inherit; font-size: calc(10px * var(--zm)); text-align: left; padding: 1px calc(3px * var(--zm)); cursor: pointer; } .kr-cel-k { position: absolute; bottom: 0; width: 2px; height: calc(8px * var(--zm)); background: var(--b); pointer-events: none; } .kr-cel-okno { position: absolute; top: 0; bottom: 0; border: 1.5px solid var(--jantar); border-radius: calc(4px * var(--zm)); box-sizing: border-box; pointer-events: none; } .kr-cel-kaz { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pgm); pointer-events: none; } .kr-igla { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pgm); left: calc(calc(96px * var(--zm)) + (100% - calc(96px * var(--zm))) * var(--x) / 100); pointer-events: none; z-index: 4; } /* dodajanje */ .kr-dodaj { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); background: var(--grafit); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); } .kr-dodaj-oz { font-size: calc(14px * var(--zm)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--siva); } .kr-dodaj-kam { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); flex: 1 1 calc(360px * var(--zm)); } .kr-rez { display: flex; align-items: center; gap: calc(7px * var(--zm)); min-height: calc(44px * var(--zm)); border: 2px solid var(--b); background: var(--noc); color: var(--papir); border-radius: calc(8px * var(--zm)); padding: 0 calc(10px * var(--zm)) 0 calc(6px * var(--zm)); font: inherit; font-size: calc(14px * var(--zm)); cursor: pointer; } .kr-rez b { background: var(--b); color: var(--noc); min-width: calc(26px * var(--zm)); height: calc(26px * var(--zm)); border-radius: calc(4px * var(--zm)); display: flex; align-items: center; justify-content: center; font-size: calc(16px * var(--zm)); } .kr-rec.vkl { background: #C9363B; border-color: #E5484D; color: #fff; } .kr-op-vnos { display: flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); } .kr-op-vnos input { width: calc(150px * var(--zm)); } /* predlog ob kazalcu */ .kr-sepet { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)) calc(12px * var(--zm)); border: 1px solid #3A3322; background: #16140F; border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); } .kr-sepet-oz { font-size: calc(14px * var(--zm)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #D4AE5E; } .kr-sepet-t { flex: 1 1 calc(200px * var(--zm)); font-size: calc(16px * var(--zm)); } .kr-sepet-k { display: flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); } /* plošče */ .kr-tloris { width: 100%; height: auto; display: block; border-radius: calc(8px * var(--zm)); } .kr-cona { cursor: pointer; } .kr-cona circle { fill: #1C2733; stroke: #3A4A5B; stroke-width: 2; } .kr-cona text { fill: var(--siva); font-size: calc(22px * var(--zm)); font-family: var(--sans); } .kr-cona.izbrana circle { stroke: var(--jantar); stroke-width: 5; } .kr-kam { cursor: pointer; } .kr-kam text { font-size: calc(22px * var(--zm)); font-weight: 800; font-family: var(--sans); } .kr-kam.zivo circle { stroke-width: 9; filter: drop-shadow(0 0 calc(6px * var(--zm)) var(--pgm)); } .kr-crka { font-size: calc(28px * var(--zm)); font-weight: 800; font-family: var(--sans); } .kr-predogled { display: flex; flex-direction: column; gap: calc(12px * var(--zm)); } .kr-predogled.siroko { flex-direction: row; } .kr-pgm { display: flex; gap: calc(12px * var(--zm)); align-items: flex-start; border: 2px solid var(--pgm); border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)); min-width: calc(240px * var(--zm)); } .kr-pgm-opis { display: flex; flex-direction: column; gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); min-width: 0; } .kr-znak-pgm { align-self: flex-start; background: #C9363B; color: #fff; font-weight: 700; font-size: calc(14px * var(--zm)); padding: 2px calc(7px * var(--zm)); border-radius: calc(4px * var(--zm)); letter-spacing: .06em; } .kr-trak { height: calc(5px * var(--zm)); background: var(--crta); border-radius: calc(4px * var(--zm)); overflow: hidden; } .kr-trak i { display: block; height: 100%; background: var(--pgm); } .kr-nasl { color: var(--pvw); } .kr-ploscice { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); flex: 1; } .kr-pl { display: flex; gap: calc(8px * var(--zm)); align-items: flex-start; border: 2px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(5px * var(--zm)); font-size: calc(14px * var(--zm)); } .kr-pl small { display: block; color: var(--siva); font-size: calc(14px * var(--zm)); } .kr-pl.zivo { border-color: var(--pgm); } .kr-pl.nasl { border-color: var(--pvw); } .kr-tab-izbor { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)); margin-bottom: calc(8px * var(--zm)); } .kr-tab-izbor .kam-st { cursor: pointer; border: 2px solid transparent; } .kr-tab-izbor .kam-st.izbrana { border-color: var(--papir); } .kr-tab { border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); overflow: hidden; background: var(--noc); } .kr-tab-glava { display: flex; align-items: center; gap: calc(8px * var(--zm)); padding: calc(7px * var(--zm)) calc(10px * var(--zm)); background: var(--plast2); font-weight: 600; } .kr-tab-glava b { margin-left: auto; letter-spacing: .06em; font-size: calc(14px * var(--zm)); } .kr-tab.zivo .kr-tab-glava { background: #C9363B; } .kr-tab.nasl .kr-tab-glava { background: #1F7A4D; } .kr-tab-cifra { display: flex; align-items: baseline; gap: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)) calc(4px * var(--zm)); } .kr-tab-cifra b { font-size: calc(46px * var(--zm)); line-height: 1; } .kr-tab-cifra span { color: var(--siva); font-size: calc(14px * var(--zm)); } .kr-tab-kd { display: flex; gap: calc(12px * var(--zm)); padding: calc(4px * var(--zm)) calc(10px * var(--zm)) calc(10px * var(--zm)); align-items: center; } .kr-tab-kd div { display: flex; flex-direction: column; gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); } .kr-tab-kd i { color: #E8C77A; } .kr-tab-pri { list-style: none; padding: 0; margin: calc(8px * var(--zm)) 0 0; display: flex; flex-direction: column; gap: calc(4px * var(--zm)); } .kr-tab-pri li { display: grid; grid-template-columns: calc(32px * var(--zm)) 1fr auto; gap: calc(8px * var(--zm)); align-items: center; min-height: calc(30px * var(--zm)); padding: 0 calc(8px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--noc); font-size: calc(14px * var(--zm)); } .kr-tab-pri small { color: var(--siva); } .kr-seznam { display: flex; flex-direction: column; gap: calc(4px * var(--zm)); } .kr-vr { display: grid; grid-template-columns: calc(30px * var(--zm)) calc(34px * var(--zm)) minmax(0, 1fr) calc(54px * var(--zm)) calc(84px * var(--zm)); gap: calc(8px * var(--zm)); align-items: center; min-height: calc(38px * var(--zm)); padding: 2px calc(8px * var(--zm)); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); background: transparent; color: var(--papir); font: inherit; font-size: calc(14px * var(--zm)); text-align: left; cursor: pointer; } .kr-vr small { color: var(--siva); font-size: calc(14px * var(--zm)); } .kr-vr span small { display: block; } .kr-vr.zivo { border-color: var(--pgm); background: #2A1416; } .kr-vr.nasl { border-color: var(--pvw); } .kr-vr.izbran { background: var(--plast2); } .kr-vr.minil { opacity: .5; } .kr-last-glava { display: flex; gap: calc(12px * var(--zm)); align-items: flex-start; } .kr-last-glava div { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4px * var(--zm)); } .kr-last-glava small { color: var(--siva); font-size: calc(14px * var(--zm)); } .kr-st { font-size: calc(36px * var(--zm)); line-height: 1; } .kr-info { font-size: calc(12.5px * var(--zm)); color: var(--siva); border-top: 1px solid var(--crta); border-bottom: 1px solid var(--crta); padding: calc(5px * var(--zm)) 0; margin: calc(8px * var(--zm)) 0; } .kr-last-sl { display: flex; gap: calc(12px * var(--zm)); align-items: center; font-size: calc(16px * var(--zm)); font-weight: 600; } .kr-zakaj { font-size: calc(14px * var(--zm)); background: var(--noc); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); margin: calc(8px * var(--zm)) 0; } .kr-zakaj b { color: var(--siva); font-size: calc(14px * var(--zm)); text-transform: uppercase; letter-spacing: .08em; margin-right: calc(6px * var(--zm)); } .kr-opoz { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)) calc(8px * var(--zm)); align-items: flex-start; border: 1px solid #6B5320; background: #1D1709; border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); margin: calc(6px * var(--zm)) 0; font-size: calc(13.5px * var(--zm)); } .kr-opoz b { background: var(--jantar); color: var(--noc); border-radius: calc(4px * var(--zm)); padding: 1px calc(6px * var(--zm)); font-size: calc(14px * var(--zm)); } .kr-opoz span { flex: 1 1 calc(200px * var(--zm)); } .kr-plani { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(4px * var(--zm)); } .kr-plani .izb { margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--zm)); padding: calc(4px * var(--zm)) 2px; } .kr-plani small { font-size: calc(14px * var(--zm)); } .kr-kam-vr { border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); margin-bottom: calc(5px * var(--zm)); background: var(--noc); } .kr-kam-vr.odprta { border-color: var(--jantar); } .kr-kam-gl { width: 100%; display: flex; align-items: center; gap: calc(12px * var(--zm)); min-height: calc(44px * var(--zm)); padding: calc(4px * var(--zm)) calc(10px * var(--zm)); border: 0; background: transparent; color: var(--papir); font: inherit; text-align: left; cursor: pointer; } .kr-kam-gl span:nth-child(2) { flex: 1; display: flex; flex-direction: column; } .kr-kam-gl small { color: var(--siva); font-size: calc(14px * var(--zm)); } .kr-kam-ur { padding: 0 calc(10px * var(--zm)) calc(10px * var(--zm)); border-top: 1px solid var(--crta); } .kr-tipi { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .kr-akcije { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(160px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .kr-akc { display: flex; gap: calc(8px * var(--zm)); align-items: center; padding: calc(5px * var(--zm)) calc(7px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--noc); border: 1px solid #1E2A36; } .kr-akc span { flex: 1; display: flex; flex-direction: column; font-size: calc(14px * var(--zm)); min-width: 0; } .kr-akc small { color: var(--siva); font-size: calc(11.5px * var(--zm)); } .kr-luc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(4px * var(--zm)); } .kr-luc button { width: 100%; display: grid; grid-template-columns: calc(50px * var(--zm)) calc(70px * var(--zm)) 1fr; gap: calc(8px * var(--zm)); align-items: center; min-height: calc(34px * var(--zm)); padding: 0 calc(8px * var(--zm)); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(14px * var(--zm)); text-align: left; cursor: pointer; } .kr-luc li.zdaj button { border-color: var(--jantar); } .kr-luc small { color: var(--siva); } .kr-prim { display: flex; flex-direction: column; gap: calc(8px * var(--zm)); } .kr-prim-gl { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(8px * var(--zm)); } .kr-prim-gl span { color: var(--siva); font-size: calc(14px * var(--zm)); } .kr-prim-gl em { margin-left: auto; font-style: normal; font-weight: 600; font-size: calc(14px * var(--zm)); } .st-sprejet { color: var(--pvw); font-style: normal; font-weight: 600; } .st-drugace { color: var(--jantar); } .st-odprt, .st-pregl { color: var(--siva); } .kr-mozn { display: grid; grid-template-columns: calc(22px * var(--zm)) calc(48px * var(--zm)) minmax(0, 1fr); gap: calc(12px * var(--zm)); align-items: center; padding: calc(7px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1.5px solid var(--crta); background: var(--noc); } .kr-mozn.moj { border-color: var(--pvw); } .kr-mozn.izbrana { border-color: var(--jantar); } .kr-mozn .kr-crka { font-size: calc(22px * var(--zm)); text-align: center; } .kr-mozn-t { display: flex; flex-direction: column; gap: calc(4px * var(--zm)); min-width: 0; font-size: calc(14px * var(--zm)); } .kr-mozn-t small { color: #C9D1DA; font-size: calc(12.5px * var(--zm)); } .kr-mozn-t .gumb { align-self: flex-start; } .kr-prim-moj { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)) calc(12px * var(--zm)); padding: calc(7px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--plast); } .kr-prim-moj span { flex: 1 1 calc(160px * var(--zm)); display: flex; flex-direction: column; font-size: calc(14px * var(--zm)); } .kr-prim-moj small { color: var(--siva); } /* predal */ .kr-predal { position: fixed; top: 0; right: 0; bottom: 0; width: min(calc(580px * var(--zm)), 100vw); background: #0F161E; border-left: 1px solid var(--crta); box-shadow: calc(-24px * var(--zm)) 0 calc(48px * var(--zm)) rgba(0, 0, 0, .45); z-index: 60; display: flex; flex-direction: column; } .kr-predal[hidden] { display: none; } .kr-predal-gl { display: flex; align-items: center; gap: calc(12px * var(--zm)); padding: calc(12px * var(--zm)) calc(16px * var(--zm)); border-bottom: 1px solid var(--crta); font-size: calc(18px * var(--zm)); } .kr-predal-telo { overflow-y: auto; padding: calc(8px * var(--zm)) calc(16px * var(--zm)) calc(28px * var(--zm)); } .kr-slogi-k { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8px * var(--zm)); } .kr-slogi-k button { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4px * var(--zm)); padding: calc(9px * var(--zm)) calc(11px * var(--zm)); border: 1.5px solid var(--crta); border-radius: calc(8px * var(--zm)); background: var(--grafit); color: var(--papir); font: inherit; text-align: left; cursor: pointer; } .kr-slogi-k button.izbran { border-color: var(--jantar); } .kr-slogi-k small { color: var(--siva); font-size: calc(12.5px * var(--zm)); line-height: 1.35; } .kr-cfg { display: flex; align-items: center; gap: calc(12px * var(--zm)); min-height: calc(46px * var(--zm)); padding: calc(4px * var(--zm)) calc(8px * var(--zm)); margin-bottom: calc(4px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); } .kr-cfg > span:not(.kr-mesto):not(.kr-sw) { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: calc(14px * var(--zm)); } .kr-cfg small { color: var(--siva); font-size: calc(14px * var(--zm)); } .kr-sw { position: relative; flex-shrink: 0; width: calc(42px * var(--zm)); height: calc(26px * var(--zm)); border-radius: calc(13px * var(--zm)); border: 0; padding: 0; background: var(--crta); cursor: pointer; display: inline-block; } .kr-sw i { position: absolute; top: calc(3px * var(--zm)); left: calc(3px * var(--zm)); width: calc(20px * var(--zm)); height: calc(20px * var(--zm)); border-radius: 50%; background: var(--noc); transition: left .15s; } .kr-sw.vkl { background: var(--jantar); } .kr-sw.vkl i { left: calc(19px * var(--zm)); } .kr-sw.stalno { opacity: .5; cursor: default; } .kr-pu { min-width: calc(34px * var(--zm)); min-height: calc(34px * var(--zm)); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); background: transparent; color: #C9D1DA; cursor: pointer; } /* ─── ZEV-REZIJA-V74: glavni zavihki, glava na telefonu ─── */ .nacini { flex-wrap: wrap; } .zavihki.en-sam { min-height: 0; padding-top: 0; padding-bottom: 0; } .zavihki.en-sam .shranjeno { padding: calc(4px * var(--zm)) calc(6px * var(--zm)); } @media (max-width: 600px) { .rez-glava { gap: calc(8px * var(--zm)); padding: calc(6px * var(--zm)) calc(10px * var(--zm)); } .polozaj { gap: calc(8px * var(--zm)); overflow: hidden; } .polozaj .vadbena { display: none; } .p-stavek { font-size: calc(22px * var(--zm)); } .p-takt { font-size: calc(28px * var(--zm)); min-width: 0; } .nacini { gap: calc(8px * var(--zm)); padding: calc(6px * var(--zm)) calc(10px * var(--zm)) 0; } .nacini button { padding: calc(6px * var(--zm)) calc(12px * var(--zm)); font-size: calc(16px * var(--zm)); } } /* Kreativa na ozkem zaslonu: plošče v stolpcu obdržijo višino, slogi se prelomijo, stolpec oznak je ožji */ .kr { --kr-oz: calc(96px * var(--zm)); } .kr-vrsta-s { grid-template-columns: var(--kr-oz) minmax(0, 1fr); } .kr-igla { left: calc(var(--kr-oz) + (100% - var(--kr-oz)) * var(--x) / 100); } .kr-prazno { overflow: hidden; } @media (max-width: 900px) { .kr-glavno > .kr-plosca { flex: none !important; } .kr-plosca.v-glavnem { max-height: 70vh; } } @media (max-width: 600px) { .kr { --kr-oz: calc(62px * var(--zm)); } .kr-slogi { flex-wrap: wrap; } .kr-slogi .izb { border-radius: calc(8px * var(--zm)) !important; margin: 0 calc(4px * var(--zm)) calc(4px * var(--zm)) 0; } .kr-pomoc-gumb { margin-left: 0; } .kr-oz { font-size: calc(14px * var(--zm)); } .kr-prazno span { display: none; } .kr-predal { width: 100vw; } } /* ─── ZEV-REZIJA-V75: trak na časovnici, urejevalnik traku, vodič, tipke ─── */ .kr-cas-glava .kr-transport { gap: calc(8px * var(--zm)); } .kr-play { min-height: calc(44px * var(--zm)); font-size: calc(18px * var(--zm)); padding: 0 calc(18px * var(--zm)); } .kr-hit-v { font-weight: 700; color: var(--jantar); } .kr-kd { touch-action: pan-y; cursor: grab; } .kr-kd:active { cursor: grabbing; } .kr-rob { position: absolute; top: 0; bottom: 0; width: calc(9px * var(--zm)); cursor: ew-resize; z-index: 1; } .kr-rob.l { left: 0; border-radius: calc(4px * var(--zm)) 0 0 calc(4px * var(--zm)); } .kr-rob.d { right: 0; border-radius: 0 calc(4px * var(--zm)) calc(4px * var(--zm)) 0; } .kr-kd:hover .kr-rob, .kr-kd.izbran .kr-rob { background: rgba(14, 20, 27, .32); } .kr-kd.izbran:not(.glavni) { box-shadow: 0 0 0 2px var(--noc), 0 0 0 calc(4px * var(--zm)) #B7892F; z-index: 2; } @media (pointer: coarse) { .kr-rob { width: calc(16px * var(--zm)); } } .kr-vnamig { position: absolute; top: 0; left: calc(var(--kr-oz, calc(96px * var(--zm))) + (100% - var(--kr-oz, calc(96px * var(--zm)))) * var(--x) / 100); transform: translateY(-100%); background: var(--jantar); color: var(--noc); font-weight: 700; font-size: calc(14px * var(--zm)); padding: calc(3px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(4px * var(--zm)); white-space: nowrap; pointer-events: none; z-index: 6; } .kr-trak-ur { margin-top: calc(8px * var(--zm)); border-top: 1px solid var(--crta); padding-top: calc(8px * var(--zm)); display: flex; flex-direction: column; gap: calc(8px * var(--zm)); } .kr-tu-gl { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)) calc(12px * var(--zm)); } .kr-tu-gl b { font-size: calc(16px * var(--zm)); } .kr-tu-gl b small { color: var(--siva); font-weight: 500; font-size: calc(14px * var(--zm)); } .kr-tu-gumbi { margin-left: auto; display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .kr-tu-vr { display: grid; grid-template-columns: calc(84px * var(--zm)) minmax(0, 1fr); align-items: center; gap: calc(8px * var(--zm)); } .kr-tu-oz { font-size: calc(14px * var(--zm)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--siva); } .kr-tu-cipi { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)); align-items: center; } .kr-tu-kam { min-width: calc(40px * var(--zm)); min-height: calc(40px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 2px solid var(--b); background: var(--noc); color: var(--b); font: inherit; font-weight: 800; font-size: calc(16px * var(--zm)); cursor: pointer; } .kr-tu-kam.izbran { background: var(--b); color: var(--noc); } .kr-tu-c { min-height: calc(38px * var(--zm)); padding: 0 calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(14px * var(--zm)); cursor: pointer; } .kr-tu-c.izbran { background: var(--papir); color: var(--noc); border-color: var(--papir); font-weight: 700; } .kr-tu-vr select, .kr-tu-vr input { min-height: calc(38px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(14px * var(--zm)); padding: 0 calc(8px * var(--zm)); } .kr-tu-vr input { flex: 1 1 calc(180px * var(--zm)); } @media (max-width: 600px) { .kr-tu-vr { grid-template-columns: 1fr; } .kr-tu-gumbi { margin-left: 0; } } .kr-vodic { position: fixed; inset: 0; z-index: 80; } .kr-vodic[hidden] { display: none; } .kr-v-ozadje { position: fixed; inset: 0; background: rgba(5, 7, 9, .62); } .kr-v-okvir { position: fixed; border: 2px solid var(--jantar); border-radius: calc(8px * var(--zm)); box-shadow: 0 0 0 calc(9999px * var(--zm)) rgba(5, 7, 9, .62); pointer-events: none; } .kr-v-obl { position: fixed; width: min(calc(340px * var(--zm)), calc(100vw - calc(20px * var(--zm)))); background: #16140F; border: 1px solid var(--jantar); border-radius: calc(8px * var(--zm)); padding: calc(12px * var(--zm)) calc(14px * var(--zm)); box-shadow: 0 calc(12px * var(--zm)) calc(32px * var(--zm)) rgba(0, 0, 0, .5); } .kr-v-obl small { color: var(--siva); } .kr-v-obl b { display: block; font-size: calc(18px * var(--zm)); margin: 2px 0 calc(4px * var(--zm)); } .kr-v-obl p { margin: 0; font-size: calc(16px * var(--zm)); line-height: 1.45; } .kr-tipke { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(calc(640px * var(--zm)), calc(100vw - calc(20px * var(--zm)))); max-height: calc(100vh - calc(40px * var(--zm))); overflow-y: auto; background: #0F161E; border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: 0 calc(16px * var(--zm)) calc(16px * var(--zm)); box-sizing: border-box; } .kr-tipke dl { display: grid; grid-template-columns: minmax(calc(160px * var(--zm)), auto) 1fr; gap: calc(8px * var(--zm)) calc(16px * var(--zm)); margin: 0; align-items: center; } .kr-tipke dt { white-space: nowrap; } .kr-tipke dd { margin: 0; color: #C9D1DA; font-size: calc(16px * var(--zm)); } .kr-tipke kbd { display: inline-block; min-width: calc(22px * var(--zm)); padding: 1px calc(6px * var(--zm)); border: 1px solid transparent; border-bottom-width: 2px; border-radius: calc(4px * var(--zm)); background: var(--grafit); font: inherit; font-size: calc(14px * var(--zm)); text-align: center; } .kr-tipke i { color: var(--siva); font-style: normal; } @media (max-width: 600px) { .kr-tipke dl { grid-template-columns: 1fr; } .kr-tipke dd { margin-bottom: calc(6px * var(--zm)); } } .kr-vabi { border-color: var(--jantar); color: #F3C872; box-shadow: 0 0 0 calc(3px * var(--zm)) rgba(232, 176, 75, .2); } .kr-oder-upo { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)) calc(8px * var(--zm)); margin-bottom: calc(6px * var(--zm)); font-size: calc(14px * var(--zm)); } .kr-oder-upo:empty { display: none; } .kr-zvok .izb { font-size: calc(14px * var(--zm)); } /* ─── ZEV-REZIJA-V76: hitri sprejem, slogi kadrirke ─── */ .kr-an-ok { position: absolute; top: calc(3px * var(--zm)); bottom: calc(3px * var(--zm)); width: calc(30px * var(--zm)); border: 0; border-radius: calc(4px * var(--zm)); background: var(--jantar); color: var(--noc); font: inherit; font-size: calc(14px * var(--zm)); font-weight: 800; cursor: pointer; z-index: 3; padding: 0; } .kr-mozn-t .gumb kbd, .kr-prim .gumb kbd { display: inline-block; min-width: calc(16px * var(--zm)); margin-left: calc(4px * var(--zm)); padding: 0 calc(4px * var(--zm)); border-radius: calc(4px * var(--zm)); border: 1px solid currentColor; font: inherit; font-size: calc(14px * var(--zm)); line-height: calc(16px * var(--zm)); opacity: .8; } .kr-kk { display: flex; flex-direction: column; gap: calc(8px * var(--zm)); } .kr-kk-slogi { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)); } .kr-kk-slogi .izb { margin: 0; } .kr-kk-gumbi { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .kr-kk-filter { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)); margin-bottom: calc(4px * var(--zm)); } .kr-kk-filter .izb { margin: 0; min-width: calc(36px * var(--zm)); } .kr-kk-telo { min-width: 0; } .kr-scen { display: flex; flex-direction: column; gap: calc(4px * var(--zm)); } .kr-scen-ods { margin: calc(8px * var(--zm)) 0 2px; font-size: calc(14px * var(--zm)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jantar); border-bottom: 1px solid var(--crta); padding-bottom: calc(3px * var(--zm)); } .kr-scen-vr { display: grid; grid-template-columns: calc(110px * var(--zm)) minmax(0, 1fr); gap: calc(12px * var(--zm)); align-items: start; width: 100%; padding: calc(5px * var(--zm)) calc(8px * var(--zm)); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); background: transparent; color: var(--papir); font: inherit; text-align: left; cursor: pointer; } .kr-scen-l { display: flex; flex-direction: column; font-size: calc(14px * var(--zm)); color: var(--siva); border-right: 1px solid var(--crta); } .kr-scen-l small { font-size: calc(14px * var(--zm)); } .kr-scen-d { font-size: calc(14px * var(--zm)); letter-spacing: .02em; } .kr-scen-d small { display: block; color: var(--siva); font-size: calc(12.5px * var(--zm)); letter-spacing: 0; } .kr-scen-kam { color: var(--jantar); } .kr-scen-vr.zivo, .kr-kart-vr.zivo, .kr-story-c.zivo, .kr-tabela tr.zivo { border-color: var(--pgm); background: #2A1416; } .kr-scen-vr.nasl, .kr-kart-vr.nasl, .kr-story-c.nasl, .kr-tabela tr.nasl { border-color: var(--pvw); } .kr-scen-vr.izbran, .kr-kart-vr.izbran, .kr-story-c.izbran, .kr-tabela tr.izbran { background: var(--plast2); } .kr-scen-vr.minil, .kr-kart-vr.minil, .kr-story-c.minil, .kr-tabela tr.minil { opacity: .55; } .kr-kartice { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(230px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .kr-kartica { border: 1px solid var(--crta); border-top: calc(4px * var(--zm)) solid var(--b); border-radius: calc(8px * var(--zm)); background: var(--noc); padding: calc(6px * var(--zm)); display: flex; flex-direction: column; gap: calc(4px * var(--zm)); } .kr-kartica header { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); padding: 2px 2px calc(5px * var(--zm)); } .kr-kartica header small { width: 100%; color: var(--siva); font-size: calc(14px * var(--zm)); } .kr-kart-vr { display: grid; grid-template-columns: calc(30px * var(--zm)) calc(44px * var(--zm)) minmax(0, 1fr); gap: calc(8px * var(--zm)); align-items: start; width: 100%; padding: calc(4px * var(--zm)) calc(6px * var(--zm)); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); background: transparent; color: var(--papir); font: inherit; font-size: calc(13.5px * var(--zm)); text-align: left; cursor: pointer; } .kr-kart-vr small { display: block; color: var(--siva); font-size: calc(14px * var(--zm)); } .kr-story { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(118px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .kr-story-c { display: flex; flex-direction: column; gap: calc(4px * var(--zm)); align-items: flex-start; padding: calc(6px * var(--zm)); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(14px * var(--zm)); text-align: left; cursor: pointer; } .kr-story-c small { display: block; color: var(--siva); font-size: calc(11.5px * var(--zm)); } .kr-story-t { font-weight: 600; } .kr-tab-ovoj { overflow-x: auto; } .kr-tabela { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--zm)); } .kr-tabela th { text-align: left; font-size: calc(11.5px * var(--zm)); letter-spacing: .06em; text-transform: uppercase; color: var(--siva); padding: calc(4px * var(--zm)) calc(6px * var(--zm)); border-bottom: 1px solid var(--crta); white-space: nowrap; } .kr-tabela td { padding: calc(5px * var(--zm)) calc(6px * var(--zm)); border-bottom: 1px solid #1B2632; vertical-align: top; } .kr-tabela tr { cursor: pointer; border: 1px solid transparent; } .kr-klici { display: flex; flex-direction: column; gap: calc(4px * var(--zm)); } .kr-klic { display: grid; grid-template-columns: calc(64px * var(--zm)) calc(104px * var(--zm)) minmax(0, 1fr); gap: calc(8px * var(--zm)); align-items: center; min-height: calc(32px * var(--zm)); padding: 0 calc(8px * var(--zm)); border: 1px solid transparent; border-radius: calc(8px * var(--zm)); background: transparent; color: var(--papir); font: inherit; font-size: calc(14px * var(--zm)); text-align: left; cursor: pointer; } .kr-klic.pripravi { color: var(--siva); } .kr-klic.pripravi b { color: var(--pvw); } .kr-klic.rez b { color: var(--pgm); } .kr-klic.zdaj { border-color: var(--jantar); } .kr-klic.izbran { background: var(--plast2); } .kr-strani { display: flex; flex-direction: column; gap: calc(8px * var(--zm)); } .kr-stran { border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(6px * var(--zm)); background: var(--noc); } .kr-stran h5 { margin: 0 0 calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); } .kr-stran h5 small { color: var(--siva); font-weight: 500; } .kr-velika { position: fixed; inset: 0; z-index: 85; } .kr-velika[hidden] { display: none; } .kr-velika-okno { position: fixed; inset: calc(20px * var(--zm)); background: #0F161E; border: 1px solid transparent; border-radius: calc(8px * var(--zm)); padding: 0 calc(16px * var(--zm)) calc(16px * var(--zm)); overflow-y: auto; box-sizing: border-box; } @media (max-width: 600px) { .kr-velika-okno { inset: 0; border-radius: 0; } .kr-scen-vr { grid-template-columns: calc(76px * var(--zm)) minmax(0, 1fr); } } @media print { .kr-kk-gumbi, .kr-kk-slogi, .kr-kk-filter { display: none; } } /* ─── ZEV-REZIJA-V77: okna kot v Blenderju ─── */ .kr-okna { display: flex; height: max(calc(560px * var(--zm)), calc(100dvh - calc(206px * var(--zm)))); min-height: 0; } .kr-okna > .okno, .kr-okna > .ok-del { flex: 1 1 0; min-width: 0; min-height: 0; } .ok-del { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; } .ok-del-h { flex-direction: row; } .ok-del-v { flex-direction: column; } .ok-otrok { display: flex; min-width: 0; min-height: 0; } .ok-otrok > .okno, .ok-otrok > .ok-del { flex: 1 1 0; min-width: 0; min-height: 0; } .ok-meja { flex: 0 0 calc(8px * var(--zm)); position: relative; touch-action: none; outline: none; } .ok-meja::after { content: ''; position: absolute; background: var(--crta); border-radius: 2px; transition: background .12s; } .ok-meja-h { cursor: col-resize; } .ok-meja-h::after { left: calc(3px * var(--zm)); width: 2px; top: 20%; bottom: 20%; } .ok-meja-v { cursor: row-resize; } .ok-meja-v::after { top: calc(3px * var(--zm)); height: 2px; left: 20%; right: 20%; } .ok-meja:hover::after, .ok-meja.vlece::after, .ok-meja:focus-visible::after { background: var(--jantar); } .okno { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--grafit); border-radius: calc(8px * var(--zm)); overflow: hidden; } .okno.cilj { box-shadow: 0 0 0 2px var(--jantar); } .ok-glava { display: flex; align-items: center; gap: calc(4px * var(--zm)); padding: calc(3px * var(--zm)) calc(4px * var(--zm)) 0; background: #111922; border-bottom: 1px solid var(--crta); min-height: calc(40px * var(--zm)); flex: none; } .ok-rocaj { flex: none; width: calc(26px * var(--zm)); height: calc(32px * var(--zm)); border: 0; background: none; color: var(--temna); font-size: calc(18px * var(--zm)); line-height: 1; cursor: grab; touch-action: none; border-radius: calc(4px * var(--zm)); } .ok-rocaj:hover { color: var(--papir); background: var(--plast); } .ok-zavihki { display: flex; align-items: flex-end; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; align-self: stretch; } .ok-zavihki::-webkit-scrollbar { display: none; } .ok-z { display: inline-flex; align-items: center; flex: none; border-radius: calc(8px * var(--zm)) calc(8px * var(--zm)) 0 0; color: var(--siva); } .ok-z:hover { color: var(--papir); background: rgba(255, 255, 255, .03); } .ok-z.izbran { background: var(--grafit); color: var(--papir); box-shadow: inset 0 2px 0 var(--jantar); } .ok-z-ime { background: none; border: 0; color: inherit; font: inherit; font-weight: 600; font-size: calc(16px * var(--zm)); padding: calc(8px * var(--zm)) 2px calc(8px * var(--zm)) calc(12px * var(--zm)); cursor: pointer; white-space: nowrap; } .ok-z-x { background: none; border: 0; color: inherit; font-size: calc(18px * var(--zm)); line-height: 1; width: calc(28px * var(--zm)); height: calc(28px * var(--zm)); margin-right: 2px; border-radius: calc(4px * var(--zm)); cursor: pointer; opacity: 0; } .ok-z:hover .ok-z-x, .ok-z.izbran .ok-z-x, .ok-z-x:focus-visible { opacity: .6; } .ok-z-x:hover { opacity: 1; background: var(--plast); } .ok-g { flex: none; display: inline-grid; place-items: center; min-width: calc(32px * var(--zm)); height: calc(32px * var(--zm)); padding: 0 calc(4px * var(--zm)); border-radius: calc(4px * var(--zm)); border: 0; background: none; color: var(--siva); font: inherit; font-size: calc(18px * var(--zm)); line-height: 1; cursor: pointer; } .ok-g:hover { background: var(--plast); color: var(--papir); } .ok-g.izbran { color: var(--jantar); } .ok-g svg { width: calc(16px * var(--zm)); height: calc(16px * var(--zm)); fill: none; stroke: currentColor; stroke-width: 1.5; } .ok-proc { min-width: calc(52px * var(--zm)); font-size: calc(14px * var(--zm)); font-weight: 600; } .ok-desno { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; } .ok-zoom { display: inline-flex; align-items: center; } .ok-plus-ovoj { position: relative; flex: none; } .ok-meni { position: absolute; top: calc(36px * var(--zm)); left: 0; z-index: 70; display: grid; min-width: calc(230px * var(--zm)); padding: calc(6px * var(--zm)); background: #0F161E; border: 1px solid var(--rob); border-radius: calc(8px * var(--zm)); box-shadow: 0 calc(12px * var(--zm)) calc(32px * var(--zm)) rgba(0, 0, 0, .5); } .ok-meni button { text-align: left; background: none; border: 0; color: var(--papir); font: inherit; font-size: calc(16px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(4px * var(--zm)); cursor: pointer; } .ok-meni button:hover, .ok-meni button:focus-visible { background: var(--plast); } .ok-meni .namig { margin: calc(6px * var(--zm)) calc(8px * var(--zm)); } .ok-telo { flex: 1 1 0; min-height: 0; overflow: auto; padding: calc(8px * var(--zm)) calc(12px * var(--zm)) calc(12px * var(--zm)); } .ok-telo > .kr-plosca.v-oknu { background: none; border: 0; padding: 0; border-radius: 0; min-width: 0; } .ok-podglava { margin: 0 0 calc(8px * var(--zm)); } .ok-podglava:empty { display: none; } .ok-prazno { color: var(--siva); padding: calc(24px * var(--zm)) calc(12px * var(--zm)); } .ok-prazno p { margin: 0 0 calc(8px * var(--zm)); } .ok-duh { position: fixed; z-index: 999; pointer-events: none; background: var(--jantar); color: #1A1305; font-weight: 700; font-size: calc(14px * var(--zm)); padding: calc(4px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(4px * var(--zm)); box-shadow: 0 calc(6px * var(--zm)) calc(18px * var(--zm)) rgba(0, 0, 0, .5); } .kr-cas-ok { display: flex; flex-direction: column; gap: calc(8px * var(--zm)); min-height: 100%; } .kr-cas-ok .kr-cas { background: none; border: 0; padding: 0; border-radius: 0; } .kr-okna.ok-telefon { height: auto; display: block; } .kr-okna.ok-telefon .ok-telo { overflow: visible; padding: calc(8px * var(--zm)); } .kr-okna.ok-telefon .ok-glava { position: sticky; top: 0; z-index: 30; flex-wrap: wrap; padding: calc(4px * var(--zm)); } .kr-okna.ok-telefon .ok-zavihki { order: 3; flex-basis: 100%; } .kr-okna.ok-telefon .ok-z-x { opacity: .5; } @media (max-width: 1100px) and (min-width: 701px) { .ok-z-ime { font-size: calc(15px * var(--zm)); padding-left: calc(10px * var(--zm)); } .ok-proc { min-width: calc(44px * var(--zm)); } } /* ─── ZEV-REZIJA-V77: grafika po Claude Design (žetoni, obrobe, rdeča samo za tally) ─── */ :root { --temna: #8592A0; --rob: #64778B; --r: calc(8px * var(--zm)); } body { font-size: calc(16px * var(--zm)); } .gumb, .izb, input, select, textarea { border-color: var(--rob); } .gumb { font-size: calc(18px * var(--zm)); } .gumb.majhen { font-size: calc(16px * var(--zm)); } .gumb.tiho { border-color: transparent; } .gumb.tiho:hover { border-color: var(--rob); } .nacini button { font-size: calc(18px * var(--zm)); border-color: var(--rob); } .kr-igraj { background: var(--plast2); border-color: var(--rob); color: var(--papir); } .kr-igraj:hover { background: #2E3C4E; } .kr-ustavi { background: var(--plast2); border-color: var(--jantar); color: var(--papir); } .kr-igla, .kr-igla { background: var(--jantar); } .kr-igla::before { content: ''; position: absolute; top: -2px; left: calc(-5px * var(--zm)); width: calc(12px * var(--zm)); height: calc(8px * var(--zm)); border-radius: 2px; background: var(--jantar); } .pdf-igla { border-left-color: var(--jantar); box-shadow: none; } .kn-pk.manj { border-color: var(--rob); color: var(--siva); } .kn-opoz { background: rgba(232, 176, 75, .10); border-color: var(--jantar); } .kr-pl-glava { font-size: calc(14px * var(--zm)); letter-spacing: .06em; } .rez-glava .kl-gumb, .rez-glava .op-gumb { position: static; box-shadow: none; transform: none; margin: 0; min-height: calc(40px * var(--zm)); } @media (max-width: 640px) { .rez-glava .kl-gumb, .rez-glava .op-gumb { padding: 2px calc(10px * var(--zm)); font-size: calc(14px * var(--zm)); } } .rez-glava .op-gumb { background: var(--plast); color: var(--papir); border: 1px solid var(--rob); } /* ─── ZEV-REZIJA-V77: ozka okna (⋯), urejevalnik v Lastnostih ─── */ .okno { container-type: inline-size; } .ok-vec-ovoj { position: relative; display: none; } .ok-meni-d { left: auto; right: 0; } @container (max-width: 560px) { .ok-zoom, .ok-desno [data-kr=ok-deli], .ok-desno [data-kr=ok-max], .ok-x-okno { display: none; } .ok-vec-ovoj { display: inline-block; } .ok-z-ime { font-size: calc(15px * var(--zm)); padding-left: calc(10px * var(--zm)); } } .kr-okna.ok-telefon .ok-vec-ovoj { display: inline-block; } .kr-okna.ok-telefon .ok-zoom { display: none; } .kr-trak-ur.v-lastnostih { margin: calc(8px * var(--zm)) 0; border-top: 1px solid var(--crta); padding-top: calc(8px * var(--zm)); } .kr-trak-ur.v-lastnostih .kr-tu-vr { grid-template-columns: 1fr; gap: calc(4px * var(--zm)); } .kr-trak-ur.v-lastnostih .kr-tu-gumbi { margin-left: 0; } /* ─── ZEV-REZIJA-V77: telefon in glava ─── */ .shranjeno { white-space: nowrap; flex: none; } .kr-okna.ok-telefon .okno { overflow: visible; } .kr-okna.ok-telefon .ok-telo { flex: none; min-height: 60vh; } @media (max-width: 700px) { .kr-glava { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: calc(6px * var(--zm)); padding-bottom: 2px; } .kr-glava::-webkit-scrollbar { display: none; } .kr-glava > * { flex: none; } .kr-slogi { flex-wrap: nowrap; } } @media (max-width: 600px) { .rez-glava { flex-wrap: wrap; row-gap: calc(4px * var(--zm)); } .rez-glava > .koda { order: 0; } .rez-glava > .polozaj { order: 1; } .rez-glava > .rez-premik { order: 2; } .rez-glava > #r-pomoc { order: 3; } .rez-glava > .zveza { order: 4; } .rez-glava > .kl-gumb, .rez-glava > .op-gumb { order: 5; } .nacini { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .nacini::-webkit-scrollbar { display: none; } .nacini button { flex: none; padding: calc(6px * var(--zm)) calc(12px * var(--zm)); font-size: calc(16px * var(--zm)); } } /* ─── ZEV-REZIJA-V77: drobne oznake (nič pod 14 px; oznake v gostih sledeh 13 px) ─── */ #kr-okna small, .kr-predal small { font-size: max(calc(14px * var(--zm)), .85em); } .kr-t, .kr-cel-st { font-size: calc(14px * var(--zm)); } .kr-crka-k { font-size: calc(13px * var(--zm)); min-width: calc(18px * var(--zm)); height: calc(18px * var(--zm)); line-height: calc(18px * var(--zm)); } .kr-fok { font-size: calc(13px * var(--zm)); line-height: calc(14px * var(--zm)); } .kn-pr-pike .kn-pk { width: calc(22px * var(--zm)); height: calc(22px * var(--zm)); font-size: calc(13px * var(--zm)); } /* ─── ZEV-REZIJA-V78: Priprava v treh korakih, Orodja kadrirke v Kreativi, Paket v Koncertu ─── */ .zavihki.koraki { counter-reset: korak; } .zavihki.koraki button { counter-increment: korak; } .zavihki.koraki button::before { content: counter(korak) '. '; color: var(--temna); font-weight: 700; } .zavihki.koraki button.opravljen::after { content: ' ✓'; color: var(--pvw); } .kn-prip { margin-top: calc(16px * var(--zm)); background: var(--grafit); border-radius: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(16px * var(--zm)); } .kn-prip > summary { cursor: pointer; font-size: calc(22px * var(--zm)); font-weight: 700; padding: calc(8px * var(--zm)) 0; } .kn-prip .car-koraki { display: none; } .kn-prip .carovnik { display: block; } .kn-prip .car-sekcija:not(#car-koncert):not(#car-ekipa):not(#car-potek) { display: none; } .kr-orodja-kad h4 { margin: calc(12px * var(--zm)) 0 calc(6px * var(--zm)); font-size: calc(14px * var(--zm)); letter-spacing: .06em; text-transform: uppercase; color: var(--siva); } .kr-orodja-kad h4:first-child { margin-top: 0; } .kr-orodja-kad .kr-vrsta { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); align-items: center; } .kr-orodja-kad .kr-polje-v { display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); color: var(--siva); font-size: calc(14px * var(--zm)); } .kr-orodja-kad select { min-height: calc(38px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--rob); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(16px * var(--zm)); padding: 0 calc(8px * var(--zm)); } .kr-orodja-kad .kad-orodjarna [data-a=or-hitra], .kr-orodja-kad .kad-orodjarna .or-stik, .kr-orodja-kad .kad-orodjarna [data-a=or-sprejmi-vse], .kr-orodja-kad .kad-orodjarna [data-a=or-pov], .kr-orodja-kad .kad-orodjarna [data-a=or-pom], .kr-orodja-kad .kad-orodjarna .or-oz, .kr-orodja-kad .kad-orodjarna #or-hitra-panel, .kr-orodja-kad .kad-orodjarna [data-a=or-predlog-fokus], .kr-orodja-kad .kad-orodjarna .or-loc { display: none; } .kr-pl-nast { display: inline-flex; align-items: center; gap: calc(6px * var(--zm)); margin-left: calc(12px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); text-transform: none; letter-spacing: 0; font-weight: 500; } .kr-pl-nast select { min-height: calc(30px * var(--zm)); border-radius: calc(4px * var(--zm)); border: 1px solid var(--rob); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(14px * var(--zm)); } /* ── ZEV-REZIJA-V81: Kreativa v slogu CuePilot — skladbe koncerta, plošča Posnetek, sled Zvok ── */ .kr-skladbe { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--zm)); padding-bottom: calc(10px * var(--zm)); border-bottom: 1px solid var(--crta); } .kr-sk-oz { color: var(--siva); font-size: calc(14px * var(--zm)); margin-right: calc(4px * var(--zm)); } .kr-sk { display: inline-flex; align-items: baseline; gap: calc(7px * var(--zm)); min-height: calc(36px * var(--zm)); padding: calc(5px * var(--zm)) calc(14px * var(--zm)) calc(5px * var(--zm)) calc(6px * var(--zm)); border-radius: calc(999px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(16px * var(--zm)); font-weight: 600; cursor: pointer; } .kr-sk b { display: inline-grid; place-items: center; min-width: calc(24px * var(--zm)); height: calc(24px * var(--zm)); border-radius: calc(999px * var(--zm)); background: var(--plast2); font-size: calc(14px * var(--zm)); } .kr-sk small { font-weight: 500; font-size: calc(13px * var(--zm)); color: var(--siva); } .kr-sk:hover { border-color: var(--rob); } .kr-sk.izbrana { background: var(--papir); color: var(--noc); border-color: var(--papir); cursor: default; } .kr-sk.izbrana b { background: var(--jantar); color: var(--noc); } .kr-sk.brez { color: var(--siva); } .kr-sk:focus-visible { outline: calc(3px * var(--zm)) solid var(--jantar); outline-offset: 2px; } .kr-prazna { margin: calc(28px * var(--zm)) auto; max-width: calc(640px * var(--zm)); padding: calc(34px * var(--zm)) calc(30px * var(--zm)); border: 1px dashed var(--rob); border-radius: calc(12px * var(--zm)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: calc(10px * var(--zm)); } .kr-prazna b { font-size: calc(26px * var(--zm)); font-weight: 800; } .kr-prazna p { margin: 0; color: var(--siva); font-family: var(--serif); font-size: calc(17px * var(--zm)); line-height: 1.5; max-width: 52ch; } .kr-pos { display: flex; flex-direction: column; gap: calc(6px * var(--zm)); height: 100%; min-height: 0; } .kr-pos-zaslon { position: relative; flex: 1 1 auto; min-height: calc(150px * var(--zm)); background: #000; border-radius: calc(6px * var(--zm)); overflow: hidden; container-type: size; } .kr-pos-zaslon.brez { background: var(--noc); border: 1px solid var(--crta); } .kr-pos-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; } .kr-pos-ni { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4px * var(--zm)); padding: 0 calc(20px * var(--zm)); text-align: center; color: var(--siva); font-size: calc(15px * var(--zm)); } .kr-pos-ni b { color: var(--papir); font-size: calc(18px * var(--zm)); } .kr-pos-prek { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(10px * var(--zm)); pointer-events: none; gap: calc(8px * var(--zm)); } .kp-zg { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(10px * var(--zm)); } .kp-zdaj { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: calc(12px * var(--zm)); align-items: center; max-width: 72%; padding: calc(6px * var(--zm)) calc(14px * var(--zm)) calc(7px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(6px * var(--zm)); background: rgba(14, 20, 27, .82); border-left: calc(6px * var(--zm)) solid var(--pgm); box-shadow: inset 0 calc(-4px * var(--zm)) 0 var(--b, var(--crta)); } .kp-zdaj.prazen { border-left-color: var(--crta); box-shadow: none; } .kp-st { grid-row: 1 / 3; font-size: clamp(calc(34px * var(--zm)), 13cqh, calc(76px * var(--zm))); font-weight: 800; line-height: .9; font-variant-numeric: tabular-nums; } .kp-kam { display: inline-flex; align-items: center; gap: calc(7px * var(--zm)); font-size: clamp(calc(15px * var(--zm)), 5cqh, calc(22px * var(--zm))); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kp-plan { font-size: clamp(calc(13px * var(--zm)), 4cqh, calc(18px * var(--zm))); color: #C9D2DC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kp-zdaj.prazen .kp-plan { grid-column: 1 / 3; } .kp-cas { display: flex; flex-direction: column; align-items: flex-end; padding: calc(5px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(6px * var(--zm)); background: rgba(14, 20, 27, .82); } .kp-cas b { font-size: clamp(calc(22px * var(--zm)), 9cqh, calc(44px * var(--zm))); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--jantar); } .kp-cas span { font-size: clamp(calc(12px * var(--zm)), 3.6cqh, calc(16px * var(--zm))); color: #C9D2DC; white-space: nowrap; } .kp-sp { padding: calc(6px * var(--zm)) calc(12px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(6px * var(--zm)); background: rgba(14, 20, 27, .82); border-left: calc(6px * var(--zm)) solid var(--pvw); } .kp-nasl { display: flex; align-items: center; gap: calc(9px * var(--zm)); min-width: 0; font-size: clamp(calc(14px * var(--zm)), 4.4cqh, calc(20px * var(--zm))); } .kp-oz { color: var(--pvw); font-weight: 700; } .kp-st2 { font-size: 1.35em; font-weight: 800; font-variant-numeric: tabular-nums; } .kp-plan2 { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #C9D2DC; } .kp-cez { margin-left: auto; white-space: nowrap; color: #C9D2DC; } .kp-cez b { font-size: 1.6em; font-weight: 800; color: var(--papir); font-variant-numeric: tabular-nums; } .kp-sp.blizu { border-left-color: var(--jantar); } .kp-sp.blizu .kp-cez b { color: var(--jantar); } .kp-trak { margin-top: calc(6px * var(--zm)); height: calc(7px * var(--zm)); border-radius: calc(4px * var(--zm)); background: rgba(236, 229, 211, .14); overflow: hidden; } .kp-trak i { display: block; height: 100%; background: var(--b, var(--pvw)); } .kr-pos-vir { margin: 0; font-size: calc(13px * var(--zm)); color: var(--siva); line-height: 1.35; } .kr-pos-vir.ni { color: var(--jantar); } .kr-s-zvok .kr-pas { height: calc(48px * var(--zm)); background: #0C131A; border-radius: calc(4px * var(--zm)); } .kr-val { position: absolute; left: 0; right: 0; top: calc(12px * var(--zm)); bottom: 0; width: 100%; height: calc(100% - calc(12px * var(--zm))); } .kr-val path { fill: #6F8FAF; } .kr-val-t { position: absolute; top: 0; bottom: 0; padding-left: calc(3px * var(--zm)); border-left: 1px solid rgba(154, 167, 180, .35); font-size: calc(11px * var(--zm)); line-height: calc(12px * var(--zm)); color: var(--siva); font-variant-numeric: tabular-nums; pointer-events: none; } .kr-val-ni { position: absolute; left: calc(8px * var(--zm)); top: calc(16px * var(--zm)); font-size: calc(13px * var(--zm)); color: var(--siva); } @media (prefers-reduced-motion: reduce) { .kp-trak i { transition: none; } } .ok-telo > .kr-plosca.kr-pl-posnetek { height: 100%; display: flex; flex-direction: column; } .kr-pl-posnetek > .kr-pl-telo { flex: 1 1 auto; min-height: 0; } /* ── ZEV-REZIJA-V82: proge kamer kot urejevalnik, oder v Kreativi po kazalcu, vrstica nad odrom ── */ .kr-s-prestavljanje .kr-lane { height: calc(18px * var(--zm)); cursor: copy; border-bottom: 1px solid #16202A; } .kr-s-prestavljanje .kr-lane:hover { background: rgba(236, 229, 211, .04); } .kr-lane-st { position: absolute; left: 0; top: 2px; z-index: 2; min-width: calc(16px * var(--zm)); height: calc(14px * var(--zm)); padding: 0 calc(3px * var(--zm)); border-radius: calc(3px * var(--zm)); background: var(--b); color: var(--noc); font-size: calc(11px * var(--zm)); line-height: calc(14px * var(--zm)); text-align: center; pointer-events: none; } .kr-s-prestavljanje .kr-lane .zi { top: 2px; height: calc(14px * var(--zm)); cursor: grab; color: var(--noc); font-size: calc(11px * var(--zm)); font-weight: 700; line-height: calc(14px * var(--zm)); padding-left: calc(3px * var(--zm)); overflow: hidden; white-space: nowrap; box-sizing: border-box; } .kr-s-prestavljanje .kr-lane .zi.izbran { outline: 2px solid var(--papir); outline-offset: 0; } .kr-s-prestavljanje .kr-lane .zi.zdaj { box-shadow: 0 0 0 2px var(--pgm); } .kr-s-prestavljanje .kr-lane .ti { top: calc(8px * var(--zm)); } .kr-s-prestavljanje .kr-lane .pr { top: 2px; height: calc(14px * var(--zm)); } .kr-lane.cilj { background: color-mix(in srgb, var(--b) 28%, transparent); box-shadow: inset 0 0 0 1px var(--b); } body.kr-vlece-lane, body.kr-vlece-lane * { cursor: grabbing !important; } #kr #oder-svg.kr-stanje .oder-kam { transition: opacity .2s; } #kr #oder-svg.kr-stanje .oder-kam.kr-temna { opacity: .28; } #kr #oder-svg.kr-stanje .oder-kam.kr-pvw { opacity: .9; } #kr #oder-svg.kr-ima-sub .oder-stol:not(.kr-v-pgm):not(.kr-v-pvw) { opacity: .3; } #kr #oder-svg .oder-stol.kr-v-pgm rect, #kr #oder-svg .oder-stol.kr-v-pgm circle, #kr #oder-svg .oder-stol.kr-v-pgm path { fill-opacity: 1 !important; stroke: #ECE5D3; stroke-width: .08; } #kr #oder-svg .oder-stol.kr-v-pvw rect, #kr #oder-svg .oder-stol.kr-v-pvw circle, #kr #oder-svg .oder-stol.kr-v-pvw path { stroke: #30C77B; stroke-width: .1; } #kr #oder-svg .oder-stol.fokus { animation: none; } #kr #oder-svg .kr-stozec { pointer-events: none; } #kr-oder-prek { pointer-events: none; } #kr .oder-orodja label:first-child, #kr #oder-obr-box { display: none; } .kr-oder-upo { display: flex; flex-direction: column; gap: calc(6px * var(--zm)); margin-bottom: calc(8px * var(--zm)); } .kr-ou-gl { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--zm)) calc(10px * var(--zm)); font-size: calc(15px * var(--zm)); } .kr-ou-st { font-size: calc(24px * var(--zm)); font-weight: 800; line-height: 1; } .kr-ou-namig { font-size: calc(13px * var(--zm)); } .kr-ou-vr { display: flex; flex-wrap: wrap; align-items: center; gap: calc(5px * var(--zm)); } .kr-ou-vr > span { width: calc(58px * var(--zm)); color: var(--siva); font-size: calc(13px * var(--zm)); } .kr-ou-vr .izb.mala { min-height: calc(28px * var(--zm)); padding: 1px calc(9px * var(--zm)); font-size: calc(14px * var(--zm)); } .kr-ou-vr input { flex: 1 1 calc(180px * var(--zm)); min-height: calc(30px * var(--zm)); border-radius: calc(6px * var(--zm)); border: 1px solid var(--rob); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(14px * var(--zm)); padding: 2px calc(8px * var(--zm)); } .kr-ou-k { display: inline-grid; place-items: center; min-width: calc(18px * var(--zm)); height: calc(18px * var(--zm)); margin-right: calc(5px * var(--zm)); border-radius: calc(4px * var(--zm)); color: var(--noc); font-size: calc(12px * var(--zm)); } /* ── ZEV-REZIJA-V82: ročaja kadra, vrzeli in naloge na progah kamer, namig za tipke, naloga na tablici, povabilo ── */ .kr-s-kadri .kr-kd .kr-rob { width: calc(12px * var(--zm)); cursor: ew-resize; z-index: 3; } .kr-s-kadri .kr-kd .kr-rob::after { content: ''; position: absolute; top: 18%; bottom: 18%; left: calc(4px * var(--zm)); width: calc(3px * var(--zm)); border-radius: 2px; background: rgba(14, 20, 27, .55); opacity: 0; transition: opacity .12s; } .kr-s-kadri .kr-kd:hover .kr-rob::after, .kr-s-kadri .kr-kd.izbran .kr-rob::after { opacity: 1; } .kr-lane .kr-gap { position: absolute; top: 0; height: calc(18px * var(--zm)); z-index: 0; font-style: normal; } .kr-lane .kr-gap:hover { background: rgba(236, 229, 211, .05); } .kr-lane .zi, .kr-lane .pr, .kr-lane .ti { z-index: 1; } .kr-nal, .kr-nal-plus { position: absolute; left: calc(3px * var(--zm)); right: 2px; top: 2px; z-index: 2; height: calc(14px * var(--zm)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(11px * var(--zm)); line-height: calc(14px * var(--zm)); cursor: pointer; border-radius: calc(3px * var(--zm)); } .kr-nal { padding: 0 calc(4px * var(--zm)); background: rgba(14, 20, 27, .85); color: var(--jantar); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b) 60%, transparent); } .kr-nal-plus { width: max-content; max-width: calc(100% - calc(6px * var(--zm))); padding: 0 calc(5px * var(--zm)); color: var(--siva); background: rgba(14, 20, 27, .8); opacity: 0; transition: opacity .12s; } .kr-lane .kr-gap:hover .kr-nal-plus { opacity: 1; } .kr-nal-ur { position: fixed; z-index: 60; width: calc(360px * var(--zm)); max-width: calc(100vw - calc(16px * var(--zm))); display: flex; flex-direction: column; gap: calc(7px * var(--zm)); padding: calc(12px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(10px * var(--zm)); background: var(--grafit); border: 1px solid var(--rob); box-shadow: 0 calc(12px * var(--zm)) calc(34px * var(--zm)) rgba(0, 0, 0, .5); } .kr-nal-ur b { display: flex; align-items: center; gap: calc(7px * var(--zm)); font-size: calc(15px * var(--zm)); } .kr-nal-ur label { font-size: calc(13px * var(--zm)); color: var(--siva); } .kr-nal-ur input { min-height: calc(36px * var(--zm)); border-radius: calc(6px * var(--zm)); border: 1px solid var(--rob); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(15px * var(--zm)); padding: calc(3px * var(--zm)) calc(9px * var(--zm)); } .kr-nal-ur .kr-vrsta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--zm)); font-size: calc(12px * var(--zm)); } .kr-tipka { position: fixed; left: 50%; bottom: calc(22px * var(--zm)); transform: translateX(-50%); z-index: 70; padding: calc(8px * var(--zm)) calc(16px * var(--zm)); border-radius: calc(999px * var(--zm)); background: var(--papir); color: var(--noc); font-size: calc(15px * var(--zm)); font-weight: 700; box-shadow: 0 calc(8px * var(--zm)) calc(26px * var(--zm)) rgba(0, 0, 0, .45); pointer-events: none; } .kr-tab-nal, .tz-naloga { margin-top: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--jantar); background: color-mix(in srgb, var(--jantar) 12%, transparent); display: flex; flex-direction: column; gap: 2px; } .kr-tab-nal small, .tz-naloga small { color: var(--jantar); font-size: calc(12px * var(--zm)); text-transform: uppercase; letter-spacing: .04em; } .kr-tab-nal b { font-size: calc(15px * var(--zm)); } .tz-naloga b { font-size: calc(22px * var(--zm)); line-height: 1.25; } .po-pov { margin: calc(10px * var(--zm)) 0 calc(14px * var(--zm)); padding: calc(10px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(10px * var(--zm)); border: 1px solid var(--crta, #2A3642); background: rgba(255, 255, 255, .02); } .po-pov summary { cursor: pointer; font-weight: 700; } .po-pov .tiho { margin: calc(8px * var(--zm)) 0; } .po-pov-vr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(10px * var(--zm)); } .po-pov-vr label { display: flex; flex-direction: column; gap: calc(3px * var(--zm)); font-size: calc(13px * var(--zm)); } .po-pov-vr input { min-width: calc(220px * var(--zm)); min-height: calc(36px * var(--zm)); border-radius: calc(6px * var(--zm)); border: 1px solid var(--rob, #3A4A5A); background: var(--noc, #0E141B); color: inherit; font: inherit; padding: calc(3px * var(--zm)) calc(9px * var(--zm)); } .po-pov-st { margin: calc(8px * var(--zm)) 0 0; font-size: calc(14px * var(--zm)); } .po-pov-st.ok { color: var(--pvw, #30C77B); } @media (prefers-reduced-motion: reduce) { .kr-nal-plus, .kr-s-kadri .kr-kd .kr-rob::after { transition: none; } } .kr-nal-ur[hidden], .kr-tipka[hidden] { display: none; } /* ── ZEV-REZIJA-V84: pregled s snemalci (režiser in tablica), preštevilčenje kamer ── */ .gp { display: flex; flex-direction: column; gap: calc(10px * var(--zm)); } .gp-gl { display: flex; align-items: center; gap: calc(10px * var(--zm)); flex-wrap: wrap; } .gp-gl b { font-size: calc(17px * var(--zm)); } .gp-st { font-size: calc(13px * var(--zm)); color: var(--siva); padding: 2px calc(8px * var(--zm)); border-radius: calc(999px * var(--zm)); border: 1px solid var(--crta); } .gp-gl .gumb { margin-left: auto; } .gp-kader { padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(10px * var(--zm)); border: 1px solid var(--crta); background: rgba(255, 255, 255, .02); display: flex; flex-direction: column; gap: calc(8px * var(--zm)); } .gp-kader.slab { border-color: var(--pgm); box-shadow: inset calc(4px * var(--zm)) 0 0 var(--pgm); } .gp-k, .tg-k { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--zm)); font-size: calc(16px * var(--zm)); } .gp-k small, .tg-k small { color: var(--siva); } .gp-k i, .tg-k i { color: #C9D2DC; font-size: calc(14px * var(--zm)); } .gp-odg { display: flex; flex-wrap: wrap; gap: calc(6px * var(--zm)); font-size: calc(14px * var(--zm)); } .gp-ok { color: var(--pvw); } .gp-slab, .tg-r { color: #FF8A8E; } .gp-pon { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } .gp-zam { display: inline-flex; align-items: center; gap: calc(8px * var(--zm)); min-height: calc(46px * var(--zm)); padding: calc(6px * var(--zm)) calc(14px * var(--zm)) calc(6px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(10px * var(--zm)); border: 2px solid var(--b, var(--pvw)); background: color-mix(in srgb, var(--b, var(--pvw)) 16%, var(--noc)); color: var(--papir); font: inherit; font-size: calc(16px * var(--zm)); font-weight: 700; cursor: pointer; } .gp-zam small { font-weight: 500; color: #C9D2DC; font-size: calc(13px * var(--zm)); } .gp-zam.mala { min-height: calc(32px * var(--zm)); font-size: calc(14px * var(--zm)); padding: 2px calc(10px * var(--zm)) 2px calc(6px * var(--zm)); border-width: 1px; } .gp-zam:focus-visible, .gp-pokazi:focus-visible { outline: calc(3px * var(--zm)) solid var(--jantar); outline-offset: 2px; } .gp-gumbi { display: flex; flex-wrap: wrap; gap: calc(6px * var(--zm)); } .gp-h { margin: calc(6px * var(--zm)) 0 0; font-size: calc(14px * var(--zm)); color: var(--siva); } .gp-vr { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--zm)); } .gp-pokazi { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--zm)); background: none; border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(4px * var(--zm)) calc(8px * var(--zm)); color: inherit; font: inherit; font-size: calc(14px * var(--zm)); cursor: pointer; text-align: left; } .kr-gp-st { display: inline-grid; place-items: center; min-width: calc(20px * var(--zm)); height: calc(20px * var(--zm)); padding: 0 calc(5px * var(--zm)); margin-left: calc(4px * var(--zm)); border-radius: calc(999px * var(--zm)); background: var(--pgm); color: #fff; font-size: calc(12px * var(--zm)); } .tg { margin: calc(10px * var(--zm)) 0; padding: calc(12px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(12px * var(--zm)); border: 2px solid var(--jantar); background: color-mix(in srgb, var(--jantar) 8%, var(--grafit)); display: flex; flex-direction: column; gap: calc(10px * var(--zm)); } .tg-gl { font-size: calc(13px * var(--zm)); letter-spacing: .06em; text-transform: uppercase; color: var(--jantar); font-weight: 700; } .tg-kader { display: flex; flex-direction: column; gap: calc(10px * var(--zm)); } .tg-kader.moj .tg-k { font-size: calc(20px * var(--zm)); } .tg-moj { padding: 2px calc(8px * var(--zm)); border-radius: calc(999px * var(--zm)); background: var(--jantar); color: var(--noc); font-size: calc(13px * var(--zm)); font-weight: 800; } .tg-gumbi { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(150px * var(--zm)), 1fr)); gap: calc(10px * var(--zm)); } .tg-gumbi .gumb.ogromen { min-height: calc(68px * var(--zm)); font-size: calc(22px * var(--zm)); font-weight: 800; } .tg-ok.izbran { background: var(--pvw); color: var(--noc); border-color: var(--pvw); } .tg-slab.izbran { background: var(--pgm); color: #fff; border-color: var(--pgm); } .tg-bolje.izbran { background: var(--jantar); color: var(--noc); border-color: var(--jantar); } .tg-razlogi { display: flex; flex-wrap: wrap; gap: calc(6px * var(--zm)); } .tg-razlogi .izb { min-height: calc(42px * var(--zm)); font-size: calc(16px * var(--zm)); } .tg-drugi { display: flex; flex-direction: column; gap: calc(6px * var(--zm)); border-top: 1px solid var(--crta); padding-top: calc(8px * var(--zm)); } .tg-vr { display: flex; align-items: center; gap: calc(8px * var(--zm)); justify-content: space-between; flex-wrap: wrap; font-size: calc(15px * var(--zm)); } .tg-vr .gumb { min-height: calc(44px * var(--zm)); } .tg-vr .gumb.izbran { background: var(--jantar); color: var(--noc); } .kr-kam-orodja { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); margin-bottom: calc(8px * var(--zm)); font-size: calc(13px * var(--zm)); } .kr-pst-ozadje { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(5, 7, 9, .66); padding: calc(16px * var(--zm)); } .kr-pst { width: min(calc(760px * var(--zm)), 100%); max-height: calc(100vh - calc(32px * var(--zm))); overflow: auto; background: var(--grafit); border: 1px solid var(--rob); border-radius: calc(12px * var(--zm)); padding: calc(14px * var(--zm)) calc(16px * var(--zm)); display: flex; flex-direction: column; gap: calc(10px * var(--zm)); } .kr-pst-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(220px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .kr-pst-k { display: flex; align-items: stretch; gap: calc(6px * var(--zm)); padding: calc(6px * var(--zm)); border-radius: calc(10px * var(--zm)); border: 1px solid var(--crta); } .kr-pst-k.ima { border-color: var(--rob); } .kr-pst-tap { flex: 1 1 auto; display: flex; align-items: center; gap: calc(8px * var(--zm)); background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: calc(48px * var(--zm)); } .kr-pst-tap small { display: block; color: var(--siva); font-size: calc(12px * var(--zm)); } .kr-pst-k label { display: flex; flex-direction: column; font-size: calc(11px * var(--zm)); color: var(--siva); } .kr-pst-k input { width: calc(54px * var(--zm)); min-height: calc(36px * var(--zm)); border-radius: calc(6px * var(--zm)); border: 1px solid var(--rob); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(18px * var(--zm)); font-weight: 800; text-align: center; } .kr-pst-st { margin: 0; font-size: calc(14px * var(--zm)); color: var(--jantar); } .kr-pst-st.ok { color: var(--pvw); } .kr-pst .kr-vrsta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); } .tg-dobil { padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--pvw); color: var(--noc); font-size: calc(18px * var(--zm)); font-weight: 700; } /* ZEV-REZIJA-V84: pas pregleda je na tablici takoj pod glavo, da je gumb pri roki */ .tab:has(> .tg) { height: auto; min-height: 100dvh; grid-template-rows: auto auto auto minmax(calc(260px * var(--zm)), 1fr) auto; grid-template-areas: 'glava glava' 'gen gen' 'bus bus' 'zdaj desno' 'cas cas'; } .tab > .tg { grid-area: gen; margin: 0; } @media (max-width: 900px) and (orientation: portrait) { .tab:has(> .tg) { grid-template-rows: auto auto auto auto auto auto; grid-template-areas: 'glava' 'gen' 'bus' 'zdaj' 'desno' 'cas'; } } /* ── ZEV-REZIJA-V85: konzola tajnice režije ── */ body.tj-stran { overflow: hidden; } .tj { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(calc(320px * var(--zm)), 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr); grid-template-areas: 'glava glava' 'zdaj zdaj' 'kaz kaz' 'cas cas' 'delo delo'; gap: calc(10px * var(--zm)); padding: calc(12px * var(--zm)) calc(16px * var(--zm)) calc(12px * var(--zm)); box-sizing: border-box; } .tj-glava { grid-area: glava; display: flex; align-items: center; gap: calc(16px * var(--zm)); flex-wrap: wrap; } .tj-vloga { display: flex; flex-direction: column; } .tj-vloga b { font-size: calc(24px * var(--zm)); font-weight: 800; letter-spacing: .01em; } .tj-vloga span { color: var(--siva); font-size: calc(14px * var(--zm)); } .tj-bralec { flex: 1 1 auto; display: flex; align-items: center; gap: calc(6px * var(--zm)); font-size: calc(15px * var(--zm)); color: var(--siva); } .tj-pika { width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: var(--pgm); display: inline-block; } .tj-pika.ok { background: var(--pvw); } .tj-glava-d { display: flex; align-items: center; gap: calc(8px * var(--zm)); } .tj-zaklep { padding: calc(4px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(999px * var(--zm)); background: color-mix(in srgb, var(--pgm) 22%, transparent); border: 1px solid var(--pgm); color: #FFB4B4; font-weight: 700; font-size: calc(14px * var(--zm)); } .tj-zdaj { grid-area: zdaj; display: grid; grid-template-columns: auto minmax(0, 1.2fr) auto minmax(0, 1fr); gap: calc(12px * var(--zm)); align-items: stretch; } .tj-takt, .tj-cez { display: flex; flex-direction: column; justify-content: center; padding: calc(8px * var(--zm)) calc(16px * var(--zm)); border-radius: calc(10px * var(--zm)); background: #111922; min-width: calc(110px * var(--zm)); } .tj-takt small, .tj-cez small, .tj-kk small { color: var(--siva); font-size: calc(12px * var(--zm)); text-transform: uppercase; letter-spacing: .07em; } .tj-takt b { font-size: calc(54px * var(--zm)); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--jantar); } .tj-takt span { font-size: calc(14px * var(--zm)); color: #C9D2DC; white-space: nowrap; } .tj-cez b { font-size: calc(40px * var(--zm)); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .tj-kk { padding: calc(8px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(10px * var(--zm)); background: #111922; border-left: calc(6px * var(--zm)) solid var(--crta); min-width: 0; } .tj-kk.pgm { border-left-color: var(--pgm); box-shadow: inset 0 calc(-3px * var(--zm)) 0 var(--b); } .tj-kk.pvw { border-left-color: var(--pvw); } .tj-kk-v { display: flex; align-items: center; gap: calc(12px * var(--zm)); min-width: 0; margin-top: calc(4px * var(--zm)); } .tj-kk-v > div { display: flex; flex-direction: column; min-width: 0; } .tj-kk-v b { font-size: calc(19px * var(--zm)); } .tj-kk-v span { font-size: calc(16px * var(--zm)); color: #C9D2DC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tj-kk-v i { font-family: var(--serif); font-size: calc(14px * var(--zm)); color: var(--siva); } .tj-kaz { grid-area: kaz; display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(10px * var(--zm)); border: 1px solid var(--crta); } .tj-kaz label { font-size: calc(15px * var(--zm)); color: var(--siva); } .tj-kaz input { width: calc(96px * var(--zm)); min-height: calc(42px * var(--zm)); font: inherit; font-size: calc(24px * var(--zm)); font-weight: 800; text-align: center; border-radius: calc(8px * var(--zm)); border: 1px solid var(--rob); background: var(--noc); color: var(--papir); } .tj-cas { grid-area: cas; height: calc(96px * var(--zm)); } .tj-delo { grid-area: delo; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(calc(320px * var(--zm)), 1fr); gap: calc(12px * var(--zm)); min-height: 0; } .tj-kadri { display: flex; flex-direction: column; gap: calc(8px * var(--zm)); min-height: 0; } .tj-isci { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); align-items: center; } .tj-isci input { flex: 1 1 calc(260px * var(--zm)); min-height: calc(40px * var(--zm)); font: inherit; font-size: calc(16px * var(--zm)); padding: calc(4px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--rob); background: var(--noc); color: var(--papir); } .tj-fil { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)); } .tj-fil .izb { min-width: calc(38px * var(--zm)); min-height: calc(36px * var(--zm)); } .tj-fil .tj-fk { border-color: var(--b); color: var(--b); font-weight: 800; } .tj-fil .tj-fk.izbran { background: var(--b); color: var(--noc); } .tj-izb { min-height: calc(34px * var(--zm)); display: flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); } .tj-seznam { flex: 1 1 auto; min-height: 0; overflow: auto; border-radius: calc(10px * var(--zm)); border: 1px solid var(--crta); background: #0C131A; } .tj-v { display: grid; grid-template-columns: calc(22px * var(--zm)) calc(46px * var(--zm)) auto minmax(0, 1fr) auto calc(56px * var(--zm)); align-items: center; gap: calc(10px * var(--zm)); padding: calc(7px * var(--zm)) calc(12px * var(--zm)); border-bottom: 1px solid #16202A; cursor: pointer; font-size: calc(16px * var(--zm)); } .tj-v:hover { background: rgba(236, 229, 211, .04); } .tj-v.mimo { opacity: .45; } .tj-v.zdaj { background: color-mix(in srgb, var(--pgm) 14%, transparent); box-shadow: inset calc(4px * var(--zm)) 0 0 var(--pgm); } .tj-v.izbran { background: color-mix(in srgb, var(--jantar) 16%, transparent); } .tj-kv { color: var(--jantar); font-weight: 800; } .tj-n { font-variant-numeric: tabular-nums; } .tj-opis { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tj-opis i { font-family: var(--serif); color: var(--siva); } .tj-t, .tj-c { color: #C9D2DC; font-size: calc(14px * var(--zm)); white-space: nowrap; font-variant-numeric: tabular-nums; } .tj-c { text-align: right; } .tj-desno { display: flex; flex-direction: column; gap: calc(12px * var(--zm)); min-height: 0; overflow: auto; } .tj-menjava, .tj-dn { padding: calc(12px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(10px * var(--zm)); border: 1px solid var(--crta); background: #111922; } .tj-menjava h3, .tj-dn h3 { margin: 0 0 calc(8px * var(--zm)); font-size: calc(17px * var(--zm)); } .tj-koraki { margin: 0 0 calc(10px * var(--zm)); padding-left: calc(20px * var(--zm)); display: grid; gap: calc(4px * var(--zm)); font-size: calc(14px * var(--zm)); color: #C9D2DC; } .tj-m-gumb { width: 100%; min-height: calc(54px * var(--zm)); font-size: calc(20px * var(--zm)); } .tj-opoz { color: #FFB4B4; font-size: calc(14px * var(--zm)); } .tj-z { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--zm)); padding: calc(6px * var(--zm)) 0; border-bottom: 1px solid #16202A; font-size: calc(14px * var(--zm)); } .tj-z.razv { opacity: .5; } .tj-z-cas { color: var(--siva); font-variant-numeric: tabular-nums; } .tj-z-o { flex: 1 1 calc(160px * var(--zm)); display: flex; flex-direction: column; } .tj-z-o small { color: var(--siva); } .tj-m-ozadje { position: fixed; inset: 0; z-index: 80; background: rgba(6, 10, 14, .72); display: flex; align-items: center; justify-content: center; padding: calc(16px * var(--zm)); } .tj-m-ozadje[hidden] { display: none; } .tj-m { width: min(calc(760px * var(--zm)), 100%); max-height: calc(100dvh - calc(32px * var(--zm))); overflow: auto; padding: calc(22px * var(--zm)) calc(24px * var(--zm)); border-radius: calc(16px * var(--zm)); background: var(--grafit); border: 2px solid var(--jantar); box-shadow: 0 calc(24px * var(--zm)) calc(60px * var(--zm)) rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: calc(14px * var(--zm)); } .tj-m h2 { margin: 0; font-size: calc(30px * var(--zm)); font-weight: 800; } .tj-m h2.ok { color: var(--pvw); font-size: calc(24px * var(--zm)); } .tj-m-kam { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--zm)), 1fr)); gap: calc(10px * var(--zm)); } .tj-m-k { display: flex; align-items: center; gap: calc(10px * var(--zm)); min-height: calc(64px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(12px * var(--zm)); border: 2px solid var(--b); background: color-mix(in srgb, var(--b) 12%, var(--noc)); color: var(--papir); font: inherit; cursor: pointer; text-align: left; } .tj-m-k b { display: inline-grid; place-items: center; min-width: calc(42px * var(--zm)); height: calc(42px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--b); color: var(--noc); font-size: calc(26px * var(--zm)); font-weight: 800; } .tj-m-k span { font-size: calc(15px * var(--zm)); } .tj-m-k:focus-visible { outline: calc(3px * var(--zm)) solid var(--papir); outline-offset: 2px; } .tj-m-kader { display: flex; align-items: center; gap: calc(14px * var(--zm)); padding: calc(12px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(12px * var(--zm)); background: #111922; border-left: calc(6px * var(--zm)) solid var(--b, var(--jantar)); } .tj-m-kader > div { display: flex; flex-direction: column; gap: 2px; } .tj-m-kader b { font-size: calc(22px * var(--zm)); } .tj-m-kader span { font-size: calc(17px * var(--zm)); color: #C9D2DC; } .tj-m-kader small { color: var(--siva); font-size: calc(14px * var(--zm)); } .tj-m-po { display: grid; gap: calc(8px * var(--zm)); } .tj-m-po .gumb { min-height: calc(50px * var(--zm)); font-size: calc(17px * var(--zm)); justify-content: flex-start; text-align: left; } .tj-m-po kbd, .tj-koraki kbd, .tj-m-nog kbd { display: inline-block; min-width: calc(22px * var(--zm)); padding: 1px calc(6px * var(--zm)); margin-right: calc(6px * var(--zm)); border-radius: calc(5px * var(--zm)); background: var(--papir); color: var(--noc); font-weight: 800; font-size: calc(14px * var(--zm)); text-align: center; } .tj-m-nog { margin: 0; color: var(--siva); font-size: calc(14px * var(--zm)); } .tj-pan { display: flex; flex-direction: column; gap: calc(6px * var(--zm)); } .tj-pan-s { display: flex; align-items: center; gap: calc(8px * var(--zm)); font-weight: 700; } @media (max-width: 1000px) { body.tj-stran { overflow: auto; } .tj { height: auto; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'glava' 'zdaj' 'kaz' 'cas' 'delo'; } .tj-zdaj { grid-template-columns: auto auto; } .tj-kk { grid-column: 1 / -1; } .tj-delo { grid-template-columns: minmax(0, 1fr); } .tj-seznam { max-height: 60vh; } .tj-v { grid-template-columns: calc(18px * var(--zm)) calc(40px * var(--zm)) auto minmax(0, 1fr) auto; } .tj-c { display: none; } } .tj-cez.stoji b { color: var(--siva); } .tj-m-k.sosed { opacity: .72; border-style: dashed; } .tj-m-k small { display: block; font-size: calc(12px * var(--zm)); color: var(--jantar); } .tj-m-opoz { margin: 0; padding: calc(8px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--jantar); color: var(--jantar); font-size: calc(15px * var(--zm)); } .tj-znacka { height: calc(44px * var(--zm)); width: auto; border-radius: calc(8px * var(--zm)); } /* ── ZEV-REZIJA-V89: vlečenje kazalca v Kreativi, stran Tajnica režije z vajami ── */ .kr-igla-ro { position: absolute; top: -2px; left: calc(-9px * var(--zm)); width: calc(20px * var(--zm)); height: calc(22px * var(--zm)); pointer-events: auto; cursor: ew-resize; border-radius: calc(4px * var(--zm)); } .kr-igla-ro::after { content: ''; position: absolute; left: calc(3px * var(--zm)); top: 2px; width: calc(14px * var(--zm)); height: calc(12px * var(--zm)); border-radius: calc(3px * var(--zm)); background: var(--jantar); box-shadow: 0 0 0 2px rgba(14, 20, 27, .6); } .kr-igla::before { display: none; } #kr-sledi .kr-s-takti .kr-pas, #kr-sledi .kr-s-odseki .kr-pas, #kr-sledi .kr-s-zvok .kr-pas { cursor: ew-resize; } body.kr-vlece-iglo, body.kr-vlece-iglo * { cursor: ew-resize !important; user-select: none; } .tv-fokus { display: grid; gap: calc(10px * var(--zm)); margin: calc(14px * var(--zm)) 0; } .tv-f { display: grid; grid-template-columns: calc(42px * var(--zm)) minmax(0, 1fr); gap: calc(12px * var(--zm)); align-items: start; padding: calc(12px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(12px * var(--zm)); background: rgba(255, 154, 92, .07); border: 1px solid rgba(255, 154, 92, .35); } .tv-f-st { display: grid; place-items: center; width: calc(38px * var(--zm)); height: calc(38px * var(--zm)); border-radius: 50%; background: #FF9A5C; color: #0E141B; font-size: calc(20px * var(--zm)); } .tv-f p { margin: calc(4px * var(--zm)) 0 0; } .tv-f kbd, .tv-okno kbd { display: inline-block; min-width: calc(20px * var(--zm)); padding: 0 calc(6px * var(--zm)); border-radius: calc(5px * var(--zm)); background: #ECE5D3; color: #0E141B; font-weight: 800; font-size: .85em; text-align: center; } .tv-tab-okvir { overflow-x: auto; } .tv-tab { width: 100%; border-collapse: collapse; font-size: calc(15px * var(--zm)); } .tv-tab th { text-align: left; font-weight: 600; opacity: .7; padding: calc(6px * var(--zm)) calc(8px * var(--zm)); border-bottom: 1px solid rgba(154, 167, 180, .3); } .tv-tab td { padding: calc(8px * var(--zm)); border-bottom: 1px solid rgba(154, 167, 180, .15); vertical-align: top; } .tv-tab td small { display: block; opacity: .7; } .tv-tab .tv-kam { white-space: nowrap; } .tv-tab .tv-kam .kam-st { margin-right: calc(3px * var(--zm)); } .tv-prazna { opacity: .5; } .tv-gost { display: inline-block; width: calc(60px * var(--zm)); height: calc(8px * var(--zm)); margin-right: calc(8px * var(--zm)); border-radius: calc(4px * var(--zm)); background: linear-gradient(90deg, #FF9A5C var(--g), rgba(154, 167, 180, .25) var(--g)); vertical-align: middle; } .tv-bralec { display: grid; gap: calc(8px * var(--zm)); padding-left: calc(22px * var(--zm)); } .tv-bralec li b { display: block; } .tv-bralec li span { opacity: .85; } .tv-kartice { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(210px * var(--zm)), 1fr)); gap: calc(10px * var(--zm)); margin: calc(12px * var(--zm)) 0; } .tv-kartica { display: grid; grid-template-columns: calc(36px * var(--zm)) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: calc(10px * var(--zm)); text-align: left; padding: calc(12px * var(--zm)); border-radius: calc(12px * var(--zm)); border: 1px solid rgba(154, 167, 180, .35); background: rgba(255, 255, 255, .03); color: inherit; font: inherit; cursor: pointer; } .tv-kartica:hover { border-color: #FF9A5C; } .tv-k-st { grid-row: 1 / 4; display: grid; place-items: center; width: calc(34px * var(--zm)); height: calc(34px * var(--zm)); border-radius: calc(8px * var(--zm)); background: #FF9A5C; color: #0E141B; font-weight: 800; } .tv-kartica span:not(.tv-k-st) { opacity: .75; font-size: calc(14px * var(--zm)); } .tv-k-rez { font-style: normal; font-size: calc(14px * var(--zm)); } .tv-k-rez.ok { color: #30C77B; } .tv-k-rez.ne { color: #E5484D; } .tv-sim { margin-top: calc(12px * var(--zm)); padding: calc(16px * var(--zm)) calc(18px * var(--zm)); border-radius: calc(14px * var(--zm)); border: 2px solid #FF9A5C; background: #111922; color: #ECE5D3; display: flex; flex-direction: column; gap: calc(12px * var(--zm)); } .tv-glava { display: flex; align-items: center; gap: calc(12px * var(--zm)); } .tv-glava b { flex: 1 1 auto; font-size: calc(18px * var(--zm)); } .tv-ura { font-variant-numeric: tabular-nums; font-size: calc(22px * var(--zm)); font-weight: 800; color: #FF9A5C; } .tv-nal { margin: 0; font-size: calc(18px * var(--zm)); line-height: 1.45; } .tv-zdaj { display: flex; flex-wrap: wrap; gap: calc(18px * var(--zm)); align-items: center; } .tv-zdaj span { display: flex; align-items: center; gap: calc(6px * var(--zm)); } .tv-zdaj small { opacity: .7; text-transform: uppercase; font-size: calc(11px * var(--zm)); letter-spacing: .06em; margin-right: calc(4px * var(--zm)); } .tv-zdaj b { font-size: calc(20px * var(--zm)); } .tv-seznam { border-radius: calc(10px * var(--zm)); border: 1px solid rgba(154, 167, 180, .3); overflow: hidden; } .tv-v { display: grid; grid-template-columns: calc(20px * var(--zm)) calc(48px * var(--zm)) auto minmax(0, 1fr) auto; gap: calc(10px * var(--zm)); align-items: center; padding: calc(7px * var(--zm)) calc(12px * var(--zm)); border-bottom: 1px solid rgba(154, 167, 180, .12); cursor: pointer; } .tv-v.mimo { opacity: .45; } .tv-v.zdaj { box-shadow: inset calc(4px * var(--zm)) 0 0 #E5484D; background: rgba(229, 72, 77, .12); } .tv-v.izbran { background: rgba(255, 154, 92, .18); } .tv-kv { color: #FF9A5C; font-weight: 800; } .tv-v-o { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-v-t { opacity: .75; font-size: calc(14px * var(--zm)); } .tv-okno { padding: calc(10px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(10px * var(--zm)); background: rgba(255, 154, 92, .12); font-size: calc(18px * var(--zm)); } .tv-okno.tiho { background: none; font-size: calc(14px * var(--zm)); opacity: .75; } .tv-vnos { color: #FF9A5C; font-variant-numeric: tabular-nums; } .tv-odz { padding: calc(10px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(10px * var(--zm)); font-size: calc(17px * var(--zm)); } .tv-odz.ok { background: rgba(48, 199, 123, .15); border: 1px solid #30C77B; } .tv-odz.ne { background: rgba(229, 72, 77, .12); border: 1px solid #E5484D; } .tv-odz small { display: block; margin-top: calc(4px * var(--zm)); opacity: .85; font-size: calc(15px * var(--zm)); } .tv-g { display: flex; flex-wrap: wrap; gap: calc(8px * var(--zm)); } /* ── ZEV-REZIJA-V91: zavihek Nadzor ── */ .nz { display: flex; flex-direction: column; gap: calc(14px * var(--zm)); padding: calc(4px * var(--zm)) 0 calc(20px * var(--zm)); } .nz-glava { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10px * var(--zm)); } .nz-glava > div { display: flex; flex-direction: column; gap: 2px; padding: calc(10px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(10px * var(--zm)); background: #111922; border: 1px solid var(--crta); min-width: 0; } .nz-glava small, .nz-kam-k small, .nz-kam-nal small, .nz-kam-klic small { color: var(--siva); font-size: calc(11px * var(--zm)); text-transform: uppercase; letter-spacing: .07em; } .nz-glava b { font-size: calc(34px * var(--zm)); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .nz-g-takt b { color: var(--jantar); } .nz-glava span { font-size: calc(14px * var(--zm)); color: #C9D2DC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nz-g-pgm { flex-direction: row !important; flex-wrap: wrap; align-items: center; column-gap: calc(10px * var(--zm)) !important; } .nz-g-pgm small { width: 100%; } .nz-vrh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: calc(12px * var(--zm)); } .nz-p { padding: calc(12px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(12px * var(--zm)); background: #111922; border: 1px solid var(--crta); display: flex; flex-direction: column; gap: calc(8px * var(--zm)); min-width: 0; } .nz-p-gl { display: flex; align-items: center; gap: calc(10px * var(--zm)); } .nz-p-gl b { font-size: calc(18px * var(--zm)); } .nz-znacka { height: calc(34px * var(--zm)); width: auto; border-radius: calc(6px * var(--zm)); } .nz-oseba { display: flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(15px * var(--zm)); } .nz-oseba span { color: var(--siva); font-size: calc(13px * var(--zm)); } .nz-pika { display: inline-block; width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: #5D6B78; flex: 0 0 auto; } .nz-pika.ok { background: var(--pvw); } .nz-pika.star { background: var(--jantar); } .nz-pika.ne { background: var(--pgm); } .nz-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(4px * var(--zm)) calc(12px * var(--zm)); margin: 0; font-size: calc(14px * var(--zm)); } .nz-dl dt { color: var(--siva); } .nz-dl dd { margin: 0; } .nz-stoji { color: var(--jantar); font-weight: 700; } .nz-opoz { margin: 0; font-size: calc(14px * var(--zm)); color: var(--jantar); } .nz-nas { margin: calc(6px * var(--zm)) 0 0; font-size: calc(16px * var(--zm)); color: var(--siva); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .nz-kamere { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(240px * var(--zm)), 1fr)); gap: calc(10px * var(--zm)); } .nz-kam { display: flex; flex-direction: column; gap: calc(6px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(12px * var(--zm)); background: #111922; border: 1px solid var(--crta); border-top: calc(5px * var(--zm)) solid var(--b); cursor: pointer; min-width: 0; } .nz-kam:hover, .nz-kam:focus-visible { border-color: var(--b); outline: none; } .nz-kam.zivo { box-shadow: 0 0 0 2px var(--pgm); } .nz-kam.pripravi { box-shadow: 0 0 0 2px var(--pvw); } .nz-kam.brez { opacity: .75; } .nz-kam-gl { display: flex; align-items: center; gap: calc(10px * var(--zm)); min-width: 0; } .nz-kam-gl > div { display: flex; flex-direction: column; min-width: 0; } .nz-kam-gl b { font-size: calc(16px * var(--zm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nz-kam-gl span:not(.kam-st) { display: flex; align-items: center; gap: calc(6px * var(--zm)); font-size: calc(13px * var(--zm)); color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nz-kam-st { display: flex; justify-content: space-between; align-items: baseline; padding: calc(6px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); font-size: calc(18px * var(--zm)); font-weight: 800; letter-spacing: .04em; background: rgba(154, 167, 180, .12); color: #C9D2DC; } .nz-kam-st.zivo { background: var(--pgm); color: #fff; } .nz-kam-st.pripravi { background: color-mix(in srgb, var(--pvw) 28%, transparent); color: #CFF5E1; } .nz-kam-st b { font-size: calc(22px * var(--zm)); font-variant-numeric: tabular-nums; } .nz-kam-k, .nz-kam-nal, .nz-kam-klic { margin: 0; font-size: calc(14px * var(--zm)); line-height: 1.35; display: flex; flex-direction: column; } .nz-kam-k i { font-family: var(--serif); color: var(--siva); } .nz-kam-nal { padding: calc(6px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--jantar); color: var(--jantar); } .nz-kam-klic { padding: calc(6px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--pgm); } .nz-okno { position: fixed; inset: 0; z-index: 70; background: rgba(6, 10, 14, .7); display: flex; align-items: center; justify-content: center; padding: calc(16px * var(--zm)); } .nz-okno[hidden] { display: none; } .nz-o { width: min(calc(820px * var(--zm)), 100%); max-height: calc(100dvh - calc(32px * var(--zm))); overflow: auto; padding: calc(16px * var(--zm)) calc(18px * var(--zm)); border-radius: calc(14px * var(--zm)); background: var(--grafit); border: 1px solid var(--rob); display: flex; flex-direction: column; gap: calc(10px * var(--zm)); } .nz-o-gl { display: flex; align-items: center; gap: calc(10px * var(--zm)); } .nz-o-gl b { font-size: calc(20px * var(--zm)); } .nz-o-gl .tiho { flex: 1 1 auto; } .nz-o-v { display: grid; grid-template-columns: calc(50px * var(--zm)) calc(110px * var(--zm)) minmax(0, 1fr) calc(56px * var(--zm)); gap: calc(10px * var(--zm)); padding: calc(6px * var(--zm)) calc(8px * var(--zm)); border-bottom: 1px solid #16202A; font-size: calc(15px * var(--zm)); } .nz-o-v.mimo { opacity: .45; } .nz-o-v.zdaj { background: color-mix(in srgb, var(--pgm) 16%, transparent); } .nz-o-v i { font-family: var(--serif); color: var(--siva); } @media (max-width: 900px) { .nz-glava { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nz-vrh { grid-template-columns: minmax(0, 1fr); } } .nz-kam.nacrt { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pgm) 60%, transparent); } .nz-kam-st.nacrt { background: color-mix(in srgb, var(--pgm) 22%, transparent); color: #FFD0D0; font-size: calc(15px * var(--zm)); } /* ── ZEV-REZIJA-V92: tloris v Kreativi, besedilo v kadrih, višina sledi, drsnik povečave ── */ .krtl { display: flex; flex-direction: column; gap: calc(6px * var(--zm)); height: 100%; min-height: 0; } .krtl-orodja { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--zm)); } .krtl-orodja .tiho { font-size: calc(12px * var(--zm)); margin-left: calc(6px * var(--zm)); } .krtl-svg { flex: 1 1 auto; width: 100%; min-height: calc(260px * var(--zm)); background: #000; border-radius: calc(8px * var(--zm)); touch-action: none; cursor: grab; user-select: none; } .krtl-svg.vlecem { cursor: grabbing; } .krtl-slika { opacity: var(--risba, .85); } .krtl-slika.caka { opacity: 0; } .krtl-svg.kr-ima-sub #krtl-zas [data-el]:not(.kr-v-pgm):not(.kr-v-pvw) { opacity: .45; } #krtl-zas .kr-v-pgm { filter: drop-shadow(0 0 .25px #fff) drop-shadow(0 0 .6px var(--pgm)); } #krtl-zas .kr-v-pvw { filter: drop-shadow(0 0 .5px var(--pvw)); } #krtl-zas [data-el] { cursor: pointer; } .krtl-st { fill: var(--b); fill-opacity: .2; stroke: var(--b); stroke-width: 2.5; stroke-opacity: .9; transition: d .12s linear; } .krtl-st.pvw { fill-opacity: .07; stroke-dasharray: 10 8; stroke-width: 2; } .krtl-st.mir { fill-opacity: .04; stroke-opacity: .25; stroke-width: 1; } .krtl-kam { cursor: pointer; } .krtl-kam.mir { opacity: .5; } .krtl-kam:hover { opacity: 1; } .krtl-telo { fill: var(--b); stroke: #0B1117; stroke-width: 3; } .krtl-st-t { fill: #0B1117; font: 800 calc(22px * var(--zm)) var(--sans); text-anchor: middle; pointer-events: none; } .krtl-ime { fill: #D5DCE3; font: 600 calc(15px * var(--zm)) var(--sans); text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: calc(4px * var(--zm)); pointer-events: none; } .krtl-smer { stroke: var(--b); stroke-width: 4; stroke-linecap: round; } .krtl-obroc { fill: none; stroke-width: 5; } .krtl-obroc.pgm { stroke: var(--pgm); } .krtl-obroc.pvw { stroke: var(--pvw); stroke-width: 4; } .krtl-napredek { fill: none; stroke: var(--b); stroke-width: 4; opacity: .9; } .krtl-gib { fill: var(--b); font: 800 calc(17px * var(--zm)) var(--sans); paint-order: stroke; stroke: #000; stroke-width: calc(4px * var(--zm)); } .krtl-oznaka { font: 800 calc(17px * var(--zm)) var(--sans); text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: calc(4px * var(--zm)); } .krtl-oznaka.pgm { fill: #FF8A8E; } .krtl-oznaka.pvw { fill: #7FE3B0; } .krtl-palica { stroke: var(--b); stroke-width: 7; stroke-linecap: round; opacity: .9; } .krtl-utez { fill: #3A4652; stroke: var(--b); stroke-width: 2; } .krtl-podst { fill: #0B1117; stroke: var(--b); stroke-width: 3; } .krtl-vis-o { fill: #1A242E; stroke: var(--b); stroke-width: 1; } .krtl-vis { fill: var(--b); } .krtl-roka.mir, .krtl-tir.mir { opacity: .5; } .krtl-tirnica { stroke: #8A96A3; stroke-width: 2.5; } .krtl-prag { stroke: #4A5663; stroke-width: 3; } .krtl-vozicek { fill: #1A242E; stroke: var(--b); stroke-width: 3; } .kr-kd > :not(.kr-rob):not(.kr-crka-k):not(.kr-kd-ab) { max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .kr-kd { padding-right: calc(22px * var(--zm)); } .kr-s-kadri .kr-pas { height: var(--kr-kd-h, calc(64px * var(--zm))); } .kr-vrsta-s .kr-oz { position: relative; } .kr-vis-rocaj { position: absolute; left: calc(6px * var(--zm)); right: calc(6px * var(--zm)); bottom: calc(-3px * var(--zm)); height: calc(7px * var(--zm)); cursor: ns-resize; border-radius: calc(4px * var(--zm)); background: repeating-linear-gradient(90deg, #5D6B78 0 calc(6px * var(--zm)), transparent calc(6px * var(--zm)) calc(10px * var(--zm))); opacity: .45; z-index: 3; } .kr-vis-rocaj:hover { opacity: 1; } body.kr-vlece-vis, body.kr-vlece-vis * { cursor: ns-resize !important; user-select: none; } .kr-zoom-dr { width: calc(120px * var(--zm)); accent-color: var(--jantar); vertical-align: middle; margin: 0 calc(6px * var(--zm)); } .kr-s-prestavljanje .kr-lane { height: var(--kr-ln-h, calc(18px * var(--zm))); } .kr-s-prestavljanje .kr-lane .zi { height: calc(var(--kr-ln-h, calc(18px * var(--zm))) - calc(4px * var(--zm))); line-height: calc(var(--kr-ln-h, calc(18px * var(--zm))) - calc(4px * var(--zm))); } .kr-s-prestavljanje .kr-oz { justify-content: flex-start; } .kr-pl-oder > .kr-pl-telo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .krtl-ovoj { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(6px * var(--zm)); } .krtl-ovoj .krtl { flex: 1 1 auto; min-height: calc(240px * var(--zm)); } .krtl-ovoj .krtl-svg { min-height: calc(200px * var(--zm)); } .krtl-upo { flex: 0 0 auto; max-height: 45%; overflow: auto; border-top: 1px solid var(--crta); padding-top: calc(6px * var(--zm)); } .krtl-svg { height: 100%; max-height: calc(100dvh - calc(230px * var(--zm))); } /* ── ZEV-REZIJA-V93: silhuete kamer na tlorisu, roka na dveh zglobih, blisk ob rezu ── */ .kt-telo { fill: var(--b); stroke: #0B1117; stroke-width: 2.5; } .kt-obj { fill: #1E2A35; stroke: var(--b); stroke-width: 2; } .kt-isk { fill: #0B1117; stroke: var(--b); stroke-width: 1.5; } .kt-stat line { stroke: #8A96A3; stroke-width: 3.5; stroke-linecap: round; } .kt-voz { fill: #202B36; stroke: var(--b); stroke-width: 2.5; } .kt-kolo { fill: #0B1117; stroke: #8A96A3; stroke-width: 1.5; } .kt-snem { fill: #2A3642; stroke: #9AA7B4; stroke-width: 2; } .kt-glava { fill: #C9B79C; stroke: #0B1117; stroke-width: 1.5; } .kt-roka { fill: none; stroke: #9AA7B4; stroke-width: 4; stroke-linecap: round; } .kt-sani { fill: #202B36; stroke: var(--b); stroke-width: 2; } .kt.mir { opacity: .72; } .krtl-zadetek { fill: transparent; } .krtl-znacka { fill: var(--b); stroke: #0B1117; stroke-width: 2.5; } .krtl-kam .krtl-st-t { font-size: calc(15px * var(--zm)); } .krtl-palica.d { stroke-width: 5.5; } .krtl-palica.t { stroke-width: 5; opacity: .6; } .krtl-zglob { fill: #0B1117; stroke: var(--b); stroke-width: 3; } .krtl-podst { fill: #202B36; stroke: var(--b); stroke-width: 3; } .krtl-lok { fill: none; stroke: var(--b); stroke-width: 1.5; stroke-dasharray: 4 7; opacity: .6; } .krtl-blisk { fill: none; stroke: #fff; stroke-width: 5; } .krtl-odstej { fill: none; stroke: var(--pvw); stroke-width: 4; opacity: .9; } /* ── ZEV-REZIJA-V94: 3D oder ── */ .kr-pl-oder3d > .kr-pl-telo { flex: 1 1 auto; min-height: 0; } .o3-box, .o3 { height: 100%; display: flex; flex-direction: column; gap: calc(6px * var(--zm)); min-height: 0; } .o3-orodja { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--zm)); } .o3-kk { display: inline-flex; gap: calc(3px * var(--zm)); margin: 0 calc(6px * var(--zm)); } .o3-k { border-color: var(--b); color: var(--b); font-weight: 800; min-width: calc(32px * var(--zm)); } .o3-k.izbran { background: var(--b); color: var(--noc); } .o3-st { font-size: calc(13px * var(--zm)); } .o3-platno { position: relative; flex: 1 1 auto; min-height: calc(180px * var(--zm)); background: #000; border-radius: calc(8px * var(--zm)); overflow: hidden; } .o3-platno canvas { display: block; touch-action: none; } .o3-nad { position: absolute; inset: 0; pointer-events: none; } .o3-stanje { position: absolute; inset: 0; display: grid; place-items: center; color: var(--siva); font-size: calc(15px * var(--zm)); text-align: center; padding: calc(20px * var(--zm)); } .o3-napis { position: absolute; left: calc(10px * var(--zm)); bottom: calc(10px * var(--zm)); right: calc(10px * var(--zm)); display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--zm)); padding: calc(6px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: rgba(6, 10, 14, .72); color: #E6EBF0; font-size: calc(14px * var(--zm)); border-left: calc(4px * var(--zm)) solid var(--b, var(--jantar)); } .o3-napis.pgm { border-left-color: var(--pgm); box-shadow: inset 0 0 0 2px rgba(229, 72, 77, .55); } .o3-c-st { display: inline-grid; place-items: center; min-width: calc(22px * var(--zm)); height: calc(22px * var(--zm)); border-radius: calc(5px * var(--zm)); background: var(--b); color: #0B1117; font-weight: 800; font-size: calc(13px * var(--zm)); } .o3-c-tag { padding: 1px calc(7px * var(--zm)); border-radius: calc(4px * var(--zm)); background: var(--pgm); color: #fff; font-size: calc(12px * var(--zm)); letter-spacing: .06em; } .o3-c-tag.pvw { background: var(--pvw); color: #0B1117; } .o3-napr { position: absolute; left: 0; right: 0; top: 0; height: calc(4px * var(--zm)); background: rgba(255, 255, 255, .08); } .o3-napr i { display: block; height: 100%; background: var(--pgm); } .o3-tretine { position: absolute; inset: 0; background-image: linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.18) calc(33.33% - .5px), rgba(255,255,255,.18) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.18) calc(66.66% - .5px), rgba(255,255,255,.18) calc(66.66% + .5px), transparent calc(66.66% + .5px)), linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.18) calc(33.33% - .5px), rgba(255,255,255,.18) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.18) calc(66.66% - .5px), rgba(255,255,255,.18) calc(66.66% + .5px), transparent calc(66.66% + .5px)); } .o3-celica { position: absolute; box-sizing: border-box; border: 2px solid #1a2129; display: flex; align-items: flex-end; gap: calc(5px * var(--zm)); padding: calc(5px * var(--zm)); } .o3-celica.pgm { border: calc(3px * var(--zm)) solid var(--pgm); } .o3-celica.pvw { border: calc(3px * var(--zm)) solid var(--pvw); } .o3-c-ime { font-size: calc(12px * var(--zm)); color: #E6EBF0; background: rgba(6, 10, 14, .7); padding: 1px calc(5px * var(--zm)); border-radius: calc(4px * var(--zm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - calc(90px * var(--zm))); } .o3-celica .o3-c-tag { position: absolute; top: calc(5px * var(--zm)); right: calc(5px * var(--zm)); } .o3-gibi { position: relative; } .o3-gibi summary { cursor: pointer; padding: calc(3px * var(--zm)) calc(10px * var(--zm)); border: 1px solid var(--rob); border-radius: calc(8px * var(--zm)); font-size: calc(13px * var(--zm)); list-style: none; } .o3-gibi[open] summary { background: var(--papir); color: var(--noc); } .o3-gibi-t { position: absolute; z-index: 5; top: calc(100% + calc(6px * var(--zm))); left: 0; width: calc(280px * var(--zm)); padding: calc(12px * var(--zm)); border-radius: calc(10px * var(--zm)); background: #111922; border: 1px solid var(--rob); box-shadow: 0 calc(12px * var(--zm)) calc(30px * var(--zm)) rgba(0,0,0,.5); display: grid; gap: calc(8px * var(--zm)); } .o3-gibi-t label { display: grid; grid-template-columns: calc(96px * var(--zm)) minmax(0, 1fr) calc(44px * var(--zm)); align-items: center; gap: calc(8px * var(--zm)); font-size: calc(13px * var(--zm)); } .o3-gibi-t label.stikalo { display: flex; } .o3-gibi-t input[type=range] { accent-color: var(--jantar); } .o3-gibi-t b { font-variant-numeric: tabular-nums; text-align: right; } /* ZEV-REZIJA-V109: zasluge za modele v 3D odru */ .o3-zasluge .o3-gibi-t { width: min(calc(380px * var(--zm)), 86vw); left: auto; right: 0; } .o3-zasluge p { margin: 0; font-size: calc(12px * var(--zm)); line-height: 1.5; color: var(--tiho, #aab); } /* ─── ZEV-REZIJA-V112: meni pod kadrom, alternative na progah kamer, stikalo desnega okna, predogled v 3D ─── */ .kr-kmeni { position: fixed; z-index: 62; display: flex; flex-direction: column; gap: calc(8px * var(--zm)); padding: calc(12px * var(--zm)) calc(14px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(12px * var(--zm)); background: var(--grafit); border: 1px solid var(--rob); border-top: calc(3px * var(--zm)) solid var(--b, var(--jantar)); box-shadow: 0 calc(16px * var(--zm)) calc(40px * var(--zm)) rgba(0, 0, 0, .55); max-height: calc(100vh - calc(16px * var(--zm))); overflow: auto; } .kr-kmeni[hidden] { display: none; } .kr-kmeni::before { content: ''; position: absolute; top: calc(-10px * var(--zm)); left: calc(var(--kx, calc(40px * var(--zm))) - calc(8px * var(--zm))); border: calc(8px * var(--zm)) solid transparent; border-bottom-color: var(--b, var(--jantar)); border-top: 0; } .kr-kmeni.gor { border-top: 1px solid var(--rob); border-bottom: calc(3px * var(--zm)) solid var(--b, var(--jantar)); } .kr-kmeni.gor::before { top: auto; bottom: calc(-10px * var(--zm)); border-bottom: 0; border-top: calc(8px * var(--zm)) solid var(--b, var(--jantar)); } .kr-kmeni .kr-km-x { position: absolute; top: calc(6px * var(--zm)); right: calc(8px * var(--zm)); } .kr-kmeni .kr-tu-gl { padding-right: calc(34px * var(--zm)); } .kr-kmeni .kr-tu-vr { grid-template-columns: calc(78px * var(--zm)) minmax(0, 1fr); } .kr-kmeni.alt .kr-tu-gl { padding-right: 0; } .kr-kmeni.alt .kr-tu-gl .kr-km-x { position: static; margin-left: auto; } .kr-alt-oz { font-size: calc(13px * var(--zm)); color: var(--siva); } .kr-alt-txt { min-height: calc(40px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--rob); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(15px * var(--zm)); padding: calc(3px * var(--zm)) calc(10px * var(--zm)); } .kr-alt-gumbi { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(12px * var(--zm)); } .kr-lane .kr-alt-cona { position: absolute; top: 0; height: calc(18px * var(--zm)); z-index: 0; cursor: copy; } .kr-lane .kr-alt-cona:hover, .kr-lane .kr-alt-cona.odprta { background: color-mix(in srgb, var(--b) 14%, transparent); } .kr-lane .kr-alt-cona.odprta { box-shadow: inset 0 0 0 1px var(--b); } .kr-lane .kr-nasl-cona { position: absolute; top: calc(3px * var(--zm)); height: calc(12px * var(--zm)); z-index: 0; background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--b) 35%, transparent) 0 1px, transparent 1px calc(5px * var(--zm))); opacity: .6; cursor: not-allowed; } .kr-lane .kr-nasl-cona span { position: absolute; left: calc(4px * var(--zm)); top: -1px; font-size: calc(10px * var(--zm)); line-height: calc(14px * var(--zm)); color: var(--siva); white-space: nowrap; } .kr-alt-chip, .kr-alt-plus { position: absolute; left: calc(3px * var(--zm)); top: 2px; z-index: 2; height: calc(14px * var(--zm)); max-width: calc(100% - calc(6px * var(--zm))); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(11px * var(--zm)); line-height: calc(14px * var(--zm)); padding: 0 calc(5px * var(--zm)); border-radius: calc(3px * var(--zm)); cursor: pointer; } .kr-alt-chip { background: rgba(14, 20, 27, .9); color: var(--papir); box-shadow: inset 0 0 0 1px var(--b); font-weight: 600; } .kr-alt-plus { color: var(--siva); background: rgba(14, 20, 27, .8); opacity: 0; transition: opacity .12s; } .kr-lane .kr-alt-cona:hover .kr-alt-plus, .kr-lane .kr-alt-cona.odprta .kr-alt-plus { opacity: 1; } .kr-lane .kr-gap { pointer-events: none; } .kr-desno-sw { display: inline-flex; align-items: center; gap: calc(4px * var(--zm)); flex-wrap: nowrap; flex: 0 0 auto; } .kr-desno-sw .izb { min-height: calc(34px * var(--zm)); } .kr-sw-gumb { display: inline-flex; align-items: center; gap: calc(7px * var(--zm)); min-height: calc(34px * var(--zm)); padding: 0 calc(10px * var(--zm)) 0 calc(6px * var(--zm)); border-radius: calc(17px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); color: var(--siva); font: inherit; font-size: calc(13px * var(--zm)); cursor: pointer; } .kr-sw-gumb i { position: relative; width: calc(30px * var(--zm)); height: calc(18px * var(--zm)); border-radius: calc(9px * var(--zm)); background: var(--crta); } .kr-sw-gumb i::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(14px * var(--zm)); height: calc(14px * var(--zm)); border-radius: 50%; background: var(--noc); transition: left .15s; } .kr-sw-gumb.vkl { color: var(--papir); border-color: var(--jantar); } .kr-sw-gumb.vkl i { background: var(--jantar); } .kr-sw-gumb.vkl i::after { left: calc(14px * var(--zm)); } .o3-napis.o3-pred { border-left: calc(4px * var(--zm)) solid var(--b); } .o3-napis.o3-pred.alt { border-left-style: dashed; } .o3-napr-pred i { background: var(--b, var(--jantar)); } .o3-nast-t { width: calc(320px * var(--zm)); } .o3-nast-t .o3-st { display: flex; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(13px * var(--zm)); } .o3-nast-t select { flex: 1; } .kr-lane .zac .kr-alt-chip, .kr-lane .zac .kr-alt-plus, .kr-lane .kr-nasl-cona.zac span { left: calc(20px * var(--zm)); max-width: calc(100% - calc(23px * var(--zm))); } /* ZEV-REZIJA-V112: lučke prisotnosti v glavi, trak »režiser v načinu …«, delovne površine v Nadzoru, želja na tablici */ .p-luci { display: inline-flex; gap: calc(6px * var(--zm)); margin-left: calc(12px * var(--zm)); flex: 0 0 auto; } .p-luc { display: inline-flex; align-items: center; gap: calc(6px * var(--zm)); min-height: calc(30px * var(--zm)); padding: 0 calc(10px * var(--zm)); border-radius: calc(15px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); color: var(--siva); font: inherit; font-size: calc(13px * var(--zm)); cursor: pointer; white-space: nowrap; } .p-luc i, .p-luc-p { display: inline-block; width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: #3C4854; } .p-luc.ok { color: var(--papir); } .p-luc.ok i, .p-luc-p.ok { background: var(--pvw); box-shadow: 0 0 calc(8px * var(--zm)) var(--pvw); } .p-luc.star i, .p-luc-p.star { background: var(--jantar); } @media (max-width: 1100px) { .p-luci .p-luc { padding: 0 calc(7px * var(--zm)); font-size: calc(12px * var(--zm)); } } .kot-trak { position: fixed; left: 50%; top: calc(6px * var(--zm)); transform: translateX(-50%); z-index: 90; display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: center; justify-content: center; gap: calc(6px * var(--zm)); max-width: calc(100vw - calc(16px * var(--zm))); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(12px * var(--zm)); background: rgba(21, 30, 40, .96); border: 1px solid var(--jantar); box-shadow: 0 calc(10px * var(--zm)) calc(30px * var(--zm)) rgba(0, 0, 0, .55); } .kot-oz { white-space: nowrap; font-size: calc(13px * var(--zm)); color: var(--siva); margin-right: calc(4px * var(--zm)); } .kot-oz b { color: var(--jantar); } .kot-g { display: inline-flex; align-items: center; gap: calc(5px * var(--zm)); min-height: calc(28px * var(--zm)); padding: 0 calc(7px * var(--zm)); flex: 0 0 auto; border-radius: calc(8px * var(--zm)); border: 1px solid var(--b, var(--crta)); background: var(--noc); color: var(--papir); font: inherit; font-size: calc(13px * var(--zm)); cursor: pointer; } .kot-g.izbran { background: var(--papir); color: var(--noc); } .kot-izhod { margin-left: calc(6px * var(--zm)); } body.v-kot .kot-trak { opacity: .92; } body.v-kot .kot-trak:hover { opacity: 1; } .kot-trak .kot-izhod { flex: 0 0 auto; } .nz-povrsine { margin: calc(10px * var(--zm)) 0 calc(14px * var(--zm)); } .nz-nas small { font-weight: 500; color: var(--siva); font-size: calc(13px * var(--zm)); text-transform: none; letter-spacing: 0; margin-left: calc(8px * var(--zm)); } .nz-pov-vrsta { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(210px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); } .nz-pov { display: flex; align-items: center; gap: calc(10px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(10px * var(--zm)); border: 1px solid var(--crta); border-left: calc(4px * var(--zm)) solid var(--b, var(--rob)); background: var(--grafit); } .nz-pov.ok { border-color: color-mix(in srgb, var(--pvw) 55%, var(--crta)); border-left-color: var(--b, var(--pvw)); } .nz-luc { flex: 0 0 auto; width: calc(16px * var(--zm)); height: calc(16px * var(--zm)); border-radius: 50%; background: #3C4854; } .nz-luc.ok { background: var(--pvw); box-shadow: 0 0 calc(10px * var(--zm)) var(--pvw); } .nz-luc.star { background: var(--jantar); } .nz-pov-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .nz-pov-t b { font-size: calc(15px * var(--zm)); } .nz-pov-t small { color: var(--siva); font-size: calc(12px * var(--zm)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tz-alt-v { display: flex; align-items: center; gap: calc(12px * var(--zm)); } .tz-alt-sl { flex: 0 0 auto; } .tz-alt-t { display: flex; flex-direction: column; gap: 2px; } .tz-alt-t b { font-size: calc(24px * var(--zm)); } .tz-alt-t span { font-size: calc(16px * var(--zm)); color: #D9D2C1; } .tz-alt .tz-alt-txt { font-size: calc(20px * var(--zm)); line-height: 1.25; } .kr-tab .tz-alt { margin-top: calc(8px * var(--zm)); } .kr-tab .tz-alt-t b { font-size: calc(16px * var(--zm)); } .kr-tab .tz-alt-t span { font-size: calc(13px * var(--zm)); } .kr-tab .tz-alt .tz-alt-txt { font-size: calc(15px * var(--zm)); } /* ZEV-REZIJA-V113: mali oder na tablici */ .tz-slika { display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--zm)); } .odrcek { display: block; width: clamp(calc(130px * var(--zm)), 18vmin, calc(210px * var(--zm))); height: auto; } .odrcek.mal { width: clamp(calc(110px * var(--zm)), 14vmin, calc(170px * var(--zm))); margin-top: calc(6px * var(--zm)); } @media (max-width: 700px) { .odrcek { width: calc(120px * var(--zm)); } } /* ZEV-REZIJA-V113: kdo je v kadru (meni pod kadrom in alternativa) */ .km-kdo { align-items: start; } .km-kdo-t { display: flex; flex-direction: column; gap: calc(6px * var(--zm)); min-width: 0; } .km-oder { display: block; width: 100%; max-height: calc(190px * var(--zm)); background: #0E141B; border-radius: calc(8px * var(--zm)); } .km-stol { cursor: pointer; } .km-stol:hover circle { fill-opacity: .8; stroke: #ECE5D3; stroke-width: .06; } .km-sk { border-left: calc(4px * var(--zm)) solid var(--b); } .km-sk small { color: var(--siva); margin-left: calc(3px * var(--zm)); } .km-sk.izbran small { color: var(--noc); } .km-kol .tiho { font-size: calc(12px * var(--zm)); margin-right: calc(4px * var(--zm)); } .km-povzetek { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); } .km-povzetek b { color: var(--jantar); } .tz-nasl{display:flex;gap:calc(14px * var(--zm));align-items:center;margin:calc(10px * var(--zm)) 0 calc(4px * var(--zm));padding:calc(10px * var(--zm)) calc(12px * var(--zm));border:1px solid var(--rob,#2A3643);border-radius:calc(10px * var(--zm));background:rgba(255,255,255,.03)} .tz-nasl small{display:block;font-size:calc(12px * var(--zm));letter-spacing:.08em;text-transform:uppercase;color:#8592A0} .tz-nasl b{font-size:calc(20px * var(--zm))} .tz-nasl .odrcek{flex:0 0 auto} @media (max-width:600px){.tz-nasl{flex-direction:column;align-items:flex-start}} /* ZEV-REZIJA-V113: prednastavitve */ .pn-okno { width: min(calc(860px * var(--zm)), 100%); } .pn-glava { display: flex; align-items: center; justify-content: space-between; gap: calc(12px * var(--zm)); } .pn-sek { display: grid; gap: calc(8px * var(--zm)); padding-top: calc(6px * var(--zm)); border-top: 1px solid var(--crta); } .pn-sek h4 { margin: calc(4px * var(--zm)) 0 0; font-size: calc(18px * var(--zm)); } .pn-sek h4 small { font-weight: 400; color: #8592A0; font-size: calc(14px * var(--zm)); margin-left: calc(6px * var(--zm)); } .pn-sez { display: grid; gap: calc(6px * var(--zm)); } .pn-el { display: flex; align-items: center; gap: calc(10px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(10px * var(--zm)); background: rgba(255,255,255,.035); border: 1px solid var(--crta); } .pn-el.vgr { border-left: calc(4px * var(--zm)) solid var(--jantar); } .pn-el-t { flex: 1; display: grid; gap: 2px; min-width: 0; } .pn-el-t b { font-size: calc(16px * var(--zm)); } .pn-el-t small { color: #8592A0; font-size: calc(13px * var(--zm)); } .pn-opoz { color: var(--jantar); } .pn-shrani { justify-self: start; } .pn-gumb { margin-left: calc(8px * var(--zm)); border-color: var(--jantar) !important; } /* ZEV-REZIJA-V114: velikost zaslona */ .zas-gumb { min-width: 0; padding-left: 10px; padding-right: 10px; font-variant-numeric: tabular-nums; } .zas-okno { position: fixed; top: 60px; right: 12px; z-index: 1200; width: min(340px, calc(100vw - 16px)); display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--grafit, #161d25); border: 1px solid var(--crta, #2A3643); box-shadow: 0 12px 40px rgba(0,0,0,.5); font-size: 15px; } .zas-glava { display: flex; align-items: center; justify-content: space-between; } .zas-glava b { font-size: 18px; } .zas-pr { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 0 10px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--crta, #2A3643); background: rgba(255,255,255,.03); color: inherit; cursor: pointer; font: inherit; } .zas-pr small { grid-column: 1; color: #8592A0; font-size: 12px; } .zas-pr i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: #8592A0; } .zas-pr.izbran { border-color: var(--jantar, #E8B04B); background: rgba(232,176,75,.12); } .zas-fino { display: flex; align-items: center; gap: 8px; padding-top: 4px; } .zas-fino span { flex: 1; } .zas-fino b { min-width: 52px; text-align: center; } .zas-op { margin: 2px 0 0; font-size: 12px; color: #8592A0; } .rez-glava .op-gumb, .rez-glava .kl-gumb { font-size: calc(16px * var(--zm)); padding: calc(8px * var(--zm)) calc(14px * var(--zm)); } .rez-glava .op-gumb .op-znak { font-size: calc(13px * var(--zm)); } /* ZEV-REZIJA-V115: izvedba — faza, vodenje, izguba */ .izv-znak { display: inline-flex; align-items: center; padding: calc(3px * var(--zm)) calc(9px * var(--zm)); border-radius: 999px; font: 800 calc(13px * var(--zm))/1 var(--sans, "Barlow Condensed", sans-serif); letter-spacing: .08em; background: #1f3550; color: #9cc8ff; border: 1px solid #36597f; white-space: nowrap; } .izv-znak.f-preizkus { background: #3a2c10; color: #f3c35e; border-color: #7a5a1c; } .izv-znak.f-live { background: #c62828; color: #fff; border-color: #ff5a5a; box-shadow: 0 0 0 2px rgba(229,72,77,.35); animation: izvUtrip 2s ease-in-out infinite; } @keyframes izvUtrip { 50% { box-shadow: 0 0 0 5px rgba(229,72,77,.15); } } .izv-zvok.vklop { border-color: #36597f; color: #9cc8ff; } .izv-zvok.blok { border-color: var(--jantar); color: var(--jantar); } .izv-plosca { display: grid; gap: calc(8px * var(--zm)); padding: calc(12px * var(--zm)); margin-bottom: calc(10px * var(--zm)); border-radius: calc(12px * var(--zm)); border: 1px solid var(--crta); background: rgba(255,255,255,.025); } .izv-plosca.f-live { border-color: #c62828; box-shadow: inset 0 0 0 1px rgba(198,40,40,.4); } .izv-vrsta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); } .izv-oz { min-width: calc(130px * var(--zm)); color: #8592A0; font-size: calc(14px * var(--zm)); text-transform: uppercase; letter-spacing: .06em; } .izv-faze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8px * var(--zm)); width: 100%; } .izv-f { display: grid; gap: 2px; text-align: left; padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(10px * var(--zm)); border: 2px solid var(--crta); background: rgba(255,255,255,.03); color: inherit; cursor: pointer; font: inherit; } .izv-f b { font-size: calc(20px * var(--zm)); letter-spacing: .06em; } .izv-f small { color: #8592A0; font-size: calc(13px * var(--zm)); } .izv-f.izbran.f-vaja { border-color: #4f8fd9; background: rgba(79,143,217,.14); } .izv-f.izbran.f-preizkus { border-color: #e8b04b; background: rgba(232,176,75,.14); } .izv-f.izbran.f-live { border-color: #e5484d; background: rgba(229,72,77,.22); } .izv-vodi { display: inline-flex; flex-wrap: wrap; gap: 0; } .izv-vodi .izb { border-radius: 0; margin: 0; } .izv-vodi .izb:first-child { border-radius: 8px 0 0 8px; } .izv-vodi .izb:last-child { border-radius: 0 8px 8px 0; } .izv-sled { font-size: calc(15px * var(--zm)); color: var(--papir); } .izv-sled small { color: #8592A0; } .izv-raven { display: inline-block; width: calc(90px * var(--zm)); height: calc(8px * var(--zm)); border-radius: 4px; background: #222b35; vertical-align: middle; overflow: hidden; } .izv-raven i { display: block; height: 100%; background: linear-gradient(90deg, #3fbf5f, #e0c040 70%, #d04030); } .izv-izguba { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: calc(10px * var(--zm)); border-radius: 10px; background: rgba(229,72,77,.18); border: 1px solid #e5484d; font-size: calc(15px * var(--zm)); } .izv-izguba.ok { background: rgba(63,191,95,.12); border-color: #3fbf5f; } .izv-kontrola { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(260px * var(--zm)), 1fr)); gap: 4px 14px; font-size: calc(14px * var(--zm)); } .izv-kontrola .ok { color: #7ee29a; } .izv-kontrola .ne { color: #ff8a8a; } .izv-protokol summary { cursor: pointer; color: #8592A0; font-size: calc(14px * var(--zm)); } .izv-protokol ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: calc(14px * var(--zm)); line-height: 1.4; } .izv-pas { display: grid; gap: calc(6px * var(--zm)); padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(12px * var(--zm)); border: 2px solid var(--crta); background: rgba(255,255,255,.03); margin-bottom: calc(8px * var(--zm)); } .izv-pas-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .izv-pas-t b { font-size: calc(22px * var(--zm)); letter-spacing: .04em; } .izv-pas p { margin: 0; font-size: calc(14px * var(--zm)); color: #c5ccd4; line-height: 1.35; } .izv-pas-g { display: flex; flex-wrap: wrap; gap: 8px; } .izv-pas-g .gumb small { display: block; font-size: .7em; opacity: .8; } .izv-pas.v-sledilec { border-color: #3fbf5f; } .izv-pas.v-sledilec b { color: #7ee29a; } .izv-pas.v-bralec { border-color: #e8b04b; } .izv-pas.v-bralec b { color: #f3c35e; } .izv-pas.v-reziser { border-color: #8592A0; } .izv-pas.v-posnetek { border-color: #4f8fd9; } .izv-pas.v-posnetek b { color: #9cc8ff; } .izv-pas.alarm { border-color: #e5484d; background: rgba(229,72,77,.2); animation: izvAlarm 1.2s ease-in-out infinite; } .izv-pas.alarm b { color: #fff; } @keyframes izvAlarm { 50% { background: rgba(229,72,77,.36); } } .gumb.zelen { background: #2f9e55; border-color: #3fbf5f; color: #fff; } body.izv-live .kr-pos-video { filter: grayscale(1) brightness(.4); } .tj { grid-template-rows: auto auto auto auto auto minmax(0, 1fr); grid-template-areas: 'glava glava' 'izv izv' 'zdaj zdaj' 'kaz kaz' 'cas cas' 'delo delo'; } .tj-izv { grid-area: izv; } .tj-izv .izv-pas { margin: 0; } .tj-izv:empty { display: none; } @media (max-width: 900px) { .tj { grid-template-rows: none; grid-template-areas: 'glava' 'izv' 'zdaj' 'kaz' 'cas' 'delo'; } } /* ZEV-REZIJA-V116: opozorilo sledilca in gumbi s takti */ .izv-pas.opoz { border-color: #e8b04b; background: rgba(232,176,75,.2); animation: izvOpoz 1.6s ease-in-out infinite; } .izv-pas.opoz b { color: #ffd88a; } @keyframes izvOpoz { 50% { background: rgba(232,176,75,.32); } } .izv-izguba.opoz { background: rgba(232,176,75,.18); border-color: #e8b04b; } .izv-takti { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(64px * var(--zm)), 1fr)); gap: calc(6px * var(--zm)); } .izv-tk { display: grid; place-items: center; gap: 0; min-height: calc(64px * var(--zm)); padding: calc(6px * var(--zm)) 2px; border-radius: calc(10px * var(--zm)); border: 2px solid var(--crta); background: #18212b; color: var(--papir); cursor: pointer; font: inherit; touch-action: manipulation; } .izv-tk b { font-size: calc(28px * var(--zm)); line-height: 1; font-weight: 800; } .izv-tk small { font-size: calc(12px * var(--zm)); color: #8592A0; } .izv-tk.zdaj { border-color: var(--jantar); } .izv-tk.slisi { border-color: #3fbf5f; background: #173024; } .izv-tk.slisi small { color: #7ee29a; } .izv-tk:active { transform: scale(.96); background: var(--jantar); color: #111; } /* ZEV-REZIJA-V117: vnos takta s tipkovnico, študij, jezik */ .b-vnos { position: fixed; right: calc(20px * var(--zm)); top: 40%; z-index: 950; display: grid; justify-items: center; padding: 10px 18px; border-radius: 14px; background: #1b2530; border: 2px solid var(--jantar); box-shadow: 0 10px 30px rgba(0,0,0,.5); } .b-vnos b { font-size: calc(54px * var(--zm)); line-height: 1; color: var(--jantar); } .b-vnos small { color: #8592A0; font-size: calc(13px * var(--zm)); } .stu-gumb, .jez-gumb { display: inline-flex; align-items: center; gap: 6px; } .stu-sw { display: inline-block; width: calc(26px * var(--zm)); height: calc(14px * var(--zm)); border-radius: 999px; background: #3a4552; position: relative; transition: background .15s; } .stu-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: #cfd6de; transition: left .15s; } .stu-gumb.vklop .stu-sw { background: var(--jantar); } .stu-gumb.vklop .stu-sw::after { left: calc(100% - 2px - 10px * var(--zm)); background: #111; } .stu-pas { position: fixed; left: 50%; bottom: calc(14px * var(--zm)); transform: translateX(-50%); z-index: 940; display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); border-radius: 14px; background: #1b2530; border: 2px solid var(--jantar); box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: calc(100vw - 24px); } .stu-oz { color: var(--jantar); letter-spacing: .1em; } .stu-op { color: #8592A0; font-size: calc(13px * var(--zm)); } .stu-takt b { font-size: calc(22px * var(--zm)); } .stu-hit { display: inline-flex; } .stu-hit .izb { border-radius: 0; margin: 0; } .stu-hit .izb:first-child { border-radius: 8px 0 0 8px; } .stu-hit .izb:last-child { border-radius: 0 8px 8px 0; } body.stu-na .bra-veliko, body.stu-na .tz-glava { outline: 2px dashed var(--jantar); outline-offset: 4px; } /* ── ZEV-REZIJA-V118: izbor in brisanje v urejevalniku zasedbe, 3D oder ob tlorisu ── */ .zas-izbor { display: grid; gap: calc(8px * var(--zm)); padding: calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--plast); border-left: calc(4px * var(--zm)) solid var(--b, var(--crta)); } .zas-izbor.prazen { border-left-color: var(--crta); } .zas-izbor.prazen p { margin: 0; font-size: calc(14px * var(--zm)); color: var(--siva); line-height: 1.35; } .zas-izbor-g { display: flex; align-items: center; gap: calc(8px * var(--zm)); } .zas-izbor-g i { flex: none; width: calc(12px * var(--zm)); height: calc(12px * var(--zm)); border-radius: 50%; background: var(--b); } .zas-izbor-g b { font-size: calc(17px * var(--zm)); } .zas-izbor-g small { color: var(--siva); font-size: calc(14px * var(--zm)); margin-right: auto; } .zas-izbor-el { margin: 0; font-size: calc(14px * var(--zm)); color: var(--papir); } .zas-izbor-gumbi { display: flex; flex-wrap: wrap; gap: calc(6px * var(--zm)); } .gumb.brisi { background: #4A1A1E; border-color: #E5484D; color: #FFE9E9; } .gumb.brisi:hover { background: #6A2328; } .gumb.brisi.tiho { background: transparent; color: #F2A6A8; border-color: #7A3438; } .zas-izbor-kl { display: flex; align-items: center; flex-wrap: wrap; gap: calc(8px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); } .zas-razv { display: flex; align-items: center; gap: calc(8px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: #2A2413; border: 1px solid #6B5A22; font-size: calc(14px * var(--zm)); } .zas-razv span { flex: 1; } .zas-3d-st.je { border-color: var(--crta); color: var(--siva); } .zas.s-3d .zas-platno { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: calc(10px * var(--zm)); align-items: start; place-items: stretch; } .zas-2d { min-height: 0; height: 100%; display: grid; place-items: start center; } .zas-2d .zas-svg { max-height: 100%; } .zas-3d { min-width: 0; align-self: start; } .zas-3d .o3 { height: auto; } .zas-3d .o3-platno { min-height: calc(220px * var(--zm)); } .o3-ur .o3-orodja { gap: calc(6px * var(--zm)); } .o3-ur-n { font-size: calc(15px * var(--zm)); margin-right: calc(6px * var(--zm)); } .o3-ur-napis { font-size: calc(13px * var(--zm)); } @media (max-width: 1100px) { .zas.s-3d .zas-platno { grid-template-columns: minmax(0, 1fr); } .zas.s-3d { height: auto; } .zas-2d { height: auto; } } /* ── ZEV-REZIJA-V119: zasuk, razmik, podesti, paneli big banda ── */ .zas-zasuk { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)); } .zas-logo { align-items: center; } .zas-logo-ok { font-size: calc(14px * var(--zm)); color: var(--pvw); } .zas-napis-l { display: grid !important; gap: calc(4px * var(--zm)); font-size: calc(13px * var(--zm)); color: var(--siva); } .zas-napis-l input { min-height: calc(32px * var(--zm)); width: 100%; } .zas-ur-v .zas-obl + .zas-obl { margin-top: calc(4px * var(--zm)); } /* ── ZEV-REZIJA-V122: vrstica transformacij (X, Z, Y, zasuk) nad tlorisom in 3D ── */ .zas-tr { grid-column: 1 / -1; align-self: start; justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)) calc(12px * var(--zm)); padding: calc(6px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--plast); font-size: calc(14px * var(--zm)); } .zas-platno:not(.x) > .zas-tr { width: 100%; } .tr-kdo { display: inline-flex; align-items: center; gap: calc(6px * var(--zm)); min-width: calc(160px * var(--zm)); } .tr-kdo i { width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: var(--b); } .tr-kdo.tiho { color: var(--siva); } .tr-p { display: inline-flex; align-items: center; gap: calc(4px * var(--zm)); } .tr-p > span { font-weight: 800; color: var(--siva); } .tr-p em { font-style: normal; color: var(--siva); } .tr-p input { width: calc(74px * var(--zm)); min-height: calc(30px * var(--zm)); padding: 0 calc(6px * var(--zm)); font: 600 calc(15px * var(--zm)) var(--sans); background: var(--noc); color: var(--papir); border: 1px solid var(--crta); border-radius: calc(6px * var(--zm)); } #tr-x { border-color: #ff5a5a; } #tr-z { border-color: #5a9bff; } #tr-r { border-color: #3ddc84; } .tr-y b { min-width: calc(40px * var(--zm)); display: inline-block; } .tr-tipke { color: var(--temna); font-size: calc(12px * var(--zm)); margin-left: auto; } .zas-platno { align-content: start; } /* ── ZEV-REZIJA-V123: 3D ob tlorisu in kamerah ── */ .shema-ovoj.s-3d { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr) calc(290px * var(--zm)); } .shema-3d { min-width: 0; position: sticky; top: calc(8px * var(--zm)); } .shema-3d .o3 { height: auto; } .shema-3d .o3-platno { min-height: calc(240px * var(--zm)); } .o3-sloj { display: inline-flex; align-items: center; gap: calc(4px * var(--zm)); margin-right: calc(6px * var(--zm)); } .o3-sloj em { font-style: normal; color: var(--siva); font-size: calc(13px * var(--zm)); } @media (max-width: 1300px) { .shema-ovoj.s-3d { grid-template-columns: minmax(0, 1fr) calc(290px * var(--zm)); } .shema-ovoj.s-3d .shema-3d { grid-column: 1 / -1; grid-row: 2; position: static; } } /* ZEV-REZIJA-V125: prijava, moj dostop, zaklenjen zaslon */ .zaklep { position: fixed; inset: 0; z-index: 2147483000; background: var(--noc); display: flex; align-items: center; justify-content: center; padding: calc(18px * var(--zm)); } .zaklep-karta { width: min(100%, calc(420px * var(--zm))); background: var(--grafit); border: 1px solid var(--crta); border-radius: calc(8px * var(--zm)); padding: calc(24px * var(--zm)); display: grid; gap: calc(14px * var(--zm)); text-align: center; } .zaklep-karta .znak { margin: 0 auto; } .zaklep-karta h2 { font-size: calc(28px * var(--zm)); margin: 0; } .zaklep-karta p { margin: 0; } .zaklep-karta label { display: grid; gap: calc(6px * var(--zm)); text-align: left; color: var(--siva); } .zaklep-karta #zk-pin { font-size: calc(40px * var(--zm)); letter-spacing: .5em; text-align: center; padding: calc(8px * var(--zm)); } .zaklep-spodaj { display: grid; gap: calc(4px * var(--zm)); } .zaklep-spodaj .gumb { justify-content: center; } .dz-racun { gap: calc(12px * var(--zm)); } .dz-jaz { display: flex; flex-wrap: wrap; gap: calc(12px * var(--zm)); align-items: center; justify-content: space-between; } .dz-jaz small { display: block; color: var(--siva); font-size: calc(16px * var(--zm)); } #dz-plosca { display: grid; gap: calc(12px * var(--zm)); } #dz-plosca:empty { display: none; } #dz-plosca h3 { margin: calc(8px * var(--zm)) 0 0; font-size: calc(18px * var(--zm)); } #dz-plosca label { display: grid; gap: calc(6px * var(--zm)); color: var(--siva); } #dz-plosca label.stikalo, .vstop-karta label.stikalo { display: flex; } .dz-naprave { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(8px * var(--zm)); } .dz-naprave li { display: flex; gap: calc(12px * var(--zm)); align-items: center; justify-content: space-between; background: var(--plast); border-radius: var(--r); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); } .dz-naprave small { display: block; color: var(--siva); } .dz-naprave em { font-style: normal; color: var(--jantar); font-size: calc(14px * var(--zm)); margin-left: calc(6px * var(--zm)); } .dz-cms summary { cursor: pointer; color: var(--siva); } .dz-cms[open] { display: grid; gap: calc(10px * var(--zm)); } .dz-kljucavnica svg { display: block; } /* ═══ ZEV-REZIJA-V129: Izvedba › Živo kot režijski pult ═══ */ body.v-izvedbi .rez-glava .polozaj, body.v-izvedbi .rez-glava .rez-premik, body.v-izvedbi .rez-glava .izv-zvok, body.v-izvedbi .rez-glava .izv-znak, body.v-izvedbi .rez-glava .stu-gumb, body.v-izvedbi .rez-glava .jez-gumb, body.v-izvedbi .rez-glava .zas-gumb, body.v-izvedbi .kl-gumb, body.v-izvedbi .op-gumb { display: none !important; } body.v-izvedbi .rez-vsebina { padding: calc(8px * var(--zm)) calc(12px * var(--zm)); overflow: hidden; } .zv { --zv-g: calc(8px * var(--zm)); height: 100%; min-height: 0; display: grid; gap: var(--zv-g); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto minmax(0, 1fr) calc(78px * var(--zm)); grid-template-areas: 'vrh' 'spored' 'alarm' 'glava' 'kamere' 'telo' 'cas'; } .zv-spored { grid-area: spored; margin: 0 !important; padding-top: calc(4px * var(--zm)) !important; padding-bottom: calc(4px * var(--zm)) !important; } .zv-spored:empty { display: none; } .zv-vrh { grid-area: vrh; display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--zm)) calc(18px * var(--zm)); } .zv-sk { display: flex; align-items: center; gap: calc(6px * var(--zm)); } .zv-oz { font-size: calc(13px * var(--zm)); letter-spacing: .08em; text-transform: uppercase; color: var(--temna); white-space: nowrap; } .zv-seg { display: flex; gap: calc(3px * var(--zm)); } .zv-seg .izb { min-height: calc(32px * var(--zm)); padding: 2px calc(10px * var(--zm)); font-size: calc(15px * var(--zm)); } .zv-seg .izb:disabled { opacity: .4; } .zv-faze { gap: calc(3px * var(--zm)); } .zv-f { border: 1px solid var(--crta); background: var(--noc); color: var(--siva); border-radius: calc(6px * var(--zm)); padding: calc(5px * var(--zm)) calc(10px * var(--zm)); font: 800 calc(14px * var(--zm))/1 var(--sans); letter-spacing: .06em; cursor: pointer; } .zv-f.izbran.f-vaja { background: #1D3A5E; color: #CFE3FF; border-color: #5AA9FF; } .zv-f.izbran.f-preizkus { background: #4A3A12; color: #FFE3A3; border-color: var(--jantar); } .zv-f.izbran.f-poskus { background: #5A1F24; color: #FFD9DB; border-color: #F08A8E; } .zv-f.izbran.f-live { background: var(--pgm); color: #fff; border-color: var(--pgm); } .zv-tr .gumb, .zv-roke .gumb { min-height: calc(34px * var(--zm)); padding: calc(4px * var(--zm)) calc(12px * var(--zm)); font-size: calc(15px * var(--zm)); } .zv-roke { display: flex; gap: calc(4px * var(--zm)); align-items: center; } .zv-post { margin-left: auto; } .zv-alarm { grid-area: alarm; display: grid; gap: calc(4px * var(--zm)); } .zv-alarm:empty { display: none; } .zv-al { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--zm)) calc(12px * var(--zm)); padding: calc(6px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(6px * var(--zm)); background: #151E28; border: 1px solid var(--crta); font-size: calc(15px * var(--zm)); } .zv-al > b { font: 800 calc(14px * var(--zm))/1 var(--sans); letter-spacing: .06em; } .zv-al.rdec { background: #3A1216; border-color: var(--pgm); } .zv-al.rdec > b { color: #FF9A9D; } .zv-al.rumen { background: #3A2E10; border-color: var(--jantar); } .zv-al.rumen > b { color: var(--jantar); } .zv-al.moder { background: #13263B; border-color: #3F7FC0; } .zv-al.moder > b { color: #9CCBFF; } .zv-al.zv-poskus { background: #2A1418; border-color: #8C3A40; } .zv-al.zv-poskus > b { color: #F5A3A7; } .zv-al .gumb { min-height: calc(30px * var(--zm)); padding: 2px calc(10px * var(--zm)); font-size: calc(14px * var(--zm)); } .zv-kontrola span.ok { color: var(--pvw); } .zv-kontrola span.ne { color: #FF9A9D; } .zv-glava { grid-area: glava; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr); gap: var(--zv-g); } .zv-pol { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: calc(12px * var(--zm)); align-items: center; padding: calc(8px * var(--zm)) calc(12px * var(--zm)); background: var(--grafit); border-radius: calc(8px * var(--zm)); } .zv-takt { display: grid; line-height: .9; } .zv-takt small, .zv-kar > small { font-size: calc(12px * var(--zm)); letter-spacing: .1em; text-transform: uppercase; color: var(--temna); } .zv-takt b { font: 800 calc(52px * var(--zm))/1 var(--sans); font-variant-numeric: tabular-nums; } .zv-pol-t { display: grid; gap: 2px; min-width: 0; } .zv-pol-t b { font-size: calc(18px * var(--zm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zv-pol-t span { font-size: calc(14px * var(--zm)); color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zv-vodi-t { color: var(--jantar) !important; } .zv-kar { position: relative; display: grid; gap: calc(4px * var(--zm)); padding: calc(8px * var(--zm)) calc(12px * var(--zm)); background: var(--grafit); border-radius: calc(8px * var(--zm)); border-left: calc(6px * var(--zm)) solid var(--b, var(--crta)); min-width: 0; } .zv-pgm .zv-kar { background: #2A1014; box-shadow: inset 0 0 0 2px var(--pgm); } .zv-pgm .zv-kar > small { color: #FF9A9D; } .zv-nasl .zv-kar { box-shadow: inset 0 0 0 2px var(--pvw); grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .zv-nasl .zv-kar > small { color: var(--pvw); grid-column: 1 / -1; } .zv-kar.prazna { box-shadow: none; opacity: .6; } .zv-kar-v { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(10px * var(--zm)); align-items: center; min-width: 0; } .zv-kar-v b { font-size: calc(19px * var(--zm)); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zv-kar-v i { font: italic calc(14px * var(--zm))/1.2 var(--serif); color: #D9D2C1; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zv-kn { display: grid; place-items: center; min-width: 1.4em; height: 1.4em; border-radius: calc(6px * var(--zm)); background: var(--b); color: #0E141B; font: 800 calc(34px * var(--zm))/1 var(--sans); } .zv-odst { font: 800 calc(44px * var(--zm))/1 var(--sans) !important; color: var(--jantar); font-variant-numeric: tabular-nums; } .zv-odst.blizu { color: var(--pvw); } .zv-nap { height: calc(5px * var(--zm)); border-radius: 3px; background: #3A1A1E; overflow: hidden; } .zv-nap i { display: block; height: 100%; background: var(--pgm); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; } .zv-go { min-width: calc(120px * var(--zm)); min-height: calc(70px * var(--zm)); border: 0; border-radius: calc(8px * var(--zm)); background: var(--pvw); color: #06140C; font: 800 calc(34px * var(--zm))/1 var(--sans); cursor: pointer; display: grid; place-items: center; } .zv-go small { font-size: calc(12px * var(--zm)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .zv-go:active { transform: scale(.97); } .zv-sam { font-size: calc(14px * var(--zm)); color: var(--siva); text-align: right; } .zv-sam.caka { color: var(--jantar); } .zv-kamere { grid-area: kamere; display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(150px * var(--zm)), 1fr)); gap: calc(6px * var(--zm)); } .zk { position: relative; display: grid; gap: calc(3px * var(--zm)); padding: calc(6px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); border: 2px solid transparent; border-top: calc(4px * var(--zm)) solid var(--b); cursor: pointer; min-width: 0; user-select: none; } .zk.pgm { background: #3A1216; border-color: var(--pgm); } .zk.pvw { border-color: var(--pvw); } .zk.nasl:not(.pvw) { border-color: #1F6B45; border-style: dashed; } .zk-g { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(6px * var(--zm)); align-items: center; } .zk-st { font: 800 calc(28px * var(--zm))/1 var(--sans); color: var(--b); } .zk.pgm .zk-st { color: #fff; } .zk-ime { font-size: calc(14px * var(--zm)); color: var(--siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zk-tab { width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: #3A4958; } .zk-tab.da { background: var(--pvw); } .zk-tab.mogoce { background: var(--jantar); } .zk-tab.ne { background: var(--pgm); } .zk-k { font-size: calc(15px * var(--zm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; } .zk-k em { font-style: normal; font-weight: 800; color: #FF9A9D; } .zk-k em.pv { color: var(--pvw); } .zk-sl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(8px * var(--zm)); align-items: center; } .zk-sl i { font: italic calc(13px * var(--zm))/1.2 var(--serif); color: #D9D2C1; } .zk-d { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: calc(4px * var(--zm)); align-items: center; } .zk-cas { font: 800 calc(18px * var(--zm))/1 var(--sans); color: var(--jantar); font-variant-numeric: tabular-nums; } .zk-rez, .zk-vec { border: 1px solid var(--crta); background: var(--noc); color: var(--papir); border-radius: calc(6px * var(--zm)); min-height: calc(30px * var(--zm)); padding: 0 calc(10px * var(--zm)); font: 700 calc(14px * var(--zm))/1 var(--sans); cursor: pointer; } .zk.pgm .zk-rez { background: var(--pgm); border-color: var(--pgm); } .zv-telo { grid-area: telo; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zv-g); } .zv-part { display: none; min-height: 0; overflow: auto; background: #fff; border-radius: calc(8px * var(--zm)); } .zv-seznam { min-height: 0; overflow: hidden; background: var(--grafit); border-radius: calc(8px * var(--zm)); padding: calc(4px * var(--zm)) calc(6px * var(--zm)); display: grid; grid-template-rows: auto minmax(0, 1fr); } .zr-glava, .zr { display: grid; grid-template-columns: calc(58px * var(--zm)) calc(40px * var(--zm)) minmax(0, 1.4fr) minmax(0, 1fr) calc(58px * var(--zm)) calc(76px * var(--zm)); gap: calc(10px * var(--zm)); align-items: center; } .zr-glava { padding: calc(4px * var(--zm)) calc(8px * var(--zm)); font-size: calc(12px * var(--zm)); letter-spacing: .08em; text-transform: uppercase; color: var(--temna); } .zr-vrste { display: grid; gap: calc(3px * var(--zm)); align-content: start; overflow: hidden; } .zr-vrste.dvig { animation: zr-dvig .45s cubic-bezier(.2, .7, .2, 1); } @keyframes zr-dvig { from { transform: translateY(calc(46px * var(--zm))); } to { transform: none; } } .zr { padding: calc(6px * var(--zm)) calc(8px * var(--zm)); border-radius: calc(6px * var(--zm)); background: var(--noc); border-left: calc(5px * var(--zm)) solid var(--b); cursor: pointer; font-size: calc(17px * var(--zm)); min-height: calc(40px * var(--zm)); } .zr.bil { opacity: .38; } .zr.zivo { background: #3A1216; box-shadow: inset 0 0 0 2px var(--pgm); } .zr.zdaj { background: #3A2E10; box-shadow: inset 0 0 0 2px var(--jantar); } .zr.nasl { box-shadow: inset 0 0 0 2px var(--pvw); background: #0F2A1C; } .zr.caka .zr-c { color: var(--jantar); } .zr-st { font: 800 calc(20px * var(--zm))/1 var(--sans); font-variant-numeric: tabular-nums; } .zr-k { display: grid; place-items: center; height: calc(30px * var(--zm)); border-radius: calc(5px * var(--zm)); background: var(--b); color: #0E141B; font: 800 calc(20px * var(--zm))/1 var(--sans); } .zr-p, .zr-g { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zr-g { font-size: calc(15px * var(--zm)); color: #D9D2C1; } .zr-t { color: var(--siva); font-variant-numeric: tabular-nums; display: grid; line-height: 1; } .zr-t small { font-size: calc(11px * var(--zm)); color: var(--temna); } .zr-c { text-align: right; font: 800 calc(20px * var(--zm))/1 var(--sans); color: var(--jantar); font-variant-numeric: tabular-nums; } .zr.zivo .zr-c { color: #FF9A9D; } .zr.nasl .zr-c { color: var(--pvw); } .zv-cas { grid-area: cas; position: relative; overflow: hidden; background: #0B1117; border-radius: calc(8px * var(--zm)); cursor: pointer; } .zv-cas svg, .tab-cas2 svg { display: block; } .zv-cas .zc-o { fill: #ECE5D3; font: 700 calc(13px * var(--zm)) var(--serif); } .zv-cas .zc-t { fill: #6F7B87; font: 500 calc(12px * var(--zm)) var(--sans); } .zv-cas .zc-f { fill: var(--jantar); font-size: calc(13px * var(--zm)); } .zv-cas .zc-k { fill: #0E141B; font-weight: 800; font-family: var(--sans); } #zv-cas-g, #t-cas-g { will-change: transform; } .zv-predal { position: fixed; right: calc(12px * var(--zm)); top: calc(90px * var(--zm)); bottom: calc(12px * var(--zm)); width: min(calc(560px * var(--zm)), 92vw); z-index: 40; overflow: auto; background: var(--grafit); border: 1px solid var(--rob, var(--crta)); border-radius: calc(10px * var(--zm)); padding: calc(10px * var(--zm)); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); } .zv-predal-g { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(8px * var(--zm)); } /* postavitve */ .zv[data-post=seznam] { grid-template-areas: 'vrh' 'spored' 'alarm' 'glava' 'telo' 'kamere' 'cas'; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto calc(70px * var(--zm)); } .zv[data-post=seznam] .zr { font-size: calc(21px * var(--zm)); min-height: calc(50px * var(--zm)); } .zv[data-post=seznam] .zk-k, .zv[data-post=seznam] .zk-d { display: none; } .zv[data-post=seznam] .zv-kamere { grid-template-columns: repeat(auto-fit, minmax(calc(110px * var(--zm)), 1fr)); } .zv[data-post=kamere] .zv-kamere { grid-template-columns: repeat(auto-fit, minmax(calc(230px * var(--zm)), 1fr)); } .zv[data-post=kamere] .zk { padding: calc(10px * var(--zm)) calc(12px * var(--zm)); } .zv[data-post=kamere] .zk-st { font-size: calc(44px * var(--zm)); } .zv[data-post=kamere] .zk-k { font-size: calc(18px * var(--zm)); } .zv[data-post=partitura] { grid-template-areas: 'vrh' 'spored' 'alarm' 'glava' 'telo' 'kamere' 'cas'; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto calc(64px * var(--zm)); } .zv[data-post=partitura] .zv-telo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .zv[data-post=partitura] .zv-part { display: block; } .zv[data-post=partitura] .zr { grid-template-columns: calc(52px * var(--zm)) calc(34px * var(--zm)) minmax(0, 1fr) calc(70px * var(--zm)); } .zv[data-post=partitura] .zr-glava { display: none; } .zv[data-post=partitura] .zr-g, .zv[data-post=partitura] .zr-t { display: none; } .zv[data-post=partitura] .zk-k, .zv[data-post=partitura] .zk-d { display: none; } .zv[data-post=partitura] .zv-kamere { grid-template-columns: repeat(auto-fit, minmax(calc(110px * var(--zm)), 1fr)); } .pd-gen { margin-top: calc(18px * var(--zm)); } @media (max-width: 1100px) { .zv-glava { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .zv-pol { grid-column: 1 / -1; } .zr-glava, .zr { grid-template-columns: calc(50px * var(--zm)) calc(34px * var(--zm)) minmax(0, 1fr) calc(66px * var(--zm)); } .zr-g, .zr-t, .zr-glava span:nth-child(4), .zr-glava span:nth-child(5) { display: none; } body.v-izvedbi .rez-vsebina { overflow: auto; } .zv { height: auto; grid-template-rows: none; } .zv-seznam { max-height: 60vh; } } /* tablica kamere: časovnica SVG, napredek kadra v živo */ .tab-cas2 { height: calc(112px * var(--zm)); overflow: hidden; border-radius: calc(8px * var(--zm)); background: #0B1117; } .tz-nap { height: calc(6px * var(--zm)); width: min(100%, calc(420px * var(--zm))); border-radius: 3px; background: #3A1A1E; overflow: hidden; margin-top: calc(6px * var(--zm)); } .tz-nap i { display: block; height: 100%; background: var(--pgm); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; } .tab-prihaja .kv .pc.caka { color: var(--jantar); } .zv-part.brez { background: var(--grafit); padding: calc(16px * var(--zm)); } /* ═══ ZEV-REZIJA-V130: pogledi snemalca (samo moj kader, s prihajajočimi); rdeč rob v živo utripa ═══ */ @keyframes tally-utrip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .tab.pgm .tally-okvir { animation: tally-utrip 1s ease-in-out infinite; } .tab.pvw.blizu .tally-okvir { animation: tally-utrip .5s ease-in-out infinite; } .tabm { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: 'g' 'k' !important; gap: calc(10px * var(--zm)); padding: calc(26px * var(--zm)) calc(26px * var(--zm)) calc(20px * var(--zm)) !important; } .tabm.post-pok { grid-template-rows: auto auto minmax(0, 1fr) !important; grid-template-areas: 'g' 'k' 'p' !important; } .tm-g { grid-area: g; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(14px * var(--zm)); align-items: center; } .tm-st { font: 800 clamp(48px, 16vmin, 120px)/1 var(--sans); min-width: 1.25em; padding: 2px .12em; border: 0; border-radius: calc(8px * var(--zm)); background: var(--b); color: #0E141B; cursor: pointer; } .tm-stanje { display: grid; line-height: 1; min-width: 0; } .tm-stanje b { font: 800 clamp(28px, 9vmin, 76px)/1 var(--sans); letter-spacing: .02em; color: var(--siva); } .tm-stanje small { font-size: clamp(13px, 3.4vmin, 20px); color: var(--temna); margin-top: .3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabm.pgm .tm-stanje b { color: #FF6B70; } .tabm.pvw .tm-stanje b { color: var(--pvw); } .tm-odst { display: grid; justify-items: end; line-height: 1; } .tm-odst small { font-size: clamp(11px, 2.8vmin, 16px); letter-spacing: .06em; text-transform: uppercase; color: var(--siva); text-align: right; max-width: 12em; } .tm-odst b { font: 800 clamp(40px, 13vmin, 110px)/1 var(--sans); color: var(--jantar); font-variant-numeric: tabular-nums; } .tabm.pvw .tm-odst b { color: var(--pvw); } .tabm.pgm .tm-odst b { color: var(--papir); } .tabm.prosto .tm-odst b { color: var(--siva); } .tm-kader { grid-area: k; display: grid; align-content: center; gap: calc(8px * var(--zm)); min-height: 0; } .tabm.post-pok .tm-kader { align-content: start; } .tabm.prosto .tm-kader { opacity: .6; } .tm-vr { display: flex; align-items: center; gap: calc(16px * var(--zm)); } .tm-kn { display: grid; line-height: .85; } .tm-kn small { font-size: clamp(12px, 3vmin, 16px); letter-spacing: .08em; text-transform: uppercase; color: var(--siva); } .tm-kn b { font: 800 clamp(64px, 22vmin, 190px)/.9 var(--sans); color: var(--jantar); font-variant-numeric: tabular-nums; } .tabm.pgm .tm-kn b { color: var(--papir); } .tabm.prosto .tm-kn b { color: var(--temna); } .tm-sl .pl-slika { width: clamp(64px, 20vmin, 150px); height: auto; border-radius: calc(8px * var(--zm)); } .tm-plan { font: 800 clamp(44px, 15vmin, 150px)/.95 var(--sans); } .tm-plan small { margin-left: .3em; font-size: .36em; font-weight: 600; color: var(--siva); } .tm-sub { font: 600 clamp(26px, 8vmin, 80px)/1.05 var(--sans); } .tm-gib { font-size: clamp(18px, 5vmin, 40px); color: #D9D2C1; font-style: italic; } .tm-pred { font-size: clamp(15px, 4vmin, 26px); color: var(--pvw); font-weight: 700; margin-top: .2em; } .tm-pred.tih { color: var(--siva); font-weight: 600; } .tm-nap { width: 100%; height: clamp(6px, 1.4vmin, 12px); } .tm-prazno { font-size: clamp(22px, 6vmin, 44px); color: var(--siva); } .tm-prihaja { grid-area: p; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(6px * var(--zm)); border-top: 1px solid var(--crta); padding-top: calc(10px * var(--zm)); } .tm-pr-g { font-size: clamp(12px, 3vmin, 16px); letter-spacing: .08em; text-transform: uppercase; color: var(--temna); } #t-prihaja .tm-pr { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: .6em; align-items: center; padding: .45em .6em; border-radius: calc(8px * var(--zm)); background: var(--grafit); border-left: calc(5px * var(--zm)) solid var(--b); font-size: clamp(16px, 4.2vmin, 24px); margin-bottom: calc(6px * var(--zm)); } .tm-pr .kn { font: 800 1.2em/1 var(--sans); color: var(--jantar); } .tm-pr .tx { display: grid; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-pr .tx i { font-size: .82em; color: #D9D2C1; overflow: hidden; text-overflow: ellipsis; } .tm-pr .pc { font: 800 1.15em/1 var(--sans); color: var(--siva); font-variant-numeric: tabular-nums; } .tm-pogled { display: grid; gap: calc(6px * var(--zm)); } .tm-pogled small { font-size: calc(13px * var(--zm)); letter-spacing: .08em; text-transform: uppercase; color: var(--temna); } /* ležeč telefon: številka in sličica levo, besedilo desno */ @media (orientation: landscape) and (max-height: 560px) { .tabm { padding: calc(16px * var(--zm)) calc(22px * var(--zm)) calc(12px * var(--zm)) !important; gap: calc(6px * var(--zm)); } .tabm.post-pok { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: 'g g' 'k p' !important; } .tabm.post-pok .tm-prihaja { border-top: 0; border-left: 1px solid var(--crta); padding: 0 0 0 calc(12px * var(--zm)); } .tm-kader { grid-template-columns: auto minmax(0, 1fr); column-gap: calc(18px * var(--zm)); align-content: center; } .tm-kader > .tm-vr { grid-row: 1 / span 6; flex-direction: column; align-items: flex-start; } .tm-plan { font-size: clamp(40px, 16vmin, 110px); } .tm-sub { font-size: clamp(22px, 8vmin, 56px); } } /* ═══ ZEV-REZIJA-V131: štirje pogledi snemalca, vsi s trakom kadrov spodaj ═══ */ .tabm { grid-template-rows: auto minmax(0, 1fr) auto !important; grid-template-areas: 'g' 'k' 't' !important; } .tabm.post-pok { grid-template-rows: auto auto minmax(0, 1fr) auto !important; grid-template-areas: 'g' 'k' 'p' 't' !important; } .tabm.post-vse { grid-template-rows: auto minmax(0, 1fr) auto auto !important; grid-template-areas: 'g' 'k' 's' 't' !important; } .tm-trak { grid-area: t; display: grid; gap: 4px; min-height: 0; } .tm-trak-nap { display: flex; justify-content: space-between; gap: 1em; font-size: clamp(11px, 2.8vmin, 15px); color: var(--temna); white-space: nowrap; overflow: hidden; } .tm-cas { height: clamp(78px, 15vmin, 130px) !important; } .post-vse .tm-cas { height: clamp(150px, 30vh, 300px) !important; } .post-vse .tm-kader { align-content: start; gap: 4px; } .post-vse .tm-kn b { font-size: clamp(44px, 12vmin, 110px); } .post-vse .tm-sl .pl-slika { width: clamp(46px, 11vmin, 90px); } .post-vse .tm-plan { font-size: clamp(34px, 10vmin, 96px); } .post-vse .tm-sub { font-size: clamp(20px, 5.5vmin, 52px); } .post-vse .tm-gib { font-size: clamp(15px, 3.8vmin, 30px); } .tm-skatle { grid-area: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(50px, 13vmin, 110px), 1fr)); gap: 5px; } .tsk { display: grid; justify-items: center; gap: 2px; padding: 5px 2px; border-radius: 7px; background: #111922; border: 2px solid transparent; border-top: 4px solid var(--b); line-height: 1; } .tsk b { font: 800 clamp(20px, 6vmin, 40px)/1 var(--sans); color: var(--b); } .tsk small { font: 700 clamp(12px, 3.2vmin, 20px)/1 var(--sans); color: var(--siva); font-variant-numeric: tabular-nums; } .tsk.jaz { border-color: var(--papir); } .tsk.zivo { background: #5A1216; border-color: var(--pgm); } .tsk.zivo b, .tsk.zivo small { color: #fff; } .tsk.nasl { border-color: var(--pvw); } .tsk.nasl small { color: var(--pvw); } .tm-pogled .gumb { display: grid; justify-items: start; text-align: left; } .tm-pogled .gumb small { font-size: .62em; font-weight: 500; opacity: .75; } @media (orientation: landscape) and (max-height: 560px) { .tabm { grid-template-rows: auto minmax(0, 1fr) auto !important; } .tabm.post-pok { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) auto !important; grid-template-areas: 'g g' 'k p' 't t' !important; } .tabm.post-vse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto auto minmax(0, 1fr) !important; grid-template-areas: 'g g' 'k s' 't t' !important; } .post-vse .tm-kader > .tm-vr { display: none; } .post-vse .tm-kader { grid-template-columns: minmax(0, 1fr); } .post-vse .tm-cas { min-height: 120px; } .tm-cas { height: clamp(64px, 18vmin, 96px) !important; } .tm-trak-nap { display: none; } } /* ═══ ZEV-REZIJA-V131: pogled snemalca iz dema (demo.html, zaslon snemalca), prenesen v Režijo ═══ */ .op { --n-noc: #0E141B; --n-grafit: #1A2430; --n-crta: #2B3947; --n-papir: #ECE5D3; --n-siva: #9AA7B4; --n-temna: #6F7B87; --n-jantar: #E8B04B; --n-pgm: #E5484D; --n-pvw: #30C77B; position: relative; overflow: hidden; background: var(--n-noc); color: var(--n-papir); font-family: var(--sans); border-radius: 16px; } .op.v-tab { width: 1280px; height: 800px; --okv: 14px; --pad: 18px 24px 12px; --f-st: 58px; --f-kn: 150px; --f-plan: 96px; --f-sub: 50px; --f-gib: 26px; --f-odst: 74px; --sl: 150px; --cas-h: 84px; --bus: 60px; --f-row: 18px; } .op.v-lez { width: 844px; height: 390px; --okv: 10px; --pad: 8px 14px 6px; --f-st: 34px; --f-kn: 78px; --f-plan: 50px; --f-sub: 26px; --f-gib: 15px; --f-odst: 42px; --sl: 66px; --cas-h: 36px; --bus: 30px; --f-row: 14px; border-radius: 34px; } .op.v-tel { width: 390px; height: 844px; --okv: 10px; --pad: 12px 12px 10px; --f-st: 38px; --f-kn: 82px; --f-plan: 52px; --f-sub: 28px; --f-gib: 16px; --f-odst: 44px; --sl: 72px; --cas-h: 56px; --bus: 38px; --f-row: 15px; border-radius: 34px; } .op .op-rob { position: absolute; inset: 0; border: var(--okv) solid transparent; border-radius: inherit; pointer-events: none; z-index: 3; } .op.s-zivo { background: #1B0E12; } .op.s-zivo .op-rob { border-color: var(--n-pgm); } .op.s-pripravi .op-rob { border-color: var(--n-pvw); } .op.s-kmalu .op-rob { border-color: var(--n-jantar); border-style: dashed; } .op .op-in { position: absolute; inset: var(--okv); padding: var(--pad); display: grid; gap: 10px 18px; min-height: 0; } .op.v-tab .op-in, .op.v-lez .op-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: 'glava glava' 'bus bus' 'zdaj desno' 'cas cas'; } .op.v-lez .op-in { gap: 5px 12px; } .op.v-tel .op-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: 'glava' 'bus' 'zdaj' 'desno' 'cas'; gap: 8px; } .op .op-glava { grid-area: glava; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; min-width: 0; } .op .op-st { min-width: 1.2em; padding: 0 .12em; height: 1.2em; display: grid; place-items: center; border-radius: 10px; background: var(--b); color: #0E141B; font: 800 var(--f-st)/1 var(--sans); } .op .op-ime { display: grid; line-height: 1.02; min-width: 0; } .op .op-ime b { font-size: calc(var(--f-st) * .4); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .op .op-ime span { font-size: calc(var(--f-st) * .56); font-weight: 800; color: var(--n-siva); } .op.s-zivo .op-ime span { color: var(--n-pgm); } .op.s-pripravi .op-ime span { color: var(--n-pvw); } .op.s-kmalu .op-ime span { color: var(--n-jantar); } .op .op-odst { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: end; line-height: 1; } .op .op-odst small { grid-column: 1 / -1; justify-self: end; font-size: calc(var(--f-odst) * .18); color: var(--n-siva); letter-spacing: .08em; text-transform: uppercase; } .op .op-odst span { font-size: calc(var(--f-odst) * .24); color: var(--n-siva); text-align: right; padding-bottom: .3em; } .op .op-odst span b { color: var(--n-jantar); font-weight: 800; } .op .op-odst > b { font-size: var(--f-odst); font-weight: 800; color: var(--n-jantar); font-variant-numeric: tabular-nums; } .op .op-odst.blizu > b { color: var(--n-pvw); } .op.s-zivo .op-odst > b { color: var(--n-papir); } /* vodilo programa: katera kamera je v živo, katera je naslednja */ .op .op-bus { grid-area: bus; display: flex; align-items: center; gap: calc(var(--bus) * .18); padding: calc(var(--bus) * .12) calc(var(--bus) * .2); border-radius: 10px; background: #111922; border: 1px solid var(--n-crta); min-width: 0; } .op .op-bus > span { font-size: calc(var(--bus) * .28); color: var(--n-siva); letter-spacing: .06em; text-transform: uppercase; margin-right: calc(var(--bus) * .1); } .op .opk { display: grid; justify-items: center; gap: 2px; min-width: var(--bus); } .op .opk b { width: var(--bus); height: var(--bus); border-radius: calc(var(--bus) * .16); display: grid; place-items: center; font: 800 calc(var(--bus) * .62)/1 var(--sans); color: var(--b); border: 2px solid color-mix(in srgb, var(--b) 45%, transparent); background: transparent; } .op .opk small { font-size: calc(var(--bus) * .3); color: var(--n-temna); white-space: nowrap; min-height: 1.1em; font-variant-numeric: tabular-nums; } .op .opk.zivo b { background: var(--n-pgm); color: #fff; border-color: var(--n-pgm); box-shadow: 0 0 0 3px rgba(229, 72, 77, .35); } .op .opk.zivo small { color: #FF8A8E; font-weight: 700; } .op .opk.nasl b { border-color: var(--n-pvw); color: var(--n-pvw); } .op .opk.nasl small { color: var(--n-pvw); font-weight: 700; } .op .opk.jaz b { outline: 3px solid var(--n-papir); outline-offset: 3px; } .op.v-tel .op-bus, .op.v-lez .op-bus { justify-content: space-between; } .op.v-tel .op-bus > span, .op.v-lez .op-bus > span { display: none; } .op .op-zdaj { grid-area: zdaj; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 16px; align-items: center; align-content: center; min-height: 0; } .op.v-tel .op-zdaj, .op.v-lez .op-zdaj { gap: 10px; } .op .op-kn { display: grid; justify-items: start; line-height: .86; } .op .op-kn small { font-size: calc(var(--f-kn) * .14); color: var(--n-siva); letter-spacing: .08em; text-transform: uppercase; } .op .op-kn b { font-size: var(--f-kn); font-weight: 800; color: var(--n-jantar); font-variant-numeric: tabular-nums; } .op.s-zivo .op-kn b { color: var(--n-papir); } .op .op-kn.tih b { color: var(--n-temna); } .op .op-sl { width: var(--sl); } .op .op-sl svg { width: 100%; height: auto; display: block; border-radius: 8px; } .op .op-kader { display: grid; gap: 3px; justify-items: start; min-width: 0; } .op .op-znacka { display: inline-flex; align-items: center; gap: 8px; font-size: calc(var(--f-sub) * .42); font-weight: 800; } .op .op-znacka em { font-style: normal; padding: 3px 9px; border-radius: 5px; color: #0E141B; background: var(--n-siva); } .op.s-zivo .op-znacka em { background: var(--n-pgm); color: #fff; } .op.s-pripravi .op-znacka em { background: var(--n-pvw); } .op.s-kmalu .op-znacka em { background: var(--n-jantar); } .op .op-plan { font-size: var(--f-plan); font-weight: 800; line-height: .92; white-space: nowrap; } .op .op-plan small { font-size: .42em; font-weight: 600; color: var(--n-siva); margin-left: .18em; } .op .op-sub { font-size: var(--f-sub); font-weight: 600; line-height: 1.02; max-width: 100%; } .op .op-gib { font: italic 400 var(--f-gib)/1.3 var(--serif); color: #D9D2C1; max-width: 100%; } .op .op-gib b { font-style: normal; font-family: var(--sans); font-weight: 700; color: var(--n-jantar); } .op .op-nap { width: min(380px, 100%); height: 6px; border-radius: 3px; background: rgba(236, 229, 211, .15); overflow: hidden; margin-top: 5px; } .op .op-nap i { display: block; height: 100%; width: 0; background: var(--n-pgm); } .op .op-prosto { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px dashed #3A4958; min-width: 0; } .op .op-prosto h3 { margin: 0; font-size: calc(var(--f-sub) * .7); font-weight: 800; } .op .op-prosto ul { margin: 0; padding-left: 1.1em; font-size: max(14px, calc(var(--f-gib) * .72)); line-height: 1.42; } .op.v-lez .op-prosto { padding: 6px 10px; gap: 2px; } .op.v-lez .op-prosto li:nth-child(n+3) { display: none; } .op.v-tel .op-zdaj { grid-template-columns: auto auto minmax(0, 1fr); } .op.v-tel .op-zdaj.prosto, .op.v-lez .op-zdaj.prosto { grid-template-columns: auto minmax(0, 1fr); } .op.v-tel .op-zdaj.prosto .op-sl, .op.v-lez .op-zdaj.prosto .op-sl, .op.v-tab .op-zdaj.prosto .op-sl { display: none; } .op .op-zdaj.prosto { grid-template-columns: auto minmax(0, 1fr); } /* seznam kadrov: vsi kadri kot opombe, tvoji poudarjeni */ .op .op-desno { grid-area: desno; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; min-height: 0; } .op .op-pr-glava { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .op .op-pr-glava span { font-size: calc(var(--f-row) * .82); color: var(--n-siva); letter-spacing: .08em; text-transform: uppercase; } .op .op-stik { display: flex; gap: 4px; } .op .op-stik button { min-height: 30px; padding: 2px 11px; border-radius: 999px; border: 1px solid var(--n-crta); background: transparent; color: var(--n-papir); font: 600 calc(var(--f-row) * .85)/1 var(--sans); cursor: pointer; } .op .op-stik button[aria-pressed="true"] { background: var(--n-papir); color: var(--n-noc); } .op .op-pr { display: grid; gap: 5px; align-content: start; overflow: hidden; min-height: 0; } .op .kv { display: grid; grid-template-columns: 3.2em 1.7em minmax(0, 1fr) auto; gap: .5em; align-items: center; padding: .38em .6em; border-radius: 8px; background: var(--n-grafit); border: 1px solid var(--n-crta); font-size: var(--f-row); line-height: 1.12; } .op .kv .kn { font-size: 1.45em; font-weight: 800; color: var(--n-siva); font-variant-numeric: tabular-nums; } .op .kv .ch { width: 1.6em; height: 1.6em; border-radius: 5px; display: grid; place-items: center; background: var(--b); color: #0E141B; font-weight: 800; } .op .kv .tx { display: grid; min-width: 0; } .op .kv .tx > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .op .kv .tx i { font-family: var(--serif); color: var(--n-siva); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9em; } .op .kv .pc { font-size: 1.25em; font-weight: 800; color: var(--n-siva); font-variant-numeric: tabular-nums; } .op .kv.moj { border: 2px solid var(--b); } .op .kv.moj .kn { color: var(--n-jantar); } .op .kv.zivo { background: #2A1419; border-color: var(--n-pgm); } .op .kv.zivo .kn { color: #fff; } .op .kv.zivo .pc { color: #FF8A8E; font-size: .95em; text-transform: uppercase; letter-spacing: .04em; } .op .kv.tuj { opacity: .78; } .op.v-tel .kv .tx i, .op.v-lez .kv .tx i { display: none; } .op.v-lez .op-pr .kv:nth-child(n+4), .op.v-tel .op-pr .kv:nth-child(n+5) { display: none; } .op .op-prazno { color: var(--n-temna); font-size: 15px; } /* ovoj: pogled iz dema se riše v velikosti naprave iz dema in se raztegne na zaslon */ .tab.tabd { display: block !important; padding: 0 !important; background: #05080C !important; overflow: hidden; } .tabd .op { position: absolute; left: 0; top: 0; transform-origin: 0 0; } .op.s-zivo .op-rob { animation: tally-utrip 1s ease-in-out infinite; } .op.s-pripravi.blizu .op-rob { animation: tally-utrip .5s ease-in-out infinite; } .op .op-st { border: 0; cursor: pointer; } .op .op-nap i { width: 100%; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; } .op .op-kader .imam { margin-top: 6px; } .pd-obr-v { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .pd-obr-izid { margin-top: 10px; line-height: 1.5; } .pd-obr-izid .napaka { color: #FF9A9D; font-weight: 700; } .pd-obr-izid .ok { color: var(--pvw); font-weight: 700; } .op .op-cas { grid-area: cas; display: grid; gap: 3px; } .op .op-cas-nap { display: flex; justify-content: space-between; font-size: calc(var(--f-row) * .78); color: var(--n-temna); } .op .op-cas-nap b { color: var(--n-siva); } .op .op-cas-okno { height: var(--cas-h); border-radius: 8px; background: #111922; border: 1px solid var(--n-crta); overflow: hidden; } .op .op-cas-okno svg { display: block; width: 100%; height: 100%; } .op .op-cas-okno svg { width: auto; height: auto; } .op.v-tel .op-bus { --bus: min(38px, calc(330px / var(--nk, 8) - 7px)); } .op.v-tel .opk small { font-size: 10px; } /* ZEV-REZIJA-V132: GO utripa, ko je kader na vrsti in čaka na režiserja */ @keyframes go-utrip { 0%, 100% { box-shadow: 0 0 0 0 rgba(48, 199, 123, .9); } 50% { box-shadow: 0 0 0 10px rgba(48, 199, 123, 0); } } .zv-go.zamuja { animation: go-utrip .8s ease-out infinite; } /* ZEV-REZIJA-V133: premikanje po skladbi v Živo */ .zv-premik .gumb.ikona { min-width: calc(34px * var(--zm)); min-height: calc(34px * var(--zm)); font-size: calc(17px * var(--zm)); padding: 0 calc(6px * var(--zm)); } .zv-takt-v { width: calc(64px * var(--zm)); min-height: calc(34px * var(--zm)); padding: 2px calc(8px * var(--zm)); border-radius: calc(6px * var(--zm)); border: 1px solid var(--crta); background: var(--noc); color: var(--papir); font: 700 calc(16px * var(--zm))/1 var(--sans); } .zv-cas { touch-action: none; cursor: grab; } .zv-cas:active { cursor: grabbing; } .zc-vlek { position: absolute; left: 18%; top: 4px; transform: translateX(8px); padding: 3px 8px; border-radius: 5px; background: var(--jantar); color: #0E141B; font: 800 calc(14px * var(--zm))/1 var(--sans); pointer-events: none; } body.brez-zveze:not([data-zveza])::before { content: 'Ni zveze s strežnikom. Odštevanja tečejo po uri naprave; ukazi počakajo in gredo, ko se zveza vrne.'; } /* ZEV-REZIJA-V136: velikost sobe */ .soba-meja { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #3A2E10; color: var(--jantar); font: 700 calc(13px * var(--zm))/1.2 var(--sans); white-space: nowrap; } .soba-meja.cez { background: var(--pgm); color: #fff; } #soba-meja-fix { position: fixed; left: 12px; bottom: 12px; z-index: 60; pointer-events: auto; } #soba-meja-fix .soba-meja { margin: 0; display: inline-block; padding: 6px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.4); } body.v-izvedbi #soba-meja-fix, body:not(.v-izvedbi) #r-zveza .soba-meja { display: none; } /* ═══ ZEV-REZIJA-V137: pogled snemalca Odštevanje (zadnjih pet kadrov do tvojega) ═══ */ .post-pet .tm-kader { grid-template-columns: minmax(0, 1fr) !important; align-content: stretch; } .post-pet.kmalu .tm-stanje b { color: var(--jantar); } .post-pet.kmalu .tm-odst b { color: var(--jantar); } .pt { display: grid; align-content: end; gap: calc(6px * var(--zm)); min-height: 0; overflow: hidden; } .pt.dvig { animation: pt-dvig .35s ease-out; } @keyframes pt-dvig { from { transform: translateY(calc(40px * var(--zm))); opacity: .5; } to { transform: none; opacity: 1; } } .pt-vec { font-size: clamp(13px, 3.4vmin, 18px); color: var(--temna); text-align: center; padding: .2em 0; } .pt-v { display: grid; grid-template-columns: 3.1em 1.8em minmax(0, 1fr) auto; gap: .5em; align-items: center; padding: .5em .6em; border-radius: calc(8px * var(--zm)); background: var(--grafit); border-left: calc(6px * var(--zm)) solid var(--b); font-size: clamp(20px, 6vmin, 34px); line-height: 1.1; } .pt-v .kn { font: 800 1.1em/1 var(--sans); color: var(--papir); font-variant-numeric: tabular-nums; } .pt-v .ch { font: 800 1em/1 var(--sans); background: var(--b); color: #0E141B; border-radius: 5px; text-align: center; padding: .12em 0; } .pt-v .tx { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--siva); } .pt-v .tx em { font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-right: .5em; font-size: .8em; padding: .1em .4em; border-radius: 4px; } .pt-v .pc { font: 800 1em/1 var(--sans); color: var(--siva); font-variant-numeric: tabular-nums; } .pt-v.l-dalec { opacity: .72; } .pt-v.l-pozor { box-shadow: inset 0 0 0 2px var(--jantar); } .pt-v.l-pozor em { background: var(--jantar); color: #0E141B; } .pt-v.l-pripravi { box-shadow: inset 0 0 0 2px var(--pvw); } .pt-v.l-pripravi em { background: var(--pvw); color: #0E141B; } .pt-v.zdaj { background: #4A1418; opacity: 1; } .pt-v.zdaj .pc { color: #FF8A8E; } .pt-v.zdaj .kn { color: #fff; } .pt-moj { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(14px * var(--zm)); align-items: center; margin-top: calc(6px * var(--zm)); padding: calc(12px * var(--zm)) calc(14px * var(--zm)); border-radius: calc(12px * var(--zm)); background: #111922; border: calc(4px * var(--zm)) solid var(--b); } .pt-mk { display: grid; line-height: .9; } .pt-mk small { font-size: clamp(11px, 2.8vmin, 15px); letter-spacing: .08em; text-transform: uppercase; color: var(--siva); } .pt-mk b { font: 800 clamp(52px, 17vmin, 150px)/.9 var(--sans); color: var(--b); font-variant-numeric: tabular-nums; } .pt-mt { min-width: 0; display: grid; gap: .15em; } .pt-plan { font: 800 clamp(34px, 11vmin, 96px)/.95 var(--sans); } .pt-plan small { margin-left: .3em; font-size: .42em; font-weight: 600; color: var(--siva); } .pt-sub { font: 600 clamp(22px, 6.4vmin, 56px)/1.05 var(--sans); } .post-pet .tm-stanje b { font-size: clamp(26px, 8vmin, 72px); } .pt-gib { font-size: clamp(15px, 4vmin, 30px); color: #D9D2C1; font-style: italic; } .pt.zivo { align-content: center; } .pt-moj.zivo { border-color: var(--pgm); background: #2A0D10; } .pt-moj.zivo .pt-mk small { color: #FF8A8E; font-weight: 800; } .pt-potem { font-size: clamp(16px, 4.4vmin, 28px); color: var(--papir); text-align: center; } .pt-potem.tih { color: var(--siva); font-size: clamp(14px, 3.8vmin, 22px); } @media (orientation: landscape) and (max-height: 560px) { .pt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(12px * var(--zm)); grid-auto-flow: row dense; } .pt > .pt-v, .pt > .pt-vec { grid-column: 1; } .pt > .pt-moj { grid-column: 2; grid-row: 1 / span 7; align-self: end; margin-top: 0; } .pt.zivo { grid-template-columns: minmax(0, 1fr); } .pt.zivo > .pt-moj { grid-column: 1; grid-row: auto; } .pt-v { font-size: clamp(14px, 4vmin, 20px); padding: .3em .5em; } .pt-mk b { font-size: clamp(44px, 14vmin, 90px); } } /* ZEV-REZIJA-V139: oznaka pozor / pripravi se v vrstici, ki je v živo, diskretno utripa */ .pt-v .tx em { font-size: .7em; letter-spacing: .02em; } .pt-v.zdaj.l-pozor .tx em, .pt-v.zdaj.l-pripravi .tx em { animation: pt-oznaka 1.2s ease-in-out infinite; } @keyframes pt-oznaka { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .pt-v { grid-template-columns: 2.7em 1.7em minmax(0, 1fr) auto; } .pt-v .tx { display: flex; align-items: center; gap: .45em; } .pt-v .tx em { flex: none; margin-right: 0; } .pt-v .tx .pl { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pt-v .pc.pt-zv { font-size: .8em; } /* ════ ZEV-REZIJA-V140: sledilec — pomoč bralcu, stanje, Nadzor › Sledilec ════ */ .bs-stanje { color: #cfc6b0; font-weight: 600; } .bs-stanje small { color: var(--siva); font-weight: 500; } .izv-pomoc { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(150px * var(--zm)), 1fr)); gap: calc(8px * var(--zm)); margin: 0 0 calc(8px * var(--zm)); padding: calc(8px * var(--zm)); border-radius: calc(10px * var(--zm)); background: rgba(14,20,27,.55); border: 1px solid rgba(232,176,75,.35); } .ip-v { display: flex; flex-direction: column; gap: calc(4px * var(--zm)); min-width: 0; } .ip-v small { font-size: calc(12px * var(--zm)); color: var(--siva); text-transform: uppercase; letter-spacing: .05em; } .ip-v b { font-size: calc(22px * var(--zm)); font-weight: 800; line-height: 1.1; } .ip-v span { color: var(--siva); font-size: calc(14px * var(--zm)); } .ip-kand { display: flex; flex-wrap: wrap; gap: calc(6px * var(--zm)); } .izv-kand { min-height: calc(44px * var(--zm)); padding: calc(4px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(10px * var(--zm)); border: 2px solid #3987e5; background: #13243a; color: var(--papir); font: inherit; font-weight: 800; font-size: calc(18px * var(--zm)); cursor: pointer; touch-action: manipulation; } .izv-kand i { font-style: normal; font-weight: 600; font-size: calc(13px * var(--zm)); color: #9ec5f4; margin-left: calc(4px * var(--zm)); } .izv-kand:active { transform: scale(.96); } .izv-tk.nap { background: #2a1a24; } .izv-tk.nap small { color: #e6a0bd; } .izv-pas-g .gumb.velik small { display: block; font-size: calc(12px * var(--zm)); font-weight: 500; opacity: .8; } .snz { display: flex; flex-direction: column; gap: calc(12px * var(--zm)); padding: calc(4px * var(--zm)) 0 calc(24px * var(--zm)); } .snz-glava { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(160px * var(--zm)), 1fr)); gap: calc(10px * var(--zm)); } .snz-k { display: flex; flex-direction: column; gap: 2px; padding: calc(10px * var(--zm)) calc(12px * var(--zm)); border-radius: calc(12px * var(--zm)); background: #111922; border: 1px solid var(--crta); min-width: 0; } .snz-k small { font-size: calc(12px * var(--zm)); color: var(--siva); text-transform: uppercase; letter-spacing: .06em; } .snz-k b { font-size: calc(28px * var(--zm)); font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .snz-k span { font-size: calc(14px * var(--zm)); color: var(--siva); overflow: hidden; text-overflow: ellipsis; } .snz-k.opoz { border-color: #fab219; } .snz-k.opoz b { color: #fab219; } .snz-orodja { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); } .snz-okna { display: flex; gap: calc(4px * var(--zm)); } .snz-info { color: var(--temna); font-size: calc(14px * var(--zm)); } .snz-desno { margin-left: auto; display: flex; flex-wrap: wrap; gap: calc(6px * var(--zm)); } .snz-legenda, .snz-zl { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)) calc(14px * var(--zm)); color: var(--siva); font-size: calc(14px * var(--zm)); } .snz-legenda span, .snz-zl span { display: inline-flex; align-items: center; gap: calc(6px * var(--zm)); } .snz-sw { display: inline-block; width: calc(16px * var(--zm)); height: calc(4px * var(--zm)); border-radius: 2px; vertical-align: middle; background: var(--siva); margin-right: calc(4px * var(--zm)); } .snz-sw.kz { background: #c98500; } .snz-sw.sl { background: #3987e5; } .snz-sw.np { background: rgba(213,81,129,.45); height: calc(10px * var(--zm)); border-top: 2px solid #d55181; border-bottom: 2px solid #d55181; } .snz-sw.ka { width: calc(10px * var(--zm)); height: calc(10px * var(--zm)); border-radius: 50%; background: none; border: 2px solid #3987e5; } .snz-sw.re { background: repeating-linear-gradient(90deg, #9AA7B4 0 5px, transparent 5px 9px); } .snz-sw.kk { background: #d95926; } .snz-sw.op { background: #fab219; } .snz-sw.iz { background: #d03b3b; } .snz-sw.dvo { height: calc(12px * var(--zm)); background: linear-gradient(90deg, rgba(236,131,90,.12), rgba(236,131,90,.93)); } .snz-sw.tih { height: calc(12px * var(--zm)); background: repeating-linear-gradient(135deg, rgba(154,167,180,.6) 0 1px, transparent 1px 5px); } .snz-sw.trd { height: calc(5px * var(--zm)); background: #3987e5; } .snz-grafi { position: relative; display: grid; gap: calc(6px * var(--zm)); padding: calc(10px * var(--zm)); border-radius: calc(12px * var(--zm)); background: #111922; border: 1px solid var(--crta); } .snz-g h4 { margin: 0 0 2px; font-size: calc(14px * var(--zm)); font-weight: 600; color: var(--papir); letter-spacing: .02em; } .snz-g h4 small { color: var(--temna); font-weight: 500; margin-left: calc(6px * var(--zm)); } .snz-g canvas { display: block; width: 100%; height: calc(110px * var(--zm)); touch-action: pan-y; } .snz-g.visok canvas { height: calc(260px * var(--zm)); } .snz-tip { position: absolute; z-index: 5; max-width: calc(320px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: #0b1117; border: 1px solid #3a4a5b; box-shadow: 0 6px 20px rgba(0,0,0,.5); font-size: calc(14px * var(--zm)); line-height: 1.35; color: var(--papir); pointer-events: none; } .snz-tip b { font-weight: 800; } .snz-zem { display: flex; flex-direction: column; gap: calc(6px * var(--zm)); padding: calc(10px * var(--zm)); border-radius: calc(12px * var(--zm)); background: #111922; border: 1px solid var(--crta); } .snz-zem .nz-nas small { text-transform: none; letter-spacing: 0; color: var(--temna); font-weight: 500; margin-left: calc(6px * var(--zm)); } .snz-zem-ovoj { position: relative; } .snz-zem-ovoj canvas { display: block; width: 100%; height: calc(84px * var(--zm)); } .snz-zem-sez { display: grid; gap: calc(6px * var(--zm)); font-size: calc(14px * var(--zm)); } .snz-dvo { margin: 0; padding-left: calc(18px * var(--zm)); columns: 2 calc(280px * var(--zm)); color: var(--siva); } .snz-dvo b { color: var(--papir); } .snz-spodaj { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: calc(10px * var(--zm)); } .snz-dnevnik { max-height: calc(360px * var(--zm)); overflow: auto; } .snz-tab { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--zm)); } .snz-tab th { position: sticky; top: 0; background: #111922; text-align: left; color: var(--siva); font-weight: 600; padding: calc(4px * var(--zm)) calc(6px * var(--zm)); border-bottom: 1px solid var(--crta); } .snz-tab td { padding: calc(4px * var(--zm)) calc(6px * var(--zm)); border-bottom: 1px solid #18222d; vertical-align: top; } .snz-tab td:first-child { color: var(--temna); white-space: nowrap; font-variant-numeric: tabular-nums; } .snz-tab td:nth-child(2) { white-space: nowrap; color: #c98500; } .snz-tab tr.op td:last-child { color: #fab219; } .snz-tab tr.kr td:last-child { color: #ff8a8a; } @media (max-width: 900px) { .snz-spodaj { grid-template-columns: minmax(0, 1fr); } .snz-desno { margin-left: 0; } .snz-g.visok canvas { height: calc(200px * var(--zm)); } } /* ─── ZEV-REZIJA-V141: posnetek generalke, ritem kazalca (Doba), graf poslušalca pri bralcu in tajnici ─── */ .gumb.rdec { background: #5a1a1d; border-color: var(--pgm); color: #fff; } .gumb.doba .doba-k { display: inline-block; min-width: 3.2em; font-variant-numeric: tabular-nums; font-size: calc(22px * var(--zm)); color: #9FE2BF; } .gumb.doba.tece { border-color: #6fe0a6; } .gumb.doba.tece.bije { animation: doba-bije .16s ease-out; } @keyframes doba-bije { from { box-shadow: inset 0 0 0 calc(4px * var(--zm)) #6fe0a6; } to { box-shadow: inset 0 0 0 0 transparent; } } .gumb.doba.drzi { border-color: var(--jantar); } .gumb.doba.drzi .doba-k { color: var(--jantar); } .izv-dobe { color: var(--pvw); white-space: nowrap; } #gen-pas:empty { display: none; } .gen-pas { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4px * var(--zm)) calc(10px * var(--zm)); padding: calc(6px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); border: 1px solid var(--crta); background: var(--grafit); margin-bottom: calc(6px * var(--zm)); font-size: calc(15px * var(--zm)); } .gen-pas b { letter-spacing: .04em; } .gen-pas span { color: var(--siva); } .gen-pas small { flex-basis: 100%; color: #fab219; } .gen-pas.snema { border-color: var(--pgm); } .gen-pas.snema b { color: #ff8a8a; } .gen-pas.caka b { color: var(--jantar); } .gen-pas.poslji b { color: #9FE2BF; } .gen-pas.napaka { border-color: #fab219; } .gen-pas.napaka b { color: #fab219; } #b-gen.vklop { border-color: var(--pgm); color: #ff8a8a; } .bs-mini { cursor: pointer; border-radius: calc(6px * var(--zm)); background: #111922; padding: calc(4px * var(--zm)) 0; } .bs-mini canvas, .tj-sled-g canvas { display: block; width: 100%; height: calc(118px * var(--zm)); } .tj-sled { display: grid; gap: calc(6px * var(--zm)); padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(10px * var(--zm)); background: #111922; border: 1px solid var(--crta); } .tj-sled h3 { display: flex; align-items: center; gap: calc(8px * var(--zm)); margin: 0; font-size: calc(16px * var(--zm)); } .tj-sled h3 small { color: var(--temna); font-weight: 500; } .tj-sled h3 .gumb { margin-left: auto; } .tj-sled-g { cursor: pointer; } .tj-sled-st { display: flex; flex-wrap: wrap; gap: calc(2px * var(--zm)) calc(12px * var(--zm)); font-size: calc(14px * var(--zm)); color: var(--siva); } .tj-sled-st b { color: var(--papir); } .tjs-st { color: var(--papir); font-weight: 700; } .tjs-st.opoz { color: #fab219; } .snz-okno { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: var(--noc); } .snz-okno-gl { display: flex; align-items: center; gap: calc(12px * var(--zm)); padding: calc(8px * var(--zm)) calc(16px * var(--zm)); border-bottom: 1px solid var(--crta); } .snz-okno-gl b { font-size: calc(22px * var(--zm)); } .snz-okno-gl .gumb { margin-left: auto; } .snz-okno-telo { flex: 1; overflow: auto; padding: 0 calc(16px * var(--zm)); } .snz-gen { display: flex; flex-direction: column; gap: calc(8px * var(--zm)); padding: calc(10px * var(--zm)); border-radius: calc(12px * var(--zm)); background: #111922; border: 1px solid var(--crta); } .snz-gen:empty { display: none; } .snz-gen-gl { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)) calc(14px * var(--zm)); } .snz-gen-gl .nz-nas { margin: 0; } .snz-gen-gl .nz-nas small { text-transform: none; letter-spacing: 0; color: var(--temna); font-weight: 500; margin-left: calc(6px * var(--zm)); } #snz-gen-snemaj { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); } .snz-gen-st { color: var(--siva); font-size: calc(14px * var(--zm)); } .snz-gen-opis { margin: 0; color: var(--siva); font-size: calc(14px * var(--zm)); line-height: 1.4; max-width: 70em; } .snz-gen-tab td { vertical-align: middle; } .snz-gen-tab tr.upo td:first-child b { color: var(--pvw); } .snz-gen-tab tr.izbran td { background: #16212c; } .snz-gen-g { display: flex; flex-wrap: wrap; gap: calc(4px * var(--zm)); } .snz-gen-z { display: inline-block; padding: 1px calc(8px * var(--zm)); border-radius: 999px; border: 1px solid var(--crta); color: var(--siva); font-size: calc(13px * var(--zm)); white-space: nowrap; } .snz-gen-z.snema { border-color: var(--pgm); color: #ff8a8a; } .snz-gen-z.ok { border-color: #3987e5; color: #9cc4f2; } .snz-gen-z.upo { border-color: var(--pvw); color: var(--pvw); } .snz-gen-delo { padding: calc(8px * var(--zm)) calc(10px * var(--zm)); border-radius: calc(8px * var(--zm)); background: var(--grafit); font-size: calc(15px * var(--zm)); } .snz-gen-delo .napaka { color: #ff8a8a; } .snz-gen-por { display: grid; gap: calc(8px * var(--zm)); padding-top: calc(6px * var(--zm)); border-top: 1px solid var(--crta); } .snz-gen-ovoj canvas { display: block; width: 100%; height: calc(300px * var(--zm)); } .snz-gen-sez p { margin: calc(4px * var(--zm)) 0; font-size: calc(14px * var(--zm)); color: var(--siva); line-height: 1.5; } .snz-gen-sez b { color: var(--papir); } .snz-gen-t { font: inherit; font-size: calc(13px * var(--zm)); padding: 0 calc(6px * var(--zm)); border-radius: calc(4px * var(--zm)); border: 1px solid #fab219; background: transparent; color: #fab219; cursor: pointer; margin: 1px; } .snz-gen-pos { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--zm)); } .snz-gen-pos audio { height: calc(36px * var(--zm)); min-width: min(100%, calc(360px * var(--zm))); } .snz-gen-pos input { width: 6em; } .snz-sw.gp { width: calc(5px * var(--zm)); height: calc(12px * var(--zm)); background: #3987e5; } @media (max-width: 900px) { .snz-gen-ovoj canvas { height: calc(220px * var(--zm)); } } .snz-sw.sg { background: #d55181; height: calc(2px * var(--zm)); }