xref: /dokuwiki/lib/plugins/extension/style.less (revision 47559c79fedce97add92eb193fb379b8795fc612) 
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        text-align: left;
56        overflow: hidden;
57    }
58
59    // message spacing
60    div.msg {
61        margin: 0.4em 0 0 0;
62    }
63}
64
65/*
66 * extensions table
67 */
68#extension__list {
69    ul.extensionList {
70        margin-left: 0;
71        margin-right: 0;
72        padding: 0;
73        list-style: none;
74    }
75
76    ul.extensionList li {
77        margin: 0 0 .5em;
78        padding: 0 0 .5em;
79        color: @ini_text;
80        border-bottom: 1px solid @ini_border;
81        overflow: hidden;
82    }
83
84    input.button {
85        margin: 0 .3em .3em 0;
86    }
87}
88
89/**
90 * extension table left column
91 */
92#extension__list .legend {
93    position: relative;
94    width: 75%;
95    float: left;
96
97    // padding
98    > div {
99        padding: 0 .5em 0 132px;
100        border-right: 1px solid @ini_background_alt;
101        overflow: hidden;
102    }
103
104    // screenshot
105    div.screenshot {
106        margin-top: 4px;
107        margin-left: -132px;
108        max-width: 120px;
109        float: left;
110        position: relative;
111
112        img {
113            width: 120px;
114            height: 70px;
115            border-radius: 5px;
116            box-shadow: 2px 2px 2px #666;
117        }
118
119        span {
120            min-height: 24px;
121            min-width: 24px;
122            position: absolute;
123            left: 0px;
124            top: 0px;
125        }
126    }
127
128    // plugin headline
129    h2 {
130        width: 100%;
131        float: right;
132        margin: 0.2em 0 0.5em;
133        font-size: 100%;
134        font-weight: normal;
135        border: none;
136
137        strong {
138            font-size: 120%;
139            font-weight: bold;
140            vertical-align: baseline;
141        }
142    }
143
144    // description
145    p {
146        margin: 0 0 0.6em 0;
147    }
148
149    // popularity bar
150    div.popularity {
151        background-color: @ini_background;
152        border: 1px solid silver;
153        height: .4em;
154        margin: 0 auto;
155        padding: 1px;
156        width: 5.5em;
157        position: absolute;
158        right: .5em;
159        top: 0.2em;
160
161        div {
162            background-color: @ini_border;
163            height: 100%;
164        }
165    }
166
167    // Docs, Bugs, Tags
168    div.linkbar {
169        font-size: 85%;
170
171        span.tags {
172            padding-left: 18px;
173            background: transparent url(images/tag.png) no-repeat 0 0;
174        }
175    }
176
177    // more info button
178    a.info {
179        background: transparent url(images/down.png) no-repeat 0 0;
180        border-width: 0;
181        height: 13px;
182        width: 13px;
183        text-indent: -9999px;
184        float: right;
185        margin: .5em 0 0;
186        overflow: hidden;
187
188        &.close {
189            background: transparent url(images/up.png) no-repeat 0 0;
190        }
191    }
192
193    // detailed info box
194    dl.details {
195        margin: 0.4em 0 0 0;
196        font-size: 85%;
197        border-top: 1px solid @ini_background_alt;
198        clear: both;
199
200        dt {
201            clear: left;
202            float: left;
203            width: 25%;
204            margin: 0;
205            text-align: right;
206            font-weight: normal;
207            padding: 0.2em 5px 0 0;
208            font-weight: bold;
209        }
210
211        dd {
212            margin-left: 25%;
213            padding: 0.2em 0 0 5px;
214
215            a.donate {
216                padding-left: 18px;
217                background: transparent url(images/donate.png) left center no-repeat;
218            }
219        }
220    }
221}
222
223/*
224 * Enabled/Disabled overrides
225 */
226#extension__list {
227    .enabled div.screenshot span {
228        background: transparent url(images/enabled.png) no-repeat 2px 2px;
229    }
230
231    .disabled div.screenshot span {
232        background: transparent url(images/disabled.png) no-repeat 2px 2px;
233    }
234
235    .disabled .legend {
236        opacity: 0.7;
237    }
238}
239
240/**
241 * extension table right column
242 */
243#extension__manager .actions {
244    padding: 0;
245    font-size: 95%;
246    width: 25%;
247    float: right;
248    text-align: right;
249
250    .version {
251        display: block;
252    }
253
254    p {
255        margin: 0.2em 0;
256        text-align: center;
257    }
258
259    p.permerror {
260        margin-left: 0.4em;
261        text-align: left;
262        padding-left: 19px;
263        background: transparent url(images/warning.png) center left no-repeat;
264        line-height: 18px;
265        font-size: 12px;
266    }
267}
268
269/**
270 * Search form
271 */
272#extension__manager form.search {
273    display: block;
274    margin-bottom: 2em;
275
276    span {
277        font-weight: bold;
278    }
279
280    input.edit {
281        width: 25em;
282    }
283}
284
285/**
286 * Install form
287 */
288#extension__manager form.install {
289    text-align: center;
290    display: block;
291    width: 60%;
292}
293