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