:root{ --bg:#0d1218; --card:#121a23; --text:#f3f6f8; --muted:#9fb3c8; --border:#1f2a36; --green:#2e8b57; --green-bg:#1f5131; --yg:#c2a60d; --yg-bg:#5a4a1e; --blue:#3b82f6; --blue-hover:#2563eb; --blue-bg:#1b3d5a; --red:#ef4444; --red-bg:#5a1b1b; --gray:#5b7087; --gray-bg:#2b3541; } html,body{background:var(--bg);color:var(--text);} /* Fade transitions */ html, body { height: 100%; } body{opacity:0; transition: opacity .25s ease-in-out;} body.fade-in{opacity:1;} body.fade-out{opacity:0;} a{color:var(--text);text-decoration:none;} a:hover{text-decoration:underline;} .header-bar{background:#151b23;} .card-dark{background:var(--card);border:1px solid var(--border);} .hero{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border:1px solid #1e2835; border-radius:14px; } .hero .banner{ color:#cbd5e1; font-weight:700; text-align:center; opacity:.9; } .hero .form-wrap{ display:flex; gap:12px; justify-content:center; } .hero .form-control{ height:48px; max-width:720px; background:#ffffff; color:#111827; border:1px solid #d1d5db; border-radius:12px; padding:10px 14px; } .hero .form-control::placeholder{ color:#9ca3af; } .hero .btn-scan{ height:48px; padding:0 28px; border-radius:12px; background:var(--blue); border:1px solid rgba(255,255,255,.08); color:white; font-weight:600; } .hero .btn-scan:hover{ background:var(--blue-hover); } .hero .inner{ padding:22px; } @media (max-width: 768px){ .hero .form-wrap{ flex-direction:column; } .hero .form-control, .hero .btn-scan{ width:100%; } } table.table-dark{--bs-table-bg:var(--card);--bs-table-striped-bg:#0f1620;--bs-table-hover-bg:#1a2532;color:var(--text);} .tag{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-weight:700;font-size:.85rem;width:fit-content;max-width:100%;} .status-cell { white-space:nowrap; } .tag-green{background:var(--green-bg);border:1px solid var(--green);} .tag-yellow{background:var(--yg-bg);border:1px solid var(--yg);} .tag-blue{background:var(--blue-bg);border:1px solid #0ea5e9;} .tag-red{background:var(--red-bg);border:1px solid var(--red);} .tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;} .tabs::-webkit-scrollbar{display:none;} .tab{all:unset;border:1px solid #2c3643;border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap;} .tab.active.gray{background:var(--gray-bg);border-color:var(--gray);color:#fff;} .tab.active.blue{background:#103d63;border-color:#0ea5e9;color:#fff;} .tab.active.yellow{background:#403513;border-color:#c2a60d;color:#fff;} .tab.active.green{background:#103822;border-color:#2e8b57;color:#fff;} .tab.active.red{background:#431717;border-color:#ef4444;color:#fff;} @media (max-width:768px){ #scanTable thead{display:none;} #scanTable tbody tr{display:block;margin:12px 0;border:1px solid var(--border);border-radius:12px;background:var(--card);} #scanTable tbody td{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:10px 12px;border:none!important;min-width:0;} #scanTable tbody td::before{content:attr(data-label);font-weight:700;color:#93a1b3;} .text-end{text-align:left!important;} .url-cell a, .url-cell span { display:inline; white-space:normal; word-break:break-word; overflow-wrap:anywhere; } .status-cell { white-space:normal; } } /* Rounded scan list and nowrap date column */ .table-rounded { border-radius: 14px; overflow: hidden; } .time-cell .text-nowrap { white-space: nowrap !important; } /* URL can wrap, other columns stay in one line */ #scanTable td.url-cell { white-space: normal !important; word-break: break-word; } #scanTable td:not(.url-cell) { white-space: nowrap; } /* --- URL truncation with ellipsis --- */ #scanTable td.url-cell { white-space: nowrap; } #scanTable td.url-cell, #scanTable td.url-cell > a, #scanTable td.url-cell > span { max-width: 60ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } /* --- URL cell: clean ellipsis without boxy background --- */ #scanTable td.url-cell { white-space: nowrap; } #scanTable td.url-cell a, #scanTable td.url-cell span { display: block; /* fill cell width to avoid chip-like boxes */ max-width: 70ch; /* ~70 characters */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Kill any background/padding from .mono within the URL cell */ #scanTable td.url-cell .mono { background: transparent !important; padding: 0 !important; border-radius: 0 !important; } /* Optional: keep link color consistent with text */ #scanTable td.url-cell a { color: inherit; text-decoration: none; } #scanTable td.url-cell a:hover { text-decoration: underline; } /* --- URL cell clean display (no chip, no bars) --- */ #scanTable td.url-cell { white-space: nowrap; } #scanTable td.url-cell .url-clip { display: inline-block; max-width: 70ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; } #scanTable td.url-cell .mono, #scanTable td.url-cell a.urlLink { background: transparent !important; padding: 0 !important; border-radius: 0 !important; } #scanTable td.url-cell a.urlLink { color: inherit; text-decoration: none; } #scanTable td.url-cell a.urlLink:hover { text-decoration: underline; } /* --- URL cell: ellipsis on the link itself; no horizontal scroll --- */ #scanTable { width: 100%; table-layout: auto; } #scanTable td.url-cell { white-space: nowrap; overflow: hidden; } /* allow shrinking */ #scanTable td.url-cell a.urlLink { display: block; width: 100%; max-width: 70ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent !important; padding: 0 !important; border-radius: 0 !important; color: inherit; text-decoration: none; } #scanTable td.url-cell a.urlLink:hover { text-decoration: underline; } /* Neutralize chip-like styles inside URL cell */ #scanTable td.url-cell .mono { background: transparent !important; padding: 0 !important; border-radius: 0 !important; } /* Keep other columns on one line without forcing horizontal scroll */ #scanTable td:not(.url-cell) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* URL text filter */ .scan-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .url-filter{ position:relative; display:inline-flex; align-items:center; } .url-filter input#urlFilter{ height:36px; padding:6px 28px 6px 10px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); min-width:260px; } .url-filter .clear-filter{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:20px; height:20px; line-height:18px; text-align:center; border:0; border-radius:50%; background:transparent; color:var(--text); opacity:.6; cursor:pointer; } .url-filter .clear-filter:hover{ opacity:1; background:rgba(255,255,255,.08); } :root{ --bg:#0f1115; --card:#111826; --panel:#151b23; --text:#E6EAF2; --muted:#9aa4b2; --border:#2a3242; --accent:#7aa2f7; } [data-theme="light"]{ --bg:#ffffff; --card:#ffffff; --panel:#f7f8fb; --text:#0f1115; --muted:#475569; --border:#e5e7eb; --accent:#2563eb; } /* Base */ html,body{ background:var(--bg); color:var(--text); } a{ color:var(--accent); } .header-bar{ background: var(--panel) !important; color: var(--text) !important; } [data-theme="light"] .header-bar{ background: var(--card) !important; } .header-bar .navbar-brand, .header-bar .navbar-brand *{ color: var(--text) !important; } .header-bar .text-secondary{ color: var(--muted) !important; } /* Keep pill text readable in light mode */ [data-theme="light"] .tag{ color:#fff !important; } /* Make the existing outline-light buttons readable on light theme */ [data-theme="light"] .btn-outline-light{ color:#111827 !important; border-color:#111827 !important; } [data-theme="light"] .btn-outline-light:hover{ background:#111827 !important; color:#fff !important; } /* Table dark class only for dark mode (JS also toggles) */ [data-theme="light"] table.table-dark{ background:#fff !important; color:#111827 !important; } :root{ --bg:#0d1218; --card:#121a23; --text:#f3f6f8; --muted:#9fb3c8; --border:#1f2a36; --green:#2e8b57; --green-bg:#1f5131; --yg:#c2a60d; --yg-bg:#5a4a1e; --blue:#3b82f6; --blue-hover:#2563eb; --blue-bg:#1b3d5a; --red:#ef4444; --red-bg:#5a1b1b; --gray:#5b7087; --gray-bg:#2b3541; } html,body{background:var(--bg);color:var(--text);} /* Fade transitions */ html, body { height: 100%; } body{opacity:0; transition: opacity .25s ease-in-out;} body.fade-in{opacity:1;} body.fade-out{opacity:0;} a{color:var(--text);text-decoration:none;} a:hover{text-decoration:underline;} .header-bar{background:#151b23;} .card-dark{background:var(--card);border:1px solid var(--border);} .hero{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border:1px solid #1e2835; border-radius:14px; } .hero .banner{ color:#cbd5e1; font-weight:700; text-align:center; opacity:.9; } .hero .form-wrap{ display:flex; gap:12px; justify-content:center; } .hero .form-control{ height:48px; max-width:720px; background:#ffffff; color:#111827; border:1px solid #d1d5db; border-radius:12px; padding:10px 14px; } .hero .form-control::placeholder{ color:#9ca3af; } .hero .btn-scan{ height:48px; padding:0 28px; border-radius:12px; background:var(--blue); border:1px solid rgba(255,255,255,.08); color:white; font-weight:600; } .hero .btn-scan:hover{ background:var(--blue-hover); } .hero .inner{ padding:22px; } @media (max-width: 768px){ .hero .form-wrap{ flex-direction:column; } .hero .form-control, .hero .btn-scan{ width:100%; } } table.table-dark{--bs-table-bg:var(--card);--bs-table-striped-bg:#0f1620;--bs-table-hover-bg:#1a2532;color:var(--text);} .tag{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-weight:700;font-size:.85rem;width:fit-content;max-width:100%;} .status-cell { white-space:nowrap; } .tag-green{background:var(--green-bg);border:1px solid var(--green);} .tag-yellow{background:var(--yg-bg);border:1px solid var(--yg);} .tag-blue{background:var(--blue-bg);border:1px solid #0ea5e9;} .tag-red{background:var(--red-bg);border:1px solid var(--red);} .tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;} .tabs::-webkit-scrollbar{display:none;} .tab{all:unset;border:1px solid #2c3643;border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap;} .tab.active.gray{background:var(--gray-bg);border-color:var(--gray);color:#fff;} .tab.active.blue{background:#103d63;border-color:#0ea5e9;color:#fff;} .tab.active.yellow{background:#403513;border-color:#c2a60d;color:#fff;} .tab.active.green{background:#103822;border-color:#2e8b57;color:#fff;} .tab.active.red{background:#431717;border-color:#ef4444;color:#fff;} @media (max-width:768px){ #scanTable thead{display:none;} #scanTable tbody tr{display:block;margin:12px 0;border:1px solid var(--border);border-radius:12px;background:var(--card);} #scanTable tbody td{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:10px 12px;border:none!important;min-width:0;} #scanTable tbody td::before{content:attr(data-label);font-weight:700;color:#93a1b3;} .text-end{text-align:left!important;} .url-cell a, .url-cell span { display:inline; white-space:normal; word-break:break-word; overflow-wrap:anywhere; } .status-cell { white-space:normal; } } /* Rounded scan list and nowrap date column */ .table-rounded { border-radius: 14px; overflow: hidden; } .time-cell .text-nowrap { white-space: nowrap !important; } /* URL can wrap, other columns stay in one line */ #scanTable td.url-cell { white-space: normal !important; word-break: break-word; } #scanTable td:not(.url-cell) { white-space: nowrap; } /* --- URL truncation with ellipsis --- */ #scanTable td.url-cell { white-space: nowrap; } #scanTable td.url-cell, #scanTable td.url-cell > a, #scanTable td.url-cell > span { max-width: 60ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } /* --- URL cell: clean ellipsis without boxy background --- */ #scanTable td.url-cell { white-space: nowrap; } #scanTable td.url-cell a, #scanTable td.url-cell span { display: block; /* fill cell width to avoid chip-like boxes */ max-width: 70ch; /* ~70 characters */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Kill any background/padding from .mono within the URL cell */ #scanTable td.url-cell .mono { background: transparent !important; padding: 0 !important; border-radius: 0 !important; } /* Optional: keep link color consistent with text */ #scanTable td.url-cell a { color: inherit; text-decoration: none; } #scanTable td.url-cell a:hover { text-decoration: underline; } /* --- URL cell clean display (no chip, no bars) --- */ #scanTable td.url-cell { white-space: nowrap; } #scanTable td.url-cell .url-clip { display: inline-block; max-width: 70ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; } #scanTable td.url-cell .mono, #scanTable td.url-cell a.urlLink { background: transparent !important; padding: 0 !important; border-radius: 0 !important; } #scanTable td.url-cell a.urlLink { color: inherit; text-decoration: none; } #scanTable td.url-cell a.urlLink:hover { text-decoration: underline; } /* --- URL cell: ellipsis on the link itself; no horizontal scroll --- */ #scanTable { width: 100%; table-layout: auto; } #scanTable td.url-cell { white-space: nowrap; overflow: hidden; } /* allow shrinking */ #scanTable td.url-cell a.urlLink { display: block; width: 100%; max-width: 70ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent !important; padding: 0 !important; border-radius: 0 !important; color: inherit; text-decoration: none; } #scanTable td.url-cell a.urlLink:hover { text-decoration: underline; } /* Neutralize chip-like styles inside URL cell */ #scanTable td.url-cell .mono { background: transparent !important; padding: 0 !important; border-radius: 0 !important; } /* Keep other columns on one line without forcing horizontal scroll */ #scanTable td:not(.url-cell) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ==== Inline