/* ==========================================================================
documentation.css
Styles specific to the Dyalog Documentation template pages.
Loaded in addition to styles.css — do not duplicate rules from there.
TABLE OF CONTENTS
-----------------
1. Typography
2. Layout & Structure
3. Doc Link Styles
4. Heading Styles
5. Icons
6. Callout Boxes (Note, Tip)
7. See Also
8. Old Docs Warning Visibility
========================================================================== */
/* ==========================================================================
1. TYPOGRAPHY
========================================================================== */
/* Lighter-weight H2 headings used within docs page content */
.dy-docs-h2 {
font-size: 26px !important;
font-weight: 300;
}
/* ==========================================================================
2. LAYOUT & STRUCTURE
========================================================================== */
/* A subtle 1px divider with vertical breathing room, used between sections */
.dy-docs-divider {
height: 10px;
border-top: 1px solid #E6E6E6;
}
/* Indents child documents in a nested documentation list */
.subDocument {
margin-left: 1.2em !important;
}
/* Pulls the all-docs list up slightly to tighten spacing after its heading */
#all-docs {
margin-top: -1.6em;
}
/* ==========================================================================
3. DOC LINK STYLES
The main clickable link style used on documentation index/listing pages.
Each link is flex so the icon, heading, and tags sit on the same baseline.
========================================================================== */
a.doc-link {
color: #CA4E00 !important;
font-family: "IBM Plex Sans", Sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
margin-bottom: 10px !important;
margin-top: 20px !important;
transition: color 0.3s ease !important;
}
/* Hover: shift the link, its inline h3, and any icon all to blue together */
a.doc-link:hover,
a.doc-link:hover .h3,
a.doc-link:hover h3.inline,
a.doc-link:hover i {
color: #526CFE !important;
transition: color 0.3s ease !important;
}
/* ==========================================================================
4. HEADING STYLES
h3.inline and span.h3 are used inside doc links to keep the heading
text inline alongside icons and tags rather than breaking to a new line.
========================================================================== */
/* Inline H3: behaves like a span but carries semantic heading weight */
h3.inline {
display: inline !important;
color: #CA4E00 !important;
font-family: "IBM Plex Sans", Sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
vertical-align: middle !important;
margin: 0 !important;
white-space: normal !important;
}
/* Inline span wrapper for H3-style text where a real heading tag isn't appropriate */
span.h3 {
display: inline !important;
vertical-align: middle !important;
margin: 0 4px 0 0 !important;
white-space: normal !important;
}
/* ==========================================================================
5. ICONS
Shared styles for inline icons (Font Awesome or image-based) used
alongside doc links. Fixed width keeps text aligned across rows.
========================================================================== */
.inline-icon,
.fa-solid {
width: 25px;
margin-right: 8px !important;
vertical-align: middle !important;
display: inline-block !important;
flex-shrink: 0 !important; /* prevents icon from squishing inside flex rows */
}
/* ==========================================================================
6. CALLOUT BOXES
Styled callout boxes for NOTE and TIP content within documentation.
Usage: NOTE: Your text here
TIP: Your text here
Both share the same structure:
- Coloured background and left accent border
- The label is styled separately as a small-caps header
- Links inside are styled to stay within the callout's colour scheme
========================================================================== */
/* --- NOTE: blue-grey --- */
p.note {
background-color: #C8DCE5;
border: 1px solid #7AAABB;
border-left: 6px solid #7AAABB;
border-radius: 0 5px 5px 0;
padding: 14px 18px;
margin: 20px 0;
font-size: 0.875rem;
line-height: 1.6;
color: #1a2e38;
}
p.note > strong:first-child {
display: block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 4px;
color: #2A6070;
}
p.note a {
color: #2A6070 !important;
text-decoration: none;
border-bottom: 1px solid #2A6070;
transition: border-color 0.2s ease, color 0.2s ease;
}
p.note a:hover {
color: #001f33 !important;
border-bottom: 1px solid #001f33;
}
/* --- TIP: warm amber --- */
p.tip {
background-color: #FBE0B8;
border: 1px solid #E8B870;
border-left: 6px solid #E8B870;
border-radius: 0 5px 5px 0;
padding: 14px 18px;
margin: 20px 0;
font-size: 0.875rem;
line-height: 1.6;
color: #3D2600;
}
p.tip > strong:first-child {
display: block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 4px;
color: #A06010;
}
p.tip a {
color: #A06010 !important;
text-decoration: none;
border-bottom: 1px solid #A06010;
transition: border-color 0.2s ease, color 0.2s ease;
}
p.tip a:hover {
color: #5C3600 !important;
border-bottom: 1px solid #5C3600;
}
/* ==========================================================================
7. SEE ALSO
========================================================================== */
.see-also {
display: block !important;
font-weight: 500;
}
/* ==========================================================================
8. OLD DOCS WARNING VISIBILITY
---------------------------------------------------------
Controls where the .old-docs-warning banner is shown or hidden.
Default behaviour (set in the Elementor template):
The warning is visible on ALL documentation pages.
Exceptions — hidden on:
- The /documentation/ landing page
- The CURRENT latest version landing page (e.g. v19.0)
- The retired documentation page
Why:
We only want to warn users when they are viewing an older version.
The warning should not appear on the landing page or the current latest version.
How it works:
WordPress adds a unique body class (page-id-XXXX) to each page.
We use these to target specific pages and suppress the warning.
---------------------------------------------------------
WHEN A NEW VERSION IS RELEASED (e.g. v20.0):
---------------------------------------------------------
1. ADD the new version's page-id below (to hide the warning on it)
2. REMOVE the previous version's page-id (so the warning reappears there)
Example — when v20.0 launches:
ADD page-id-XXXXX (v20.0 — now the current latest)
REMOVE page-id-51231 (v19.0 — now old, warning should show)
========================================================================== */
body.page-id-20863 .old-docs-warning, /* /documentation/ landing page */
body.page-id-51231 .old-docs-warning, /* v19.0 (current latest version) */
body.page-id-7616 .old-docs-warning /* retired documentation page */
{
display: none !important;
}