xref: /plugin/struct/style.less (revision 7234bfb14e712ff548d9266ef32fdcc8eaf2d04e) 
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    &.structaggregationlist > ul li div {
338        display: inline;
339
340        p {
341            display: inline;
342            margin: 0;
343        }
344    }
345
346    /* Indexed List */
347
348    &.structaggregationlist.is-indexed > ul {
349        list-style: none;
350        display: flex;
351        flex-wrap: wrap;
352        padding: 0;
353        gap: 0.5em;
354
355
356        > li {
357            flex: 1 1 30%;
358            min-width: 18em;
359            max-width: 100%;
360            margin: 0;
361            overflow: hidden;
362
363            > div.li {
364                font-size: 1.5em;
365                font-weight: bold;
366            }
367        }
368    }
369
370
371    table th {
372        a {
373            color: @ini_link;
374            font-weight: bold;
375
376            &.sort-up::before {
377                content: '↑';
378            }
379
380            &.sort-down::before {
381                content: '↓';
382            }
383
384            &.next {
385                float: right;
386            }
387        }
388
389        input {
390            width: 20px;
391            background-image: url(../../tpl/dokuwiki/images/search.png);
392            background-repeat: no-repeat;
393            background-position: 2px center;
394            padding-left: 20px;
395        }
396
397        input:not([value]) {
398            opacity: 0.5;
399        }
400
401        input:focus {
402            width: auto;
403            opacity: 1;
404        }
405    }
406
407    img.media {
408        box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
409    }
410
411    div.table {
412        margin-bottom: 2.4em;
413    }
414
415    a.export {
416        float: left;
417        margin-top: -2.4em;
418        margin-left: 1em;
419        border: 1px solid @ini_border;
420        border-top: none;
421        border-bottom-right-radius: 4px;
422        border-bottom-left-radius: 4px;
423        padding: 2px 5px 2px 22px;
424        background-position-x: 2px;
425    }
426}
427
428.dokuwiki .structaggregationcloud {
429    ul {
430        text-align: center;
431
432        li {
433            list-style: none;
434            margin: 0 1em 0 0;
435            padding: 0;
436            display: inline-block;
437
438            .struct_color, .struct_media {
439                a {
440                    display: block;
441                    height: 100%;
442                }
443            }
444
445            .struct_media a {
446                background-size: cover;
447                background-position: center;
448                box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5)
449            }
450        }
451    }
452}
453
454/**
455 * Lookup Aggregation Editor
456 */
457
458.dokuwiki .structaggregationeditor {
459    table.inline {
460        min-width: 100%;
461
462        th.action {
463            width: 30px; //16px icon + margins
464        }
465    }
466}
467
468/**
469 * General Output styles
470 */
471
472.dokuwiki div.struct_color {
473    width: 1.2em;
474    height: 1.2em;
475    display: inline-block;
476    margin-right: 0.5em;
477}
478
479/**
480 * Inline Editor Overlay
481 */
482
483.dokuwiki .struct_inlineditor {
484    position: absolute;
485    top: 0;
486    left: 0;
487    width: 300px;
488
489    background-color: @ini_background;
490    color: @ini_text;
491    border: 1px solid @ini_border;
492    padding: 5px;
493
494    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
495
496    .ctl {
497        margin-top: 5px;
498    }
499
500}
501
502/**
503 * Errors on AJAX
504 */
505
506.dokuwiki .structaggregationeditor form,
507.dokuwiki .struct_inlineditor {
508    .err {
509        font-size: 90%;
510        margin-top: 5px;
511        padding: 5px;
512        background-color: @ini_highlight;
513        color: @ini_text;
514        text-align: left;
515    }
516}
517
518/**
519 * Struct Filter
520 */
521.dokuwiki .structaggregationfilter {
522    display: flex;
523    flex-wrap: wrap;
524    gap: 1em;
525    box-sizing: border-box;
526
527    details {
528        position: relative;
529        max-width: 30%;
530        border: 1px solid transparent;
531        padding: 0.25em 0.5em;
532        cursor: pointer;
533
534        &[open] {
535            background-color: @ini_background_alt;
536
537            ul {
538                z-index: 10;
539                min-width: 15em;
540                border: 1px solid @ini_border;
541            }
542        }
543
544        /** needed for Sprintdoc template */
545        summary {
546            display: list-item;
547        }
548
549        ul {
550            left: -1px;
551            right: -1px;
552            position: absolute;
553            padding: 0;
554            background-color: @ini_background;
555            max-height: 33vh;
556            overflow-y: auto;
557
558            li {
559                margin: 0;
560                text-overflow: ellipsis;
561                overflow: hidden;
562                padding: 0.25em 0.5em;
563
564                &.active {
565                    background-color: @ini_background_alt;
566                    a {
567                        font-weight: bold;
568                    }
569                }
570
571                &:hover {
572                    background-color: @ini_background_alt;
573                }
574
575                a {
576                    display: block;
577                }
578            }
579        }
580    }
581}
582