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

TextCodeCSS Styles

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

TextCodeCSS Styles

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

TextCodeCSS Styles

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

TextCodeCSS Styles

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;

}