Cascading Style Sheet

Here is the cascading style sheet currently used by this site to produce all of the diagrams in light mode.

svg.railroad-diagram {
  background-color: #f5f5f5;
}
svg.railroad-diagram path {
  stroke-width: 3;
  stroke: black;
  fill: rgba(0, 0, 0, 0);
}
svg.railroad-diagram text {
  font: bold 14px monospace;
  text-anchor: middle;
  white-space: pre;
}
svg.railroad-diagram text.diagram-text {
  font-size: 12px;
}
svg.railroad-diagram text.diagram-arrow {
  font-size: 16px;
}
svg.railroad-diagram text.label {
  text-anchor: start;
}
svg.railroad-diagram text.comment {
  font: bold 12px monospace;
  fill: Orchid;
}
svg.railroad-diagram rect {
  stroke-width: 3;
  stroke: black;
  fill: PaleGreen;
}
svg.railroad-diagram rect.group-box {
  stroke: Plum;
  stroke-dasharray: 10 5;
  fill: none;
}
svg.railroad-diagram path.diagram-text {
  stroke-width: 3;
  stroke: black;
  fill: white;
  cursor: help;
}
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
  fill: #eee;
}
svg.railroad-diagram g.optional-path rect {
  fill: PaleTurquoise;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  svg.railroad-diagram {
    background-color: #f5f5f5;
  }
  svg.railroad-diagram path {
    stroke: black;
    fill: rgba(0, 0, 0, 0);
  }
  svg.railroad-diagram text.comment {
    fill: Orchid;
  }
  svg.railroad-diagram rect {
    stroke: black;
    fill: PaleGreen;
  }
  svg.railroad-diagram rect.group-box {
    stroke: Plum;
  }
  svg.railroad-diagram path.diagram-text {
    stroke: black;
    fill: white;
  }
  svg.railroad-diagram g.diagram-text:hover path.diagram-text {
    fill: #eee;
  }
  svg.railroad-diagram g.optional-path rect {
    fill: PaleTurquoise;
  }
}

@media (prefers-color-scheme: dark) {
  svg.railroad-diagram {
    background-color: #21222c;
  }
  svg.railroad-diagram path {
    stroke: silver;
    fill: rgba(0, 0, 0, 0);
  }
  svg.railroad-diagram text {
    fill: whitesmoke;
  }
  svg.railroad-diagram text.comment {
    fill: Orchid;
  }
  svg.railroad-diagram rect {
    stroke: silver;
    fill: DarkGreen;
  }
  svg.railroad-diagram rect.group-box {
    stroke: Plum;
  }
  svg.railroad-diagram path.diagram-text {
    stroke: silver;
    fill: darkslategrey;
  }
  svg.railroad-diagram g.diagram-text:hover path.diagram-text {
    fill: dimgray;
  }
  svg.railroad-diagram g.optional-path rect {
    fill: RoyalBlue;
  }
}