1/**
2 * The input entry form
3 */
4.dokuwiki .struct_entry_form {
5    margin-bottom: 1em;
6
7    fieldset {
8        width: 100%;
9        padding: 0.5em 0;
10        text-align: left;
11
12        legend {
13            text-align: left;
14            padding-left: 17px;
15            cursor: pointer;
16            background: transparent url(../../images/open.png) 5px center no-repeat;
17            font-weight: bold;
18        }
19    }
20
21    fieldset.closed {
22        padding: 0;
23
24        div.field {
25            display: none;
26        }
27
28        legend {
29            display: block;
30            background: transparent url(../../images/closed.png) 5px center no-repeat;
31        }
32    }
33
34    div.field {
35        display: flex;
36        padding: 0.5em;
37
38        &:hover {
39            background-color: @ini_background_alt;
40        }
41
42        > label {
43            text-align: left;
44            font-weight: normal;
45            width: 12em;
46            flex-shrink: 0;
47
48            span.label {
49                padding-right: 16px;
50                display: block;
51
52                // fixes for bootstrap3 template
53                color: @ini_text;
54                font-size: 100%;
55                text-align: left;
56
57
58                &.hashint {
59                    background: url(../../images/info.png) no-repeat right 5px top;
60                }
61            }
62        }
63
64        > span.input {
65            display: flex;
66            text-align: left;
67            flex-grow: 1;
68            flex-wrap: wrap;
69
70            // general input fields
71            input:not([type='checkbox']):not([type='color']),
72            textarea,
73            select {
74                width: 100%;
75
76                // smaller input types
77                &.struct_media,
78                &.struct_date {
79                    width: 30%;
80                }
81            }
82
83            // checkboxes
84            label {
85                margin-right: 1em;
86                white-space: nowrap;
87            }
88
89            // wrap multi-value fields
90            .multiwrap, .newtemplate {
91                display: inline;
92                width: fit-content;
93            }
94
95            // space multi-value fields
96            .multiwrap {
97                margin: 0 0.25em 0.25em 0;
98            }
99
100            // overlay media button on top of input field
101            button.struct_media {
102                width: 2.5em;
103                margin-left: -2.5em;
104            }
105
106            // input hints
107            small {
108                display: block;
109                color: @ini_text_alt;
110            }
111        }
112    }
113}
114
115/*responsive - small screen*/
116@media (max-width: 480px) {
117    .dokuwiki .struct_entry_form div.field {
118        flex-wrap: wrap;
119
120        label {
121            > span {
122                text-align: left;
123                width: 100%;
124            }
125        }
126
127        span.input {
128            width: 100%;
129        }
130    }
131}
132
133/**
134 * Bureaucracy form adjustments
135 */
136
137.dokuwiki form.bureaucracy__plugin div.field {
138    display: flex;
139    justify-content: flex-end;
140
141    label {
142        clear: both; // this is somehow missing in the bootstrap template
143        flex-grow: 1;
144    }
145
146    span {
147        line-height: 2em;
148        float: left;
149        text-align: right;
150    }
151
152    span.label {
153        vertical-align: top;
154        width: 100%;
155
156        // fixes for bootstrap3 template
157        color: @ini_text;
158        font-size: 100%;
159    }
160
161    span.input {
162        width: 50%;
163        display: inline-block;
164        text-align: left;
165        padding-left: 0.25em;
166        color: @ini_text;
167
168        input, select, textarea {
169            width: 100%;
170        }
171
172        input[type='checkbox'] {
173            width: auto;
174            margin-right: 0;
175        }
176
177        label {
178            text-align: left;
179            line-height: 1.5em;
180        }
181    }
182}
183
184/*responsive - small screen*/
185@media (max-width: 480px) {
186    .dokuwiki form.bureaucracy__plugin div.field {
187        flex-wrap: wrap;
188
189        label {
190            > span {
191                text-align: left;
192                width: 100%;
193            }
194        }
195
196        span.input {
197            width: 100%;
198        }
199    }
200}
201
202/**
203 * Tabs in the Schema Editor
204 */
205
206#plugin__struct_delete,
207#plugin__struct_json {
208    border: 1px solid @ini_border;
209    border-top: none;
210    display: block;
211    padding: 2em;
212
213    fieldset {
214        margin-bottom: 1em;
215        width: 500px;
216
217        label.block {
218            font-weight: normal;
219        }
220    }
221}
222
223form.struct_newschema {
224    label {
225        display: block;
226        text-align: left;
227
228        span {
229            display: inline-block;
230            width: 45%;
231            text-align: right;
232            padding-right: 1em;
233        }
234    }
235}
236
237/**
238 * The Schema Editor
239 */
240
241#plugin__struct_editor {
242    table.inline {
243        width: 100%;
244        border-top: none;
245
246        tr:first-child {
247            border-top: none;
248
249            th {
250                border-top: none;
251            }
252        }
253    }
254
255    tr.disabled {
256        td {
257            opacity: 0.5;
258        }
259
260        // collapse config block
261        td.config > div {
262            overflow: auto;
263            height: 2em;
264
265            div.jsoneditor-outer {
266                margin: 0;
267                padding: 0;
268            }
269        }
270
271        td.isenabled {
272            opacity: 1;
273        }
274    }
275
276    fieldset {
277        width: 100%;
278        padding-left: 0;
279        padding-right: 0;
280        margin-bottom: 1em;
281
282        div.jsoneditor {
283            margin: auto;
284        }
285    }
286}
287
288/**
289 * In page output
290 */
291
292#plugin__struct_output {
293    margin-right: 16em; // space for the TOC
294    border: 1px solid @ini_border;
295    margin-bottom: 1.2em;
296
297    div.table {
298        margin: 0;
299
300        table {
301            font-size: 90%;
302            width: 100%;
303            border: none;
304            margin: 0;
305
306            td, th {
307                background-color: transparent;
308                vertical-align: top;
309                border: none;
310            }
311
312            tbody th {
313                width: 20%;
314                text-align: right;
315
316                &::after {
317                    content: ':';
318                }
319            }
320
321            thead th {
322                background-color: @ini_background_alt;
323                text-align: center;
324                font-size: 110%;
325                font-weight: normal;
326            }
327        }
328    }
329}
330
331/**
332 * Aggregation
333 */
334
335.dokuwiki .structaggregation {
336
337    &.structaggregationtable,
338    &.structaggregationeditortable {
339        table.inline td > *:last-child {
340            margin-bottom: 0;
341        }
342    }
343
344    &.structaggregationlist > ul li div {
345        display: inline;
346
347        p {
348            display: inline;
349            margin: 0;
350        }
351    }
352
353    /* Indexed List */
354
355    &.structaggregationlist.is-indexed > ul {
356        list-style: none;
357        display: flex;
358        flex-wrap: wrap;
359        padding: 0;
360        gap: 0.5em;
361
362
363        > li {
364            flex: 1 1 30%;
365            min-width: 18em;
366            max-width: 100%;
367            margin: 0;
368            overflow: hidden;
369
370            > div.li {
371                font-size: 1.5em;
372                font-weight: bold;
373            }
374        }
375    }
376
377
378    table th {
379        a {
380            color: @ini_link;
381            font-weight: bold;
382
383            &.sort-up::before {
384                content: '↑';
385            }
386
387            &.sort-down::before {
388                content: '↓';
389            }
390
391            &.next {
392                float: right;
393            }
394        }
395
396        input {
397            width: 20px;
398            background-image: url(../../tpl/dokuwiki/images/search.png);
399            background-repeat: no-repeat;
400            background-position: 2px center;
401            padding-left: 20px;
402        }
403
404        input:not([value]) {
405            opacity: 0.5;
406        }
407
408        input:focus {
409            width: auto;
410            opacity: 1;
411        }
412    }
413
414    img.media {
415        box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
416    }
417
418    div.table {
419        margin-bottom: 2.4em;
420    }
421
422    a.export {
423        float: left;
424        margin-top: -2.4em;
425        margin-left: 1em;
426        border: 1px solid @ini_border;
427        border-top: none;
428        border-bottom-right-radius: 4px;
429        border-bottom-left-radius: 4px;
430        padding: 2px 5px 2px 22px;
431        background-position-x: 2px;
432    }
433}
434
435.dokuwiki .structaggregationcloud {
436    ul {
437        text-align: center;
438
439        li {
440            list-style: none;
441            margin: 0 1em 0 0;
442            padding: 0;
443            display: inline-block;
444
445            .struct_color, .struct_media {
446                a {
447                    display: block;
448                    height: 100%;
449                }
450            }
451
452            .struct_media a {
453                background-size: cover;
454                background-position: center;
455                box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5)
456            }
457        }
458    }
459}
460
461/**
462 * Lookup Aggregation Editor
463 */
464
465.dokuwiki .structaggregationeditor {
466    table.inline {
467        min-width: 100%;
468
469        th.action {
470            width: 30px; //16px icon + margins
471        }
472    }
473}
474
475/**
476 * General Output styles
477 */
478
479.dokuwiki div.struct_color {
480    width: 1.2em;
481    height: 1.2em;
482    display: inline-block;
483    margin-right: 0.5em;
484}
485
486/**
487 * Inline Editor Overlay
488 */
489
490.dokuwiki .struct_inlineditor {
491    position: absolute;
492    top: 0;
493    left: 0;
494    width: 300px;
495
496    background-color: @ini_background;
497    color: @ini_text;
498    border: 1px solid @ini_border;
499    padding: 5px;
500
501    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
502
503    .ctl {
504        margin-top: 5px;
505    }
506
507}
508
509/**
510 * Errors on AJAX
511 */
512
513.dokuwiki .structaggregationeditor form,
514.dokuwiki .struct_inlineditor {
515    .err {
516        font-size: 90%;
517        margin-top: 5px;
518        padding: 5px;
519        background-color: @ini_highlight;
520        color: @ini_text;
521        text-align: left;
522    }
523}
524
525/**
526 * Struct Filter
527 */
528.dokuwiki .structaggregationfilter {
529    display: flex;
530    flex-wrap: wrap;
531    gap: 1em;
532    box-sizing: border-box;
533
534    details {
535        position: relative;
536        max-width: 30%;
537        border: 1px solid transparent;
538        padding: 0.25em 0.5em;
539        cursor: pointer;
540
541        &[open] {
542            background-color: @ini_background_alt;
543
544            ul {
545                z-index: 10;
546                min-width: 15em;
547                border: 1px solid @ini_border;
548            }
549        }
550
551        /** needed for Sprintdoc template */
552        summary {
553            display: list-item;
554        }
555
556        ul {
557            left: -1px;
558            right: -1px;
559            position: absolute;
560            padding: 0;
561            background-color: @ini_background;
562            max-height: 33vh;
563            overflow-y: auto;
564
565            li {
566                margin: 0;
567                text-overflow: ellipsis;
568                overflow: hidden;
569                padding: 0.25em 0.5em;
570
571                &.active {
572                    background-color: @ini_background_alt;
573                    a {
574                        font-weight: bold;
575                    }
576                }
577
578                &:hover {
579                    background-color: @ini_background_alt;
580                }
581
582                a {
583                    display: block;
584                }
585            }
586        }
587    }
588}
589