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 @media screen and (prefers-color-scheme: dark) {
  34     :root {
  35         color-scheme: dark;
  36         --pdt-body-background: var(--pdt-grey-150);
  37         --pdt-text: var(--pdt-grey-950);
  38         --pdt-headline: var(--pdt-primary-800);
  39         --pdt-link: var(--pdt-primary-700);
  40         --pdt-link-visited: var(--pdt-secondary-850);
  41         --pdt-highlighted-text: var(--pdt-primary-850);
  42         --pdt-background-sidebar: var(--pdt-grey-100);
  43         --pdt-background-listings: var(--pdt-grey-100);
  44         --pdt-border: var(--pdt-grey-400);
  45         --pdt-border-alt: var(--pdt-grey-250);
  46         --pdt-table-border: var(--pdt-grey-400);
  47         --pdt-background-admonition: var(--pdt-grey-250);
  48     }
  49
  50     body {
  51         color: var(--pdt-text);
  52         background-color: var(--pdt-body-background);
  53     }
  54
  55     a {
  56         color: var(--pdt-link);
  57     }
  58
  59     a:visited {
  60         color: var(--pdt-link-visited);
  61     }
  62
  63     /* style headlines, titles etc. */
  64     h1,
  65     h2,
  66     h3,
  67     h4,
  68     h5,
  69     h6,
  70     thead,
  71     #author,
  72     #toctitle,
  73     div.title,
  74     td.hdlist1,
  75     caption.title,
  76     p.tableblock.header {
  77         color: var(--pdt-headline);
  78     }
  79
  80     h1,
  81     h2,
  82     h3,
  83     #footer {
  84         border-color: var(--pdt-border);
  85     }
  86
  87     /* formatted colored text */
  88     dt,
  89     em,
  90     pre,
  91     code,
  92     strong,
  93     .monospaced {
  94         color: var(--pdt-highlighted-text);
  95     }
  96
  97     /* style the table of contents sidebar */
  98     div #toc {
  99         color: var(--pdt-text);
 100         background-color: var(--pdt-background-sidebar);
 101         border-color: var(--pdt-border-alt);
 102     }
 103
 104     div #toc a:link,
 105     div #toc a:visited {
 106         color: var(--pdt-text);
 107     }
 108
 109     /* reduce the brigthness of images a bit and make it reversable
 110      * through hovering over them.
 111      */
 112     .image > img {
 113         filter: brightness(90%);
 114     }
 115
 116     .image > img:hover {
 117         filter: none;
 118     }
 119
 120     /* tables */
 121     th.tableblock,
 122     td.tableblock,
 123     table.tableblock {
 124         border-color: var(--pdt-table-border);
 125     }
 126
 127     div.quoteblock,
 128     div.verseblock {
 129         color: var(--pdt-text);
 130         border-color: var(--pdt-border);
 131     }
 132
 133     /* listings (e.g. code snippet blocks) */
 134     div.listingblock > div.content {
 135         background-color: var(--pdt-background-listings);
 136         border-color: var(--pdt-border-alt);
 137     }
 138
 139     /* admonition blocks (e.g. notes, warnings etc.) */
 140     div.admonitionblock {
 141         color: var(--pdt-text);
 142         background-color: var(--pdt-background-admonition);
 143     }
 144
 145     div.admonitionblock td.content {
 146         border-color: var(--pdt-border);
 147     }
 148
 149     /* makes the admonition icons appear a bit more consistent, by
 150      * adding a white background the shadows in the icons look
 151      * "correct"
 152      */
 153     div.admonitionblock td.icon > img {
 154         background-color: white;
 155         border-radius: 100%;
 156         filter: brightness(95%);
 157     }
 158
 159     /* invert the logo */
 160     #header > h1 > .image > img {
 161         filter: invert(100%) hue-rotate(180deg) brightness(90%);
 162     }
 163
 164     /* fixes the black text on unorderd lists */
 165     ul > li > * {
 166         color: var(--pdt-text);
 167     }
 168 }