codepens/pw-dashboard/dist/style.css

html {
  background-color: var(--gray-900);
  color: var(--gray-100);
  font-family: monospace, monospace;
  --black: #000;
  --gray-100: #f7fafc;
  --gray-200: #edf2f7;
  --gray-500: #a0aec0;
  --gray-600: #718096;
  --gray-900: #1a202c;
  --blue-300: #90cdf4;
  --blue-400: #63b3ed;
  --blue-500: #4299e1;
  --blue-600: #3182ce;
  --yellow-300: #faf089;
  --yellow-400: #f6e05e;
  --yellow-500: #ecc94b;
  --yellow-600: #d69e2e;
  --yellow-700: #b7791f;
  --pink-300: #fbb6ce;
  --pink-400: #f687b3;
  --pink-500: #ed64a6;
  --pink-600: #d53f8c;
  --green-300: #9ae6b4;
  --green-400: #68d391;
  --green-500: #48bb78;
  --green-600: #38a169;
  --green-700: #2f855a;
  --teal-300: #81e6d9;
  --teal-400: #4fd1c5;
  --teal-500: #38b2ac;
  --teal-600: #319795;
  --teal-700: #2c7a7b;
  --lh: 1.4rem;
  --border: var(--gray-600);
}
* {
  font: inherit;
  font-size: 1rem;
  line-height: var(--lh);
  font-weight: 300;
  font-family: 'Overpass Mono', monospace, monospace;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
body {
  margin: 2ch;
  max-width: 100%;
  display: grid;
  overflow-x: hidden;
  grid-template-columns: repeat(auto-fit, minmax(42ch, 1fr));
  grid-gap: calc(var(--lh) * 2) 1ch;
}
section {
  border-color: var(--border);
  border-style: solid;
  border-width: 0 2px;
  max-width: calc(100vw - 4ch);
  padding: var(--lh) 1ch;
  position: relative;
}
section::after {
  content: '-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------';
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  color: var(--border);
}
section::after {
  bottom: -0.65rem;
}
section > h2 {
  text-transform: uppercase;
  margin-top: -2rem;
  white-space: nowrap;
  margin-left: -1ch;
  margin-right: -1ch;
  overflow: hidden;
}
section > h2::before,
section > h2::after {
  color: var(--border);
}
section > h2::before {
  content: '--- ';
}
section > h2::after {
  content: ' ----------------------------------------------------------------------------------------------------------------------------';
}
section dl {
  position: absolute;
  top: calc(var(--lh) - 1rem + calc(var(--lh) / 2));
  right: 0;
  padding-right: 2ch;
  width: 18ch;
  background: var(--gray-900);
}
dt {
  text-transform: uppercase;
}
dt::before {
  content: '▪️';
  margin-right: 1ch;
}
.historic dt:nth-of-type(1) {
  color: var(--teal-300);
}
.historic dt:nth-of-type(2) {
  color: var(--teal-400);
}
.historic dt:nth-of-type(3) {
  color: var(--teal-500);
}
.bar dt:nth-of-type(1) {
  color: var(--yellow-300);
}
.bar dt:nth-of-type(2) {
  color: var(--yellow-400);
}
.bar dt:nth-of-type(3) {
  color: var(--yellow-500);
}
.realtime dt:nth-of-type(1) {
  color: var(--blue-400);
}
.realtime dt:nth-of-type(2) {
  color: var(--blue-400);
}
.realtime dt:nth-of-type(3) {
  color: var(--blue-400);
}
dd {
  margin-left: 2ch;
}
section pre {
  margin-top: var(--lh);
}
pre span {
  display: block;
  letter-spacing: -0.2ch;
}
.dotted span {
  line-height: 0.8;
}
pre.blue span:nth-last-child(1) {
  color: var(--blue-600);
}
pre.blue span:nth-last-child(2) {
  color: var(--blue-600);
}
pre.blue span:nth-last-child(3) {
  color: var(--blue-500);
}
pre.blue span:nth-last-child(4) {
  color: var(--blue-400);
}
pre.blue span:nth-last-child(5) {
  color: var(--blue-400);
}
pre.blue span:nth-last-child(6) {
  color: var(--blue-300);
}
pre.teal span:nth-last-child(1) {
  color: var(--teal-700);
}
pre.teal span:nth-last-child(2) {
  color: var(--teal-500);
}
pre.teal span:nth-last-child(3) {
  color: var(--teal-400);
}
pre.teal span:nth-last-child(4) {
  color: var(--teal-300);
}
pre.green span:nth-last-child(1) {
  color: var(--green-700);
}
pre.green span:nth-last-child(2) {
  color: var(--green-600);
}
pre.green span:nth-last-child(3) {
  color: var(--green-400);
}
pre.green span:nth-last-child(4) {
  color: var(--green-300);
}
pre.yellow span:nth-last-child(1) {
  color: var(--yellow-700);
}
pre.yellow span:nth-last-child(2) {
  color: var(--yellow-500);
}
pre.yellow span:nth-last-child(3) {
  color: var(--yellow-400);
}
pre.yellow span:nth-last-child(4) {
  color: var(--yellow-300);
}