52 lines
7.1 KiB
CSS
52 lines
7.1 KiB
CSS
.defender-page { box-sizing: border-box; display: grid; align-content: start; gap: var(--space-4); width: 100%; min-height: 100%; padding: var(--panel-inset); color: var(--text); background: var(--surface-app); }
|
|
.defender-header { order: 0; }
|
|
.defender-source strong { color: var(--heading); font-weight: var(--fw-regular); }
|
|
.defender-context { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; color: var(--muted); font-size: var(--type-meta-size); }
|
|
.defender-metrics { display: grid; grid-template-columns: repeat(auto-fill, var(--tile-compact-width)); justify-content: start; gap: var(--segment-gap); min-width: 0; padding: var(--segment-inset); border: var(--bw-hairline) solid var(--segment-border); border-radius: var(--segment-radius); background: var(--segment-surface); }
|
|
.defender-metrics article { display: grid; align-content: center; gap: var(--space-2); min-width: 0; min-height: 88px; padding: var(--tile-inset); border: var(--border-hair) solid var(--tile-border); border-radius: var(--tile-radius); background: var(--tile-surface); box-shadow: none; }
|
|
.defender-metrics span { color: var(--muted); font-size: var(--type-table-body-size); font-weight: var(--fw-semibold); line-height: 1.3; }
|
|
.defender-metrics strong { color: var(--heading); font-size: var(--type-h2-size); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; }
|
|
.defender-tabs, .client-info-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
|
.defender-tabs button, .client-info-tabs button { min-height: 36px; padding: var(--space-2) var(--space-4); border: var(--border-hair) solid transparent; border-radius: var(--btn-radius); color: var(--text); background: transparent; font-size: var(--ui-control-size); font-weight: var(--fw-semibold); cursor: pointer; }
|
|
.defender-tabs button:hover, .client-info-tabs button:hover { background: var(--tile-surface-hover); }
|
|
.defender-tabs button:focus-visible, .client-info-tabs button:focus-visible { outline: var(--bw-emphasis) solid var(--focus-ring); outline-offset: calc(-1 * var(--bw-emphasis)); }
|
|
.defender-tabs button[aria-pressed="true"], .client-info-tabs button[aria-pressed="true"] { outline: var(--bw-emphasis) solid var(--marking-color); outline-offset: calc(-1 * var(--bw-emphasis)); background: var(--tile-surface); }
|
|
.defender-view { display: grid; gap: var(--space-4); min-width: 0; padding: var(--tile-inset); border: var(--border-hair) solid var(--tile-border); border-radius: var(--tile-radius); background: var(--tile-surface); }
|
|
.defender-view > header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
|
|
.defender-view > header h2 { margin: 0; color: var(--heading); font-size: var(--type-h2-size); font-weight: var(--fw-semibold); }
|
|
.defender-view > header span { color: var(--muted); font-size: var(--type-meta-size); }
|
|
.defender-table-wrap { min-width: 0; overflow-x: auto; background: var(--tile-surface); }
|
|
.defender-table { width: 100%; border-collapse: collapse; table-layout: auto; color: var(--text); background: var(--tile-surface); font-size: var(--type-table-body-size); }
|
|
.defender-table th { padding: var(--space-2) var(--space-3); border-bottom: var(--border-hair) solid var(--line-strong); color: var(--heading); font-size: var(--type-table-body-size); font-weight: var(--fw-semibold); text-align: left; text-transform: uppercase; vertical-align: bottom; }
|
|
.defender-table td { max-width: 440px; padding: var(--space-3); border-bottom: var(--border-hair) solid var(--line); line-height: 1.45; overflow-wrap: normal; word-break: normal; vertical-align: top; }
|
|
.defender-table td > button { padding: 0; border: 0; color: var(--heading); background: transparent; font: inherit; font-weight: var(--fw-semibold); text-align: left; cursor: pointer; }
|
|
.defender-table .defender-row-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
|
|
.defender-table .defender-row-toggle .triangle-icon { flex: 0 0 auto; }
|
|
.defender-table td > button:hover { background: var(--tile-surface-hover); }
|
|
.defender-table td > button:focus-visible { outline: var(--bw-emphasis) solid var(--focus-ring); outline-offset: 2px; }
|
|
.defender-selected-row > td { background: var(--table-row-marking-surface); }
|
|
.defender-selected-row > td:first-child { box-shadow: inset var(--marker-width) 0 var(--table-row-marking); }
|
|
.defender-detail-row > td { max-width: none; padding: 0 0 var(--space-3); border-bottom-color: var(--table-row-marking); }
|
|
.defender-table small { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--type-meta-size); }
|
|
.defender-severity { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
|
|
.defender-severity i { width: 4px; height: 18px; background: var(--severity, var(--muted)); }
|
|
.defender-conflict, .defender-warning { color: var(--warning); }
|
|
.defender-unavailable, .defender-empty { color: var(--muted); }
|
|
.defender-drilldown { display: grid; gap: var(--space-3); padding: var(--tile-inset); border: var(--border-hair) solid var(--tile-border); border-radius: var(--tile-radius); background: var(--tile-surface); box-shadow: none; }
|
|
.defender-drilldown h3, .defender-drilldown h4 { margin: 0; color: var(--heading); font-weight: var(--fw-semibold); }
|
|
.defender-drilldown h3 { font-size: var(--type-detail-title-size); }
|
|
.defender-drilldown h4 { font-size: var(--type-h4-size); }
|
|
.defender-drilldown p { margin: 0; font-size: var(--type-body-size); line-height: 1.55; }
|
|
.defender-risk-coverage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--bw-hairline) solid var(--line); border-bottom: var(--bw-hairline) solid var(--line); }
|
|
.defender-risk-coverage > span { color: var(--text); font-size: var(--type-table-body-size); }
|
|
.defender-drilldown details { border-top: var(--border-hair) solid var(--line); padding-top: var(--space-3); }
|
|
.defender-drilldown summary { color: var(--heading); font-size: var(--type-table-body-size); font-weight: var(--fw-semibold); cursor: pointer; }
|
|
.defender-drilldown details > .defender-table, .defender-drilldown details > .defender-drilldown { margin-top: var(--space-3); }
|
|
.defender-aggregate-summary, .defender-severity-strip { display: grid; grid-template-columns: repeat(auto-fill, var(--tile-compact-width)); justify-content: start; gap: var(--segment-gap); }
|
|
.defender-aggregate-summary > span, .defender-severity-strip article { display: grid; gap: var(--space-1); min-width: var(--tile-compact-width); padding: var(--space-3); background: var(--surface-inset); }
|
|
.defender-aggregate-summary strong { color: var(--heading); font-size: var(--type-table-body-size); font-weight: var(--fw-semibold); }
|
|
.defender-aggregate-summary span, .defender-severity-strip strong { font-size: var(--type-table-body-size); }
|
|
.defender-severity-strip article { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
|
|
.defender-severity-strip strong { color: var(--heading); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
|
|
@container (max-width: 760px) { .defender-view > header { display: grid; } }
|