:root { /* IRÁNY A · IPARI/MŰSZAKI paletta (makett-A, 2026-08-18) — sötét CAD-műszerfal, hideg kék energia, monospace adat. Csak a chrome színe; a vászon-ikonokat NEM érinti. */ --bg: #14181f; --panel: #1a2029; --panel2: #1e2632; --line: #2a3441; --text: #c7d0da; --muted: #82909e; /* makett #7d8a99 helyett: AA-kontraszt a panel2 inputokon is (4.67) */ --accent: #3aa0ff; --accent-deep: #2563eb; /* mélyebb akció-kék: elsődleges gombok, mentés */ --accent-bg: rgba(58, 160, 255, 0.12); --danger: #f2574e; /* makett #ef4444 helyett: AA-kontraszt a panelen (4.87) */ --ok: #22c55e; --warn: #f5a524; --fg: #c7d0da; /* örökölt hivatkozások (mobileTopMenu, btnTopMore) — a --text szinónimája */ --mono: 'JetBrains Mono', 'Courier New', monospace; /* adat, koordináta, mérés */ } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; background: var(--bg); color: var(--text); display: flex; flex-direction: column; height: 100vh; overflow: hidden; } #topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; background: linear-gradient(180deg, #1c232e, #181e27); border-bottom: 1px solid var(--line); flex: 0 0 auto; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; white-space: nowrap; letter-spacing: .5px; color: #e8eef5; } .brand .ver { color: var(--accent); font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-left: 4px; font-weight: 400; white-space: nowrap; } /* makett-A brand-logo: kék conic-gradiens nyíl */ .brandLogo { width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; background: conic-gradient(from 200deg, #2563eb, #3aa0ff 40%, #1d4ed8); clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%); box-shadow: 0 0 10px rgba(58,160,255,.35); } .brandLogo.big { width: 30px; height: 30px; box-shadow: 0 0 18px rgba(58,160,255,.4); } .langbtn { font-size: 12px; padding: 4px 8px; white-space: nowrap; } .proj { display: flex; align-items: center; gap: 6px; } .spacer { flex: 1; } .status { color: var(--muted); font-family: var(--mono); font-size: 11px; min-width: 120px; } /* A „Mentve ✓" volt az EGYETLEN visszajelzés a mentésről, de a status-sor bármikor felülíródhat. A dirty-flag: amíg nem mentett módosítás van, a topbar alsó éle sárgás — az mentés-állapot állandó, periférikus jelzése (P1-4 javaslat alapján). */ body.dirty #topbar { border-bottom: 2px solid #f5a623; } /* sárgás figyelmeztető él — nem az accent-kék, hogy a mentés-állapot lásszon el */ /* P3-2 (FOUC): a nyelv gomb induló címkéje angol — míg az i18n fel nem írja, rejtve tartjuk. A .js osztály a head-ben kerül a -re (legkorábban); az i18n init() a .ready-t teszi rá, onnantól látszik a gomb. */ html.js #btnLang.langbtn { visibility: hidden; } html.js.ready #btnLang.langbtn { visibility: visible; } input, select, button { font: inherit; } input[type=text], input[type=number], input[type=password], input[type=email], input[type=search], input[type=tel], select { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; } #projName { width: 150px; font-family: var(--mono); font-size: 12px; } #projList { max-width: 170px; } button { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; cursor: pointer; } button:hover { border-color: var(--accent); } button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } button.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; font-weight: 600; } button.primary:hover { border-color: var(--accent); filter: brightness(1.08); } button.danger { color: var(--danger); } button.danger:hover { background: var(--danger); color: #fff; } button.tool { display: block; width: 100%; text-align: left; margin-bottom: 5px; font-size: 12px; } button.tool.subtle { color: var(--muted); } button.tool:hover { color: #fff; } button.tool.active { background: var(--accent-deep); color: #fff; border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(58,160,255,.25); } button.tool.paused { background: #e5a23f; color: #05121d; border-color: #e5a23f; } button.full { width: 100%; margin-top: 10px; } #main { flex: 1; display: flex; min-height: 0; } aside { width: 250px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; flex: 0 0 auto; display: flex; flex-direction: column; } #right { border-right: none; border-left: 1px solid var(--line); } #right.hidden { display: none; } /* Prop-panelek: renderProps() a .hidden osztállyal váltja, hogy CSAK a kijelölt elem panelje látsszon. Enélkül a .hidden nem rejt (nincs .panel.hidden szabály), és a jobb sávban egyszerre látszik minden szakma panelje — követhetetlen. */ #right .panel.hidden, #left .panel.hidden { display: none; } .panel { padding: 12px; border-bottom: 1px solid var(--line); } .panel.grow { flex: 0 0 auto; } .panel h3 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); } /* collapsible left-sidebar sections */ #left .panel > h3, #right .panel > h3 { cursor: pointer; user-select: none; } #left .panel > h3::before, #right .panel > h3::before { content: '▾'; display: inline-block; width: 13px; color: var(--muted); font-size: 10px; } #left .panel.collapsed > h3, #right .panel.collapsed > h3 { margin-bottom: 0; } #left .panel.collapsed > h3::before, #right .panel.collapsed > h3::before { content: '▸'; } #left .panel.collapsed > *:not(h3), #right .panel.collapsed > *:not(h3) { display: none; } #camList { max-height: 34vh; overflow-y: auto; } .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; } .row input[type=text], .row input[type=number], .row select { width: 120px; } .row input[type=range] { width: 120px; } .pwrow { display: inline-flex; align-items: center; gap: 4px; } .pwrow input { width: 96px; } .pwbtn { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 5px; opacity: .7; } .pwbtn:hover { opacity: 1; border-color: var(--muted); } .pwbtn.on { opacity: 1; border-color: var(--accent); } .rowval { text-align: right; font-size: 12px; color: var(--muted); margin: -4px 0 8px; } .hint { font-size: 12px; color: var(--muted); } .filebtn { display: block; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; margin-bottom: 6px; font-size: 13px; } .filebtn:hover { border-color: var(--accent); } #recList { list-style: none; margin: 0 0 8px; padding: 0; } #recList li { display: block; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } #recList li:last-child { border-bottom: none; } #recList .recTop { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } #recList .recBot { display: flex; align-items: center; gap: 6px; } #recList input[type=color] { width: 22px; height: 22px; padding: 0; border: none; background: none; border-radius: 4px; flex: 0 0 auto; cursor: pointer; } #recList input[type=text] { flex: 1; min-width: 0; padding: 4px 6px; } #recList .cnt { color: var(--accent); font-family: var(--mono); font-size: 11px; flex: 0 0 auto; } #recList .edit { flex: 1; min-width: 0; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; color: var(--muted); cursor: pointer; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #recList .edit:hover { border-color: var(--accent); color: var(--accent); } #recList .del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; } #recList .del:hover { color: var(--danger); } #panelList { list-style: none; margin: 0 0 8px; padding: 0; } #panelList li { display: block; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } #panelList li:last-child { border-bottom: none; } #panelList li.muted { color: var(--muted); font-size: 12px; } #panelList .recTop { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } #panelList .recBot { display: flex; align-items: center; gap: 6px; } #panelList input[type=color] { width: 22px; height: 22px; padding: 0; border: none; background: none; border-radius: 4px; flex: 0 0 auto; cursor: pointer; } #panelList input[type=text] { flex: 1; min-width: 0; padding: 4px 6px; } #panelList .cnt { color: var(--accent); font-family: var(--mono); font-size: 11px; flex: 0 0 auto; } #panelList .edit { flex: 1; min-width: 0; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; color: var(--muted); cursor: pointer; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #panelList .edit:hover { border-color: var(--accent); color: var(--accent); } #panelList .del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; } #panelList .del:hover { color: var(--danger); } .alarmWarn { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; } .alarmWarn .ok { color: var(--muted); font-size: 12px; } .alarmWarn .warn { color: #f0a84b; font-size: 12px; line-height: 1.35; } .inputWarn { color: var(--danger); font-size: 12px; margin: -2px 0 4px; } #zoneList { list-style: none; margin: 0 0 8px; padding: 0; } #zoneList li.zrow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } #zoneList li.muted { color: var(--muted); font-size: 12px; margin-bottom: 6px; } #zoneList input[type=color] { width: 22px; height: 22px; padding: 0; border: none; background: none; border-radius: 4px; flex: 0 0 auto; cursor: pointer; } #zoneList input[type=text] { flex: 1; min-width: 0; padding: 4px 6px; } #zoneList .zcnt { color: var(--muted); font-size: 11px; flex: 0 0 auto; min-width: 14px; text-align: center; } #zoneList .del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; } #zoneList .del:hover { color: var(--danger); } #zoneList li.zarea { display: flex; align-items: center; gap: 6px; margin: 0 0 8px 22px; } #zoneList li.zarea .edit { flex: 1; min-width: 0; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; color: var(--muted); cursor: pointer; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #zoneList li.zarea .edit:hover { border-color: var(--accent); color: var(--accent); } #zoneList li.zarea .del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; } #zoneList li.zarea .del:hover { color: var(--danger); } #zoneList li.drow { display: flex; align-items: center; gap: 6px; margin: 0 0 5px 22px; } #zoneList .ddot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } #zoneList .dname { flex: 1; min-width: 0; padding: 3px 6px; font-size: 12px; } #zoneList li.drow.sel .dname { outline: 1px solid var(--accent); } #camList { list-style: none; margin: 0; padding: 0; } #camList li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; margin-bottom: 3px; } #camList li:hover { background: var(--panel2); } #camList li.sel { background: var(--panel2); outline: 1px solid var(--accent); } #camList .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } #canvasWrap { flex: 1; position: relative; min-width: 0; background: #12171f; } #canvas { display: block; width: 100%; height: 100%; cursor: grab; } #canvas.placing { cursor: crosshair; } .hud { position: absolute; bottom: 10px; left: 10px; pointer-events: none; background: rgba(16,21,28,.8); color: var(--muted); font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 3px; border: 1px solid rgba(42,52,65,.7); } .banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); pointer-events: none; background: var(--accent-bg); color: var(--text); font-size: 13px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--accent); white-space: nowrap; } .banner.hidden { display: none; } .legend { position: absolute; top: 10px; right: 10px; pointer-events: none; background: rgba(0,0,0,.62); color: var(--text); font-size: 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); line-height: 1.6; } .legend.hidden { display: none; } /* MS2 nézet-forgatás: iránytű-tárcsa + fokérték a vászon bal-felső sarkában (csak geomap-mód). */ .viewRot { position: absolute; top: 10px; left: 10px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; } .viewRot.hidden { display: none; } .compass { width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.58); border: 1px solid var(--line); position: relative; cursor: grab; touch-action: none; box-shadow: 0 2px 8px rgba(0,0,0,.4); } .compass:active { cursor: grabbing; } .compassNeedle { position: absolute; inset: 0; transform-origin: 50% 50%; } .compassN { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: #f05252; line-height: 1; } .compassArrow { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 15px solid #f05252; } .viewRotRow { display: flex; align-items: center; gap: 4px; } .viewRotRow #viewRotDeg { width: 44px; text-align: right; padding: 2px 4px; font-size: 12px; background: rgba(0,0,0,.55); color: var(--text); border: 1px solid var(--line); border-radius: 6px; } .viewRotDegUnit { color: var(--muted); font-size: 12px; margin-left: -2px; } .viewRotRow #btnNorthUp { padding: 2px 6px; font-size: 12px; } .legend .lrow { display: flex; align-items: center; gap: 7px; } .legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; } .legend .lt { color: var(--muted); font-size: 11px; } /* Kártya 7: diszkrét, állandó kontextus-hint — halk sor a vászon alján, középen (a hud bal-alsó és az advisor jobb-alsó közé). Muted + kis méret, hogy ne vonja el a figyelmet. */ .ctxHint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 6; max-width: min(560px, calc(100% - 130px)); display: flex; align-items: center; gap: 8px; background: rgba(16,21,28,.88); color: var(--muted); font-size: 12px; line-height: 1.35; padding: 6px 7px 6px 11px; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.35); } .ctxHint.hidden { display: none; } .ctxHintIco { flex: 0 0 auto; opacity: .85; } .ctxHintText { min-width: 0; } .ctxHintOff { flex: 0 0 auto; width: 18px; height: 18px; padding: 0; line-height: 1; border-radius: 4px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; } .ctxHintOff:hover { background: rgba(127,127,127,.15); color: var(--text); } .ctxHintOn { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 6; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgba(16,21,28,.8); border: 1px solid var(--line); color: var(--muted); cursor: pointer; font-size: 13px; opacity: .6; } .ctxHintOn:hover { opacity: 1; color: var(--text); } .ctxHintOn.hidden { display: none; } .subhead { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin: 12px 0 8px; padding-top: 8px; border-top: 1px solid var(--line); } .row.col { flex-direction: column; align-items: stretch; gap: 4px; } .row.col textarea { width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; resize: vertical; font: inherit; } .chk { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; } .chk input { accent-color: var(--accent); } .modal { position: fixed; inset: 0; background: rgba(8,11,15,.7); display: flex; align-items: center; justify-content: center; z-index: 50; } .modal.hidden { display: none; } .modalCard { position: relative; background: #161c24; border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; width: 380px; max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,.6); } /* makett-A: felső, a kártya két széle felé elhaló kék energia-vonal */ .modalCard::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; background: linear-gradient(90deg, transparent, rgba(58,160,255,.65), transparent); border-radius: 2px; pointer-events: none; } .modalCard h3 { margin: 0 0 14px; font-size: 15px; color: #e8eef5; letter-spacing: .3px; } .modalCard .row { font-size: 13px; } .modalCard .row input, .modalCard .row select { width: 200px; } .modalCard .pwrow input { width: 150px; } .chk.block { display: flex; font-size: 13px; color: var(--text); margin: 10px 0 0; white-space: normal; } .chk.block.sub { margin: 6px 0 0 22px; color: var(--muted); } .chk.block input:disabled { opacity: .4; } .hint.warn { color: var(--danger); margin-top: 8px; } #pdfPassWarn.hidden { display: none; } .modalBtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } #cableTypeList { list-style: none; margin: 6px 0 8px; padding: 0; } #cableTypeList li { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } #cableTypeList input[type=color] { width: 22px; height: 22px; padding: 0; border: none; background: none; border-radius: 4px; flex: 0 0 auto; cursor: pointer; } #cableTypeList input[type=text] { flex: 1; min-width: 0; padding: 4px 6px; } #cableTypeList input.mx { width: 46px; flex: 0 0 auto; padding: 4px 4px; text-align: right; } #cableTypeList .del { border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; } #cableTypeList .del:hover { color: var(--danger); } .cableSummary { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 6px; } .cableSummary .cs { display: flex; align-items: center; gap: 6px; } .cableSummary .sw { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; } .cableSummary .tot { color: var(--text); font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; } .cableSummary .warn { color: var(--danger); } /* U-2: eszköz-panelben a befutó nyomvonalak összesítője — a cableSummary mintájára */ .deviceCableSummary { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 6px; } .deviceCableSummary .cs { display: flex; align-items: center; gap: 6px; } .deviceCableSummary .sw { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; } .deviceCableSummary .tot { color: var(--text); font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; } .deviceCableSummary .warn { color: var(--danger); } .cableInfo { font-size: 12px; color: var(--muted); line-height: 1.7; margin-bottom: 10px; } .cableInfo b { color: var(--text); } .cableInfo .warn { color: var(--danger); } .modelSpec { font-size: 11px; color: var(--accent); line-height: 1.5; margin: -3px 0 9px; } .modelSpec.hidden { display: none; } .row select#pModel { width: 150px; } .doriReadout { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.7; margin: -2px 0 10px; } .doriReadout .dr { display: flex; align-items: center; gap: 6px; } .doriReadout .sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; } /* ---------- discipline layers (fundamentum) ---------- */ /* Top trade-switcher bar: the chip picks the trade you edit, the eye only shows/hides it. */ .discBar { display: flex; align-items: stretch; gap: 6px; flex: 0 0 auto; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; } .discChip { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; background: #161c24; border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px 2px 10px; } .discChip .discPick { display: flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 3px 2px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; } .discChip .discPick:hover { border-color: transparent; color: #fff; } .discChip .discSw { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; } .discChip.active { background: linear-gradient(180deg, #1f2c3d, #1a2534); box-shadow: inset 0 0 0 1px rgba(58,160,255,.2); border-color: var(--accent); } .discChip.active .discPick { font-weight: 600; color: #fff; } .discChip.notready { opacity: .55; } .discChip.notready .discPick { color: var(--muted); cursor: not-allowed; } .discChip.hiddenLayer .discPick { opacity: .5; } .discEye { flex: 0 0 auto; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 2px 5px; cursor: pointer; font-size: 12px; line-height: 1.2; } .discEye:hover { border-color: var(--line); } .discEye:disabled { opacity: .3; cursor: default; } .discEye:disabled:hover { border-color: transparent; } .discSoon { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; } /* palette entries belonging to a trade that is not the active one */ .discHidden { display: none !important; } /* ---------- auth & access-control UI ---------- */ .authsep { flex: 0 0 auto; width: 1px; height: 22px; background: var(--line); margin: 0 4px; } .authsep.hidden { display: none; } .userChip { font-size: 12px; color: var(--muted); white-space: nowrap; } .userChip.hidden, .adminbtn.hidden, .linkbtn.hidden, .lockbtn.hidden { display: none; } button.linkbtn { color: var(--muted); background: transparent; border-color: transparent; } button.linkbtn:hover { color: var(--text); border-color: var(--line); } button.adminbtn { font-size: 12px; } .topClient { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .topClient select { max-width: 220px; } button.lockbtn.is-locked { color: var(--danger); border-color: var(--danger); } button.lockbtn:disabled { opacity: .4; cursor: default; } /* login overlay */ .loginOverlay { position: fixed; inset: 0; z-index: 100; background: radial-gradient(1200px 700px at 60% 20%, #1b2432, #14181f 70%); display: flex; align-items: center; justify-content: center; } /* halvány műszaki rács a belépő háttérben (makett-A) */ .loginOverlay::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(42,52,65,.1) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, rgba(42,52,65,.1) 1px, transparent 1px) 0 0/28px 28px; } .loginOverlay.hidden { display: none; } .loginCard { position: relative; background: rgba(22,28,36,.96); border: 1px solid var(--line); border-radius: 10px; padding: 30px 32px 24px; width: 360px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,.75); display: flex; flex-direction: column; gap: 12px; } .loginCard::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, transparent, rgba(58,160,255,.65), transparent); } .loginBrand { font-size: 22px; font-weight: 700; letter-spacing: 1px; color: #e8eef5; } .loginSub { color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; margin-top: -8px; } .loginForgot { color: var(--muted); font-family: var(--mono); font-size: 10px; text-align: center; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--line); } .loginCard .row { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; } .loginCard .row input { width: 100%; padding: 9px 11px; font-size: 13px; font-family: var(--mono); background: #10151c; color: #e8eef5; } .loginCard input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(58,160,255,.14); } .loginError { color: var(--danger); font-size: 12px; min-height: 16px; } button.full { width: 100%; padding: 9px; } /* undo / redo + help */ .histGrp { display: flex; gap: 4px; margin-left: 6px; } .histGrp button { font-size: 15px; line-height: 1; padding: 5px 9px; } .histGrp button:disabled { opacity: .35; cursor: default; } /* quick actions — frequent moves, one click each */ .quickGrp { display: flex; gap: 4px; } .quickGrp button { font-size: 12px; line-height: 1; padding: 6px 9px; white-space: nowrap; } .quickGrp button:hover { border-color: var(--accent); color: var(--accent); } /* Terv-ellenőr — discreet floating design advisor (bottom-right of canvas) */ .advisor { position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 300px; max-width: calc(100% - 20px); background: rgba(18,22,28,.94); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.6); overflow: hidden; font-size: 12px; } .advToggle { display: flex; align-items: center; gap: 7px; width: 100%; background: transparent; border: none; border-radius: 0; padding: 8px 10px; cursor: pointer; color: var(--text); text-align: left; } .advToggle:hover { background: var(--panel2); border-color: transparent; } .advIco { font-size: 14px; line-height: 1; flex: 0 0 auto; } .advTitle { font-weight: 600; flex: 1; } .advBadge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--line); color: var(--text); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .advBadge.warn { background: #f0a84b; color: #05121d; } .advBadge.ok { background: var(--ok); color: #05121d; } .advChevron { color: var(--muted); font-size: 10px; flex: 0 0 auto; transition: transform .15s; } .advisor.collapsed .advChevron { transform: rotate(-90deg); } .advisor.collapsed .advBody { display: none; } .advBody { border-top: 1px solid var(--line); max-height: 46vh; overflow-y: auto; } .advStats { padding: 8px 10px; color: var(--muted); border-bottom: 1px solid var(--line); line-height: 1.5; } .advList { list-style: none; margin: 0; padding: 4px; } .advList li { display: flex; align-items: flex-start; gap: 7px; padding: 6px 7px; border-radius: 6px; line-height: 1.4; cursor: default; } .advList li.clickable { cursor: pointer; } .advList li.clickable:hover { background: var(--panel2); } .advList .sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; } .advList .sev.info { background: var(--accent); } .advList .sev.warn { background: #f0a84b; } .advList .sev.tip { background: var(--muted); } .advList li.good { color: var(--muted); } .advList li.good .sev { background: var(--ok); } #btnHelp { font-weight: 700; min-width: 28px; padding: 5px 8px; } .helpGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; } .helpGrid section { margin-bottom: 10px; } .helpGrid h4 { margin: 0 0 5px; font-size: 13px; color: var(--accent); } .helpGrid p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); } .helpGrid b { color: var(--text); } table.keys { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.keys td { padding: 3px 0; vertical-align: top; color: var(--muted); } table.keys td:first-child { width: 46%; color: var(--text); white-space: nowrap; padding-right: 10px; } @media (max-width: 820px) { .helpGrid { grid-template-columns: 1fr; } } /* admin panels */ .modalCard.wide { width: 720px; } .admTable { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; table-layout: auto; } .admTable th, .admTable td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .admTable th { color: var(--muted); font-weight: 500; } .admTable select { width: auto; } /* T2 (2026-08-20): a széles admin-táblák (users, clients, árazás, MI ügyfeleink) mobilon túlfutottak a modálkártyán/adminContent-en — a sor-elválasztó csík (border-bottom) "elvágta a képet", a tartalom egy része láthatatlanul szakadt le. Az oszlopok white-space:nowrap tartalma miatt a tábla minimális szélessége nagyobb, mint a kártya. Megoldás: a tábla saját vízszintes görgetőt kap egy wrap-konténerben, így a csík a TELJES tábla alatt fut végig (nem vág el semmit), és minden oszlop elérhető marad. A catTableWrap/diagTableWrap mintájára. */ .admTableWrap { overflow-x: auto; max-width: 100%; } .admTableWrap .admTable { margin-bottom: 0; } /* a wrap kapja a margin-t, ne duplázza */ .cellClients { max-width: 260px; } .rowActions { white-space: nowrap; text-align: right; } button.mini { font-size: 11px; padding: 3px 7px; margin-left: 4px; } button.mini.primary { background: var(--accent); border-color: var(--accent); color: #05121d; } button.subtle { color: var(--muted); } .admNew { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; } .admNew h4 { margin: 0 0 10px; font-size: 13px; color: var(--muted); } .admGrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 12px; margin-bottom: 8px; } .admGrid .row, .admNew .row { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); } .admGrid .row input, .admNew .row input, .admNew .row textarea, .admNew .row select { width: 100%; } .chkList { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 10px; max-height: 120px; overflow-y: auto; } .chkList.inline { max-height: 90px; border: 1px solid var(--line); border-radius: 6px; padding: 6px; margin: 4px 0; } .chkItem { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text); } .modalBtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } /* modal tabs (client management: Adatok / Dokumentumok) */ .tabBar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; } .tabBtn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 14px; font-size: 13px; cursor: pointer; border-radius: 0; } .tabBtn.active { color: var(--text); border-bottom-color: var(--accent); } .docUpload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; } .docUpload select, .docUpload input[type=file] { width: auto; } /* T2: a natív file-input („Nincs kiválasztott fájl" gomb) mobilon szélesebb a kártyánál → min-width: 0 + flex-szűkítés, ne tolja szét a docUpload sort */ .docUpload input[type=file] { min-width: 0; flex: 0 1 auto; max-width: 100%; } /* forced-first hint */ #passForced { color: var(--accent); margin-bottom: 8px; } #passForced.hidden { display: none; } /* ---- pricing profile (company-wide) ---- */ button.pricebtn { font-size: 12px; } .pricebtn.hidden { display: none; } #pricingModal .modalCard { width: 760px; } #pricingModal h4 { margin: 16px 0 6px; font-size: 13px; color: var(--muted); } #quoteModal .modalCard { width: 680px; } #quoteModal h4.quoteSec { margin: 14px 0 6px; font-size: 13px; color: var(--accent); border-top: 1px solid var(--line, #2a2f36); padding-top: 10px; } #quoteModal textarea { width: 100%; resize: vertical; } #quoteModal .row.col { margin: 6px 0; } .modalHint { font-size: 12px; color: var(--muted); margin: 0 0 8px; line-height: 1.4; } .priceMeta { font-size: 12px; color: var(--muted); margin-right: auto; align-self: center; } .admTable td.num, .admTable td.num { text-align: right; white-space: nowrap; } /* Beléptetés: épület-szintű aggregált áttekintő */ #accessModal .modalCard { width: 640px; } .accessSummary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; } .accessStat { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .accessStat.est { border-style: dashed; } .accessStatN { display: block; font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; } .accessStatL { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; } .accessDoorsNote { font-size: 12px; color: var(--muted); line-height: 1.4; margin: 0 0 10px; } .accessDoorsNote b { color: var(--text); } .accessTable tr.accessGroup td { color: var(--accent); font-weight: 600; padding-top: 12px; border-bottom: 1px solid var(--line); } .accessTable td.accessDim, .accessDim { color: var(--muted); } .accessEmpty { font-size: 13px; color: var(--muted); line-height: 1.5; padding: 8px 0; } .priceTable input.priceIn { width: 90px; } .laborTable input.priceIn { width: 80px; } .laborTable input.normIn { width: 60px; } .laborTable input.scopeIn { width: 130px; } .laborTable input, .laborTable select { font-size: 12px; padding: 3px 5px; } .priceTable { max-height: 300px; } /* viewer = read-only: hide every editing affordance */ body.role-viewer #btnNew, body.role-viewer #btnSave, body.role-viewer #btnDelete, body.role-viewer #btnAddCam, body.role-viewer #btnAddNode, body.role-viewer #btnAddCabinet, body.role-viewer #btnAddExpansion, body.role-viewer #btnCable, body.role-viewer #btnCalibrate, body.role-viewer #btnMeasure, body.role-viewer #btnNote, body.role-viewer #btnArrow, body.role-viewer #btnAddRec, body.role-viewer #btnAddCableType, body.role-viewer #btnClearFloor, body.role-viewer .filebtn, body.role-viewer #btnDeleteCam, body.role-viewer #btnDeleteNode, body.role-viewer #btnDeleteCable, body.role-viewer #btnAddLowvolt, body.role-viewer #btnDeleteLowvolt, /* P1-2: a felsorolás ID-alapú volta hézagos volt — a maradék szerkesztő-gombok (riasztó, fal, tálca, IT, erősáram, beléptetés, geomap, szerkesztőszekrények) látszottak és lokálisan reagáltak. Generikus védettség szakma-gombokra: minden .tool szerkesztő-gomb + mentésjelölt, kivéve a nézelődő funkciókat (DORI réteg, rétegszem, alapszintű illesztés / zoom). */ body.role-viewer #left .panel .tool:not(#btnDori):not(#btnFov):not(#btnFitView):not(#btnResetZoom):not(#btnAllLayers):not(#baseModeFloor):not(#baseModeMap), body.role-viewer #btnWall, body.role-viewer #btnTray, body.role-viewer #btnAddAlarm, body.role-viewer #btnAddPanel, body.role-viewer #btnAddZone, body.role-viewer #btnAddServer, body.role-viewer #btnAddLowvolt, body.role-viewer #btnAddBuilding, body.role-viewer #btnAddPerimeter, body.role-viewer #btnAddSwitchgear, body.role-viewer #btnSwitchgearDesign, body.role-viewer #btnAddItDevice, body.role-viewer #btnCable, body.role-viewer #btnNote, body.role-viewer #btnArrow, body.role-viewer #btnMeasure, body.role-viewer #btnCalibrate, body.role-viewer #btnClearFloor, body.role-viewer .filebtn { display: none !important; } body.role-viewer #projName { pointer-events: none; opacity: .7; } /* SZ-1: a viewer nem lát ügyfelet → a „Dokumentumok & jelszavak" fül neki mindig üresen kattintható maradt; rejtjük a fül-kategóriát. */ body.role-viewer #clTabDocs { display: none !important; } /* Discipline gating now runs off the active trade (see syncPaletteForDiscipline): a trade's own palette only exists while that trade is active, and the active trade cannot be hidden. The body.disc-*-off classes are kept for canvas-level styling hooks only. */ body.disc-lowvolt-off #panelLowvoltDisc .row { opacity: .35; pointer-events: none; } body.disc-serverroom-off #panelServerDisc .row { opacity: .35; pointer-events: none; } /* ===== HAMBURGER BUTTON (hidden on desktop) ===== */ #btnHamburger { display: none; align-items: center; justify-content: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 17px; line-height: 1; flex: 0 0 auto; } #btnHamburger:hover { border-color: var(--accent); } /* ===== MOBILE OVERLAY ===== */ #mobileOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 89; } #mobileOverlay.on { display: block; } /* ===== MOBILE (≤768px) ===== */ @media (max-width: 768px) { /* K-1 fix: a topbar már csak azt tartalmazza, ami kifér (hamburger + brand + userChip + ⋯); a többi gomb a #mobileTopMenu-ben él. Nincs kifutó tartalom. */ #topbar { flex-wrap: nowrap; overflow: hidden; } .brand { font-size: 13px; } .brand .ver { display: none; } /* Hide secondary topbar items (a ⋯ menüből elérhetők) */ .proj, .topClient, #btnClient, #btnLock, #btnExport, #btnPdf, #btnCsv, #btnStorage, #btnQuote, #btnAccess, #btnHelp, #btnLang, .histGrp, .quickGrp, #btnPricing, #btnLogout, #btnAdmin, .authsep, #btnUsers, #btnClientsMgr, #btnChangePass, /* P2: az Export legördülő desktop-elem — mobilon a ⋯ menü btnTopExport… sorai adják ugyanezt */ #btnTopMore2, #exportMenu, /* P1: státuszsáv részei mobilon nem férnek ki — a verzió+óra marad, a többi el */ #sbServer, #sbEntities { display: none !important; } label:has(#pwSymbols) { display: none !important; } .status { display: none !important; } /* Show hamburger + the ⋯ (topbar-maradék) menu button */ #btnHamburger { display: flex !important; } #btnTopMore { display: flex !important; } /* User chip + logout stay visible but compact */ #userChip { font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sidebars → fixed drawers */ aside { position: fixed; top: 0; bottom: 0; width: min(290px, 88vw); z-index: 90; transition: transform .22s ease; overflow-y: auto; overflow-x: hidden; } aside#left { left: 0; transform: translateX(-100%); border-right: 1px solid var(--line); } aside#left.open { transform: translateX(0); } /* Right drawer — override .hidden display:none on mobile */ aside#right { right: 0; display: flex !important; flex-direction: column; border-left: 1px solid var(--line); border-right: none; } aside#right.hidden { transform: translateX(100%); } aside#right:not(.hidden) { transform: translateX(0); } /* Canvas full width */ #canvasWrap { width: 100%; } /* Trade switcher stays on screen, scrolls sideways instead of wrapping */ .discBar { padding: 5px 8px; gap: 6px; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .discChip { padding: 2px 3px 2px 6px; } .discChip .discPick { font-size: 12px; gap: 5px; } .discSoon { display: none; } /* Quick actions would overflow the compact topbar; the same moves stay reachable (pinch to zoom, discBar eyes for layers), so hide the group on mobile. */ .quickGrp { display: none !important; } /* Advisor: narrower, sits above the canvas without eating it */ .advisor { width: min(280px, calc(100% - 16px)); right: 8px; bottom: 8px; } /* Kártya 7: mobilon a hint az advisor-chip fölé kerül (az advisor bottom:8px, ~34px magas), teljes szélességben, hogy ne takarja egyik a másikat. */ .ctxHint { max-width: calc(100% - 16px); bottom: 52px; } .ctxHintOn { bottom: 52px; } } /* ---------- Rack UNIT designer (MS2) ---------- */ .modalCard.rackCard { width: 760px; } .rackHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rackSummary { font-size: 12px; color: var(--muted); text-align: right; flex: 1; min-width: 220px; } .rackSummary b { color: var(--text); font-weight: 600; } .rkWarn { color: var(--danger); font-weight: 600; } .sgSizeBar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; padding: 8px 10px; background: var(--panel-2, rgba(127,127,127,.08)); border-radius: 8px; } .sgSizeBar label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 0; } .sgSizeBar select { min-width: 180px; } .sgSizeBar input[type=number] { width: 64px; } .rkNote { color: var(--muted); font-weight: 600; } .rkSub { opacity: .65; font-size: 11px; } .rackBody { display: flex; gap: 18px; margin-top: 12px; align-items: flex-start; } .rackFrameWrap { background: #0c1013; border: 2px solid #333c46; border-radius: 6px; padding: 6px; } .rackFrame { position: relative; width: 300px; } .rackURow { position: absolute; left: 0; right: 0; border-top: 1px solid #1b222a; display: flex; align-items: center; } .rackUNum { position: absolute; left: 2px; width: 26px; text-align: right; font-size: 10px; color: #55606c; font-variant-numeric: tabular-nums; } /* ---- Rack v2: realistic device faceplates ---- */ .rackDev { position: absolute; left: 32px; right: 4px; border-radius: 3px; cursor: pointer; overflow: hidden; --accent: #3aa0ff; background: linear-gradient(180deg, #3a4149 0%, #2b3138 48%, #262b31 52%, #2f353c 100%); border: 1px solid #14181c; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); } .rackDev::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); box-shadow: 0 0 4px var(--accent); } .rackDev:hover { filter: brightness(1.12); } .rackDev.sel { outline: 2px solid #fff; outline-offset: -1px; z-index: 2; } .rackDev.bad { box-shadow: inset 0 0 0 2px var(--danger); } /* mounting ears with screw holes */ .fpEar { position: absolute; top: 0; bottom: 0; width: 9px; left: 3px; background: linear-gradient(180deg,#41474e,#23282d); border-right: 1px solid #14181c; } .fpEar.r { left: auto; right: 0; border-right: 0; border-left: 1px solid #14181c; } .fpEar::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #0c0f12, #34393f); box-shadow: 0 1px 0 rgba(255,255,255,.12); } /* faceplate content area, between the ears */ .fpBody { position: absolute; left: 14px; right: 11px; top: 2px; bottom: 2px; display: flex; align-items: center; gap: 4px; } /* silkscreen label chip */ .rackDevLabel { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; max-width: calc(100% - 30px); padding: 1px 6px; border-radius: 3px; background: rgba(10,14,18,.62); color: #dfe6ee; font-size: 11px; font-weight: 600; text-shadow: 0 1px 1px rgba(0,0,0,.6); pointer-events: none; z-index: 1; } .rackDev[data-fam="patch"] .rackDevLabel, .rackDev[data-fam="shelf"] .rackDevLabel { background: rgba(240,244,248,.72); color: #2a2f35; text-shadow: none; } .rackDevIco { font-size: 12px; } .rackDevName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rackDevU { font-size: 9px; opacity: .7; font-variant-numeric: tabular-nums; } /* --- family looks --- */ .rackDev[data-fam="patch"] { background: linear-gradient(180deg,#eef1f4,#d3d9df 52%,#c6cdd4); } .rackDev[data-fam="shelf"] { background: linear-gradient(180deg,#c7ccd2,#9aa1a9); } .rackDev[data-fam="server"], .rackDev[data-fam="nas"] { background: linear-gradient(180deg,#464d55,#2d333a 50%,#20252b); } .rackDev[data-fam="ups"] { background: linear-gradient(180deg,#2c3138,#191d22); } .rackDev[data-fam="pdu"] { background: linear-gradient(180deg,#33383f,#1c2025); } /* CCTV side of the cabinet — same chassis language, own accent */ .rackDev[data-fam="nvr"], .rackDev[data-fam="jbod"] { background: linear-gradient(180deg,#3c4750,#252d34 50%,#1a2026); } .rackDev[data-fam="poe"] { background: linear-gradient(180deg,#39444a,#222a2f 52%,#1a2126); } .rackDev[data-fam="dec"] { background: linear-gradient(180deg,#3a434d,#1e242b); } .rackDev[data-fam="fiber"] { background: linear-gradient(180deg,#3d3a4d,#211f2b); } /* ports (switch / router) */ .fpPorts { flex: 1; display: flex; flex-wrap: wrap; align-content: center; gap: 2px 2px; overflow: hidden; max-height: 100%; } .fpPort { width: 6px; height: 6px; border-radius: 1px; background: linear-gradient(#11161b,#05080b); box-shadow: inset 0 0 0 1px #0a0d10, 0 0 1px rgba(120,200,255,.4); } .fpPorts.patch { gap: 2px 3px; } .fpJack { width: 7px; height: 7px; border-radius: 1px; background: radial-gradient(circle at 50% 35%, #5c6570 0 42%, #2c3238 44%); box-shadow: inset 0 0 0 1px #7d858f; } .fpLeds { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; } .fpLed { width: 4px; height: 4px; border-radius: 50%; background: #1f2a22; } .fpLed.on { background: #37e06a; box-shadow: 0 0 3px #37e06a; } .fpLed.act { background: #ffb43a; box-shadow: 0 0 3px #ffb43a; } .fpLed.hdd { background: #4aa3ff; box-shadow: 0 0 3px #4aa3ff; } .fpLed.bat { background: #ff5a4a; box-shadow: 0 0 3px #ff5a4a; } .fpLed.poe { background: #b6ff5a; box-shadow: 0 0 3px #b6ff5a; } .fpLed.rec { background: #ff4a6e; box-shadow: 0 0 3px #ff4a6e; } /* PoE ports wear the tell-tale green collar */ .fpPorts.poe .fpPort { box-shadow: inset 0 0 0 1px #1d4a24, 0 0 2px rgba(120,255,150,.45); } /* SFP / fibre cage: wide, shallow slots */ .fpSfps { flex: 1; display: flex; flex-wrap: wrap; align-content: center; gap: 2px 3px; overflow: hidden; max-height: 100%; } .fpSfp { width: 13px; height: 5px; border-radius: 1px; background: linear-gradient(180deg,#2a3138,#0d1115); box-shadow: inset 0 0 0 1px #444c55; } .fpBays.nvr .fpBay { max-width: 22px; } /* drive bays (server / nas) */ .fpBays { flex: 1; display: flex; gap: 2px; height: 100%; align-items: stretch; padding: 2px 0; } .fpBay { flex: 1; border-radius: 1px; background: linear-gradient(180deg,#20252b,#0e1216); box-shadow: inset 0 0 0 1px #3a4149, inset 2px 0 2px rgba(0,0,0,.5); } .fpBays.nas .fpBay { max-width: 26px; } .fpVent { flex: 0 0 30%; height: 68%; border-radius: 2px; background-image: repeating-linear-gradient(90deg,#161b20 0 2px,#2b3239 2px 4px); } .fpVent.full { flex: 1; height: 60%; } /* LCD (ups / nas) */ .fpLcd { flex: 0 0 30%; height: 60%; border-radius: 2px; background: linear-gradient(#183024,#0c1c15); box-shadow: inset 0 0 0 1px #0a0d10, inset 0 0 6px rgba(60,255,160,.25); } .fpLcd.big { flex: 0 0 40%; height: 74%; background: linear-gradient(#1a3550,#0b1a2a); box-shadow: inset 0 0 0 1px #0a0d10, inset 0 0 8px rgba(90,180,255,.3); } /* pdu outlets */ .fpOutlets { flex: 1; display: flex; align-items: center; gap: 4px; } .fpOutlet { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #0a0d10 0 34%, #3a4149 36% 62%, #23282d 64%); box-shadow: inset 0 0 0 1px #14181c; } /* kvm console */ .fpScreen { flex: 0 0 42%; height: 74%; border-radius: 2px; background: linear-gradient(#1b2733,#0b1219); box-shadow: inset 0 0 0 1px #0a0d10; } .fpKeys { flex: 1; height: 46%; border-radius: 2px; background-image: repeating-linear-gradient(90deg,#2b3239 0 4px,#20252b 4px 5px), repeating-linear-gradient(0deg,#2b3239 0 4px,#20252b 4px 5px); background-blend-mode: multiply; } /* cable manager fingers */ .fpFingers { flex: 1; display: flex; justify-content: space-between; align-items: center; height: 70%; } .fpFinger { width: 5px; height: 100%; border-radius: 2px; background: linear-gradient(180deg,#3a4149,#20252b); box-shadow: inset 0 0 0 1px #14181c; } /* open shelf lip */ .fpShelf { flex: 1; height: 46%; align-self: flex-end; margin-bottom: 1px; border-radius: 1px; background-image: repeating-linear-gradient(90deg,#8b929a 0 3px,#6f767e 3px 6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); } .rackSide { flex: 1; min-width: 240px; } .rackAdd { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; } .rackEdit h4 { margin: 0 0 10px; font-size: 13px; } .rackEdit .row input, .rackEdit .row select { width: 130px; } .rackMoveBtns { display: flex; gap: 8px; margin-top: 10px; } .rackMoveBtns button { flex: 1; } @media (max-width: 720px) { .modalCard.rackCard { width: 96vw; } .rackBody { flex-direction: column; } .rackFrame { width: 240px; } .rackSide { width: 100%; } .sgFrame { max-width: 100%; overflow-x: auto; } } /* ---------- kapcsolószekrény (DIN-sín) tervező ---------- */ /* A rack modal-vázát (rackCard / rackHead / rackBody / rackSide) örökli; itt csak a vízszintes DIN-sínes elevation és a modul-blokkok stílusa jön. */ .sgFrameWrap { max-width: 460px; overflow-x: auto; } .sgFrame { position: relative; } .sgRail { position: absolute; left: 0; } /* a DIN-sín acél-profilja: középen fut a modulok mögött */ .sgRailBar { position: absolute; left: 0; right: 0; top: 50%; height: 12px; transform: translateY(-50%); background: linear-gradient(180deg,#3a434d,#20262c 50%,#151a1f); border-top: 1px solid #4a545f; border-bottom: 1px solid #0c0f13; border-radius: 2px; } .sgTick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.05); } .sgRailNum { position: absolute; left: 3px; top: -12px; font-size: 10px; color: var(--muted); white-space: nowrap; } .sgModule { position: absolute; border-radius: 3px; cursor: pointer; overflow: hidden; background: linear-gradient(180deg,#e9edf1,#cfd6dd 52%,#bcc4cc); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.4); display: flex; flex-direction: column; } .sgModule::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); box-shadow: 0 0 4px var(--accent); } .sgModule:hover { filter: brightness(1.06); } .sgModule.sel { outline: 2px solid #1b7fe0; outline-offset: -1px; z-index: 3; } .sgModule.bad { box-shadow: inset 0 0 0 2px var(--danger); } .sgFace { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-top: 4px; } .sgLabel { font-size: 9px; line-height: 1.05; color: #23282e; text-align: center; padding: 1px 2px 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(255,255,255,.35); } .sgToggles { display: flex; gap: 2px; } .sgToggle { width: 6px; height: 14px; border-radius: 1px; background: linear-gradient(180deg,#2b3138,#171b1f); border: 1px solid #0c0f13; box-shadow: inset 0 3px 0 rgba(255,255,255,.12); } .sgRated { font-size: 9px; font-weight: 700; color: #1a1f26; } .sgMa { font-size: 8px; color: #2f6f3f; font-weight: 700; } .sgSpd { font-size: 15px; color: #6a4bb0; } .sgTerm { width: 60%; height: 8px; background: repeating-linear-gradient(90deg,#8a95a1 0 3px,#c7ccd2 3px 6px); border-radius: 1px; } .sgGeneric { font-size: 14px; } /* ---------- tárhely-kalkulátor ---------- */ .modalCard.scCard { width: 760px; } .scHead { margin-bottom: 12px; } .scHead h3 { margin: 0 0 4px; } .scWrap { display: flex; gap: 18px; align-items: flex-start; } .scForm { width: 300px; flex: 0 0 300px; } .scForm .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; } .scForm .row input, .scForm .row select { width: 150px; } .scForm .row.hidden { display: none; } .scSep { border: none; border-top: 1px solid var(--line); margin: 12px 0; } .scOut { flex: 1; min-width: 0; } .scStats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .scStat { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .scStatV { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; } .scStatL { font-size: 12px; color: var(--text); margin-top: 3px; } .scStatS { font-size: 11px; color: var(--muted); margin-top: 2px; } .scCheck { font-size: 12.5px; padding: 9px 12px; border-radius: 8px; margin-bottom: 12px; } .scCheck.ok { background: rgba(70,192,122,.12); border: 1px solid var(--ok); color: var(--text); } .scCheck.bad { background: rgba(229,84,75,.12); border: 1px solid var(--danger); color: var(--text); } .scCheck.hidden { display: none; } .scTableWrap { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; } .scTable { width: 100%; border-collapse: collapse; font-size: 12.5px; } .scTable th, .scTable td { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--line); } .scTable th:first-child, .scTable td:first-child { text-align: left; } .scTable th { position: sticky; top: 0; background: var(--panel2); color: var(--muted); font-weight: 600; z-index: 1; } .scTable tr:last-child td { border-bottom: none; } .scEmpty { text-align: center !important; color: var(--muted); padding: 18px !important; } .scNote { margin-top: 10px; } @media (max-width: 720px) { .modalCard.scCard { width: 96vw; } .scWrap { flex-direction: column; } .scForm { width: 100%; flex: none; } .scForm .row input, .scForm .row select { width: 55%; } .scOut { width: 100%; } } /* ============================================================================ ADMIN NÉZET (2026-08-10) — dedikált admin felület: katalógus + diagnosztika. A korábban modálként élő napló/visszajelzés/statisztika ide költözött, áttervezve. z-index 40: a szerkesztő-modálok (.modal, z:50) fölé nyílnak. ============================================================================ */ .adminView { position: fixed; inset: 0; z-index: 40; background: var(--bg); color: var(--text); display: flex; flex-direction: column; } .adminView.hidden { display: none; } .adminHead { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel); } .adminTitle { font-size: 16px; font-weight: 600; } .adminCloseX { margin-left: auto; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 14px; } .adminCloseX:hover { border-color: var(--accent); } .adminMain { flex: 1; display: flex; min-height: 0; } .adminNav { width: 210px; flex: none; border-right: 1px solid var(--line); background: var(--panel); padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; } .adminNavItem { text-align: left; background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 7px; padding: 9px 12px; font-size: 13px; cursor: pointer; } .adminNavItem:hover { background: var(--panel2); } .adminNavItem.active { background: var(--panel2); border-color: var(--accent); color: var(--accent); } .adminContent { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px; } /* --- katalógus-kezelő --- */ .catBar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .catBar .row { margin-bottom: 0; } .catBar .row select { width: 190px; } .catBarSpacer { flex: 1; } .catTableWrap { overflow-x: auto; } .catTable td { vertical-align: middle; } .catSpecCell { color: var(--muted); font-size: 12px; max-width: 360px; } .catPrice { text-align: right; white-space: nowrap; } .catActions { white-space: nowrap; text-align: right; } .catSpecForm { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; } .catSpecHead { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .admLink { color: var(--accent); font-size: 12px; text-decoration: none; cursor: pointer; } .admLink:hover { text-decoration: underline; } .admUnit { color: var(--muted); font-weight: 400; } /* --- import panel --- */ .catImport { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 14px 16px; margin-bottom: 14px; } .catImport.hidden { display: none; } .catImportHead { font-size: 13px; margin-bottom: 6px; } .catImport textarea { width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; resize: vertical; font: inherit; font-size: 12px; margin: 8px 0; } .catImportResult { margin-top: 10px; font-size: 13px; } .catImportOk { color: var(--ok); } .catImportErr { color: #e5a23f; margin: 6px 0 0; padding-left: 18px; font-size: 12px; } /* ============================================================================ DIAGNOSZTIKA (az admin nézetbe költöztetve) — eddig stílus nélkül futott. ============================================================================ */ .diagBody { font-size: 13px; } .diagMuted { color: var(--muted); font-size: 12px; } .statCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; } .statCard { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; } .statCard.warn { border-color: #e5a23f; } .statNum { font-size: 24px; font-weight: 600; } .statLbl { color: var(--muted); font-size: 12px; margin-top: 2px; } .changelogList { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .clItem { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: var(--panel); font-size: 12px; } .clKind { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 4px; margin-right: 6px; background: var(--panel2); } .clKind.kind-added { color: var(--ok); } .clKind.kind-fixed { color: var(--accent); } .clKind.kind-changed { color: #e5a23f; } .clKind.kind-removed { color: var(--danger); } .clKind.kind-security { color: #b48cff; } .clVer { color: var(--muted); margin-right: 6px; } .clTitle { font-weight: 500; } .clDesc { color: var(--muted); margin-top: 4px; } .clMeta { color: var(--muted); font-size: 11px; margin-top: 4px; } .diagFilters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .diagFilters .row { margin-bottom: 0; flex-direction: column; align-items: stretch; gap: 3px; font-size: 12px; color: var(--muted); } .diagFilters .row.grow { flex: 1; min-width: 160px; } .diagFilters .row input, .diagFilters .row select { width: auto; } .diagApply { align-self: flex-end; } .diagExport { color: var(--accent); font-size: 12px; text-decoration: none; align-self: flex-end; padding-bottom: 4px; } .diagExport:hover { text-decoration: underline; } .diagMeta { color: var(--muted); font-size: 12px; margin-bottom: 6px; } .diagTableWrap { overflow-x: auto; } .diagTable td { vertical-align: middle; } .lvl { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--panel2); } .lvl-error { color: var(--danger); } .lvl-warn { color: #e5a23f; } .lvl-info { color: var(--muted); } .fbStatus { font-size: 11px; padding: 1px 7px; border-radius: 4px; background: var(--panel2); } .fbStatus.st-open { color: #e5a23f; } .fbStatus.st-in_progress { color: var(--accent); } .fbStatus.st-resolved { color: var(--ok); } .fbStatus.st-wontfix { color: var(--muted); } .fbDesc { white-space: pre-wrap; margin: 8px 0; } .fbShot img { max-width: 100%; border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; } .fbActivity { font-size: 12px; color: var(--muted); padding-left: 18px; } /* Katalógus-javaslat doboz a kamera tulajdonságpanelen */ .suggestBox { margin-bottom: 8px; } .suggestHint { font-size: 11px; color: var(--muted); margin-bottom: 4px; } .suggestItem { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 4px; cursor: pointer; transition: border-color .15s, background .15s; } .suggestItem:hover { border-color: var(--accent); background: var(--accent-bg); } .suggestItem.suggestBest { border-color: var(--accent); background: var(--accent-bg); } .suggestMain { flex: 1; min-width: 0; } .suggestBrand { font-weight: 600; font-size: 13px; } .suggestModel { font-size: 12px; color: var(--muted); } .suggestScore { font-size: 11px; color: var(--accent); font-weight: 600; white-space: nowrap; } .suggestReason { font-size: 10px; color: var(--muted); margin-top: 2px; } .suggestEmpty { font-size: 12px; color: var(--muted); font-style: italic; } .suggestThumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); flex-shrink: 0; } /* Termékkép-thumbnail a katalógus táblázatban */ .catThumb { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); vertical-align: middle; margin-right: 4px; } @media (max-width: 760px) { .adminMain { flex-direction: column; } .adminNav { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); } .adminNavItem { white-space: nowrap; } .adminContent { padding: 14px; } .catBar .row select { width: 150px; } .statCards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } /* T2: mobilon az admGrid 3 oszlopa nem fér ki — 1 oszlop, teljes szélesség */ .admGrid { grid-template-columns: 1fr; } } /* ================= P0-1: csak-olvasható terv állandó jelzése ================= */ #readOnlyBanner { position: sticky; top: 0; z-index: 60; background: #7a2b2b; color: #fff; padding: 7px 12px; font-size: 13px; font-weight: 600; text-align: center; border-bottom: 1px solid #a03c3c; } /* T2 (2026-08-20): a .hidden NINCS általános display:none szabálya ebben a CSS-ben (elem-típusonként van: .modal.hidden stb.), így a banner "rejtett" állapotban is ott ült: 7px+7px padding + 1px border = 15px magas ÜRES piros sáv a topbar alatt. Ez vágta el az adminNav függőleges és az adminHead vízszintes elválasztóját, és takarta le a tartalom felső 15px-ét (Laci 2026-08-19 észrevételének maradéka). */ #readOnlyBanner.hidden { display: none; } body.readonly #btnSave { opacity: .45; } body.readonly #btnTopSave { opacity: .45; } /* ============ P1-4/K-1: státusz-üzenet toast mobilon (a .status rejtett) ============ */ #statusToast { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 12px); z-index: 120; max-width: 86vw; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 14px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, transform .18s, visibility .18s; } #statusToast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* desktopon a status-sor látszik: a toast ott nem ütközik — mégis mutatjuk, mert a status-sor felülírható és periférikus; mobilon (<=768px) ez az EGYETLEN csatorna. */ /* ============ K-1 / P0-3: mobil topbar-maradék menü (⋯ gomb) ============ */ #btnTopMore { display: none; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 17px; line-height: 1; flex: 0 0 auto; color: var(--fg); } #btnTopMore.on { border-color: var(--accent); } #mobileTopMenu { display: none; position: fixed; top: 46px; right: 6px; z-index: 95; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-width: 230px; max-width: 86vw; box-shadow: 0 8px 24px rgba(0,0,0,.35); } #mobileTopMenu.on { display: flex; } #mobileTopMenu button { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; color: var(--fg); padding: 9px 10px; font-size: 14px; cursor: pointer; text-align: left; display: block; width: 100%; } #mobileTopMenu button:active { border-color: var(--accent); } #mobileTopMenu #btnTopClose { color: var(--muted); } #mobileTopMenu #btnTopLogout.danger { border-color: #8a3535; color: #e88; } /* ---------- Súgó: aktuális nézet fejléce ---------- */ .helpGrid .helpViewHead { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: 4px; } .helpViewHead h4 { color: var(--accent); } .helpViewSub { color: var(--muted); font-size: 12px; margin: 2px 0 0; } /* ---------- Onboarding (első belépés) ---------- */ button.ghost { background: transparent; border-color: transparent; color: var(--muted); } button.ghost:hover { border-color: var(--line); color: var(--text); } .onboardCard { width: 480px; } .onboardHead { margin-bottom: 12px; } .onboardHead h3 { margin: 0 0 4px; font-size: 17px; } .onboardSub { color: var(--muted); font-size: 13px; margin: 0; } .onboardStep { display: flex; gap: 14px; align-items: flex-start; min-height: 96px; } .onboardIcon { font-size: 32px; line-height: 1; flex: 0 0 auto; } .onboardText h4 { margin: 0 0 6px; font-size: 15px; } .onboardText p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .onboardNav { display: flex; align-items: center; gap: 10px; margin-top: 18px; } .onboardNavBtns { margin-left: auto; display: flex; gap: 8px; } .onboardDots { display: flex; gap: 6px; } .onboardDot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .15s; } .onboardDot.active { background: var(--accent); } /* ============ P1: státuszsáv (felület-rendezés csomag) ============ */ /* A tervezőfelület alján: verzió (bal), szerver-állapot + frissítés ideje, elem-szám, jobbra dátum és óra (percenként frissül). A body flex-oszlop utolsó gyermeke. */ .statusBar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 3px 12px; background: var(--panel); border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: nowrap; } .statusBar .sbDot { color: var(--line); } .statusBar .sbSpacer { flex: 1; } .statusBar .sbVersion { color: var(--accent); } .statusBar .sbServer.ok { color: var(--ok); } .statusBar .sbServer.err { color: var(--danger); } .statusBar .sbClock { font-weight: 600; letter-spacing: .3px; } /* K2: "Újdonságok" gomb a státuszsorban — diszkrét, a sor mono stílusához illő. Sima gomb helyett szöveges megjelenés: hangsúly-szín, áttetsző háttér, csak hover-nél látszik a keret. Idővel (ha betölt a changelog) a gomb szövege a verziószámot mutathatja — az is ebbe az osztályba illik. */ .statusBar .sbChangelog { background: transparent; border: 1px solid transparent; color: var(--accent); font-family: inherit; font-size: 11px; padding: 1px 8px; cursor: pointer; } .statusBar .sbChangelog:hover { border-color: var(--line); } .statusBar .sbChangelog:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* K2: Újdonságok modál — verzió-blokkok listája. A modalCard alap (max-height: 88vh, overflow-y: auto) már görgethetővé teszi mobilon; a wide méret a becsúszó listákhoz kényelmesebb. */ .modalCard.changelogCard { width: 560px; } .changelogBody { display: flex; flex-direction: column; gap: 12px; } .clEntry { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; } .clHead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .clVer { font-weight: 700; color: var(--accent); letter-spacing: .3px; } .clDate { color: var(--muted); font-size: 12px; } .clItems { margin: 0; padding: 0 0 0 18px; } .clItems li { margin: 3px 0; font-size: 13px; line-height: 1.45; } .clLoading, .clEmpty { color: var(--muted); font-size: 13px; margin: 0; } @media (max-width: 768px) { .modalCard.changelogCard { width: 96vw; } } /* Export legördülő (P2): a ⬇ Export gomb mögötti menü — a gomb melletti wrapper relatív, így a menü mindig a gomb alatt jelenik meg, topbar-től függetlenül. */ .exportWrap { position: relative; flex: 0 0 auto; } .exportMenu { position: absolute; top: calc(100% + 4px); left: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; z-index: 80; min-width: 140px; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .exportMenu.hidden { display: none; } .exportMenu button { background: transparent; color: var(--text); border: none; border-radius: 6px; padding: 7px 10px; font-size: 12px; text-align: left; cursor: pointer; white-space: nowrap; } .exportMenu button:hover { background: var(--accent-bg); color: #fff; } /* Admin-nav elem gombstílusa (P3: users menüpont) */ .adminNavItem button { font-size: inherit; } /* ---------- 6. lépés: jobb klikk gyorsmenü (kontextusfüggő menü-struktúra) ---------- */ /* Fixed: a jobb-kattintás képernyő-pontján jelenik meg, egységes panel/border/radius. */ .ctxMenu { position: fixed; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; z-index: 90; min-width: 220px; max-width: 300px; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .ctxMenu.hidden { display: none; } .ctxMenu button { background: transparent; color: var(--text); border: none; border-radius: 6px; padding: 7px 10px; font-size: 12px; text-align: left; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 8px; width: 100%; } .ctxMenu button:hover { background: var(--accent-bg); color: #fff; } .ctxMenu .qcSep { border-top: 1px dashed var(--line); margin: 4px 6px; } .ctxMenu .qcSepStrong { border-top-style: solid; } .ctxMenu .qcHead { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding: 4px 10px 2px; user-select: none; } /* ---------- 7. lépés: kedvencek — soronkénti parancs-gomb + csillag-váltó ---------- */ /* A sor egy flex-konténer: bal oldalt a parancs (rugalmas), jobb oldalt a csillag (fix). */ .ctxMenu .qcItem { display: flex; align-items: stretch; gap: 2px; } .ctxMenu .qcItem .qcLabel { flex: 1 1 auto; width: auto; } .ctxMenu .qcStar { flex: 0 0 auto; width: 28px; padding: 0; background: transparent; border: none; border-radius: 6px; color: var(--muted); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ctxMenu .qcStar:hover { background: var(--accent-bg); color: #fff; } .ctxMenu .qcStar.on { color: #f5c451; } /* csillagozott: arany, tábla-témától függetlenül olvasható */