xref: /dokuwiki/lib/plugins/extension/style.less (revision 75e063084d865a011e074c29c5edb8569fe2cfe1) 
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 a.info {
232    background: transparent url(images/up.png) no-repeat 0 0;
233    border-width: 0;
234    height: 13px;
235    width: 13px;
236    text-indent: -99999px;
237    float: right;
238    margin: .5em 0 0;
239    overflow: hidden;
240}
241[dir=rtl] #extension__manager .legend a.info {
242    float: left;
243    margin: .5em 0 0;
244}
245
246#extension__manager .legend  a.info.close {
247    background: transparent url(images/down.png) no-repeat 0 0;
248}
249
250#extension__manager .legend div.popularity {
251    background-color: @ini_background;
252    border: 1px solid silver;
253    height: .4em;
254    margin: 0 auto;
255    padding: 1px;
256    width: 5.5em;
257    position: absolute;
258    right: .5em;
259    top: 0.2em;
260}
261[dir=rtl] #extension__manager .legend div.popularity {
262    right: auto;
263    left: .5em;
264}
265
266#extension__manager .legend div.popularity div {
267    background-color: @ini_border;
268    height: 100%;
269}
270
271#extension__manager .legend div.popularity div span {
272    display: none;/* @todo: hide accessibly */
273}
274
275#extension__manager .actions {
276    padding: 0;
277    font-size: 95%;
278    width: 25%;
279    float: right;
280    text-align: right;
281}
282[dir=rtl] #extension__manager .actions {
283    float: left;
284    text-align: left;
285}
286
287#extension__manager .actions .version {
288    display: block;
289}
290
291#extension__manager .actions p {
292    margin: 0.2em 0;
293    text-align: center;
294}
295
296/*
297 * extensions table, detailed info box
298 */
299#extension__manager dl.details {
300    margin: 0.4em 0 0 0;
301    font-size: 85%;
302    border-top: 1px solid @ini_background_alt;
303    clear: both;
304}
305
306#extension__manager dl.details dt {
307    clear: left;
308    float: left;
309    width: 25%;
310    margin: 0;
311    text-align: right;
312    font-weight: normal;
313    padding: 0.2em 5px 0 0;
314}
315[dir=rtl] #extension__manager dl.details dt {
316    clear: right;
317    float: right;
318    text-align: left;
319    padding: 0.2em 0 0 5px;
320}
321
322#extension__manager dl.details dd {
323    margin-left: 25%;
324    font-weight: bold;
325    padding: 0.2em 0 0 5px;
326}
327[dir=rtl] #extension__manager dl.details dd {
328    margin-left: 0;
329    margin-right: 25%;
330    padding: 0.2em 5px 0 0 ;
331}
332
333#extension__manager dl.details dd a {
334    font-weight: normal;
335}
336
337#extension__manager #info__popup {
338    z-index: 20;
339    overflow: hidden;
340    opacity: 0.9;
341    border: 1px solid @ini_border;
342    background-color: @ini_border; /*background_other__;*/
343    text-align: left;
344    padding: 0.2em;
345}
346[dir=rtl] #extension__manager #info__popup {
347    text-align: right;
348}
349
350#extension__manager div.msg {
351    margin: 0.4em 0 0 0;
352}
353
354#extension__manager ul.tabs div.msg {
355    display: inline;
356    margin-left: 0.4em;
357}
358[dir=rtl] #extension__manager ul.tabs div.msg {
359    margin-left: 0;
360    margin-right: 0.4em;
361}
362
363/* end admin plugin styles */
364