/* ====================================================================== e-windmail • Panel admina Globalny arkusz: /skins/panel.css Styl: lekki “Elastic-like”, dark mode, WCAG focus, mobile drawer ====================================================================== */ /* ------------------------- */ /* Zmienne kolorów i spacing */ /* ------------------------- */ :root{ --bg: #f6f7fb; --text: #0b1220; --muted: #6b7280; --card: #ffffff; --border: #e5e7eb; --shadow: 0 10px 25px rgba(0,0,0,.06); --primary: #2563eb; --primary-contrast: #ffffff; --success: #16a34a; --warning: #f59e0b; --danger: #dc2626; --link: #1d4ed8; --link-hover: #1e40af; --radius: 14px; --radius-sm: 10px; --pad: 16px; --focus: #7aa2ff; --focus-ring: 3px; } /* Dark mode (automatycznie wg systemu) */ @media (prefers-color-scheme: dark) { :root{ --bg: #0b1220; --text: #e8eef9; --muted: #93a1b4; --card: #101827; --border: #1f2a3b; --shadow: 0 10px 25px rgba(0,0,0,.35); --link: #7aa2ff; --link-hover: #9bb9ff; } } /* Wymuszenie motywu: */ html[data-theme="dark"]{ --bg: #0b1220; --text: #e8eef9; --muted: #93a1b4; --card: #101827; --border: #1f2a3b; --shadow: 0 10px 25px rgba(0,0,0,.35); --link: #7aa2ff; --link-hover: #9bb9ff; } /* ---------- */ /* Reset base */ /* ---------- */ *{ box-sizing: border-box; } html,body{ height:100%; } body{ margin:0; font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); } /* Preferencja zmniejszonych animacji */ @media (prefers-reduced-motion: reduce) { *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ------------- */ /* Skip link */ /* ------------- */ .skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ position:fixed; left:16px; top:16px; width:auto; height:auto; padding:10px 14px; background:#111827; color:#fff; border-radius:10px; z-index:9999; outline:none; } /* ------------- */ /* Focus styles */ /* ------------- */ :where(a, button, input, select, textarea, [tabindex]){ outline: none; } :where(a, button, input, select, textarea, [tabindex]):focus-visible{ box-shadow: 0 0 0 var(--focus-ring) var(--focus); border-radius: 8px; } /* ------------- */ /* Layout & util */ /* ------------- */ .container{ max-width: 1100px; margin: 24px auto; padding: 0 16px; } .card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: calc(var(--pad) + 2px); margin-bottom: 16px; } .card header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 8px; } .grid{ display:grid; gap:16px; grid-template-columns: 1fr 1fr; } @media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } } .muted{ color: var(--muted); } .right{ text-align:right; } .center{ text-align:center; } .mt-1{ margin-top:6px; } .mt-2{ margin-top:12px; } .mt-3{ margin-top:18px; } .mb-1{ margin-bottom:6px; } .mb-2{ margin-bottom:12px; } .mb-3{ margin-bottom:18px; } /* ------- */ /* Linki */ /* ------- */ a{ color: var(--link); text-decoration: none; } a:hover{ color: var(--link-hover); text-decoration: underline; } /* -------- */ /* Przyciski*/ /* -------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border); background: var(--card); color: var(--text); padding: 9px 14px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: transform .04s ease, background .15s ease, border-color .15s ease, filter .15s ease; } .btn:hover{ transform: translateY(-1px); } .btn:active{ transform: translateY(0); } .btn-primary{ background: var(--primary); border-color: transparent; color: var(--primary-contrast); } .btn-primary:hover{ filter: brightness(1.05); } .btn-success{ background: var(--success); color: #fff; border-color: transparent; } .btn-warning{ background: var(--warning); color: #111; border-color: transparent; } .btn-danger{ background: var(--danger); color: #fff; border-color: transparent; } .btn-sm{ padding:6px 10px; border-radius:8px; font-size:.92rem; } .btn.btn-xs{ padding: 3px 8px; font-size: 11px; border-radius: 999px; } /* -------- */ /* Formularz*/ /* -------- */ label{ display:block; font-weight:600; margin: 8px 0 6px; } .input, input:not([type]), /* <-- KLUCZ: input bez type */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], select, textarea{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); outline: none; } input:not([type]):focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="tel"]:focus, select:focus, textarea:focus{ border-color: var(--link); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } input.has-error{ border-color: rgba(248,113,113,0.9); } .field-error{ margin-top: 6px; font-size: 12px; color: #fecaca; } /* -------- */ /* Tabele */ /* -------- */ .table-wrap{ width:100%; overflow:auto; border-radius: var(--radius); } .table{ width:100%; border-collapse: collapse; background: var(--card); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); } .table th, .table td{ padding:12px 14px; border-bottom:1px solid var(--border); vertical-align: top; } .table th{ text-align:left; color: var(--muted); font-weight:700; background: rgba(0,0,0,.02); } .table tr:last-child td{ border-bottom:none; } .table .actions{ white-space: nowrap; } /* ------------- */ /* Status pills */ /* ------------- */ .pill{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:.85rem; font-weight:700; border:1px solid transparent; } .pill.ok{ color:#10b981; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); } .pill.warn{ color:#f59e0b; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); } .pill.bad{ color:#ef4444; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); } .pill.info{ color:#3b82f6; background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.35); } /* ------- */ /* Alerty */ /* ------- */ .alert{ padding:12px 14px; border-radius: 10px; border:1px solid var(--border); background: var(--card); box-shadow: var(--shadow); } .alert-success{ border-color:rgba(16,185,129,.35); background:rgba(16,185,129,.08); } .alert-danger{ border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08); } .alert-warning{ border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08); } /* ------------------- */ /* Stopka / meta info */ /* ------------------- */ .footer{ color: var(--muted); font-size:.92rem; } #countdown{ font-variant-numeric: tabular-nums; font-weight:800; } #system-time{ color: var(--muted); } /* ====================================================================== TOPBAR – nav.php (desktop nav + drawer mobile) Sterowanie: JS dodaje/usuwa klasę html.nav-open ====================================================================== */ .topbar{ position: sticky; top: 0; z-index: 100; background: #020617; border-bottom: 1px solid rgba(148, 163, 184, 0.22); } .topbar-inner{ max-width:1100px; margin:0 auto; padding:0.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .topbar-brand{ display:flex; flex-direction:column; font-size:0.9rem; min-width: 0; } .topbar-logo{ font-weight:700; letter-spacing:.2px; color:#e5e7eb; } .topbar-subtitle{ font-size:0.75rem; color:#9ca3af; } /* desktop nav */ .topbar-nav{ display:flex; flex-wrap:wrap; gap:0.5rem 0.75rem; font-size:0.85rem; } .nav-link{ display:inline-flex; align-items:center; gap:0.35rem; text-decoration:none; color:#e5e7eb; padding:0.25rem 0.6rem; border-radius:0.7rem; transition:background 0.15s ease, color 0.15s ease, transform 0.12s ease; } .topbar-nav .nav-link:hover{ background:rgba(148,163,184,0.25); text-decoration:none; transform: translateY(-1px); } .nav-link-active{ background:#3b82f6; color:#f9fafb; } .nav-link-logout{ color:#fca5a5; } .nav-link-logout:hover{ background:rgba(248,113,113,0.18); } .nav-link-icon{ width:16px; height:16px; flex:0 0 auto; } .nav-link-label{ line-height:1.2; } /* hamburger button */ .topbar-menu-btn{ display: none; /* desktop: hidden */ align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,.22); background: rgba(15,23,42,.55); color: #e5e7eb; cursor: pointer; } .topbar-menu-btn:hover{ background: rgba(148,163,184,0.16); } .topbar-menu-icon{ font-size: 18px; line-height: 1; } .topbar-menu-text{ font-size: 13px; opacity: .9; } /* backdrop + drawer */ .topbar-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9998; } /* aria-hidden togglowane JS-em */ .topbar-drawer{ position: fixed; top: 0; left: 0; height: 100vh; width: min(420px, 92vw); background: rgba(10,16,28,.98); border-right: 1px solid rgba(148,163,184,.18); box-shadow: 20px 0 60px rgba(0,0,0,.35); z-index: 9999; display: none; padding: 12px 12px 18px; } .topbar-backdrop[hidden]{ display:none !important; } .topbar-drawer[aria-hidden="true"]{ display:none !important; } .topbar-drawer[aria-hidden="false"]{ display:block !important; } .topbar-drawer-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px 12px; border-bottom: 1px solid rgba(148,163,184,.14); margin-bottom: 10px; } .topbar-drawer-title{ font-weight: 800; color: #e5e7eb; } .topbar-drawer-close{ border: 1px solid rgba(148,163,184,.22); background: rgba(15,23,42,.55); color: #e5e7eb; border-radius: 12px; padding: 6px 10px; cursor: pointer; } .topbar-drawer-close:hover{ background: rgba(148,163,184,0.16); } .topbar-drawer-nav{ display: flex; flex-direction: column; gap: 6px; } .topbar-drawer-nav .nav-link{ justify-content: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(148,163,184,.14); background: rgba(15,23,42,.35); } .topbar-drawer-nav .nav-link:hover{ background: rgba(148,163,184,0.22); transform: none; text-decoration: none; } /* blokuj scroll tła gdy menu otwarte */ html.nav-open, html.nav-open body{ overflow: hidden; } @media (max-width: 900px){ .topbar-menu-btn{ display: inline-flex; } .topbar-nav{ display: none !important; } .topbar-inner{ flex-wrap: nowrap; } } /* ====================================================================== Login / auth box ====================================================================== */ .auth-box{ max-width: 420px; margin: 10vh auto 4vh; background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; } .auth-box h1{ margin:0 0 10px; } .auth-meta{ color: var(--muted); font-size:.95rem; } /* ====================================================================== Dashboard – kafelki i nagłówek karty ====================================================================== */ .dashboard-card .card-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; } .card-title{ margin:0; font-size:1.3rem; } .card-subtitle{ margin:4px 0 0; color:var(--muted); font-size:.95rem; } .console-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:16px; } .console-tile{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:14px; background:rgba(15,23,42,.9); border:1px solid rgba(15,23,42,1); color:#e5e7eb; text-decoration:none; box-shadow:0 10px 25px rgba(0,0,0,.4); transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease; } .console-tile:hover{ transform:translateY(-2px); box-shadow:0 18px 35px rgba(0,0,0,.6); border-color:#2563eb; background:rgba(15,23,42,1); text-decoration:none; } .console-tile-title{ font-weight:700; font-size:.98rem; } .console-tile-desc{ font-size:.86rem; color:#9ca3af; } /* ====================================================================== Password strength meter (reset admin) ====================================================================== */ .password-meter{ margin-top: 6px; width: 100%; height: 6px; border-radius: 999px; background-color: #020617; overflow: hidden; border: 1px solid rgba(30,64,175,0.7); } .password-meter-bar{ width: 0; height: 100%; border-radius: inherit; transition: width 0.2s ease, background-color 0.2s ease; } .password-hint{ margin-top: 6px; font-size: 12px; color: var(--muted); } /* ====================================================================== LIVE LOGS – /live_logs.php ====================================================================== */ body.live-logs-page{ background: var(--bg); } /* kontener szerszy tylko na logach */ body.live-logs-page .container{ max-width: 1400px; width: 100%; } /* karta jako flex: logbox ma realną wysokość */ .live-card{ display: flex; flex-direction: column; min-height: 0; padding-top: 18px; padding-bottom: 18px; } .live-card-header{ flex: 0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; } .live-title{ margin:0 0 6px; } .live-top-meta{ font-size:.85rem; color: var(--muted); } .live-badge{ display:inline-block; padding:2px 6px; border-radius:12px; font-size:.7rem; background:#30363d; color:#c9d1d9; margin-left:6px; text-transform:uppercase; letter-spacing:.03em; } /* mini alert */ .live-alert-bar{ padding:8px 10px; border-radius:10px; margin-bottom:6px; font-size:.85rem; background:rgba(248,113,113,.18); border:1px solid rgba(248,113,113,.7); color:#fee2e2; } /* layout (desktop): sidebar + main */ .live-layout{ flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; } /* sidebar */ .live-sidebar{ flex: 0 0 320px; min-height: 0; display:flex; flex-direction:column; gap:12px; } .live-section{ border-radius: var(--radius-sm); background: rgba(15,23,42,.4); padding:10px 12px; border:1px solid rgba(15,23,42,.9); } .live-label{ font-size:.85rem; margin-bottom:4px; } .live-service-btn-group{ display:flex; flex-wrap:wrap; gap:6px; } .live-svc-btn{ border-radius:999px; padding:5px 10px; font-size:.8rem; } .live-svc-btn.active{ background: var(--primary); color:#fff; border-color:transparent; } .live-quick-range{ font-size:.85rem; } .live-quick-range-buttons{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .live-chip{ border-radius:999px; padding:4px 9px; font-size:.8rem; } .live-input{ font-size:.9rem; } .live-actions{ display:flex; flex-wrap:wrap; gap:6px; } .live-status-line{ font-size:.85rem; color: var(--muted); } /* main */ .live-main{ flex: 1 1 auto; min-width: 0; min-height: 0; display:flex; flex-direction:column; gap:8px; } .live-hint{ font-size:.8rem; color: var(--muted); } .live-level-counters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.82rem; } .live-counter{ padding:3px 8px; border-radius:999px; border:1px solid rgba(148,163,184,.5); background: rgba(15,23,42,.7); } .live-counter-info{ color:#38bdf8; border-color:rgba(56,189,248,.6); } .live-counter-debug{ color:#22c55e; border-color:rgba(34,197,94,.6); } .live-counter-warn{ color:#facc15; border-color:rgba(250,204,21,.6); } .live-counter-error{ color:#f97373; border-color:rgba(248,113,113,.6); } .live-counter-crit{ color:#fb7185; border-color:rgba(251,113,133,.6); } .live-counter-muted{ color: var(--muted); } .live-legend{ font-size:.78rem; color: var(--muted); } /* logbox - rośnie w flex */ .live-logbox{ flex: 1 1 auto; min-height: 240px; height: auto; max-height: calc(100vh - 280px); overflow:auto; background:#020617; color:#e6edf3; padding:6px; border-radius: var(--radius-sm); border:1px solid #111827; font-family:monospace; font-size:12px; } /* linia logu */ .live-loglist{ display:flex; flex-direction:column; gap:1px; } .logline{ display:grid; grid-template-columns: 70px 72px 110px minmax(0, 1fr) auto; align-items:flex-start; padding:3px 6px; border-radius:6px; background:rgba(15,23,42,.9); border:1px solid rgba(15,23,42,1); } .live-loglist-compact .logline{ grid-template-columns: 62px 70px 90px minmax(0, 1fr) auto; padding:2px 4px; } /* komórki */ .logcell{ padding:2px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width: 0; } .logcell-msg{ white-space: pre-wrap; word-break: break-word; overflow: visible; text-overflow: clip; } .logcell-ip{ display:flex; flex-wrap:wrap; gap:2px; justify-content:flex-end; } /* pigułki poziomu (klasa na elemencie) */ .live-level-pill{ display:inline-flex; align-items:center; justify-content:center; min-width:46px; padding:2px 6px; border-radius:999px; font-size:.7rem; font-weight:700; border:1px solid transparent; } .live-level-pill.level-info{ background:#0ea5e9; color:#0f172a; } .live-level-pill.level-debug{ background:#22c55e; color:#022c22; } .live-level-pill.level-warn{ background:#facc15; color:#422006; } .live-level-pill.level-error{ background:#f97316; color:#450a0a; } .live-level-pill.level-crit{ background:#ef4444; color:#fef2f2; } /* delikatne “tło” dla wierszy wg poziomu */ .logline.level-error{ background:rgba(127,29,29,.35); } .logline.level-crit{ background:rgba(127,29,29,.55); } .logline.level-warn{ background:rgba(113,63,18,.35); } /* paski usługi po lewej stronie (subtelne) */ .logline.svc-postfix{ box-shadow: inset 2px 0 0 #2563eb; } .logline.svc-dovecot{ box-shadow: inset 2px 0 0 #22c55e; } .logline.svc-rspamd{ box-shadow: inset 2px 0 0 #f97316; } .logline.svc-sshd{ box-shadow: inset 2px 0 0 #a855f7; } .logline.svc-mysql{ box-shadow: inset 2px 0 0 #0891b2; } .logline.svc-clamav{ box-shadow: inset 2px 0 0 #facc15; } .logline.svc-apache2{ box-shadow: inset 2px 0 0 #fb7185; } .logline.svc-fail2ban{box-shadow: inset 2px 0 0 #4ade80; } .logline.svc-rsyslog{ box-shadow: inset 2px 0 0 #f472b6; } .logline.svc-unbound{ box-shadow: inset 2px 0 0 #38bdf8; } .logline.svc-inne{ box-shadow: inset 2px 0 0 #6b7280; } /* IP pills (jedna definicja – bez konfliktów) */ .live-ip-pill{ border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); padding: 1px 6px; font-size: 11px; background: rgba(15,23,42,.9); color: #e5e7eb; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; transition: filter .12s ease, transform .12s ease, box-shadow .12s ease; } .live-ip-pill:hover{ filter: brightness(1.1); transform: translateY(-1px); } .live-ip-private{ border-color: rgba(45,212,191,.7); color: #a5f3fc; opacity: .9; } .live-ip-public{ border-color: rgba(96,165,250,.70); color: #bfdbfe; background: rgba(37, 99, 235, 0.10); } .live-ip-count-badge{ font-size: 9px; opacity: .85; margin-left: 2px; } .live-ip-banned{ border-color: #dc2626; color: #fecaca; background: rgba(220, 38, 38, 0.16); box-shadow: 0 0 0 1px rgba(248, 113, 113, .55); } .live-ip-whitelisted{ border-color: #16a34a !important; color: #bbf7d0 !important; background: rgba(22, 163, 74, 0.16) !important; } .live-ip-status-error{ border-style: dashed; opacity: 0.7; } .live-ip-risk-high{ box-shadow: 0 0 0 1px rgba(251, 191, 36, .55); border-color: rgba(251, 191, 36, .75) !important; } /* toast */ .live-toast{ position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); padding: 0.6rem 1.2rem; border-radius: 999px; font-size: 0.9rem; z-index: 9999; background: rgba(20,20,20,0.95); color: #eee; box-shadow: 0 4px 20px rgba(0,0,0,0.5); transition: opacity 0.3s ease, transform 0.3s ease; } .live-toast-ok{ border: 1px solid #2ecc71; } .live-toast-err{ border: 1px solid #e74c3c; } .live-toast.hide{ opacity: 0; transform: translateX(-50%) translateY(10px); } /* ====================================================================== Panel boczny szczegółów logu ====================================================================== */ .logdetail-overlay{ position: fixed; inset: 0; z-index: 9999; display: flex; justify-content: flex-end; pointer-events: none; } .logdetail-overlay[hidden]{ display: none; } .logdetail-backdrop{ flex: 1 1 auto; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); pointer-events: auto; } .logdetail-panel{ pointer-events: auto; width: 480px; max-width: 90vw; height: 100%; background: #111827; border-left: 1px solid rgba(255, 255, 255, 0.05); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; padding: 16px 18px; box-sizing: border-box; color: #e5e7eb; font-size: 14px; } .logdetail-header{ display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 8px; } .logdetail-title-row{ display: flex; align-items: center; gap: 8px; } .logdetail-service{ font-weight: 600; text-transform: lowercase; color: #f9fafb; } .logdetail-meta-row{ display: flex; flex-direction: column; font-size: 12px; color: #9ca3af; } .logdetail-time{ white-space: nowrap; } .logdetail-source{ opacity: 0.85; } .logdetail-close{ margin-left: auto; border: none; background: transparent; color: #9ca3af; font-size: 18px; cursor: pointer; padding: 2px 4px; } .logdetail-close:hover{ color: #f9fafb; } .logdetail-section{ margin-bottom: 16px; } .logdetail-section h3{ font-size: 13px; font-weight: 600; margin: 0 0 4px 0; color: #d1d5db; } .logdetail-section-header{ display: flex; align-items: center; justify-content: space-between; gap: 8px; } .logdetail-pre{ white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; overflow-x: hidden; } .logdetail-pre-raw{ max-height: 120px; } .logdetail-pre-json{ max-height: 180px; } .logdetail-ips{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .logdetail-ips .live-ip-pill{ cursor: default; } .logdetail-ips-hint{ margin-top: 4px; font-size: 11px; color: #9ca3af; } /* ====================================================================== OFFCANVAS: Filtry (live-logs) ====================================================================== */ .no-scroll{ overflow: hidden; } .filters-drawer{ display: none; } .filters-drawer.is-open{ display: block; position: fixed; inset: 0; z-index: 9999; } .filters-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.55); } .filters-panel{ position: absolute; right: 0; top: 0; height: 100%; width: min(420px, 92vw); background: rgba(10,16,28,.98); border-left: 1px solid rgba(148,163,184,.18); box-shadow: -20px 0 60px rgba(0,0,0,.35); display: flex; flex-direction: column; } .filters-header{ padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(148,163,184,.14); } .filters-title{ font-weight: 700; } .filters-close{ border: 1px solid rgba(148,163,184,.22); background: rgba(15,23,42,.55); color: inherit; border-radius: 12px; padding: 6px 10px; cursor: pointer; } .filters-close:hover{ background: rgba(148,163,184,0.16); } .filters-body{ padding: 12px 12px 18px; overflow: auto; } /* ====================================================================== Responsive – LIVE LOGS mobile portrait ====================================================================== */ @media (max-width: 900px){ .live-layout{ flex-direction: column; } .live-sidebar{ flex: 0 0 auto; width: 100%; } .live-main{ width: 100%; } .live-logbox{ max-height: none; min-height: 260px; } .live-card-header{ flex-direction: column; align-items: flex-start; } } /* Na wąskich ekranach: logline jako meta -> msg -> ip (1 kolumna) */ @media (max-width: 780px){ .logline{ display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "meta" "msg" "ip" !important; gap: 8px !important; padding: 10px 10px !important; } /* zdejmujemy obcinanie */ .logline .logcell{ white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* jeśli JS nadaje klasy logcell-level/time/service */ .logline .logcell-level, .logline .logcell-time, .logline .logcell-service{ grid-area: meta; display: inline-flex; align-items: center; gap: 10px; } .logline .logcell-msg{ grid-area: msg; white-space: pre-wrap !important; word-break: break-word !important; overflow-wrap: anywhere !important; } .logline .logcell-ip{ grid-area: ip; justify-content: flex-start; gap: 6px; } } /* szerokie ekrany */ @media (min-width: 1800px){ body.live-logs-page .container{ max-width: 1600px; } } /* sr-only */ .sr-only{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0; } /* ========================================================= MOBILE PORTRAIT FIX v2 – zero nakładek (flex + order) Wklej NA SAM KONIEC panel.css ========================================================= */ @media (max-width: 780px){ /* logbox jako “okno” */ .live-logbox{ height: 62vh !important; max-height: 62vh !important; min-height: 320px !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* wpis logu: zamiast grid -> flex kolumnowy (nie ma prawa się nakładać) */ .logline{ display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 10px 10px !important; } /* komórki w mobile nie ucinamy */ .logline .logcell{ white-space: normal !important; overflow: visible !important; text-overflow: clip !important; min-width: 0; } /* 1) META: 3 pierwsze elementy w jednym wierszu, który może się zawinąć */ .logline > :nth-child(1), .logline > :nth-child(2), .logline > :nth-child(3){ order: 1; display: inline-flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; margin-right: 10px !important; } /* żeby to wyglądało jak jeden pasek meta, dodajemy “wiersz” przez wrapper wizualny */ .logline > :nth-child(1){ /* pierwszy element rozpoczyna wiersz meta */ width: 100%; } /* a 2 i 3 niech będą “doklejone” */ .logline > :nth-child(2), .logline > :nth-child(3){ width: auto; } /* pigułka level nie może nachodzić */ .live-level-pill{ flex: 0 0 auto !important; min-width: 46px; } /* 2) WIADOMOŚĆ – zwykle 4 element */ .logline > :nth-child(4){ order: 2; } .logline .logcell-msg{ white-space: pre-wrap !important; word-break: break-word !important; overflow-wrap: anywhere !important; } /* 3) IP – zwykle 5 element */ .logline > :nth-child(5){ order: 3; } .logline .logcell-ip{ display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: flex-start !important; } /* lekkie uspokojenie typografii */ .live-logbox, .logcell-msg{ font-size: 12px !important; line-height: 1.35 !important; } } /* ========================================================= LIVE LOGS – FINALNE USTAWIENIA (DESKTOP + MOBILE) Wklej na sam koniec /skins/panel.css ========================================================= */ :root{ /* kontrola wysokości logboxu – desktop */ --live-logbox-min: 320px; --live-logbox-max: 72vh; } /* Desktop: układ sidebar + main, logbox ma elastyczną wysokość */ .live-logbox{ min-height: var(--live-logbox-min) !important; max-height: var(--live-logbox-max) !important; height: auto !important; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Wiadomość nigdy nie ma “poziomego przewijania” w komórce */ .logcell-msg{ white-space: pre-wrap !important; word-break: break-word !important; overflow-wrap: anywhere !important; overflow: visible !important; text-overflow: clip !important; } /* MOBILE: sidebar chowamy, bo filtry są w drawer */ @media (max-width: 900px){ .live-sidebar{ display: none !important; } /* na mobile logbox ma być “duży, ale nie sztucznie na całą stronę” */ :root{ --live-logbox-min: 360px; --live-logbox-max: 62vh; } .live-layout{ flex-direction: column; } .live-logbox{ min-height: var(--live-logbox-min) !important; max-height: var(--live-logbox-max) !important; } } /* MOBILE WĄSKI: logline jako kolumny (pewne, bez nakładek) */ @media (max-width: 780px){ .logline{ display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 10px 10px !important; } .logline .logcell{ white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* META: 1-3 element jako pasek meta */ .logline > :nth-child(1), .logline > :nth-child(2), .logline > :nth-child(3){ order: 1; display: inline-flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; } .logline > :nth-child(1){ width: 100%; } /* MSG (4) */ .logline > :nth-child(4){ order: 2; } /* IP (5) */ .logline > :nth-child(5){ order: 3; } .logline .logcell-ip{ justify-content: flex-start !important; gap: 6px !important; } .live-logbox, .logcell-msg{ font-size: 12px !important; line-height: 1.35 !important; } } /* ===== LIVE LOGS: mobilny toggle filtrów (przycisk poza sidebarem) ===== */ .btn-filters-toggle{ display:none; align-self:flex-start; margin-bottom: 10px; } /* pokazuj tylko wtedy, gdy JS wszedł w tryb mobile */ html.filters-mobile .btn-filters-toggle{ display:inline-flex; } /* nie chowamy sidebara "na ślepo" – tylko gdy JS aktywował mobile */ html.filters-mobile .live-sidebar{ display:none !important; /* sidebar i tak jest przeniesiony do drawer, ale to domyka przypadki brzegowe */ } /* z-index: log detail ma być nad filtrami (opcjonalnie, ale polecam) */ .filters-drawer.is-open{ z-index: 9998; } .logdetail-overlay{ z-index: 9999; } /* ===== LIVE LOGS: stabilna wysokość logboxu (final override) ===== */ :root{ --live-logbox-min: 340px; --live-logbox-max: 72vh; /* desktop: duży, ale nie na cały ekran */ } .live-logbox{ min-height: var(--live-logbox-min) !important; max-height: var(--live-logbox-max) !important; height: auto !important; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* mobile */ @media (max-width: 900px){ :root{ --live-logbox-min: 360px; --live-logbox-max: 62vh; } } /* bardzo małe ekrany */ @media (max-width: 420px){ :root{ --live-logbox-min: 320px; --live-logbox-max: 65vh; } } /* ========================================================= LIVE LOGS – Filtry drawer: sidebar widoczny w drawer Wklej NA SAM KONIEC panel.css ========================================================= */ @media (max-width: 780px){ /* gdy JS włączy tryb drawer na mobile */ html.filters-mobile .live-layout > .live-sidebar{ display: none !important; /* sidebar znika z normalnego layoutu */ } /* ...ale ma być widoczny po przeniesieniu do #filtersBody */ #filtersBody .live-sidebar{ display: flex !important; flex-direction: column !important; width: 100% !important; gap: 12px; } /* kosmetyka sekcji w drawer */ #filtersBody .live-section{ background: rgba(15,23,42,.35); border: 1px solid rgba(148,163,184,.14); } } /* ========================================================= LIVE LOGS – Filtry drawer: sidebar widoczny w drawer Wklej NA SAM KONIEC panel.css ========================================================= */ @media (max-width: 900px){ html.filters-mobile .live-layout > .live-sidebar{ display: none !important; } #filtersBody .live-sidebar{ display: flex !important; flex-direction: column !important; width: 100% !important; gap: 12px; } #filtersBody .live-section{ background: rgba(15,23,42,.35); border: 1px solid rgba(148,163,184,.14); } } /* ====================================================================== LIVE LOGS – Mobile IP actions (long-press) ====================================================================== */ .ip-actions{ position: fixed; inset: 0; z-index: 10000; display: none; } .ip-actions.is-open{ display: block; } .ip-actions-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.55); } .ip-actions-sheet{ position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(420px, 92vw); background: rgba(10,16,28,.98); border: 1px solid rgba(148,163,184,.18); box-shadow: 0 18px 60px rgba(0,0,0,.45); border-radius: 16px; overflow: hidden; } .ip-actions-head{ padding: 12px 14px; border-bottom: 1px solid rgba(148,163,184,.14); display:flex; align-items:center; justify-content:space-between; gap:10px; } .ip-actions-title{ font-weight: 800; color: #e5e7eb; display:flex; gap:8px; align-items:center; } .ip-actions-ip{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-weight: 700; color: #bfdbfe; } .ip-actions-close{ border: 1px solid rgba(148,163,184,.22); background: rgba(15,23,42,.55); color: #e5e7eb; border-radius: 12px; padding: 6px 10px; cursor: pointer; } .ip-actions-body{ padding: 12px 12px 16px; display:flex; gap:10px; flex-wrap: wrap; } .ip-actions-body .btn{ flex: 1 1 auto; min-width: 120px; } @media (max-width: 900px){ [data-live-sidebar] #btnFilters{ display:none !important; } } /* ========================================================= MAIL ADMIN – final override (tylko /mail/*) Wymaga: Cel: nic nie ucinać (akcje widoczne), e-maile w 1 linii, brak białych pól, brak rozpychania layoutu. ========================================================= */ /* 0) “karta w karcie” – łagodzimy padding bazowej sekcji */ body.mail-admin main.container > section.card{ padding: 18px !important; } /* 1) INPUTY/SELECTY – ciemne pola (bez bieli) */ body.mail-admin input, body.mail-admin select, body.mail-admin textarea, body.mail-admin .input, body.mail-admin .form-control, body.mail-admin .form-select{ background: rgba(2,6,23,0.35) !important; color: var(--text) !important; border: 1px solid rgba(148,163,184,0.22) !important; border-radius: 12px !important; padding: 10px 12px !important; min-height: 42px !important; box-shadow: none !important; outline: none !important; } body.mail-admin input::placeholder, body.mail-admin textarea::placeholder{ color: rgba(147,161,180,.85) !important; } body.mail-admin input:focus, body.mail-admin select:focus, body.mail-admin textarea:focus{ border-color: rgba(122,162,255,.95) !important; box-shadow: 0 0 0 3px rgba(122,162,255,.20) !important; } /* 2) Grid formularzy – kasujemy “schodki” po inline align-items:end */ body.mail-admin form.grid{ align-items: stretch !important; } body.mail-admin form.grid .right{ display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px; } /* 3) Wyróżnij “Panel” (powrót do logpanelu) */ body.mail-admin .nav-link-panel{ background: rgba(56,189,248,0.14); border: 1px solid rgba(56,189,248,0.35); color: #e5e7eb; font-weight: 800; } body.mail-admin .topbar-nav .nav-link-panel:hover{ background: rgba(56,189,248,0.22); transform: translateY(-1px); } /* ========================================================= TABELA USERS – najważniejsze 1) NIE tniemy akcji (zamiast tego: poziomy scroll w .table-wrap) 2) E-mail i alt e-mail w 1 linii (z elipsą) ========================================================= */ /* A) Zawsze pozwól na poziomy scroll, zamiast ucinać zawartość */ body.mail-admin .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; } /* B) Nie używamy table-layout: fixed globalnie, bo ono "zmusza" ucinanie przycisków. Zostawiamy auto (domyślne) i kontrolujemy zawijanie per kolumna. */ body.mail-admin .table{ min-width: 980px; } /* C) Komórki: żadnych globalnych elips/overflow dla wszystkich */ body.mail-admin .table th, body.mail-admin .table td{ overflow: visible !important; text-overflow: clip !important; } /* D) Kolumna E-mail: 1 linia + elipsa + sensowna szerokość */ body.mail-admin .table th:nth-child(1), body.mail-admin .table td:nth-child(1){ width: 260px; /* trzyma w ryzach */ max-width: 260px; } body.mail-admin .table td:nth-child(1) a{ display: inline-block; max-width: 100%; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; vertical-align: bottom; } body.mail-admin .table td:nth-child(1) code{ white-space: inherit !important; } /* E) Alt e-mail: też 1 linia + elipsa (uwaga: to 3 kolumna gdy jest "Nazwa") */ body.mail-admin .table td:nth-child(3){ max-width: 260px; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* F) Quota/Active/Force: nie zawijamy */ body.mail-admin .table td:nth-child(4), body.mail-admin .table td:nth-child(5), body.mail-admin .table td:nth-child(6){ white-space: nowrap !important; } /* G) Akcje: nigdy nie zawijaj, daj minimalną szerokość */ body.mail-admin .table th.actions, body.mail-admin .table td.actions{ white-space: nowrap !important; min-width: 260px; /* 3 przyciski zawsze się zmieszczą */ } /* H) Przyciski w akcjach: troszkę ciaśniej, ale nadal czytelnie */ body.mail-admin td.actions form{ display: inline-block; margin: 0 6px 0 0 !important; } body.mail-admin td.actions .btn{ padding: 6px 10px !important; border-radius: 10px !important; } body.mail-admin td.actions .btn-sm{ padding: 6px 10px !important; font-size: .9rem; } /* I) Opcjonalnie: na węższych ekranach jeszcze ciaśniej */ @media (max-width: 900px){ body.mail-admin .table th.actions, body.mail-admin .table td.actions{ min-width: 220px; } body.mail-admin td.actions .btn{ padding: 6px 9px !important; font-size: .88rem; } } /* ========================= IP CHECK – ładny wynik ========================= */ .check-card{ margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(148,163,184,.22); background: rgba(2,6,23,.35); box-shadow: var(--shadow); } .check-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; } .check-title{ margin:0; font-weight:800; font-size: 1.05rem; } .check-badges{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; } .badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.82rem; font-weight:800; border:1px solid transparent; white-space: nowrap; } .badge.ok{ color:#10b981; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); } .badge.warn{ color:#f59e0b; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); } .badge.bad{ color:#ef4444; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); } .badge.info{ color:#60a5fa; background:rgba(96,165,250,.10); border-color:rgba(96,165,250,.35); } .check-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } @media (max-width: 900px){ .check-grid{ grid-template-columns: 1fr; } } .check-item{ border:1px solid rgba(148,163,184,.14); background: rgba(15,23,42,.35); border-radius: 12px; padding: 10px 12px; } .check-label{ font-size:.82rem; color: var(--muted); margin-bottom: 4px; } .check-value{ font-weight:800; font-variant-numeric: tabular-nums; } .check-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-weight: 800; } .check-raw{ margin-top: 10px; border: 1px solid rgba(148,163,184,.18); border-radius: 12px; background: rgba(15,23,42,.25); padding: 8px 10px; } .check-raw summary{ cursor: pointer; font-weight: 800; color: #e5e7eb; } .code-block{ white-space: pre-wrap; max-height: 320px; overflow:auto; margin: 10px 0 0; padding: 10px; border-radius: 10px; background: #020617; border: 1px solid rgba(148,163,184,.18); color: #e6edf3; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; } /* ===== Mail Admin / Users: więcej miejsca ===== */ .container.page { max-width: 1600px; } /* tabela: niech się nie łamie dziwnie */ .table { table-layout: fixed; } .table th, .table td { vertical-align: middle; } /* email: ucinanie z ... zamiast rozpychania */ .email-col { width: 34%; } .email-link { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* akcje: wąska kolumna */ .actions-col { width: 84px; text-align: right; white-space: nowrap; } /* hamburger button */ .btn-ghost{ background: transparent; border: 1px solid rgba(255,255,255,.12); } /* dropdown */ .actions { position: relative; display: inline-block; } .actions-menu{ position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 6px; border-radius: 12px; background: rgba(10, 14, 24, .95); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 16px 40px rgba(0,0,0,.45); z-index: 50; } .menu-item{ display: block; width: 100%; text-align: left; padding: 10px 10px; border-radius: 10px; color: inherit; background: transparent; border: 0; cursor: pointer; text-decoration: none; } .menu-item:hover{ background: rgba(255,255,255,.06); } .menu-item.ok{ color: rgba(170,255,200,.95); } .menu-item.warn{ color: rgba(255,220,160,.95); } .menu-item.danger{ color: rgba(255,180,180,.95); } .menu-sep{ height: 1px; margin: 6px 4px; background: rgba(255,255,255,.10); }