shown/src/css/shown.css

Statically-generated, responsive charts, without the need for client-side Javascript.

.shown svg,
.shown .symbol,
.shown.symbol {
  overflow: visible;
}

.shown defs {
  display: none;
}

.shown svg,
.shown text {
  fill: currentColor;
}

.shown :not([dominant-baseline]) {
  dominant-baseline: inherit;
}

.shown .axis {
  fill-opacity: 0.9;
  user-select: none;
}

.shown .axis,
.shown .series-label {
  font-size: 85%;
}

.shown .axis-base {
  stroke: #ccc;
}

.shown .axis-line,
.shown .axis-spine {
  stroke: #ddd;
}

.shown .chart {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.shown .chart-pie {
  margin: auto;
  width: auto;
  align-items: center;
  justify-content: center;
}

.shown .chart-pie-wrap {
  width: 100%;
  max-width: calc(100vh - 2em);
}

.shown .chart-pie-svg {
  width: auto;
  height: 100%;
  display: block;
  margin: auto;
}

.shown .chart-bar > div {
  padding-bottom: 0.5em;
}

.shown .chart-area .series,
.shown .chart-line .series {
  stroke-linecap: round;
}

.shown .areas,
.shown .lines {
  overflow: hidden;
}

.shown .areas {
  opacity: 0.9;
}

.shown .has-xaxis > div,
.shown .has-series > div {
  padding-bottom: 1.5em;
}

.shown .has-xaxis.has-series > div {
  padding-bottom: 2.75em;
}

.shown .has-yaxis > div {
  padding-top: 0.5em;
  padding-left: 3em;
}

.shown .yaxis-w4 > div {
  padding-left: 2.5em;
}

.shown .yaxis-w3 > div {
  padding-left: 2em;
}

.shown .yaxis-w2 > div {
  padding-left: 1.5em;
}

.shown .yaxis-w1 > div {
  padding-left: 1em;
}

.shown .xaxis-w4 > div {
  padding-right: 1.25em;
}

.shown .xaxis-w3 > div {
  padding-right: 1em;
}

.shown .xaxis-w2 > div {
  padding-right: 0.75em;
}

.shown .xaxis-w1 > div {
  padding-right: 0.5em;
}

.shown .legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 0 auto;
  padding: 0;
}

.shown .legend:not(:first-child) {
  margin-top: 1em;
}

.shown .legend-marker {
  width: 1.25em;
  height: 0.75em;
  margin-right: 0.5em;
}

.shown .legend-marker line {
  stroke: currentColor;
  fill: none;
}

.shown .symbol {
  font-size: 10px;
}

.shown .touch {
  fill: transparent !important;
  stroke: none !important;
}

.shown .symbol * {
  vector-effect: non-scaling-stroke;
}

.shown#symbol-asterisk,
.shown#symbol-cross {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.shown#symbol-asterisk circle {
  fill: white;
  stroke: none;
}