1
2/* ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ // k o k k o // u t f - 8 // ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ //
3// ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ // k o k k o // u t f - 8 // ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ //
4// ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ // k o k k o // u t f - 8 // ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ */
5
6/* ### ### ### */
7	/* Vars */
8	/* Display */
9	/* Flex */
10	/* Position */
11	/* Settings */
12	/* Font */
13	/* Text */
14	/* Color */
15	/* Box */
16	/* Size */
17
18:root {
19	/* Vars */
20	--title-font: @ini_title_font;
21	--title-text: @ini_title_style;
22	--title-size: @ini_title_size;
23	--title-weight: @ini_title_weight;
24	--main-color: @ini_background;
25	--lite-color: @ini_background_alt;
26	--dark-color: @ini_text_alt;
27	--anti-color: @ini_text;
28	--top-color: @ini_top_color;
29	--mid-color: @ini_mid_color;
30	--bot-color: @ini_bot_color;
31	--out-color: @ini_out_color;
32	--top-color-alpha: @ini_top_alpha_color;
33	--mid-color-alpha: @ini_mid_alpha_color;
34	--bot-color-alpha: @ini_bot_alpha_color;
35	--out-color-alpha: @ini_out_alpha_color;
36	--max-width-content: @ini_site_width;
37	--max-width-sidebar: @ini_sidebar_width;
38	--width-tablet: @ini_tablet_width;
39	--phone-tablet: @ini_phone_width;
40	--font-monospaced: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
41}
42
43[hidden] {
44	/* Display */
45	display: none !important;
46}
47
48/* ### ### ### */
49
50html,
51body {
52	/* Settings */
53	transition-duration: 0.2s;
54	/* Font */
55	font-family: "Verdana", sans-serif;
56	font-size: 12pt;
57	/* Box */
58	padding: 0;
59	border: 0;
60	margin: 0;
61	/* Size */
62	height: 100%;
63	width: 100%;
64}
65
66body,
67#weltis__site,
68#dokuwiki__top {
69	/* Display */
70	display: flex;
71	flex-flow: column nowrap;
72	justify-content: space-between;
73	/* Position */
74	position: relative;
75	/* Font */
76	font-family: inherit;
77	font-size: 0.9rem;
78	/* Color */
79	background: var(--main-color);
80	color: var(--anti-color);
81	/* Size */
82	min-height: 100%;
83	max-height: fit-content;
84}
85
86/* ### ### ### */
87
88::-webkit-scrollbar { width: 0.8rem }
89::-webkit-scrollbar-track { background: var(--lite-color) }
90::-webkit-scrollbar-thumb { background: var(--dark-color) }
91::-webkit-scrollbar-thumb:hover { background: var(--anti-color) }
92
93/* ### ### ### */
94
95div, video, audio, hr, figure, details, fieldset, address {
96	/* Box */
97	padding: 0;
98	margin: 0;
99}
100
101hr, figure, details, fieldset, address {
102	margin: 0 0 1rem 0;
103}
104
105.group:before,
106.group:after {
107	/* Display */
108	display: none;
109}
110
111/* ### ### ### */
112
113:focus-visible {
114	/* Box */
115	outline: .1rem solid var(--dark-color);
116	outline-offset: 1px;
117}
118
119/* ### ### ### */
120
121acronym, abbr {
122	/* Font */
123	font-style: normal;
124	/* Settings */
125	cursor: help;
126}
127
128/* ### ### ### */
129
130div.panelHeader {
131	/* Settings */
132	overflow: hidden;
133	/* Font */
134	font-size: .9rem;
135	/* Text */
136	text-align: left;
137	/* Color */
138	color: var(--main-color);
139	background: var(--lite-color);
140	/* Box */
141	padding: .4rem .5rem;
142}
143
144/* ### ### ### */
145
146p {
147	/* Settings */
148	list-style: none;
149	/* Font */
150	font-family: inherit;
151	font-size: inherit;
152	/* Text */
153	text-decoration: inherit;
154	text-indent: -1rem;
155	/* Color */
156	color: inherit;
157	background: inherit;
158	/* Box */
159	outline: 0;
160	border: 0;
161	padding: 0;
162	padding-left: 1rem;
163	margin: 0 0 1rem 0;
164}
165
166/* ### ### ### */
167
168img.medialeft {
169	/* Box */
170	margin: .4rem 1rem .4rem 0;
171}
172img.mediacenter {
173	/* Box */
174	margin: .4rem auto;
175}
176img.mediaright {
177	/* Box */
178	margin: .4rem 0 .4rem 1rem;
179}
180
181img.icon {
182	/* Position */
183	vertical-align: middle;
184}
185
186/* ### ### ### */
187
188sub, sup {
189	/* Font */
190	font-size: .7rem;
191	/* Settings */
192	line-height: 1;
193}
194
195/* ### ### ### */
196
197blockquote {
198	/* Box */
199	padding: .4rem .8rem;
200	border-left: .3rem solid var(--dark-color);
201	margin: 0 0 1rem 0;
202}
203
204blockquote blockquote {
205	/* Box */
206	margin: .3rem 0;
207}
208
209blockquote p {
210	/* Text */
211	text-indent: 0;
212	/* Box */
213	padding-left: 0;
214}
215
216/* ### ### ### */
217
218pre, samp, kbd, code {
219	/* Settings */
220	overflow: auto;
221	direction: ltr;
222	word-wrap: normal;
223	/* Font */
224	font-family: var(--font-monospaced) ! important;
225	font-size: inherit;
226	/* Text */
227	text-align: left;
228	direction: ltr;
229	/* Color */
230	color: var(--main-color);
231	background-color: var(--dark-color);
232	/* Box */
233	padding: .1rem .3rem;
234}
235pre {
236	/* Box */
237	padding: .7rem 1rem;
238}
239
240/* ### ### ### */
241
242div.table {
243	/* Settings */
244	overflow-x: auto;
245	/* Box */
246	margin: 0 0 1rem 0;
247}
248div.table ::-webkit-scrollbar { width: 0.2rem }
249
250div.table table {
251	/* Box */
252	margin: 0 0 0 0;
253}
254
255table {
256	/* Settings */
257	border-collapse: collapse;
258	empty-cells: show;
259	/* Color */
260	color: var(--main-color);
261	background: var(--lite-color);
262	/* Box */
263	padding: 0;
264	border: .1rem solid var(--anti-color);
265	border-spacing: 0;
266	margin: 0 0 1rem 0;
267}
268
269table.diagram {
270	/* Color */
271	color: var(--anti-color);
272	background: var(--main-color);
273	/* Size */
274	max-width: 100%;
275}
276
277th, td {
278	/* Settings */
279	vertical-align: top;
280	/* Text */
281	text-align: left;
282	/* Box */
283	padding: .3rem .5rem;
284	border: .1rem solid var(--anti-color);
285	margin: 0;
286}
287
288th {
289	/* Font */
290	font-weight: bold;
291	/* Color */
292	background: var(--dark-color);
293}
294
295table.inline {
296	/* Size */
297	min-width: 50%;
298}
299
300table.inline tr:hover th {
301	/* Color */
302	background: var(--anti-color);
303}
304table.inline tr:hover td {
305	/* Color */
306	background: var(--dark-color);
307}
308
309/* ### ### ### */
310
311select {
312	/* Position */
313	position: relative;
314	/* Settings */
315	cursor: inherit;
316	line-height: inherit;
317	/* Font */
318	font-family: inherit;
319	font-size: inherit;
320	/* Color */
321	color: inherit;
322	background-color: var(--main-color);
323	/* Box */
324	padding: .1rem .2rem;
325	outline: 0;
326	border: .1rem solid var(--lite-color);
327	margin: 0;
328	/* Size */
329	max-width: 100%;
330}
331select:hover,
332select:active {
333	/* Box */
334	outline: .1rem solid var(--dark-color);
335	outline-offset: 0;
336}
337
338/* ### ### ### */
339
340textarea.edit {
341	/* Settings */
342	resize: vertical;
343	/* Font */
344	font-family: var(--font-monospaced);
345	/* Color */
346	color: var(--main-color);
347	background-color: var(--anti-color);
348	/* Box */
349	border: .1rem solid var(--lite-color);
350	margin-bottom: .5rem;
351	/* Size */
352	width: 100%;
353}
354
355/* ### ### ### */
356
357hr {
358	/* Box */
359	border: solid var(--lite-color);
360	border-width: .1rem 0 0 0;
361}
362
363/* ### ### ### */
364
365form {
366	/* Display */
367	display: inline;
368	/* Box */
369	border: none;
370}
371
372form fieldset {
373	/* Display */
374	display: flex;
375	flex-flow: column nowrap;
376	gap: .2rem;
377	/* Text */
378	text-align: center;
379	/* Box */
380	padding: 1rem;
381	border: .1rem solid var(--lite-color);
382	margin: 2rem auto 3rem auto;
383	/* Size */
384	width: 75%;
385}
386
387/* ### ### ### */ /* ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */
388
389h1 a {
390	/* Text */
391	text-decoration: none !important;
392	/* Color */
393	color: inherit !important;
394}
395
396a:link:hover,
397a:link:focus,
398a:link:active,
399a:visited:hover,
400a:visited:focus,
401a:visited:active {
402	/* Text */
403	text-decoration: underline;
404}
405a:link, a:visited {
406	/* Text */
407	text-decoration: none;
408	/* Color */
409	color: var(--top-color);
410}
411
412a.wikilink1 {
413	/* Color */
414	color: var(--mid-color);
415	background-color: inherit;
416}
417a.wikilink2 {
418	/* Color */
419	color: var(--bot-color);
420	background-color: inherit;
421}
422a.urlextern,
423a.windows,
424a.mail,
425a.mediafile,
426a.interwiki {
427	/* Position */
428	position: relative;
429	/* Settings */
430	background-repeat: no-repeat;
431	background-position: 0 center;
432	/* Box */
433	padding-left: 20px;
434}
435
436a.urlextern {
437	/* Settings */
438	background-image: url("images/world.png");
439}
440a.mail {
441	/* Settings */
442	background-image: url("images/mail.png");
443}
444
445/* ### ### ### */ /* ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### ### */
446
447li ul,
448li ol,
449li dl,
450dl ul,
451dl ol,
452dl dl {
453	margin-bottom: 0;
454	padding: 0;
455}
456
457dl {
458	margin: 0;
459	padding: 0;
460}
461
462ul,
463ol {
464	/* Box */
465	padding: 0 0 0 1rem;
466	margin: 0 0 1rem 0;
467}
468
469li,
470dd {
471	/* Box */
472	padding: 0;
473	margin: 0 0 0 1.5em;
474}
475
476dt {
477	font-weight: bold;
478	padding: 0;
479	margin: 0;
480}
481
482ul {
483	/* Settings */
484	list-style: square outside;
485}
486
487li {
488	/* Display */
489	display: list-item;
490}
491
492li::marker {
493	/* Color */
494	color: var(--lite-color);
495}
496
497ul.idx {
498	/* Box */
499	padding-left: 0;
500}
501
502ul.tabs,
503ul.tabs li {
504	/* Dsiplay */
505	display: flex;
506	/* Settings */
507	line-height: 1;
508	list-style: none;
509	/* Font */
510	font-size: .9rem;
511	font-weight: normal;
512	/* Box */
513	padding: 0;
514	margin: 0;
515	/* Size */
516	width: fit-content;
517}
518
519ul.tabs li strong,
520ul.tabs li a {
521	/* Position */
522	position: relative;
523	z-index: 2;
524	/* Settings */
525	list-style: none;
526	white-space: nowrap;
527	/* Font */
528	font-weight: normal;
529	/* Text */
530	text-decoration: none ! important;
531	/* Color */
532	color: var(--main-color);
533	background-color: var(--lite-color);
534	/* Box */
535	padding: .4rem .8rem;
536	margin: 0 .1rem 0 .2rem;
537}
538ul.tabs li a {
539	/* Color */
540	background-color: var(--dark-color);
541}
542ul.tabs li a:hover {
543	/* Color */
544	background-color: var(--lite-color);
545}
546
547/* ### ### ### */
548
549label {
550	/* Position */
551	vertical-align: middle;
552	/* Settings */
553	cursor: pointer;
554	/* Text */
555	text-align: center;
556}
557
558label.block {
559	/* Display */
560	display: block;
561	/* Font */
562	font-size: .8rem;
563	font-weight: bold;
564	/* Text */
565	text-align: right;
566}
567label.block input.edit {
568	/* Size */
569	width: 50%;
570}
571
572label.simple {
573	/* Display */
574	display: block;
575	/* Font */
576	font-weight: normal;
577	/* Text */
578	text-align: left;
579	/* Box */
580	padding: 0 .5rem;
581	margin-bottom: .5rem;
582}
583
584/* ### ### ### */
585
586button {
587	/* Position */
588	vertical-align: middle;
589	/* Settings */
590	cursor: pointer;
591	/* Font */
592	font-family: inherit;
593	font-size: inherit;
594	/* Color */
595	color: var(--main-color);
596	background-color: var(--dark-color);
597	/* Box */
598	padding: .2rem .5rem;
599	outline: 0;
600	border: .1rem solid var(--anti-color);
601	margin: .1rem .2rem;
602}
603
604button:hover {
605	/* Color */
606	color: var(--main-color);
607	background-color: var(--lite-color);
608}
609
610button:focus-visible {
611	/* Box */
612	outline: .1rem solid var(--dark-color);
613	outline-offset: 1px;
614}
615
616button:active {
617	/* Color */
618	color: var(--anti-color);
619	background-color: var(--main-color);
620}
621
622form.search button {
623	/* Text */
624	text-indent: -999rem ! important;
625	/* Color */
626	background: transparent url("images/search.png") no-repeat 0 0;
627	background-size: 1rem;
628	/* Box */
629	padding: 0;
630	border: 0;
631	/* Size */
632	height: 1rem;
633	width: 1rem;
634}
635
636/* ### ### ### */
637
638input {
639	/* Font */
640	font: inherit;
641	font-weight: revert;
642	/* Color */
643	color: inherit;
644	background: inherit;
645	/* Box */
646	padding: .1rem .2rem;
647	outline: 0;
648	border: .1rem solid var(--anti-color);
649	margin: 0;
650}
651input:hover, input:focus, input:active {
652}
653input:focus-visible {
654	/* Box */
655	outline: .1rem solid var(--anti-color);
656	outline-offset: 0;
657}
658input::placeholder {
659	/* Color */
660	color: var(--lite-color);
661}
662
663input[type="checkbox"] {
664	/* Position */
665	vertical-align: text-bottom;
666	/* Settings */
667	cursor: pointer;
668	appearance: none;
669	/* Font */
670	font: inherit;
671	/* Color */
672	color: var(--anti-color);
673	background: var(--main-color);
674	/* Box */
675	border: .1rem solid var(--anti-color);
676	margin: 0;
677	/* Size */
678	height: 1rem;
679	width: 1rem;
680}
681input[type="checkbox"]:focus-visible {
682	/* Box */
683	outline: .1rem solid var(--dark-color);
684}
685input[type="checkbox"]:checked {
686	/* Color */
687	/*background: var(--dark-color) !important;*/
688	background: linear-gradient(60deg, var(--top-color) 15%, var(--mid-color) 50%, var(--bot-color) 80%) !important;
689}
690
691/* ### ### ### */
692
693input[disabled],
694button[disabled],
695select[disabled],
696textarea[disabled],
697option[disabled],
698input[readonly],
699button[readonly],
700select[readonly],
701textarea[readonly] {
702	/* Settings */
703	cursor: auto;
704	opacity: .5;
705}
706
707/* ### ### ### */
708
709h3.toggle {
710	/* Font */
711	font-size: .9rem;
712	font-weight: bold;
713	/* Settings */
714	letter-spacing: .1rem;
715	/* Box */
716	padding: .5rem 1rem;
717	margin: 0;
718}
719
720h3.toggle strong > span {
721	/* Position */
722	vertical-align: text-bottom;
723	/* Box */
724	margin: 0 1rem 0 0;
725}
726
727/* ### ### ### */
728
729.secedit {
730	/* Position */
731	float: right;
732	/* Box */
733	margin-top: -1.2rem;
734}
735.secedit button {
736	/* Font */
737	font-size: .7rem;
738}
739
740/* ### ### ### */
741
742div.section_highlight {
743	/* Box */
744	outline: .1rem solid var(--lite-color);
745	outline-offset: .2rem;
746}
747
748/* ### ### ### */
749
750.search_hit {
751	/* Color */
752	color: var(--anti-color);
753	background-color: var(--out-color);
754}
755
756/* ### ### ### */
757
758.JSpopup {
759	/* Position */
760	position: absolute;
761	z-index: 9;
762	/* Font */
763	font-size: .9rem;
764	/* Settings */
765	overflow: hidden;
766	/* Color */
767	color: var(--anti-color);
768	background-color: var(--main-color);
769	/* Box */
770	padding: 0.3rem 0.5rem;
771	border: 1px solid var(--lite-color);
772}
773
774/* ### ### ### */
775
776#screen__mode {
777	/* Position */
778	position: absolute;
779	z-index: 0;
780}
781@media only screen and (max-width: @ini_tablet_width) {
782	#screen__mode {
783		/* Position */
784		z-index: 1;
785	}
786}
787@media only screen and (max-width: @ini_phone_width) {
788	#screen__mode {
789		/* Position */
790		z-index: 2;
791	}
792}
793
794/* ### ### ### */
795
796