xref: /plugin/struct/style.less (revision 0fadec1297d001efae8952e21b49ad2f8d7abd9f) 
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
436.dokuwiki .structaggregationcloud {
437    ul {
438        text-align: center;
439
440        li {
441            list-style: none;
442            margin: 0 1em 0 0;
443            padding: 0;
444            display: inline-block;
445
446            .struct_color, .struct_media {
447                a {
448                    display: block;
449                    height: 100%;
450                }
451            }
452
453            .struct_media a {
454                background-size: cover;
455                background-position: center;
456                box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5)
457            }
458        }
459    }
460}
461
462/**
463 * Lookup Aggregation Editor
464 */
465
466.dokuwiki .structaggregationeditor {
467    table.inline {
468        min-width: 100%;
469
470        th.action {
471            width: 30px; //16px icon + margins
472        }
473    }
474}
475
476/**
477 * General Output styles
478 */
479
480.dokuwiki div.struct_color {
481    width: 1.2em;
482    height: 1.2em;
483    display: inline-block;
484    margin-right: 0.5em;
485}
486
487/**
488 * Inline Editor Overlay
489 */
490
491.dokuwiki .struct_inlineditor {
492    position: absolute;
493    top: 0;
494    left: 0;
495    width: 300px;
496
497    background-color: @ini_background;
498    color: @ini_text;
499    border: 1px solid @ini_border;
500    padding: 5px;
501
502    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
503
504    .ctl {
505        margin-top: 5px;
506    }
507
508}
509
510/**
511 * Errors on AJAX
512 */
513
514.dokuwiki .structaggregationeditor form,
515.dokuwiki .struct_inlineditor {
516    .err {
517        font-size: 90%;
518        margin-top: 5px;
519        padding: 5px;
520        background-color: @ini_highlight;
521        color: @ini_text;
522        text-align: left;
523    }
524}
525
526/**
527 * Struct Filter
528 */
529.dokuwiki .structaggregationfilter {
530    display: flex;
531    flex-wrap: wrap;
532    gap: 1em;
533    box-sizing: border-box;
534
535    details {
536        position: relative;
537        max-width: 30%;
538        border: 1px solid transparent;
539        padding: 0.25em 0.5em;
540        cursor: pointer;
541
542        &[open] {
543            background-color: @ini_background_alt;
544
545            ul {
546                z-index: 10;
547                min-width: 15em;
548                border: 1px solid @ini_border;
549            }
550        }
551
552        /** needed for Sprintdoc template */
553        summary {
554            display: list-item;
555        }
556
557        ul {
558            left: -1px;
559            right: -1px;
560            position: absolute;
561            padding: 0;
562            background-color: @ini_background;
563            max-height: 33vh;
564            overflow-y: auto;
565
566            li {
567                margin: 0;
568                text-overflow: ellipsis;
569                overflow: hidden;
570                padding: 0.25em 0.5em;
571
572                &.active {
573                    background-color: @ini_background_alt;
574                    a {
575                        font-weight: bold;
576                    }
577                }
578
579                &:hover {
580                    background-color: @ini_background_alt;
581                }
582
583                a {
584                    display: block;
585                }
586            }
587        }
588    }
589}
590