/* ============================================================ Asterisk Monitor - tema sistem (CSS varijable) Teme: light-classic, dark-console (preporuceno), midnight-blue Promena teme: (postavlja se iz Podesavanja) ============================================================ */ :root, html[data-theme="light-classic"] { --bg-app: #eef1f6; --bg-panel: #ffffff; --bg-panel-alt: #f4f7fb; --bg-field: #ffffff; --border: #d7dee8; --fg-normal: #1b2430; --fg-bright: #0b1220; --fg-muted: #5b6b7f; --accent: #2f6fed; --accent-fg: #ffffff; --success: #1f8a52; --success-bg: #e3f5ea; --danger: #c8433a; --danger-bg: #fbe9e7; --warning: #b8790a; --warning-bg: #fdf1de; --info-bg: #eaf1fd; --shadow: rgba(20, 30, 50, 0.08); --mono-font: "Cascadia Code", "SF Mono", Consolas, "Roboto Mono", monospace; } html[data-theme="dark-console"] { --bg-app: #0f1318; --bg-panel: #171c23; --bg-panel-alt: #1d232b; --bg-field: #1d232b; --border: #2a323d; --fg-normal: #e4e8ee; --fg-bright: #ffffff; --fg-muted: #8b95a3; --accent: #e0a458; --accent-fg: #171c23; --success: #4fae7a; --success-bg: #1c2b23; --danger: #e2685f; --danger-bg: #2e1e1e; --warning: #e0a458; --warning-bg: #2e2619; --info-bg: #1b2634; --shadow: rgba(0, 0, 0, 0.4); --mono-font: "Cascadia Code", "SF Mono", Consolas, "Roboto Mono", monospace; } html[data-theme="midnight-blue"] { --bg-app: #0b1220; --bg-panel: #121c30; --bg-panel-alt: #17233c; --bg-field: #17233c; --border: #223252; --fg-normal: #dbe6f7; --fg-bright: #ffffff; --fg-muted: #7f92b3; --accent: #5b8def; --accent-fg: #ffffff; --success: #46b98a; --success-bg: #142a24; --danger: #e2685f; --danger-bg: #2c1c1e; --warning: #dba43c; --warning-bg: #2c2416; --info-bg: #16233c; --shadow: rgba(0, 0, 0, 0.45); --mono-font: "Cascadia Code", "SF Mono", Consolas, "Roboto Mono", monospace; } * { box-sizing: border-box; } body { background: var(--bg-app); color: var(--fg-normal); font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; } h1, h2, h3 { color: var(--fg-bright); } /* ---- Navigacija ---- */ .topnav { display: flex; align-items: center; gap: 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border); padding: 10px 20px; } .topnav .brand { font-weight: 700; color: var(--accent); } .topnav a { color: var(--fg-normal); text-decoration: none; padding: 4px 2px; } .topnav a:hover { color: var(--accent); } .topnav .spacer { flex: 1; } .topnav .user-info { color: var(--fg-muted); font-size: 0.9em; } .content { padding: 20px; max-width: 1400px; margin: 0 auto; } /* ---- Login ---- */ .login-box { max-width: 320px; margin: 80px auto; background: var(--bg-panel); border: 1px solid var(--border); padding: 24px; border-radius: 8px; } .login-box input, .login-box button { display: block; width: 100%; margin: 6px 0 14px; padding: 9px; background: var(--bg-field); color: var(--fg-normal); border: 1px solid var(--border); border-radius: 5px; } .login-box button { background: var(--accent); color: var(--accent-fg); cursor: pointer; border: none; font-weight: 600; } .error { color: var(--danger); } @media (max-width: 480px) { .login-box { margin: 40px 16px; max-width: none; padding: 20px; } .login-box h1 { font-size: 1.3em; } } /* ---- Kartice / paneli ---- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; } .card { background: var(--bg-panel); border: 1px solid var(--border); padding: 16px; border-radius: 8px; text-decoration: none; color: var(--fg-normal); transition: border-color 0.15s, transform 0.1s; } .card:hover { border-color: var(--accent); transform: translateY(-2px); } .card h2 { color: var(--accent); margin-top: 0; font-size: 1.05em; } .panel { background: var(--bg-panel); border: 1px solid var(--border); padding: 16px; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 1px 3px var(--shadow); } .panel h2 { margin-top: 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; font-size: 1.05em; } .section-title { margin-top: 28px; padding-top: 14px; border-top: 2px solid var(--border); color: var(--fg-bright); } /* ---- Forme / dugmici ---- */ .panel button, .filter-form button, button { background: var(--bg-field); color: var(--fg-normal); border: 1px solid var(--border); border-radius: 5px; padding: 7px 14px; margin-right: 8px; cursor: pointer; font-size: 0.9em; } .panel button:hover, .filter-form button:hover, button:hover { border-color: var(--accent); color: var(--accent); } .filter-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .filter-form input, .filter-form select, .panel input, .panel select { background: var(--bg-field); color: var(--fg-normal); border: 1px solid var(--border); border-radius: 5px; padding: 7px; } .status-text { color: var(--fg-muted); margin-left: 10px; font-size: 0.9em; } /* ---- Tabele ---- */ table { width: 100%; border-collapse: collapse; background: var(--bg-panel); } th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.9em; } th { background: var(--bg-panel-alt); color: var(--fg-bright); font-weight: 600; } tbody tr:hover { background: var(--info-bg); } tr.tag-error, tr.tag-warn { background: var(--warning-bg); } tr.tag-security { background: var(--danger-bg); } tr.tag-call { background: var(--info-bg); } tr.tag-hangup { color: var(--fg-muted); } .clickable-row { cursor: pointer; } .clickable-row:hover { background: var(--info-bg) !important; } /* ---- Log box ---- */ .log-box { background: var(--bg-app); color: var(--fg-normal); border: 1px solid var(--border); padding: 10px; max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; font-family: var(--mono-font); font-size: 12px; } /* ---- Info/napomene ---- */ .saved-summary { background: var(--info-bg); border: 1px solid var(--border); padding: 8px 12px; border-radius: 5px; margin-bottom: 10px; font-size: 13px; } .readonly-note { background: var(--success-bg); border: 1px solid var(--border); padding: 8px 12px; border-radius: 5px; font-size: 13px; } /* ---- Live tab ---- */ .live-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; } .live-panel { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-panel); display: flex; flex-direction: column; height: 420px; } .live-panel h3 { margin: 0; padding: 8px 12px; background: var(--bg-panel-alt); border-bottom: 1px solid var(--border); font-size: 14px; color: var(--fg-bright); } .live-panel-security h3 { background: var(--danger-bg); } .live-count { float: right; background: var(--accent); color: var(--accent-fg); border-radius: 10px; padding: 1px 8px; font-size: 12px; } .live-panel .live-table { overflow-y: auto; flex: 1; font-size: 12px; display: block; } .live-panel .live-table thead, .live-panel .live-table tbody { display: block; } .live-panel .live-table tr { display: table; width: 100%; table-layout: fixed; } .live-panel-wide { grid-column: 1 / -1; height: auto; max-height: 320px; } @media (max-width: 900px) { .live-grid { grid-template-columns: 1fr; } } /* ---- Trunk lista (Podesavanja) ---- */ .trunk-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; } .trunk-row input { flex: 1; } /* ---- Wallboard veliki brojevi ---- */ .wallboard-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; } .big-number { background: var(--bg-panel); border: 2px solid var(--border); border-radius: 8px; text-align: center; padding: 20px 10px; } .big-number-warn { border-color: var(--warning); background: var(--warning-bg); } .big-number-value { font-size: 42px; font-weight: 700; font-family: var(--mono-font); color: var(--fg-bright); } .big-number-label { font-size: 13px; color: var(--fg-muted); margin-top: 4px; } #wb-missed-card:hover { filter: brightness(1.1); } @media (max-width: 700px) { .wallboard-numbers { grid-template-columns: repeat(2, 1fr); } } /* ---- Extension board: LOKALI (jasno odvojeno od trunk-ova) ---- */ .extension-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; } .ext-card { border-radius: 8px; padding: 12px 8px; text-align: center; border: 2px solid var(--border); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; } .ext-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px var(--shadow); } .ext-number { font-size: 20px; font-weight: 700; font-family: var(--mono-font); } .ext-status { font-size: 11px; margin-top: 2px; } .ext-idle { background: var(--success-bg); border-color: var(--success); color: var(--success); } .ext-busy { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } .ext-ringing { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); } .ext-unavailable { background: var(--bg-panel-alt); border-color: var(--fg-muted); color: var(--fg-muted); } .ext-unknown { background: var(--bg-panel-alt); border-color: var(--border); color: var(--fg-muted); } /* ---- Trunk sekcija (odvojena, drugaciji vizuelni jezik od lokala) ---- */ .trunk-peers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; } .trunk-peer-card { border-radius: 6px; padding: 8px 10px; border: 1px dashed var(--border); font-family: var(--mono-font); font-size: 12px; } .trunk-peer-card.trunk-registered { border-color: var(--success); color: var(--success); } .trunk-peer-card.trunk-unmonitored { border-color: var(--fg-muted); color: var(--fg-muted); } .trunk-bar-wrap { margin-bottom: 12px; } .trunk-bar-label { font-size: 13px; margin-bottom: 4px; font-family: var(--mono-font); } .trunk-bar-track { background: var(--bg-panel-alt); border: 1px solid var(--border); border-radius: 4px; height: 16px; overflow: hidden; } .trunk-bar-fill { height: 100%; background: var(--accent); } .trunk-bar-fill.trunk-ok { background: var(--success); } .trunk-bar-fill.trunk-warn { background: var(--warning); } .trunk-bar-fill.trunk-critical { background: var(--danger); } /* ---- Top pozivaoci ---- */ .top-callers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; } @media (max-width: 700px) { .top-callers-grid { grid-template-columns: 1fr; } } /* ---- Tema izbor (Podesavanja) ---- */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; } .theme-swatch { border: 2px solid var(--border); border-radius: 8px; padding: 10px; cursor: pointer; text-align: center; font-size: 13px; } .theme-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .theme-swatch-preview { height: 36px; border-radius: 5px; margin-bottom: 6px; } .heatmap-grid { display: grid; grid-template-columns: 40px repeat(24, 1fr); gap: 2px; margin-top: 10px; font-size: 10px; overflow-x: auto; } .heatmap-corner { } .heatmap-hour-label, .heatmap-day-label { text-align: center; color: var(--fg-muted); font-family: var(--mono-font); } .heatmap-day-label { text-align: right; padding-right: 4px; } .heatmap-cell { background: var(--accent); border-radius: 2px; height: 18px; text-align: center; color: var(--fg-bright); font-family: var(--mono-font); line-height: 18px; } .app-footer { text-align: center; padding: 14px; color: var(--fg-muted); font-size: 12px; border-top: 1px solid var(--border); margin-top: 30px; } .app-footer a { color: var(--accent); text-decoration: none; }