added a modern css stylesheet for all diagrams, resembles styling of the visual briefing

This commit is contained in:
krut_ni 2026-08-04 19:25:57 +02:00
parent ef3e043e67
commit cd14f1d167
No known key found for this signature in database
GPG Key ID: A5C0151B4DDB172C

View File

@ -0,0 +1,51 @@
.chart-block-shell {
--chart-pine: #236a50;
--chart-sage: #79ae90;
--chart-sun: #f2d264;
--chart-mist: #eaf1ec;
padding: 0 1.5rem;
}
.chart-block-shell ::deep .chart-block {
position: relative;
overflow: hidden;
padding: clamp(1rem, 2.5vw, 1.5rem);
border-color: color-mix(in srgb, var(--mud-palette-lines-default) 85%, var(--chart-pine));
border-radius: 1.25rem;
background: var(--mud-palette-surface);
background: color-mix(in srgb, var(--mud-palette-surface) 96%, var(--chart-mist));
box-shadow: 0 18px 55px rgba(22, 75, 59, .07);
}
.chart-block-shell ::deep .chart-block::before {
position: absolute;
inset: 0 0 auto;
height: .25rem;
background: linear-gradient(90deg, var(--chart-pine), var(--chart-sage), var(--chart-sun));
content: "";
}
.chart-block-shell ::deep .chart-block-title {
margin-block-end: 1rem;
font-weight: 700;
letter-spacing: -.02em;
}
.chart-block-plot {
width: 100%;
margin-inline: auto;
}
.chart-block-plot-circular {
max-width: 30rem;
}
.chart-block-plot-axis {
max-width: 56rem;
}
.chart-block-shell ::deep .chart-block-caption {
margin-block-start: .75rem;
color: var(--mud-palette-text-secondary);
line-height: 1.5;
}