fix(aria): rewrite filter UI to follow canonical template pattern
CD - Develop / build-and-deploy (push) Failing after 13m51s
CD - Develop / build-and-deploy (push) Failing after 13m51s
PrecursorAlerts and DevicePosture were using custom inline select dropdowns for filtering. Both now use the canonical left filter sidebar with collapsible status-pills, active filter chips, and content-frame layout from hiveops-template/TablePage.svelte. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { ariaApi, type DeviceSecurityPosture, type OsEolStatus } from '../lib/api';
|
||||
import { addToast } from '../lib/stores';
|
||||
import Pagination from './common/Pagination.svelte';
|
||||
|
||||
let postures: DeviceSecurityPosture[] = [];
|
||||
let totalElements = 0;
|
||||
@@ -11,10 +12,13 @@
|
||||
|
||||
let loading = true;
|
||||
|
||||
// Filters
|
||||
// Filter sidebar
|
||||
let filterSidebarCollapsed = false;
|
||||
let filterScore: '' | 'low' | 'medium' = '';
|
||||
let filterEol: OsEolStatus | '' = '';
|
||||
|
||||
$: hasActiveFilters = !!filterScore || !!filterEol;
|
||||
|
||||
// Detail panel
|
||||
let panelOpen = false;
|
||||
let panelDevice: DeviceSecurityPosture | null = null;
|
||||
@@ -23,8 +27,8 @@
|
||||
loading = true;
|
||||
try {
|
||||
const params: Record<string, any> = { page, size: pageSize };
|
||||
if (filterScore) params.scoreFilter = filterScore;
|
||||
if (filterEol) params.osEolStatus = filterEol;
|
||||
if (filterScore) params.scoreFilter = filterScore;
|
||||
if (filterEol) params.osEolStatus = filterEol;
|
||||
|
||||
const res = await ariaApi.getPostures(params);
|
||||
postures = res.data.content;
|
||||
@@ -38,6 +42,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
function setScoreFilter(val: '' | 'low' | 'medium') {
|
||||
filterScore = filterScore === val ? '' : val;
|
||||
currentPage = 0;
|
||||
load(0);
|
||||
}
|
||||
|
||||
function setEolFilter(val: OsEolStatus | '') {
|
||||
filterEol = filterEol === val ? '' : val;
|
||||
currentPage = 0;
|
||||
load(0);
|
||||
}
|
||||
|
||||
function clearAllFilters() {
|
||||
filterScore = '';
|
||||
filterEol = '';
|
||||
currentPage = 0;
|
||||
load(0);
|
||||
}
|
||||
|
||||
function openPanel(device: DeviceSecurityPosture) {
|
||||
panelDevice = device;
|
||||
panelOpen = true;
|
||||
@@ -50,7 +73,7 @@
|
||||
return 'bad';
|
||||
}
|
||||
|
||||
function eolLabel(s: OsEolStatus): string {
|
||||
function eolLabel(s: OsEolStatus | string): string {
|
||||
if (s === 'SUPPORTED') return 'Supported';
|
||||
if (s === 'EOL') return 'EOL';
|
||||
return 'Unknown';
|
||||
@@ -77,411 +100,478 @@
|
||||
return !!(d.goldImageHash && d.currentImageHash && d.goldImageHash !== d.currentImageHash);
|
||||
}
|
||||
|
||||
function onFilterChange() { load(0); }
|
||||
|
||||
onMount(() => load(0));
|
||||
</script>
|
||||
|
||||
<div class="page-wrap">
|
||||
<div class="page-wrapper">
|
||||
|
||||
<div class="header">
|
||||
<div class="header-text">
|
||||
<h1>Device Posture</h1>
|
||||
<p>Per-device security compliance — disk encryption, image integrity, OS currency</p>
|
||||
</div>
|
||||
<div class="header-count">
|
||||
{#if !loading}
|
||||
<span class="total-badge">{totalElements} device{totalElements !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
|
||||
<div class="page-body">
|
||||
|
||||
<!-- LEFT: Collapsible filter sidebar -->
|
||||
<div class="filter-sidebar" class:sidebar-collapsed={filterSidebarCollapsed}>
|
||||
|
||||
<div class="filter-sidebar-toggle-bar" class:bar-filters-active={hasActiveFilters}>
|
||||
{#if !filterSidebarCollapsed}
|
||||
<span class="filter-sidebar-title">Filters</span>
|
||||
<div class="toggle-bar-right">
|
||||
<span class="sidebar-stat-pill">{totalElements}</span>
|
||||
<button class="sidebar-toggle-btn"
|
||||
on:click={() => filterSidebarCollapsed = true}
|
||||
title="Collapse filters">◀</button>
|
||||
</div>
|
||||
{:else}
|
||||
<button class="sidebar-toggle-btn"
|
||||
on:click={() => filterSidebarCollapsed = false}
|
||||
title="Expand filters">▶</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if !filterSidebarCollapsed}
|
||||
<div class="filter-sidebar-content">
|
||||
{#if hasActiveFilters}
|
||||
<button class="sidebar-clear-all-btn" on:click={clearAllFilters}>✕ Clear all</button>
|
||||
{/if}
|
||||
|
||||
<div class="filter-section">
|
||||
<label class="filter-section-label">Score</label>
|
||||
<div class="status-pills">
|
||||
<button class="status-pill" class:active={filterScore === 'low'}
|
||||
on:click={() => setScoreFilter('low')}>Low (<50)</button>
|
||||
<button class="status-pill" class:active={filterScore === 'medium'}
|
||||
on:click={() => setScoreFilter('medium')}>Below Good (<80)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-section">
|
||||
<label class="filter-section-label">OS Status</label>
|
||||
<div class="status-pills">
|
||||
<button class="status-pill" class:active={filterEol === 'EOL'}
|
||||
on:click={() => setEolFilter('EOL')}>EOL</button>
|
||||
<button class="status-pill" class:active={filterEol === 'SUPPORTED'}
|
||||
on:click={() => setEolFilter('SUPPORTED')}>Supported</button>
|
||||
<button class="status-pill" class:active={filterEol === 'UNKNOWN'}
|
||||
on:click={() => setEolFilter('UNKNOWN')}>Unknown</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Score</label>
|
||||
<select class="filter-select" bind:value={filterScore} on:change={onFilterChange}>
|
||||
<option value="">All Scores</option>
|
||||
<option value="low">Low (<50)</option>
|
||||
<option value="medium">Below Good (<80)</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- RIGHT: active chips + content frame -->
|
||||
<div class="page-right">
|
||||
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">OS Status</label>
|
||||
<select class="filter-select" bind:value={filterEol} on:change={onFilterChange}>
|
||||
<option value="">All</option>
|
||||
<option value="EOL">EOL Only</option>
|
||||
<option value="SUPPORTED">Supported Only</option>
|
||||
<option value="UNKNOWN">Unknown</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{#if hasActiveFilters}
|
||||
<div class="active-filters">
|
||||
<span class="active-filters-label">Filters:</span>
|
||||
{#if filterScore}
|
||||
<span class="filter-tag" style="border-color: #d97706">
|
||||
<span class="filter-tag-dot" style="background-color: #d97706"></span>
|
||||
Score: {filterScore === 'low' ? 'Low (<50)' : 'Below Good (<80)'}
|
||||
<button class="filter-tag-remove" on:click={() => { filterScore = ''; currentPage = 0; load(0); }}>×</button>
|
||||
</span>
|
||||
{/if}
|
||||
{#if filterEol}
|
||||
<span class="filter-tag" style="border-color: {filterEol === 'EOL' ? '#dc2626' : filterEol === 'SUPPORTED' ? '#16a34a' : '#6b7280'}">
|
||||
<span class="filter-tag-dot" style="background-color: {filterEol === 'EOL' ? '#dc2626' : filterEol === 'SUPPORTED' ? '#16a34a' : '#6b7280'}"></span>
|
||||
OS: {eolLabel(filterEol)}
|
||||
<button class="filter-tag-remove" on:click={() => { filterEol = ''; currentPage = 0; load(0); }}>×</button>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button class="btn btn-secondary btn-sm" on:click={() => load(currentPage)}>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div class="content-frame">
|
||||
<div class="page-main">
|
||||
|
||||
{#if loading}
|
||||
<div class="loading-row">Loading…</div>
|
||||
{:else if postures.length === 0}
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">🔒</div>
|
||||
<div class="empty-title">No posture data yet</div>
|
||||
<div class="empty-sub">Devices report posture via POST /api/aria/posture/report using the service secret</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Device</th>
|
||||
<th>OS Version</th>
|
||||
<th>OS Status</th>
|
||||
<th>Disk Enc.</th>
|
||||
<th>Audit Policy</th>
|
||||
<th>Whitelist</th>
|
||||
<th>Image</th>
|
||||
<th>Score</th>
|
||||
<th>Last Check</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each postures as device (device.deviceId)}
|
||||
<tr>
|
||||
<td class="device-cell">{device.deviceAgentId ?? device.deviceId}</td>
|
||||
<td class="os-cell">{device.osVersion ?? '—'}</td>
|
||||
<td>
|
||||
<span class="eol-badge eol-{(device.osEolStatus ?? 'UNKNOWN').toLowerCase()}">
|
||||
{eolLabel(device.osEolStatus)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="bool-cell {boolClass(device.diskEncryptionEnabled)}">{boolCell(device.diskEncryptionEnabled)}</td>
|
||||
<td class="bool-cell {boolClass(device.auditPolicyCompliant)}">{boolCell(device.auditPolicyCompliant)}</td>
|
||||
<td class="bool-cell {boolClass(device.softwareWhitelistEnabled)}">{boolCell(device.softwareWhitelistEnabled)}</td>
|
||||
<td>
|
||||
{#if imageMismatch(device)}
|
||||
<span class="img-badge drift">Drift</span>
|
||||
{:else if device.goldImageHash}
|
||||
<span class="img-badge ok">Match</span>
|
||||
{:else}
|
||||
<span class="img-badge unknown">—</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<div class="score-wrap">
|
||||
<div class="score-bar">
|
||||
<div class="score-fill score-{scoreColor(device.postureScore)}"
|
||||
style="width: {device.postureScore ?? 0}%"></div>
|
||||
</div>
|
||||
<span class="score-text score-text-{scoreColor(device.postureScore)}">
|
||||
{device.postureScore ?? '—'}
|
||||
</span>
|
||||
<div class="toolbar">
|
||||
<span class="toolbar-count">{totalElements} device{totalElements !== 1 ? 's' : ''}</span>
|
||||
<div class="toolbar-right">
|
||||
<button class="btn-refresh" on:click={() => load(currentPage)}>Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<Pagination
|
||||
page={currentPage} {totalPages} {totalElements} size={pageSize}
|
||||
on:pageChange={e => { currentPage = e.detail.page; load(currentPage); }}
|
||||
on:pageSizeChange={e => { currentPage = 0; load(0); }}
|
||||
/>
|
||||
|
||||
<div class="table-container">
|
||||
{#if loading}
|
||||
<div class="table-msg">Loading…</div>
|
||||
{:else if postures.length === 0}
|
||||
<div class="table-msg">
|
||||
{hasActiveFilters ? 'No devices match the current filters.' : 'No posture data yet. Devices report posture via the ARIA signals module.'}
|
||||
</div>
|
||||
</td>
|
||||
<td class="date-cell">{formatDate(device.lastPostureCheckAt)}</td>
|
||||
<td>
|
||||
<button class="btn btn-secondary btn-sm" on:click={() => openPanel(device)}>
|
||||
Detail
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{:else}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Device</th>
|
||||
<th>OS Version</th>
|
||||
<th>OS Status</th>
|
||||
<th>Disk Enc.</th>
|
||||
<th>Audit Policy</th>
|
||||
<th>Whitelist</th>
|
||||
<th>Image</th>
|
||||
<th>Score</th>
|
||||
<th>Last Check</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each postures as device (device.deviceId)}
|
||||
<tr on:click={() => openPanel(device)}>
|
||||
<td class="mono-cell">{device.deviceAgentId ?? device.deviceId}</td>
|
||||
<td class="os-cell">{device.osVersion ?? '—'}</td>
|
||||
<td>
|
||||
<span class="eol-badge eol-{(device.osEolStatus ?? 'UNKNOWN').toLowerCase()}">
|
||||
{eolLabel(device.osEolStatus)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="bool-cell {boolClass(device.diskEncryptionEnabled)}">{boolCell(device.diskEncryptionEnabled)}</td>
|
||||
<td class="bool-cell {boolClass(device.auditPolicyCompliant)}">{boolCell(device.auditPolicyCompliant)}</td>
|
||||
<td class="bool-cell {boolClass(device.softwareWhitelistEnabled)}">{boolCell(device.softwareWhitelistEnabled)}</td>
|
||||
<td>
|
||||
{#if imageMismatch(device)}
|
||||
<span class="img-badge drift">Drift</span>
|
||||
{:else if device.goldImageHash}
|
||||
<span class="img-badge ok">Match</span>
|
||||
{:else}
|
||||
<span class="img-badge unknown">—</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<div class="score-wrap">
|
||||
<div class="score-bar">
|
||||
<div class="score-fill score-{scoreColor(device.postureScore)}"
|
||||
style="width: {device.postureScore ?? 0}%"></div>
|
||||
</div>
|
||||
<span class="score-text score-text-{scoreColor(device.postureScore)}">
|
||||
{device.postureScore ?? '—'}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="date-cell">{formatDate(device.lastPostureCheckAt)}</td>
|
||||
<td class="actions" on:click|stopPropagation>
|
||||
<button class="btn-sm btn-secondary-sm" on:click={() => openPanel(device)}>Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if totalPages > 1}
|
||||
<div class="pagination">
|
||||
<button class="btn btn-secondary btn-sm" disabled={currentPage === 0}
|
||||
on:click={() => load(currentPage - 1)}>← Prev</button>
|
||||
<span class="page-info">Page {currentPage + 1} of {totalPages}</span>
|
||||
<button class="btn btn-secondary btn-sm" disabled={currentPage >= totalPages - 1}
|
||||
on:click={() => load(currentPage + 1)}>Next →</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if panelOpen && panelDevice}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="overlay" on:click={() => { panelOpen = false; panelDevice = null; }}></div>
|
||||
<div class="panel">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
|
||||
<div class="panel-overlay" on:click={() => { panelOpen = false; panelDevice = null; }}></div>
|
||||
<div class="panel" role="dialog" aria-modal="true">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h2 class="panel-title">{panelDevice.deviceAgentId ?? `Device ${panelDevice.deviceId}`}</h2>
|
||||
<p class="panel-sub">Institution: {panelDevice.institutionKey ?? '—'}</p>
|
||||
<div class="panel-header-text">
|
||||
<div class="panel-title">{panelDevice.deviceAgentId ?? `Device ${panelDevice.deviceId}`}</div>
|
||||
<div class="panel-subtitle">Institution: {panelDevice.institutionKey ?? '—'}</div>
|
||||
</div>
|
||||
<button class="close-btn" on:click={() => { panelOpen = false; panelDevice = null; }}>✕</button>
|
||||
<button class="panel-close" on:click={() => { panelOpen = false; panelDevice = null; }} aria-label="Close">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="panel-score-row">
|
||||
<div class="big-score score-text-{scoreColor(panelDevice.postureScore)}">
|
||||
{panelDevice.postureScore ?? '—'}
|
||||
<div class="panel-body">
|
||||
<div class="panel-score-row">
|
||||
<div class="big-score score-text-{scoreColor(panelDevice.postureScore)}">
|
||||
{panelDevice.postureScore ?? '—'}
|
||||
</div>
|
||||
<div class="big-score-label">Posture Score</div>
|
||||
<div class="score-bar big-bar">
|
||||
<div class="score-fill score-{scoreColor(panelDevice.postureScore)}"
|
||||
style="width: {panelDevice.postureScore ?? 0}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="big-score-label">Posture Score</div>
|
||||
<div class="score-bar big-bar">
|
||||
<div class="score-fill score-{scoreColor(panelDevice.postureScore)}"
|
||||
style="width: {panelDevice.postureScore ?? 0}%"></div>
|
||||
|
||||
<div class="check-list">
|
||||
<div class="check-row">
|
||||
<span class="check-label">Disk Encryption</span>
|
||||
<span class="check-val {boolClass(panelDevice.diskEncryptionEnabled)}">
|
||||
{boolCell(panelDevice.diskEncryptionEnabled)}
|
||||
{#if panelDevice.diskEncryptionEnabled === false}<span class="penalty">−25</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">Audit Policy</span>
|
||||
<span class="check-val {boolClass(panelDevice.auditPolicyCompliant)}">
|
||||
{boolCell(panelDevice.auditPolicyCompliant)}
|
||||
{#if panelDevice.auditPolicyCompliant === false}<span class="penalty">−20</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">Software Whitelist</span>
|
||||
<span class="check-val {boolClass(panelDevice.softwareWhitelistEnabled)}">
|
||||
{boolCell(panelDevice.softwareWhitelistEnabled)}
|
||||
{#if panelDevice.softwareWhitelistEnabled === false}<span class="penalty">−10</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">OS Version</span>
|
||||
<span class="check-val neutral">{panelDevice.osVersion ?? '—'}</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">OS EOL Status</span>
|
||||
<span class="check-val {panelDevice.osEolStatus === 'EOL' ? 'bad' : panelDevice.osEolStatus === 'SUPPORTED' ? 'ok' : 'neutral'}">
|
||||
{eolLabel(panelDevice.osEolStatus)}
|
||||
{#if panelDevice.osEolStatus === 'EOL'}<span class="penalty">−20</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="check-divider"></div>
|
||||
|
||||
<div class="check-row">
|
||||
<span class="check-label">Gold Image Hash</span>
|
||||
<span class="check-val neutral hash">{panelDevice.goldImageHash ? panelDevice.goldImageHash.substring(0, 20) + '…' : '—'}</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">Current Hash</span>
|
||||
<span class="check-val {imageMismatch(panelDevice) ? 'bad' : 'neutral'} hash">
|
||||
{panelDevice.currentImageHash ? panelDevice.currentImageHash.substring(0, 20) + '…' : '—'}
|
||||
{#if imageMismatch(panelDevice)}<span class="penalty">−20 drift</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="check-divider"></div>
|
||||
|
||||
<div class="check-row">
|
||||
<span class="check-label">Last Posture Check</span>
|
||||
<span class="check-val neutral">{formatDate(panelDevice.lastPostureCheckAt)}</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">Gold Validated At</span>
|
||||
<span class="check-val neutral">{formatDate(panelDevice.goldImageValidatedAt)}</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">Record Updated</span>
|
||||
<span class="check-val neutral">{formatDate(panelDevice.updatedAt)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-checks">
|
||||
<div class="check-row">
|
||||
<span class="check-label">Disk Encryption</span>
|
||||
<span class="check-val {boolClass(panelDevice.diskEncryptionEnabled)}">
|
||||
{boolCell(panelDevice.diskEncryptionEnabled)}
|
||||
{#if panelDevice.diskEncryptionEnabled === false}<span class="penalty">−25</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">Audit Policy</span>
|
||||
<span class="check-val {boolClass(panelDevice.auditPolicyCompliant)}">
|
||||
{boolCell(panelDevice.auditPolicyCompliant)}
|
||||
{#if panelDevice.auditPolicyCompliant === false}<span class="penalty">−20</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">Software Whitelist</span>
|
||||
<span class="check-val {boolClass(panelDevice.softwareWhitelistEnabled)}">
|
||||
{boolCell(panelDevice.softwareWhitelistEnabled)}
|
||||
{#if panelDevice.softwareWhitelistEnabled === false}<span class="penalty">−10</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">OS Version</span>
|
||||
<span class="check-val neutral">{panelDevice.osVersion ?? '—'}</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">OS EOL Status</span>
|
||||
<span class="check-val {panelDevice.osEolStatus === 'EOL' ? 'bad' : panelDevice.osEolStatus === 'SUPPORTED' ? 'ok' : 'neutral'}">
|
||||
{eolLabel(panelDevice.osEolStatus)}
|
||||
{#if panelDevice.osEolStatus === 'EOL'}<span class="penalty">−20</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="check-divider"></div>
|
||||
|
||||
<div class="check-row">
|
||||
<span class="check-label">Gold Image Hash</span>
|
||||
<span class="check-val neutral hash">{panelDevice.goldImageHash ? panelDevice.goldImageHash.substring(0, 20) + '…' : '—'}</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">Current Hash</span>
|
||||
<span class="check-val {imageMismatch(panelDevice) ? 'bad' : 'neutral'} hash">
|
||||
{panelDevice.currentImageHash ? panelDevice.currentImageHash.substring(0, 20) + '…' : '—'}
|
||||
{#if imageMismatch(panelDevice)}<span class="penalty">−20 drift</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="check-divider"></div>
|
||||
|
||||
<div class="check-row">
|
||||
<span class="check-label">Last Posture Check</span>
|
||||
<span class="check-val neutral">{formatDate(panelDevice.lastPostureCheckAt)}</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">Gold Validated At</span>
|
||||
<span class="check-val neutral">{formatDate(panelDevice.goldImageValidatedAt)}</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<span class="check-label">Record Updated</span>
|
||||
<span class="check-val neutral">{formatDate(panelDevice.updatedAt)}</span>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button class="btn btn-secondary" on:click={() => { panelOpen = false; panelDevice = null; }}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.page-wrap {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
.page-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.header-count { display: flex; align-items: center; }
|
||||
.total-badge {
|
||||
background: rgba(255,255,255,0.15);
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
||||
|
||||
.filter-group { display: flex; align-items: center; gap: 6px; }
|
||||
.filter-label { font-size: 0.8rem; color: #6b7280; white-space: nowrap; }
|
||||
.filter-select {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
outline: none;
|
||||
}
|
||||
.filter-select:focus { border-color: #2563eb; }
|
||||
|
||||
.loading-row { padding: 2rem; text-align: center; color: #6b7280; }
|
||||
|
||||
.empty-state {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
justify-content: center; padding: 4rem 2rem; gap: 12px;
|
||||
}
|
||||
.empty-icon { font-size: 2.5rem; }
|
||||
.empty-title { font-size: 1.1rem; font-weight: 600; color: #374151; }
|
||||
.empty-sub { font-size: 0.85rem; color: #9ca3af; text-align: center; max-width: 400px; }
|
||||
|
||||
.table-wrapper {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
padding: 24px 24px 0;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.page-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.content-frame {
|
||||
flex: 1;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
margin-top: 8px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Filter sidebar — canonical from template */
|
||||
.filter-sidebar {
|
||||
width: 220px; min-width: 220px;
|
||||
background: #f8f9fa;
|
||||
border-right: 1px solid #dee2e6;
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition: width 0.2s ease, min-width 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.filter-sidebar.sidebar-collapsed { width: 40px; min-width: 40px; }
|
||||
|
||||
.filter-sidebar-toggle-bar {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0.55rem 0.65rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
background: #eef2f7;
|
||||
flex-shrink: 0; min-height: 36px;
|
||||
}
|
||||
.bar-filters-active { background: #dbeafe !important; border-bottom-color: #93c5fd !important; }
|
||||
.bar-filters-active .filter-sidebar-title { color: #1e40af !important; }
|
||||
.toggle-bar-right { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
|
||||
.filter-sidebar-title { font-size: var(--font-size-label); font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.sidebar-stat-pill { font-size: var(--font-size-tiny); background: #e0e7ff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
|
||||
.sidebar-toggle-btn { background: none; border: 1px solid #d1d5db; border-radius: 4px; padding: 1px 6px; cursor: pointer; font-size: 0.82rem; color: #6b7280; line-height: 1.4; flex-shrink: 0; margin-left: auto; }
|
||||
.sidebar-toggle-btn:hover { background: #e5e7eb; border-color: #9ca3af; }
|
||||
|
||||
.filter-sidebar-content { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 0.65rem; overflow-y: auto; flex: 1; }
|
||||
.filter-section { display: flex; flex-direction: column; gap: 0.3rem; }
|
||||
.filter-section-label { font-size: var(--font-size-tiny); font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
|
||||
.status-pills { display: flex; flex-direction: column; gap: 4px; }
|
||||
.status-pill { padding: 5px 10px; border-radius: 6px; border: 1px solid #d1d5db; background: white; font-size: var(--font-size-caption); font-weight: 500; cursor: pointer; color: #374151; text-align: left; transition: all 0.15s; }
|
||||
.status-pill:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
|
||||
.status-pill.active { background: #2563eb; color: white; border-color: #2563eb; }
|
||||
|
||||
.sidebar-clear-all-btn { border: none; background: #fee2e2; color: #dc2626; border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: var(--font-size-tiny); font-weight: 600; text-align: left; }
|
||||
.sidebar-clear-all-btn:hover { background: #fecaca; }
|
||||
|
||||
/* Active filter chips */
|
||||
.active-filters {
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
|
||||
margin-bottom: 8px; padding: 0.5rem 0.75rem; flex-shrink: 0;
|
||||
}
|
||||
.active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; }
|
||||
.filter-tag {
|
||||
display: inline-flex; align-items: center; gap: 0.4rem;
|
||||
padding: 0.3rem 0.6rem; background: white;
|
||||
border: 1px solid #ddd; border-left-width: 3px;
|
||||
border-radius: 4px; font-size: var(--font-size-tiny); font-weight: 500; color: #333;
|
||||
}
|
||||
.filter-tag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.filter-tag-remove {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 18px; height: 18px; border: none; background: #e5e7eb;
|
||||
border-radius: 50%; cursor: pointer; font-size: var(--font-size-tiny);
|
||||
color: #666; line-height: 1; padding: 0; margin-left: 0.15rem;
|
||||
}
|
||||
.filter-tag-remove:hover { background: #f44336; color: white; }
|
||||
|
||||
/* Toolbar */
|
||||
.page-main {
|
||||
flex: 1; overflow-y: auto; padding: 16px 24px 24px;
|
||||
min-width: 0; display: flex; flex-direction: column;
|
||||
}
|
||||
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-shrink: 0; }
|
||||
.toolbar-count { font-size: var(--font-size-body-sm); color: #6b7280; }
|
||||
.toolbar-right { display: flex; gap: 0.5rem; }
|
||||
.btn-refresh {
|
||||
background: #f3f4f6; color: #374151; border: 1px solid #d1d5db;
|
||||
border-radius: 6px; padding: 6px 12px; font-size: var(--font-size-body-sm); font-weight: 500; cursor: pointer;
|
||||
}
|
||||
.btn-refresh:hover { background: #e5e7eb; }
|
||||
|
||||
/* Table card — canonical */
|
||||
.table-card {
|
||||
background: white; border: 1px solid #e5e7eb; border-radius: 8px;
|
||||
overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0;
|
||||
}
|
||||
.table-container { flex: 1; overflow: auto; }
|
||||
.table-msg { padding: 2rem; text-align: center; color: #6b7280; font-size: var(--font-size-body-sm); }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead tr { background: #f9fafb; }
|
||||
thead { background: #f9fafb; position: sticky; top: 0; z-index: 5; }
|
||||
th {
|
||||
padding: 10px 12px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
color: #374151;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
white-space: nowrap;
|
||||
}
|
||||
td {
|
||||
padding: 10px 12px;
|
||||
font-size: 0.88rem;
|
||||
color: #1f2937;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
vertical-align: middle;
|
||||
color: #374151; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.3px;
|
||||
font-weight: 600; border-bottom: 2px solid #e5e7eb; padding: 0.6rem 0.75rem; text-align: left; white-space: nowrap;
|
||||
}
|
||||
td { border-bottom: 1px solid #f3f4f6; color: #1f2937; padding: 0.55rem 0.75rem; font-size: var(--font-size-label); vertical-align: middle; }
|
||||
tbody tr:hover { background: #eff6ff; cursor: pointer; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover td { background: #eff6ff; }
|
||||
|
||||
.device-cell { font-family: monospace; font-size: 0.82rem; color: #374151; }
|
||||
.os-cell { font-size: 0.82rem; color: #4b5563; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.date-cell { white-space: nowrap; color: #6b7280; font-size: 0.8rem; }
|
||||
.mono-cell { font-family: monospace; font-size: 0.78rem; color: #374151; }
|
||||
.os-cell { font-size: 0.78rem; color: #4b5563; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.date-cell { white-space: nowrap; color: #6b7280; }
|
||||
.actions { white-space: nowrap; }
|
||||
|
||||
.bool-cell { font-size: 1rem; font-weight: 700; text-align: center; }
|
||||
.bool-cell.ok { color: #16a34a; }
|
||||
.bool-cell.bad { color: #dc2626; }
|
||||
.bool-cell { font-size: 0.9rem; font-weight: 700; text-align: center; }
|
||||
.bool-cell.ok { color: #16a34a; }
|
||||
.bool-cell.bad { color: #dc2626; }
|
||||
.bool-cell.neutral { color: #9ca3af; }
|
||||
|
||||
.eol-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 9px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.eol-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; }
|
||||
.eol-badge.eol-supported { background: #dcfce7; color: #16a34a; }
|
||||
.eol-badge.eol-eol { background: #fee2e2; color: #dc2626; }
|
||||
.eol-badge.eol-unknown { background: #f3f4f6; color: #6b7280; }
|
||||
|
||||
.img-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 9px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.img-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; }
|
||||
.img-badge.ok { background: #dcfce7; color: #16a34a; }
|
||||
.img-badge.drift { background: #fee2e2; color: #dc2626; }
|
||||
.img-badge.unknown { background: #f3f4f6; color: #9ca3af; }
|
||||
|
||||
.score-wrap { display: flex; align-items: center; gap: 8px; }
|
||||
.score-bar {
|
||||
width: 60px;
|
||||
height: 6px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.score-bar { width: 60px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
|
||||
.score-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
|
||||
.score-fill.score-good { background: #16a34a; }
|
||||
.score-fill.score-medium { background: #d97706; }
|
||||
.score-fill.score-bad { background: #dc2626; }
|
||||
.score-fill.score-unknown { background: #9ca3af; }
|
||||
|
||||
.score-text { font-size: 0.82rem; font-weight: 700; }
|
||||
.score-text-good { color: #16a34a; }
|
||||
.score-text-medium { color: #d97706; }
|
||||
.score-text-bad { color: #dc2626; }
|
||||
.score-text-unknown { color: #9ca3af; }
|
||||
|
||||
.pagination {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
justify-content: center; padding: 8px 0;
|
||||
}
|
||||
.page-info { font-size: 0.82rem; color: #6b7280; }
|
||||
.btn-sm { border: none; border-radius: 5px; padding: 0.28rem 0.65rem; cursor: pointer; font-size: 0.78rem; font-weight: 500; }
|
||||
.btn-secondary-sm { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
|
||||
.btn-secondary-sm:hover { background: #e5e7eb; }
|
||||
|
||||
/* Panel */
|
||||
.overlay {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.35);
|
||||
z-index: 100;
|
||||
}
|
||||
/* Slide-in panel — canonical */
|
||||
.panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 999; cursor: pointer; }
|
||||
.panel {
|
||||
position: fixed; top: 0; right: 0;
|
||||
width: 480px; height: 100vh;
|
||||
background: white;
|
||||
box-shadow: -4px 0 24px rgba(0,0,0,0.15);
|
||||
z-index: 101;
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: fixed; top: 0; right: 0; width: 480px; height: 100vh;
|
||||
background: white; z-index: 1000; display: flex; flex-direction: column;
|
||||
box-shadow: -4px 0 20px rgba(0,0,0,0.15); animation: panelIn 0.25s ease; overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes panelIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
|
||||
.panel-header {
|
||||
padding: 20px 20px 16px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex; justify-content: space-between; align-items: flex-start;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(180deg, #081651 0%, #1c49b8 100%);
|
||||
padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
|
||||
}
|
||||
.panel-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: #111827; font-family: monospace; }
|
||||
.panel-sub { margin: 0; font-size: 0.82rem; color: #6b7280; }
|
||||
|
||||
.close-btn {
|
||||
background: none; border: none; font-size: 1.1rem;
|
||||
cursor: pointer; color: #9ca3af; padding: 4px; line-height: 1;
|
||||
.panel-title { color: white; font-size: 1rem; font-weight: 700; font-family: monospace; }
|
||||
.panel-subtitle { color: rgba(255,255,255,0.65); font-size: 0.78rem; margin-top: 2px; }
|
||||
.panel-close {
|
||||
background: rgba(255,255,255,0.15); border: none; color: white;
|
||||
width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
|
||||
font-size: 0.85rem; display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; transition: background 0.15s;
|
||||
}
|
||||
.close-btn:hover { color: #374151; }
|
||||
.panel-close:hover { background: rgba(255,255,255,0.3); }
|
||||
.panel-body { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
|
||||
.panel-footer { border-top: 1px solid #e5e7eb; padding: 1rem 1.5rem; display: flex; justify-content: flex-end; gap: 0.75rem; flex-shrink: 0; background: #f9fafb; }
|
||||
|
||||
.panel-score-row {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
flex-shrink: 0;
|
||||
padding: 1rem; background: #f9fafb; border-radius: 8px;
|
||||
}
|
||||
.big-score { font-size: 3rem; font-weight: 800; line-height: 1; }
|
||||
.big-score-label { font-size: 0.75rem; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.big-bar { width: 100%; height: 8px; margin-top: 4px; }
|
||||
|
||||
.panel-checks {
|
||||
flex: 1; overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
}
|
||||
|
||||
.check-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.check-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.check-label { font-size: 0.82rem; color: #6b7280; flex-shrink: 0; width: 150px; }
|
||||
.check-val { font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
|
||||
@@ -491,42 +581,57 @@
|
||||
.check-val.hash { font-family: monospace; font-size: 0.78rem; font-weight: 400; }
|
||||
|
||||
.penalty {
|
||||
display: inline-block;
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
padding: 1px 6px;
|
||||
border-radius: 8px;
|
||||
display: inline-block; background: #fee2e2; color: #dc2626;
|
||||
font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 8px;
|
||||
}
|
||||
|
||||
.check-divider { height: 1px; background: #f3f4f6; margin: 4px 0; }
|
||||
|
||||
/* Dark mode */
|
||||
:global(.dark-mode) .filter-select { background: #1e293b; border-color: #334155; color: #e2e8f0; }
|
||||
:global(.dark-mode) .filter-label { color: #9ca3af; }
|
||||
:global(.dark-mode) .table-wrapper { background: #1f2937; border-color: #374151; }
|
||||
:global(.dark-mode) thead tr { background: #111827; }
|
||||
:global(.dark-mode) th { color: #9ca3af; border-color: #374151; }
|
||||
:global(.dark-mode) td { color: #e5e7eb; border-color: #374151; }
|
||||
:global(.dark-mode) tbody tr:hover td { background: #1e3a5f; }
|
||||
:global(.dark-mode) .device-cell { color: #9ca3af; }
|
||||
:global(.dark-mode) .os-cell { color: #94a3b8; }
|
||||
:global(.dark-mode) .date-cell { color: #6b7280; }
|
||||
:global(.dark-mode) .score-bar { background: #374151; }
|
||||
:global(.dark-mode) .empty-title { color: #e2e8f0; }
|
||||
:global(.dark-mode) .empty-sub { color: #6b7280; }
|
||||
:global(.dark-mode) .content-frame { border-color: #374151; background: #1f2937; }
|
||||
:global(.dark-mode) .filter-sidebar { background: #1f2937; border-right-color: #374151; }
|
||||
:global(.dark-mode) .filter-sidebar-toggle-bar { background: #111827; border-bottom-color: #374151; }
|
||||
:global(.dark-mode) .bar-filters-active { background: #1d4ed8 !important; border-bottom-color: #60a5fa !important; }
|
||||
:global(.dark-mode) .bar-filters-active .filter-sidebar-title { color: #bfdbfe !important; }
|
||||
:global(.dark-mode) .filter-sidebar-title { color: #9ca3af; }
|
||||
:global(.dark-mode) .sidebar-toggle-btn { border-color: #4b5563; color: #9ca3af; }
|
||||
:global(.dark-mode) .sidebar-toggle-btn:hover { background: #374151; }
|
||||
:global(.dark-mode) .status-pill { background: #1e293b; border-color: #334155; color: #94a3b8; }
|
||||
:global(.dark-mode) .status-pill:hover { background: #1e2d4a; border-color: #2563eb; color: #93c5fd; }
|
||||
:global(.dark-mode) .status-pill.active { background: #2563eb; color: white; }
|
||||
:global(.dark-mode) .sidebar-stat-pill { background: #1e2d4a; border-color: #3730a3; color: #93c5fd; }
|
||||
:global(.dark-mode) .sidebar-clear-all-btn { background: #3b1a1a; color: #f87171; }
|
||||
|
||||
:global(.dark-mode) .active-filters { background: #111827; border-color: #374151; }
|
||||
:global(.dark-mode) .active-filters-label { color: #9ca3af; }
|
||||
:global(.dark-mode) .filter-tag { background: #1f2937; border-color: #374151; color: #e5e5e5; }
|
||||
:global(.dark-mode) .filter-tag-remove { background: #374151; color: #e5e7eb; }
|
||||
|
||||
:global(.dark-mode) .toolbar-count { color: #9ca3af; }
|
||||
:global(.dark-mode) .btn-refresh { background: #374151; color: #e5e7eb; border-color: #4b5563; }
|
||||
|
||||
:global(.dark-mode) .table-card { background: #1f2937; }
|
||||
:global(.dark-mode) thead { background: #111827; border-bottom-color: #374151; }
|
||||
:global(.dark-mode) th { background: #111827; color: #9ca3af; border-bottom-color: #374151; }
|
||||
:global(.dark-mode) td { color: #e5e7eb; border-bottom-color: #374151; }
|
||||
:global(.dark-mode) tbody tr { background: #1f2937; }
|
||||
:global(.dark-mode) tbody tr:hover { background: #374151; }
|
||||
:global(.dark-mode) .mono-cell { color: #9ca3af; }
|
||||
:global(.dark-mode) .os-cell { color: #94a3b8; }
|
||||
:global(.dark-mode) .date-cell { color: #9ca3af; }
|
||||
:global(.dark-mode) .table-msg { color: #9ca3af; }
|
||||
:global(.dark-mode) .score-bar { background: #374151; }
|
||||
:global(.dark-mode) .btn-secondary-sm { background: #374151; color: #e5e7eb; border-color: #4b5563; }
|
||||
|
||||
:global(.dark-mode) .eol-badge.eol-supported { background: #052e16; color: #86efac; }
|
||||
:global(.dark-mode) .eol-badge.eol-eol { background: #450a0a; color: #fca5a5; }
|
||||
:global(.dark-mode) .eol-badge.eol-unknown { background: #1e293b; color: #94a3b8; }
|
||||
:global(.dark-mode) .img-badge.ok { background: #052e16; color: #86efac; }
|
||||
:global(.dark-mode) .img-badge.drift { background: #450a0a; color: #fca5a5; }
|
||||
:global(.dark-mode) .img-badge.unknown { background: #1e293b; color: #94a3b8; }
|
||||
:global(.dark-mode) .panel { background: #1f2937; }
|
||||
:global(.dark-mode) .panel-header { border-color: #374151; }
|
||||
:global(.dark-mode) .panel-title { color: #f1f5f9; }
|
||||
:global(.dark-mode) .panel-sub { color: #9ca3af; }
|
||||
:global(.dark-mode) .panel-score-row { border-color: #374151; }
|
||||
|
||||
:global(.dark-mode) .panel { background: #1e293b; }
|
||||
:global(.dark-mode) .panel-footer { background: #162032; border-top-color: #334155; }
|
||||
:global(.dark-mode) .panel-score-row { background: #111827; }
|
||||
:global(.dark-mode) .check-val.neutral { color: #cbd5e1; }
|
||||
:global(.dark-mode) .check-divider { background: #374151; }
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user