gitea-admin/CASAN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: simplify assurance reports with progressive disclosure

Browse Source
This commit is contained in:
thanhnv
2026-07-29 11:55:49 +07:00
parent a7b1c604d5
commit 1d6384d23c
14 changed files with 431 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/casan-harness/assets/local-viewer/app.css
+37 -1
View File
@@ -137,6 +137,28 @@ main { max-width: 1500px; margin: 0 auto; padding: 28px clamp(20px,4vw,48px) 64p
.panel h2 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.025em; }
.panel-description { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.panel-body { border-top: 1px solid #f2f4f7; padding: 22px 24px 24px; }
.disclosure-panel {
overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white;
box-shadow: 0 10px 28px rgba(16,24,40,.04);
}
.disclosure-panel > summary {
display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 18px;
padding: 15px 20px; list-style: none; cursor: pointer; transition: background .16s ease;
}
.disclosure-panel > summary::-webkit-details-marker { display: none; }
.disclosure-panel > summary:hover { background: #f9fafb; }
.disclosure-panel > summary strong, .disclosure-panel > summary small { display: block; }
.disclosure-panel > summary strong { color: #344054; font-size: 13px; }
.disclosure-panel > summary small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.disclosure-side { display: flex; flex-shrink: 0; align-items: center; gap: 10px; }
.disclosure-side > b { color: var(--faint); font-size: 20px; font-weight: 400; transition: transform .16s ease; }
.disclosure-panel[open] .disclosure-side > b { transform: rotate(45deg); }
.disclosure-body { border-top: 1px solid #f2f4f7; padding: 20px; }
.disclosure-body > dl { margin: -20px; }
.disclosure-panel .manifest-row { border-bottom: 1px solid #f2f4f7; }
.disclosure-panel .manifest-row:last-child { border-bottom: 0; }
.disclosure-panel .manifest-row dt { color: var(--faint); font: 750 9px ui-monospace,monospace; letter-spacing: .07em; text-transform: uppercase; }
.disclosure-panel .manifest-row dd { margin: 0; overflow-wrap: anywhere; color: #344054; font: 11px/1.5 ui-monospace,monospace; }
.two-col { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(330px,.8fr); gap: 18px; }
.rail-wrap { overflow-x: auto; padding-bottom: 4px; }
.evidence-rail { display: grid; grid-template-columns: repeat(7,minmax(116px,1fr)); min-width: 840px; gap: 7px; }
@@ -203,6 +225,20 @@ tbody tr:hover { background: #f0fdfa; }
.source h3 { margin: 0; font-size: 12px; text-transform: capitalize; }
.source-meta, .source-path { color: var(--faint); font: 9px/1.5 ui-monospace,monospace; }
.source-meta { margin-top: 5px; }.source-path { overflow-wrap:anywhere; border-top: 1px solid #f2f4f7; margin-top: 12px; padding-top: 10px; }
.distribution { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; }
.distribution-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.distribution-head span strong, .distribution-head span small { display: block; }
.distribution-head span strong { color: #344054; font-size: 12px; text-transform: capitalize; }
.distribution-head span small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.distribution-head > b { color: var(--ink); font: 700 11px ui-monospace,monospace; }
.distribution-track { overflow: hidden; height: 8px; margin-top: 8px; border-radius: 99px; background: #eaecf0; }
.distribution-track i { display: block; height: 100%; border-radius: inherit; background: var(--cyan); }
.distribution-track i.success { background: #12b76a; }
.distribution-track i.warning { background: #f79009; }
.distribution-track i.danger { background: #f04438; }
.metric-grid.compact .metric-card { min-height: 116px; }
.technical-section { margin-top: 24px; border-top: 1px solid #f2f4f7; padding-top: 22px; }
.technical-section h3 { margin: 6px 0 14px; font-size: 16px; }
.coverage { display: grid; gap: 18px; }
.coverage-head { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.coverage-track { overflow: hidden; height: 7px; margin-top: 8px; border-radius: 99px; background: #eaecf0; }
@@ -241,7 +277,7 @@ tbody tr:hover { background: #f0fdfa; }
.filters { grid-template-columns: 1fr 1fr; }
.filter-actions { grid-column: 1/-1; }
}
@media (max-width: 820px) {
@media (max-width: 960px) {
.sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 18px 0 50px rgba(16,24,40,.28); }
.sidebar.open { transform: translateX(0); }
.shell { margin-left: 0; }