/*
This is a css style sheet for adoc Studio.
It is used as a basis for all other factory style sheets in adoc Studio.
This style sheet is based on the Stylesheet for Asciidoctor available at:
https://github.com/asciidoctor/asciidoctor/tree/main/src/stylesheets
It contains several additions:
- introduced variables for all fonts and colours
- introduced an additional dark mode for all bright variants
- introduced the styling for PDF using the Vivliostyle engine
- and many more (see the comments at the variable or selector)
Author: Frank Blome for ProjectWizards GmbH
Version: 1.0 from April 17, 2024
License: Distributed under the permissive MIT license
*/
:root {
/*
General hint for fonts:
Use as few fonts as possible
to achieve a homogeneous appearance of the document.
*/
--ads-body-font: serif; /* For all text */
--ads-headline-font: sans-serif; /* For all headlines */
--ads-monospaced-font: monospace; /* For all verbatim or literals */
--ads-toc-font: sans-serif; /* For the table of contents */
/* Set the icon weight for the admonitions:
400 -> outlined
900 -> Filled
*/
--ads-icon-font-weight: 900;
/* Colors: The default colors are based on the default styles for Asciidoctor.
Modifications:
- All colors are transfered from the Asciidoctor stylesheet
into a variable (the naming should be obvious)
- A dark version was added.
- Some minor color changes based on our taste
- Shadows on admonition icons and other symbols are removed
*/
--ads-color: #101010; /* base color for all text */
--ads-color-dark: #f1f1f1; /* dark variant of the base color */
--ads-background-color: #ffffff; /* base color for the background */
--ads-background-color-dark: #121212; /* dark variant of the background color */
--ads-title-color: #000; /* base color for all titles */
--ads-title-color-dark: #eee; /* dark variant for all titles */
--ads-headline-color: #eee; /* base color for all headline */
--ads-headline-color-dark: #ba3925; /* dark variant for the headlines */
--ads-headline-block-color: #7a2518; /* headline color for any blocks */
--ads-headline-block-color-dark: #b52812; /* dark variant for the block headlines */
--ads-headline-small-color: #e99b8f; /* color for small headlines */
--ads-headline-small-color-dark: #b0746b; /* dark variant for the small headlines */
--ads-mark-background-color: #ffff00; /* Text marker with the same in dark mode */
--ads-a-color: #2156a5; /* all kind of links */
--ads-a-color-dark: #2c72db; /* dark variant of the links */
--ads-a-hover-color: #1d4b8f; /* hover variant of the links */
--ads-a-hover-color-dark: #1d4b8f; /* dark variant of links hover */
--ads-code-color: dimgray; /* For general code */
--ads-code-color-dark: silver;
--ads-attribute-color: blue; /* For all attributed stings */
--ads-attribute-color-dark: cornflowerblue;
--ads-code-buildin-color: red;
--ads-code-buildin-color-dark: red;
--ads-comment-color: gray; /* For secondary text & comments */
--ads-comment-color-dark: gray;
--ads-markup-color: navy; /* For all kind of markup text */
--ads-markup-color-dark: cornflowerblue;
--ads-literal-color: blue; /* For Keywords */
--ads-literal-color-dark: cornflowerblue;
--ads-tag-color: firebrick; /* For Tags & Keywords */
--ads-tag-color-dark: indianred;
--ads-verbatim-color: dimgray; /* For Verbatim & other text */
--ads-verbatim-color-dark: gray;
--ads-single-border-color: #dddddd; /* Mainly for single lines */
--ads-border-color: rgb(0 0 0 / 0.6); /* Light variant for some transparent borders */
--ads-border-color-dark: rgb(255 255 255 / 0.1); /* Dark variant for all borders */
--ads-details-color: rgb(0 0 0 / 0.85); /* Some borders needs to be less transparent */
--ads-details-color-dark: rgb(255 255 255 / 0.85); /* dark variant of these borders */
/* Colors for tables */
--ads-table-border-color: #cccccc;
--ads-table-background-color: #ffffff;
--ads-table-background-color-dark: #212121;
--ads-table-head-background-color: #f7f8f7;
--ads-table-head-background-color-dark: #323232;
--ads-table-alternate-background-color: #f8f8f7;
--ads-table-alternate-background-color-dark: #f8f8f7;
--ads-table-stripes-background-color: #f7f8f7;
--ads-table-stripes-background-color-dark: #323232;
--ads-linenotable-background-color: none;
--ads-linenotable-background-color-dark: none;
/* Colors for code blocks & syntax highlighting using predefined colors */
--ads-code-attribute-color: var(--ads-attribute-color);
--ads-code-attribute-color-dark: var(--ads-attribute-color-dark);
--ads-code-comment-color: var(--ads-comment-color);
--ads-code-comment-color-dark: var(--ads-comment-color-dark);
--ads-code-literal-color: var(--ads-literal-color);
--ads-code-literal-color-dark: var(--ads-literal-color-dark);
--ads-code-meta-color: var(--ads-markup-color);
--ads-code-meta-color-dark: var(--ads-markup-color-dark);
--ads-code-symbol-color: var(--ads-attribute-color);
--ads-code-symbol-color-dark: var(--ads-attribute-color-dark);
--ads-code-tag-color: var(--ads-tag-color);
--ads-code-tag-color-dark: var(--ads-tag-color-dark);
/* quotes and other blocks */
--ads-quote-color: rgb(0 0 0 / 0.85);
--ads-quote-color-dark: rgb(255 255 255 / 0.85);
--ads-pre-color: green;
--ads-pre-color-dark: #eeeeee;
--ads-pre-background-color: #f7f7f8;
--ads-pre-background-color-dark: #7f7f7f;
--ads-exampleblock-background-color: #ffffff;
--ads-exampleblock-background-color-dark: #121212;
--ads-sidebar-background-color: #f3f3f2;
--ads-sidebar-background-color-dark: #3f3f3f;
--ads-listingblock-background-color: #f7f7f8;
--ads-listingblock-background-color-dark: #333333;
--ads-listingblock-output-background-color: rgb(0 0 0 / 0.9);
--ads-listingblock-output-background-color-dark: #7f7f7f;
/* Colors for the UI elements */
--ads-kbd-background-color: #f7f7f7;
--ads-kbd-background-color-dark: #bababa;
--ads-kbd-border-color: #cccccc;
--ads-kbd-border-color-dark: rgb(0 0 0 / 0.8);
--ads-kbd-color: rgb(0 0 0 / 0.8);
--ads-kbd-color-dark: rgb(0 0 0 / 0.8);
--ads-keyseq-color: rgb(51 51 51 / 0.8);
--ads-keyseq-color-dark: rgb(255 255 255 / 0.1);
--ads-menu-color: #000000;
--ads-menu-color-dark: #eeeeee;
/* Colors for the Table of contents */
--ads-toc-background-color: #f8f8f7;
--ads-toc-border-color: #e7e7e9;
--ads-toc-background-color-dark: #323232;
--ads-toc2-background-color: #f8f8f7;
--ads-toc2-background-color-dark: #323232;
/* Colors for the Footer */
--ads-footer-background-color: #606060;
--ads-footer-background-color-dark: #505050;
/* Colors for Pretty Print */
--ads-prettyprint-background-color: #f7f7f8;
--ads-prettyprint-background-color-dark: #7f7f7f;
--ads-prettyprint-list-background-color: none;
--ads-prettyprint-list-background-color-dark: none;
/* Admonitions: The background color is unused in the base style.
It is prepared for a style similar to Apple Calendar with dark/light colors */
--ads-admonitionblock-background-color: none;
--ads-admonitionblock-background-color-dark: none;
--ads-note-color: #1962d1;
--ads-note-border-color: #1962d1;
--ads-note-background-color: #b8d4ff;
--ads-tip-color: #ebd005;
--ads-tip-border-color: #ebd005;
--ads-tip-background-color: #fcf3ae;
--ads-warning-color: #fc9803;
--ads-warning-border-color: #fc9803;
--ads-warning-background-color: #fae1bb;
--ads-caution-color: #cf2604;
--ads-caution-border-color: #cf2604;
--ads-caution-background-color: #fadbd4;
--ads-important-color: #800101;
--ads-important-border-color: #800101;
--ads-important-background-color: #fbd0d0;
}
:root {
--ads-top-navigation-font: var(--ads-headline-font);
--ads-top-navigation-color: var(--ads-color);
--ads-top-navigation-color-dark: var(--ads-color-dark);
--ads-top-navigation-background-color: var(--ads-background-color);
--ads-top-navigation-background-color-dark: var(--ads-background-color-dark);
--ads-top-navigation-hover-color: var(--ads-a-hover-color);
--ads-top-navigation-hover-color-dark: var(--ads-a-hover-color-dark);
--ads-top-navigation-separator-color: rgb(210, 210, 210);
--ads-top-navigation-separator-color-dark: rgb(60, 60, 60);
--ads-top-navigation-active-color: var(--ads-color);
--ads-top-navigation-active-color-dark: var(--ads-color-dark);
--ads-top-navigation-menu-color: var(--ads-color);
--ads-top-navigation-menu-color-dark: var(--ads-color-dark);
--ads-top-navigation-menu-background-color: var(--ads-background-color);
--ads-top-navigation-menu-background-color-dark: var(--ads-background-color-dark);
--ads-top-navigation-menu-border-color: rgb(226, 232, 240);
--ads-top-navigation-menu-border-color-dark: rgb(35, 40, 45);
--ads-top-navigation-menu-hover-color: rgb(42, 101, 197);
--ads-top-navigation-menu-hover-color-dark: black;
--ads-top-navigation-menu-hover-background-color: rgb(248, 250, 252);
--ads-top-navigation-menu-hover-background-color-dark: rgb(60, 100, 200);
--ads-side-navigation-font: var(--ads-headline-font);
--ads-side-navigation-color: rgb(110, 110, 115);
--ads-side-navigation-color-dark: rgb(145, 145, 150);
--ads-side-navigation-hover-color: var(--ads-color);
--ads-side-navigation-hover-color-dark: var(--ads-color-dark);
--ads-side-navigation-background-color: transparent;
--ads-side-navigation-background-color-dark: transparent;
--ads-side-navigation-separator-color: transparent;
--ads-side-navigation-separator-color-dark: transparent;
--ads-side-navigation-active-color: var(--ads-color);
--ads-side-navigation-active-color-dark: var(--ads-color-dark);
--ads-satellite-navigation-font: var(--ads-headline-font);
--ads-satellite-navigation-color: rgb(110, 110, 115);
--ads-satellite-navigation-color-dark: rgb(145, 145, 150);
--ads-satellite-navigation-hover-color: var(--ads-color);
--ads-satellite-navigation-hover-color-dark: var(--ads-color-dark);
--ads-satellite-navigation-background-color: transparent;
--ads-satellite-navigation-background-color-dark: transparent;
--ads-satellite-navigation-separator-color: rgb(210, 210, 210);
--ads-satellite-navigation-separator-color-dark: rgb(60, 60, 60);
--ads-satellite-navigation-active-color: var(--ads-color);
--ads-satellite-navigation-active-color-dark: var(--ads-color-dark);
}
/*
The standard color definitions: can be used as classes for colouring the text
We separated these color definitions into a extra root selector for reducing
the amount of text when using the 'styles' attribute. Then these colors are not needed.
*/
:root {
--ads-aqua-color: #00fafa;
--ads-aqua-color-dark: #446666;
--ads-aqua-background-color: #00fafa;
--ads-aqua-background-color-dark: #446666;
--ads-black-color: #000000;
--ads-black-color-dark: #eeeeee;
--ads-black-background-color: #000000;
--ads-black-background-color-dark: #eeeeee;
--ads-blue-color: #0000bf;
--ads-blue-color-dark: #575778;
--ads-blue-background-color: #0000bf;
--ads-blue-background-color-dark: #575778;
--ads-fuchsia-color: #fa00fa;
--ads-fuchsia-color-dark: #575778;
--ads-fuchsia-background-color: #fa00fa;
--ads-fuchsia-background-color-dark: #575778;
--ads-gray-color: #7d7d7d;
--ads-gray-color-dark: #7d7d7d;
--ads-gray-background-color: #7d7d7d;
--ads-gray-background-color-dark: #7d7d7d;
--ads-green-color: #007d00;
--ads-green-color-dark: #007d00;
--ads-green-background-color: #007d00;
--ads-green-background-color-dark: #007d00;
--ads-lime-color: #00fa00;
--ads-lime-color-dark: #00fa00;
--ads-lime-background-color: #00fa00;
--ads-lime-background-color-dark: #00fa00;
--ads-maroon-color: #7d0000;
--ads-maroon-color-dark: #7d0000;
--ads-maroon-background-color: #7d0000;
--ads-maroon-background-color-dark: #7d0000;
--ads-navy-color: #00007d;
--ads-navy-color-dark: #00007d;
--ads-navy-background-color: #00007d;
--ads-navy-background-color-dark: #00007d;
--ads-olive-color: #7d7d00;
--ads-olive-color-dark: #616100;
--ads-olive-background-color: #7d7d00;
--ads-olive-background-color-dark: #616100;
--ads-orange-color: #FF9300;
--ads-orange-color-dark: #C37C2D;
--ads-orange-background-color: #FF9300;
--ads-orange-background-color-dark: #C37C2D;
--ads-purple-color: #7d007d;
--ads-purple-color-dark: #660066;
--ads-purple-background-color: #7d007d;
--ads-purple-background-color-dark: #660066;
--ads-red-color: #fa0000;
--ads-red-color-dark: #b00000;
--ads-red-background-color: #fa0000;
--ads-red-background-color-dark: #b00000;
--ads-silver-color: #bcbcbc;
--ads-silver-color-dark: #878787;
--ads-silver-background-color: #bcbcbc;
--ads-silver-background-color-dark: #878787;
--ads-teal-color: #007d7d;
--ads-teal-color-dark: #006969;
--ads-teal-background-color: #007d7d;
--ads-teal-background-color-dark: #006969;
--ads-white-color: #fafafa;
--ads-white-color-dark: #3b3b3b;
--ads-white-background-color: #fafafa;
--ads-white-background-color-dark: #3b3b3b;
--ads-yellow-color: #fafa00;
--ads-yellow-color-dark: #adad00;
--ads-yellow-background-color: #fafa00;
--ads-yellow-background-color-dark: #adad00;
}
/*** End of the vars ***/
*,
::before,
::after {
box-sizing: border-box;
}
html {
font-family: var(--ads-body-font); /* Standard font */
font-size: 100%; /* the the users default font size as the basis */
-webkit-text-size-adjust: 100%;
hyphens: auto;
-webkit-hyphens: auto;
}
body { /* Here are many default values inherited to others */
background-color: var(--ads-background-color);
color: var(--ads-color);
padding: 0;
margin: 0;
font-size: inherit; /* Font size from */
line-height: 1; /* Standard line height */
position: relative; /* The main anchor for all postion:absolute elements */
cursor: auto; /* show the default cursor based on the detail */
tab-size: 4; /* for formatting code */
word-wrap: anywhere; /* do word wrap wherever it's possible & needed */
text-align: var(--ads-text-align, left);
-moz-osx-font-smoothing: grayscale; /* how to antialias the fonts in... */
-webkit-font-smoothing: antialiased; /* ... different browsers */
--fa-style: var(--ads-icon-font-weight); /* Map the ads variable to the font awesome variable */
}
@media (prefers-color-scheme: dark) { /* this is how all dark variants are done */
body { /* modifying only the colors, the rest remains the same */
background-color: var(--ads-background-color-dark);
color: var(--ads-color-dark);
}
}
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
a {
background: none;
color: var(--ads-a-color);
text-decoration: underline;
line-height: inherit;
}
@media (prefers-color-scheme: dark) {
a {
color: var(--ads-a-color-dark);
}
}
a:active,
a:hover {
cursor: pointer;
outline: 0;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:focus {
color: var(--ads-a-hover-color);
}
@media (prefers-color-scheme: dark) {
a:hover,
a:focus {
color: var(--ads-a-hover-color-dark);
}
}
abbr {
font-size: 0.9em;
}
abbr[title] {
cursor: help;
border-bottom: 1px dotted var(--ads-single-border-color);
text-decoration: none;
}
b,
strong {
font-weight: bold;
line-height: inherit;
}
strong strong {
font-weight: 400;
}
code,
kbd,
pre {
/* Sizes and other font variables are inherited from body and need not be listed again.
Only changed attributes are listed:
*/
font-family: var(--ads-monospaced-font);
}
code {
font-weight: normal;
color: var(--ads-code-color);
}
@media (prefers-color-scheme: dark) {
code {
color: var(--ads-code-color-dark);
}
}
.code-subst,
.code-formula,
.code-attr,
.code-property,
.code-params {
color: var(--ads-code-attribute-color);
}
@media (prefers-color-scheme: dark) {
.code-subst,
.code-formula,
.code-attr,
.code-property,
.code-params {
color: var(--ads-code-attribute-color-dark);
}
}
.code-keyword,
.code-attribute,
.code-selector-tag,
.code-doctag,
.code-name,
.code-title,
.code-section,
.code-strong {
font-weight: bold;
}
.code-emphasis {
font-style: italic;
}
.code-comment {
color: var(--ads-code-comment-color);
}
@media (prefers-color-scheme: dark) {
.code-comment {
color: var(--ads-code-comment-color-dark);
}
}
.code-keyword,
.code-tag,
.code-link,
.code-punctuation {
color: var(--ads-code-tag-color);
}
@media (prefers-color-scheme: dark) {
.code-keyword,
.code-tag,
.code-link,
.code-punctuation {
color: var(--ads-code-tag-color-dark);
}
}
.code-type,
.code-string,
.code-number,
.code-selector-id,
.code-selector-class,
.code-quote,
.code-template-tag,
.code-deletion
.code-title,
.code-section {
color: var(--ads-code-attribute-color);
}
@media (prefers-color-scheme: dark) {
.code-type,
.code-string,
.code-number,
.code-selector-id,
.code-selector-class,
.code-quote,
.code-template-tag,
.code-deletion
.code-title,
.code-section {
color: var(--ads-code-attribute-color-dark);
}
}
.code-regexp,
.code-symbol,
.code-variable,
.code-template-variable,
.code-selector-attr,
.code-operator,
.code-selector-pseudo {
color: var(--ads-code-meta-color);
}
@media (prefers-color-scheme: dark) {
.code-regexp,
.code-symbol,
.code-variable,
.code-template-variable,
.code-selector-attr,
.code-operator,
.code-selector-pseudo {
color: var(--ads-code-meta-color-dark);
}
}
.code-literal {
color: var(--ads-code-literal-color);
}
@media (prefers-color-scheme: dark) {
.code-literal {
color: var(--ads-code-literal-color-dark);
}
}
.code-meta {
color: var(--ads-code-meta-color);
}
@media (prefers-color-scheme: dark) {
.code-meta {
color: var(--ads-code-meta-color-dark);
}
}
.code-built_in,
.code-bullet,
.code-code,
.code-addition {
color: var(--ads-code-buildin-color);
}
@media (prefers-color-scheme: dark) {
.code-built_in,
.code-bullet,
.code-code,
.code-addition {
color: var(--ads-code-buildin-color-dark);
}
}
pre {
color: var(--ads-code-color);
line-height: 1.45;
text-rendering: optimizeSpeed;
white-space: pre-wrap;
}
@media (prefers-color-scheme: dark) {
pre {
color: var(--ads-code-color-dark);
}
}
dfn {
font-style: italic;
}
em,
i {
font-style: italic;
line-height: inherit;
}
em em { /* em in em gets back to normal */
font-style: normal;
}
hr {
border: solid var(--ads-single-border-color);
border-width: 1px 0 0;
clear: both;
height: 0;
margin: 1.25em 0 1.1875em;
}
/*
The dark varian of mark is the same as the blight variant
So there is no definition for dark mode
*/
mark {
background-color: var(--ads-mark-background-color);
color: var(--ads-color);
}
p {
line-height: 1.5;
margin-bottom: 1em; /* rem is relative to the root definition in */
text-rendering: optimizeLegibility;
hanging-punctuation: first force-end; /* fb 26-04-02: activated for a better line wrap */
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 60%;
line-height: inherit;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img,
object[type^="image/"],
svg {
display: inline-block;
height: auto;
max-width: 100%;
vertical-align: middle;
}
img {
border: 0;
}
.image, .steminline {
display: inline-block; /* For proper PDF tagging */
}
/* FB: 14.11.2024: Format all inline images at the baseline */
.image img {
vertical-align: baseline;
}
object {
max-width: 100%;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
audio,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
/*** Standards for usage in classes ***/
.left {
float: left !important;
}
.right {
float: right !important;
}
.top {
float: top !important;
}
.bottom {
float: bottom !important;
}
.float-reference-page {
float-reference: page;
}
.float-reference-column {
float-reference: column;
}
.float-reference-inline {
float-reference: inline;
}
.float-reference-region {
float-reference: region;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-justify {
text-align: justify !important;
}
.hide {
display: none;
}
/*** Title-Definitions ***/
.subheader,
.subtitle,
.admonitionblock td.content > .title,
.audioblock > .title,
.exampleblock > .title,
.imageblock > .title,
.listingblock > .title,
.literalblock > .title,
.stemblock > .title,
.openblock > .title,
.paragraph > .title,
.quoteblock > .title,
table.tableblock > .title,
.verseblock > .title,
.videoblock > .title,
.dlist > .title,
.olist > .title,
.ulist > .title,
.qlist > .title,
.hdlist > .title {
line-height: 1.45;
color: var(--ads-headline-block-color);
font-weight: 400;
margin-top: 0;
margin-bottom: 0.25em;
}
@media (prefers-color-scheme: dark) {
.subheader,
.subtitle,
.admonitionblock td.content > .title,
.audioblock > .title,
.exampleblock > .title,
.imageblock > .title,
.listingblock > .title,
.literalblock > .title,
.stemblock > .title,
.openblock > .title,
.paragraph > .title,
.quoteblock > .title,
table.tableblock > .title,
.verseblock > .title,
.videoblock > .title,
.dlist > .title,
.olist > .title,
.ulist > .title,
.qlist > .title,
.hdlist > .title {
color: var(--ads-headline-block-color-dark);
}
}
.title + p { break-before: avoid; }
p aside {
font-size: 0.875em;
line-height: 1.35;
font-style: italic;
}
h1,
.subtitle,
h2,
h3,
#toctitle,
.sidebarblock > .content > .title,
h4,
h5,
h6 {
font-family: var(--ads-headline-font);
font-weight: 300;
font-style: normal;
color: var(--ads-headline-color);
text-rendering: optimizeLegibility;
margin-bottom: 0.5em;
word-spacing: -0.05em;
}
@media (prefers-color-scheme: dark) {
h1,
.subtitle,
h2,
h3,
#toctitle,
.sidebarblock > .content > .title,
h4,
h5,
h6 {
color: var(--ads-headline-color-dark);
}
}
h1 small,
h2 small,
h3 small,
#toctitle small,
.sidebarblock > .content > .title small,
h4 small,
h5 small,
h6 small {
color: var(--ads-headline-small-color);
line-height: 0;
}
@media (prefers-color-scheme: dark) {
h1 small,
h2 small,
h3 small,
#toctitle small,
.sidebarblock > .content > .title small,
h4 small,
h5 small,
h6 small {
color: var(--ads-headline-small-color-dark);
}
}
h1 {
font-size: 2.125em;
}
.subtitle {
font-size: 1.6875em;
}
h2 {
font-size: 1.6875em;
}
h3,
#toctitle,
.sidebarblock > .content > .title {
font-size: 1.375em;
}
h4,
h5 {
font-size: 1.125em;
}
h6 {
font-size: 1em;
}
ul,
ol,
dl {
line-height: 1.6;
margin-bottom: 1.25em;
list-style-position: outside;
}
ul,
ol {
margin-left: 1.5em;
}
ul li ul,
ul li ol {
margin-left: 1.25em;
margin-bottom: 0;
}
ul.square li ul,
ul.circle li ul,
ul.disc li ul {
list-style: inherit;
}
ul.square {
list-style-type: square;
}
ul.circle {
list-style-type: circle;
}
ul.disc {
list-style-type: disc;
}
ol li ul,
ol li ol {
margin-left: 1.25em;
margin-bottom: 0;
}
dl dt {
margin-bottom: 0.3125em;
font-weight: bold;
}
dl dd {
margin-bottom: 1.25em;
margin-left: 1.125em;
}
blockquote {
margin: 0 0 1.25em;
padding: 0.5625em 1.25em 0 1.1875em;
border-left: 1px solid var(--ads-single-border-color);
}
blockquote,
blockquote p {
line-height: 1.6;
color: var(--ads-quote-color);
}
@media (prefers-color-scheme: dark) {
blockquote,
blockquote p {
color: var(--ads-quote-color-dark);
}
}
@media screen and (min-width: 768px) {
h1 {
font-size: 2.75em;
}
h2 {
font-size: 2.3125em;
}
h3,
#toctitle,
.sidebarblock > .content > .title {
font-size: 1.6875em;
}
h4 {
font-size: 1.4375em;
}
}
table {
background-color: var(--ads-table-background-color);
border: 1px solid var(--ads-single-border-color);
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 1.25em;
word-wrap: normal;
}
@media (prefers-color-scheme: dark) {
table {
background-color: var(--ads-table-background-color-dark);
}
}
table thead,
table tfoot {
background-color: var(--ads-table-head-background-color);
}
@media (prefers-color-scheme: dark) {
table thead,
table tfoot {
background-color: var(--ads-table-head-background-color-dark);
}
}
table thead tr th,
table thead tr td,
table tfoot tr th,
table tfoot tr td {
padding: 0.5em 0.625em 0.625em;
font-size: inherit;
color: var(--ads-color);
text-align: left;
}
@media (prefers-color-scheme: dark) {
table thead tr th,
table thead tr td,
table tfoot tr th,
table tfoot tr td {
color: var(--ads-color-dark);
}
}
table tr th,
table tr td {
padding: 0.5625em 0.625em;
font-size: inherit;
color: var(--ads-color);
}
@media (prefers-color-scheme: dark) {
table tr th,
table tr td {
color: var(--ads-color-dark);
}
}
table tr.even,
table tr.alt {
background-color: var(--ads-table-alternate-background-color);
}
@media (prefers-color-scheme: dark) {
table tr.even,
table tr.alt {
background-color: var(--ads-table-alternate-background-color-dark);
}
}
table thead tr th,
table tfoot tr th,
table tbody tr td,
table tr td,
table tfoot tr td {
line-height: 1.6;
}
h1 strong,
h2 strong,
h3 strong,
#toctitle strong,
.sidebarblock > .content > .title strong,
h4 strong,
h5 strong,
h6 strong {
font-weight: 400;
}
.center {
margin-left: auto;
margin-right: auto;
}
.stretch {
width: 100%;
}
.clearfix::before,
.clearfix::after,
.float-group::before,
.float-group::after {
content: "";
display: table;
}
.clearfix::after,
.float-group::after {
clear: both;
}
:not(pre).nobreak {
word-wrap: normal;
}
:not(pre).nowrap {
white-space: nowrap;
}
:not(pre).pre-wrap {
white-space: pre-wrap;
}
:not(pre):not([class^=L]) > code {
font-size: 0.9375em;
font-style: normal !important;
letter-spacing: 0;
padding: 0.1em 0.5em;
word-spacing: -0.15em;
background-color: var(--ads-pre-background-color);
border-radius: 4px;
line-height: 1.45;
text-rendering: optimizeSpeed;
}
@media (prefers-color-scheme: dark) {
:not(pre):not([class^=L]) > code {
background-color: var(--ads-pre-background-color-dark);
}
}
pre code,
pre pre {
color: inherit;
font-size: inherit;
line-height: inherit;
}
pre > code {
display: block;
}
pre.nowrap,
pre.nowrap pre {
white-space: pre;
word-wrap: normal;
}
.keyseq {
color: var(--ads-keyseq-color);
display: inline-block; /* For proper PDF tagging */
}
@media (prefers-color-scheme: dark) {
.keyseq {
color: var(--ads-keyseq-color-dark);
}
}
kbd {
display: inline-block;
color: var(--ads-kbd-color);
font-size: 0.65em;
line-height: 1.5;
background-color: var(--ads-kbd-background-color);
border: 1px solid var(--ads-kbd-border-color);
border-radius: 3px;
box-shadow: 0 1px 1px rgb(0 0 0 / 0.2), 0 0 0 0.1em white inset;
margin: 0 0.2em;
padding: 0.2em 0.5em;
vertical-align: middle;
position: relative;
top: -0.1em;
white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
kbd {
color: var(--ads-kbd-color-dark);
background-color: var(--ads-kbd-background-color-dark);
}
}
.keyseq kbd:first-child {
margin-left: 0;
}
.keyseq kbd:last-child {
margin-right: 0;
}
.menuseq,
.menuref {
color: var(--ads-menu-color);
}
@media (prefers-color-scheme: dark) {
.menuseq,
.menuref {
color: var(--ads-menu-color-dark);
}
}
.menuseq b:not(.caret),
.menuref {
font-weight: inherit;
}
.menuseq {
word-spacing: 0.1em; /* FB: Adjusted 2025/08/14 */
}
.menuseq b.caret {
font-size: 1.25em;
line-height: 0.8;
}
.menuseq i.caret {
font-weight: bold;
text-align: center;
width: 0.45em;
}
b.button::before,
b.button::after {
position: relative;
top: -1px;
font-weight: 400;
}
b.button::before {
content: "[";
padding: 0 3px 0 2px;
}
b.button::after {
content: "]";
padding: 0 2px 0 3px;
}
p a > code:hover {
color: var(--ads-color);
}
@media (prefers-color-scheme: dark) {
p a > code:hover {
color: var(--ads-color-dark);
}
}
body > div[id] {
margin: 0 auto;
max-width: 62.5em;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
width: 100%;
}
@media screen {
/* This original asciidoctor rule leads to empty PDF pages when paginating. Therefore we limited it to screen use only */
body > div[id]::before,
body > div[id]::after,
#content #footnotes::before {
content: "";
display: table;
clear: both;
}
}
#content {
margin-top: 1.25em;
margin-bottom: 0.625em;
}
#content::before {
content: none;
}
#header > h1:first-child {
color: var(--ads-title-color);
margin-top: 2.25rem;
margin-bottom: 0;
}
@media (prefers-color-scheme: dark) {
#header > h1:first-child {
color: var(--ads-title-color-dark);
}
}
#header > h1:first-child + .tocbase {
margin-top: 8px;
/* Removed by fb 2026-03-27: No border over the ToC
border-top: 1px solid var(--ads-single-border-color);
*/
}
#header > h1:only-child,
body.toc2 #header > h1:nth-last-child(2) {
/* Removed by fb 2026-03-27: No border under h1
border-bottom: 1px solid var(--ads-single-border-color);
*/
padding-bottom: 8px;
}
#header .details {
padding-top: 0.25em;
padding-bottom: 0.5em;
padding-left: 0.25em;
color: var(--ads-details-color);
display: block;
}
@media (prefers-color-scheme: dark) {
#header .details {
color: var(--ads-details-color-dark);
}
}
#header .details span:first-child {
margin-left: -0.125em;
}
#header .details span.email a {
color: var(--ads-details-color);
}
@media (prefers-color-scheme: dark) {
#header .details span.email a {
color: var(--ads-details-color-dark);
}
}
#header .details br {
display: none;
}
#header .details br + span::before {
content: none;
}
/* Bullet zwischen Name und E-Mail */
#header .details br + span.email::before {
content: "\00a0\2022\00a0";
}
/* Bullet vor dem Revisions-Kommentar */
#header .details br + span#revremark::before {
content: "\00a0\2022\00a0";
}
/* Zeilenumbruch vor Revisions-Infos, aber inline bleiben */
#header #revnumber::before {
content: "";
display: block;
margin-top: 0.5em;
}
#header #revnumber {
display: inline;
text-transform: capitalize;
}
#header #revnumber::after {
content: "\00a0";
}
#content > h1:first-child:not([class]) {
color: var(--ads-details-color);
border-bottom: 1px solid var(--ads-single-border-color);
padding-bottom: 8px;
margin-top: 0;
padding-top: 1rem;
margin-bottom: 1.25rem;
}
@media (prefers-color-scheme: dark) {
#content > h1:first-child:not([class]) {
color: var(--ads-details-color-dark);
}
}
.tocbase {
margin-top: 1em; /* FB: added more space between the header details and TOC */
/* border-bottom: 1px solid var(--ads-toc-border-color); */
padding-bottom: 0.5em;
}
.tocbase > ul {
margin-left: 0.125em;
}
.tocbase ul.sectlevel0 > li > a {
font-style: italic;
}
.tocbase ul.sectlevel0 ul.sectlevel1 {
margin: 0.5em 0;
}
.tocbase ul {
font-family: var(--ads-toc-font);
list-style-type: none;
}
.tocbase li {
line-height: 1.3334;
margin-top: 0.3334em;
}
.tocbase a {
text-decoration: none;
}
.tocbase a:active {
text-decoration: underline;
}
#toctitle {
color: var(--ads-headline-block-color);
font-size: 1.2em;
}
@media (prefers-color-scheme: dark) {
#toctitle {
color: var(--ads-headline-block-color-dark);
}
}
@media screen and (min-width: 768px) {
#toctitle {
font-size: 1.375em;
}
body.toc2 {
padding-left: 15em;
padding-right: 0;
}
.tocbase.toc2 {
margin-top: 0 !important;
background-color: var(--ads-toc2-background-color);
position: fixed;
width: 15em;
left: 0;
top: 0;
border-right: 1px solid var(--ads-toc-border-color);
border-top-width: 0 !important;
border-bottom-width: 0 !important;
z-index: 1000;
padding: 1.25em 1em;
height: 100%;
overflow: auto;
}
@media (prefers-color-scheme: dark) {
.tocbase.toc2 {
background-color: var(--ads-background-toc2-color-dark);
}
}
.tocbase.toc2 #toctitle {
margin-top: 0;
margin-bottom: 0.8rem;
font-size: 1.2em;
}
.tocbase.toc2 > ul {
font-size: 0.9em;
margin-bottom: 0;
}
.tocbase.toc2 ul ul {
margin-left: 0;
padding-left: 1em;
}
.tocbase.toc2 ul.sectlevel0 ul.sectlevel1 {
padding-left: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
body.toc2.toc-right {
padding-left: 0;
padding-right: 15em;
}
body.toc2.toc-right .tocbase.toc2 {
border-right-width: 0;
border-left: 1px solid #e7e7e9;
left: auto;
right: 0;
}
}
@media screen and (min-width: 1280px) {
body.toc2 {
padding-left: 20em;
padding-right: 0;
}
.tocbase.toc2 {
width: 20em;
}
.tocbase.toc2 #toctitle {
font-size: 1.375em;
}
.tocbase.toc2 > ul {
font-size: 0.95em;
}
.tocbase.toc2 ul ul {
padding-left: 1.25em;
}
body.toc2.toc-right {
padding-left: 0;
padding-right: 20em;
}
}
#content .tocbase {
border: 0; /* No Border: 1px solid var(--ads-single-border-color) */
margin-bottom: 1.25em;
padding: 1.25em;
background-color: var(--ads-background-toc-color);
border-radius: 4px;
}
@media (prefers-color-scheme: dark) {
#content .tocbase {
background-color: var(--ads-background-toc-color-dark);
}
}
#content .tocbase > :first-child {
margin-top: 0;
}
#content .tocbase > :last-child {
margin-bottom: 0;
}
#footer {
max-width: none;
background-color: var(--ads-footer-background-color);
padding: 1.25em;
}
@media (prefers-color-scheme: dark) {
#footer {
background-color: var(--ads-footer-background-color-dark);
}
}
#footer-text {
color: var(--ads-color-dark); /* Use the dark color as the inverted color */
line-height: 1.44;
}
@media (prefers-color-scheme: dark) {
#footer-text {
color: var(--ads-color-dark); /* Use the light color as the inverted color */
}
}
.sect1 {
padding-bottom: 0.625em;
}
@media screen and (min-width: 768px) {
#content {
margin-bottom: 1.25em;
}
.sect1 {
padding-bottom: 1.25em;
}
}
.sect1:last-child {
padding-bottom: 0;
}
/* FB: Temporarily deactivated
.sect1 + .sect1 {
border-top: 1px solid #e7e7e9;
}
*/
#content h1 > a.anchor,
h2 > a.anchor,
h3 > a.anchor,
#toctitle > a.anchor,
.sidebarblock > .content > .title > a.anchor,
h4 > a.anchor,
h5 > a.anchor,
h6 > a.anchor {
position: absolute;
z-index: 1001;
width: 1.5em;
margin-left: -1.5em;
display: block;
text-decoration: none !important;
visibility: hidden;
text-align: center;
font-weight: 400;
}
#content h1 > a.anchor::before,
h2 > a.anchor::before,
h3 > a.anchor::before,
#toctitle > a.anchor::before,
.sidebarblock > .content > .title > a.anchor::before,
h4 > a.anchor::before,
h5 > a.anchor::before,
h6 > a.anchor::before {
content: "\00A7";
font-size: 0.85em;
display: block;
padding-top: 0.1em;
}
#content h1:hover > a.anchor,
#content h1 > a.anchor:hover,
h2:hover > a.anchor,
h2 > a.anchor:hover,
h3:hover > a.anchor,
#toctitle:hover > a.anchor,
.sidebarblock > .content > .title:hover > a.anchor,
h3 > a.anchor:hover,
#toctitle > a.anchor:hover,
.sidebarblock > .content > .title > a.anchor:hover,
h4:hover > a.anchor,
h4 > a.anchor:hover,
h5:hover > a.anchor,
h5 > a.anchor:hover,
h6:hover > a.anchor,
h6 > a.anchor:hover {
visibility: visible;
}
#content h1 > a.link,
h2 > a.link,
h3 > a.link,
#toctitle > a.link,
.sidebarblock > .content > .title > a.link,
h4 > a.link,
h5 > a.link,
h6 > a.link {
color: var(--ads-headline-color);
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
#content h1 > a.link,
h2 > a.link,
h3 > a.link,
#toctitle > a.link,
.sidebarblock > .content > .title > a.link,
h4 > a.link,
h5 > a.link,
h6 > a.link {
color: var(--ads-headline-color-dark);
}
}
#content h1 > a.link:hover,
h2 > a.link:hover,
h3 > a.link:hover,
#toctitle > a.link:hover,
.sidebarblock > .content > .title > a.link:hover,
h4 > a.link:hover,
h5 > a.link:hover,
h6 > a.link:hover {
color: var(--ads-a-hover-color);
}
@media (prefers-color-scheme: dark) {
#content h1 > a.link:hover,
h2 > a.link:hover,
h3 > a.link:hover,
#toctitle > a.link:hover,
.sidebarblock > .content > .title > a.link:hover,
h4 > a.link:hover,
h5 > a.link:hover,
h6 > a.link:hover {
color: var(--ads-a-hover-color-dark);
}
}
details,
.audioblock,
.imageblock,
.literalblock,
.listingblock,
.stemblock,
.videoblock {
margin-bottom: 1.25em;
}
details {
margin-left: 1.25rem;
}
details > summary {
cursor: pointer;
display: block;
position: relative;
line-height: 1.6;
margin-bottom: 0.625rem;
outline: none;
-webkit-tap-highlight-color: transparent;
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::before {
content: "";
border: solid transparent;
border-left-color: currentColor; /* Use the color from the parent object */
border-width: 0.3em 0 0.3em 0.5em;
position: absolute;
top: 0.5em;
left: -1.25rem;
transform: translateX(15%);
}
details[open] > summary::before {
border: solid transparent;
border-top-color: currentColor; /* Use the color from the parent object */
border-width: 0.5em 0.3em 0;
transform: translateY(15%);
}
details > summary::after {
content: "";
width: 1.25rem;
height: 1em;
position: absolute;
top: 0.3em;
left: -1.25rem;
}
.admonitionblock td.content > .title,
.audioblock > .title,
.exampleblock > .title,
.imageblock > .title,
.listingblock > .title,
.literalblock > .title,
.stemblock > .title,
.openblock > .title,
.paragraph > .title,
.quoteblock > .title,
table.tableblock > .title,
.verseblock > .title,
.videoblock > .title,
.dlist > .title,
.olist > .title,
.ulist > .title,
.qlist > .title,
.hdlist > .title {
text-rendering: optimizeLegibility;
text-align: left;
font-family: var(--ads-headline-font);
font-size: 1rem;
font-style: italic;
}
table.tableblock.fit-content > caption.title {
white-space: nowrap;
width: 0;
}
.paragraph.lead > p,
#preamble > .sectionbody > [class=paragraph]:first-of-type p {
font-size: 1.15em; /* .lead should be 15% bigger than the normal font */
line-height: 1.6;
color: var(--ads-details-color);
}
@media (prefers-color-scheme: dark) {
.paragraph.lead > p,
#preamble > .sectionbody > [class=paragraph]:first-of-type p {
color: var(--ads-details-color-dark);
}
}
/* fb: Added a few non typical but useful text formats to the basis. */
.allcaps {
text-transform: uppercase;
}
.smallcaps {
font-variant: small-caps;
}
.more-spacing {
letter-spacing: 0.05em;
}
.less-spacing {
letter-spacing: -0.05em;
}
.admonitionblock > table {
border-collapse: separate;
border: 0;
background-color: var(--ads-admonitionblock-background-color);
width: 100%;
}
@media (prefers-color-scheme: dark) {
.admonitionblock > table {
background-color: var(--ads-admonitionblock-background-color-dark);
}
}
.admonitionblock > table td.icon {
text-align: center;
width: 80px;
font-weight: normal;
}
.admonitionblock > table td.icon img {
max-width: none;
}
.admonitionblock > table td.icon .title {
font-weight: 600;
font-family: var(--ads-headline-font);
text-transform: uppercase;
}
.admonitionblock > table td.content {
padding-left: 1.125em;
padding-right: 1.25em;
border-left: 1px solid var(--ads-single-border-color);
color: var(--ads-color);
word-wrap: anywhere;
}
@media (prefers-color-scheme: dark) {
.admonitionblock > table td.content {
color: var(--ads-color-dark);
}
}
.admonitionblock > table td.content > :last-child > :last-child {
margin-bottom: 0;
}
.exampleblock > .content {
border: 1px solid var(--ads-single-border-color);
margin-bottom: 1.25em;
padding: 1.25em;
background-color: var(--ads-background-exampleblock-color);
border-radius: 4px;
box-shadow: 0 1px 4px #e0e0dc;
}
@media (prefers-color-scheme: dark) {
.exampleblock > .content {
background-color: var(--ads-background-exampleblock-color-dark);
}
}
.exampleblock > .content > :first-child {
margin-top: 0;
}
.exampleblock > .content > :last-child {
margin-bottom: 0;
}
.sidebarblock {
border: 1px solid var(--ads-single-border-color);
margin-bottom: 1.25em;
padding: 1.25em;
background-color: var(--ads-sidebar-background-color);
border-radius: 4px;
}
@media (prefers-color-scheme: dark) {
.sidebarblock {
background-color: var(--ads-sidebar-background-color-dark);
}
}
.sidebarblock > :first-child {
margin-top: 0;
}
.sidebarblock > :last-child {
margin-bottom: 0;
}
.sidebarblock > .content > .title {
color: var(--ads-headline-block-color);
margin-top: 0;
text-align: center;
}
@media (prefers-color-scheme: dark) {
.sidebarblock > .content > .title {
color: var(--ads-headline-block-color-dark);
}
}
.exampleblock > .content > :last-child > :last-child,
.exampleblock > .content .olist > ol > li:last-child > :last-child,
.exampleblock > .content .ulist > ul > li:last-child > :last-child,
.exampleblock > .content .qlist > ol > li:last-child > :last-child,
.sidebarblock > .content > :last-child > :last-child,
.sidebarblock > .content .olist > ol > li:last-child > :last-child,
.sidebarblock > .content .ulist > ul > li:last-child > :last-child,
.sidebarblock > .content .qlist > ol > li:last-child > :last-child {
margin-bottom: 0;
}
.literalblock pre,
.listingblock > .content > pre {
border-radius: 4px;
overflow-x: auto;
padding: 1em;
font-size: 0.8125em;
}
@media screen and (min-width: 768px) {
.literalblock pre,
.listingblock > .content > pre {
font-size: 0.90625em;
}
}
@media screen and (min-width: 1280px) {
.literalblock pre,
.listingblock > .content > pre {
font-size: 1em;
}
}
.literalblock pre,
.listingblock > .content > pre:not(.highlight),
.listingblock > .content > pre[class=highlight],
.listingblock > .content > pre[class^="highlight "] {
background-color: var(--ads-listingblock-background-color);
}
@media (prefers-color-scheme: dark) {
.literalblock pre,
.listingblock > .content > pre:not(.highlight),
.listingblock > .content > pre[class=highlight],
.listingblock > .content > pre[class^="highlight "] {
background-color: var(--ads-listingblock-background-color-dark);
}
}
.literalblock.output pre {
color: var(--ads-pre-color);
background-color: var(--ads-listingblock-background--color);
}
@media (prefers-color-scheme: dark) {
.literalblock.output pre {
color: var(--ads-pre-color-dark);
background-color: var(--ads-listingblock-background-color-dark);
}
}
.listingblock > .content {
position: relative;
}
.listingblock code[data-lang]::before {
display: none;
content: attr(data-lang);
position: absolute;
font-size: 0.75em;
top: 0.425rem;
right: 0.5rem;
line-height: 1;
text-transform: uppercase;
color: inherit;
opacity: 0.5;
}
.listingblock:hover code[data-lang]::before {
display: block;
}
.listingblock.terminal pre .command::before {
content: attr(data-prompt);
padding-right: 0.5em;
color: inherit;
opacity: 0.5;
}
.listingblock.terminal pre .command:not([data-prompt])::before {
content: "$";
}
.listingblock pre.highlightjs {
padding: 0;
}
.listingblock pre.highlightjs > code {
padding: 1em;
border-radius: 4px;
}
.listingblock pre.prettyprint {
border-width: 0;
}
.prettyprint {
background-color: var(--ads-prettyprint-background-color);
}
@media (prefers-color-scheme: dark) {
.prettyprint {
background-color: var(--ads-prettyprint-background-color-dark);
}
}
pre.prettyprint .linenums {
line-height: 1.45;
margin-left: 2em;
}
pre.prettyprint li {
background-color: var(--ads-prettyprint-list-background-color);
list-style-type: inherit;
padding-left: 0;
}
@media (prefers-color-scheme: dark) {
pre.prettyprint li {
background-color: var(--ads-prettyprint-list-background-color-dark);
}
}
pre.prettyprint li code[data-lang]::before {
opacity: 1;
}
pre.prettyprint li:not(:first-child) code[data-lang]::before {
display: none;
}
table.linenotable {
border-collapse: separate;
border: 0;
margin-bottom: 0;
background-color: var(--ads-linenotable-background-color);
}
@media (prefers-color-scheme: dark) {
table.linenotable {
background-color: var(--ads-linenotable-background-color-dark);
}
}
table.linenotable td[class] {
color: inherit;
vertical-align: top;
padding: 0;
line-height: inherit;
white-space: normal;
}
table.linenotable td.code {
padding-left: 0.75em;
}
table.linenotable td.linenos {
width: 0.01%;
}
table.linenotable td.linenos,
pre.pygments .linenos,
pre.rouge .linenos {
border-right: 1px solid;
opacity: 0.35;
padding-right: 0.5em;
user-select: none;
}
pre.pygments span.linenos,
pre.rouge span.linenos {
display: inline-block;
margin-right: 0.75em;
}
.quoteblock {
margin: 0 1em 1.25em 1.5em;
display: table;
}
.quoteblock:not(.excerpt) > .title {
margin-left: -1.5em;
margin-bottom: 0.75em;
}
.quoteblock blockquote,
.quoteblock p {
color: var(--ads-quote-color);
font-size: 1.15rem;
word-spacing: -0.05em;
line-height: 1.4;
font-style: italic;
text-align: justify;
}
@media (prefers-color-scheme: dark) {
.quoteblock blockquote,
.quoteblock p {
color: var(--ads-quote-color-dark);
}
}
.quoteblock blockquote {
margin: 0;
padding: 0;
border: 0;
}
.quoteblock blockquote::before {
content: "\201c";
float: left;
font-size: 2.75em;
font-weight: bold;
line-height: 0.5em;
margin-left: -0.6em;
color: var(--ads-headline-block-color);
}
@media (prefers-color-scheme: dark) {
.quoteblock blockquote::before {
color: var(--ads-headline-block-color-dark);
}
}
.quoteblock blockquote > .paragraph:last-child p {
margin-bottom: 0;
}
.quoteblock .attribution {
margin-top: 0.75em;
margin-right: 0.5em;
text-align: right;
}
.verseblock {
margin: 0 1em 1.25em;
}
.verseblock pre {
font-family: var(--ads-body-font);
color: var(--ads-pre-color);
font-weight: normal;
}
@media (prefers-color-scheme: dark) {
.verseblock pre {
color: var(--ads-pre-color-dark);
}
}
.verseblock pre strong {
font-weight: normal;
}
.verseblock .attribution {
margin-top: 1.25rem;
margin-left: 0.5em;
}
.quoteblock .attribution,
.verseblock .attribution {
font-style: italic;
}
.quoteblock .attribution br,
.verseblock .attribution br {
display: none;
}
.quoteblock .attribution cite,
.verseblock .attribution cite {
display: block;
letter-spacing: -0.025em;
color: var(--ads-quote-color);
}
@media (prefers-color-scheme: dark) {
.quoteblock .attribution cite,
.verseblock .attribution cite {
color: var(--ads-quote-color-dark);
}
}
.quoteblock.abstract blockquote::before,
.quoteblock.excerpt blockquote::before,
.quoteblock .quoteblock blockquote::before {
display: none;
}
.quoteblock.abstract {
margin: 0 1em 1.25em;
display: block;
}
.quoteblock.abstract > .title {
margin: 0 0 0.375em;
font-size: 1.15em;
text-align: center;
}
.quoteblock.excerpt > blockquote,
.quoteblock .quoteblock {
padding: 0 0 0.25em 1em;
border-left: 0.25em solid var(--ads-single-border-color);
}
.quoteblock.excerpt,
.quoteblock .quoteblock {
margin-left: 0;
}
.quoteblock.excerpt blockquote,
.quoteblock.excerpt p,
.quoteblock .quoteblock blockquote,
.quoteblock .quoteblock p {
color: var(--ads-quote-color);
font-size: 1.0625rem;
}
.quoteblock.excerpt .attribution,
.quoteblock .attribution { /* Issue #572: I removed an additional .quoteblock */
color: inherit;
font-size: 0.85rem;
text-align: left;
margin-right: 2em;
margin-left: 1em; /* Issue #572: added a left margin */
}
p.tableblock:last-child {
margin-bottom: 0;
}
td.tableblock > .content {
margin-bottom: 1.25em;
word-wrap: anywhere;
}
td.tableblock > .content > :last-child {
margin-bottom: -1.25em;
}
table.tableblock,
th.tableblock,
td.tableblock {
border: 0 solid var(--ads-table-border-color);
}
table.grid-all > * > tr > * {
border-width: 1px;
}
table.grid-cols > * > tr > * {
border-width: 0 1px; /* For: Top+Bottom Left+Right*/
}
table.grid-rows > * > tr > * {
border-width: 1px 0;
}
table.frame-all {
border-width: 1px;
}
table.frame-ends {
border-width: 1px 0;
}
table.frame-sides {
border-width: 0 1px;
}
table.frame-none > colgroup + * > :first-child > *,
table.frame-sides > colgroup + * > :first-child > * {
border-top-width: 0;
}
table.frame-none > :last-child > :last-child > *,
table.frame-sides > :last-child > :last-child > * {
border-bottom-width: 0;
}
table.frame-none > * > tr > :first-child,
table.frame-ends > * > tr > :first-child {
border-left-width: 0;
}
table.frame-none > * > tr > :last-child,
table.frame-ends > * > tr > :last-child {
border-right-width: 0;
}
table.stripes-all > * > tr,
table.stripes-odd > * > tr:nth-of-type(odd),
table.stripes-even > * > tr:nth-of-type(even),
table.stripes-hover > * > tr:hover {
background-color: var(--ads-table-stripes-background-color);
}
@media (prefers-color-scheme: dark) {
table.stripes-all > * > tr,
table.stripes-odd > * > tr:nth-of-type(odd),
table.stripes-even > * > tr:nth-of-type(even),
table.stripes-hover > * > tr:hover {
background-color: var(--ads-table-stripes-background-color-dark);
}
}
th.halign-left,
td.halign-left {
text-align: left;
}
th.halign-right,
td.halign-right {
text-align: right;
}
th.halign-center,
td.halign-center {
text-align: center;
}
th.valign-top,
td.valign-top {
vertical-align: top;
}
th.valign-bottom,
td.valign-bottom {
vertical-align: bottom;
}
th.valign-middle,
td.valign-middle {
vertical-align: middle;
}
table thead th,
table tfoot th {
font-weight: bold;
}
tbody tr th {
background-color: var(--ads-background-table-head-color);
}
@media (prefers-color-scheme: dark) {
tbody tr th {
background-color: var(--ads-background-table-head-color-dark);
}
}
tbody tr th,
tbody tr th p,
tfoot tr th,
tfoot tr th p {
color: var(--ads-color);
font-weight: bold;
}
@media (prefers-color-scheme: dark) {
tbody tr th,
tbody tr th p,
tfoot tr th,
tfoot tr th p {
color: var(--ads-color-dark);
}
}
p.tableblock > code:only-child {
background-color: var(--ads-background-linenotable-color);
padding: 0;
}
@media (prefers-color-scheme: dark) {
p.tableblock > code:only-child {
background-color: var(--ads-background-linenotable-color-dark);
}
}
p.tableblock {
font-size: 1em;
}
ul li ol {
margin-left: 1.5em;
}
dl dd:last-child,
dl dd:last-child > :last-child {
margin-bottom: 0;
}
li p,
ul dd,
ol dd,
.olist .olist,
.ulist .ulist,
.ulist .olist,
.olist .ulist {
margin-bottom: 0.625em;
}
ul.checklist,
ul.none,
ol.none,
ul.no-bullet,
ol.no-bullet,
ol.unnumbered,
ul.unstyled,
ol.unstyled {
list-style-type: none;
}
ul.no-bullet,
ol.no-bullet,
ol.unnumbered {
margin-left: 0.625em;
}
ul.unstyled,
ol.unstyled {
margin-left: 0;
}
li > p:empty:only-child::before {
content: "";
display: inline-block;
}
ul.checklist > li > p:first-child {
margin-left: -1em;
}
ul.checklist > li > p:first-child > .fa-square-o:first-child,
ul.checklist > li > p:first-child > .fa-check-square-o:first-child {
width: 1.25em;
font-size: 0.8em;
position: relative;
bottom: 0.125em;
}
ul.checklist > li > p:first-child > input[type=checkbox]:first-child {
font: inherit;
margin: 0 0.25em 0 0;
padding: 0;
}
ul.inline {
display: flex;
flex-flow: row wrap;
list-style: none;
margin: 0 0 0.625em -1.25em;
}
ul.inline > li {
margin-left: 1.25em;
}
.unstyled dl dt {
font-weight: 400;
font-style: normal;
}
ol.arabic {
list-style-type: decimal;
}
ol.decimal {
list-style-type: decimal-leading-zero;
}
ol.loweralpha {
list-style-type: lower-alpha;
}
ol.upperalpha {
list-style-type: upper-alpha;
}
ol.lowerroman {
list-style-type: lower-roman;
}
ol.upperroman {
list-style-type: upper-roman;
}
ol.lowergreek {
list-style-type: lower-greek;
}
.hdlist > table,
.colist > table {
border: 0;
background-color: var(--ads-background-linenotable-color);
}
@media (prefers-color-scheme: dark) {
.hdlist > table,
.colist > table {
background-color: var(--ads-background-linenotable-color-dark);
}
}
.hdlist > table > tbody > tr,
.colist > table > tbody > tr {
background-color: var(--ads-background-linenotable-color);
}
@media (prefers-color-scheme: dark) {
.hdlist > table > tbody > tr,
.colist > table > tbody > tr {
background-color: var(--ads-background-linenotable-color-dark);
}
}
td.hdlist1,
td.hdlist2 {
vertical-align: top;
padding: 0 0.625em;
}
td.hdlist1 > p,
td.hdlist2 > p {
margin-bottom: 0;
}
td.hdlist1 {
color: var(--ads-headline-color);
font-weight: bold;
padding-bottom: 0.25em;
}
td.hdlist2 {
word-wrap: anywhere;
}
.literalblock + .colist,
.listingblock + .colist {
margin-top: -0.5em;
}
.colist td:not([class]):first-child {
padding: 0.4em 0.75em 0;
line-height: 1;
vertical-align: top;
}
.colist td:not([class]):first-child img {
max-width: none;
}
.colist td:not([class]):last-child {
padding: 0.25em 0;
}
.thumb,
.th {
line-height: 0;
display: inline-block;
border: 4px solid #fff;
box-shadow: 0 0 0 1px #ddd;
}
.imageblock.left {
margin: 0.25em 0.625em 0.25em 0;
}
.imageblock.right {
margin: 0.25em 0 0.25em 0.625em;
}
.imageblock > .title {
margin-bottom: 0;
}
.imageblock.thumb,
.imageblock.th {
border-width: 6px;
}
.imageblock.thumb > .title,
.imageblock.th > .title {
padding: 0 0.125em;
}
.image.left,
.image.right {
margin-top: 0.25em;
margin-bottom: 0.25em;
display: inline-block;
line-height: 0;
}
.image.left {
margin-right: 0.625em;
}
.image.right {
margin-left: 0.625em;
}
a.image {
text-decoration: none;
display: inline-block;
}
a.image object {
pointer-events: none;
}
sup.footnote,
sup.footnoteref {
font-size: 0.875em;
position: static;
vertical-align: super;
margin-left: 0.1em;
}
sup.endnote,
sup.endnoteref {
/* We want endnotes to appear on the same baseline as the regular text, therefore
we need to undo the styling induced by the sup element.*/
vertical-align: baseline;
font-size: 100%;
top: unset;
}
sup.footnote a,
sup.footnoteref a,
sup.endnote a,
sup.endnoteref a {
text-decoration: none;
}
sup.footnote a:active,
sup.footnoteref a:active,
sup.endnote a:active,
sup.endnoteref a:active {
text-decoration: underline;
}
#footnotes,
#endnotes {
padding-top: 0.75em;
padding-bottom: 0.75em;
margin-bottom: 0.625em;
}
#footnotes hr,
#endnotes hr {
width: 20%;
min-width: 6.25em;
margin: -0.25em 0 0.75em;
border-width: 1px 0 0;
}
#footnotes .footnote,
#endnotes .endnote {
padding: 0 0.375em 0 0.225em;
line-height: 1.3334;
font-size: 0.875em;
margin-left: 1.2em;
margin-bottom: 0.2em;
}
#footnotes .footnote,
#endnotes .endnote {
margin-left: 0em;
}
#footnotes .footnote a:first-of-type,
#endnotes .endnote a:first-of-type {
font-weight: bold;
text-decoration: none;
}
#footnotes .footnote:last-of-type,
#endnotes .endnote:last-of-type {
margin-bottom: 0;
}
#content #footnotes,
#content #endnotes {
margin-top: -0.625em;
margin-bottom: 0;
padding: 0.75em 0;
}
div.page-break {
display: none;
}
div.unbreakable {
page-break-inside: avoid;
}
.big {
font-size: larger;
}
.small {
font-size: smaller;
}
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.thin-border {
border: thin solid var(--ads-border-color);
}
.thick-border {
border: thick solid var(--ads-border-color);
}
/*******************************************************************
Standard color usage: the classes are each for light and dark mode.
********************************************************************/
.aqua {
color: var(--ads-aqua-color);
}
@media (prefers-color-scheme: dark) {
.aqua {
color: var(--ads-aqua-color-dark);
}
}
.aqua-background {
background-color: var(--ads-aqua-background-color);
}
@media (prefers-color-scheme: dark) {
.aqua-background {
background-color: var(--ads-aqua-background-color-dark);
}
}
.black {
color: var(--ads-black-color);
}
@media (prefers-color-scheme: dark) {
.black {
color: var(--ads-black-color-dark);
}
}
.black-background {
background-color: var(--ads-black-background-color);
}
@media (prefers-color-scheme: dark) {
.black-background {
background-color: var(--ads-black-background-color-dark);
}
}
.blue {
color: var(--ads-blue-color);
}
@media (prefers-color-scheme: dark) {
.blue {
color: var(--ads-blue-color-dark);
}
}
.blue-background {
background-color: var(--ads-blue-background-color);
}
@media (prefers-color-scheme: dark) {
.blue-background {
background-color: var(--ads-blue-background-color-dark);
}
}
.fuchsia {
color: var(--ads-fuchsia-color);
}
@media (prefers-color-scheme: dark) {
.fuchsia {
color: var(--ads-fuchsia-color-dark);
}
}
.fuchsia-background {
background-color: var(--ads-fuchsia-background-color);
}
@media (prefers-color-scheme: dark) {
.fuchsia-background {
background-color: var(--ads-fuchsia-background-color-dark);
}
}
.gray {
color: var(--ads-gray-color);
}
@media (prefers-color-scheme: dark) {
.gray {
color: var(--ads-gray-color-dark);
}
}
.gray-background {
background-color: var(--ads-gray-background-color);
}
@media (prefers-color-scheme: dark) {
.gray-background {
background-color: var(--ads-gray-background-color-dark);
}
}
.green {
color: var(--ads-green-color);
}
@media (prefers-color-scheme: dark) {
.green {
color: var(--ads-green-color-dark);
}
}
.green-background {
background-color: var(--ads-green-background-color);
}
@media (prefers-color-scheme: dark) {
.green-background {
background-color: var(--ads-green-background-color-dark);
}
}
.lime {
color: var(--ads-lime-color);
}
@media (prefers-color-scheme: dark) {
.lime {
color: var(--ads-lime-color-dark);
}
}
.lime-background {
background-color: var(--ads-lime-background-color);
}
@media (prefers-color-scheme: dark) {
.lime-background {
background-color: var(--ads-lime-background-color-dark);
}
}
.maroon {
color: var(--ads-maroon-color);
}
@media (prefers-color-scheme: dark) {
.maroon {
color: var(--ads-maroon-color-dark);
}
}
.maroon-background {
background-color: var(--ads-maroon-background-color);
}
@media (prefers-color-scheme: dark) {
.maroon-background {
background-color: var(--ads-maroon-background-color-dark);
}
}
.navy {
color: var(--ads-navy-color);
}
@media (prefers-color-scheme: dark) {
.navy {
color: var(--ads-navy-color-dark);
}
}
.navy-background {
background-color: var(--ads-navy-background-color);
}
@media (prefers-color-scheme: dark) {
.navy-background {
background-color: var(--ads-navy-background-color-dark);
}
}
.olive {
color: var(--ads-olive-color);
}
@media (prefers-color-scheme: dark) {
.olive {
color: var(--ads-olive-color-dark);
}
}
.olive-background {
background-color: var(--ads-olive-background-color);
}
@media (prefers-color-scheme: dark) {
.olive-background {
background-color: var(--ads-olive-background-color-dark);
}
}
.orange {
color: var(--ads-orange-color);
}
@media (prefers-color-scheme: dark) {
.orange {
color: var(--ads-orange-color-dark);
}
}
.orange-background {
background-color: var(--ads-orange-background-color);
}
@media (prefers-color-scheme: dark) {
.orange-background {
background-color: var(--ads-orange-background-color-dark);
}
}
.purple {
color: var(--ads-purple-color);
}
@media (prefers-color-scheme: dark) {
.purple {
color: var(--ads-purple-color-dark);
}
}
.purple-background {
background-color: var(--ads-purple-background-color);
}
@media (prefers-color-scheme: dark) {
.purple-background {
background-color: var(--ads-purple-background-color-dark);
}
}
.red {
color: var(--ads-red-color);
}
@media (prefers-color-scheme: dark) {
.red {
color: var(--ads-red-color-dark);
}
}
.red-background {
background-color: var(--ads-red-background-color);
}
@media (prefers-color-scheme: dark) {
.red-background {
background-color: var(--ads-red-background-color-dark);
}
}
.silver {
color: var(--ads-silver-color);
}
@media (prefers-color-scheme: dark) {
.silver {
color: var(--ads-silver-color-dark);
}
}
.silver-background {
background-color: var(--ads-silver-background-color);
}
@media (prefers-color-scheme: dark) {
.silver-background {
background-color: var(--ads-silver-background-color-dark);
}
}
.teal {
color: var(--ads-teal-color);
}
@media (prefers-color-scheme: dark) {
.teal {
color: var(--ads-teal-color-dark);
}
}
.teal-background {
background-color: var(--ads-teal-background-color);
}
@media (prefers-color-scheme: dark) {
.teal-background {
background-color: var(--ads-teal-background-color-dark);
}
}
.white {
color: var(--ads-white-color);
}
@media (prefers-color-scheme: dark) {
.white {
color: var(--ads-white-color-dark);
}
}
.white-background {
background-color: var(--ads-white-background-color);
}
@media (prefers-color-scheme: dark) {
.white-background {
background-color: var(--ads-white-background-color-dark);
}
}
.yellow {
color: var(--ads-yellow-color);
}
@media (prefers-color-scheme: dark) {
.yellow {
color: var(--ads-yellow-color-dark);
}
}
.yellow-background {
background-color: var(--ads-yellow-background-color);
}
@media (prefers-color-scheme: dark) {
.yellow-background {
background-color: var(--ads-yellow-background-color-dark);
}
}
span.icon > .fa {
cursor: default;
}
a span.icon > .fa {
cursor: inherit;
}
/*******************************************************************
The Admonitions as Standard Text or only Icons
********************************************************************/
.admonitionblock td.icon [class^="fa icon-"] {
font-size: 2.5em; /* The size of the icon if displayed */
cursor: default;
}
.admonitionblock td.icon .icon-note::before {
content: "\f05a"; /* The font icon for NOTE */
color: var(--ads-note-color);
}
.admonitionblock td.icon .icon-tip::before {
content: "\f0eb"; /* The font icon for TIP */
color: var(--ads-tip-color);
}
.admonitionblock td.icon .icon-warning::before {
content: "\f071"; /* The font icon for WARNING */
color: var(--ads-warning-color);
}
.admonitionblock td.icon .icon-caution::before {
content: "\f06d"; /* The font icon for CAUTION */
color: var(--ads-caution-color);
}
.admonitionblock td.icon .icon-important::before {
content: "\f06a"; /* The font icon for IMPRTDANT */
color: var(--ads-important-color);
}
/***********************************************************************************
To control the style of callout numbers inside verbatim blocks and in callout lists.
************************************************************************************/
.conum[data-value] {
display: inline-block;
color: #fff !important;
background-color: var(--ads-footer-background-color);
border-radius: 50%;
text-align: center;
font-size: 0.85em;
width: 1.67em;
height: 1.67em;
line-height: 1.8;
font-family: var(--ads-body-font);
font-style: normal;
font-weight: bold;
}
@media (prefers-color-scheme: dark) {
.conum[data-value] {
background-color: var(--ads-footer-background-color-dark);
}
}
.conum[data-value] * {
color: #fff !important;
}
.conum[data-value] + b {
display: none;
}
.conum[data-value]::after {
content: attr(data-value);
}
pre .conum[data-value] {
position: relative;
top: -0.125em;
}
b.conum * {
color: inherit !important;
}
.conum:not([data-value]):empty {
display: none;
}
dt,
th.tableblock,
td.content,
div.footnote,
div.endnote {
text-rendering: optimizeLegibility;
}
h1,
h2,
p,
td.content,
span.alt,
summary {
letter-spacing: -0.01em;
}
p strong,
td.content strong,
div.footnote strong,
div.endnote strong {
letter-spacing: -0.005em;
}
/* I have no clue why Dan resized this!
This causes that every first paragraph in DL is bigger than the following.
Switched of by FB on 2025-01-09
p,
blockquote,
dt,
td.content,
span.alt,
summary {
font-size: 1.0625rem;
} */
.sidebarblock p,
.sidebarblock dt,
.sidebarblock td.content,
p.tableblock {
font-size: 1em;
}
.hyphens-none {
hyphens: none;
-webkit-hyphens: none;
}
.hyphens-auto {
hyphens: auto;
-webkit-hyphens: auto;
}
.hyphens-manual {
hyphens: manual;
-webkit-hyphens: manual;
}
/* SF Symbols */
.sf-1x {
font-size: 1em; }
.sf-2x {
font-size: 2em; }
.sf-3x {
font-size: 3em; }
.sf-4x {
font-size: 4em; }
.sf-5x {
font-size: 5em; }
.sf-6x {
font-size: 6em; }
.sf-7x {
font-size: 7em; }
.sf-8x {
font-size: 8em; }
.sf-9x {
font-size: 9em; }
.sf-10x {
font-size: 10em; }
.sf-xs {
font-size: 0.75em;
line-height: 0.08333em;
vertical-align: 0.125em; }
.sf-sm {
font-size: 0.875em;
line-height: 0.07143em;
vertical-align: 0.05357em; }
.sf-lg {
font-size: 1.25em;
line-height: 0.05em;
vertical-align: -0.075em; }
.sf-xl {
font-size: 1.5em;
line-height: 0.04167em;
vertical-align: -0.125em; }
.sf-fw {
text-align: center;
width: 1.25em; }
.sf-rotate-90 {
transform: rotate(90deg); }
.sf-rotate-180 {
transform: rotate(180deg); }
.sf-rotate-270 {
transform: rotate(270deg); }
.sf-flip-horizontal {
transform: scale(-1, 1); }
.sf-flip-vertical {
transform: scale(1, -1); }
.sf-flip-both,
.sf-flip-horizontal.fa-flip-vertical {
transform: scale(-1, -1); }
/***********************************************************************************
Printing
************************************************************************************/
/*** These rules apply for printing HTML AND PDF pagination inside adoc Studio ***/
@media print {
html {
font-size: 80%;
}
abbr[title] {
border-bottom: 1px dotted;
}
abbr[title]::after {
content: " (" attr(title) ")";
}
pre,
blockquote,
tr,
img,
object,
svg {
page-break-inside: avoid;
}
p,
blockquote,
dt,
td.content {
font-size: 1em; /* Resets the whole text to default based on their parents */
orphans: 3;
widows: 3;
}
h2,
h3,
#toctitle,
.sidebarblock > .content > .title {
page-break-after: avoid;
}
body > div[id] {
max-width: none;
}
.bottom-right {
background: none !important;
}
}
/*** These rules only apply for paginating PDFs inside adoc Studio ***/
@media vivliostyle {
body {
/* For PDF exports we don't apply the configured background color to the
body but to the whole page background. Therefore we need to reset the body
background-color back to transparent */
background-color: transparent;
}
@page {
size: var(--ads-page-size, A4 portrait); /* --ads-page-size transfers the set dimensions */
margin: var(--ads-page-margin, 2.5cm); /* to the print dialog of adoc Studio.*/
/* See comment for body background-color above */
background-color: var(--ads-background-color) !important;
}
@media (prefers-color-scheme: dark) {
@page {
/* See comment for body background-color above */
background-color: var(--ads-background-color-dark) !important;
}
}
/*
Named page types:
front-cover Appears at the beginning of the document, if activated by the
:front-cover-image: attribute. Is not included in the page count.
front-cover-counted Appears at the beginning of the document if activated by the
:front-cover-image: attribute AND :pagenums: attribute is set
to "cover". It is included in the page count.
title Appears at the beginning of the document after the optional front
cover page, but only if :title-page: attribute is set and
:pagenums: is NOT set to "cover" or "title". It is not included in
the page count.
title-counted Appears at the beginning of the document after the optional front
cover page, but only if :title-page: attribute is set and
:pagnums: is set to "cover" or "title". It is included in the
page count.
toc If :title-page: attribute is set and :toc: is active but not set
to :preamble:, the toc will appear on its own pages of this type
after the title page. They are not included in the page count.
toc-counted If :title-page: attribute is set and :toc: is active but not set
to :preamble:, the toc will appear on its own pages of this type.
after the title page. They are included in the page count.
preamble If :title-page: attribute is set and :toc: is set to "preamble",
the toc is put together with the preamble and behind it on its own
pages of this type after the title page. They are not included in
the page count.
preamble-counted If :title-page: attribute is set and :toc: is set to "preamble",
the toc is put together with the preamble and behind it on its own
pages of this type after the title page. They are included in
the page count.
body The regular document content is paginated on pages of this type if
:pagenums: is not set.
body-counted The regular document content is paginated on pages of this type if
:pagenums: is set to any value.
back-cover Appears at the end of the document, if activated by the
:back-cover-image: attribute.
*/
/* Store the text content of the document title element in the CSS content variable
"doctitle" so that it can be picked up in the @page rules below. */
h1 { string-set: doctitle content(text); }
/* Store the text content of the titles of level-1-sections in the CSS content variable
"section1-title" so that it can be picked up in the @page rules below. */
h2 { string-set: section1-title content(text); }
/* Put the doctitle on the top and the current first level section title on the
bottom of all left non-title and non-cover pages. */
@page toc:left,
toc-counted:left,
preamble:left,
preamble-counted:left,
body:left,
body-counted:left {
@top-left {
content: string(doctitle);
}
@bottom-right {
content: string(section1-title, first);
}
}
/* Put the doctitle on the top and the current first level section title on the
bottom of all right non-title and non-cover pages. */
@page toc:right,
toc-counted:right,
preamble:right,
preamble-counted:right,
body:right,
body-counted:right {
@top-right {
content: string(doctitle);
}
@bottom-left {
content: string(section1-title, first);
}
}
/* Define a shared counter for all page types which should take part in page numbering.
Note: The regular body pages also increment the counter even if they don't show it.
This is the default behaviour for having a toc with unset :pagenums: attribute.
(Which however does not make much sense in practice.) */
@page front-cover-counted,
title-counted,
toc-counted,
preamble-counted,
body-counted, body {
counter-increment: counted-page;
}
/* Put the counter on the bottom all left pages which should take part in page numbering */
@page title-counted:left,
toc-counted:left,
preamble-counted:left,
body-counted:left {
@bottom-left {
content: counter(counted-page);
}
}
/* Put the counter on the bottom all right pages that should take part in page numbering */
@page title-counted:right,
toc-counted:right,
preamble-counted:right,
body-counted:right {
@bottom-right {
content: counter(counted-page);
}
}
/* If a special page background is provided for all recto pages, use it, otherwise
fall back to the general page background. */
@page :recto {
background: var(--ads-page-background-recto, var(--ads-page-background));
}
/* If a special page background is provided for all verso pages, use it, otherwise
fall back to the general page background. */
@page :verso {
background: var(--ads-page-background-verso, var(--ads-page-background));
}
/* If a special page background is provided for the title page, use it, otherwise
fall back to the recto or general page background */
@page title, title-counted {
background: var(--ads-title-page-background, var(--ads-page-background-recto, var(--ads-page-background)));
}
/* The only purpose of front cover pages is to show a background image. */
@page front-cover, front-cover-counted {
background: var(--ads-front-cover);
}
/* The only purpose of back cover pages is to show a background image. */
@page back-cover {
background: var(--ads-back-cover);
}
body {
/* By default, all pages are assigned to the uncounted body content page type.
The rules below override this to assign special content to different page types. */
page: body;
/* To be able to use position:absolute to position the title-image logo relatively
to the body start, we need to switch the body position back to "static"", back
from "relative" which is the standard. Otherwise, the body can collapse on
the title page which messes with the positioning. */
position: static;
}
/* If any page numbering style is active, we overrule the rule above to put all
content on a counted page type. Rules below override this further to assign special
content to different page types. */
body[data-pagenums="cover"],
body[data-pagenums="title"],
body[data-pagenums="toc"],
body[data-pagenums="body"] {
page: body-counted;
}
/* When the :front-cover-image: attribute is set, an empty div with id #front-cover
is added as the first child of the body element. This rule makes sure it gets
assigned to its own page type which then shows the image as its background.
*/
#front-cover {
page: front-cover;
}
/* If the page numbering is set to include cover pages, the rule above is overruled
to assign the #front-cover div to a counted page type. */
body[data-pagenums="cover"] #front-cover {
page: front-cover-counted;
}
/* When the :back-cover-image: attribute is set, an empty div with id #back-cover
is added as the last child of the body element. This rule makes sure it gets
assigned to its own page type which then shows the image as its background */
#back-cover {
page: back-cover;
}
/* If the :title-page: attribute is set, all header content and the optional title
page logo are put onto its own page. */
body.title-page #header,
body.title-page .logo {
page: title;
}
/* If the page numbering is set to include cover or title pages, the rule above is
overruled to assign all header content to the counted title page type instead. */
body[data-pagenums="cover"].title-page #header,
body[data-pagenums="title"].title-page #header {
page: title-counted;
}
/* If the :title-page: attribute is set and :toc: is NOT set to "preamble" or "macro",
the toc is contained in the #header element and we assign it to its own page. */
body.title-page #header .toc {
page: toc;
}
/* If the page numbering is set to include cover, title or toc pages, the rule above is
overruled to assign the toc to the counted toc page type instead. */
body[data-pagenums="cover"].title-page #header .toc,
body[data-pagenums="title"].title-page #header .toc,
body[data-pagenums="toc"].title-page #header .toc {
page: toc-counted;
}
/* If the :title-page: attribute is set and :toc: is set to "preamble", the toc
is contained in the #preamble element. In this case the whole preamble is
assigned to its own page type together with the contained toc. */
body.title-page #preamble:has(.toc) {
page: preamble;
}
/* If the page numbering is set to include cover, title or toc pages, the rule above is
overruled to assign the preamble to the counted preamble page type instead. */
body[data-pagenums="cover"].title-page #preamble:has(.toc),
body[data-pagenums="title"].title-page #preamble:has(.toc),
body[data-pagenums="toc"].title-page #preamble:has(.toc) {
page: preamble-counted;
}
/* Show target page numbers for links in the toc and fill the gap between the link
text and the page number with dots. */
.tocbase a::after {
content: leader('.') target-counter(attr(href), counted-page);
}
#header {
font-size: 1.4em;
left: -0.5em;
padding-bottom: 1.2em;
}
/* Prevent an empty header from opening new pages */
#header:empty { display: none; }
body.title-page #header {
margin-top: 15pvh;
}
#header > h1:first-child {
font-size: 1.4em;
margin-bottom: 0.6em;
}
#header .details {
color: var(--ads-color);
display: inline;
}
#header #revnumber::before {
content: " – ";
}
/* Special formatting for book type PDFs to set a page break before a new part */
h1.sect0 {
break-before: page;
}
.partintro {
break-after: page;
}
/* defining special parts */
body[data-media="print"] .tocbase,
body[data-media="print"] .sidebarblock,
body[data-media="print"] .exampleblock > .content,
body[data-media="prepress"] .tocbase,
body[data-media="prepress"] .sidebarblock,
body[data-media="prepress"] .exampleblock > .content {
background: none !important;
}
body[data-media="print"] a[href^="http:"]:not(.bare)::after,
body[data-media="print"] a[href^="https:"]:not(.bare)::after,
body[data-media="prepress"] a[href^="http:"]:not(.bare)::after,
body[data-media="prepress"] a[href^="https:"]:not(.bare)::after {
content: "\00a0(" attr(href) ")";
display: inline-block;
font-size: 0.8em;
color: var(--ads-color);
}
.tocbase {
font-size: 85%;
margin-top: 3pvh;
}
/* Style the look of the separator between the page and the footnotes area */
@footnote ::before {
border-block-start-width: 1px;
border-block-start-style: solid;
border-block-start-color: var(--ads-single-border-color);
width: 20%;
min-width: 6.25em;
margin: -0.25em 0 0.75em;
}
html {
counter-reset: footnote;
}
/* Put paginated footnotes into the footnote region of the page and increment the counter. */
span.footnote {
float: footnote;
counter-increment: footnote;
font-size: 0.875rem;
font-weight: normal;
}
/* For explicit paginated footnotes, use the footnote counter as the call (inline in text)
and marker (in the page footnotes area)*/
span.footnote::footnote-call {
content: counter(footnote);
}
span.footnote::footnote-marker {
content: counter(footnote) ".";
}
/* For footnotes which don't carry own text but reference other footnotes via an id,
use the counter of the target element pointed to in the data-target attribute */
span.footnoteref::before {
content: target-counter(attr(data-target), footnote);
}
/* Define the look of the inline call part of explicit and referencing footnotes */
span.footnote::footnote-call, span.footnoteref::before {
font-size: 0.875em;
vertical-align: super;
display: inline;
line-height: 1;
text-indent: 0;
}
/* Define the look of the footnote marker before the footnote text in the footnote
region of the page. */
span.footnote::footnote-marker {
margin-right: 0.5em;
}
/* Here a few examples */
table thead,
table tfoot {
background-color: var(--ads-table-head-background-color);
}
table.stripes-all > * > tr,
table.stripes-odd > * > tr:nth-of-type(odd),
table.stripes-even > * > tr:nth-of-type(even),
table.stripes-hover > * > tr:hover {
background-color: var(--ads-table-stripes-background-color);
}
:not(pre):not([class^=L]) > code {
background-color: var(--ads-pre-background-color);
}
/* Vivliostyle-Fix: Bei border-collapse: collapse rendert Vivliostyle den äußeren
Tabellenrahmen nicht korrekt für den oberen und rechten Rand. Die erste Zeile
und die letzte Spalte verlieren ihre Außenrahmen. Hier werden sie explizit
über Zellrahmen gesetzt, damit der Rahmen im PDF korrekt erscheint. */
table.frame-all.tableblock > * > tr:first-child > th.tableblock:last-child,
table.frame-all.tableblock > * > tr:first-child > td.tableblock:last-child {
border-top: 1px solid var(--ads-table-border-color);
}
table.frame-all.tableblock > * > tr > th.tableblock:last-child,
table.frame-all.tableblock > * > tr > td.tableblock:last-child {
border-right: 1px solid var(--ads-table-border-color);
}
/* No orphan headline on one page and the definition on the other page */
dt {
break-after: avoid;
}
/* Overwrite the default settings 2+2 */
p {
orphans: 3;
widows: 2;
}
/* Moved from Manual style to support this in all styles */
.bottom-left {
break-before: page;
float: bottom;
float-reference: page;
text-align: left;
}
.bottom-right {
break-before: page;
float: bottom;
float-reference: page;
text-align: right;
}
.middle-center {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
}
/*** These rules are only for printing HTML documents and are NOT applied for PDF pagination ***/
@media print {
@media not vivliostyle {
* {
box-shadow: none !important;
text-shadow: none !important;
}
a {
color: inherit !important;
text-decoration: underline !important;
}
a.bare,
a[href^="#"],
a[href^="mailto:"] {
text-decoration: none !important;
}
a[href^="http:"]:not(.bare)::after,
a[href^="https:"]:not(.bare)::after {
content: "\00a0(" attr(href) ")"; /* Add a space between Text and Link */
display: inline-block;
font-size: 0.875em;
padding-left: 0.25em;
color: var(--ads-color);
}
thead {
display: table-header-group;
}
.tocbase {
border-bottom: 0 !important; /* removed: 1px solid var(--ads-single-border-color) */
padding-bottom: 0 !important;
}
.tocbase,
.sidebarblock,
.exampleblock > .content {
background: none !important;
}
body.book #header > h1:first-child {
border: 0 !important;
margin: 2.5em 0 1em;
}
body.book #header .details {
border: 0 !important;
display: block;
padding: 0 !important;
}
body.book #header .details span:first-child {
margin-left: 0 !important;
}
body.book #header .details br {
display: block;
}
body.book #header .details br + span::before {
content: none !important;
}
body.book .tocbase {
border: 0 !important;
text-align: left !important;
padding: 0 !important;
margin: 0 !important;
}
.listingblock code[data-lang]::before {
display: block;
}
div.page-break {
display: block;
page-break-after: always;
}
#footer {
padding: 0 0.9375em;
}
.hide-on-print {
display: none !important;
}
.print-only {
display: block !important;
}
.hide-for-print {
display: none !important;
}
.show-for-print {
display: inherit !important;
}
#header > h1:first-child {
margin-top: 1.25rem;
}
.sect1 {
padding: 0 !important;
}
.sect1 + .sect1 {
border: 0;
}
#footer {
background: none;
}
#footer-text {
color: var(--ads-color-dark);
font-size: 0.9em;
}
}
}
/*** Special Styles for Amazon Devices ***/
@media amzn-kf8 {
#header > h1:first-child {
margin-top: 1.25rem;
}
.sect1 {
padding: 0 !important;
}
.sect1 + .sect1 {
border: 0;
}
#footer {
background: none;
}
#footer-text {
color: var(--ads-color-dark);
font-size: 0.9em;
}
body > div[id] {
padding: 0;
}
}
/*
The website has two responsive modes:
- Desktop: If the browser has a width greater or equal to 1024px
- Mobile: If the browser has a width less than 1024px
It consists of the following elements:
- nav.home
Contains a textual hyperlink with the name of the site root. The nav element is always available but it is empty if
the site does not have a single root.
- nav.top
The hierarchical top navigation.
In desktop mode, the first level of items is presented as a horizontal bar at the top of the window. The bar is
horizontally scrollable if it overflows the available space. Higher level items are shown in nested drop-down menus.
In mobile mode, the header row contains a toggle button (nav.top-toggle) at its right end which shows and hides the
top navigation. The top navigation is presented as an indented list with disclosure buttons.
By default, only the levels necessary to display the current page are expanded.
The nav element is always available but is empty if the site does not have a top navigation.
- nav.top-toggle
A button shown in the top-right corner only in mobile mode to toggle the visibility of the top navigation.
The nav element is always available but is empty if the site does not have a top navigation.
- nav.search-toggle
A magnifying glass symbol for initiating a full-site text search. In desktop and mobile mode it is shown on the
right hand side of the header row. The nav element is always available but is empty if the site is not configured
to have a search index. It toggles the visibility of the nav.search text input field.
- nav.search
A text input field that is shown or hidden when the user presses the nav.search-toggle button. Typing a search
text into this field will show a search result list below it.
- nav.language
a globe symbol for switching between localizations. In desktop and mobile mode it is shown on the
right hand side of the header row. The nav element is always available but is empty if the site does not have
multiple localizations.
- nav.side
The hierarchical side navigation.
In desktop mode it is shown in a sidebar left of the main content. It contains an indented list with disclosure
buttons. By default, only the levels necessary to display the current page are expanded.
In mobile mode, the header row contains a toggle button (nav.side-toggle) at its left end which shows and hides the
side navigation.
The nav element is only available if the site is configured to have a side navigation.
- nav.side-toggle
A button shown in the top-left corner only in mobile mode to toggle the visibility of the side navigation.
The nav element is always available but is empty if the site does not have a side navigation.
- nav.satellite
The hierarchical satellite navigation.
In desktop mode it is shown in a sidebar right of the main content.
In mobile mode it is never shown.
The nav element is only available if the site is configured to have a satellite navigation.
- main
Contains the main document content.
- nav.pagination
Contains links to navigate to the next and previous pages and to download the PDF version of the full document.
In both desktop and mobile mode it is shown at the end of the main content.
The nav element is only available if the site is configured to export pagination links or PDF versions.
*/
:root {
/* The height of the navigation header row at the top of the window */
--ads-nav-header-height: 3.7rem;
/* width/height of the side/top nav disclosure icon */
--ads-nav-disclosure-size: 0.7em;
/* Spacing between side/top nav disclosure icon and text. */
--ads-nav-disclosure-spacing: 0.35rem;
/* The left and right padding around the main content. */
--ads-main-side-padding: 30px;
/* The width of the sidebar navigation in desktop mode.
Can also be set to values like 'min-content', 'max-content' or 'fit-content(14em)' */
--ads-side-nav-width: 14em;
}
/* The body is the main grid container for all navigations and the main content. The concrete grid configuration depends
on the device size and other factors and is configured in separate rules below. */
body[data-is-website] {
display: grid;
}
/* Every navigation element is mapped to a named grid area which are independently assigned to grid cells via the
grid-template-areas attribute in rules below, depending on the responsive mode and other factors. */
nav.home { grid-area: home; }
nav.top { grid-area: topnav; }
nav.search-toggle { grid-area: search-toggle; }
nav.language { grid-area: language; }
nav.side { grid-area: side; }
nav.satellite { grid-area: satellite; }
nav.top-toggle { grid-area: top-toggle; }
nav.side-toggle { grid-area: side-toggle; }
main { grid-area: main; }
main {
padding-left: var(--ads-main-side-padding);
padding-right: var(--ads-main-side-padding);
padding-bottom: 1em;
}
/* Shared rules for all nav elements */
nav {
text-align: start;
hyphens: none;
-webkit-hyphens: none;
}
nav a {
text-decoration: none;
display: inline-block;
}
nav button, nav a {
color: inherit;
}
nav ul {
margin: 0 !important;
}
nav li {
list-style-type: none;
line-height: 1.4;
}
/* Rule for all nav elements in the header row */
nav.home, nav.top, nav.search-toggle, nav.language, nav.side-toggle, nav.top-toggle {
/* Although the main content scrolls with the main browser window, the nav elements in the header row should stay
fixed at the top edge of the window. */
position: sticky;
top: 0;
/* We need to create a tiny bit of overlap of the background or otherwise iOS Safari will show scrolling main
content shining through tiny gaps between the nav elements */
margin-left: -0.5px;
padding-left: 0.5px;
padding-right: 0.5px;
/* Vertically center the icon inside the nav elements. */
display: flex;
align-items: center;
font-family: var(--ads-top-navigation-font);
color: var(--ads-top-navigation-color);
/* As the main content scrolls underneath the header row, we need to give it an opaque background so that the
scrolled content does not shine through. */
background-color: var(--ads-top-navigation-background-color);
/* As we don't have a single container element for the header row, we create the horizontal header separation
line by setting a bottom border on all header nav elements. */
border-bottom: 1px solid var(--ads-top-navigation-separator-color);
@media (prefers-color-scheme: dark) {
color: var(--ads-top-navigation-color-dark);
background-color: var(--ads-top-navigation-background-color-dark);
border-bottom-color: var(--ads-top-navigation-separator-color-dark)
}
}
nav.top a:hover, nav.top li:hover > div > a {
color: var(--ads-top-navigation-hover-color);
}
nav.side {
font-family: var(--ads-side-navigation-font);
color: var(--ads-side-navigation-color);
@media (prefers-color-scheme: dark) {
color: var(--ads-side-navigation-color-dark);
}
}
nav.side a:hover {
color: var(--ads-side-navigation-hover-color);
@media (prefers-color-scheme: dark) {
color: var(--ads-side-navigation-hover-color-dark);
}
}
nav.satellite {
font-family: var(--ads-satellite-navigation-font);
color: var(--ads-satellite-navigation-color);
background-color: var(--ads-satellite-navigation-background-color);
@media (prefers-color-scheme: dark) {
background-color: var(--ads-satellite-navigation-background-color-dark);
}
}
nav.satellite a:hover {
color: var(--ads-satellite-navigation-hover-color);
@media (prefers-color-scheme: dark) {
color: var(--ads-satellite-navigation-hover-color-dark);
}
}
/* We cannot use margin collapsing to space icons in the header row as their nav elements all draw a bottom border
to create a horizontal separator line below the header row. Therefore we only right-padding on the button elements. */
nav.language button, nav.search-toggle button, nav.top-toggle button {
margin-right: 2em;
}
/* The vector icons for the navigation buttons are all implemented as mask images so that they can be dynamically
colored via CSS rules. We use data urls instead of external files for the svg images so that the website also
works when loading the website into Chrome from the local file system. As of v135, Chrome does not allow to load
external CSS mask images from the file system. */
nav button, nav.top .sub-menu-indicator {
mask-repeat: no-repeat;
mask-position: center;
/* As the masking reveals the background color, we need to use the background color property to color the images.
To nevertheless be able to use the current text color, we map it to the background color. */
background-color: currentColor;
/* Override button element defaults. */
border: none;
font-size: 100%;
height: 1em;
width: 1em;
padding: 0;
}
nav.search-toggle button {
/* Magnifying glass icon */
mask-image: url('data:image/svg+xml,');
cursor: pointer;
}
nav.language button {
/* Globe icon */
mask-image: url('data:image/svg+xml,');
}
nav.top-toggle button {
/* Down-pointing chevron icon */
mask-image: url('data:image/svg+xml,');
cursor: pointer;
}
nav.side-toggle button {
/* Sidebar icon */
mask-image: url('data:image/svg+xml,');
cursor: pointer;
}
/* In mobile responsive mode, the side and top navigations are only shown after the user has tapped the side-toggle or
top-toggle button. When clicking, a JavaScript handler toggles the data-modal attribute on the body element.
The attribute can have the value "side" or "top". With this rule we replace the icon on the respective active
toggle button with an X icon.
*/
body[data-modal-menu=side] nav.side-toggle button,
body[data-modal-menu=top] nav.top-toggle button {
/* X icon */
mask-image: url('data:image/svg+xml,');
}
/* Navigation items for the path of the current page should be emphasized. But this emphasis must not be inherited
to all sub-items. Therefore we limit it to hyperlinks directly in the list item or in a wrapping div. */
nav .is-active > a,
nav .is-active > div > a {
font-weight: 600;
}
nav.top .is-active > a,
nav.top .is-active > div > a {
color: var(--ads-top-navigation-active-color);
@media (prefers-color-scheme: dark) {
color: var(--ads-top-navigation-active-color-dark);
}
}
nav.side .is-active > a,
nav.side .is-active > div > a {
color: var(--ads-side-navigation-active-color);
@media (prefers-color-scheme: dark) {
color: var(--ads-side-navigation-active-color-dark);
}
}
nav.satellite .is-active > a,
nav.satellite .is-active > div > a {
color: var(--ads-satellite-navigation-active-color);
@media (prefers-color-scheme: dark) {
color: var(--ads-satellite-navigation-active-color-dark);
}
}
:root {
/* The horizontal distance of the home and side navigations from the left side of the window. */
--ads-nav-side-left-spacing: 13px;
}
nav.side {
font-size: 15px;
padding-top: 15px;
padding-right: 10px;
background-color: var(--ads-side-navigation-background-color);
@media (prefers-color-scheme: dark) {
background-color: var(--ads-side-navigation-background-color-dark);
}
}
nav.side > ul {
padding-inline-start: var(--ads-nav-side-left-spacing);
}
nav.side > ul ul {
/* Indentation per item level (second and higher) */
padding-inline-start: 15px;
}
nav.side li {
margin-top: 1em;
}
/* The list items containing a disclosure button and a text (wrapped by a div) should vertically center all content. */
nav.side li > div,
nav.top li > div {
display: flex;
align-items: baseline;
gap: var(--ads-nav-disclosure-spacing);
}
nav.side button,
nav.top button,
nav.top .sub-menu-indicator {
/* Right-pointing chevron */
mask-image: url('data:image/svg+xml,');
height: var(--ads-nav-disclosure-size);
width: var(--ads-nav-disclosure-size);
/* When rotating the expanded disclosure button with the rule below, the transition should animate. */
transition: transform 0.1s ease;
}
/* The disclosure button of an expanded list item should be rotated by 90 degrees. */
nav.side .is-expanded > div > button,
nav.top .is-expanded > div > button {
transform: rotate(90deg);
}
/* All items in the side navigation that have sub-items have a preceding button. This rule ensures that items without a button
are indented by the same distance as the ones with a button. But only if the ul they are contained in has a sub-list. */
nav.side ul:has(ul) > li > a:not(button + a) {
padding-left: calc(var(--ads-nav-disclosure-size) + var(--ads-nav-disclosure-spacing));
}
/* If a side navigation sub-level does not have further sub-levels, it won't contain any disclosure buttons and
we can indent a little bit less. For the top level we don't indent at all. */
nav.side ul ul:not(:has(ul)) > li > a {
padding-left: 0.75em;
}
/* A collapsed list item should hide its lower navigation levels. */
nav.side li:not(.is-expanded) ul {
display: none;
}
nav.language {
/* To prevent the content of the drop-down menus (using position: fixed) from colliding with the sidebar
navigation (using position: sticky), we need to put the parent element of the drop downs in a higher z-index. */
z-index: 6;
}
nav.language ul {
padding: 0;
margin: 0;
}
nav.language > ul {
display: flex;
height: 100%;
}
nav.language > ul > li {
display: flex;
align-items: center;
}
nav.language li div {
display: flex;
}
nav.language ul ul {
/* By default, items of second level are not directly visible. They get activated via JavaScript
when the user mouses into or taps the language item. Then the show-submenu class gets set on the
element. */
display: none;
/* Although the language item is not within the scrollable top navigation, we nevertheless use the same fixed
positioning as the top.nav drop-downs so that we can use the same JavaScripts for handling them. */
position: fixed;
/* We want the sub-menus to have a nice border and shadow. */
border: 1px solid var(--ads-top-navigation-menu-border-color);
border-radius: 8px;
/* We slant the shadow to the left to avoid overlapping of shadows from multiple sub-menu levels. */
box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 10px -6px;
text-wrap: wrap;
background-color: var(--ads-top-navigation-menu-background-color);
@media (prefers-color-scheme: dark) {
background-color: var(--ads-top-navigation-menu-background-color-dark);
border-color: var(--ads-top-navigation-menu-border-color-dark);
}
}
/* Sub-menus are activated via JavaScript by setting the show-submenu class on the item. */
nav.language li.show-submenu > ul {
display: block;
}
/* When hoving over a menu item we want a background highlight. */
nav.language li:has(ul) li:hover {
/* To make the highlight fit the border of the
, we need to give it the same radius. */
border-radius: 8px;
background-color: var(--ads-top-navigation-menu-hover-background-color);
@media (prefers-color-scheme: dark) {
background-color: var(--ads-top-navigation-menu-hover-background-color-dark);
}
}
nav.language li:has(ul) li:hover a {
color: var(--ads-top-navigation-menu-hover-color);
@media (prefers-color-scheme: dark) {
color: var(--ads-top-navigation-menu-hover-color-dark);
}
}
nav.language ul ul li a {
padding: 0.75em 1.25em 0.75em 1.25em;
line-height: 1.5em;
cursor: pointer;
/* Limit the size of the drop-down menus */
min-width: 6em;
max-width: 16em;
/* Make sure that even long words without spaces get wrapped and don't draw outside the menu. */
overflow-wrap: anywhere;
}
nav.search {
display: none;
position: sticky;
top: 0px;
justify-self: stretch;
align-items: center;
height: 100%;
}
/* When clicking the search toggle, the attribute data-search is added/removed from the body.
We use this attribute to toggle the visibility of the search field. */
body[data-search] nav.search {
display: flex;
}
nav.search div {
width: calc(100% - 1em);
position: relative;
}
nav.search input {
width: 100%;
height: 30px;
line-height: 30px;
font-size: 16px;
border-radius: 5px 5px 5px 5px;
border: 1px solid #a8a8a8;
padding-left: 10px;
padding-right: 10px;
}
nav.search ul {
left: 0;
right: 0;
position: absolute;
padding: 10px;
/* We want the search results to have a nice border and shadow. */
border: 1px solid var(--ads-top-navigation-menu-border-color);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
/* We slant the shadow to the left to avoid overlapping of shadows from multiple sub-menu levels. */
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px 3px;
background-color: var(--ads-top-navigation-menu-background-color);
@media (prefers-color-scheme: dark) {
background-color: var(--ads-top-navigation-menu-background-color-dark);
border-color: var(--ads-top-navigation-menu-border-color-dark);
}
}
nav.search li {
list-style-type: none;
padding: 10px;
}
nav.search a {
text-decoration: none;
color: inherit;
width: 100%;
}
nav.search li:hover, nav.search li.selected {
background-color: var(--ads-top-navigation-menu-hover-background-color);
@media (prefers-color-scheme: dark) {
background-color: var(--ads-top-navigation-menu-hover-background-color-dark);
}
}
nav.search .breadcrumb {
font-weight: bold;
}
nav.pagination {
/* Draw a horizontal line above the pagination navigation as a separator to the main content. */
border-top: 1px solid #e1e1e1;
margin: 2rem -1rem -1rem;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
}
nav.pagination, nav.pagination span {
display: flex
}
nav.pagination span {
flex-direction: column;
/* Overwrites auto. Makes sure the flex boxes don't get bigger than their alotted width. */
min-width: 0;
/* Make sure that text does not extend beyond the box and gets force wrapped. */
overflow-wrap: anywhere;
}
nav.pagination .previous {
flex: 2;
padding-right: 0.5rem;
padding-left: 0.2rem;
}
nav.pagination .pdf {
flex: 1;
text-align: center;
}
nav.pagination .next {
flex: 2;
padding-left: 0.5rem;
padding-right: 0.2rem;
text-align: right;
}
nav.pagination span::before {
font-size: 0.75em;
padding-bottom: 0.1em;
}
nav.pagination a {
font-weight: 600;
line-height: 1.3;
/* Serves as positioning reference for the navigation indicator arrows */
position: relative;
}
/* Position navigation indicator arrows before the prev link and after the next link. */
nav.pagination a::after, nav.pagination a::before {
font-weight: 400;
font-size: 1.5em;
line-height: 0.75;
width: 0.8rem; /* Defines spacing between arrow and text */
/* Position in reference to the a element */
position: absolute;
top: 0;
}
nav.pagination .previous a::before {
content: "\2039"; /* Left pointing arrow */
/* Move the arrow before the element box */
transform: translateX(-100%);
}
nav.pagination .next a::after {
content: "\203a"; /* Right pointing arrow */
}
nav.home {
min-width: 4em;
}
nav.home div {
white-space: nowrap; /* stay on one line, no wrapping */
overflow: hidden; /* hide anything that spills over */
text-overflow: ellipsis; /* replace the hidden part with … */
padding-right: 0.75em;
}
/* Responsive Mode: Desktop */
@media screen and (min-width: 1024px) {
:root {
--ads-navigation-mode: 'desktop';
}
/* Default grid layout for when there is a satellite navigation */
body[data-is-website] {
grid-template-columns: var(--ads-side-nav-width) [topnav-start] minmax(auto,50em) 1fr [search-start] minmax(min-content, 0) minmax(min-content, 0);
grid-template-rows: var(--ads-nav-header-height) auto;
grid-template-areas: "home topnav topnav search-toggle language"
"side main satellite satellite satellite";
}
/* Firefox has a problem with our preferred grid layout. For this browser we therefore we fall back to always
aligning the satellite navigation at the right side of the browser window. */
@supports (-moz-appearance: none) {
body[data-is-website] {
grid-template-columns: var(--ads-side-nav-width) [topnav-start] 1fr auto [search-start] minmax(min-content, 0) minmax(min-content, 0);
}
}
nav {
/* Make sure all document content properly scrolls underneath the navigations */
z-index: 1;
}
nav.search {
grid-row-start: 1;
grid-row-end: 1;
grid-column-start: topnav-start;
grid-column-end: search-start;
z-index: 20;
align-self: center;
padding-left: var(--ads-main-side-padding);
}
nav.search input {
/* We give the search input field a background-color halo so that it better separates from an overlap
with the home navigation name. */
box-shadow: 0 0 0 10px var(--ads-top-navigation-background-color);
@media (prefers-color-scheme: dark) {
box-shadow: 0 0 0 10px var(--ads-top-navigation-background-color-dark);
}
}
/* Alternative grid layout for when there is NO satellite navigation element.
Here the main content is free to span the search and language columns. */
body[data-is-website]:not(:has(nav.satellite)) {
grid-template-areas: "home topnav topnav search-toggle language"
"side main main main main";
}
/* Alternative grid layouts for when there is not top navigation. We then can allow the home nav to span more space */
body[data-is-website]:has(nav.top:empty):has(nav.satellite) {
grid-template-areas: "home home home search-toggle language"
"side main satellite satellite satellite";
}
body[data-is-website]:has(nav.top:empty):not(:has(nav.satellite)) {
grid-template-areas: "home home home search-toggle language"
"side main main main main";
}
/* As we have two different grid layouts, we specify the min and max widths for the main content
in a rule separate from the grid. */
body[data-is-website] main {
min-width: 30em;
max-width: 50em;
}
/* If there is no satellite navigation, the main content can be allowed to be a bit wider. */
body[data-is-website]:not(:has(nav.satellite)) main {
max-width: 65em;
}
/* If there is no content in any cell of the header row, we can change the grid layout to be a single row.
Luckily CSS grid picks the second row with the main content here as the one that is wanted, so we
don't need to adjust the grid-template-areas. */
body[data-is-website]:has(nav.home:empty):has(nav.top:empty):has(nav.search-toggle:empty):has(nav.language:empty) {
grid-template-rows: auto;
}
/* As the main document content scrolls underneath the header row, we need to establish a scroll margin so that
when clicking in-page anchor links the target content is not covered by the header row.
We only need to apply this however if there is content in any cell of the header row, because otherwise
the header row is hidden. (See rule above) */
body[data-is-website]:not(:has(nav.home:empty):has(nav.top:empty):has(nav.search-toggle:empty):has(nav.language:empty)) main [id] {
scroll-margin-top: var(--ads-nav-header-height);
}
nav.home {
font-size: 21px;
font-weight: 600;
padding-left: var(--ads-nav-side-left-spacing);
}
nav.top {
font-size: 14px;
padding-left: var(--ads-main-side-padding);
padding-right: var(--ads-main-side-padding);
/* To prevent the content of the drop-down menus (using position: fixed) from colliding with the sidebar
navigation (using position: sticky), we need to put the parent element of the drop downs in a higher z-index. */
z-index: 5;
}
nav.top:empty {
display: none;
}
nav.top > ul {
/* Make list horizontal. */
display: flex;
/* We only want a single row of items. */
flex-wrap: nowrap;
/* The items should be allowed to scroll if space is tight. */
overflow-x: scroll;
/* But there should be no scrollbar (Chrome and Firefox) */
scrollbar-width: none;
gap: 5em; /* Spacing between top nav items */
/* Make sure to fill the full height so that the horizontal scrolling area is maximized */
height: 100%;
align-items: center;
/* Show a horizontal scroll shadow at the left and right ends if there is overflow */
background-position: left center, right center;
background-repeat: no-repeat;
background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
background-attachment: local, local, scroll, scroll;
background-image: linear-gradient(to right, var(--ads-top-navigation-background-color), var(--ads-top-navigation-background-color)),
linear-gradient(to right, var(--ads-top-navigation-background-color), var(--ads-top-navigation-background-color)),
linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
@media (prefers-color-scheme: dark) {
background-image: linear-gradient(to right, var(--ads-top-navigation-background-color-dark), var(--ads-top-navigation-background-color-dark)),
linear-gradient(to right, var(--ads-top-navigation-background-color-dark), var(--ads-top-navigation-background-color-dark)),
linear-gradient(to right, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0)),
linear-gradient(to left, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
}
}
body[data-search] nav.top > ul {
background-image: none;
}
nav.top > ul::-webkit-scrollbar {
/* Safari needs a special treatment for getting rid of the scrollbar. */
display: none;
}
nav.top > ul > li {
/* We don't want the top items to wrap their text. */
text-wrap: nowrap;
}
nav.top > ul > li {
height: 100%;
display: flex;
align-items: center;
}
nav.top ul {
/* Override the default padding of the ul element */
padding: 0;
}
/* As we have drop-down menus in the Desktop mode, we need to hide the disclosure buttons which are
only active in the mobile mode. */
nav.top button {
display: none;
}
/* The buttons for toggling the visibility of the side and top navigations are only needed in mobile mode. */
nav.top-toggle, nav.side-toggle {
display: none;
}
nav.satellite {
font-size: 14px;
padding: 15px 10px 0 10px;
min-width: 14em;
}
nav.satellite > ul {
border-left: 1px solid var(--ads-satellite-navigation-separator-color);
@media (prefers-color-scheme: dark) {
border-left-color: var(--ads-satellite-navigation-separator-color-dark);
}
}
nav.satellite ul {
/* Indent every item level by 1em (cumulative)*/
padding-inline-start: 1em;
}
nav.satellite li a {
padding: 0.25em 0.8em 0.25em 0em;
/* Make sure that even long words without spaces get wrapped and don't draw outside the element. */
overflow-wrap: anywhere;
}
nav.side, nav.satellite {
/* Although the main content scrolls with the main browser window, the side and satellite navs should stay
stick at the top edge of the main content… */
position: sticky;
top: calc(var(--ads-nav-header-height) );
height: calc(100vh - var(--ads-nav-header-height));
/* …but their own content should be able to independently scroll vertically. */
overflow-y: scroll;
}
/* Drop Down Menus */
nav.top ul ul {
/* By default, items of second level and higher are not directly visible. They get activated via JavaScript
when the user mouses into or taps the top item. Then the show-submenu class gets set on the
element. */
display: none;
/* We can't use "position: absolute" to position the sub-menus relative to its item because the nav.top
is horizontally scrollable and therefore the sub-menus would also be clipped vertically. This is
a limitation of CSS. To work around it, we set the sub-menus to "position: fixed" and calculate
their position on screen via JavaScript. */
position: fixed;
/* We want the sub-menus to have a nice border and shadow. */
border: 1px solid var(--ads-top-navigation-menu-border-color);
border-radius: 8px;
/* We slant the shadow to the left to avoid overlapping of shadows from multiple sub-menu levels. */
box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 10px -6px;
text-wrap: wrap;
background-color: var(--ads-top-navigation-menu-background-color);
@media (prefers-color-scheme: dark) {
background-color: var(--ads-top-navigation-menu-background-color-dark);
}
/* Limit the size of the drop-down menus */
min-width: 9em;
max-width: 20em;
}
nav.top li .sub-menu-indicator {
margin-left: 0.5em;
}
/* Sub-menus are activated via JavaScript by setting the show-submenu class on the item. */
nav.top li.show-submenu > ul {
display: block;
}
/* When hoving over a menu item we want a background highlight. */
nav.top li:has(ul) li:hover {
/* To make the highlight fit the border of the
, we need to give it the same radius. */
border-radius: 8px;
cursor: pointer;
background-color: var(--ads-top-navigation-menu-hover-background-color);
@media (prefers-color-scheme: dark) {
background-color: var(--ads-top-navigation-menu-hover-background-color-dark);
}
}
/* When hovering over a menu item, we want the hyperlink text color to also highlight */
nav.top li:has(ul) li:hover > a, nav.top li:has(ul) li:hover > div > a {
color: var(--ads-top-navigation-menu-hover-color);
@media (prefers-color-scheme: dark) {
color: var(--ads-top-navigation-menu-hover-color-dark);
}
}
/* We want to stack sub-menus of different levels in the right layering order. */
nav.top ul ul ul ul { z-index: 30; }
nav.top ul ul ul ul ul { z-index: 40; }
nav.top ul ul li a {
padding: 0.75em 1.25em 0.75em 1.25em;
line-height: 1.5em;
/* Make sure the menu link gets all the free width */
flex: 1;
/* Make sure that even long words without spaces get wrapped and don't draw outside the menu. */
overflow-wrap: anywhere;
}
/* We only need the preventer div for narrow viewports. See comment for similar rule in mobile */
.liquid-glass-preventer {
display: none;
}
}
/* Responsive Mode: Mobile */
@media screen and (max-width: 1023px) {
:root {
/* The left and right padding around the main content. */
--ads-main-side-padding: 15px;
}
/* Default grid layout for when there there is no modal menu open */
body {
grid-template-columns: minmax(min-content, 0) [home-start] auto [search-start] minmax(min-content, 0) minmax(min-content, 0) minmax(min-content, 0);
grid-template-rows: var(--ads-nav-header-height) auto;
grid-template-areas: "side-toggle home search-toggle language top-toggle"
"main main main main main";
}
/* When the user taps the nav.side-toggle button, a JavaScript handler sets the data-modal-menu attribute on the
body element to 'side'. In this case we adjust the grid layout to show the side menu instead
of the main content and we hide the search and language navigation. */
body[data-modal-menu="side"] {
grid-template-columns: minmax(min-content, 0) auto minmax(min-content, 0);
grid-template-rows: var(--ads-nav-header-height) auto;
grid-template-areas: "side-toggle home top-toggle"
"side side side";
}
/* When the user taps the nav.top-toggle button, a JavaScript handler sets the data-modal-menu attribute on the
body element to 'top'. In this case we adjust the grid layout to show the top menu instead
of the main content and we hide the search and language navigation. */
body[data-modal-menu="top"] {
grid-template-columns: minmax(min-content, 0) auto minmax(min-content, 0) minmax(min-content, 0);
grid-template-rows: var(--ads-nav-header-height) auto;
grid-template-areas: "side-toggle home language top-toggle"
"topnav topnav topnav topnav";
}
body[data-modal-menu="top"] nav.top {
border: none;
}
nav.search {
grid-row-start: 1;
grid-row-end: 1;
grid-column-start: home-start;
grid-column-end: search-start;
z-index: 20;
align-self: center;
padding-left: var(--ads-main-side-padding);
}
nav.search-toggle {
padding-left: 15px;
}
/* If there is no content in any cell of the header row, we can change the grid layout to be a single row.
Luckily CSS grid picks the second row with the main content here as the one that is wanted, so we
don't need to adjust the grid-template-areas. */
body:has(nav.side-toggle:empty):has(nav.home:empty):has(nav.language:empty):has(nav.top-toggle:empty) {
grid-template-rows: auto;
}
/* As the main document content scrolls underneath the header row, we need to establish a scroll margin so that
when clicking in-page anchor links the target content is not covered by the header row.
We only need to apply this however if there is content in any cell of the header row, because otherwise
the header row is hidden. (See rule above) */
body[data-is-website]:not(:has(nav.side-toggle:empty):has(nav.home:empty):has(nav.language:empty):has(nav.top-toggle:empty)) main [id] {
scroll-margin-top: var(--ads-nav-header-height);
}
/* The side and top navigations are hidden until the user taps a toggle button.
The satellite navigation is never shown in mobile mode. */
nav.side, nav.top, nav.satellite {
display: none;
}
/* When the user taps a toggle button, a JavaScript handler sets the data-modal-menu attribute on the
body element to 'top' or 'side'. In this case we need to make the nav element visible. */
body[data-modal-menu="side"] nav.side,
body[data-modal-menu="top"] nav.top {
display: block;
}
/* While a modal menus are shown we hide the main content and the search and language navigations. */
body[data-modal-menu] main,
body[data-modal-menu="side"] nav.language,
body[data-modal-menu] nav.search-toggle {
display: none;
}
/* For smaller mobile screens, to save space and clutter, we hide the language navigation when there also is
a non-empty top navigation button and the top modal menu is not shown. */
@media screen and (max-width: 600px) {
body:has(nav.top:not(:empty)):not([data-modal-menu="top"]) nav.language {
display: none;
}
}
nav.home {
font-size: 21px;
font-weight: 600;
/* Ensures spacing between the side navigation toggle button and the home navigation text. */
padding-left: 30px;
}
/* When there is no side navigation toggle button, we want to left-align the edge of the home navigation
with the main content. */
body:not(:has(nav.side-toggle button)) nav.home {
padding-left: var(--ads-main-side-padding);
}
nav.side-toggle button {
width: 1.2em;
margin-left: 23px;
}
nav.side, nav.top {
font-size: 18px;
padding-top: 15px;
}
nav.side > ul {
/* Indentation of first item level */
padding-inline-start: 40px;
}
nav.side > ul ul {
/* Indentation per item level (second and higher) */
padding-inline-start: 35px;
}
nav.side li {
/* Vertical spacing of side navigation items */
margin-top: 1em;
}
nav.side li > div {
display: flex;
/* align-items: center; */
gap: var(--ads-nav-disclosure-spacing);
}
nav.home {
/* Make sure the navigations scroll behind the header */
z-index: 1;
}
nav.top ul {
padding-left: 40px;
}
/* Items in the top navigation that have sub-items have a preceding disclosure button. This rule ensures that items
without a button are indented by the same distance as the ones with a button. But only if the ul they are
contained in has a sub-list.*/
nav.top ul:has(ul) > li > a:not(button + a) {
padding-left: calc(var(--ads-nav-disclosure-size) + var(--ads-nav-disclosure-spacing));
}
/* If a top navigation sub-level does not have further sub-levels, it won't contain any disclosure buttons and
we can indent a little bit less. For the topmost level we don't indent at all. */
nav.top ul ul:not(:has(ul)) > li > a {
padding-left: 0.75em;
}
nav.top > ul > li {
/* Vertical spacing of top navigation items */
padding-top: 0.8em;
padding-bottom: 0.8em;
/* Separate the first-level items of the top navigation by horizontal lines. */
border-bottom: 1px solid var(--ads-top-navigation-separator-color);
@media (prefers-color-scheme: dark) {
border-bottom-color: var(--ads-top-navigation-separator-color);
}
}
nav.top li {
/* Vertical spacing of top navigation items */
margin-top: 0.8em;
margin-bottom: 0.8em;
}
/* In mobile mode we don't have drop-down menus for the top navigation, therefore we don't need the sub-menu-indicators. */
nav.top li span.sub-menu-indicator {
display: none;
}
/* A collapsed list item should hide its lower navigation levels */
nav.top li:not(.is-expanded) ul {
display: none;
}
/* Under iOS/iPadOS 26, Safari uses a heuristic to determine whether there is a fixed navigation bar at the top
of the page. If it detects one, it disables the visibility of scrollable content behind the system status bar.
A required criterion seems to a minimum width of 85% of the viewport width. Unfortunately, on mobile phones,
our nav elements are not wide enough for this heuristic. To work around this, we insert a fixed div element
at the top via JavaScript. */
.liquid-glass-preventer {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: var(--ads-top-navigation-background-color);
height: 5px;
z-index: 100;
}
}
/*
This is the CLASSIC css stylesheet for adoc Studio.
It is based on the Base.css (see info.json) and in some cases
it is also used as the basis for other factory stylesheets in adoc Studio.
This css file works as a supplement to the base styles.
It contains several changes to the base style:
- it resets all fonts and colors
- it adds new icons for the notes
- other minor changes (see the comments)
Author: Frank Blome for ProjectWizards GmbH
Version: 1.0 from April 17, 2024
License: Distributed under the permissive MIT license
*/
:root {
--ads-headline-font: -apple-system, "SF Pro", sans-serif;
--ads-body-font: "STIX Two Text", "Times New Roman", ui-serif, serif;
--ads-quote-font: "STIX Two Text", "Times New Roman", ui-serif, serif;
--ads-monospaced-font: 'SF Mono', SFMono-Regular, ui-monospace, monospace;
--ads-toc-font: var(--ads-body-font);
/* Set the icon weight for the admonitions:
400 -> outlined
900 -> Filled
*/
--ads-icon-font-weight: 400;
--ads-color: black; /* base color for all text */
--ads-color-dark: whitesmoke; /* dark variant of the base color */
--ads-background-color: white; /* base color for the background */
--ads-background-color-dark: #1e1e1e; /* dark variant of the background color */
--ads-headline-color: #1f4068; /* base color for all headline */
--ads-headline-color-dark: #54B0F2; /* dark variant for the headlines */
--ads-headline-block-color: var(--ads-headline-color); /* headline color for any blocks */
--ads-headline-block-color-dark: var(--ads-headline-color-dark); /* dark variant for the block headlines */
--ads-headline-small-color: var(--ads-headline-color); /* color for small headlines */
--ads-headline-small-color-dark: var(--ads-headline-color-dark); /* dark variant for the small headlines */
--ads-mark-background-color: #ffff00; /* Text marker with the same in dark mode */
--ads-a-color: #2c72db; /* all kind of links */
--ads-a-color-dark: #c1e1f5; /* dark variant of the links */
--ads-a-hover-color: #1d4b8f; /* hover variant of the links */
--ads-a-hover-color-dark: #c1e1f5; /* dark variant of links hover */
--ads-single-border-color: #dddddf; /* Mainly for single lines */
--ads-border-color: rgb(0 0 0 / 0.6); /* Light variant for some transparent borders */
--ads-border-color-dark: rgb(255 255 255 / 0.1); /* Dark variant for all borders */
--ads-details-color: rgb(0 0 0 / 0.85); /* Some borders needs to be less transparent */
--ads-details-color-dark: rgb(255 255 255 / 0.85); /* dark variant of these borders */
/* Colors for syntax highlighting */
--ads-code-color: dimgray; /* For standard code and non highlighting syntax */
--ads-code-color-dark: whitesmoke;
--ads-attribute-color: blue; /* For all attributed stings */
--ads-attribute-color-dark: #54B0F2;
--ads-code-buildin-color: purple;
--ads-code-buildin-color-dark: orchid;
--ads-comment-color: green; /* For secondary text & comments */
--ads-comment-color-dark: green;
--ads-markup-color: navy; /* For all kind of markup text */
--ads-markup-color-dark: #54B0F2;
--ads-literal-color: blue; /* For Keywords */
--ads-literal-color-dark: #54B0F2;
--ads-tag-color: darkslateblue; /* For Tags & Keywords */
--ads-tag-color-dark: powderblue;
--ads-verbatim-color: dimgray; /* For Verbatim & other text */
--ads-verbatim-color-dark: gray;
/* Colors for tables */
--ads-table-background-color: white;
--ads-table-background-color-dark: #212121;
--ads-table-head-background-color: #f7f8f7;
--ads-table-head-background-color-dark: #323232;
--ads-table-alternate-background-color: #f8f8f7;
--ads-table-alternate-background-color-dark: #f8f8f7;
--ads-table-stripes-background-color: #f7f8f7;
--ads-table-stripes-background-color-dark: #323232;
--ads-linenotable-background-color: none;
--ads-linenotable-background-color-dark: none;
/* Colors for various kinds of blocks */
--ads-quote-color: rgb(0 0 0 / 0.85);
--ads-quote-color-dark: rgb(255 255 255 / 0.85);
--ads-pre-color: dimgray;
--ads-pre-color-dark: #eee;
--ads-pre-background-color: #f7f7f8;
--ads-pre-background-color-dark: #7f7f7f;
--ads-exampleblock-background-color: white;
--ads-exampleblock-background-color-dark: #121212;
--ads-sidebar-background-color: #f3f3f2;
--ads-sidebar-background-color-dark: #3f3f3f;
--ads-listingblock-background-color: #f7f7f8;
--ads-listingblock-background-color-dark: #7f7f7f;
--ads-listingblock-output-background-color: rgb(0 0 0 / 0.9);
--ads-listingblock-output-background-color-dark: #7f7f7f;
/* Colors for the UI elements */
--ads-kbd-background-color: #f7f7f7;
--ads-kbd-background-color-dark: #bababa;
--ads-kbd-color: rgb(0 0 0 / 0.8);
--ads-kbd-color-dark: rgb(0 0 0 / 0.8);
--ads-keyseq-color: black;
--ads-keyseq-color-dark: whitesmoke;
--ads-menu-color: #000;
--ads-menu-color-dark: #eee;
/* Colors for the Table of contents */
--ads-toc-background-color: #f8f8f7;
--ads-toc-background-color-dark: #323232;
--ads-toc2-background-color: #f8f8f7;
--ads-toc2-background-color-dark: #323232;
/* Colors for Pretty Print */
--ads-prettyprint-background-color: #f7f7f8;
--ads-prettyprint-background-color-dark: #7f7f7f;
--ads-prettyprint-list-background-color: none;
--ads-prettyprint-list-background-color-dark: none;
/* Admonitions: The background color is unused in the base style.
It is prepared for a style similar to Apple Calendar with dark/light colors */
--ads-admonitionblock-background-color: none;
--ads-admonitionblock-background-color-dark: none;
--ads-note-color: #1962d1;
--ads-note-border-color: #1962d1;
--ads-note-background-color: #b8d4ff;
--ads-tip-color: #ebd005;
--ads-tip-border-color: #ebd005;
--ads-tip-background-color: #fcf3ae;
--ads-warning-color: #fc9803;
--ads-warning-border-color: #fc9803;
--ads-warning-background-color: #fae1bb;
--ads-caution-color: #cf2604;
--ads-caution-border-color: #cf2604;
--ads-caution-background-color: #fadbd4;
--ads-important-color: #800101;
--ads-important-border-color: #800101;
--ads-important-background-color: #fbd0d0;
}
html {
/* Use the most common ligatures from the body font */
font-variant-ligatures: common-ligatures;
-moz-font-feature-settings: "liga", "clig";
-webkit-font-feature-settings: "liga", "clig";
font-feature-settings: "liga", "clig";
}
/* Unify the weight for headlines */
h1,
h2 {
font-weight: 700;
}
h3,
h4 {
font-weight: 600;
}
h5,
h6,
#toctitle,
.sidebarblock > .content > .title {
font-size: 100%;
font-weight: 500;
text-align: left;
}
.sidebarblock {
line-height: 1;
}
/* reduce the space between list items */
li p {
margin-bottom: 0em;
}
/* Keyboard Shortcuts a bit larger and in semi bold */
kbd {
font-size: 0.75em;
font-weight: 600;
}
/* The .lead text AKA Preamble AKA abstract in medium bold and a bit larger */
.paragraph.lead > p,
#preamble > .sectionbody > [class=paragraph]:first-of-type p {
font-size: 1.2em; /* .lead should be ~15% bigger than the normal font */
font-weight: 500;
}
p {
margin-bottom: 1em;
}
/*** A new style for quotes ***/
.quoteblock {
margin: 0 1em 1.25em 0em;
border-left: 0.5em solid var(--ads-headline-block-color);
display: table;
}
@media (prefers-color-scheme: dark) {
.quoteblock {
border-left: 0.5em solid var(--ads-headline-block-color-dark);
}
}
.quoteblock:not(.excerpt) > .title {
margin-left: 0.7em;
}
.quoteblock blockquote,
.quoteblock p {
font-family: var(--ads-quote-font);
font-style: italic;
word-spacing: -0.025em;
margin-left: 0.5em;
}
.quoteblock blockquote::before {
display:none;
}
/*** New Icons for the Admonitions ***/
.admonitionblock td.icon [class^="fa icon-"] {
font-size: 2.5em; /* The icon size, if displayed */
cursor: default;
}
.admonitionblock td.icon .icon-note::before {
content: "\f075"; /* The font icon for NOTE */
color: var(--ads-note-color);
}
.admonitionblock td.icon .icon-tip::before {
content: "\f0eb"; /* The font icon for TIP */
color: var(--ads-tip-color);
}
.admonitionblock td.icon .icon-warning::before {
content: "\f0f3"; /* The font icon for WARNING */
color: var(--ads-warning-color);
}
.admonitionblock td.icon .icon-caution::before {
content: "\f25a"; /* The font icon for CAUTION */
color: var(--ads-caution-color);
}
.admonitionblock td.icon .icon-important::before {
content: "\f256"; /* The font icon for IMPORTANT */
color: var(--ads-important-color);
}
/* Helper Classes for bordering in tweo sizes and colors */
.thin-border {
border: thin solid silver;
}
.thick-border {
border: thick solid silver;
}
.thin-border-red {
border: thin solid red;
}
.thick-border-red {
border: thick solid red;
}
/*** The @media vivliostyle is used for the PDF View in adoc Studio ***/
@media vivliostyle {
p {
font-size: 100%;
}
/* Color fix for the left border of a quoteblock */
.quoteblock {
border-left: 0.5em solid var(--ads-headline-block-color) !important;
}
}
/*
This is the WHITEPAPER WIDE css stylesheet for adoc Studio.
It is based on the Default.css (see info.json) and it may can be also used
as the basis for other factory stylesheets in adoc Studio.
This css file works as a supplement to the base styles.
It contains several changes to the base style:
- it redefines all fonts and colors
- it adds new icons for the notes
- other minor changes (see the comments)
Author: Frank Blome for ProjectWizards GmbH
Version: 1.0 from April 17, 2024
License: Distributed under the permissive MIT license
*/
@font-face {
font-family: "Inter";
src: url("fonts/InterVariable.ttf");
}
:root {
--ads-body-font: "Inter", sans-serif;
--ads-headline-font: "Inter", sans-serif;
--ads-quote-font: "Inter Medium Italic", serif;
--ads-admonitions-font: var(--body-font);
--ads--toc-font: var(--body-font);
--ads-monospaced-font: "Andale", monospace;
--ads-color: Black; /* base color for all text */
--ads-color-dark: #f1f1f1; /* dark variant of the base color */
--ads-background-color: #ffffff; /* base color for the background */
--ads-background-color-dark: #1e1e1e; /* dark variant of the background color */
--ads-headline-color: rebeccapurple; /* base color for all headline */
--ads-headline-color-dark: rebeccapurple; /* dark variant for the headlines */
--ads-headline-block-color: rebeccapurple; /* headline color for any blocks */
--ads-headline-block-color-dark: rebeccapurple; /* dark variant for the block headlines */
--ads-headline-small-color: rebeccapurple; /* color for small headlines */
--ads-headline-small-color-dark: rebeccapurple; /* dark variant for the small headlines */
--ads-note-color: rebeccapurple;
--ads-mark-background-color: #ffff00; /* Text marker with the same in dark mode */
--ads-a-color: rebeccapurple; /* all kind of links */
--ads-a-color-dark: rebeccapurple; /* dark variant of the links */
--ads-a-hover-color: black; /* hover variant of the links */
--ads-a-hover-color-dark: silver; /* dark variant of links hover */
--ads-single-border-color: #dddddd; /* Mainly for single lines */
--ads-border-color: rgb(0 0 0 / 0.6); /* Light variant for some transparent borders */
--ads-border-color-dark: rgb(255 255 255 / 0.1); /* Dark variant for all borders */
--ads-details-color: rgb(0 0 0 / 0.85); /* Some borders needs to be less transparent */
--ads-details-color-dark: rgb(255 255 255 / 0.85); /* dark variant of these borders */
}
html {
font-size: 16pt;
}
body {
/* Always use Ligatures */
-moz-font-feature-settings: "dlig";
-webkit-font-feature-settings: "dlig";
font-feature-settings: "dlig";
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
}
table {
/* Try to set numbers unproportunal */
font-variant-numeric: tabular-nums;
-moz-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
font-feature-settings: "tnum";
}
.ulist ul li {
list-style-type: square;
}
.checklist ul li {
list-style-type: none;
}
#header > h1:first-child + #toc {
border-top: none;
}
#header > h1:only-child,
body.toc2 #header > h1:nth-last-child(2) {
border-bottom: none;
}
#header .details {
border-bottom: none;
}
#content .tocbase,
.tocbase {
border: 0;
}
.quoteblock:not(.excerpt) > .title {
margin-left: 0.7em;
}
/***********************************************************************************
To control the style of callout numbers inside verbatim blocks and in callout lists.
************************************************************************************/
.conum[data-value] {
display: inline-block;
color: #fff !important;
background-color: var(--ads-footer-background-color);
border-radius: 50%;
text-align: center;
font-size: 0.85em;
width: 1.67em;
height: 1.67em;
line-height: 1.67;
font-family: var(--ads-body-font);
font-style: normal;
font-weight: bold;
}
/* Styles for PDF Output */
@media vivliostyle {
}
/* Bild mit fester Mindesthöhe, vertikal zentriert
Standard: 35% der Fensterhöhe
Verwendung in AsciiDoc:
[.bildfestehoehe] → 35vh (Standard)
[.bildfestehoehe.h20] → 20vh
[.bildfestehoehe.h40] → 30vh
[.bildfestehoehe.h40] → 40vh
[.bildfestehoehe.h50] → 50vh
[.bildfestehoehe.h60] → 60vh
[.bildfestehoehe.h70] → 70vh
*/
.imageblock.bildfestehoehe {
min-height: var(--bildhoehe, 35vh);
display: flex !important;
align-items: center;
justify-content: center;
}
.imageblock.bildfestehoehe .content {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.imageblock.bildfestehoehe img.inline-graphic {
display: block !important;
margin: 0 auto !important;
vertical-align: unset !important;
}
/* Höhen-Varianten */
.imageblock.bildfestehoehe.h20 { --bildhoehe: 20vh; }
.imageblock.bildfestehoehe.h30 { --bildhoehe: 30vh; }
.imageblock.bildfestehoehe.h40 { --bildhoehe: 40vh; }
.imageblock.bildfestehoehe.h50 { --bildhoehe: 50vh; }
.imageblock.bildfestehoehe.h60 { --bildhoehe: 60vh; }
.imageblock.bildfestehoehe.h70 { --bildhoehe: 70vh; }
/* Schlussfolie / Endseite
Verwendung in AsciiDoc:
[.endseite]
== ENDE +
Dietrich Juhl
*/
.endseite {
min-height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #0d1b2a 0%, #1a1a2e 60%, #16213e 100%);
padding: 2rem 6rem;
text-align: center;
}
.endseite p {
color: rgba(255,255,255,0.6);
letter-spacing: 0.05em;
font-size: 3rem;
margin-top:3cm;
}
.endseite .endtitel {
color: #ffffff;
font-family: Georgia, serif;
letter-spacing: 0.25em;
font-size: 5rem;
margin-bottom: 0.5rem;
}
.endseite .endname {
color: rgba(255,255,255,0.6);
letter-spacing: 0.08em;
font-size: 1.5rem;
}
.endseite {
margin-top: -4rem !important;
position: relative !important;
z-index: 10 !important;
}
/*
leicht2-custom.css
Eigene Klassen als Ergänzung zum leicht2-Stil in adoc Studio
Ablage: neben dem Dokument oder im adoc-Studio-Stylesheet-Ordner
Einbinden im Dokument: :stylesheet: leicht2-custom.css
*/
/* ═══════════════════════════════════════════════════════
ZWISCHENÜBERSCHRIFTEN
Verwendung: [.zwischentitel]
Text
═══════════════════════════════════════════════════════ */
/* Schlichte Zwischenüberschrift mit Unterstrich */
.zwischentitel {
font-size: 1.3rem;
font-weight: 600;
color: #1f4068;
margin-top: 1.8rem !important;
margin-bottom: 0.5rem !important;
border-bottom: 2px solid #1f4068;
padding-bottom: 0.3rem;
}
/* Zwischenüberschrift mit farbigem Balken links */
.zwischentitel-akzent {
font-size: 1.2rem;
font-weight: 600;
color: #1f4068;
margin-top: 1.8rem !important;
margin-bottom: 0.5rem !important;
border-left: 4px solid rebeccapurple;
padding-left: 0.7rem;
}
/* Zwischenüberschrift zentriert, Linien links und rechts */
.zwischentitel-zentriert {
font-size: 1.1rem;
font-weight: 600;
color: #555;
text-align: center;
margin: 1.8rem 0 0.8rem 0 !important;
display: flex;
align-items: center;
gap: 0.8rem;
}
.zwischentitel-zentriert::before,
.zwischentitel-zentriert::after {
content: "";
flex: 1;
height: 1px;
background: #ccc;
}
/* ═══════════════════════════════════════════════════════
FARBIGE BOXEN (Sidebar-Block: [.klassenname] **** ... ****)
═══════════════════════════════════════════════════════ */
/* Infobox – blau */
.sidebarblock.infobox {
background-color: #e8f4fd;
border: none;
border-radius: 8px;
border-left: 4px solid #2c72db;
padding: 1rem 1.2rem;
box-shadow: none;
margin: 1.2rem 0;
}
.sidebarblock.infobox > .content > .title {
color: #2c72db;
}
/* Warnbox – gelb/orange */
.sidebarblock.warnbox {
background-color: #fff3cd;
border: none;
border-radius: 8px;
border-left: 4px solid #ffc107;
padding: 1rem 1.2rem;
box-shadow: none;
margin: 1.2rem 0;
}
.sidebarblock.warnbox > .content > .title {
color: #b45309;
}
/* Erfolgsbox – grün */
.sidebarblock.erfolgsbox {
background-color: #d1fae5;
border: none;
border-radius: 8px;
border-left: 4px solid #10b981;
padding: 1rem 1.2rem;
box-shadow: none;
margin: 1.2rem 0;
}
.sidebarblock.erfolgsbox > .content > .title {
color: #065f46;
}
/* Fehlerbox – rot */
.sidebarblock.fehlerbox {
background-color: #fee2e2;
border: none;
border-radius: 8px;
border-left: 4px solid #ef4444;
padding: 1rem 1.2rem;
box-shadow: none;
margin: 1.2rem 0;
}
.sidebarblock.fehlerbox > .content > .title {
color: #991b1b;
}
/* Tippbox – lila */
.sidebarblock.tippbox {
background-color: #f3e8ff;
border: none;
border-radius: 8px;
border-left: 4px solid rebeccapurple;
padding: 1rem 1.2rem;
box-shadow: none;
margin: 1.2rem 0;
}
.sidebarblock.tippbox > .content > .title {
color: rebeccapurple;
}
/* ═══════════════════════════════════════════════════════
ZITAT-STILE
Verwendung: [.zitat-gross]
[quote, Autor]
____
Text
____
═══════════════════════════════════════════════════════ */
/* Großes Zitat, zentriert */
.quoteblock.zitat-gross {
border-left: none;
text-align: center;
margin: 2rem auto;
max-width: 80%;
}
.quoteblock.zitat-gross blockquote p {
font-size: 1.5rem;
font-style: italic;
color: #1f4068;
line-height: 1.5;
}
.quoteblock.zitat-gross .attribution {
text-align: center;
color: #888;
font-size: 0.9rem;
margin-top: 0.8rem;
}
/* ═══════════════════════════════════════════════════════
TABELLEN-STILE
Verwendung: [.tabelle-schlicht]
|===
...
|===
═══════════════════════════════════════════════════════ */
/* Schlichte Tabelle ohne äußeren Rahmen */
table.tableblock.tabelle-schlicht {
border: none;
border-collapse: collapse;
width: 100%;
}
table.tableblock.tabelle-schlicht th,
table.tableblock.tabelle-schlicht td {
border: none;
border-bottom: 1px solid #e5e7eb;
padding: 0.6rem 0.8rem;
}
table.tableblock.tabelle-schlicht thead tr {
background-color: #f3f4f6;
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════
KOMPAKTERE ABSATZABSTÄNDE (–30%)
═══════════════════════════════════════════════════════ */
.sect1 p,
.sect2 p,
.sect3 p {
margin-top: 0.35rem !important;
margin-bottom: 0.35rem !important;
}
.sect1 ul,
.sect2 ul,
.sect1 ol,
.sect2 ol {
margin-top: 0.35rem !important;
margin-bottom: 0.35rem !important;
}
.sect1 li,
.sect2 li {
margin-bottom: 0.15rem !important;
}
/* ═══════════════════════════════════════════════════════
BILDUNTERSCHRIFT
Verwendung: [.bildunterschrift]
Text unter dem Bild
═══════════════════════════════════════════════════════ */
.bildunterschrift {
font-size: 0.85rem;
color: #888;
text-align: center;
font-style: italic;
margin-top: -0.8rem !important;
margin-bottom: 1rem !important;
}
/* ═══════════════════════════════════════════════════════
HERVORGEHOBENER TEXT
Verwendung: [.lead]
Einleitungstext
═══════════════════════════════════════════════════════ */
/* Größerer Einleitungstext */
.lead {
font-size: 1.15rem;
color: #374151;
line-height: 1.7;
font-weight: 400;
}
/* Kleiner Hinweistext */
.hinweis {
font-size: 0.85rem;
color: #6b7280;
font-style: italic;
}
h2{font-size:1.5em;}
h3{font-size:1.1em;}
/* Überschriften "Titel" und "Ende" verbergen */
h1#_titel,
h1#_ende {
display: none !important;
}
/* ═══════════════════════════════════════════════════════
ENDEBOX
Verwendung:
[.endebox]
****
Vielen Dank fürs Lesen! +
Wir freuen uns über Feedback. +
dietrich@juhl.de +
+
{datum}
****
═══════════════════════════════════════════════════════ */
.sidebarblock.endebox {
background-color: #f4f5f6;
border: 1.5px solid #5b9bd5;
border-radius: 8px;
padding: 0.8rem 1rem 0.7rem 1rem;
box-shadow: none;
margin: 1.4rem 0 1rem 0;
/* Quadratisch: Breite = Höhe via aspect-ratio */
width: 100%;
aspect-ratio: 1 / 1;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.sidebarblock.endebox::before {
content: "Ende";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5em;
font-weight: bold;
color: gray;
}
@media (max-width: 600px) {
.sidebarblock.endebox::before {
font-size: 2.5em;
}
}
.sidebarblock.endebox .content {
text-align: center;
font-size: 1rem;
color: gray;
padding-bottom: 100px;
width: 100%;
}
/* ═══════════════════════════════════════════════════════
TITELBOX
Verwendung:
== Titel
[.titelbox]
****
image::titelbild.jpg[]
****
═══════════════════════════════════════════════════════ */
.sidebarblock.titelbox {
border: 1.5px solid #5b9bd5;
border-radius: 8px;
box-shadow: none;
margin: 1.4rem 0 1rem 0;
padding: 0;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
}
.sidebarblock.titelbox .content,
.sidebarblock.titelbox .imageblock,
.sidebarblock.titelbox .imageblock .content,
.sidebarblock.titelbox p {
position: absolute;
inset: 0;
padding: 0;
margin: 0;
line-height: 0;
}
.sidebarblock.titelbox img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* btn:[] */
/* menu:[Datei>Öffnen] */
.menuseq,
.menuseq .menu,
.menuseq .menuitem {
font-weight: 500;
}
.menuseq .separator {
padding: 0 3px;
opacity: 0.6;
}
/* path:[/etc/...] */
.path {
font-family: var(--font-mono, monospace);
font-size: .9em;
background: rgba(0,0,0,.06);
border-radius: 3px;
padding: 1px 5px;
}
/* verbirgt den footer, der von adoc eingesetzt wird */
#footer {
display: none;
}
/* ============================================================
UI-Macros: menu:, btn:[], path:[], #mark#, kbd
Selektoren laut adoc Studio HTML-Output
============================================================ */
/* btn:[Beispiel] → */
b.button {
display: inline-block;
background-color: #dce8f7;
border: 1px solid #b8cfe8;
color: #0a3e6e;
border: thin solid silver;
border-radius: 5px;
box-sizing: border-box;
color: black;
font-family: var(--ads-system-font, system-ui, sans-serif);
font-weight: 500;
font-size: 0.75em;
font-style: normal !important;
line-height: 1.5em;
text-align: center;
vertical-align: middle;
user-select: none;
-webkit-user-select: none;
white-space: nowrap;
}
b.button::before { content: ""; padding: 0.5em; }
b.button::after { content: ""; padding: 0.5em; }
/* menu:Datei[Öffnen] → */
.menuseq,
.menuref {
font-family: var(--ads-system-font, system-ui, sans-serif);
font-size: 0.85em;
font-weight: 700;
font-style: normal !important;
white-space: nowrap;
}
.menuseq .menu,
.menuseq .menuitem {
font-weight: 700; /* gleich wie .menuseq */
}
.menuseq .submenu,
.menuseq .menuitem {
padding-left: 3px;
}
.menuseq .separator {
padding: 0 3px;
opacity: 0.6;
}
/* #Text# → (Standard-HTML) */
mark {
background-color: var(--ads-mark-background-color, #ffff00);
padding: 0 2px;
}
/* menu:Datei[Öffnen] → korrekte Selektoren laut Inspektor */
span.menuseq {
font-weight: 700;
white-space: nowrap;
}
span.menuseq b.menu,
span.menuseq b.menuitem {
font-weight: 700;
}
span.menuseq b.caret {
/* das › Zeichen zwischen den Einträgen */
padding: 0 3px;
opacity: 0.6;
}
/* path:[...] → */
span.path {
font-family: var(--ads-monospaced-font, monospace);
font-size: 0.9em;
background: rgba(0,0,0,0.06);
border-radius: 3px;
padding: 1px 5px;
}
/* Nummerierte Liste mit Kreisziffern (.steps) */
ol.steps {
list-style: none;
padding-left: 22px;
counter-reset: step-counter;
}
ol.steps li {
position: relative;
padding-left: 2.4rem;
margin-bottom: 0.5em;
counter-increment: step-counter;
}
ol.steps li::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 0.85em;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* [.steps] → */
ol.arabic.steps {
list-style: none;
padding-left: 0;
counter-reset: step-counter;
}
ol.arabic.steps > li {
position: relative;
padding-left: 2.6rem;
margin-bottom: 0.5em;
counter-increment: step-counter;
}
ol.arabic.steps > li::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 0.05em;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 0.85em;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* Link als Button darstellen */
a.btn {
display: inline-block;
background: rebeccapurple; /* statt var(--ads-template-fore-color) */
color: white !important;
padding: 0.4em 0.9em;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
}
a.btn:hover {
background: #5a2d9e;
}
a.btn::after {
content: "" !important;
}
/* kbd:[Strg] → */
kbd {
font-family: var(--ads-monospaced-font, monospace);
font-size: 0.75em;
font-weight: 600;
padding: 0.1em 0.5em;
/* optional: background + border für klassischen Tastenlook */
background-color: var(--ads-kbd-background-color, #f7f7f7);
border: 1px solid #ccc;
border-radius: 3px;
}
/* ═══════════════════════════════════════════════════════
HINWEISBOX – universell, Farbe per Role
Verwendung:
[.hinweisbox.orange]
.Mein Titel
****
Text
****
[.hinweisbox.blue]
[.hinweisbox.red]
[.hinweisbox.fine]
═══════════════════════════════════════════════════════ */
/* Basis – gilt für alle Varianten */
.sidebarblock.hinweisbox {
border-radius: 8px;
padding: 0.8rem 1rem 0.7rem 1rem;
box-shadow: none;
margin: 1.4rem 0 1rem 0;
position: relative;
}
.sidebarblock.hinweisbox > .content > .title {
position: absolute;
top: -0.65rem;
left: 0.9rem;
color: #ffffff;
font-size: 0.78rem;
font-weight: 600;
padding: 0.1rem 0.6rem;
border-radius: 4px;
letter-spacing: 0.03em;
}
.sidebarblock.hinweisbox > .content p {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
color: #1a1a1a;
font-size: 0.95rem;
line-height: 1.5;
}
.sidebarblock.hinweisbox > .content ul,
.sidebarblock.hinweisbox > .content ol {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
padding-left: 1.3rem;
}
.sidebarblock.hinweisbox > .content li {
margin-bottom: 0.15rem !important;
color: #1a1a1a;
font-size: 0.95rem;
line-height: 1.5;
}
/* blue */
.sidebarblock.hinweisbox.blue {
background-color: #f4f5f6;
border: 1.5px solid #5b9bd5;
}
.sidebarblock.hinweisbox.blue > .content > .title {
background-color: #5b9bd5;
}
/* orange */
.sidebarblock.hinweisbox.orange {
background-color: #fff7ed;
border: 1.5px solid #f97316;
}
.sidebarblock.hinweisbox.orange > .content > .title {
background-color: #f97316;
}
/* red */
.sidebarblock.hinweisbox.red {
background-color: #fff0f0;
border: 1.5px solid #e53e3e;
}
.sidebarblock.hinweisbox.red > .content > .title {
background-color: #e53e3e;
}
/* fine – dezent, dunkelgrau, wenig Padding */
.sidebarblock.hinweisbox.fine {
background-color: #fafafa;
border: 1px solid #aaa;
padding: 0.5rem 0.8rem 0.45rem 0.8rem;
}
.sidebarblock.hinweisbox.fine > .content > .title {
background-color: #888;
font-size: 0.72rem;
}
/* Video-Block: 90% Breite, zentriert */
.video-block {
display: block;
width: 90%;
margin: 1.5em auto;
}
.video-block video {
width: 100%;
height: auto;
display: block;
border-radius: 4px; /* optional, dezenter Rahmen */
box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* optional */
}
.klein {
font-size: 0.5em;
}
/* ═══════════════════════════════════════════════════════════════════════
SNIPBOOK – Tooltip / Popup
Datei: leicht2-custom.css (oder viewer-zusatz.css)
Verwendung in AsciiDoc:
{tt}Begriff{tm}Erklärung des Begriffs{te}
Verhalten:
Desktop → MouseOver zeigt Tooltip
Touch → erster Tap zeigt, zweiter Tap / Tap woanders schließt
═══════════════════════════════════════════════════════════════════════ */
/* ── Trägerelement ───────────────────────────────────────────────────── */
.sb-tooltip {
position: relative;
display: inline;
cursor: help;
color: var(--color-accent);
border-bottom: 1px dotted var(--color-accent);
white-space: nowrap;
}
/* ── Tooltip-Box ────────────────────────────────────────────────────── */
.sb-tooltip-box {
/* Versteckt bis Hover oder .active */
visibility: hidden;
opacity: 0;
transition: opacity 0.18s ease, visibility 0.18s ease;
/* Positionierung: zentriert über dem Begriff */
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
/* Aussehen */
background: var(--color-accent);
color: #ffffff;
font-size: 0.82em;
line-height: 1.4;
padding: 0.45em 0.75em;
border-radius: 7px;
white-space: normal;
min-width: 160px;
max-width: 260px;
text-align: left;
z-index: 200;
pointer-events: none;
/* Kleines Dreieck nach unten */
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
/* Dreieck */
.sb-tooltip-box::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--color-accent);
}
/* ── Sichtbar bei Hover (Desktop) ────────────────────────────────────── */
.sb-tooltip:hover .sb-tooltip-box {
visibility: visible;
opacity: 1;
}
/* ── Sichtbar bei .active (Touch / Klick) ────────────────────────────── */
.sb-tooltip.active .sb-tooltip-box {
visibility: visible;
opacity: 1;
}
.zentriert {
text-align: center;
}
/* übernommen aus leicht Vollbild */
/* Titelformat: zentriert, 2× Schriftgröße */
.titel,
.titel p {
text-align: center;
font-size: 1.4rem;
font-weight: 300;
line-height: 1.2;
}
/* Vollbreite-Bild: links und rechts bis an den Seitenrand */
.imageblock.vollbreite {
margin-left: -1.6rem;
margin-right: -1.6rem;
overflow: hidden;
}
.imageblock.vollbreite img {
width: 100%;
display: block;
object-fit: cover;
}
/* Verwendung:
*/
/* ===== Abstand-Klassen ===== */
.abstand-5 { display: block; height: 5px; }
.abstand-10 { display: block; height: 10px; }
.abstand-20 { display: block; height: 20px; }
.abstand-30 { display: block; height: 30px; }
.abstand-40 { display: block; height: 40px; }
.abstand-50 { display: block; height: 50px; }
.abstand-100 { display: block; height: 100px; }
.abstand-200 { display: block; height: 200px; }
/* ===== Zentrierter Text ===== */
.zentriert { text-align: center; }
/* leicht2.css */