xref: /dokuwiki/lib/plugins/extension/style.less (revision 80bc92fb6cebd3143ca97b0ad5aa529a28f2cc39) 
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
50    .panelHeader {
51        background-color: @ini_background_alt;
52        margin: 0 0 10px 0;
53        padding: 10px 10px 8px;
54        overflow: hidden;
55    }
56
57    // message spacing
58    div.msg {
59        margin: 0.4em 0 0 0;
60    }
61}
62
63
64#extension__list {
65    @thumbwidth: 120px;
66    @thumbheight: 70px;
67    box-sizing: border-box;
68
69    section.extension {
70        display: grid;
71        grid-template-columns: @thumbwidth auto 15em;
72        grid-template-rows: repeat(4, auto);
73        margin-bottom: 1em;
74        border-bottom: 1px solid @ini_border;
75
76        > .screenshot {
77            grid-column: 1;
78            grid-row: 1;
79            padding: 0.5em 0.5em 0.5em 0;
80            position: relative;
81
82            img {
83                border: 1px solid @ini_border;
84                border-radius: 2px;
85                width: @thumbwidth;
86                height: @thumbheight;
87            }
88
89            .id {
90                font-size: 80%;
91                color: @ini_text_alt;
92                background-color: @ini_background_alt;
93                padding: 0.1em 0.25em;
94                position: absolute;
95                top: 0.5em;
96                left: 0;
97                border-bottom-left-radius: 2px;
98            }
99
100            .popularity {
101                cursor: default;
102            }
103        }
104
105        > .main {
106            grid-column: 2;
107            grid-row: 1;
108            padding: 0.5em;
109            min-height: 7em;
110
111            > h2 {
112                font-size: 100%;
113                line-height: 1.2;
114                font-weight: normal;
115                display: flex;
116                gap: 1em;
117                justify-content: space-between;
118
119                strong {
120                    font-size: 120%;
121                    font-weight: bold;
122                }
123
124                .version {
125                }
126            }
127        }
128
129        > .actions {
130            grid-column: 3;
131            grid-row: 1;
132            padding: 0.5em 0 0.5em 0.5em;
133            display: flex;
134            flex-direction: column;
135            align-items: end;
136            gap: 0.5em;
137
138            .version {
139                line-height: 1.2;
140                margin-bottom: 1em;
141            }
142        }
143
144
145        > .notices {
146            grid-column: 2 / span 2;
147            grid-row: 2;
148            padding: 0 0.5em;
149
150            ul, li {
151                list-style: none;
152                margin: 0.5em 0 0 0;
153                padding: 0;
154
155                span {
156                    font-weight: bold;
157                    color: @ini_link;
158                }
159            }
160        }
161
162        > .details {
163            grid-column: 1 / span 3;
164            grid-row: 3;
165
166            details {
167                font-size: 90%;
168                border: 1px solid transparent; // fixes jumping summary
169                summary {
170                    cursor: pointer;
171                    float: left;
172                    margin-top: -1.5em;
173                    color: @ini_text_alt;
174                }
175
176                &[open] {
177                    dl {
178                        margin: 0.5em 0 0.5em 0;
179                    }
180                }
181
182                dl {
183                    margin: 0;
184                    display: grid;
185                    grid-template-columns: @thumbwidth auto;
186
187                    dt {
188                    }
189
190                    dd {
191                        grid-column: 2;
192                        margin: 0 0 0 0.5em;
193                    }
194                }
195            }
196        }
197    }
198
199    section.extension.disabled {
200        .screenshot img,
201        .main,
202        .notices,
203        .details {
204            opacity: 0.5;
205        }
206    }
207}
208
209/**
210 * Search form
211 */
212#extension__manager form.search {
213    display: block;
214    margin-bottom: 2em;
215
216    span {
217        font-weight: bold;
218    }
219
220    input.edit {
221        width: 25em;
222    }
223}
224
225/**
226 * Install form
227 */
228#extension__manager form.install {
229    text-align: center;
230    display: block;
231    width: 60%;
232}
233
234#extension__viewoptions label {
235    margin-left: 1em;
236    vertical-align: baseline;
237}
238