xref: /dokuwiki/lib/plugins/extension/style.less (revision 25957e773bfab367ebe639f75e6413f30b60dfff) 
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    input.button {
84        margin: 0 .3em .3em 0;
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
176    // more info button
177    a.info {
178        background: transparent url(images/down.png) no-repeat 0 0;
179        border-width: 0;
180        height: 13px;
181        width: 13px;
182        text-indent: -9999px;
183        float: right;
184        margin: .5em 0 0;
185        overflow: hidden;
186
187        &.close {
188            background: transparent url(images/up.png) no-repeat 0 0;
189        }
190    }
191
192    // detailed info box
193    dl.details {
194        margin: 0.4em 0 0 0;
195        font-size: 85%;
196        border-top: 1px solid @ini_background_alt;
197        clear: both;
198
199        dt {
200            clear: left;
201            float: left;
202            width: 25%;
203            margin: 0;
204            text-align: right;
205            font-weight: normal;
206            padding: 0.2em 5px 0 0;
207            font-weight: bold;
208        }
209
210        dd {
211            margin-left: 25%;
212            padding: 0.2em 0 0 5px;
213
214            a.donate {
215                padding-left: 18px;
216                background: transparent url(images/donate.png) left center no-repeat;
217            }
218        }
219    }
220}
221
222[dir=rtl] #extension__list .legend {
223    float: right;
224
225    > div {
226        padding: 0 132px 0 .5em;
227        border-left: 1px solid @ini_background_alt;
228        border-right-width: 0;
229    }
230
231    div.screenshot {
232        margin-left: 0;
233        margin-right: -132px;
234        float: right;
235
236        span {
237            left: auto;
238            right: 0;
239        }
240    }
241
242    h2 {
243        float: left;
244    }
245
246    div.popularity {
247        right: auto;
248        left: .5em;
249    }
250
251    div.linkbar span.tags,
252    dl.details dd a.donate {
253        padding-left: 0;
254        padding-right: 18px;
255        background-position: top right;
256    }
257
258    a.info {
259        float: left;
260    }
261
262    dl.details {
263        dt {
264            clear: right;
265            float: right;
266            text-align: left;
267            padding-left: 5px;
268            padding-right: 0;
269        }
270
271        dd {
272            margin-left: 0;
273            margin-right: 25%;
274            padding-left: 0;
275            padding-right: 5px;
276        }
277    }
278}
279
280/*
281 * Enabled/Disabled overrides
282 */
283#extension__list {
284
285    &.hasDisplayOptions {
286        .enabled,
287        .disabled,
288        .updatable {
289            display: none;
290        }
291
292        &.enabled .enabled,
293        &.disabled .disabled,
294        &.updatable .updatable {
295            display: block;
296        }
297    }
298
299    .enabled div.screenshot span {
300        background: transparent url(images/enabled.png) no-repeat 2px 2px;
301    }
302
303    .disabled div.screenshot span {
304        background: transparent url(images/disabled.png) no-repeat 2px 2px;
305    }
306
307    .disabled .legend {
308        opacity: 0.7;
309    }
310}
311
312/**
313 * extension table right column
314 */
315#extension__manager .actions {
316    padding: 0;
317    font-size: 95%;
318    width: 25%;
319    float: right;
320    text-align: right;
321
322    .version {
323        display: block;
324    }
325
326    p {
327        margin: 0.2em 0;
328        text-align: center;
329    }
330
331    p.permerror {
332        margin-left: 0.4em;
333        text-align: left;
334        padding-left: 19px;
335        background: transparent url(images/warning.png) center left no-repeat;
336        line-height: 18px;
337        font-size: 12px;
338    }
339}
340
341[dir=rtl] #extension__manager .actions {
342    float: left;
343    text-align: left;
344
345    p.permerror {
346        margin-left: 0;
347        margin-right: 0.4em;
348        text-align: right;
349        padding-left: 0;
350        padding-right: 19px;
351        background-position: center right;
352    }
353}
354
355/**
356 * Search form
357 */
358#extension__manager form.search {
359    display: block;
360    margin-bottom: 2em;
361
362    span {
363        font-weight: bold;
364    }
365
366    input.edit {
367        width: 25em;
368    }
369}
370
371/**
372 * Install form
373 */
374#extension__manager form.install {
375    text-align: center;
376    display: block;
377    width: 60%;
378}
379
380#extension__viewoptions label {
381    margin-left: 1em;
382    vertical-align: baseline;
383}
384