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