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