asciidoc/pve-docs.css

   1 :root {
   2     /* pre-defined colors */
   3     --pdt-grey-950: hsl(0deg, 0%, 95%);
   4     --pdt-grey-400: hsl(0deg, 0%, 40%);
   5     --pdt-grey-250: hsl(0deg, 0%, 25%);
   6     --pdt-grey-150: hsl(0deg, 0%, 15%);
   7     --pdt-grey-100: hsl(0deg, 0%, 10%);
   8     --pdt-primary-850: hsl(205deg, 100%, 85%);
   9     --pdt-primary-800: hsl(205deg, 100%, 80%);
  10     --pdt-primary-700: hsl(205deg, 100%, 70%);
  11     --pdt-secondary-850: hsl(250deg, 100%, 85%);
  12 }
  13
  14 /* adjust admonition block spacing. this allows for a background on
  15  * admonition blocks that doesn't make the elements look to tightly
  16  * spaced.
  17  */
  18 div.admonitionblock {
  19     border-radius: 3px;
  20     margin: 1.5em 0;
  21     padding: 0.5em 10% 0.5em 0.5em;
  22 }
  23
  24 div.admonitionblock td.icon {
  25     padding-right: 0.5em;
  26 }
  27
  28 div.admonitionblock td.icon > img {
  29     box-sizing: border-box;
  30     padding: 0.15em;
  31 }
  32
  33 /* Fine-tune headings a bit */
  34 h4 {
  35   font-size: 1.1em;
  36 }
  37 h5 {
  38   font-size: 1.05em;
  39 }
  40 h6 {
  41   font-size: 1.0em;
  42 }
  43
  44 @media screen and (prefers-color-scheme: dark) {
  45     :root {
  46         color-scheme: dark;
  47         --pdt-body-background: var(--pdt-grey-150);
  48         --pdt-text: var(--pdt-grey-950);
  49         --pdt-headline: var(--pdt-primary-800);
  50         --pdt-link: var(--pdt-primary-700);
  51         --pdt-link-visited: var(--pdt-secondary-850);
  52         --pdt-highlighted-text: var(--pdt-primary-850);
  53         --pdt-background-sidebar: var(--pdt-grey-100);
  54         --pdt-background-listings: var(--pdt-grey-100);
  55         --pdt-border: var(--pdt-grey-400);
  56         --pdt-border-alt: var(--pdt-grey-250);
  57         --pdt-table-border: var(--pdt-grey-400);
  58         --pdt-background-admonition: var(--pdt-grey-250);
  59     }
  60
  61     body {
  62         color: var(--pdt-text);
  63         background-color: var(--pdt-body-background);
  64     }
  65
  66     a {
  67         color: var(--pdt-link);
  68     }
  69
  70     a:visited {
  71         color: var(--pdt-link-visited);
  72     }
  73
  74     /* style headlines, titles etc. */
  75     h1,
  76     h2,
  77     h3,
  78     h4,
  79     h5,
  80     h6,
  81     thead,
  82     #author,
  83     #toctitle,
  84     div.title,
  85     td.hdlist1,
  86     caption.title,
  87     p.tableblock.header {
  88         color: var(--pdt-headline);
  89     }
  90
  91     h1,
  92     h2,
  93     h3,
  94     #footer {
  95         border-color: var(--pdt-border);
  96     }
  97
  98     /* formatted colored text */
  99     dt,
 100     em,
 101     pre,
 102     code,
 103     strong,
 104     .monospaced {
 105         color: var(--pdt-highlighted-text);
 106     }
 107
 108     /* style the table of contents sidebar */
 109     div #toc {
 110         color: var(--pdt-text);
 111         background-color: var(--pdt-background-sidebar);
 112         border-color: var(--pdt-border-alt);
 113     }
 114
 115     div #toc a:link,
 116     div #toc a:visited {
 117         color: var(--pdt-text);
 118     }
 119
 120     /* reduce the brigthness of images a bit and make it reversable
 121      * through hovering over them.
 122      */
 123     .image > img {
 124         filter: brightness(90%);
 125     }
 126
 127     .image > img:hover {
 128         filter: none;
 129     }
 130
 131     /* tables */
 132     th.tableblock,
 133     td.tableblock,
 134     table.tableblock {
 135         border-color: var(--pdt-table-border);
 136     }
 137
 138     div.quoteblock,
 139     div.verseblock {
 140         color: var(--pdt-text);
 141         border-color: var(--pdt-border);
 142     }
 143
 144     /* listings (e.g. code snippet blocks) */
 145     div.listingblock > div.content {
 146         background-color: var(--pdt-background-listings);
 147         border-color: var(--pdt-border-alt);
 148     }
 149
 150     /* admonition blocks (e.g. notes, warnings etc.) */
 151     div.admonitionblock {
 152         color: var(--pdt-text);
 153         background-color: var(--pdt-background-admonition);
 154     }
 155
 156     div.admonitionblock td.content {
 157         border-color: var(--pdt-border);
 158     }
 159
 160     /* makes the admonition icons appear a bit more consistent, by
 161      * adding a white background the shadows in the icons look
 162      * "correct"
 163      */
 164     div.admonitionblock td.icon > img {
 165         background-color: white;
 166         border-radius: 100%;
 167         filter: brightness(95%);
 168     }
 169
 170     /* invert the logo */
 171     #header > h1 > .image > img {
 172         filter: invert(100%) hue-rotate(180deg) brightness(90%);
 173     }
 174
 175     /* fixes the black text on unorderd lists */
 176     ul > li > * {
 177         color: var(--pdt-text);
 178     }
 179 }