55 lines
1.8 KiB
CSS
55 lines
1.8 KiB
CSS
.trend-controls form {
|
|
display: grid;
|
|
grid-template-columns: minmax(140px, 0.7fr) minmax(160px, 1fr)
|
|
minmax(160px, 1fr) auto auto;
|
|
gap: 12px;
|
|
align-items: end;
|
|
}
|
|
|
|
.trend-controls form > label,
|
|
.trend-ranges {
|
|
display: grid;
|
|
gap: 5px;
|
|
margin: 0;
|
|
}
|
|
|
|
.trend-ranges {
|
|
grid-auto-flow: column;
|
|
justify-content: start;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.trend-ranges legend { margin-bottom: 5px; font-weight: 700; }
|
|
.trend-ranges label { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
|
|
.trend-summary { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 14px; }
|
|
.trend-summary p { margin: 0; }
|
|
.trend-charts { display: grid; gap: 16px; }
|
|
.trend-panel { min-width: 0; }
|
|
.trend-chart { width: 100%; min-height: 220px; overflow: hidden; }
|
|
.trend-chart svg { display: block; width: 100%; height: auto; min-height: 220px; }
|
|
.trend-grid { stroke: #cbd5e1; stroke-width: 1; }
|
|
.trend-line { fill: none; stroke: #c65312; stroke-width: 2.5; stroke-linejoin: round; }
|
|
.trend-point { fill: #ffffff; stroke: #0f172a; stroke-width: 2; }
|
|
.trend-point:focus { outline: none; stroke: #2563eb; stroke-width: 5; }
|
|
.trend-axis-label { fill: #475569; font-size: 11px; }
|
|
.trend-disclosure { color: var(--muted); font-size: 13px; }
|
|
.trend-data-table { margin-top: 12px; }
|
|
.trend-data-table summary { cursor: pointer; font-weight: 700; }
|
|
|
|
@media (max-width: 900px) {
|
|
.trend-controls form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.trend-ranges { grid-column: 1 / -1; }
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.trend-controls form { grid-template-columns: 1fr; }
|
|
.trend-ranges { grid-column: auto; grid-auto-flow: row; }
|
|
.trend-chart { min-height: 180px; }
|
|
.trend-chart svg { min-height: 180px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.trend-line, .trend-point { transition: none; animation: none; }
|
|
}
|