Uicontrol, Wintitle, Shortcut, Menucascade

Style the semantic interface elements.

Overview

Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/dita/uicontrol_wintitle_shortcut_menucascade.css");
Figure 1. UI Control
UI control
Figure 2. Window Title
window title
Figure 3. Shortcut
shortcut
Figure 4. Menu Cascade
menu cascade

Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Style UI control elements
UI control custom
/* Style UI control elements. */
.uicontrol {
    padding-left: 2.5px;
    border: 2px solid #1d3557;
    padding-right: 2.5px;
}
Style window title elements
window title custom
/* Style wintitle elements. */
.wintitle {
    border-bottom: 2px dotted;
}
Style shortcut elements
shortcut custom
/* Add captions before shortcut elements. */
.shortcut::before,
.menucascade:has(.uicontrol>.shortcut)::before {
    content:"press: ";
    font-variant:normal;
    text-transform: none;
    color: #404040;
}
/* Do not add captions before shortcut elements contained by menucascade elements. */
.menucascade .shortcut::before {
    content:"none";
}
/* Style shortcut elements. */
.shortcut {
    font-variant: normal;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}
Style menu cascade elements
menu cascade custom
/* Add borders before and after menucascade elements. */
.menucascade {
    padding-left: 3.5px;
    border-left: 1.5px solid #D95700;
    border-right: 1.5px solid #D95700;
    padding-right: 3.5px;
}
/* Style the arrow character. */
abbr[title] {
    color: #D95700;
}
/* Add some space before the arrow character. */
abbr[title]::before {
    content: " ";
}
/* Add some space after the arrow character. */
abbr[title]::after {
    content: " ";
}
/* Change the separator between the uicontrol elements. */
abbr[title] {
    content: ">>";
}