xref: /plugin/struct/style.less (revision 4731b875bb4fd88700d786e5fdd24b8d7bd56276) 
1/**
2 * The input entry form
3 */
4#dw__editform .struct {
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            margin-left: 1em;
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        * {
26            display: none;
27        }
28
29        legend {
30            display: block;
31            background: transparent url(../../images/closed.png) 5px center no-repeat;
32        }
33    }
34
35    label {
36        display: table-row;
37        text-align: left;
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
51        span.label.hashint {
52            background: url(../../images/info.png) no-repeat right center;
53        }
54
55        span.input {
56            display: table-cell;
57            padding-left: 0.25em;
58            padding-top: 0.25em;
59            padding-bottom: 0.25em;
60
61            input:not([type='checkbox']), textarea, select {
62                width: 190px;
63            }
64        }
65    }
66
67    // this should not influence the design
68    .newtemplate {
69        display: inline;
70    }
71    // add some spacing to multi-value fields
72    .multiwrap {
73        display: inline-block;
74        margin: 0 0.25em 0.25em 0;
75    }
76}
77
78/**
79 * Bureaucracy form adjustments
80 */
81.dokuwiki form.bureaucracy__plugin label {
82    span {
83        line-height: 2em;
84    }
85
86    span.label {
87        vertical-align: top;
88    }
89
90    span.input {
91        width: 50%;
92        display: inline-block;
93        text-align: left;
94        padding-left: 0.25em;
95        color: @ini_text;
96
97        input, select, textarea {
98            width: 100%;
99        }
100
101        input[type='checkbox'] {
102            width: auto;
103            margin-right: 0;
104        }
105
106        label {
107            text-align: left;
108            line-height: 1.5em;
109        }
110    }
111}
112
113/**
114 * Tabs in the Schema Editor
115 */
116#plugin__struct_delete,
117#plugin__struct_json {
118    border: 1px solid @ini_border;
119    border-top: none;
120    display: block;
121    padding: 2em;
122
123    fieldset {
124        margin-bottom: 1em;
125    }
126}
127
128/**
129 * The Schema Editor
130 */
131#plugin__struct_editor {
132    table.inline {
133        width: 100%;
134        border-top: none;
135
136        tr:first-child {
137            border-top: none;
138
139            th {
140                border-top: none;
141            }
142        }
143    }
144
145    tr.disabled {
146        td {
147            opacity: 0.5;
148        }
149
150        // collapse config block
151        td.config > div {
152            overflow: auto;
153            height: 2em;
154            div.jsoneditor-outer {
155                margin: 0;
156                padding: 0;
157            }
158        }
159
160        td.isenabled {
161            opacity: 1;
162        }
163    }
164}
165
166/**
167 * In page output
168 */
169#plugin__struct_output {
170    margin-right: 16em; // space for the TOC
171    border: 1px solid @ini_border;
172    margin-bottom: 1.2em;
173
174    div.table {
175        margin: 0;
176
177        table {
178            font-size: 90%;
179            width: 100%;
180            border: none;
181            margin: 0;
182
183            td, th {
184                background-color: transparent;
185                vertical-align: top;
186                border: none;
187            }
188
189            tbody th {
190                width: 20%;
191                text-align: right;
192
193                &::after {
194                    content: ':';
195                }
196            }
197
198            thead th {
199                background-color: @ini_background_alt;
200                text-align: center;
201                font-size: 110%;
202                font-weight: normal;
203            }
204        }
205    }
206}
207
208/**
209 * Aggregation
210 */
211.structaggregation {
212    table th {
213        a {
214            color: @ini_link;
215            font-weight: bold;
216
217            &.sort-up::before {
218                content: '↑';
219            }
220            &.sort-down::before {
221                content: '↓';
222            }
223        }
224
225        input {
226            width: 20px;
227            background-image: url(../../tpl/dokuwiki/images/search.png);
228            background-repeat: no-repeat;
229            background-position: 2px center;
230            padding-left: 20px;
231        }
232
233        input:not([value]) {
234            opacity: 0.5;
235        }
236
237        input:focus {
238            width: auto;
239            opacity: 1;
240        }
241    }
242}
243
244.struct_inlineditor {
245    position: absolute;
246    top: 0;
247    left: 0;
248    width: 300px;
249
250    background-color: @ini_background;
251    color: @ini_text;
252    border: 1px solid @ini_border;
253    padding: 5px;
254
255    box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5);
256
257    .ctl {
258        margin-top: 5px;
259    }
260
261    .err {
262        font-size: 90%;
263        margin-top: 5px;
264        padding: 5px;
265        background-color: @ini_highlight;
266        color: @ini_text;
267    }
268}
269