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