xref: /dokuwiki/lib/plugins/extension/style.less (revision 8251e9612a372ea2e25e0d896fb0c3b8e4c3af73) 
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 layout
43 */
44#extension__manager h2 {
45    margin-left: 0;
46}
47
48#extension__manager .panelHeader div.error {
49    margin-top: 0;
50    float: left;
51}
52[dir=rtl] #extension__manager .panelHeader div.error {
53    float: right;
54}
55
56/*
57 * search & url download forms
58 */
59#extension__manager form.search,
60#extension__manager form.btn_reload {
61    float: right;
62}
63[dir=rtl] #extension__manager form.search,
64[dir=rtl] #extension__manager form.btn_reload {
65    float: left;
66}
67
68#extension__manager div.search form.search {
69    float: none;
70}
71
72#extension__manager .tagcloud {
73    width: 55%;
74    float: left;
75    margin: 0 0.5em 1em 0;
76}
77[dir=rtl] #extension__manager .tagcloud {
78    float: right;
79    margin: 0 0 1em .5em;
80}
81
82#extension__manager .tagcloud a.taglink {
83    background-color: inherit;
84}
85
86#extension__manager div.search {
87    width: 44%;
88    float: left;
89}
90[dir=rtl] #extension__manager div.search {
91    float: right;
92}
93
94#extension__manager fieldset {
95    margin-top: 0.5em;
96    width: auto;
97}
98
99#extension__manager fieldset p {
100    margin: 0.5em;
101    text-align: justify;
102    font-size: 85%;
103}
104
105/* tag cloud */
106#extension__manager a.cl0 { font-size: 0.7em; }
107#extension__manager a.cl1 { font-size: 0.9em; }
108#extension__manager a.cl2 { font-size: 1em; }
109#extension__manager a.cl3 { font-size: 1.3em; }
110#extension__manager a.cl4 { font-size: 1.6em; }
111#extension__manager a.cl5 { font-size: 1.9em; }
112
113
114#extension__manager .extensionList input.button {
115    margin: 0 .3em .3em 0;
116}
117[dir=rtl] #extension__manager .extensionList input.button {
118    margin: 0 0 .3em .3em;
119}
120
121/*
122 * extensions table
123 */
124#extension__manager .extensionList {
125    margin-left: 0;
126    margin-right: 0;
127    padding: 0;
128    list-style: none;
129}
130
131#extension__manager .extensionList li {
132    margin: 0 0 .5em;
133    padding: 0 0 .5em;
134    color: @ini_text;
135    border-bottom: 1px solid @ini_border;
136    overflow: hidden;
137}
138
139#extension__manager .legend {
140    position: relative;
141    width: 75%;
142    float: left;
143}
144[dir=rtl] #extension__manager .legend {
145    float: right;
146}
147
148#extension__manager .legend > div {
149    padding: 0 .5em 0 132px;
150    border-right: 1px solid @ini_background_alt;
151    overflow: hidden;
152}
153[dir=rtl] #extension__manager .legend > div {
154    padding: 0 132px 0 .5em;
155    border-left: 1px solid @ini_background_alt;
156    border-right-width: 0;
157}
158
159#extension__manager .enabled div.screenshot span {
160    background: transparent url(images/enabled.png) no-repeat 2px 2px;
161}
162
163#extension__manager .disabled div.screenshot span {
164    background: transparent url(images/disabled.png) no-repeat 2px 2px;
165}
166
167#extension__manager .disabled .legend {
168    opacity: 0.7;
169}
170
171#extension__manager div.screenshot img {
172    width: 120px;
173    height: 70px;
174}
175
176#extension__manager .legend div.screenshot {
177    margin-top: 4px;
178    margin-left: -132px;
179    max-width: 120px;
180    float: left;
181}
182[dir=rtl] #extension__manager .legend div.screenshot {
183    margin-left: 0;
184    margin-right: -132px;
185    float: right;
186}
187
188#extension__manager .legend div.screenshot span {
189    min-height: 24px;
190    min-width: 24px;
191    position: absolute;
192    left: 0;
193}
194[dir=rtl] #extension__manager .legend div.screenshot span {
195    left: auto;
196    right: 0;
197}
198
199#extension__manager .legend h2 {
200    width: 100%;
201    float: right;
202    margin: 0.2em 0 0.5em;
203    font-size: 100%;
204    font-weight: normal;
205    border: none;
206}
207[dir=rtl] #extension__manager .legend h2 {
208    float: left;
209}
210
211#extension__manager .legend h2 strong {
212    font-size: 120%;
213    font-weight: bold;
214    vertical-align: baseline;
215}
216
217#extension__manager .legend p {
218    margin: 0 0 0.6em 0;
219}
220
221#extension__manager .legend span.linkbar {
222    font-size: 85%;
223}
224
225#extension__manager .legend span.linkbar span.tags {
226    padding-left: 18px;
227    background: transparent url(images/tag.png) no-repeat 0 0;
228}
229
230
231#extension__manager .legend input.button {
232    background: transparent url(images/up.png) no-repeat 0 0;
233    box-shadow: none;
234    border-width: 0;
235    height: 14px;
236    text-indent: -99999px;
237    float: right;
238    margin: .5em 0 0;
239}
240[dir=rtl] #extension__manager .legend input.button {
241    float: left;
242    margin: .5em 0 0;
243}
244
245#extension__manager .legend  input.button.close {
246    background: transparent url(images/down.png) no-repeat 0 0;
247}
248
249#extension__manager .legend div.popularity {
250    background-color: @ini_background;
251    border: 1px solid silver;
252    height: .4em;
253    margin: 0 auto;
254    padding: 1px;
255    width: 5.5em;
256    position: absolute;
257    right: .5em;
258    top: 0.2em;
259}
260[dir=rtl] #extension__manager .legend div.popularity {
261    right: auto;
262    left: .5em;
263}
264
265#extension__manager .legend div.popularity div {
266    background-color: @ini_border;
267    height: 100%;
268}
269
270#extension__manager .legend div.popularity div span {
271    display: none;/* @todo: hide accessibly */
272}
273
274#extension__manager .actions {
275    padding: 0;
276    font-size: 95%;
277    width: 25%;
278    float: right;
279    text-align: right;
280}
281[dir=rtl] #extension__manager .actions {
282    float: left;
283    text-align: left;
284}
285
286#extension__manager .actions .version {
287    display: block;
288}
289
290#extension__manager .actions p {
291    margin: 0.2em 0;
292    text-align: center;
293}
294
295/*
296 * extensions table, detailed info box
297 */
298#extension__manager dl.details {
299    margin: 0.4em 0 0 0;
300    font-size: 85%;
301    border-top: 1px solid @ini_background_alt;
302    clear: both;
303}
304
305#extension__manager dl.details dt {
306    clear: left;
307    float: left;
308    width: 25%;
309    margin: 0;
310    text-align: right;
311    font-weight: normal;
312    padding: 0.2em 5px 0 0;
313}
314[dir=rtl] #extension__manager dl.details dt {
315    clear: right;
316    float: right;
317    text-align: left;
318    padding: 0.2em 0 0 5px;
319}
320
321#extension__manager dl.details dd {
322    margin-left: 25%;
323    font-weight: bold;
324    padding: 0.2em 0 0 5px;
325}
326[dir=rtl] #extension__manager dl.details dd {
327    margin-left: 0;
328    margin-right: 25%;
329    padding: 0.2em 5px 0 0 ;
330}
331
332#extension__manager dl.details dd a {
333    font-weight: normal;
334}
335
336#extension__manager #info__popup {
337    z-index: 20;
338    overflow: hidden;
339    opacity: 0.9;
340    border: 1px solid @ini_border;
341    background-color: @ini_border; /*background_other__;*/
342    text-align: left;
343    padding: 0.2em;
344}
345[dir=rtl] #extension__manager #info__popup {
346    text-align: right;
347}
348
349#extension__manager div.msg {
350    margin: 0.4em 0 0 0;
351}
352
353#extension__manager ul.tabs div.msg {
354    display: inline;
355    margin-left: 0.4em;
356}
357[dir=rtl] #extension__manager ul.tabs div.msg {
358    margin-left: 0;
359    margin-right: 0.4em;
360}
361
362/* end admin plugin styles */
363