]> git.plutz.net Git - shellwiki/blob - themes/default.css
79d555ba2359084a4785c5107c59f3a25b47abb1
[shellwiki] / themes / default.css
1 /*
2 # Copyright 2022 - 2024 Paul Hänsch
3
4 # Permission to use, copy, modify, and/or distribute this software for any
5 # purpose with or without fee is hereby granted, provided that the above
6 # copyright notice and this permission notice appear in all copies.
7
8 # THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES
9 # WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
10 # MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
11 # SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
12 # WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
13 # ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
14 # IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
15 */
16
17 html { min-height: 100%; }
18
19 body {
20   position: absolute;
21   width: 100%;
22   min-height: 100%;
23   padding-bottom: 6em;
24   background-color: #EEE;
25   font-size: 12pt;
26 }
27
28 header, footer {
29   background-color: #FFF;
30   box-shadow: 0 0 .75em;
31   width: 100%;
32   z-index: 1;
33 }
34
35 footer {
36   padding-top: .5em;
37   position: absolute;
38   bottom: 0;
39 }
40
41 header > :last-child,
42 main > :last-child {
43   margin-bottom: 0;
44 }
45
46 header h1,
47 header h2,
48 header .menu,
49 footer .menu {
50   display: inline-block;
51 }
52
53 header .menu,
54 footer .menu { list-style: none; }
55
56 header .menu > ul > li,
57 header .menu > ol > li,
58 footer .menu > ul > li,
59 footer .menu > ol > li {
60   display: inline-block;
61   margin-right: .5em;
62   vertical-align: top;
63 }
64
65 header .menu.dropdown li > ul,
66 header .menu.dropdown li > ol {
67   display: none;
68   position: absolute;
69   background-color: #FFF;
70   margin: 0;
71   padding: .25em .5em;
72   padding-left: 1.5em;
73   box-shadow: 0 0 .75em;
74 }
75 header .menu.dropdown li:hover > ul,
76 header .menu.dropdown li:hover > ol {
77   display: table;
78 }
79
80 main .pagemenu {
81   list-style: none;
82   background-color: #666;
83   margin: 0;
84   box-shadow: 0 0 .5em;
85   padding: .25em 2em;
86 }
87 main .pagemenu li {
88   display: inline-block;
89   margin-right: 1em;
90 }
91 main .pagemenu li a { color: #FFF; }
92
93 main article,
94 main > form#renamepage, main > form#movepage,
95 main > form#deletepage, 
96 [id$="/[attachment]"] main > form {
97   margin: 1em;
98   padding: .125em 1em 1em 1em;
99   box-shadow: .25em .25em .75em;
100   background-color: #FFF;
101 }
102
103 main > form#deletepage label[for=delsub] {
104   text-decoration: underline;
105 }
106 main > form#deletepage input#delsub:checked + label + ul li.delsub {
107   text-decoration: line-through;
108 }
109
110 main > form#movepage input,
111 main > form#renamepage input {
112   min-width: 30em;
113   max-width: 100%;
114 }
115
116 [id$="/[revision]"] main .revisions,
117 [id$="/[attachment]"] main > .attachment.list {
118   margin: 1em;
119   padding: 1em 2em;
120 }
121 [id$="/[revision]"] main .revisions:before,
122 [id$="/[attachment]"] main > .attachment.list:before {
123   content: '';
124   position: absolute;
125   top: 0; bottom: 0; left: 0; right: 0;
126   background-color: #FFF;
127   box-shadow: .25em .25em .75em;
128 }
129
130 main code {
131   padding: .125em .25em;
132   background-color: #EEE;
133 }
134 main pre {
135   padding: .5em .5em;
136   background-color: #EEE;
137   max-width: 100%;
138   overflow-x: auto;
139 }
140 main pre > code {
141   padding: 0;
142 }
143
144 li.task > input[type=checkbox][disabled],
145 li.task > p > input[type=checkbox][disabled] {
146   display: none;
147 }
148 li.task > p:first-child { display: inline-block;}
149
150 -li.task:before { font-size: 1.125em; }
151 li.task.pending:before  { content: '\274f  '; color: #222; }
152 li.task.partial:before  { content: '\25d4  '; color: #880; }
153 li.task.negative:before { content: '\2718  '; color: #800; }
154 li.task.done:before     { content: '\2714  '; color: #080; }
155 li.task.unsure:before   { content: '?  '    ; color: #880; font-weight: bold; padding-left: 2pt; }
156
157 /* Alternative Check Symbols, all from "geometric shapes" block */ /*
158 -li.task.pending:before  { content: '\25a1  '; color: #222; }
159 -li.task.partial:before  { content: '\25d4  '; color: #880; }
160 -li.task.negative:before { content: '\25a8  '; color: #800; }
161 -li.task.done:before     { content: '\25a3  '; color: #080; }
162 */
163
164 h1 { text-align: center; }
165 .center { text-align: center; }
166
167 form.newpage, form.search {
168   margin-bottom: 1em;
169 }
170 form.search { text-align: center; }
171 input.search, input[type="search"] {
172   min-width: 50%;
173   max-width: 80%;
174   max-width: calc(100%  - 2.5em);
175 }
176 ul.searchresults, ol.searchresults {
177   margin-left: auto; margin-right: auto;
178   width: 100%; max-width: 540pt;
179   text-align: center;
180 }
181 .searchresults li a {
182   display: block;
183 }
184 .searchresults li p {
185   display: inline-block;
186   margin: 0 auto .5em auto;
187   white-space: pre-line;
188 }
189
190 table {
191   min-width: 50%;
192   margin-left: auto;
193   margin-right: auto;
194 }
195
196 @media(min-width: 540pt) {
197   .half {
198     display: inline-block;
199     width: 50%;
200     padding-right: 1em;
201     vertical-align: top;
202   }
203   h1.half, h2.half, h3.half, h4.half, h5.half, h6.half {
204     width: 50%;
205   }
206   .right {
207     float: right;
208     clear: both;
209     width: 33%;
210     margin: .25em 0 .5em 1em;
211   }
212   .left {
213     float: left;
214     clear: both;
215     width: 33%;
216     margin: .25em 1em .5em 0;
217   }
218   .left .left, .left .right,
219   .right .left, .right .right,
220   .half .left, .half .right {
221     float: none;
222     width: 100%;
223     margin: .25em 0 .5em 0;
224   }
225   section.left  > :first-child,
226   section.right > :first-child {
227     float: none;
228     margin: 0 0 .5em 0;
229   }
230   .left  > section:first-child > :first-child,
231   .right > section:first-child > :first-child {
232     margin-top: 0;
233   }
234   .left table, .right table, .half table {
235     width: 100%;
236   }
237
238   .left  input.search, .left  input[type="search"],
239   .right input.search, .right input[type="search"] {
240     width: 80%;
241     width: calc(100% - 2.5em);
242   }
243   ul.searchresults, ol.searchresults {
244     min-width: 50%;
245   }
246 }
247
248
249 /* === Editor === */
250
251 [id$="/[edit]"] main .pagemenu {
252   margin-bottom: 1em;
253 }
254
255 .tab[name=edithelp] ~ .tab.editor textarea,
256 .tab[name=edithelp] ~ .tab.syntax,
257 .tab[name=edithelp] ~ .tab.attach,
258 .tab[name=edithelp] ~ .tab.transl {
259   background-color: #FFF;
260   min-height: 20em; min-height: 50vh;
261 }
262
263 .tab[name=edithelp] ~ .tab.editor textarea {
264   width: 100%;
265   font-family: monospace;
266   font-size: inherit;
267 }
268
269 .tab[name=edithelp] ~ .tab.attach {
270   padding-top: 1em;
271   padding-left: 7em;
272 }
273 .tab[name=edithelp] ~ .tab.attach .aimg img {
274   float: left;
275   max-height: 4em;
276   margin-left: -6em;
277 }
278
279 .tab[name=edithelp] ~ .tab.transl {
280   font-family: monospace;
281   white-space: pre;
282 }
283
284 .tab[name=edithelp]#editor:checked ~ .tab.editor,
285 .tab[name=edithelp]#syntax:checked ~ .tab.syntax,
286 .tab[name=edithelp]#attach:checked ~ .tab.attach,
287 .tab[name=edithelp]#transl:checked ~ .tab.transl {
288   display: block;
289 }
290
291
292 /* === Attachments === */
293
294 .attachment.list button[name=delete] {
295   font-size: .75em;
296   line-height: 1.25em;
297   margin-right: 1.25em;
298 }
299 .attachment.list .size,
300 .attachment.list .date {
301   font-size: .875em;
302   top: -.25em;
303 }
304
305 .attachment.list .name:after {
306   white-space: pre-line;
307   content: "\0a";
308 }
309 .attachment.list .size {
310   margin-right: 1em;
311 }
312
313 .revisions li { margin: 1em 0; }
314 .revisions li span.hash,
315 .revisions li span.date {
316   margin-right: 1em;
317 }
318
319 .revisions .diff span {
320   font-family: monospace;
321   display: block;
322   white-space: pre;
323   line-height: 1.375em;
324 }
325 .revisions .diff span.linenum { color: #D60; }
326 .revisions .diff span.linedel { color: #A00; }
327 .revisions .diff span.lineadd { color: #0A0; }
328 .revisions .diff span.linenote { color: #AAA; }
329
330
331 [id$="/[attachment]"] input[type=radio].tab ~ div.tab {
332   display: block;
333   padding-top: 1em;
334 }
335 [id$="/[attachment]"] input[type=radio].tab ~ div.tab ul.attachment.list {
336   list-style: none;
337   margin-left: 0;
338 }
339
340 .tab ul li input[name=select],
341 .tab ul li label.name,
342 .tab ul li a.name,
343 .tab ul li input.name {
344   display: none;
345 }
346
347 [id$="/[attachment]"] input[type=radio].tab#tview:checked ~ div.tab ul li a.name,
348 [id$="/[attachment]"] input[type=radio].tab#tdel:checked  ~ div.tab ul li input[name=select],
349 [id$="/[attachment]"] input[type=radio].tab#tdel:checked  ~ div.tab ul li label.name,
350 [id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab ul li input[name=select],
351 [id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab ul li label.name {
352   display: inline;
353 }
354 [id$="/[attachment]"] input[type=radio].tab#tren:checked ~ .tab ul li input.name {
355   display: block;
356 }
357
358 [id$="/[attachment]"] label[for=moveto], [id$="/[attachment]"] input#moveto,
359 [id$="/[attachment]"] button[name=action] { display: none; }
360
361 [id$="/[attachment]"] .upload button[name=action] { display: inline-block; }
362 [id$="/[attachment]"] input[type=radio].tab#tdel:checked  ~ div.tab button[name=action][value=delete],
363 [id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab label[for=moveto],
364 [id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab input#moveto,
365 [id$="/[attachment]"] input[type=radio].tab#tmove:checked ~ div.tab button[name=action][value=move],
366 [id$="/[attachment]"] input[type=radio].tab#tren:checked  ~ div.tab button[name=action][value=rename] {
367   display: inline;
368 }
369
370
371 /* === Macros === */
372
373 .macro.toc {
374   display: inline-block;
375   list-style-position: inside;
376   margin-left: 0;
377   background-color: #DDD;
378   background-color: rgba(0, 0, 0, .125);
379   padding: .75em 1em;
380   border: 1pt solid;
381   border-radius: 2pt;
382 }
383 .macro.toc li.h2 { margin-left: 1.25em; }
384 .macro.toc li.h3 { margin-left: 2.5em; }
385 .macro.toc li.h4 { margin-left: 3.75em; }
386 .macro.toc li.h5 { margin-left: 5em; }
387 .macro.toc li.h6 { margin-left: 6.25em; }
388
389
390 .macro.gallery {
391   text-align: center;
392   margin: 2em 0;
393   padding: .5em .125em;
394   background-color: #444;
395   clear: both;
396 }
397 .macro.gallery img {
398   max-height: 9em;
399   margin: 0 .25em;
400 }
401
402
403 ul.macro.tag { padding: 0; }
404 .macro.tag li.tag {
405   display: inline-block;
406   color: #FFF;
407   background-color: #333;
408   font-size: .875em;
409   padding: 0 .5em;
410   margin: .25em .25em 0 0;
411   border-radius: .375em;
412 }
413
414
415 .macro.changes td .date {
416   display: block;
417   font-size: .75em;
418 }
419 .macro.changes td.outdated,
420 .macro.changes td.current,
421 .macro.changes td.missing {
422   text-align: center;
423 }
424 .macro.changes th { background-color: #EEF; }
425 .macro.changes td { background-color: #DFF; }
426 .macro.changes td.outdated { background-color: #FFD; }
427 .macro.changes td.current  { background-color: #DFD; }
428 .macro.changes td.missing  { background-color: #FDD; }
429
430
431 .macro.calendar.cal_month {
432   border: 1pt solid #AAA;
433   -box-shadow: .25em .25em .75em #AAA;
434 }
435 .macro.calendar.cal_month td {
436   padding: 0 .25em;
437   vertical-align: top;
438 }
439 .macro.calendar.cal_month td > label {
440   display: block;
441   background-color: #F4F4F4;
442   text-align: center;
443   margin-right: 0;
444 }
445 .macro.calendar.cal_month td > ul {
446   padding: .25em 1em;
447   margin-bottom: .125em;
448 }
449 .macro.calendar.cal_month td > ul > li {
450   display: block;
451 }