Spaces:
Running
Running
| /* Chart controls and alternative views; existing website styles remain intact. */ | |
| .chart-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .chart-grid > .panel, | |
| #quality-chart, | |
| #cost-chart, | |
| #class-chart { | |
| min-width: 0; | |
| } | |
| .chart-grid .panel-heading { | |
| flex-wrap: wrap; | |
| align-items: flex-start; | |
| } | |
| .chart-dot-row .bar-label span { | |
| min-width: 0; | |
| overflow-wrap: anywhere; | |
| } | |
| .chart-dot-row .bar-label strong { | |
| flex-shrink: 0; | |
| } | |
| .chart-options { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| align-items: flex-end; | |
| gap: 12px; | |
| } | |
| .chart-options label { | |
| display: grid; | |
| gap: 5px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: #627487; | |
| } | |
| .chart-options select { | |
| max-width: 180px; | |
| } | |
| .chart-radar { | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| .chart-radar svg { | |
| display: block; | |
| width: 100%; | |
| max-height: 590px; | |
| } | |
| .chart-series-controls { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| padding-top: 8px; | |
| } | |
| .chart-series-toggle { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 8px 10px; | |
| border: 1px solid #d7e3e9; | |
| border-radius: 12px; | |
| background: #f4f9fb; | |
| color: #344d61; | |
| font: inherit; | |
| font-size: 11px; | |
| cursor: pointer; | |
| } | |
| .chart-series-toggle i { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 50%; | |
| flex: 0 0 auto; | |
| } | |
| .chart-series-toggle[aria-pressed="false"] { | |
| opacity: 0.45; | |
| text-decoration: line-through; | |
| } | |
| .chart-series-toggle:focus-visible { | |
| outline: 3px solid #8fc7f0; | |
| outline-offset: 2px; | |
| } | |
| .chart-tip { | |
| margin: 10px 0 0; | |
| color: #627487; | |
| font-size: 11px; | |
| line-height: 1.6; | |
| } | |
| .chart-table-scroll { | |
| max-width: 100%; | |
| overflow-x: auto; | |
| border: 1px solid #dce6ec; | |
| border-radius: 14px; | |
| } | |
| table.score-heatmap { | |
| width: 100%; | |
| min-width: 560px; | |
| border-collapse: separate; | |
| border-spacing: 3px; | |
| table-layout: auto; | |
| } | |
| .score-heatmap caption { | |
| padding: 10px; | |
| text-align: left; | |
| font-size: 12px; | |
| color: #627487; | |
| } | |
| .score-heatmap th, | |
| .score-heatmap td { | |
| padding: 12px 10px; | |
| border: 0; | |
| border-radius: 7px; | |
| font-size: 12px; | |
| line-height: 1.5; | |
| } | |
| .score-heatmap thead th { | |
| min-width: 105px; | |
| max-width: 180px; | |
| white-space: normal; | |
| overflow-wrap: normal; | |
| background: #eef5f8; | |
| color: #344d61; | |
| text-align: center; | |
| } | |
| .score-heatmap tbody th { | |
| position: sticky; | |
| left: 0; | |
| z-index: 1; | |
| min-width: 190px; | |
| max-width: 260px; | |
| white-space: normal; | |
| overflow-wrap: anywhere; | |
| background: #f3f8fa; | |
| color: #344d61; | |
| text-align: left; | |
| } | |
| .score-heatmap td { | |
| font-weight: 700; | |
| text-align: center; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .heatmap-key { | |
| display: flex; | |
| justify-content: flex-end; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 12px; | |
| font-size: 11px; | |
| color: #627487; | |
| } | |
| .heatmap-key i { | |
| width: 120px; | |
| height: 9px; | |
| border-radius: 8px; | |
| background: linear-gradient(to right, #f5f8fc, #1b718f); | |
| } | |
| .chart-dot-row { | |
| padding: 10px 0; | |
| } | |
| .chart-dot-track { | |
| position: relative; | |
| height: 20px; | |
| margin: 9px 7px 0; | |
| border-bottom: 1px solid #d9e5ec; | |
| background: repeating-linear-gradient(to right, #dce8ef 0 1px, transparent 1px 20%); | |
| } | |
| .chart-dot { | |
| position: absolute; | |
| top: 3px; | |
| width: 13px; | |
| height: 13px; | |
| border-radius: 50%; | |
| transform: translateX(-50%); | |
| box-shadow: 0 0 0 3px #fff; | |
| } | |
| .class-dot-group { | |
| padding: 20px 0; | |
| border-bottom: 1px solid #dce6ec; | |
| } | |
| .class-dot-group h3 { | |
| font-size: 14px; | |
| color: #344d61; | |
| overflow-wrap: anywhere; | |
| } | |
| @media (max-width: 1050px) { | |
| .chart-grid { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| } | |
| @media (max-width: 700px) { | |
| .chart-options { | |
| width: 100%; | |
| justify-content: flex-start; | |
| } | |
| .chart-options label { | |
| flex: 1; | |
| } | |
| .chart-options select { | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| .chart-radar { | |
| overflow-x: auto; | |
| } | |
| .chart-radar svg { | |
| min-width: 650px; | |
| } | |
| } | |