Yan Xell
109 lines
5.0 KiB
CSS
109 lines
5.0 KiB
CSS
/* logs.css — stili specifici per la pagina Log DB */
|
|
|
|
/* ── Row counter ────────────────────────────────────────────────────────── */
|
|
.row-num {
|
|
color: var(--mut);
|
|
font-size: .75rem;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
padding-right: 10px !important;
|
|
min-width: 2.5rem;
|
|
}
|
|
|
|
|
|
.log-filters{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
|
|
.log-filters input[type=search]{padding:6px 10px;border:1px solid var(--brd);border-radius:6px;font-size:.85rem;width:230px;background:var(--surf);color:var(--txt)}
|
|
.log-filters label{display:flex;align-items:center;gap:5px;font-size:.85rem;cursor:pointer;color:var(--mut);user-select:none}
|
|
.log-filters input[type=checkbox]{cursor:pointer;accent-color:var(--pri)}
|
|
/* Header layout: h2 + process-name pills on the same row */
|
|
.log-hdr-group{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0;flex-wrap:wrap}
|
|
.log-hdr-group h2{margin:0;white-space:nowrap}
|
|
|
|
/* Process-name checkboxes in header — same look as type-filter-group */
|
|
.log-pn-filter{display:flex;align-items:center;gap:2px;background:#f1f5f9;border:1px solid var(--brd);border-radius:7px;padding:3px 8px;flex-wrap:wrap}
|
|
.log-pn-filter:empty{display:none}
|
|
.log-pn-filter label{display:flex;align-items:center;gap:4px;padding:2px 6px;border-radius:5px;font-size:.82rem;cursor:pointer;color:var(--txt);user-select:none;white-space:nowrap}
|
|
.log-pn-filter label:hover{background:#e2e8f0}
|
|
.log-pn-filter input[type=checkbox]{cursor:pointer;accent-color:var(--pri);width:.85rem;height:.85rem}
|
|
|
|
/* Type filter group (Info / Warning / Error) */
|
|
.type-filter-group{display:flex;align-items:center;gap:2px;background:#f1f5f9;border:1px solid var(--brd);border-radius:7px;padding:3px 8px}
|
|
.type-filter-group label{padding:2px 6px;border-radius:5px;font-size:.82rem;color:var(--txt);gap:4px}
|
|
.type-filter-group label:hover{background:#e2e8f0}
|
|
.log-filters .filter-sep{display:inline-block;width:1px;height:1.2rem;background:#cbd5e1;margin:0 .25rem;align-self:center}
|
|
.pg-sep{display:inline-block;width:1px;height:1.4rem;background:#cbd5e1;margin:0 .25rem;align-self:center}
|
|
.pg-run-info{font-size:.85rem;font-weight:600;color:var(--txt);white-space:nowrap;display:flex;align-items:center;gap:.4rem}
|
|
.pg-proc-tag{font-size:.72rem;font-weight:600;padding:.1rem .45rem;border-radius:999px;background:#dbeafe;color:#1d4ed8;white-space:nowrap}
|
|
.pg-process-filter{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:#f1f5f9;border-radius:6px;padding:.25rem .6rem}
|
|
.pg-process-filter label{display:flex;align-items:center;gap:.3rem;font-size:.8rem;cursor:pointer;color:var(--txt);user-select:none;white-space:nowrap}
|
|
.pg-process-filter input[type=checkbox]{cursor:pointer;accent-color:var(--pri);width:.85rem;height:.85rem}
|
|
|
|
/* push footer above both fixed bars */
|
|
footer { padding-bottom: 8rem; }
|
|
|
|
/* ── Row pagination (above run bar) ─────────────────────────────────────── */
|
|
.log-pg-rows {
|
|
position: fixed;
|
|
bottom: 4.6rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
z-index: 149;
|
|
background: rgba(248,250,252,.97);
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 6px;
|
|
padding: .22rem .55rem;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,.1);
|
|
white-space: nowrap;
|
|
}
|
|
.pg-row-info { font-size: .78rem; color: #64748b; }
|
|
.pg-row-count { font-size: .72rem; opacity: .75; }
|
|
.log-pg-rows .pg-btn:disabled { opacity: .35; pointer-events: none; cursor: default; border-color: var(--brd); background: var(--surf); color: var(--txt); }
|
|
|
|
/* ── Run pagination (fixed bottom bar) ──────────────────────────────────── */
|
|
.log-pagination {
|
|
position: fixed;
|
|
bottom: 1.5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
z-index: 150;
|
|
background: rgba(255,255,255,.96);
|
|
border: 1px solid var(--brd);
|
|
border-radius: 8px;
|
|
padding: .4rem .75rem;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,.18);
|
|
flex-wrap: wrap;
|
|
}
|
|
.pg-select{padding:5px 8px;border:1px solid var(--brd);border-radius:6px;font-size:.85rem;background:var(--surf);color:var(--txt);cursor:pointer}
|
|
.pg-info{font-size:.8rem;color:var(--mut);margin-left:4px}
|
|
|
|
/* ── Violet loading spinner ─────────────────────────────────────────────── */
|
|
.logs-spinner {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255,255,255,.65);
|
|
z-index: 10;
|
|
border-radius: 8px;
|
|
}
|
|
.logs-spinner-ring {
|
|
width: 36px;
|
|
height: 36px;
|
|
border: 4px solid #ede9fe;
|
|
border-top-color: #7c3aed;
|
|
border-radius: 50%;
|
|
animation: logs-spin .7s linear infinite;
|
|
}
|
|
@keyframes logs-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|