1* {
2 box-sizing: border-box;
3}
4
5body {
6 background-color: #fafafa;
7 font-family: sans-serif;
8 font-size: 10.5pt;
9 color: #4e4e4e;
10 padding: 0;
11 margin: 0;
12 line-height: 1.45em;
13}
14
15h1 {
16 font-size: 13pt;
17 color: #77216f;
18}
19
20h2 {
21 font-size: 12pt;
22}
23
24h3 {
25 font-size: 11pt;
26}
27
28h1,
29h2,
30h3,
31h4 {
32 margin: 0;
33}
34
35input,
36textarea,
37select,
38summary {
39 border: none;
40 outline: none;
41 font-size: inherit;
42 font-family: inherit;
43 background-color: transparent;
44}
45
46a {
47 text-decoration: none;
48 color: inherit;
49}
50
51img {
52 max-width: 480px;
53}
54
55nav {
56 position: relative;
57 padding: 10px;
58 background-color: #fff;
59}
60
61hr {
62 border: none;
63 border-top: 2px solid #efefef;
64 clear: both;
65 margin: 0;
66}
67
68ul {
69 list-style-type: none;
70 padding: 0;
71 margin: 0;
72}
73
74details:hover {
75 cursor: pointer;
76}
77
78.app {
79 max-width: 800px;
80 margin-left: auto;
81 margin-right: auto;
82 position: relative;
83}
84
85.card {
86 padding: 15px;
87 background-color: #fff;
88 box-shadow: 0px 2px 10px rgba(78, 78, 78, 0.1);
89}
90
91.center {
92 text-align: center;
93}
94
95.m-t-md {
96 margin-top: 10px;
97}
98
99.m-b-sm {
100 margin-bottom: 5px;
101}
102
103.m-b-md {
104 margin-bottom: 10px;
105}
106
107.m-b-xl {
108 margin-bottom: 25px;
109}
110
111.p-l-md {
112 padding-left: 10px;
113}
114
115.p-l-xl {
116 padding-left: 25px;
117}
118.p-b-sm {
119 padding-bottom: 5px;
120}
121
122.m-v-sm {
123 margin-top: 5px;
124 margin-bottom: 5px;
125}
126
127.m-v-lg,
128.card {
129 margin-top: 20px;
130 margin-bottom: 20px;
131}
132
133.button {
134 box-sizing: border-box;
135 display: inline-block;
136 font-weight: bold;
137 padding: 5px 10px;
138 min-width: 90px;
139 border-width: 2px;
140 border-style: solid;
141 cursor: pointer;
142 text-align: center;
143 min-height: 28px;
144 font-family: inherit;
145 white-space: nowrap;
146}
147
148.button-primary {
149 border-color: #77216f;
150 background-color: #77216f;
151 color: #fff;
152}
153
154.button-gray-inverted {
155 border-color: #cecece;
156 background-color: #fff;
157 color: #cecece;
158}
159
160.input-border {
161 border: 1px solid #efefef;
162 border-radius: 3px;
163}
164
165.p-sm {
166 padding: 5px;
167}
168
169.p-xl {
170 padding: 25px;
171}
172
173.flex {
174 display: flex;
175}
176
177.flex-center {
178 align-items: center;
179}
180
181.ws-nowrap {
182 white-space: nowrap;
183}
184
185.nav__breadcrumb {
186 vertical-align: middle;
187 text-decoration: none;
188}
189
190.m-l-md {
191 margin-left: 10px;
192}
193
194.m-l-sm {
195 margin-left: 5px;
196}
197
198.flex__grow {
199 flex-grow: 1;
200}
201
202.aubergine {
203 color: #77216f;
204}
205
206.bold {
207 font-weight: bold;
208}
209
210.underline {
211 text-decoration: underline;
212}
213
214.underline--hover:hover {
215 text-decoration: underline;
216}
217
218.m-v-md {
219 margin-top: 10px;
220 margin-bottom: 10px;
221}
222
223.p-h-md {
224 padding-left: 10px;
225 padding-right: 10px;
226}
227
228.p-v-sm {
229 padding-top: 5px;
230 padding-bottom: 5px;
231}
232
233.p-r-xs {
234 padding-right: 3px;
235}
236
237.staticFlash--success {
238 background: #843e64;
239 border: 1px solid #772953;
240}
241
242.staticFlash--error {
243 background: #e38682;
244 border: 1px solid #da5e58;
245}
246
247.staticFlash {
248 color: #fff;
249 border-radius: 3px;
250 display: inline-block;
251}
252
253.gray {
254 color: #cecece;
255}
256
257.dark-gray {
258 color: #a0a0a0;
259}
260
261.two-col {
262 --moz-column-count: 2;
263 --moz-column-gap: 20px;
264 --webkit-column-count: 2;
265 --webkit-column-gap: 20px;
266 column-count: 2;
267 column-gap: 20px;
268}
269
270.font-small {
271 font-size: 11px;
272}
273
274.p-l-sm {
275 padding-left: 5px;
276}
277
278.border-bottom-sm {
279 border-bottom: 1px solid #c2c2c2;
280}
281
282.background-aubergine {
283 background: #dfd8dd;
284}
285
286.border-box {
287 box-sizing: border-box;
288}
289
290.full-width {
291 width: 100%;
292}
293
294.textarea-v {
295 resize: vertical;
296}
297
298.ws-prewrap {
299 white-space: pre-wrap;
300}
301
302.user-content {
303 position: relative;
304}
305
306.no-margin {
307 margin: 0;
308}
309
310.d-none {
311 display: none;
312}
313
314.user-post {
315 line-height: 1.4em;
316}
317
318.user-post ul,
319.user-post ol {
320 margin-left: 10px;
321 padding-left: 10px;
322}
323
324.user-post ul {
325 list-style: inherit;
326}
327
328.user-post a {
329 text-decoration: underline;
330 color: inherit;
331}
332
333.user-post pre {
334 margin: 0 0 11px;
335 overflow: auto;
336 word-spacing: normal;
337 word-break: normal;
338 word-wrap: normal;
339 padding: 5px;
340 background: #dad7d3;
341}
342
343.user-post code {
344 background: #dad7d3;
345}
346
347.breadcrumb ul {
348 list-style: none;
349}
350
351.breadcrumb li {
352 display: inline;
353}
354
355.breadcrumb li + li:before {
356 color: #cecece;
357 content: ">";
358 padding: 4px;
359}
360
361.avatar {
362 vertical-align: sub;
363 width: 18px;
364 height: 18px;
365 border-radius: 2px;
366 object-fit: cover;
367}
368
369.avatar-big {
370 width: 100px;
371 height: 100px;
372 vertical-align: middle;
373 border-radius: 10px;
374}
375
376/* thanks: https://stackoverflow.com/questions/64167749/what-to-do-if-i-dont-have-a-label-element-to-go-with-an-input-element */
377.hidden {
378 border: 0;
379 padding: 0;
380 margin: 0;
381 position: absolute !important;
382 height: 1px;
383 width: 1px;
384 overflow: hidden;
385 clip: rect(
386 1px 1px 1px 1px
387 ); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
388 clip: rect(
389 1px,
390 1px,
391 1px,
392 1px
393 ); /*maybe deprecated but we need to support legacy browsers */
394 clip-path: inset(
395 50%
396 ); /*modern browsers, clip-path works inwards from each corner*/
397 white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
398}
399
400@media only screen and (max-width: 800px) {
401 .breadcrumb {
402 padding-left: 10px;
403 }
404}
405
406/* dark mode */
407@media (prefers-color-scheme: dark) {
408 body {
409 background-color: #121212;
410 color: #c0c0c0;
411 }
412 nav {
413 background-color: #222222;
414 color: #c0c0c0;
415 }
416 h1 {
417 color: #c016b0;
418 }
419 .aubergine {
420 color: #c016b0;
421 }
422 .card {
423 background-color: #181818;
424 border: #272727 1px solid;
425 }
426 hr {
427 border-top: 2px solid #313131;
428 }
429 .background-aubergine {
430 background: #551f46;
431 }
432 .input-border {
433 border-color: #373737;
434 }
435 .button-primary {
436 color: #ccc;
437 }
438 .button-gray-inverted {
439 border-color: #313131;
440 background-color: #333;
441 color: #c0c0c0;
442 }
443 .gray {
444 color: #888888;
445 }
446
447 .dark-gray {
448 color: #686868;
449 }
450
451 input,
452 textarea {
453 color: #c0c0c0;
454 }
455 input:disabled,
456 textarea:disabled {
457 color: #808080;
458 }
459 .user-post code,
460 .user-post pre {
461 background: #222;
462 }
463 .breadcrumb li + li:before {
464 color: #808080;
465 }
466}