/* ── PAPER / E-INK NÉZET ──────────────────────────────────────────────── Aktiválás: attribútum Cél: Boox e-ink tablet + nyomtatás Elv: szín helyett vastagság + minta + szöveg különböztet meg Minden szabály [data-view="paper"] prefix alatt él. ──────────────────────────────────────────────────────────────────────── */ /* A paper-toggle-btn mindig látszódjon (dark módban is) */ #paper-toggle-btn { font-family: var(--fm); font-size: 11px; padding: 4px 10px; border-radius: 4px; border: 1.5px solid var(--br); background: var(--sf2); color: var(--tx); cursor: pointer; } #paper-toggle-btn:hover { opacity: .8; } /* ── TOKENEK ─────────────────────────────────────────────────────────── */ [data-view="paper"] { --bg: #ffffff; --sf: #f4f4f4; --sf2: #ebebeb; --sf3: #e0e0e0; --br: #bbbbbb; --br2: #888888; --tx: #111111; --tx2: #333333; --mu: #666666; --ac: #111111; --gn: #111111; --yw: #555555; --rd: #000000; --og: #444444; --pu: #444444; --tl: #333333; } /* ── ALAP ────────────────────────────────────────────────────────────── */ [data-view="paper"] body { background:#fff; color:#111; } [data-view="paper"] #header { background:#fff; border-bottom:2px solid #111; } [data-view="paper"] .logo { color:#111; } [data-view="paper"] .logo span { color:#555; } [data-view="paper"] .sdot { background:#111; box-shadow:none; } [data-view="paper"] #dirty { background:#eee; color:#111; border-color:#999; } [data-view="paper"] .ntab { color:#555; } [data-view="paper"] .ntab:hover { background:#eee; color:#111; } [data-view="paper"] .ntab.active { color:#111; background:#e8e8e8; border-bottom:2px solid #111; font-weight:600; } [data-view="paper"] .save-btn { background:#eee; color:#111; border-color:#999; } /* ── SIDEBAR ─────────────────────────────────────────────────────────── */ [data-view="paper"] #sidebar { background:#f8f8f8; border-right:1px solid #ccc; } [data-view="paper"] .sb-h { color:#555; } [data-view="paper"] .sb-item { color:#444; } [data-view="paper"] .sb-item:hover { background:#efefef; color:#111; } [data-view="paper"] .sb-item.active { color:#111; border-left-color:#111; background:#e8e8e8; font-weight:600; } [data-view="paper"] .sb-item.warn { color:#111; font-weight:600; } [data-view="paper"] .sb-dot { border:1.5px solid #333; background:transparent !important; } [data-view="paper"] .sb-cap.full { color:#000; font-weight:700; } [data-view="paper"] .sb-cap.near { color:#333; font-weight:600; } [data-view="paper"] .sb-cap.ok { color:#777; } [data-view="paper"] .sb-div { background:#ccc; } /* ── PANEL ALAP ──────────────────────────────────────────────────────── */ [data-view="paper"] .panel { background:#fff !important; } [data-view="paper"] .ph h1 { color:#111 !important; } [data-view="paper"] .ph p { color:#555 !important; } [data-view="paper"] .tag { color:#444 !important; border-color:#bbb !important; background:#f4f4f4 !important; } [data-view="paper"] .sec-h { color:#555 !important; border-bottom:1px solid #ccc; padding-bottom:3px; } [data-view="paper"] .warn-b { background:#f4f4f4 !important; border:1.5px solid #111 !important; border-left-width:4px !important; color:#111 !important; } [data-view="paper"] .info-b { background:#f4f4f4 !important; border:1px dashed #888 !important; color:#333 !important; } [data-view="paper"] .note-b { background:#f4f4f4 !important; border:1px solid #ccc !important; color:#555 !important; } [data-view="paper"] .cap-bar { background:#ddd !important; } [data-view="paper"] .cap-fill { background:#333 !important; } [data-view="paper"] .cap-num { color:#111 !important; } /* ── PORT TÁBLA ──────────────────────────────────────────────────────── */ [data-view="paper"] .pt-hdr { color:#555; border-bottom:1.5px solid #111; } [data-view="paper"] .pe:hover { background:#f0f0f0; border-color:#bbb; } [data-view="paper"] .pe.editing { background:#e8e8e8; border-color:#111; } [data-view="paper"] .pe.pw { background:#f0f0f0; } [data-view="paper"] .pe-planned { background:#f8f8f8; border-left:2px dashed #888; } [data-view="paper"] .p-num { color:#555; } [data-view="paper"] .p-lbl { color:#111; } [data-view="paper"] .p-lbl.free { color:#aaa; } [data-view="paper"] .p-note { color:#666; } [data-view="paper"] .p-note.wt { color:#333; font-style:italic; } [data-view="paper"] .p-edit { color:#777; } [data-view="paper"] .p-edit:hover { border-color:#999; color:#111; } [data-view="paper"] .p-edit.on { border-color:#111; color:#111; } [data-view="paper"] .p-status-btn { color:#888; } [data-view="paper"] .p-status-btn.is-planned { color:#111; border-color:#777; font-weight:700; } /* Type badge-ek – szín helyett stílus */ [data-view="paper"] .tb { background:#f0f0f0 !important; color:#111 !important; border:1.5px solid #888 !important; font-weight:600; } [data-view="paper"] .tb-uplink { border-width:2px !important; font-weight:700 !important; } [data-view="paper"] .tb-server { border-style:double !important; border-width:3px !important; } [data-view="paper"] .tb-ap { border-style:dashed !important; } [data-view="paper"] .tb-security { border-width:2px !important; background:#e8e8e8 !important; } [data-view="paper"] .tb-passive { border-style:dotted !important; color:#666 !important; } [data-view="paper"] .tb-free { background:transparent !important; color:#aaa !important; border-color:#ddd !important; } [data-view="paper"] .tb-planned { opacity:.6; border-style:dashed !important; } [data-view="paper"] .tb-select { background:#f0f0f0; color:#111; border-color:#bbb; } /* ── DEVICE GRID ─────────────────────────────────────────────────────── */ [data-view="paper"] .dev-card { background:#f8f8f8 !important; border-color:#bbb !important; border-left-width:4px !important; border-left-color:#333 !important; } [data-view="paper"] .dev-card.server { border-left-style:double !important; border-left-color:#000 !important; } [data-view="paper"] .dev-card.ap { border-left-style:dashed !important; border-left-color:#333 !important; } [data-view="paper"] .dev-card.security { border-left-style:solid !important; border-left-color:#000 !important; } [data-view="paper"] .dev-card.iot { border-left-style:dashed !important; border-left-color:#333 !important; } [data-view="paper"] .dev-card.av { border-left-style:solid !important; border-left-color:#444 !important; } [data-view="paper"] .dev-card.passive { border-left-style:dotted !important; border-left-color:#888 !important; } [data-view="paper"] .dev-card.infra { border-left-style:solid !important; border-left-color:#666 !important; } [data-view="paper"] .dev-card.periph { border-left-style:dotted !important; border-left-color:#777 !important; } [data-view="paper"] .dev-name { color:#111 !important; } [data-view="paper"] .dev-desc { color:#555 !important; } /* ── ISSUES ──────────────────────────────────────────────────────────── */ [data-view="paper"] .issue-card { background:#f8f8f8; border-color:#bbb; } [data-view="paper"] .issue-card.critical { border-left:4px solid #000; } [data-view="paper"] .issue-card.medium { border-left:4px dashed #444; } [data-view="paper"] .issue-card.low { border-left:4px dotted #888; } [data-view="paper"] .issue-prio.critical { color:#000; font-weight:700; } [data-view="paper"] .issue-prio.medium { color:#333; } [data-view="paper"] .issue-prio.low { color:#666; } [data-view="paper"] .issue-title { color:#111; } [data-view="paper"] .issue-desc { color:#555; } /* ── DIFF ────────────────────────────────────────────────────────────── */ [data-view="paper"] .diff-entry.ch { background:#f0f0f0; color:#111; border-color:#bbb; } [data-view="paper"] .diff-entry.mv { background:#e8e8e8; color:#333; border-color:#999; } [data-view="paper"] .diff-empty { color:#888; } [data-view="paper"] .dl-btn { background:#eee; color:#111; border-color:#999; } /* ── GRÁF ────────────────────────────────────────────────────────────── */ [data-view="paper"] .graph-tabs { border-bottom-color:#bbb; } [data-view="paper"] .gtab { color:#555; border-color:#bbb; background:#f4f4f4; } [data-view="paper"] .gtab.active { background:#e0e0e0; color:#111; border-color:#111; font-weight:600; } [data-view="paper"] .tree-wan { color:#444; border-bottom-color:#bbb; } [data-view="paper"] .tree-sw:hover { background:#f0f0f0; border-color:#bbb; } [data-view="paper"] .tree-sw.warn { font-weight:600; } [data-view="paper"] .tree-dot { border:1.5px solid #333 !important; background:transparent !important; } [data-view="paper"] .tree-sw.warn .tree-dot { background:#000 !important; } [data-view="paper"] .tree-name { color:#111; } [data-view="paper"] .tree-loc { color:#666; } [data-view="paper"] .tree-cap { color:#333 !important; } [data-view="paper"] .tree-node { border-left-color:#ccc; } [data-view="paper"] .hop-table th { color:#555; border-bottom-color:#bbb; } [data-view="paper"] .hop-table td { border-bottom-color:#ddd; color:#111; } [data-view="paper"] .hop-row-label { color:#333; } [data-view="paper"] .hop-self { background:#f0f0f0; color:#aaa; } [data-view="paper"] .hop-direct { font-weight:700; color:#000; } [data-view="paper"] .hop-near { font-weight:600; color:#333; } [data-view="paper"] .hop-far { font-weight:700; color:#000; text-decoration:underline; } [data-view="paper"] .row-warn { background:#f0f0f0; } [data-view="paper"] .spof-card { background:#f8f8f8; border-color:#bbb; } [data-view="paper"] .spof-card.critical { border-left:4px solid #000; } [data-view="paper"] .spof-card.medium { border-left:4px dashed #444; } [data-view="paper"] .spof-card.low { border-left:4px dotted #888; } [data-view="paper"] .spof-name { color:#111; } [data-view="paper"] .spof-count { background:#eee; color:#111; font-weight:700; } [data-view="paper"] .spof-chip { background:#eee; border-color:#bbb; color:#333; } [data-view="paper"] .spof-ep { background:#eee; border-color:#bbb; color:#333; } [data-view="paper"] .ep-table th { color:#555; border-bottom-color:#bbb; } [data-view="paper"] .ep-table td { border-bottom-color:#eee; color:#111; } [data-view="paper"] .ep-floor-header td { background:#e8e8e8; color:#333; font-weight:700; } [data-view="paper"] .ep-hops { color:#111 !important; } /* ── EXPORT ──────────────────────────────────────────────────────────── */ [data-view="paper"] .exp-block { border-color:#bbb; } [data-view="paper"] .exp-block-h { background:#eee; border-bottom-color:#bbb; } [data-view="paper"] .exp-block-t { color:#555; } [data-view="paper"] pre.exp-code { color:#111; background:#f8f8f8; } /* ── CANVAS ──────────────────────────────────────────────────────────── */ [data-view="paper"] #canvas-wrap { background:#fff; } [data-view="paper"] #canvas-toolbar { background:#f4f4f4; border-bottom:1px solid #bbb; } [data-view="paper"] .tool-btn { color:#444; border-color:#bbb; background:#fff; } [data-view="paper"] .tool-btn:hover { background:#e8e8e8; color:#111; } [data-view="paper"] .tool-btn.active { background:#e0e0e0; border-color:#111; color:#111; font-weight:600; } [data-view="paper"] .layer-btn { color:#444; border-color:#bbb; opacity:.8; } [data-view="paper"] .layer-btn.on { opacity:1; background:#e8e8e8; border-color:#555; color:#111; } [data-view="paper"] .layer-btn .layer-dot { background:#333 !important; } [data-view="paper"] #canvas-tooltip { background:#fff; border:1.5px solid #555; color:#111; } [data-view="paper"] .ctx-item { color:#333; } [data-view="paper"] .ctx-item:hover { background:#eee; color:#111; } [data-view="paper"] .ctx-item.danger { color:#000; font-weight:600; } [data-view="paper"] .ctx-sep { background:#ddd; } /* Canvas SVG elemek paper módban */ [data-view="paper"] #canvas-svg .c-wall { fill:#f4f4f4 !important; stroke:#888 !important; } [data-view="paper"] #canvas-svg .c-dev-rect { fill:#fff !important; stroke:#333 !important; stroke-width:1.5 !important; } [data-view="paper"] #canvas-svg .c-planned .c-dev-rect { stroke-dasharray:5 3 !important; stroke:#888 !important; } /* ── RACK ────────────────────────────────────────────────────────────── */ [data-view="paper"] #rack-toolbar { background:#f4f4f4; border-bottom-color:#bbb; } [data-view="paper"] .rack-title { color:#555; } [data-view="paper"] .rack-chassis { border-color:#888; } [data-view="paper"] .rack-unit { border-bottom-color:#ddd; } [data-view="paper"] .rack-u-num { background:#f0f0f0; color:#777; border-right-color:#ddd; } [data-view="paper"] .rack-u-slot { background:#fff; } [data-view="paper"] .rack-u-slot:hover { background:#f0f0f0; } [data-view="paper"] .rack-u-slot.selected { background:#e8e8e8; outline-color:#333; } [data-view="paper"] .rack-u-slot.server { background:#f0f0f0; border-left:3px double #333; } [data-view="paper"] .rack-u-slot.switch { background:#f0f0f0; border-left:3px dashed #555; } [data-view="paper"] .rack-u-slot.note { background:#f4f4f4; border-left:3px dotted #888; } [data-view="paper"] .rack-slot-name { color:#111; } [data-view="paper"] .rack-slot-type { color:#777; } [data-view="paper"] #rack-detail-box { background:#f8f8f8; border-color:#bbb; } [data-view="paper"] .rd-row { border-bottom-color:#ddd; color:#111; } [data-view="paper"] .rd-key { color:#666; } [data-view="paper"] .rd-input { background:#fff; border-color:#bbb; color:#111; } [data-view="paper"] .rd-input:focus { border-color:#111; } /* ── MODAL ───────────────────────────────────────────────────────────── */ [data-view="paper"] #edit-modal { background:rgba(0,0,0,.4); } [data-view="paper"] #edit-modal-box { background:#fff; border-color:#bbb; } [data-view="paper"] #edit-modal-box h3 { color:#111; } [data-view="paper"] .em-row label { color:#555; } [data-view="paper"] .em-row input, [data-view="paper"] .em-row select, [data-view="paper"] .em-row textarea { background:#f8f8f8; border-color:#bbb; color:#111; } [data-view="paper"] .em-save { background:#e0e0e0; color:#111; border-color:#999; } [data-view="paper"] .em-cancel { color:#555; border-color:#bbb; } [data-view="paper"] .em-del { color:#000; font-weight:600; } /* ── NYOMTATÁS ───────────────────────────────────────────────────────── */ @media print { #header, #sidebar, #hright, #nav-tabs, #canvas-toolbar { display:none !important; } .panel { display:block !important; page-break-after:always; overflow:visible !important; } body { font-size:11pt; background:#fff !important; color:#111 !important; } .hop-table, .ep-table { font-size:9pt; } }