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