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