Cascading Style Sheets
Here is information related to the Cascading Style Sheets currently used by this site to produce all of the SVG Diagrams.
Leaf Styles
The Cascading Style Sheets provide four methods of styling the Terminal and NonTerminal leaves. If you are saving the SVG Code, you can also save it in a way that includes those styles. This can then be modified as you wish, using the four leaf styles as examples.
Main Path Style
Diagram(
NonTerminal( 'Main Path Style' )
)
font-style: normal;
font-weight: bold;
@media (prefers-color-scheme: light) {fill: #ccffcc;}
@media (prefers-color-scheme: dark) {fill: #009900;}
Optional Path Style
Diagram(
NonTerminal( 'Optional Path Style', '', '', 'optional-path' )
)
font-style: italic;
font-weight: 100;
@media (prefers-color-scheme: light) {fill: #ccffff;}
@media (prefers-color-scheme: dark) {fill: #009999;}
Recurring Path Style
Diagram(
NonTerminal( 'Recurring Path Style', '', '', 'recurring-path' )
)
font-style: italic;
font-weight: bold;
@media (prefers-color-scheme: light) {fill: #ffffcc;}
@media (prefers-color-scheme: dark) {fill: #999900;}
Unhappy Path Style
Diagram(
NonTerminal( 'Unhappy Path Style', '', '', 'unhappy-path' )
)
font-style: normal;
font-weight: bold;
font-variant: small-caps;
@media (prefers-color-scheme: light) {fill: #ffcccc;}
@media (prefers-color-scheme: dark) {fill: #990033;}
CSS With @media Sections
This is the primary Cascading Style Sheet used by this website for the SVG Diagrams.
svg.railroad-diagram {
background-color: white;
}
svg.railroad-diagram path {
stroke-width: 2;
stroke: black;
fill: rgba(0, 0, 0, 0);
}
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: normal 12px monospace;
fill: #990099;
}
svg.railroad-diagram rect.group-box {
stroke: #990099;
stroke-dasharray: 10 5;
fill: none;
}
svg.railroad-diagram path.diagram-text {
stroke-width: 2;
stroke: black;
fill: white;
cursor: help;
}
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
fill: #eeeeee;
}
svg.railroad-diagram rect {
stroke-width: 2;
stroke: black;
fill: #ccffcc;
}
svg.railroad-diagram text {
font: bold 14px monospace;
text-anchor: middle;
white-space: pre;
}
svg.railroad-diagram g.optional-path rect {
fill: #ccffff;
}
svg.railroad-diagram g.optional-path text {
font-style: italic;
font-weight: 100;
}
svg.railroad-diagram g.recurring-path rect {
fill: #ffffcc;
}
svg.railroad-diagram g.recurring-path text {
font-style: italic;
}
svg.railroad-diagram g.unhappy-path rect {
fill: #ffcccc;
}
svg.railroad-diagram g.unhappy-path text {
font-variant: small-caps;
}
@media (prefers-color-scheme: dark) {
.day.dark-scheme {
background: #333333;
color: white;
}
.night.dark-scheme {
background: black;
color: #dddddd;
}
}
@media (prefers-color-scheme: light) {
svg.railroad-diagram {
background-color: white;
}
svg.railroad-diagram path {
stroke: black;
fill: rgba(0, 0, 0, 0);
}
svg.railroad-diagram text.comment {
fill: #990099;
}
svg.railroad-diagram rect {
stroke: black;
fill: #ccffcc;
}
svg.railroad-diagram rect.group-box {
stroke: #990099;
}
svg.railroad-diagram path.diagram-text {
stroke: black;
fill: white;
}
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
fill: #eeeeee;
}
svg.railroad-diagram g.optional-path rect {
fill: #ccffff;
}
svg.railroad-diagram g.recurring-path rect {
fill: #ffffcc;
}
svg.railroad-diagram g.unhappy-path rect {
fill: #ffcccc;
}
}
@media (prefers-color-scheme: dark) {
svg.railroad-diagram {
background-color: #1e2129;
}
svg.railroad-diagram path {
stroke: silver;
fill: rgba(0, 0, 0, 0);
}
svg.railroad-diagram text {
fill: whitesmoke;
}
svg.railroad-diagram text.comment {
fill: #990099;
}
svg.railroad-diagram rect {
stroke: silver;
fill: #009900;
}
svg.railroad-diagram rect.group-box {
stroke: #990099;
}
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: #009999;
}
svg.railroad-diagram g.recurring-path rect {
fill: #999900;
}
svg.railroad-diagram g.unhappy-path rect {
fill: #990033;
}
}
CSS For Light Mode Only
This is a Cascading Style Sheet for the SVG Diagrams that can be used when only light mode is desired.
svg.railroad-diagram {
background-color: white;
}
svg.railroad-diagram path {
stroke-width: 2;
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: normal 12px monospace;
fill: #990099;
}
svg.railroad-diagram rect {
stroke-width: 2;
stroke: black;
fill: #ccffcc;
}
svg.railroad-diagram rect.group-box {
stroke: #990099;
stroke-dasharray: 10 5;
fill: none;
}
svg.railroad-diagram path.diagram-text {
stroke-width: 2;
stroke: black;
fill: white;
cursor: help;
}
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
fill: #eeeeee;
}
svg.railroad-diagram g.optional-path rect {
fill: #ccffff;
}
svg.railroad-diagram g.optional-path text {
font-style: italic;
font-weight: 100;
}
svg.railroad-diagram g.recurring-path rect {
fill: #ffffcc;
}
svg.railroad-diagram g.recurring-path text {
font-style: italic;
}
svg.railroad-diagram g.unhappy-path rect {
fill: #ffcccc;
}
svg.railroad-diagram g.unhappy-path text {
font-variant: small-caps;
}
CSS For Dark Mode Only
This is a Cascading Style Sheet for the SVG Diagrams that can be used when only dark mode is desired.
svg.railroad-diagram {
background-color: #1e2129;
}
svg.railroad-diagram path {
stroke-width: 2;
stroke: silver;
fill: rgba(0, 0, 0, 0);
}
svg.railroad-diagram text {
font: bold 14px monospace;
text-anchor: middle;
white-space: pre;
fill: whitesmoke;
}
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: normal 12px monospace;
fill: #990099;
}
svg.railroad-diagram rect {
stroke-width: 2;
stroke: silver;
fill: #009900;
}
svg.railroad-diagram rect.group-box {
stroke: #990099;
stroke-dasharray: 10 5;
fill: none;
}
svg.railroad-diagram path.diagram-text {
stroke-width: 2;
stroke: silver;
fill: darkslategrey;
cursor: help;
}
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
fill: dimgray;
}
svg.railroad-diagram g.optional-path rect {
fill: #009999;
}
svg.railroad-diagram g.optional-path text {
font-style: italic;
font-weight: 100;
}
svg.railroad-diagram g.recurring-path rect {
fill: #999900;
}
svg.railroad-diagram g.recurring-path text {
font-style: italic;
}
svg.railroad-diagram g.unhappy-path rect {
fill: #990033;
}
svg.railroad-diagram g.unhappy-path text {
font-variant: small-caps;
}