xref: /plugin/struct/style.less (revision 717bfc62d049b0ffaef694932effb49d348f9256) 
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}
170
171form.struct_newschema {
172    label {
173        display: block;
174        text-align: left;
175
176        span {
177            display: inline-block;
178            width: 45%;
179            text-align: right;
180            padding-right: 1em;
181        }
182    }
183}
184
185/**
186 * The Schema Editor
187 */
188#plugin__struct_editor {
189    table.inline {
190        width: 100%;
191        border-top: none;
192
193        tr:first-child {
194            border-top: none;
195
196            th {
197                border-top: none;
198            }
199        }
200    }
201
202    tr.disabled {
203        td {
204            opacity: 0.5;
205        }
206
207        // collapse config block
208        td.config > div {
209            overflow: auto;
210            height: 2em;
211            div.jsoneditor-outer {
212                margin: 0;
213                padding: 0;
214            }
215        }
216
217        td.isenabled {
218            opacity: 1;
219        }
220    }
221    fieldset {
222        width: 100%;
223        padding-left: 0;
224        padding-right: 0;
225        margin-bottom: 1em;
226
227        div.jsoneditor {
228            margin: auto;
229        }
230    }
231}
232
233/**
234 * In page output
235 */
236#plugin__struct_output {
237    margin-right: 16em; // space for the TOC
238    border: 1px solid @ini_border;
239    margin-bottom: 1.2em;
240
241    div.table {
242        margin: 0;
243
244        table {
245            font-size: 90%;
246            width: 100%;
247            border: none;
248            margin: 0;
249
250            td, th {
251                background-color: transparent;
252                vertical-align: top;
253                border: none;
254            }
255
256            tbody th {
257                width: 20%;
258                text-align: right;
259
260                &::after {
261                    content: ':';
262                }
263            }
264
265            thead th {
266                background-color: @ini_background_alt;
267                text-align: center;
268                font-size: 110%;
269                font-weight: normal;
270            }
271        }
272    }
273}
274
275/**
276 * Aggregation
277 */
278.dokuwiki .structaggregation {
279
280    &.listaggregation > ul li div {
281        display: inline;
282
283        p {
284            display: inline;
285            margin: 0;
286        }
287    }
288
289    table th {
290        a {
291            color: @ini_link;
292            font-weight: bold;
293
294            &.sort-up::before {
295                content: '↑';
296            }
297            &.sort-down::before {
298                content: '↓';
299            }
300
301            &.next {
302                float: right;
303            }
304        }
305
306        input {
307            width: 20px;
308            background-image: url(../../tpl/dokuwiki/images/search.png);
309            background-repeat: no-repeat;
310            background-position: 2px center;
311            padding-left: 20px;
312        }
313
314        input:not([value]) {
315            opacity: 0.5;
316        }
317
318        input:focus {
319            width: auto;
320            opacity: 1;
321        }
322    }
323
324    img.media {
325        box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
326    }
327
328    div.table {
329        margin-bottom: 2.4em;
330    }
331
332    a.export {
333        float: left;
334        margin-top: -2.4em;
335        margin-left: 1em;
336        border: 1px solid @ini_border;
337        border-top: none;
338        border-bottom-right-radius: 4px;
339        border-bottom-left-radius: 4px;
340        padding: 2px 5px 2px 22px;
341        background-position-x: 2px;
342    }
343}
344
345.dokuwiki .structcloud {
346    ul {
347        text-align: center;
348
349        li {
350            list-style: none;
351            margin: 0 1em 0 0;
352            padding: 0;
353            display: inline-block;
354
355            .struct_color, .struct_media {
356                a {
357                    display: block;
358                    height: 100%;
359                }
360            }
361
362            .struct_media a {
363                background-size: cover;
364                background-position: center;
365                box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5)
366            }
367        }
368    }
369}
370
371/**
372 * Lookup Aggregation Editor
373 */
374.dokuwiki .structlookup {
375    table.inline {
376        min-width: 100%;
377
378        th.action {
379            width: 30px; //16px icon + margins
380        }
381    }
382}
383
384/**
385 * General Output styles
386 */
387.dokuwiki div.struct_color {
388    width: 1.2em;
389    height: 1.2em;
390    display: inline-block;
391    margin-right: 0.5em;
392}
393
394/**
395 * Inline Editor Overlay
396 */
397.dokuwiki .struct_inlineditor {
398    position: absolute;
399    top: 0;
400    left: 0;
401    width: 300px;
402
403    background-color: @ini_background;
404    color: @ini_text;
405    border: 1px solid @ini_border;
406    padding: 5px;
407
408    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
409
410    .ctl {
411        margin-top: 5px;
412    }
413
414}
415
416/**
417 * Errors on AJAX
418 */
419.dokuwiki .structlookup form,
420.dokuwiki .struct_inlineditor {
421    .err {
422        font-size: 90%;
423        margin-top: 5px;
424        padding: 5px;
425        background-color: @ini_highlight;
426        color: @ini_text;
427        text-align: left;
428    }
429}
430