1/**
2 * This file provides the most basic styles.
3 *
4 * If you integrate DokuWiki into another project, you might either
5 * want to integrate this file into the other project as well, or use
6 * the other project's basic CSS for DokuWiki instead of this one.
7 *
8 * @author Anika Henke <anika@selfthinker.org>
9 */
10
11:root {
12    --color-white: #fff;
13
14    --color-dark-0: #c9c9c9;
15    --color-dark-1: #b8b8b8;
16    --color-dark-2: #828282;
17    --color-dark-3: #696969;
18    --color-dark-4: #424242;
19    --color-dark-5: #3b3b3b;
20    --color-dark-6: #2e2e2e;
21    --color-dark-7: #242424;
22    --color-dark-8: #1F1F1F;
23    --color-dark-9: #141414;
24
25    --color-gray-4:#ced4da;
26    --color-gray-7: #495057;
27    --color-gray-8: #343a40;
28
29    --color-blue-3: #74c0fc;
30    --color-blue-4: #4dabf7;
31    --color-blue-8: #1971c2;
32    --color-blue-9: #1864ab;
33    --color-blue-light: rgba(34,139,230,.15);
34    --color-blue-light-hover: rgba(34,139,230,.2);
35
36    --color-green-3: #8ce99a;
37    --color-green-6: #40c057;
38    --color-green-light: rgba(64,192,87,.15);
39    --color-green-light-hover: rgba(64,192,87,.2);
40
41    --color-red-3: #ffa8a8;
42    --color-red-4: #ff8787;
43    --color-red-5: #FF6B6B;
44    --color-red-8: #e03131;
45    --color-red-light: rgba(250,82,82,.15);
46    --color-red-light-hover: rgba(250,82,82,.2);
47
48    --color-yellow-3: #ffe066;
49    --color-yellow-5: #fcc419;
50    --color-yellow-light: rgba(250,176,5,.15);
51    --color-yellow-light-hover: rgba(250,176,5,.2);
52
53    --color-orange-3: #ffc078;
54    --color-orange-5: #ff922b;
55    --color-orange-light: rgba(253,126,20,0.15);
56
57    --color-violet-3: #b197fc;
58
59    --color-grape-3: #e599f7;
60    --color-grape-light: rgba(190,75,219,0.15);
61
62    --color-cyan-3: #66d9e8;
63    --color-cyan-light: rgba(21,170,191,.15);
64
65    --radius-sm: 0.25rem;
66}
67
68html {
69    overflow-x: auto;
70    overflow-y: scroll;
71}
72html,
73body {
74    color: @ini_text;
75    background: @ini_background_site;
76    margin: 0;
77    padding: 0;
78}
79body {
80    font: normal 87.5%/1.4 Helvetica, Arial, sans-serif;
81    /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
82    -webkit-text-size-adjust: 100%;
83}
84
85
86/*____________ headers ____________*/
87
88caption,
89figcaption,
90summary,
91legend {
92    padding: 0;
93    margin: 0 0 .35em;
94    line-height: 1.2;
95}
96h1,
97h2,
98h3,
99h4,
100h5,
101h6 {
102    color: var(--color-white);
103    font-weight: bold;
104    padding: 0;
105    line-height: 1.2;
106    clear: left; /* ideally 'both', but problems with toc */
107}
108[dir=rtl] h1,
109[dir=rtl] h2,
110[dir=rtl] h3,
111[dir=rtl] h4,
112[dir=rtl] h5,
113[dir=rtl] h6 {
114    clear: right;
115}
116
117h1 {
118    font-size: 2em;
119    margin: 0 0 0.444em;
120}
121h2 {
122    font-size: 1.5em;
123    margin: 0 0 0.666em;
124}
125h3 {
126    font-size: 1.125em;
127    margin: 0 0 0.888em;
128}
129h4 {
130    font-size: 1em;
131    margin: 0 0 1.0em;
132}
133h5 {
134    font-size: .875em;
135    margin: 0 0 1.1428em;
136}
137h6 {
138    font-size: .75em;
139    margin: 0 0 1.333em;
140}
141/* bottom margin = 1 / font-size */
142
143
144/*____________ basic margins and paddings ____________*/
145
146p,
147ul,
148ol,
149dl,
150pre,
151table,
152hr,
153blockquote,
154figure,
155details,
156fieldset,
157address {
158    margin: 0 0 1.4em 0; /* bottom margin = line-height */
159    padding: 0;
160}
161
162div,
163video,
164audio {
165    margin: 0;
166    padding: 0;
167}
168
169
170/*____________ lists ____________*/
171
172ul,
173ol {
174    padding: 0 0 0 1.5em;
175}
176[dir=rtl] ul,
177[dir=rtl] ol {
178    padding: 0 1.5em 0 0;
179}
180
181li,
182dd {
183    padding: 0;
184    margin: 0 0 0 1.5em;
185}
186[dir=rtl] li,
187[dir=rtl] dd {
188    margin: 0 1.5em 0 0;
189}
190dt {
191    font-weight: bold;
192    margin: 0;
193    padding: 0;
194}
195
196li ul,
197li ol,
198li dl,
199dl ul,
200dl ol,
201dl dl {
202    margin-bottom: 0;
203    padding: 0;
204}
205li li {
206    font-size: 100%;
207}
208
209ul             { list-style: disc outside; }
210ol             { list-style: decimal outside; }
211ol ol          { list-style-type: lower-alpha; }
212ol ol ol       { list-style-type: upper-roman; }
213ol ol ol ol    { list-style-type: upper-alpha; }
214ol ol ol ol ol { list-style-type: lower-roman; }
215
216
217/*____________ tables ____________*/
218
219table {
220    border-collapse: collapse;
221    empty-cells: show;
222    border-spacing: 0;
223    border: 1px solid @ini_border;
224}
225
226caption {
227    caption-side: top;
228    text-align: left;
229}
230[dir=rtl] caption {
231    text-align: right;
232}
233
234th,
235td {
236    padding: .3em .5em;
237    margin: 0;
238    vertical-align: top;
239    border: 1px solid @ini_border;
240}
241th {
242    font-weight: bold;
243    background-color: @ini_background_alt;
244    text-align: left;
245}
246[dir=rtl] th {
247    text-align: right;
248}
249
250
251/*____________ links ____________*/
252
253a {
254    outline: none;
255}
256a:link,
257a:visited {
258    text-decoration: none;
259    color: @ini_link;
260}
261a:link:hover,
262a:visited:hover,
263a:link:focus,
264a:visited:focus,
265a:link:active,
266a:visited:active {
267    text-decoration: underline;
268}
269
270
271/*____________ misc ____________*/
272
273img {
274    border-width: 0;
275    vertical-align: middle;
276    color: #666;
277    background-color: transparent;
278    font-style: italic;
279    object-fit: cover;
280}
281video {
282    height: auto;
283}
284img,
285object,
286embed,
287iframe,
288video,
289audio {
290    max-width: 100%;
291}
292button img {
293    max-width: none;
294}
295table img {
296    max-width: 50vw;
297}
298
299hr {
300    border-top: solid @ini_border;
301    border-bottom: solid @ini_background;
302    border-width: 1px 0;
303    height: 0;
304    text-align: center;
305    clear: both;
306}
307
308acronym,
309abbr {
310    cursor: help;
311    border-bottom: 1px dotted;
312    text-decoration: none;
313    font-style: normal;
314}
315em acronym,
316em abbr {
317    font-style: italic;
318}
319
320mark {
321    background-color: @ini_highlight;
322    color: inherit;
323}
324
325pre,
326code,
327samp,
328kbd {
329    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
330    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
331    font-size: 1em;
332    direction: ltr;
333    text-align: left;
334    background-color: @ini_background_site;
335    color: @ini_text;
336    box-shadow: inset 0 0 .3em @ini_border;
337    border-radius: 2px;
338}
339pre {
340    overflow: auto;
341    word-wrap: normal;
342    border: 1px solid @ini_border;
343    border-radius: 2px;
344    box-shadow: inset 0 0 .5em @ini_border;
345    padding: .7em 1em;
346}
347
348blockquote {
349    padding: 0 .5em;
350    border: solid @ini_border;
351    border-width: 0 0 0 .25em;
352}
353[dir=rtl] blockquote {
354    border-width: 0 .25em 0 0;
355}
356q:before,
357q:after {
358    content: '';
359}
360
361sub,
362sup {
363    font-size: .8em;
364    line-height: 1;
365}
366sub {
367    vertical-align: sub;
368}
369sup {
370    vertical-align: super;
371}
372
373small {
374    font-size: .8em;
375}
376
377wbr {
378    display: inline-block; /* for IE 11 */
379}
380
381/*____________ forms ____________*/
382
383/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */
384
385form {
386    display: inline;
387    margin: 0;
388    padding: 0;
389}
390fieldset {
391    padding: .7em 1em 0;
392    padding: .7rem 1rem; /* for those browsers understanding :last-child */
393    border: 1px solid @ini_text_alt;
394}
395// fieldset > :last-child {
396//     margin-bottom: 0;
397// }
398legend {
399    margin: 0;
400    padding: 0 .1em;
401}
402label {
403    vertical-align: middle;
404    cursor: pointer;
405}
406
407input,
408textarea,
409button,
410select,
411optgroup,
412option,
413keygen,
414output,
415meter,
416progress {
417    font: inherit;
418    font-weight: normal;
419    color: var(--color-dark-0);
420    background-color: var(--color-dark-6);
421    line-height: normal;
422    margin: 0;
423    vertical-align: middle;
424    box-sizing: border-box;
425}
426
427select {
428    max-width: 100%;
429}
430optgroup {
431    font-style: italic;
432    font-weight: bold;
433}
434option {
435    font-style: normal;
436    font-weight: normal;
437}
438option:checked {
439    background-color: #ccc;
440}
441
442input,
443textarea,
444select,
445keygen {
446    border: 1px solid var(--color-dark-4);
447    border-radius: var(--radius-sm);
448}
449input:active,
450input:focus,
451textarea:active,
452textarea:focus,
453select:active,
454select:focus,
455keygen:active,
456keygen:focus {
457    border-color: var(--color-blue-8);
458}
459input[type=radio],
460input[type=checkbox],
461input[type=image] {
462    padding: 0;
463    border-style: none;
464    box-shadow: none;
465}
466
467input[type=checkbox] {
468    accent-color: var(--color-blue-4);
469}
470
471/* all types of buttons */
472input[type=submit],
473input[type=button],
474input[type=reset],
475input.button,
476a.button,
477button,
478.qq-upload-button {
479    color: var(--color-white);
480    background-color: var(--color-blue-8);
481    border-radius: 0.25rem;
482    padding: 0.5rem 1.125rem;
483    cursor: pointer;
484    font-weight: 600;
485    margin: 0.125rem;
486    border: solid 1px var(--color-blue-8);
487}
488
489input[type=submit]:hover,
490input[type=submit]:active,
491input[type=submit]:focus,
492input[type=button]:hover,
493input[type=button]:active,
494input[type=button]:hover,
495input[type=reset]:hover,
496input[type=reset]:active,
497input[type=reset]:hover,
498input.button:hover,
499input.button:active,
500input.button:focus,
501a.button:hover,
502a.button:active,
503a.button:focus,
504button:hover,
505button:active,
506button:focus,
507.qq-upload-button:hover {
508    background-color: var(--color-blue-9);
509    border-color: var(--color-blue-9);
510}
511
512input::-moz-focus-inner,
513button::-moz-focus-inner {
514    border: 0;
515    padding: 0;
516}
517
518input[disabled],
519button[disabled],
520select[disabled],
521textarea[disabled],
522option[disabled],
523input[readonly],
524button[readonly],
525select[readonly],
526textarea[readonly] {
527    cursor: auto;
528    opacity: .5;
529    background-color: #eee;
530}
531
532button[disabled] {
533    cursor: not-allowed;
534    background-color: var(--color-dark-6);
535    border: solid 1px var(--color-dark-6);
536    color: var(--color-dark-3);
537    opacity: 1;
538}
539
540button[type="reset"] {
541    background-color: rgba(250,82,82,.15);
542    color: var(--color-red-3);
543    border-color: transparent;
544}
545
546button[type="reset"]:hover {
547    background-color: var(--color-red-light-hover);
548}
549
550button[name="regen"] {
551    background-color: rgba(250,176,5,.15);
552    color: var(--color-yellow-3);
553    border-color: transparent;
554}
555
556button[name="regen"]:hover {
557    background-color: rgba(250,176,5,.2);
558}
559
560/* Success info box */
561div.success {
562    background-color: rgba(64,192,87,.15);
563    border: none;
564    color: var(--color-white);
565    padding: 0.75rem 2.25rem;
566    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="%238ce99a" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>');
567}
568
569// Select control
570.dokuwiki select.edit {
571    padding: 0.3125rem 0.5rem !important;
572}
573
574.dokuwiki select.edit:focus {
575    outline: none;
576}
577
578// in-line code
579pre, code, samp, kbd {
580    font-family: Consolas, Liberation Mono, Courier New, monospace;
581    background-color: var(--color-dark-5);
582    color: var(--color-white);
583    padding: 0.125rem 0.3125rem;
584    font-size: 0.75rem;
585    border-radius: 0.25rem;
586}
587
588// code highlight
589pre {
590    box-shadow: none;
591    background-color: var(--color-dark-6);
592    color: var(--color-white);
593    border-radius: 0.25rem;
594}
595
596pre li div:first-child {
597    border-left: solid 1px var(--color-dark-3);
598}
599
600.code .ln-xtra {
601    background-color: rgba(250,176,5,.15);
602}
603
604.code li::marker, .code::marker .li1::marker {
605    color: var(--color-dark-1);
606}
607
608// custom code highlight colors
609
610.code .kw1,
611.code .kw8 {
612    color: var(--color-violet-3);
613}
614
615.code .br0,
616.code .sy0 {
617    color: var(--color-dark-1);
618}
619
620.code .kw13,
621.code .kw14,
622.code .kw15,
623.code .kw16,
624.code .me1,
625.code .me2 {
626    color: var(--color-orange-5);
627}
628
629.code .re1,
630.code .st0,
631.code .st_h {
632    color: var(--color-green-6);
633}
634
635.code .co1,
636.code .coMULTI,
637.code .sc-1 {
638    color: #98C379;
639}
640
641.code .kw2 {
642    color: #CF68E1;
643}
644
645// top links
646a[title="Update Profile"],
647a[title="Admin"],
648a[title="Log Out"] {
649    position: relative;
650    padding-left: 1.25rem;
651}
652a[title="Update Profile"] svg,
653a[title="Admin"] svg,
654a[title="Log Out"] svg {
655    display: none;
656}
657
658a[title="Update Profile"]::before,
659a[title="Admin"]::before,
660a[title="Log Out"]::before {
661    position: absolute;
662    top: -0.125rem;
663    left: 0;
664}
665
666a[title="Update Profile"]::before {
667    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-circle" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23696969" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" /></svg>');
668}
669
670a[title="Update Profile"]:hover:before {
671    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-circle" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" /></svg>');
672}
673
674a[title="Admin"]::before {
675    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23696969" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>');
676}
677
678a[title="Admin"]:hover::before {
679    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>');
680}
681
682a[title="Log Out"]::before {
683    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-logout" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23696969" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" /><path d="M9 12h12l-3 -3" /><path d="M18 15l3 -3" /></svg>');
684}
685
686a[title="Log Out"]:hover::before {
687    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-logout" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" /><path d="M9 12h12l-3 -3" /><path d="M18 15l3 -3" /></svg>');
688}
689
690// custom WRAP boxes
691.dokuwiki div.wrap_info,
692.dokuwiki div.wrap_important,
693.dokuwiki div.wrap_alert,
694.dokuwiki div.wrap_tip,
695.dokuwiki div.wrap_help,
696.dokuwiki div.wrap_todo,
697.dokuwiki div.wrap_download {
698    border-radius: 0.25rem;
699    padding: 1rem;
700    padding-left: 3rem;
701    color: var(--color-white);
702    margin-bottom: 1.5em !important;
703    position: relative;
704    min-height: 0;
705}
706
707.dokuwiki div.wrap_info p,
708.dokuwiki div.wrap_important p,
709.dokuwiki div.wrap_alert p,
710.dokuwiki div.wrap_tip p,
711.dokuwiki div.wrap_help p,
712.dokuwiki div.wrap_todo p,
713.dokuwiki div.wrap_download p {
714    margin-bottom: 0;
715}
716
717.dokuwiki div.wrap_info::before,
718.dokuwiki div.wrap_important::before,
719.dokuwiki div.wrap_alert::before,
720.dokuwiki div.wrap_tip::before,
721.dokuwiki div.wrap_help::before,
722.dokuwiki div.wrap_todo::before,
723.dokuwiki div.wrap_download::before {
724    position: absolute;
725    top: 0.55rem;
726    left: 0.55rem;
727}
728
729.dokuwiki div.wrap_info {
730    background-color: rgba(34,139,230,.15);
731    background-image: none;
732}
733
734.dokuwiki div.wrap_info::before {
735    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle" width="42" height="50" viewBox="-4 6 42 30" stroke-width="2" stroke="%2374c0fc" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>');
736}
737
738.dokuwiki div.wrap_tip {
739    background-color: rgba(250,176,5,.15);
740    background-image: none;
741}
742
743.dokuwiki div.wrap_tip::before {
744    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bulb" width="42" height="50" viewBox="-4 6 42 30" stroke-width="2" stroke="%23ffe066" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" /><path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" /><path d="M9.7 17l4.6 0" /></svg>');
745}
746
747.dokuwiki div.wrap_important {
748    background-color: rgba(253,126,20,.15);
749    background-image: none;
750}
751
752.dokuwiki div.wrap_important::before {
753    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" width="42" height="50" viewBox="-4 6 42 30" stroke-width="2" stroke="%23ffc078" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" /><path d="M12 16h.01" /></svg>');
754}
755
756.dokuwiki div.wrap_alert {
757    background-color: rgba(250,82,82,.15);
758    background-image: none;
759}
760
761.dokuwiki div.wrap_alert::before {
762    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-octagon" width="42" height="50" viewBox="-4 6 42 30" stroke-width="2" stroke="%23ffa8a8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.802 2.165l5.575 2.389c.48 .206 .863 .589 1.07 1.07l2.388 5.574c.22 .512 .22 1.092 0 1.604l-2.389 5.575c-.206 .48 -.589 .863 -1.07 1.07l-5.574 2.388c-.512 .22 -1.092 .22 -1.604 0l-5.575 -2.389a2.036 2.036 0 0 1 -1.07 -1.07l-2.388 -5.574a2.036 2.036 0 0 1 0 -1.604l2.389 -5.575c.206 -.48 .589 -.863 1.07 -1.07l5.574 -2.388a2.036 2.036 0 0 1 1.604 0z" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>');
763}
764
765.dokuwiki div.wrap_help {
766    background-color: rgba(190,75,219,.15);
767    background-image: none;
768}
769
770.dokuwiki div.wrap_help::before {
771    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-help" width="42" height="50" viewBox="-4 6 42 30" stroke-width="2" stroke="%23e599f7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 17l0 .01" /><path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" /></svg>');
772}
773
774.dokuwiki div.wrap_download {
775    background-color: rgba(64,192,87,.15);
776    background-image: none;
777}
778
779.dokuwiki div.wrap_download::before {
780    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-download" width="42" height="50" viewBox="-4 6 42 30" stroke-width="2" stroke="%238ce99a" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 11l5 5l5 -5" /><path d="M12 4l0 12" /></svg>');
781}
782
783.dokuwiki div.wrap_todo {
784    background-color: rgba(21,170,191,.15);
785    background-image: none;
786}
787
788.dokuwiki div.wrap_todo::before {
789    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-traffic-cone" width="42" height="50" viewBox="-4 6 42 30" stroke-width="2" stroke="%2366d9e8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 20l16 0" /><path d="M9.4 10l5.2 0" /><path d="M7.8 15l8.4 0" /><path d="M6 20l5 -15h2l5 15" /></svg>');
790}
791
792.dokuwiki span.wrap_info,
793.dokuwiki span.wrap_tip,
794.dokuwiki span.wrap_important,
795.dokuwiki span.wrap_alert,
796.dokuwiki span.wrap_help,
797.dokuwiki span.wrap_download,
798.dokuwiki span.wrap_todo {
799    padding: 0.125rem 0.25rem;
800    padding-left: 1.25rem;
801    border-radius: 0.25rem;
802}
803
804.dokuwiki span.wrap_info {
805    background-color: var(--color-blue-light);
806    color: var(--color-blue-3);
807    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="%2374c0fc" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 9h.01" /><path d="M11 12h1v4h1" /></svg>');
808}
809
810.dokuwiki span.wrap_tip {
811    background-color: var(--color-yellow-light);
812    color: var(--color-yellow-3);
813    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bulb" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="%23ffe066" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" /><path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" /><path d="M9.7 17l4.6 0" /></svg>');
814}
815
816.dokuwiki span.wrap_important {
817    background-color: var(--color-orange-light);
818    color: var(--color-orange-3);
819    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="%23ffc078" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" /><path d="M12 16h.01" /></svg>');
820}
821
822.dokuwiki span.wrap_alert {
823    background-color: var(--color-red-light);
824    color: var(--color-red-3);
825    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-octagon" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="%23ffa8a8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.802 2.165l5.575 2.389c.48 .206 .863 .589 1.07 1.07l2.388 5.574c.22 .512 .22 1.092 0 1.604l-2.389 5.575c-.206 .48 -.589 .863 -1.07 1.07l-5.574 2.388c-.512 .22 -1.092 .22 -1.604 0l-5.575 -2.389a2.036 2.036 0 0 1 -1.07 -1.07l-2.388 -5.574a2.036 2.036 0 0 1 0 -1.604l2.389 -5.575c.206 -.48 .589 -.863 1.07 -1.07l5.574 -2.388a2.036 2.036 0 0 1 1.604 0z" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>');
826}
827
828.dokuwiki span.wrap_help {
829    background-color: var(--color-grape-light);
830    color: var(--color-grape-3);
831    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-help" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="%23e599f7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 17l0 .01" /><path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" /></svg>');
832}
833
834.dokuwiki span.wrap_download {
835    background-color: var(--color-green-light);
836    color: var(--color-green-3);
837    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-download" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="%238ce99a" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 11l5 5l5 -5" /><path d="M12 4l0 12" /></svg>');
838}
839
840.dokuwiki span.wrap_todo {
841    background-color: var(--color-cyan-light);
842    color: var(--color-cyan-3);
843    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-traffic-cone" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="%2366d9e8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 20l16 0" /><path d="M9.4 10l5.2 0" /><path d="M7.8 15l8.4 0" /><path d="M6 20l5 -15h2l5 15" /></svg>');
844}
845
846/* wrap others */
847
848.dokuwiki .wrap_em {
849    color: var(--color-red-8) !important;
850}
851
852.dokuwiki .wrap_hi {
853    background-color: var(--color-yellow-5);
854    color: #000000;
855}
856
857.dokuwiki .wrap_lo {
858    color: var(--color-dark-2) !important;
859}
860
861/* admin config */
862.dokuwiki div.ui-admin #admin__version {
863    font-size: 90%;
864    color: var(--color-dark-2) !important;
865    font-style: italic;
866}
867
868#acl__tree a.cur {
869    background-color: var(--color-yellow-5);
870    color: #000;
871    padding: 0.125rem 0.25rem;
872}
873
874.dokuwiki div.ui-admin ul li a {
875    align-items: center;
876}
877
878.dokuwiki div.ui-admin ul li a span.icon {
879    height: 1.75rem;
880}
881
882
883.dokuwiki div.ui-admin ul li a span.icon svg {
884    display: none !important;
885}
886
887.dokuwiki div.ui-admin ul li a span.icon::before {
888    display: inline-block;
889}
890
891.dokuwiki div.ui-admin ul li a[href*="page=acl"] span.icon::before {
892    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-key" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z" /><path d="M15 9h.01" /></svg>');
893}
894
895.dokuwiki div.ui-admin ul li a[href*="page=config"] span.icon::before {
896    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>');
897}
898
899.dokuwiki div.ui-admin ul li a[href*="page=extension"] span.icon::before {
900    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-puzzle" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>');
901}
902
903.dokuwiki div.ui-admin ul li a[href*="page=styling"] span.icon::before {
904    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-palette" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" /><path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>');
905}
906
907.dokuwiki div.ui-admin ul li a[href*="page=usermanager"] span.icon::before {
908    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-users" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /><path d="M21 21v-2a4 4 0 0 0 -3 -3.85" /></svg>');
909}
910
911.dokuwiki div.ui-admin ul li a[href*="page=logviewer"] span.icon::before {
912    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-script" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 20h-11a3 3 0 0 1 0 -6h11a3 3 0 0 0 0 6h1a3 3 0 0 0 3 -3v-11a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v8" /></svg>');
913}
914
915.dokuwiki div.ui-admin ul li a[href*="page=popularity"] span.icon::before {
916    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>');
917}
918
919.dokuwiki div.ui-admin ul li a[href*="page=revert"] span.icon::before {
920    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-back-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%234dabf7" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 14l-4 -4l4 -4" /><path d="M5 10h11a4 4 0 1 1 0 8h-1" /></svg>');
921}
922
923
924
925/* Access Control List Management */
926#acl_manager .aclpage {
927    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23828282" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /></svg>');
928    background-repeat: 0;
929}
930
931.dokuwiki input.edit,
932.dokuwiki select.edit {
933    padding: 0.3125rem 0.5rem;
934}
935
936.dokuwiki input.edit:focus,
937.dokuwiki select.edit:focus {
938    outline: none;
939}
940
941input[name="acl_w"] {
942    margin: 0 0.5rem;
943}
944
945#acl_manager .aclns {
946    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box-seam" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23c9c9c9" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M8.2 9.8l7.6 -4.6" /><path d="M12 12v9" /><path d="M12 12l-8 -4.5" /></svg>');
947}
948
949#acl_manager .aclgroup {
950    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-users-group" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23c9c9c9" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" /><path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M17 10h2a2 2 0 0 1 2 2v1" /><path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M3 13v-1a2 2 0 0 1 2 -2h2" /></svg>');
951}
952
953#acl_manager label {
954    margin-right: 1rem;
955}
956
957div.li:has(img[src="/lib/images/minus.gif"]),
958div.li:has(img[src="/lib/images/plus.gif"]),
959li:has(img[src="/lib/images/minus.gif"]),
960li:has(img[src="/lib/images/plus.gif"]) {
961    position: relative;
962}
963
964div.li:has(img[src="/lib/images/minus.gif"]) img,
965div.li:has(img[src="/lib/images/plus.gif"]) img,
966li:has(img[src="/lib/images/minus.gif"]) img,
967li:has(img[src="/lib/images/plus.gif"]) img {
968    opacity: 0;
969}
970
971div.li:has(img[src="/lib/images/minus.gif"])::before,
972div.li:has(img[src="/lib/images/plus.gif"])::before,
973li:has(img[src="/lib/images/minus.gif"])::before,
974li:has(img[src="/lib/images/plus.gif"])::before {
975    position: absolute;
976    top: 2px;
977    left: -2px;
978}
979
980div.li:has(img[src="/lib/images/minus.gif"])::before,
981li:has(img[src="/lib/images/minus.gif"])::before {
982    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="14" height="14" viewBox="0 0 24 24" stroke-width="2.5" stroke="%23ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>') !important;
983}
984
985div.li:has(img[src="/lib/images/plus.gif"])::before,
986li:has(img[src="/lib/images/plus.gif"])::before {
987    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="14" height="14" viewBox="0 0 24 24" stroke-width="2.5" stroke="%23ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 15l6 -6l6 6" /></svg>');
988}
989
990/* template style settings */
991button[name="run[preview]"],
992button[name="run[reset]"],
993button[name="run[revert]"] {
994    border-color: transparent;
995}
996
997button[name="run[preview]"] {
998    background-color: rgba(34,139,230,.2);
999    color: var(--color-blue-3);
1000}
1001button[name="run[preview]"]:hover {
1002    background-color: rgba(34,139,230,.2);
1003}
1004
1005button[name="run[reset]"] {
1006    background-color: rgba(250,176,5,.15);
1007    color: var(--color-yellow-3);
1008}
1009button[name="run[reset]"]:hover {
1010    background-color: rgba(250,176,5,.2);
1011}
1012
1013button[name="run[revert]"] {
1014    background-color: transparent;
1015    color: var(--color-red-3);
1016}
1017button[name="run[revert]"]:hover {
1018    background-color: var(--color-red-light-hover);
1019}
1020
1021input, textarea, select, keygen {
1022    padding: 0.3125rem 0.5rem;
1023}
1024input:focus, textarea:focus, select:focus, keygen:focus {
1025    outline: none;
1026}
1027input[type="color"] {
1028    padding: 0;
1029}
1030input[type="file"] {
1031    margin: 0 0.5rem;
1032}
1033.centeralign {
1034    text-align: unset !important;
1035}
1036
1037/* user manager */
1038#user__manager button[disabled] {
1039    border: solid 1px transparent !important;
1040    background-color: var(--color-dark-6);
1041    color: var(--color-dark-3) !important;
1042}
1043
1044button[name="fn[delete]"],
1045button[name="fn[export]"],
1046button[name="fn[search][clear]"] {
1047    border-color: transparent;
1048}
1049
1050button[name="fn[delete]"] {
1051    background-color: var(--color-red-light);
1052    color: var(--color-red-3);
1053}
1054button[name="fn[delete]"]:hover {
1055    background-color: var(--color-red-light-hover);
1056}
1057
1058button[name="fn[export]"] {
1059    background-color: var(--color-green-light);
1060    color: var(--color-green-3);
1061}
1062button[name="fn[export]"]:hover {
1063    background-color: var(--color-green-light-hover);
1064}
1065
1066button[name="fn[search][clear]"] {
1067    background-color: var(--color-yellow-light);
1068    color: var(--color-yellow-3);
1069}
1070button[name="fn[search][clear]"]:hover {
1071    background-color: var(--color-yellow-light-hover);
1072}
1073
1074input[name="fn[search][new]"] {
1075    padding: 0.125rem 0.5rem;
1076    background-color: var(--color-blue-light);
1077    border-color: transparent;
1078}
1079input[name="fn[search][new]"]:hover {
1080    background-color: var(--color-blue-light-hover);
1081    border-color: transparent;
1082}
1083
1084/* popularity */
1085#popularity_feedback ~ form textarea.edit {
1086    background-color: var(--color-dark-5);
1087    color: #fff;
1088}
1089
1090.dokuwiki fieldset {
1091    border-radius: 0.25rem;
1092}
1093
1094textarea:read-only {
1095    cursor: not-allowed;
1096    opacity: 0.75;
1097}
1098
1099/* config manager icons */
1100#config__manager td.label {
1101    position: relative;
1102    padding-right: 1.5rem;
1103}
1104
1105#config__manager td.label span.outkey + img[src="/lib/plugins/config/images/warning.png"],
1106#config__manager td.label span.outkey + img[src="/lib/plugins/config/images/danger.png"],
1107#config__manager td.label span.outkey + img[src="/lib/plugins/config/images/security.png"] {
1108    display: none;
1109}
1110
1111#config__manager td.label:has(> span.outkey + img[src="/lib/plugins/config/images/warning.png"]):after,
1112#config__manager td.label:has(> span.outkey + img[src="/lib/plugins/config/images/danger.png"]):after,
1113#config__manager td.label:has(> span.outkey + img[src="/lib/plugins/config/images/security.png"]):after {
1114    position: absolute;
1115    top: 0.5rem;
1116    right: 0.5rem;
1117}
1118
1119#config__manager td.label:has(> span.outkey + img[src="/lib/plugins/config/images/warning.png"]):after {
1120    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23fcc419" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v4" /><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" /><path d="M12 16h.01" /></svg>');
1121}
1122
1123#config__manager td.label:has(> span.outkey + img[src="/lib/plugins/config/images/danger.png"]):after {
1124    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23FF6B6B" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 8v4" /><path d="M12 16h.01" /></svg>');
1125}
1126
1127#config__manager td.label:has(> span.outkey + img[src="/lib/plugins/config/images/security.png"]):after {
1128    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-lock" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23828282" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z" /><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /><path d="M8 11v-4a4 4 0 1 1 8 0v4" /></svg>');
1129}
1130
1131#config__manager tr .input,
1132#config__manager tr input,
1133#config__manager tr textarea,
1134#config__manager tr select {
1135    background-color: var(--color-dark-6);
1136    color: var(--color-dark-1);
1137}
1138
1139select.edit option {
1140    background-color: var(--color-dark-6);
1141}
1142
1143/* extension manager */
1144button.uninstall,
1145button.disable,
1146button.reinstall,
1147button.enable {
1148    border-color: transparent;
1149}
1150
1151button.uninstall {
1152    background-color: rgba(250,82,82,.15);
1153    color: var(--color-red-3);
1154}
1155button.uninstall:hover{
1156    background-color: var(--color-red-light-hover);
1157}
1158
1159button.disable {
1160    background-color: rgba(253,126,20,.15);
1161    color: var(--color-orange-3);
1162}
1163button.disable:hover {
1164    background-color: rgba(253,126,20,.2);
1165}
1166
1167button.reinstall {
1168    background-color: rgba(121,80,242,.15);
1169    color: var(--color-violet-3);
1170}
1171button.reinstall:hover {
1172    background-color: rgba(121,80,242,.2);
1173}
1174
1175button.enable {
1176    background-color: rgba(64,192,87,.15);
1177    color: var(--color-green-3);
1178}
1179button.enable:hover {
1180    background-color: rgba(64,192,87,.2);
1181}
1182
1183#extension__list .legend a.info,
1184#extension__list .legend a.info.close {
1185    border-radius: 0.25rem;
1186}
1187
1188#extension__list .legend a.info {
1189    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="13" height="13" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>');
1190}
1191
1192#extension__list .legend a.info.close {
1193    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-up" width="13" height="13" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 15l6 -6l6 6" /></svg>');
1194}
1195
1196#extension__list .legend a.info:hover,
1197#extension__list .legend a.info.close:hover {
1198    background-color: var(--color-dark-6);
1199}
1200
1201/* TABLES */
1202.table thead:first-child tr:first-child th {
1203    border-top: solid 1px @ini_border;
1204}
1205
1206.table th {
1207    background-color: var(--color-dark-8);
1208}
1209
1210/* edittable plugin */
1211.htContextMenu table.htCore,
1212.htContextMenu table.htCore tbody {
1213    border: solid 1px @ini_border;
1214    border-radius: 0.25rem;
1215}
1216
1217.htContextMenu table.htCore tr {
1218    background-color: transparent;
1219}
1220
1221.htContextMenu table.htCore tr:first-child td {
1222    border-top-left-radius: 0.25rem;
1223    border-top-right-radius: 0.25rem;
1224}
1225
1226.htContextMenu table.htCore tr:last-child td {
1227    border-bottom-left-radius: 0.25rem;
1228    border-bottom-right-radius: 0.25rem;
1229}
1230
1231.htContextMenu table.htCore td {
1232    background-color: var(--color-dark-7);
1233    color: var(--color-dark-1);
1234}
1235
1236.htContextMenu table tbody tr td.current,
1237.htContextMenu table tbody tr td.zeroclipboard-is-hover {
1238    background-color: var(--color-dark-6);
1239}
1240
1241.htContextMenu table tbody tr td.htDisabled,
1242.htContextMenu table tbody tr td.htDisabled:hover {
1243    background-color: var(--color-dark-8);
1244    color: var(--color-dark-3);
1245    cursor: not-allowed;
1246}
1247
1248.htContextMenu table tbody tr td.htSeparator {
1249    border-top: solid 1px @ini_border;
1250}
1251
1252.htContextMenu table tbody tr td div.htItemWrapper.toggle_header {
1253    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heading" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 12h10" /><path d="M7 5v14" /><path d="M17 5v14" /><path d="M15 19h4" /><path d="M15 5h4" /><path d="M5 19h4" /><path d="M5 5h4" /></svg>');
1254}
1255
1256.htContextMenu table tbody tr td div.htItemWrapper.align_left {
1257    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-left" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M4 12l10 0" /><path d="M4 18l14 0" /></svg>');
1258}
1259
1260.htContextMenu table tbody tr td div.htItemWrapper.align_center {
1261    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-center" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M8 12l8 0" /><path d="M6 18l12 0" /></svg>');
1262}
1263
1264.htContextMenu table tbody tr td div.htItemWrapper.align_right {
1265    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-right" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M10 12l10 0" /><path d="M6 18l14 0" /></svg>');
1266}
1267
1268.htContextMenu table tbody tr td div.htItemWrapper.row_above {
1269    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-row-insert-top" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%238ce99a" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 18v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1z" /><path d="M12 9v-4" /><path d="M10 7l4 0" /></svg>');
1270}
1271
1272.htContextMenu table tbody tr td div.htItemWrapper.remove_row {
1273    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-row-remove" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%23ffa8a8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 6v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1z" /><path d="M10 16l4 4" /><path d="M10 20l4 -4" /></svg>');
1274}
1275
1276.htContextMenu table tbody tr td div.htItemWrapper.row_below {
1277    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-row-insert-bottom" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%238ce99a" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 6v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1z" /><path d="M12 15l0 4" /><path d="M14 17l-4 0" /></svg>');
1278}
1279
1280.htContextMenu table tbody tr td div.htItemWrapper.col_left {
1281    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-column-insert-left" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%238ce99a" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z" /><path d="M5 12l4 0" /><path d="M7 10l0 4" /></svg>');
1282}
1283
1284.htContextMenu table tbody tr td div.htItemWrapper.remove_col {
1285    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-column-remove" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%23ffa8a8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z" /><path d="M16 10l4 4" /><path d="M16 14l4 -4" /></svg>');
1286}
1287
1288.htContextMenu table tbody tr td div.htItemWrapper.col_right {
1289    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-column-insert-right" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%238ce99a" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1z" /><path d="M15 12l4 0" /><path d="M17 10l0 4" /></svg>');
1290}
1291
1292.htContextMenu table tbody tr td div.htItemWrapper.mergeCells div.merge {
1293    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-table-filled" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 11h4a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-2a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-6a1 1 0 0 1 1 -1z" stroke-width="0" fill="%23b8b8b8" /><path d="M21 12v6a3 3 0 0 1 -2.824 2.995l-.176 .005h-6a1 1 0 0 1 -1 -1v-8a1 1 0 0 1 1 -1h8a1 1 0 0 1 1 1z" stroke-width="0" fill="%23b8b8b8" /><path d="M18 3a3 3 0 0 1 2.995 2.824l.005 .176v2a1 1 0 0 1 -1 1h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h6z" stroke-width="0" fill="%23b8b8b8" /><path d="M9 4v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a3 3 0 0 1 2.824 -2.995l.176 -.005h2a1 1 0 0 1 1 1z" stroke-width="0" fill="%23b8b8b8" /></svg>');
1294}
1295
1296.htContextMenu table tbody tr td div.htItemWrapper.mergeCells div.unmerge {
1297    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-table" width="18" height="18" viewBox="0 2 24 24" stroke-width="1.5" stroke="%23b8b8b8" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /><path d="M3 10h18" /><path d="M10 3v18" /></svg>');
1298}
1299
1300/* edittable hands on table */
1301
1302/* header of the editor */
1303#edittable__editor table.htCore th,
1304#edittable__editor table.htCore td.header,
1305#edittable__editor table.htCore td {
1306    border-color: @ini_border;
1307}
1308
1309#edittable__editor table.htCore th {
1310    background-color: var(--color-dark-8);
1311    color: var(--color-dark-1);
1312    font-weight: bold;
1313}
1314#edittable__editor table.htCore th:hover {
1315    background-color: var(--color-dark-9);
1316}
1317
1318/* normal cells */
1319#edittable__editor table.htCore td {
1320    background-color: var(--color-dark-7);
1321}
1322#edittable__editor table.htCore td:hover {
1323    background-color: var(--color-dark-6);
1324}
1325
1326/* header styles in editor */
1327#edittable__editor table td.header {
1328    background-color: var(--color-dark-8);
1329}
1330#edittable__editor table td.header:hover {
1331    background-color: var(--color-dark-9);
1332}
1333
1334div.wtBorder.current {
1335    background-color: var(--color-blue-4) !important;
1336}
1337
1338.handsontable .wtBorder {
1339    background-color: var(--color-blue-4) !important;
1340}
1341
1342.handsontable tr {
1343    background: var(--color-dark-8);
1344}
1345
1346.handsontable td.area {
1347    background: var(--color-blue-light) !important;
1348}
1349
1350.handsontable tbody th.ht__highlight,
1351.handsontable thead th.ht__highlight {
1352    background: var(--color-blue-light) !important;
1353    color: var(--color-blue-3) !important;
1354}
1355.handsontable tbody th.ht__highlight:hover,
1356.handsontable thead th.ht__highlight:hover {
1357    background: var(--color-blue-light-hover) !important;
1358}
1359
1360.handsontableInput {
1361    background-color: transparent;
1362    color: #fff;
1363}