xref: /dokuwiki/lib/plugins/extension/style.less (revision a38bc7e6c4a8b1362de2bae7c3f9b01bf79df38f) 
1/*
2 * Extension plugin styles
3 *
4 * @author  Christopher Smith <chris@jalakai.co.uk>
5 * @author  Piyush Mishra <me@piyushmishra.com>
6 * @author  Håkan Sandell <sandell.hakan@gmail.com>
7 * @author  Anika Henke <anika@selfthinker.org>
8 */
9
10/**
11 * very simple lightbox
12 * @link http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/
13 */
14#plugin__extensionlightbox {
15    position: fixed;
16    top: 0;
17    left: 0;
18    width: 100%;
19    height: 100%;
20    background: url(images/overlay.png) repeat;
21    text-align: center;
22    cursor: pointer;
23    z-index: 9999;
24
25    p {
26        text-align: right;
27        color: #fff;
28        margin-right: 20px;
29        font-size: 12px;
30    }
31
32    img {
33        box-shadow: 0 0 25px #111;
34        -webkit-box-shadow: 0 0 25px #111;
35        -moz-box-shadow: 0 0 25px #111;
36        max-width: 90%;
37        max-height: 90%;
38    }
39}
40
41/**
42 * general styles
43 */
44#extension__manager {
45    // tab layout - most of it is in the main template
46    ul.tabs li.active a {
47        background-color: @ini_background_alt;
48        border-bottom: solid 1px @ini_background_alt;
49        z-index: 2;
50    }
51    .panelHeader {
52        background-color: @ini_background_alt;
53        margin: 0 0 10px 0;
54        padding: 10px 10px 8px;
55        overflow: hidden;
56    }
57
58    // message spacing
59    div.msg {
60        margin: 0.4em 0 0 0;
61    }
62}
63
64/*
65 * extensions table
66 */
67#extension__list {
68    ul.extensionList {
69        margin-left: 0;
70        margin-right: 0;
71        padding: 0;
72        list-style: none;
73    }
74
75    ul.extensionList li {
76        margin: 0 0 .5em;
77        padding: 0 0 .5em;
78        color: @ini_text;
79        border-bottom: 1px solid @ini_border;
80        overflow: hidden;
81    }
82
83    button {
84        margin-bottom: .3em;
85    }
86}
87
88/**
89 * extension table left column
90 */
91#extension__list .legend {
92    position: relative;
93    width: 75%;
94    float: left;
95
96    // padding
97    > div {
98        padding: 0 .5em 0 132px;
99        border-right: 1px solid @ini_background_alt;
100        overflow: hidden;
101    }
102
103    // screenshot
104    div.screenshot {
105        margin-top: 4px;
106        margin-left: -132px;
107        max-width: 120px;
108        float: left;
109        position: relative;
110
111        img {
112            width: 120px;
113            height: 70px;
114            border-radius: 5px;
115            box-shadow: 2px 2px 2px #666;
116        }
117
118        span {
119            min-height: 24px;
120            min-width: 24px;
121            position: absolute;
122            left: 0;
123            top: 0;
124        }
125    }
126
127    // plugin headline
128    h2 {
129        width: 100%;
130        float: right;
131        margin: 0.2em 0 0.5em;
132        font-size: 100%;
133        font-weight: normal;
134        border: none;
135
136        strong {
137            font-size: 120%;
138            font-weight: bold;
139            vertical-align: baseline;
140        }
141    }
142
143    // description
144    p {
145        margin: 0 0 0.6em 0;
146    }
147
148    // popularity bar
149    div.popularity {
150        background-color: @ini_background;
151        border: 1px solid silver;
152        height: .4em;
153        margin: 0 auto;
154        padding: 1px;
155        width: 5.5em;
156        position: absolute;
157        right: .5em;
158        top: 0.2em;
159
160        div {
161            background-color: @ini_border;
162            height: 100%;
163        }
164    }
165
166    // Docs, Bugs, Tags
167    div.linkbar {
168        font-size: 85%;
169
170        span.tags {
171            padding-left: 18px;
172            background: transparent url(images/tag.png) no-repeat 0 0;
173        }
174
175        a.bugs {
176            padding-left: 18px;
177            background: transparent url(images/bug.gif) no-repeat 0 0;
178        }
179    }
180
181    // more info button
182    a.info {
183        background: transparent url(images/down.png) no-repeat 0 0;
184        border-width: 0;
185        height: 13px;
186        width: 13px;
187        text-indent: -9999px;
188        float: right;
189        margin: .5em 0 0;
190        overflow: hidden;
191
192        &.close {
193            background: transparent url(images/up.png) no-repeat 0 0;
194        }
195    }
196
197    // detailed info box
198    dl.details {
199        margin: 0.4em 0 0 0;
200        font-size: 85%;
201        border-top: 1px solid @ini_background_alt;
202        clear: both;
203
204        dt {
205            clear: left;
206            float: left;
207            width: 25%;
208            margin: 0;
209            text-align: right;
210            font-weight: normal;
211            padding: 0.2em 5px 0 0;
212            font-weight: bold;
213        }
214
215        dd {
216            margin-left: 25%;
217            padding: 0.2em 0 0 5px;
218
219            a.donate {
220                padding-left: 18px;
221                background: transparent url(images/donate.png) left center no-repeat;
222            }
223        }
224    }
225}
226
227[dir=rtl] #extension__list .legend {
228    float: right;
229
230    > div {
231        padding: 0 132px 0 .5em;
232        border-left: 1px solid @ini_background_alt;
233        border-right-width: 0;
234    }
235
236    div.screenshot {
237        margin-left: 0;
238        margin-right: -132px;
239        float: right;
240
241        span {
242            left: auto;
243            right: 0;
244        }
245    }
246
247    h2 {
248        float: left;
249    }
250
251    div.popularity {
252        right: auto;
253        left: .5em;
254    }
255
256    div.linkbar span.tags,
257    dl.details dd a.donate {
258        padding-left: 0;
259        padding-right: 18px;
260        background-position: top right;
261    }
262
263    a.info {
264        float: left;
265    }
266
267    dl.details {
268        dt {
269            clear: right;
270            float: right;
271            text-align: left;
272            padding-left: 5px;
273            padding-right: 0;
274        }
275
276        dd {
277            margin-left: 0;
278            margin-right: 25%;
279            padding-left: 0;
280            padding-right: 5px;
281        }
282    }
283}
284
285/*
286 * Enabled/Disabled overrides
287 */
288#extension__list {
289
290    &.hasDisplayOptions {
291        .enabled,
292        .disabled,
293        .updatable {
294            display: none;
295        }
296
297        &.enabled .enabled,
298        &.disabled .disabled,
299        &.updatable .updatable {
300            display: block;
301        }
302    }
303
304    .enabled div.screenshot span {
305        background: transparent url(images/enabled.png) no-repeat 2px 2px;
306    }
307
308    .disabled div.screenshot span {
309        background: transparent url(images/disabled.png) no-repeat 2px 2px;
310    }
311
312    .disabled .legend {
313        opacity: 0.7;
314    }
315}
316
317/**
318 * extension table right column
319 */
320#extension__manager .actions {
321    padding: 0;
322    font-size: 95%;
323    width: 25%;
324    float: right;
325    text-align: right;
326
327    .version {
328        display: block;
329    }
330
331    p {
332        margin: 0.2em 0;
333        text-align: center;
334    }
335
336    p.permerror {
337        margin-left: 0.4em;
338        text-align: left;
339        padding-left: 19px;
340        background: transparent url(images/warning.png) center left no-repeat;
341        line-height: 18px;
342        font-size: 12px;
343    }
344}
345
346[dir=rtl] #extension__manager .actions {
347    float: left;
348    text-align: left;
349
350    p.permerror {
351        margin-left: 0;
352        margin-right: 0.4em;
353        text-align: right;
354        padding-left: 0;
355        padding-right: 19px;
356        background-position: center right;
357    }
358}
359
360/**
361 * Search form
362 */
363#extension__manager form.search {
364    display: block;
365    margin-bottom: 2em;
366
367    span {
368        font-weight: bold;
369    }
370
371    input.edit {
372        width: 25em;
373    }
374}
375
376/**
377 * Install form
378 */
379#extension__manager form.install {
380    text-align: center;
381    display: block;
382    width: 60%;
383}
384
385#extension__viewoptions label {
386    margin-left: 1em;
387    vertical-align: baseline;
388}
389