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