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