]>
Commit | Line | Data |
---|---|---|
864c4d12 SS |
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 | } |