892 lines
69 KiB
CSS
892 lines
69 KiB
CSS
mark, .search-highlight {
|
|
background-color: var(--search-highlight-bg);
|
|
color: var(--search-highlight-text);
|
|
border-radius: 2px;
|
|
padding: 0 2px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.empty-state { display: grid; place-items: center; min-height: 55vh; padding: 40px; color: var(--muted); text-align: center; }
|
|
.empty-state-brand { min-height: 100%; }
|
|
.work-filter-empty { padding: var(--panel-inset); color: var(--muted); }
|
|
.work-filter-empty p { font-size: var(--type-body-size); }
|
|
.empty-state-content { display: grid; justify-items: center; gap: 24px; width: min(620px, 100%); }
|
|
.empty-brand-mark { display: flex; align-items: center; gap: 18px; opacity: .6; }
|
|
.empty-brand-logo { position: relative; display: block; width: 82px; height: 82px; }
|
|
.empty-brand-logo img { position: absolute; inset: 0; width: 82px; height: 82px; object-fit: contain; }
|
|
.empty-brand-mark strong { color: var(--heading); font-size: clamp(34px, 4vw, 58px); font-weight: var(--fw-bold); line-height: 1; letter-spacing: .08em; }
|
|
.empty-open-data { position: relative; display: flex; align-items: center; gap: 13px; width: min(310px, 100%); min-height: 50px; padding: 10px 20px; border: 0; border-radius: var(--btn-radius); color: var(--text); background: var(--panel-raised); box-shadow: none; font-size: var(--ui-heading-size); font-weight: var(--fw-semibold); text-align: left; }
|
|
.empty-open-data::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--marking-color); }
|
|
.empty-open-data svg { flex: 0 0 25px; width: 25px; height: 25px; }
|
|
.empty-open-data:hover { color: var(--heading); background: var(--panel-hover); }
|
|
.empty-open-data:active { background: var(--panel-soft); }
|
|
.empty-supported-formats { color: var(--muted); font-size: var(--ui-body-size); font-weight: var(--fw-regular); line-height: 1.8; letter-spacing: .025em; }
|
|
|
|
.about-sections { display: grid; gap: var(--space-5); }
|
|
.about-brand { display: grid; place-items: center; min-height: 172px; }
|
|
.about-brand img { display: block; width: 160px; height: 160px; object-fit: contain; }
|
|
.about-sections section { display: grid; gap: var(--space-3); }
|
|
.about-sections h3 { margin: 0; font-size: var(--type-h3-size); font-weight: var(--fw-semibold); }
|
|
.about-sections dl { display: grid; gap: 0; margin: 0; }
|
|
.about-detail { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
|
|
.about-detail dt { color: var(--muted); font-size: var(--type-label-size); font-weight: var(--fw-semibold); }
|
|
.about-detail dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: var(--type-table-body-size); font-variant-numeric: tabular-nums; }
|
|
.about-credits { color: var(--muted); font-size: var(--type-meta-size); text-align: center; }
|
|
.panel-loading-state { box-sizing: border-box; display: grid; place-items: center; width: 100%; min-height: min(560px, 62vh); color: var(--muted); }
|
|
.panel-loading-state-content { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
|
|
.panel-loading-state-message { display: flex; align-items: center; justify-content: center; gap: var(--space-3); color: var(--text); font-size: var(--type-body-size); line-height: var(--lh-prose); }
|
|
.panel-loading-state.is-compact { min-height: 280px; }
|
|
/* Die drei Light-Sonderregeln fuer .empty-open-data sind entfallen: die
|
|
Schaltflaeche laeuft ueber Tokens und reagiert damit selbst auf den Skin. */
|
|
/* Kachel: der doppelte Neomorph-Schatten, der 12px-Radius und der Hover-Versatz
|
|
sind ersatzlos entfallen. Die Sprache trennt Flaechen ueber Haarlinien, nicht
|
|
ueber Tiefe; ein Hover-Lift ist ausdruecklich verboten. */
|
|
.finding-card { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 36px; gap: 12px; min-width: 0; min-height: 238px; padding: 22px 18px; border: var(--border-hair) solid var(--line); border-radius: var(--legacy-radius-md); color: var(--text); background: var(--panel-raised); box-shadow: var(--shadow-raised); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
|
|
.finding-card:hover, .finding-card:focus-visible { border-color: var(--line-strong); background: var(--panel-hover); box-shadow: var(--shadow-raised-hover); transform: translateY(-2px); }
|
|
.finding-card.active { border-color: var(--button-border); color: var(--button-marked-text); background: var(--button-marked-bg); }
|
|
.finding-card.is-bookmarked { outline: 2px solid var(--severity, var(--info)); outline-offset: -2px; }
|
|
.record-list .finding-card { position: relative; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; min-height: 78px; margin-bottom: 0; padding: 14px 16px; scroll-margin-block: 7px; border: 0; border-radius: 0; background: var(--panel-raised); box-shadow: none; transform: none; }
|
|
.record-list .finding-card::after { content: ""; position: absolute; bottom: 0; left: 14px; right: 14px; height: 1px; background: var(--border-subtle); pointer-events: none; }
|
|
.record-list .finding-card.active::after, .record-list .finding-card:last-child::after { display: none; }
|
|
.record-list .finding-card:hover, .record-list .finding-card:focus-visible { border-color: transparent; background: var(--panel-hover); box-shadow: none; transform: none; }
|
|
/* Auswahl: Ableton Slate-Teal Flat-Highlighting ohne Randstrich. */
|
|
.record-list .finding-card.active, .record-list .finding-card.active:hover, .record-list .finding-card.active:focus-visible { z-index: 1; outline: 0; border-color: transparent; border-left: 0; color: var(--state-selected-flat-text); background: var(--state-selected-flat); box-shadow: none; }
|
|
.record-list .finding-card.active h3, .record-list .finding-card.active .finding-card-status { color: var(--state-selected-flat-text); }
|
|
.record-list .finding-card-actions, .record-list .finding-badges { display: none; }
|
|
.record-list .finding-card h3 { margin-top: 1px; font-size: var(--type-h4-size); font-weight: var(--fw-content-medium); line-height: 1.35; }
|
|
.finding-card-status { display: none; }
|
|
.record-list .finding-card-status { display: block; margin: 5px 0 0; color: var(--muted); font-size: var(--ui-control-size); line-height: 1.2; }
|
|
.finding-hex { display: grid; place-items: center; width: 29px; height: 34px; margin-top: 1px; color: var(--sev-on); background: var(--severity, var(--muted)); clip-path: polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%); font-size: var(--ui-control-size); font-weight: var(--fw-bold); }
|
|
.finding-hex > span { transform: translate(-3px, 1px); }
|
|
.reader-title-hex { position: relative; display: block; width: 30px; height: 34px; margin-top: 1px; background: var(--severity, var(--muted)); clip-path: polygon(50% 0,94% 24%,94% 76%,50% 100%,6% 76%,6% 24%); }
|
|
.reader-title-hex::after { content: ''; position: absolute; left: 2px; top: 14px; width: 8px; height: 4px; border-left: 2px solid var(--sev-on); border-bottom: 2px solid var(--sev-on); transform: rotate(-45deg); pointer-events: none; }
|
|
.finding-card h3 { margin: 0; color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--fw-semibold); line-height: 1.42; overflow-wrap: normal; word-break: normal; hyphens: manual; }
|
|
.workspace-label { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--border-default); border-radius: 0; color: var(--text-primary); background: var(--surface-input); font-size: var(--ui-label-size); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; vertical-align: middle; }
|
|
.finding-badges, .mitre-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
|
|
.finding-card-actions { display: grid; align-content: start; gap: 8px; }
|
|
.bookmark-btn { color: var(--button-text); border: 1px solid var(--button-border); border-radius: var(--btn-radius); background: var(--button-bg); }
|
|
.bookmark-btn[aria-pressed="true"] { border-color: var(--button-border); color: var(--button-marked-text); background: var(--button-marked-bg); font-weight: 600; }
|
|
.results-btn, .results-btn:hover { border: 1px solid var(--button-border); border-radius: var(--btn-radius); color: var(--button-text); background: var(--button-bg); font-weight: var(--fw-medium); }
|
|
.results-btn.is-open, .results-btn.is-open:hover { border: 1px solid var(--result-color); color: var(--button-accent-text); background: var(--result-color); font-weight: 600; }
|
|
/* Die Grundform der Plaketten und die fuenf Severity-Regeln standen hier ein
|
|
zweites Mal und wurden vollstaendig von legacy-views.css ueberlagert, das
|
|
spaeter geladen wird und zusaetzlich .reader-severity abdeckt. Genau diese
|
|
chronologische Reparaturschicht verbietet die Designsprache - die Regeln
|
|
sind deshalb hier geloescht und nicht doppelt gepflegt. */
|
|
.status-badge { border: var(--border-hair) solid var(--line); }
|
|
/* Outcome-Vertrag der Designsprache: Textfarbe plus Glyph, nie gefuellt -
|
|
gefuellte Farbflaechen bleiben ausschliesslich der Severity vorbehalten.
|
|
Eine einzige Definition fuer Work und Result DB, damit dieselbe Aussage in
|
|
beiden Ansichten identisch aussieht. Sie spiegelt `.outcome` aus
|
|
ui-components.css, das laut layers.css noch nicht global importiert werden
|
|
darf; beide verschmelzen, sobald der Altbestand in die Layer gewandert ist. */
|
|
.outcome-mark { display: inline-flex; align-items: center; gap: var(--legacy-space-1); color: var(--muted); }
|
|
.outcome-mark::before { content: "\2013"; }
|
|
.outcome-mark[data-outcome="fail"] { color: var(--outcome-fail); }
|
|
.outcome-mark[data-outcome="fail"]::before { content: "\25CF"; }
|
|
.outcome-mark[data-outcome="pass"] { color: var(--outcome-pass); }
|
|
.outcome-mark[data-outcome="pass"]::before { content: "\25CB"; }
|
|
.outcome-mark[data-outcome="warning"] { color: var(--outcome-warning); }
|
|
.outcome-mark[data-outcome="warning"]::before { content: "\25D0"; }
|
|
.outcome-mark[data-outcome="execution_error"] { color: var(--outcome-fail); }
|
|
.outcome-mark[data-outcome="execution_error"]::before { content: "\2715"; }
|
|
.mitre-badge { border: var(--border-hair) solid var(--line); color: var(--text); background: var(--surface-inset); }
|
|
.severity-critical { --severity: var(--critical); }
|
|
.severity-high { --severity: var(--high); }
|
|
.severity-medium { --severity: var(--medium); }
|
|
.severity-low { --severity: var(--low); }
|
|
.severity-info { --severity: var(--info); }.finding-reader { min-width: 0; min-height: 0; padding: 34px 0 60px; overflow-y: auto; }
|
|
.finding-reader > * { width: min(834px, calc(100% - var(--reader-inset) - var(--legacy-space-6))); margin-left: var(--reader-inset); margin-right: auto; }
|
|
.reader-nav { display: flex; align-items: center; gap: 70px; margin-bottom: 48px; color: var(--muted); font-size: var(--ui-value-size); }
|
|
.reader-nav div { display: flex; gap: 20px; }
|
|
.reader-nav button { border: 0; color: var(--text); background: transparent; font-size: var(--ui-glyph-size); }
|
|
/* Der Fundname nutzt die volle Breite der Lesespalte; die Schaltflaechen
|
|
ruecken in eine eigene Zeile darunter, statt den Titel zu beschneiden. */
|
|
.reader-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--legacy-space-3) 16px; align-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
|
|
.reader-heading h2 { margin: 0; color: var(--heading); font-size: var(--type-detail-title-size); font-weight: var(--ui-strong-weight); line-height: 1.3; letter-spacing: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; }
|
|
.reader-heading-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; align-items: center; justify-content: flex-end; gap: 10px; align-self: center; }
|
|
.policy-search-key { display: grid; gap: var(--space-1); min-width: min(280px, 100%); margin-right: auto; color: var(--muted); font-size: var(--type-label-size); font-weight: var(--fw-semibold); }
|
|
.policy-search-key > div { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
|
|
.policy-search-key code { width: fit-content; max-width: 100%; color: var(--heading); font-family: var(--font-mono); font-size: var(--type-table-body-size); font-weight: var(--fw-regular); overflow-wrap: anywhere; user-select: text; }
|
|
.accepted-risk-trigger { grid-column: 3; grid-row: 1; display: grid; gap: 4px; }
|
|
.accepted-risk-trigger small { font-size: var(--type-meta-size); font-weight: var(--fw-regular); }
|
|
.accepted-risk-trigger.is-draft { border-color: var(--risk-draft-surface); color: var(--risk-draft-text); background: var(--risk-draft-surface); }
|
|
.accepted-risk-trigger.is-draft:hover { border-color: var(--risk-draft-surface-hover); color: var(--risk-draft-text); background: var(--risk-draft-surface-hover); }
|
|
.dialog-window.risk-acceptance-dialog { width: min(1040px, 100%); }
|
|
.risk-acceptance-form { display: grid; gap: 16px; }
|
|
.risk-acceptance-form p { margin: 0; font-size: var(--type-body-size); line-height: 1.5; }
|
|
.risk-acceptance-context { font-weight: var(--fw-semibold); }
|
|
.risk-acceptance-note { color: var(--muted); }
|
|
.risk-acceptance-fields { min-width: 0; display: grid; gap: 24px; margin: 0; padding: 0; border: 0; }
|
|
.risk-acceptance-fields h3, .risk-acceptance-history h3 { margin: 0 0 12px; font-size: var(--type-h3-size); font-weight: var(--fw-semibold); }
|
|
.risk-acceptance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
|
|
.risk-acceptance-grid label { min-width: 0; display: grid; align-content: start; gap: 6px; }
|
|
.risk-acceptance-grid label > span { font-size: var(--type-h4-size); font-weight: var(--fw-semibold); }
|
|
.risk-acceptance-grid small { font-size: var(--type-meta-size); color: var(--muted); line-height: 1.5; }
|
|
.risk-acceptance-grid input, .risk-acceptance-grid textarea, .risk-acceptance-grid select { width: 100%; min-width: 0; padding: 8px 11px; border: var(--border-hair) solid var(--line-strong); border-radius: var(--legacy-radius-sm); color: var(--text); background: var(--surface-inset); font: inherit; font-size: var(--type-body-size); }
|
|
.risk-acceptance-grid textarea { min-height: 96px; resize: vertical; }
|
|
.risk-acceptance-confirm { display: flex; align-items: start; gap: 10px; font-size: var(--type-body-size); line-height: 1.5; }
|
|
.risk-acceptance-confirm input { flex: 0 0 auto; margin-top: 5px; }
|
|
.risk-acceptance-actions { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
.risk-acceptance-history details { padding: 12px 0; border-top: var(--border-hair) solid var(--line); }
|
|
.risk-acceptance-history summary { cursor: pointer; font-size: var(--type-body-size); }
|
|
.risk-acceptance-history dl { display: grid; gap: 12px; }
|
|
.risk-acceptance-history dt { font-size: var(--type-label-size); font-weight: var(--fw-semibold); }
|
|
.risk-acceptance-history dd { margin: 4px 0 0; white-space: pre-wrap; font-size: var(--type-body-size); overflow-wrap: anywhere; }
|
|
.dialog-window.risk-acceptance-review-dialog { width: min(720px, 100%); }
|
|
.risk-acceptance-review { display: grid; gap: var(--space-5); }
|
|
.risk-acceptance-review-intro { padding-left: var(--space-4); border-left: var(--bw-emphasis) solid var(--marking-color); }
|
|
.risk-acceptance-review-intro strong { display: block; color: var(--heading); font-size: var(--type-h3-size); font-weight: var(--fw-semibold); }
|
|
.risk-acceptance-review-intro p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--type-body-size); }
|
|
.risk-acceptance-review-meta, .risk-acceptance-review-group dl { display: grid; gap: 0; margin: 0; }
|
|
.risk-acceptance-review-meta > div, .risk-acceptance-review-group dl > div { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-2) 0; border-bottom: var(--border-hair) solid var(--line); }
|
|
.risk-acceptance-review dt { color: var(--muted); font-size: var(--type-label-size); font-weight: var(--fw-semibold); }
|
|
.risk-acceptance-review dd { min-width: 0; margin: 0; color: var(--text); font-size: var(--type-table-body-size); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.risk-acceptance-review-group h3 { margin: 0; padding-bottom: var(--space-2); border-bottom: var(--border-hair) solid var(--line-strong); color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--fw-semibold); }
|
|
.risk-acceptance-review-confirmation { margin: 0; padding-left: var(--space-3); border-left: var(--bw-emphasis) solid var(--success); color: var(--text); font-size: var(--type-body-size); line-height: 1.5; }
|
|
.risk-acceptance-review-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }
|
|
@media (max-width: 620px) { .accepted-risk-trigger { grid-column: 2; grid-row: 2; justify-self: start; } .risk-acceptance-grid { grid-template-columns: minmax(0, 1fr); } }
|
|
/* Der PingCastle-Score-Erlaeuterungsabsatz wurde samt Markup entfernt. */
|
|
.bookmark-label { color: var(--text); font-size: var(--ui-control-size); font-weight: var(--ui-label-weight); }
|
|
.results-detail-btn { min-width: 136px; }
|
|
.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px auto 24px; }
|
|
.dashboard-grid label, .review-grid > label { display: grid; gap: 7px; color: var(--heading); font-size: var(--ui-value-size); font-weight: var(--fw-semibold); letter-spacing: 0; text-transform: none; }
|
|
.dashboard-grid input, .dashboard-grid select, .review-grid textarea { width: 100%; min-height: 39px; padding: 8px 11px; border: var(--border-hair) solid var(--line-strong); border-radius: var(--legacy-radius-sm); color: var(--text); background-color: var(--surface-inset); text-transform: none; }
|
|
.reader-summary, .review-grid, .all-fields { margin-top: 14px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
|
|
/* Traegt seit der Zusammenfuehrung mit "Check title" die Pruefbeschreibung der
|
|
Regel, also einen Satz. Versalien waeren dafuer unlesbar. */
|
|
.reader-summary h3 { margin-bottom: var(--legacy-space-5); color: var(--heading); font-size: var(--type-h3-size); text-transform: none; }
|
|
.reader-summary h4 { margin: 0 0 var(--space-2); color: var(--heading); font-size: var(--ui-reading-size); text-transform: uppercase; }
|
|
/* Native section elements share the same reading rhythm as ordinary fields. */
|
|
.reader-summary > :is(div, section) { padding: 0 0 var(--space-4); margin: 0 0 var(--space-4); border-bottom: var(--border-hair) solid var(--line); }
|
|
.reader-summary > :is(div, section):last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
|
|
.reader-summary > .policy-value-comparison { display: grid; gap: var(--legacy-space-2); padding: 0; border: 0; }
|
|
.policy-value-block { min-width: 0; padding: var(--legacy-space-3) var(--legacy-space-4); border-left: 4px solid var(--line-strong); background: var(--panel-soft); }
|
|
.policy-value-comparison[data-outcome="fail"] .policy-value-block[data-value="configured"] { border-left-color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, transparent); }
|
|
.policy-value-comparison[data-outcome="pass"] .policy-value-block[data-value="configured"],
|
|
.policy-value-block[data-value="expected"],
|
|
.reader-summary > .reader-remediation { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }
|
|
.reader-summary > .reader-remediation { padding: var(--legacy-space-3) var(--legacy-space-4); border-left-width: 4px; border-left-style: solid; border-bottom: 0; }
|
|
.policy-value-block h4 { margin-bottom: var(--legacy-space-2); text-transform: none; }
|
|
.policy-value-comparison[data-outcome="historical"] .policy-value-block { border-left-color: var(--line-strong); background: var(--panel-soft); }
|
|
.policy-evaluation-warning { border-left: var(--bw-emphasis) solid var(--warning); padding: var(--tile-inset); }
|
|
.policy-evaluation-warning p { margin: 0; font-size: var(--type-body-size); }
|
|
.policy-evaluation-warning h4 { text-transform: none; }
|
|
.policy-value-block .rich-text-value { white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.policy-guidance-text { white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.policy-guidance-text .policy-value-emphasis { font-weight: var(--fw-bold); }
|
|
.policy-source-evidence { display: grid; gap: var(--space-3); min-width: 0; }
|
|
.policy-source-evidence h4 { margin: 0; font-size: var(--type-h4-size); font-weight: var(--fw-semibold); text-transform: none; overflow-wrap: anywhere; }
|
|
.policy-source-evidence p { margin: 0; }
|
|
.policy-source-notice { font-size: var(--type-body-size); line-height: 1.5; }
|
|
.policy-source-overview { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-4); background: var(--tile-surface); }
|
|
.policy-source-overview .policy-source-overview__summary { color: var(--heading); font-size: var(--type-body-size); font-weight: var(--fw-semibold); }
|
|
.policy-source-overview__groups { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
|
|
.policy-source-overview__group { display: grid; gap: var(--space-1); min-width: 0; }
|
|
.policy-source-overview__group + .policy-source-overview__group { padding-top: var(--space-2); border-top: var(--border-hair) solid var(--line); }
|
|
.policy-source-overview .policy-source-overview__value { font-size: var(--type-body-size); overflow-wrap: break-word; }
|
|
.policy-source-overview .policy-source-overview__sources,
|
|
.policy-source-overview .policy-source-overview__note { color: var(--muted); font-size: var(--type-table-body-size); overflow-wrap: break-word; }
|
|
.policy-source-groups { min-width: 0; border-top: var(--border-hair) solid var(--line-strong); }
|
|
.policy-source-group { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-4) var(--space-3); border-bottom: var(--border-hair) solid var(--line-strong); background: transparent; }
|
|
.policy-source-group:last-child { padding-bottom: 0; border-bottom: 0; }
|
|
.policy-source-group__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
|
|
.policy-source-group h5 { min-width: 0; margin: 0; color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--fw-semibold); line-height: 1.4; overflow-wrap: anywhere; }
|
|
.policy-source-group__badge { width: fit-content; padding: 3px var(--space-2); font-size: var(--type-badge-size); font-weight: var(--fw-semibold); }
|
|
.policy-source-group__badge.is-review { border: var(--border-hair) solid color-mix(in srgb, var(--warning) 45%, var(--line)); color: var(--text); background: color-mix(in srgb, var(--warning) 10%, var(--tile-surface)); }
|
|
.policy-source-group__backup { color: var(--muted); font-size: var(--type-meta-size); overflow-wrap: anywhere; }
|
|
.policy-source-observation { display: grid; gap: var(--space-2); min-width: 0; }
|
|
.policy-source-observation hr { width: 100%; margin: var(--space-2) 0; border: 0; border-top: var(--border-hair) solid var(--line-strong); }
|
|
.policy-source-reference { width: fit-content; max-width: 100%; padding: 8px var(--space-2); border: var(--border-hair) solid var(--line); background: var(--tile-surface); font-size: var(--type-table-body-size); overflow-wrap: anywhere; }
|
|
.policy-source-sequence { color: var(--muted); font-size: var(--type-meta-size); }
|
|
.policy-source-value { font-size: var(--type-body-size); line-height: 1.55; }
|
|
.policy-source-deviation-value { display: inline-block; width: fit-content; padding: 1px 5px; border-left: var(--bw-emphasis) solid var(--critical); background: color-mix(in srgb, var(--critical) 14%, transparent); }
|
|
/* User decision 2026-09-25: a value proven correct against every retained variant is marked green, symmetric to red. */
|
|
.policy-source-aligned-value { display: inline-block; width: fit-content; padding: 1px 5px; border-left: var(--bw-emphasis) solid var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
|
|
/* First-read GPO statement and next step. Status color only in the leading marker, always --marker-width. */
|
|
.reader-summary > .policy-problem, .reader-summary > .policy-next-step { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-4); border-left: var(--marker-width) solid var(--line-strong); border-bottom: 0; background: var(--tile-surface); }
|
|
.reader-summary > .policy-problem { margin-bottom: var(--space-2); }
|
|
.reader-summary > .policy-next-step { margin-bottom: var(--space-5); border-left-color: var(--next-step-accent); }
|
|
.finding-first-read__command { margin: 0; padding: var(--space-3); min-width: 0; max-width: 100%; box-sizing: border-box; overflow-x: auto; border: var(--border-hair) solid var(--line); background: var(--surface-inset); color: var(--text); font-family: var(--font-ui); font-size: var(--type-table-body-size); font-weight: var(--fw-regular); line-height: 1.6; white-space: pre-wrap; overflow-wrap: normal; }
|
|
.reader-summary > .policy-problem[data-outcome="fail"] { border-left-color: var(--outcome-fail); }
|
|
.reader-summary > .policy-problem[data-outcome="pass"] { border-left-color: var(--outcome-pass); }
|
|
.policy-problem h4, .policy-next-step h4 { margin: 0; }
|
|
.policy-problem__values { display: grid; gap: var(--space-1); margin: 0; }
|
|
.policy-problem__values > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
|
|
.policy-problem__values dt { min-width: 132px; color: var(--muted); font-size: var(--type-table-body-size); }
|
|
.policy-problem__values dd { min-width: 0; margin: 0; color: var(--heading); font-size: var(--type-body-size); font-weight: var(--fw-semibold); overflow-wrap: break-word; }
|
|
.policy-problem__values dd .policy-principal-name { font-weight: var(--fw-regular); }
|
|
.policy-problem__entry { display: block; }
|
|
.reader-summary .policy-problem__context, .reader-summary .policy-problem__flag { color: var(--text); font-size: var(--type-table-body-size); }
|
|
.reader-summary .policy-problem__flag { color: var(--muted); }
|
|
.policy-problem__step + .policy-problem__step { padding-top: var(--space-1); }
|
|
.reader-summary .policy-problem__packages, .reader-summary .policy-problem__sources { color: var(--muted); font-size: var(--type-table-body-size); overflow-wrap: break-word; }
|
|
.policy-principal-name { color: var(--muted); font-weight: var(--fw-regular); }
|
|
.reader-summary > .policy-baseline-comparison { display: grid; gap: var(--space-4); min-width: 0; }
|
|
.policy-baseline-comparison__summary { display: grid; gap: var(--space-2); min-width: 0; }
|
|
.policy-baseline-comparison h4 { margin: 0; }
|
|
.policy-baseline-comparison .policy-baseline-comparison__verdict { color: var(--heading); font-size: var(--type-body-size); font-weight: var(--fw-semibold); }
|
|
.policy-baseline-comparison .policy-baseline-comparison__statuses { font-size: var(--type-table-body-size); }
|
|
.policy-baseline-comparison__facts { display: grid; gap: var(--space-2); margin: 0; }
|
|
.policy-baseline-comparison__facts > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-3); align-items: start; }
|
|
.policy-baseline-comparison__facts dt { color: var(--muted); font-size: var(--type-table-body-size); }
|
|
.policy-baseline-comparison__facts dd { min-width: 0; margin: 0; color: var(--text); font-size: var(--type-body-size); overflow-wrap: break-word; }
|
|
.policy-baseline-comparison .policy-baseline-comparison__scope { color: var(--muted); font-size: var(--type-table-body-size); }
|
|
.policy-baseline-comparison__explanation { display: grid; gap: var(--space-2); min-width: 0; }
|
|
.policy-baseline-comparison .policy-baseline-comparison__groups-intro { color: var(--text); font-size: var(--type-table-body-size); }
|
|
.policy-baseline-value-groups { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
|
|
.policy-baseline-value-group { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-2) 0 var(--space-2) var(--space-4); border-left: var(--bw-emphasis) solid var(--line); }
|
|
.reader-summary .policy-baseline-value-group__packages { color: var(--muted); font-size: var(--type-table-body-size); overflow-wrap: break-word; }
|
|
.policy-baseline-remediation { display: grid; gap: var(--space-2); }
|
|
.policy-baseline-remediation h4 { margin: 0; }
|
|
.policy-baseline-remediation__group { display: grid; gap: var(--space-1); padding-top: var(--space-2); border-top: var(--border-hair) solid var(--line); }
|
|
.policy-baseline-comparison .policy-baseline-comparison__identical { margin-bottom: var(--space-3); color: var(--muted); font-size: var(--type-table-body-size); }
|
|
/* Grouped list instead of a table: no global uppercase th, and wrapping only at word boundaries. */
|
|
.policy-baseline-packages { display: grid; min-width: 0; border-top: var(--border-hair) solid var(--line-strong); }
|
|
.policy-baseline-package { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-4) 0; border-bottom: var(--border-hair) solid var(--line-strong); }
|
|
.policy-baseline-package__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-4); }
|
|
.policy-baseline-package h5 { min-width: 0; margin: 0; color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--fw-semibold); line-height: 1.4; overflow-wrap: break-word; }
|
|
.policy-baseline-package__header .outcome-mark { font-size: var(--type-table-body-size); font-weight: var(--fw-semibold); white-space: nowrap; }
|
|
.policy-baseline-variants { display: grid; margin: 0; padding: 0; list-style: none; }
|
|
.policy-baseline-variant { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-2) 0 var(--space-2) var(--space-4); border-left: var(--bw-emphasis) solid var(--line); }
|
|
.policy-baseline-variant + .policy-baseline-variant { margin-top: var(--space-2); }
|
|
.policy-baseline-variant__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
|
|
.policy-baseline-variant__template { min-width: 0; color: var(--text); font-size: var(--type-table-body-size); overflow-wrap: break-word; }
|
|
.policy-baseline-variant__result { color: var(--text); font-size: var(--type-table-body-size); white-space: nowrap; }
|
|
.policy-baseline-variant__values { display: grid; gap: var(--space-1); margin: 0; }
|
|
.policy-baseline-variant__values > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-3); align-items: start; }
|
|
.policy-baseline-variant__values dt { color: var(--muted); font-size: var(--type-table-body-size); }
|
|
.policy-baseline-variant__values dd { min-width: 0; margin: 0; color: var(--text); font-size: var(--type-table-body-size); overflow-wrap: break-word; }
|
|
.policy-baseline-variant__reference { color: var(--muted); font-size: var(--type-meta-size); }
|
|
/* The identifier moves to its own line as a unit; it breaks only if it is longer than the line. */
|
|
.policy-baseline-variant__reference > span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
|
|
.rich-text-table.result-evidence-table td { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--type-table-body-size); }
|
|
.result-evidence-table td.result-evidence-difference { border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); font-weight: var(--ui-strong-weight); }
|
|
.variant-comparison { display: grid; gap: var(--space-5); min-width: 0; }
|
|
.variant-comparison__header { display: grid; gap: var(--space-1); }
|
|
.variant-comparison__eyebrow { margin: 0; color: var(--warning); font-size: var(--type-label-size); font-weight: var(--fw-semibold); text-transform: uppercase; }
|
|
.variant-comparison__header h3 { margin: 0; color: var(--heading); font-size: var(--type-detail-title-size); font-weight: var(--fw-semibold); line-height: 1.35; overflow-wrap: anywhere; }
|
|
.variant-comparison__scope { margin: 0; color: var(--muted); font-size: var(--type-meta-size); }
|
|
.variant-comparison__notice { padding: var(--space-4); border-left: 4px solid var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); }
|
|
.variant-comparison__notice.is-duplicate { border-left-color: var(--info); background: color-mix(in srgb, var(--info) 8%, transparent); }
|
|
.variant-comparison__notice strong { display: block; margin-bottom: var(--space-1); color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--fw-semibold); }
|
|
.variant-comparison__notice p { margin: 0; color: var(--text); font-size: var(--type-body-size); line-height: 1.55; }
|
|
.variant-comparison__notice p + p { margin-top: var(--space-1); color: var(--muted); }
|
|
.variant-comparison__setting h4, .variant-comparison__variants h4 { margin: 0; color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--fw-semibold); }
|
|
.variant-comparison dt { color: var(--muted); font-size: var(--type-label-size); font-weight: var(--fw-semibold); }
|
|
.variant-comparison__value { min-width: 0; }
|
|
.variant-comparison__value > .technical-path { font-size: var(--type-table-body-size); }
|
|
.variant-comparison__literal { width: fit-content; max-width: 100%; padding: var(--space-2); color: var(--text); background: var(--surface-inset); font-family: var(--font-path); font-size: var(--type-body-size); white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.variant-comparison__value-note { color: var(--muted); font-size: var(--type-meta-size); }
|
|
.variant-comparison__setting dl > div, .variant-comparison__technical dl > div { display: grid; grid-template-columns: minmax(112px, .2fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
|
|
.variant-comparison dd { min-width: 0; margin: 0; color: var(--text); font-size: var(--type-table-body-size); overflow-wrap: anywhere; }
|
|
.variant-comparison__sources, .variant-comparison__technical { min-width: 0; color: var(--text); }
|
|
.variant-comparison__sources { display: grid; gap: var(--space-2); }
|
|
.variant-comparison__sources > .technical-path { display: block; width: 100%; box-sizing: border-box; }
|
|
.variant-comparison__technical > summary { width: fit-content; cursor: pointer; color: var(--heading); font-size: var(--type-button-size); font-weight: var(--fw-semibold); }
|
|
.variant-comparison__setting { display: grid; gap: var(--space-3); min-width: 0; }
|
|
.variant-comparison__setting dl { display: grid; gap: var(--space-2); margin: 0; }
|
|
.variant-comparison__variants { display: grid; gap: var(--space-3); min-width: 0; }
|
|
.variant-comparison__variants > p { margin: 0; color: var(--muted); font-size: var(--type-body-size); line-height: 1.55; }
|
|
.variant-comparison__table-wrap { min-width: 0; width: 100%; overflow-x: auto; }
|
|
.variant-comparison__table { width: 100%; min-width: 680px; border-collapse: collapse; table-layout: auto; color: var(--text); background: var(--tile-surface); }
|
|
.variant-comparison__table th, .variant-comparison__table td { padding: var(--space-3); border-bottom: var(--border-hair) solid var(--line); text-align: left; vertical-align: top; font-size: var(--type-table-body-size); line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
|
|
.variant-comparison__table thead th { color: var(--muted); background: var(--surface-inset); font-size: var(--type-table-head-size); font-weight: var(--fw-semibold); text-transform: uppercase; }
|
|
.variant-comparison__table tbody th { width: 112px; border-left: 3px solid var(--warning); color: var(--heading); font-weight: var(--fw-semibold); }
|
|
.variant-comparison.is-duplicate .variant-comparison__table tbody td:first-child { min-width: 220px; border-left: 3px solid var(--info); }
|
|
.variant-comparison.is-duplicate .variant-comparison__table tbody td:nth-child(2) { min-width: 150px; }
|
|
.variant-comparison.is-duplicate .variant-comparison__table tbody td:nth-child(3) { min-width: 140px; }
|
|
.variant-comparison__table td:nth-child(2) { min-width: 220px; }
|
|
.variant-comparison__table td:nth-child(3) { min-width: 150px; }
|
|
.variant-comparison__table td:nth-child(4) { min-width: 140px; }
|
|
.variant-comparison__table .variant-comparison__sources { margin-top: var(--space-2); }
|
|
.variant-comparison__technical-list { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
|
|
.variant-comparison__technical section { min-width: 0; padding-top: var(--space-3); border-top: var(--border-hair) solid var(--line); }
|
|
.variant-comparison__technical h5 { margin: 0 0 var(--space-2); color: var(--heading); font-size: var(--type-label-size); font-weight: var(--fw-semibold); }
|
|
.variant-comparison__technical dl { display: grid; gap: var(--space-2); margin: 0; }
|
|
.finding-optional-detail { margin-top: 2px; padding: 12px 14px; border: var(--border-hair) solid var(--line); background: var(--panel); min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
|
|
.finding-optional-detail > summary { cursor: pointer; color: var(--heading); font-size: var(--ui-reading-size); font-weight: var(--ui-strong-weight); }
|
|
.finding-optional-detail[open] > summary { margin-bottom: 10px; }
|
|
.finding-optional-detail > .rich-text-value { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: normal; white-space: pre-wrap; }
|
|
.reader-summary p { margin: 0; color: var(--text); font-size: var(--ui-reading-size); line-height: 1.55; white-space: pre-wrap; }
|
|
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px; border: 1px solid var(--line); background: var(--panel); }
|
|
.review-grid textarea { min-height: 96px; resize: vertical; }
|
|
.review-markers { display: flex; flex-wrap: wrap; gap: 10px 18px; grid-column: 1 / -1; margin: 0; padding: 12px; border: 1px solid var(--line); }
|
|
.review-markers label { color: var(--text); font-size: var(--ui-control-size); }
|
|
.reader-tracking { margin-top: 14px; padding: 20px 18px; border: 1px solid var(--line); background: var(--panel); }
|
|
.reader-tracking > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); cursor: pointer; color: var(--heading); font-weight: var(--ui-strong-weight); }
|
|
.reader-tracking__state { color: var(--muted); font-size: var(--type-table-body-size); font-weight: var(--fw-regular); }
|
|
.reader-tracking > .dashboard-grid { margin: 20px 0 14px; }
|
|
.reader-tracking > .review-grid { margin-top: 0; }
|
|
.all-fields { padding-inline: 18px; border: 1px solid var(--line); background: var(--panel); }
|
|
.all-fields summary { cursor: pointer; color: var(--heading); font-weight: var(--ui-strong-weight); }
|
|
.all-fields table { margin-top: 12px; }
|
|
.all-fields th { position: static; width: 220px; }
|
|
.linked-results-inline { margin-top: 18px; }
|
|
/* `min-width: 0` auf Raster und Block: ohne diese Angabe waechst ein
|
|
Rasterelement auf die Inhaltsbreite seiner breitesten Tabelle, der
|
|
Tabellenbehaelter wird nie schmaler als sein Inhalt und bekommt deshalb
|
|
keine eigene Rollflaeche - stattdessen rollt das gesamte Fenster seitlich. */
|
|
.linked-results { display: grid; gap: 20px; min-width: 0; }
|
|
/* Abschnittsueberschriften der verknuepften Ergebnisse ("Admin Groups - 14
|
|
Ergebnisse"). Zuvor ein heller Violettton, der im hellen Skin auf der grauen
|
|
Flaeche praktisch unlesbar war. Ueberschriften tragen keine Akzentfarbe:
|
|
--heading ist im hellen Skin dunkelgrau, im dunklen nahezu weiss. */
|
|
/* Der Fundname als Ueberschrift des Fensterrumpfs - dieselbe Typografie wie
|
|
die Finding-Ueberschrift im Reader. */
|
|
.linked-results-heading { margin: 0; color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--ui-strong-weight); line-height: 1.35; }
|
|
.linked-results-empty { padding: 18px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); line-height: 1.55; }
|
|
/* Ergebnisabschnitte bleiben bewusst rahmenlos: Tabellen besitzen bereits
|
|
eigene Zelllinien. Ein zusaetzlicher Kasten samt Innenabstand verbraucht im
|
|
Results-Fenster Platz, ohne weitere Hierarchie zu vermitteln. */
|
|
.result-block { min-width: 0; padding: 0; border: 0; background: transparent; line-height: 1.55; }
|
|
.result-block__title { margin: 0 0 10px; color: var(--heading); font-size: var(--ui-heading-size); font-weight: var(--ui-strong-weight); line-height: 1.35; }
|
|
.result-block__subtitle { margin: 0 0 10px; color: var(--heading); font-size: var(--ui-body-size); font-weight: var(--ui-strong-weight); line-height: 1.4; }
|
|
.result-block__preamble { margin: 0 0 10px; color: var(--text); font-size: var(--ui-reading-size); line-height: 1.55; }
|
|
.maester-error { display: grid; gap: var(--space-4); min-width: 0; }
|
|
.maester-error__summary { margin: 0; padding: var(--space-4); border-left: var(--bw-emphasis) solid var(--critical); color: var(--heading); background: color-mix(in srgb, var(--critical) 8%, transparent); font-size: var(--type-body-size); line-height: 1.55; }
|
|
.maester-error__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); margin: 0; }
|
|
.maester-error__facts > div { display: grid; grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-hair) solid var(--line); }
|
|
.maester-error__facts dt { color: var(--muted); font-size: var(--type-label-size); font-weight: var(--fw-semibold); }
|
|
.maester-error__facts dd { min-width: 0; margin: 0; color: var(--text); font-size: var(--type-table-body-size); line-height: 1.45; overflow-wrap: anywhere; }
|
|
.maester-error__raw { min-width: 0; color: var(--muted); font-size: var(--type-button-size); }
|
|
.maester-error__raw summary { width: fit-content; cursor: pointer; color: var(--heading); font-weight: var(--fw-semibold); }
|
|
.maester-error__raw pre { max-width: 100%; margin: var(--space-3) 0 0; padding: var(--space-3); border: var(--border-hair) solid var(--line); color: var(--text); background: var(--surface-inset); font-family: inherit; font-size: var(--type-table-body-size); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.result-block > .rich-text-table-wrap:last-child { margin-bottom: 0; }
|
|
|
|
@media (max-width: 760px) {
|
|
.maester-error__facts { grid-template-columns: minmax(0, 1fr); }
|
|
.variant-comparison__setting dl > div, .variant-comparison__technical dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
|
|
}
|
|
/* Das Fenster nimmt die Hoehe seines Inhalts ein und waechst nur bis zur
|
|
Bildschirmgrenze; erst dann scrollt der Rumpf. Eine feste Hoehe liess bei
|
|
kurzen Ergebnistabellen viel leeren Raum stehen. Manuelles Groessenaendern
|
|
(resize) bleibt moeglich und setzt dann eine feste Hoehe. */
|
|
/* Das Fenster liegt im selben Farbschema wie der Fund dahinter: gleiche
|
|
Flaeche wie der Reader, Abgrenzung ueber eine kraeftigere Haarlinie statt
|
|
ueber eine farbige Umrandung. */
|
|
/* Die Rumpfzeile ist `1fr`, nicht `auto`: bei `auto` waechst sie auf die volle
|
|
Inhaltshoehe, die Fenstergrenze schneidet sie ab, und der Rumpf bekommt nie
|
|
eine Rollflaeche - eine lange Ergebnistabelle brach dadurch ohne jeden
|
|
Hinweis ab. Mit `1fr` bleibt die Zeile bei kurzem Inhalt inhaltshoch und
|
|
wird an der Fenstergrenze auf die verfuegbare Hoehe begrenzt, sodass der
|
|
Rumpf rollt. */
|
|
/* `overflow: visible`, weil die Cluster-Bedienelemente ueber der Oberkante des
|
|
Fensters sitzen (`.results-cluster-controls`, top: -34px). Mit `hidden` waren
|
|
sie abgeschnitten, sobald das oberste Fenster des Clusters das geoeffnete war.
|
|
Den Inhalt begrenzt weiterhin `.results-window-body` selbst. */
|
|
/* Eine einzige Hoechsthoehe fuer jeden Zustand: eine zusaetzliche Regel fuer das
|
|
geoeffnete Fenster liess die Darstellung bei jedem Wechsel zwischen Verbund
|
|
und freier Lage springen. Die Groesse aendert ausschliesslich die Nutzerin. */
|
|
.results-window { --results-action-width: 84px; --result-edge: var(--marker-width); --cluster-bar-h: 34px; position: fixed; display: grid; grid-template-rows: auto minmax(0,1fr); width: min(1040px,78vw); height: auto; min-width: 440px; max-width: 100vw; max-height: calc(100vh - 144px); border: var(--border-hair) solid var(--line-strong); border-radius: var(--legacy-radius-sm); color: var(--text); background: var(--bg); overflow: visible; }
|
|
/* Nur ein geoeffnetes Fenster schwebt. Die minimierten Miniaturen bilden einen
|
|
zusammenhaengenden Stapel; ein Schatten je Zeile haette zwischen den Zeilen
|
|
dunkle Baender erzeugt statt der einen Haarlinie, die sie trennen soll. */
|
|
.results-window:not(.is-minimized) { box-shadow: var(--shadow-overlay); }
|
|
/* Nur die Kopfzeile sichtbar - der Rumpf bleibt im DOM, wird aber ausgeblendet,
|
|
damit die Groesse beim Wiederherstellen erhalten bleibt. */
|
|
/* Die Miniaturen bilden zusammen eine einzige Flaeche: kein eigener Radius,
|
|
keine obere Kante. Jede Zeile traegt nur ihre untere Haarlinie, die damit
|
|
zugleich Trenner zur naechsten Zeile und - bei der letzten - Abschluss des
|
|
Stapels ist. Die Zeilenhoehe bleibt exakt RESULT_CLUSTER_ROW_HEIGHT (34px):
|
|
33px Kopfzeile plus 1px Kante. Die Fensterfarbe traegt die linke Kante als
|
|
Flaeche und ersetzt dort die Panelkante. */
|
|
.results-window.is-minimized { height: auto; border-top: 0; border-left: var(--result-edge) solid var(--result-color); border-radius: 0; }
|
|
.results-window.is-minimized.is-dimmed { filter: grayscale(1); opacity: 0.42; }
|
|
.results-window.is-minimized .results-window-body { display: none; }
|
|
.results-window.is-minimized .results-window-head { min-height: 33px; border-radius: 0; border-bottom: 0; }
|
|
/* Der Stapel ist ein Koerper: nur seine Aussenecken sind gerundet, oben an der
|
|
Kopfleiste, unten an der letzten Miniatur. Die Kopfzeile wird mitgerundet,
|
|
sonst schoebe ihre Fuellung ueber die gebogene Kante hinaus. */
|
|
.results-window.is-minimized.is-cluster-bottom,
|
|
.results-window.is-minimized.is-cluster-bottom .results-window-head { border-radius: 0 0 var(--radius-result-cluster) var(--radius-result-cluster); }
|
|
/* Zaehler und Bezeichnung sind zwei Spalten der Zeile - die Haarlinie
|
|
dazwischen laeuft ueber die volle Zeilenhoehe. Die Spalte haelt eine feste
|
|
Mindestbreite, damit die Linie in jeder Zeile an derselben Stelle steht:
|
|
ohne sie wanderte sie mit der Stellenzahl des Zaehlers. */
|
|
.results-window.is-minimized .results-window-result-summary { align-self: stretch; min-width: 78px; padding-right: 10px; border-right: var(--border-hair) solid var(--line); }
|
|
|
|
/* Kopfleiste des Verbunds: sitzt buendig ueber der obersten Miniatur und
|
|
schliesst den Stapel nach oben ab. Sie haengt an der ersten Minimierung,
|
|
damit sie an der Cluster-Kante stehen bleibt, auch wenn das geoeffnete
|
|
Fenster frei herausgezogen wurde. Links die noch unbelegte Flaeche, daneben
|
|
die Anzahl der Results im Verbund, rechts die Aktionen auf den ganzen
|
|
Verbund. */
|
|
.results-cluster-bar {
|
|
position: absolute;
|
|
top: calc(-1 * var(--cluster-bar-h));
|
|
left: calc(-1 * var(--result-edge));
|
|
right: -1px;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
height: var(--cluster-bar-h);
|
|
border: var(--border-hair) solid var(--line-strong);
|
|
border-radius: var(--radius-result-cluster) var(--radius-result-cluster) 0 0;
|
|
color: var(--heading);
|
|
background: var(--panel-raised);
|
|
cursor: move;
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
.results-cluster-slot {
|
|
display: grid;
|
|
place-items: center;
|
|
align-self: stretch;
|
|
flex: 0 0 auto;
|
|
width: 34px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-right: var(--border-hair) solid var(--line);
|
|
border-radius: 0;
|
|
color: var(--muted);
|
|
background: transparent;
|
|
}
|
|
.results-cluster-slot:hover { color: var(--marking-color); background: var(--panel-hover); }
|
|
.results-cluster-total {
|
|
display: grid;
|
|
place-items: center;
|
|
min-width: 58px;
|
|
height: 22px;
|
|
margin-left: 10px;
|
|
padding: 0 8px;
|
|
border: var(--border-hair) solid var(--line-strong);
|
|
border-radius: var(--legacy-radius-sm);
|
|
color: var(--heading);
|
|
background: var(--surface-inset);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--ui-label-size);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.results-cluster-bar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-right: 8px; }
|
|
|
|
/* Eingeklappter Verbund in der Filterzeile. Dieselben drei Bausteine wie in
|
|
der Cluster-Leiste - Symbolflaeche, Anzahl, Zuordnung - nur auf Zeilenhoehe
|
|
zusammengezogen. Das Dreieck traegt die Fensterfarbe und ist damit die
|
|
einzige Spur, die ein eingeklapptes Result von sich zeigt. */
|
|
.result-dock-slot { display: flex; align-items: center; flex: 0 0 auto; }
|
|
.result-dock { display: flex; align-items: center; gap: 8px; }
|
|
.result-dock-toggle {
|
|
display: grid;
|
|
place-items: center;
|
|
width: var(--control-height);
|
|
height: var(--control-height);
|
|
padding: 0;
|
|
border: var(--border-hair) solid var(--line-strong);
|
|
border-radius: var(--radius-result-cluster);
|
|
color: var(--heading);
|
|
background: var(--panel-raised);
|
|
}
|
|
.result-dock-toggle:hover { color: var(--marking-color); border-color: var(--marking-color); background: var(--panel-hover); }
|
|
.result-dock-count {
|
|
display: grid;
|
|
place-items: center;
|
|
min-width: 58px;
|
|
height: var(--control-height);
|
|
padding: 0 8px;
|
|
border: var(--border-hair) solid var(--line-strong);
|
|
border-radius: var(--legacy-radius-sm);
|
|
color: var(--heading);
|
|
background: var(--surface-inset);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--ui-label-size);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.result-dock-marks { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
|
|
.result-dock-mark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
flex: 0 0 auto;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: var(--legacy-radius-sm);
|
|
color: var(--result-color);
|
|
background: transparent;
|
|
}
|
|
.result-dock-mark:hover { background: var(--panel-hover); }
|
|
.result-dock-mark .triangle-icon { width: 14px; height: 14px; }
|
|
/* Bookmark und Schliessen sehen an der Zeile und am Verbund gleich aus - es
|
|
ist dieselbe Aktion, nur mit anderem Wirkungsbereich. */
|
|
.results-cluster-bookmark, .results-cluster-close, .results-window-bookmark {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: var(--legacy-radius-sm);
|
|
color: var(--muted);
|
|
background: transparent;
|
|
}
|
|
.results-cluster-bookmark:hover, .results-cluster-close:hover, .results-window-bookmark:hover {
|
|
color: var(--heading);
|
|
background: var(--panel-hover);
|
|
}
|
|
.results-cluster-bookmark.is-bookmarked, .results-window-bookmark.is-bookmarked {
|
|
color: var(--state-bookmark);
|
|
}
|
|
/* Freies Groessenaendern an jeder Kante und Ecke, gesteuert per Pointer-Events
|
|
statt der nativen `resize`-Eigenschaft (die nur die rechte untere Ecke
|
|
anbietet) - damit verhaelt sich das Fenster wie ein gewoehnliches
|
|
Betriebssystemfenster, auch aus dem angedockten Zustand heraus. */
|
|
.results-window-resize { position: absolute; z-index: 5; }
|
|
.results-window-resize-n, .results-window-resize-s { left: 10px; right: 10px; height: 5px; cursor: ns-resize; }
|
|
.results-window-resize-n { top: 0; }
|
|
.results-window-resize-s { bottom: 0; }
|
|
.results-window-resize-e, .results-window-resize-w { top: 10px; bottom: 10px; width: 5px; cursor: ew-resize; }
|
|
.results-window-resize-e { right: 0; }
|
|
.results-window-resize-w { left: 0; }
|
|
.results-window-resize-ne, .results-window-resize-nw, .results-window-resize-se, .results-window-resize-sw { width: 12px; height: 12px; }
|
|
.results-window-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
|
|
.results-window-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
|
|
.results-window-resize-se { bottom: 0; right: 0; cursor: nwse-resize; }
|
|
.results-window-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
|
|
/* Schlanke Kopfzeile im Stil der uebrigen Panels: dunkler Balken mit duenner
|
|
Trennlinie, die Fensterfarbe erscheint nur als schmale Akzentkante links -
|
|
sie bleibt damit als Zuordnung erkennbar, ohne als Vollflaeche zu dominieren
|
|
und Platz zu kosten. */
|
|
/* Kein Innenabstand links: die farbige Kennzeichnung sitzt buendig in der Ecke
|
|
und traegt die Fensterfarbe als Flaeche, der Rest des Balkens bleibt im
|
|
dunklen Panel-Stil. */
|
|
/* `min-width: 0` verhindert den ueblichen Grid-Blowout: als Grid-Kind wollte
|
|
die Kopfzeile sonst auf die ungekuerzte Breite des Fundnamens wachsen
|
|
(nowrap-Text hat als min-content seine volle Laenge) und sprengte damit
|
|
die Fensterbreite, statt den Namen per Ellipsis zu kuerzen. */
|
|
.results-window-head { display: flex; align-items: stretch; justify-content: space-between; gap: 0; min-height: 32px; min-width: 0; padding: 0 8px 0 0; color: var(--heading); background: var(--panel-soft); border-bottom: 1px solid var(--line); cursor: move; touch-action: none; user-select: none; }
|
|
/* Nur die beiden wiederholten Resulttitel verwenden die kompakte H4-Stufe;
|
|
Finding- und Tabellenhierarchie ausserhalb des Resultfensters bleibt gleich. */
|
|
.results-window-head h2 { display: flex; align-items: stretch; gap: 10px; min-width: 0; margin: 0; color: var(--heading); font-size: var(--type-h4-size); font-weight: var(--ui-strong-weight); line-height: 1.35; }
|
|
.results-window-result-summary { display: inline-flex; align-items: center; align-self: center; flex: 0 0 auto; gap: 5px; padding-left: 8px; color: var(--heading); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
.results-window-toggle, .results-window-toggle-icon { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; color: var(--result-color); }
|
|
.results-window-toggle { padding: 0; border: 0; border-radius: var(--btn-radius); background: transparent; }
|
|
.results-window-toggle:hover { color: var(--result-color); background: var(--panel-hover); }
|
|
.results-window-toggle .triangle-icon, .results-window-toggle-icon .triangle-icon { width: 16px; height: 16px; }
|
|
.results-window-name { display: flex; align-items: center; min-width: 0; padding: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.results-window-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; padding: 0 0 0 8px; }
|
|
.results-window-action { align-self: center; min-width: var(--results-action-width); }
|
|
.results-window-close { align-self: center; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--btn-radius); color: var(--muted); background: transparent; }
|
|
.results-window-close:hover { color: var(--heading); background: var(--panel-hover); }
|
|
/* Ergebnisfenster: Kopfzeile oben, genau ein Container darunter - dieselbe
|
|
Aufteilung und derselbe Innenabstand wie in den Panels der Shell. */
|
|
.results-window-body { min-height: 0; padding: var(--panel-inset); overflow: auto; font-size: var(--ui-reading-size); line-height: 1.45; }
|
|
@media (max-width: 980px) { .dashboard-grid, .review-grid { grid-template-columns: 1fr 1fr; } .finding-reader > * { width: calc(100% - 36px); } }
|
|
@media (max-width: 620px) { .dashboard-grid, .review-grid { grid-template-columns: 1fr; } .reader-heading { grid-template-columns: auto minmax(0,1fr); } .reader-heading-actions { grid-column: 1 / -1; } .results-window:not(.is-maximized) { left: 8px !important; top: 8px !important; width: calc(100vw - 16px); height: auto; max-height: min(78vh,680px); min-width: 0; } }
|
|
@media (prefers-reduced-motion: reduce) { .finding-card { transition: none; } .finding-card:hover { transform: none; } }
|
|
.rich-text-value > :first-child { margin-top: 0; }
|
|
.rich-text-value > :last-child { margin-bottom: 0; }
|
|
.rich-text-value p { margin: 0 0 14px; }
|
|
.rich-text-value ul, .rich-text-value ol { margin: 8px 0 14px; padding-left: 24px; }
|
|
/* Verweise tragen ihre Erkennbarkeit ueber die Unterstreichung, nicht ueber
|
|
eine Akzentfarbe - im hellen Skin war der Violettton kaum lesbar. */
|
|
.rich-text-value a { color: var(--heading); text-decoration: underline; text-underline-offset: 2px; }
|
|
.rich-text-value li { margin: 0 0 4px; }
|
|
.inline-results-link { display: inline; padding: 0; margin: 0; border: none; background: transparent; color: var(--heading); font-size: inherit; font-family: inherit; font-weight: var(--ui-strong-weight); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
|
|
.inline-results-link:hover { color: var(--marking-color); }
|
|
.inline-results-link-disabled { text-decoration: underline; text-underline-offset: 2px; opacity: 0.85; }
|
|
/* Ueberschriften aus dem Quelltext bleiben eine Ebene unter dem Feldnamen: sie
|
|
gliedern den Wert, sie konkurrieren nicht mit der Feldbezeichnung. */
|
|
.rich-text-value h5, .rich-text-value h6 { margin: 16px 0 6px; color: var(--heading); font-size: var(--ui-body-size); font-weight: var(--ui-strong-weight); }
|
|
.rich-text-value h6 { color: var(--muted); font-size: var(--ui-control-size); letter-spacing: var(--ui-label-tracking); text-transform: uppercase; }
|
|
.rich-text-value code { padding: 1px 4px; border-radius: var(--legacy-radius-sm); background: var(--surface-inset); font-family: var(--font-mono, monospace); font-size: var(--ui-control-size); }
|
|
.technical-path, .rich-text-value code.technical-path {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
padding: var(--space-1) var(--space-2);
|
|
border: var(--border-hair) solid var(--line);
|
|
border-radius: 0;
|
|
background: var(--surface-inset);
|
|
color: var(--text);
|
|
font-family: var(--font-path);
|
|
font-size: inherit;
|
|
font-weight: var(--fw-regular);
|
|
line-height: inherit;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
word-break: normal;
|
|
text-transform: none;
|
|
}
|
|
.rich-text-code { margin: 8px 0 14px; padding: var(--legacy-space-3); border: var(--border-hair) solid var(--line); border-radius: var(--legacy-radius-sm); background: var(--surface-inset); font-family: var(--font-mono, monospace); font-size: var(--ui-control-size); white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; word-wrap: break-word; width: 100%; max-width: 100%; box-sizing: border-box; }
|
|
/* Breite Tabellen scrollen in ihrem eigenen Behaelter, damit die Lesespalte
|
|
nicht seitlich ausbricht. */
|
|
.rich-text-table-wrap { margin: 8px 0 14px; overflow-x: auto; }
|
|
/* Ein Scrollbalken ist hier Statusanzeige, nicht Zierrat: ohne ihn sieht eine
|
|
nur teilweise sichtbare Ergebnistabelle wie eine abgeschnittene Tabelle aus.
|
|
Die Deklaration eigener Scrollbalken schaltet die ueberlagerten, erst beim
|
|
Scrollen eingeblendeten Balken ab - sobald der Inhalt ueberlaeuft, ist die
|
|
Rollflaeche dauerhaft sichtbar. */
|
|
.rich-text-table-wrap, .results-window-body { scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--surface-inset); }
|
|
.rich-text-table-wrap::-webkit-scrollbar, .results-window-body::-webkit-scrollbar { width: 11px; height: 11px; }
|
|
.rich-text-table-wrap::-webkit-scrollbar-track, .results-window-body::-webkit-scrollbar-track { background: var(--surface-inset); }
|
|
.rich-text-table-wrap::-webkit-scrollbar-thumb, .results-window-body::-webkit-scrollbar-thumb { border: var(--border-hair) solid var(--surface-inset); border-radius: var(--legacy-radius-sm); background: var(--line-strong); }
|
|
.rich-text-table-wrap::-webkit-scrollbar-thumb:hover, .results-window-body::-webkit-scrollbar-thumb:hover { background: var(--muted); }
|
|
.rich-text-table-wrap::-webkit-scrollbar-corner, .results-window-body::-webkit-scrollbar-corner { background: var(--surface-inset); }
|
|
.rich-text-table { border-collapse: collapse; width: auto; min-width: 100%; }
|
|
.rich-text-table th, .rich-text-table td { padding: 4px var(--legacy-space-3); border: var(--border-hair) solid var(--line); text-align: left; vertical-align: top; font-size: var(--ui-control-size); }
|
|
/* Der Kopf klebt bewusst nicht: die Tabelle rollt in ihrem eigenen Behaelter,
|
|
ein klebender Kopf haette dort keine Rollrichtung und bliebe wirkungslos. */
|
|
.rich-text-table th { position: static; color: var(--heading); background: var(--surface-panel-raised); font-weight: var(--ui-label-weight); letter-spacing: var(--ui-label-tracking); text-transform: uppercase; white-space: nowrap; }
|
|
.rich-text-table.is-column-resizable th { position: relative; }
|
|
.rich-text-table.is-column-resizable.has-custom-column-widths { min-width: 0; }
|
|
/* Ein maximiertes Fenster vergroessert die Arbeitsflaeche, nicht automatisch
|
|
die Tabelle. Solange der Nutzer noch keine eigene Breite gesetzt hat, folgt
|
|
sie deshalb ihrer ungebrochenen intrinsischen Inhaltsbreite. Ueberbreite
|
|
Tabellen bleiben im vorhandenen horizontalen Scrollcontainer erreichbar. */
|
|
.results-window.is-maximized .rich-text-table.is-column-resizable:not(.has-custom-column-widths) {
|
|
width: max-content;
|
|
min-width: max-content;
|
|
table-layout: auto;
|
|
}
|
|
.results-window.is-maximized .rich-text-table.is-column-resizable:not(.has-custom-column-widths) th,
|
|
.results-window.is-maximized .rich-text-table.is-column-resizable:not(.has-custom-column-widths) td {
|
|
white-space: nowrap;
|
|
}
|
|
.result-column-resizer { position: absolute; z-index: 2; top: 0; right: -5px; bottom: 0; width: 10px; cursor: col-resize; touch-action: none; user-select: none; }
|
|
.result-column-resizer::after { position: absolute; top: 0; right: 4px; bottom: 0; width: var(--border-hair); background: transparent; content: ''; }
|
|
.result-column-resizer:hover::after, .result-column-resizer:focus-visible::after { background: var(--focus-ring); }
|
|
.result-column-instructions { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
|
/* Manche Berichte (z. B. CIS-CAT: `<tr class="evaluated">`) markieren in einer
|
|
Belegtabelle selbst, welche Zeile ein Criterion tatsaechlich auswertet -
|
|
diese Markierung wird uebernommen, in derselben eigenstaendigen Markierungsfarbe
|
|
wie ein Suchtreffer (`--evidence-highlight-*`), zusaetzlich fett: Farbe
|
|
allein darf keinen Zustand tragen. */
|
|
.rich-text-table tr.rich-text-table-row--highlight td { background: var(--evidence-highlight-bg); color: var(--evidence-highlight-text); font-weight: var(--ui-strong-weight); }
|
|
.rich-text-table tr.rich-text-table-row--criterion td { background: var(--criterion-highlight-bg); color: var(--criterion-highlight-text); font-weight: var(--ui-strong-weight); }
|
|
.rich-text-table tr.rich-text-table-row--match td { background: var(--match-highlight-bg); color: var(--match-highlight-text); font-weight: var(--ui-strong-weight); }
|
|
.rich-text-table tr.rich-text-table-row--violation td { background: var(--violation-highlight-bg); color: var(--violation-highlight-text); font-weight: var(--ui-strong-weight); }
|
|
|
|
/* The reading marker overlays existing outcome colors and remains visible across horizontal scroll. */
|
|
table tbody tr[data-row-marked="true"] > :is(th, td) {
|
|
box-shadow: inset 0 var(--bw-emphasis) 0 var(--table-row-marking),
|
|
inset 0 calc(-1 * var(--bw-emphasis)) 0 var(--table-row-marking),
|
|
inset 0 0 0 9999px var(--table-row-marking-surface);
|
|
}
|
|
|
|
|
|
/* Verbindlicher Donut-Standard: Referenz vom 2026-08-05. */
|
|
.donut-metric-rack {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, var(--tile-compact-width));
|
|
justify-content: start;
|
|
gap: var(--segment-gap);
|
|
padding: var(--segment-inset);
|
|
border: var(--border-hair) solid var(--segment-border);
|
|
border-radius: var(--segment-radius);
|
|
background: var(--segment-surface);
|
|
box-shadow: none;
|
|
}
|
|
.donut-metric-card {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
min-width: 0;
|
|
min-height: var(--donut-card-min-h);
|
|
padding: var(--space-5) var(--space-3) var(--space-2);
|
|
overflow: hidden;
|
|
border: var(--border-hair) solid var(--tile-border);
|
|
border-radius: var(--tile-radius);
|
|
color: var(--donut-all);
|
|
background: var(--tile-surface);
|
|
box-shadow: var(--tile-card-shadow);
|
|
}
|
|
.donut-metric-card__title {
|
|
min-width: 0;
|
|
margin: 0;
|
|
color: var(--donut-label);
|
|
font: var(--fw-regular) var(--donut-title-size) / 1.15 var(--font-donut-display);
|
|
text-align: left;
|
|
overflow-wrap: normal;
|
|
}
|
|
.donut-metric-card__plot {
|
|
position: relative;
|
|
align-self: end;
|
|
justify-self: center;
|
|
width: min(100%, var(--donut-ring-size));
|
|
aspect-ratio: 1;
|
|
}
|
|
.donut-metric-card__plot svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
transform: rotate(-90deg);
|
|
}
|
|
.donut-metric-card__plot circle {
|
|
fill: none;
|
|
stroke-width: var(--donut-ring-stroke);
|
|
}
|
|
.donut-metric-card__track { stroke: var(--donut-track); }
|
|
.donut-small-arc-marker { fill: currentColor; }
|
|
.donut-metric-card__progress {
|
|
fill: currentColor;
|
|
animation: donut-progress-build var(--dur-data-build) var(--ease-data-build) both;
|
|
}
|
|
@keyframes donut-progress-build {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.donut-metric-card__values {
|
|
position: absolute;
|
|
inset: calc(var(--donut-ring-stroke) + var(--space-2));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-donut-display);
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
}
|
|
.donut-metric-card__primary {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
.donut-metric-card__primary strong {
|
|
display: block;
|
|
max-width: 100%;
|
|
color: var(--donut-value);
|
|
font-size: var(--donut-value-size);
|
|
font-weight: var(--fw-bold);
|
|
white-space: nowrap;
|
|
}
|
|
.donut-metric-card__primary.is-compact strong {
|
|
font-size: calc(var(--donut-value-size) * .85);
|
|
}
|
|
.donut-metric-card__values > small {
|
|
margin-top: var(--space-2);
|
|
color: var(--donut-label);
|
|
font-size: var(--donut-percent-size);
|
|
font-weight: var(--fw-regular);
|
|
white-space: nowrap;
|
|
}
|
|
.donut-metric-card--all { color: var(--donut-all); }
|
|
.donut-metric-card--deviation { color: var(--donut-deviation); }
|
|
.donut-metric-card--passed { color: var(--donut-passed); }
|
|
.donut-metric-card--not-applicable { color: var(--donut-not-applicable); }
|
|
.donut-metric-card--not-run { color: var(--donut-not-run); }
|
|
.donut-metric-card--error { color: var(--donut-error); }
|
|
.donut-metric-card--critical { color: var(--critical); }
|
|
.donut-metric-card--high { color: var(--high); }
|
|
.donut-metric-card--medium { color: var(--medium); }
|
|
.donut-metric-card--low { color: var(--low); }
|
|
.donut-metric-card--info { color: var(--info); }
|
|
|
|
/* Work uses the same Security Domain catalog and filter as Client Info. */
|
|
.sidebar-domain-rack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
flex: 0 1 auto;
|
|
min-height: 0;
|
|
margin: var(--space-2) var(--space-2) var(--space-2);
|
|
padding: var(--space-3) 0 0;
|
|
overflow-y: auto;
|
|
border: 0;
|
|
border-top: var(--border-hair) solid var(--border-subtle);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
scrollbar-color: var(--border-strong) transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
.sidebar-domain-rack h2 {
|
|
margin: 0 var(--space-2) var(--space-2);
|
|
color: var(--text-primary);
|
|
font-size: var(--type-h4-size);
|
|
font-weight: var(--fw-semibold);
|
|
}
|
|
.sidebar-domain-button {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
width: 100%;
|
|
min-height: var(--btn-h);
|
|
padding: var(--space-2) var(--btn-pad-x);
|
|
border: 0;
|
|
border-radius: var(--btn-radius);
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
.sidebar-domain-button:hover { color: var(--text-primary); background: var(--surface-hover); }
|
|
.sidebar-domain-button span {
|
|
min-width: 0;
|
|
font-size: var(--type-table-body-size);
|
|
font-weight: var(--fw-regular);
|
|
line-height: var(--lh-ui);
|
|
overflow-wrap: normal;
|
|
word-break: normal;
|
|
}
|
|
.sidebar-domain-button strong {
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--type-table-body-size);
|
|
font-weight: var(--fw-regular);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.sidebar-domain-button[aria-pressed="true"] {
|
|
color: var(--text-primary);
|
|
background: var(--surface-selected);
|
|
}
|
|
.sidebar-domain-button[aria-pressed="true"] span,
|
|
.sidebar-domain-button[aria-pressed="true"] strong { font-weight: var(--fw-semibold); }
|
|
.sidebar-domain-button[aria-pressed="true"]::before {
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
width: var(--marker-width);
|
|
background: var(--selection-marker);
|
|
content: "";
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.donut-metric-card__progress { animation: none; }
|
|
}
|
|
.backend-connection-dialog__content {
|
|
display: grid;
|
|
grid-template-columns: 32px minmax(0, 1fr);
|
|
gap: var(--space-4);
|
|
align-items: start;
|
|
}
|
|
.backend-connection-dialog__icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
color: var(--state-active-text);
|
|
background: var(--warning);
|
|
font-size: var(--type-detail-title-size);
|
|
font-weight: var(--fw-bold);
|
|
}
|
|
.backend-connection-dialog__content p {
|
|
margin: 0;
|
|
color: var(--text);
|
|
font-size: var(--type-body-size);
|
|
line-height: 1.5;
|
|
}
|
|
.backend-connection-dialog__content .backend-connection-dialog__hint {
|
|
margin-top: var(--space-3);
|
|
color: var(--muted);
|
|
font-size: var(--type-meta-size);
|
|
}
|
|
.policy-problem__entry + .policy-problem__entry { margin-top: var(--space-1); }
|
|
/* Same red/green treatment as the source values, but its own class: the source markers stay the only per-source proof. */
|
|
.policy-value-mark { display: inline-block; width: fit-content; padding: 1px 5px; border-left: var(--bw-emphasis) solid; }
|
|
.policy-value-mark.is-deviating { border-left-color: var(--critical); background: color-mix(in srgb, var(--critical) 14%, transparent); }
|
|
.policy-value-mark.is-aligned { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
|
|
.policy-problem__note { color: var(--muted); font-size: var(--type-table-body-size); font-weight: var(--fw-regular); }
|
|
/* A proven variant relation replaces the neutral variant marker with red or green; unassessed stays neutral. */
|
|
.variant-comparison__table tbody tr[data-baseline-state="deviating"] th { border-left-color: var(--critical); }
|
|
.variant-comparison__table tbody tr[data-baseline-state="aligned"] th { border-left-color: var(--success); }
|
|
.variant-comparison__value .variant-comparison__value-note { display: block; margin-top: var(--space-1); }
|
|
.policy-source-group__badge.is-not-linked { border: var(--border-hair) solid var(--line-strong); color: var(--muted); background: var(--tile-surface); }
|
|
.policy-source-group .policy-source-group__link-note { color: var(--muted); font-size: var(--type-table-body-size); }
|
|
.gpo-status-row__not-linked { color: var(--muted); }
|
|
/* Meaning of a standard Windows code, shown right after the unchanged code. */
|
|
.windows-code-meaning { color: var(--muted); font-weight: var(--fw-regular); }
|