xref: /dokuwiki/lib/plugins/extension/style.less (revision dc19220032f21053c2bd43e0c265c24a51c90f33) 
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 * @author  Andreas Gohr <andi@splitbrain.org>
9 */
10
11/**
12 * very simple lightbox
13 * @link http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/
14 */
15#plugin__extensionlightbox {
16    position: fixed;
17    top: 0;
18    left: 0;
19    width: 100%;
20    height: 100%;
21    background: url(images/overlay.png) repeat;
22    text-align: center;
23    cursor: pointer;
24    z-index: 9999;
25
26    p {
27        text-align: right;
28        color: #fff;
29        margin-right: 20px;
30        font-size: 12px;
31    }
32
33    img {
34        box-shadow: 0 0 25px #111;
35        max-width: 90%;
36        max-height: 90%;
37    }
38}
39
40/**
41 * general styles
42 */
43#extension__manager {
44    // tab layout - most of it is in the main template
45    ul.tabs li.active a {
46        background-color: @ini_background_alt;
47        border-bottom: solid 1px @ini_background_alt;
48        z-index: 2;
49    }
50
51    .panelHeader {
52        background-color: @ini_background_alt;
53        margin: 0 0 10px 0;
54        padding: 10px 10px 8px;
55        overflow: hidden;
56    }
57}
58
59
60#extension__list {
61    @thumbwidth: 125px; // width of the thumbnail column, can be increased once we have larger thumbnails
62
63    &, * {
64        box-sizing: border-box;
65    }
66
67    section.extension {
68        display: grid;
69        grid-template-columns: @thumbwidth auto 15em;
70        grid-template-rows: repeat(4, auto);
71        margin-bottom: 1em;
72        border-bottom: 1px solid @ini_border;
73
74        > .screenshot {
75            grid-column: 1;
76            grid-row: 1;
77            padding-top: 0.5em;
78            padding-right: 0.5em;
79            margin-bottom: 1.5em; // adds space for the detail summary label
80            position: relative;
81
82            img.shot {
83                border: 1px solid @ini_border;
84                border-radius: 2px;
85                width: 100%;
86                height: auto;
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                white-space: nowrap;
99                max-width: 100%;
100                overflow: hidden;
101                text-overflow: ellipsis;
102                cursor: default;
103            }
104
105            .popularity {
106                cursor: default;
107                img {
108                    vertical-align: middle;
109                    height: 1.2rem;
110                    width: auto;
111                }
112            }
113        }
114
115        > .main {
116            grid-column: 2;
117            grid-row: 1;
118            padding: 0.5em;
119            min-height: 7em;
120
121            > h2 {
122                font-size: 100%;
123                line-height: 1.2;
124                font-weight: normal;
125                display: flex;
126                gap: 1em;
127                justify-content: space-between;
128
129                strong {
130                    font-size: 120%;
131                    font-weight: bold;
132                }
133
134                .version {
135                }
136            }
137
138            .linkbar {
139                a.bugs {
140                    background-image: url('images/bug.svg');
141                }
142                a.donate {
143                    background-image: url('images/coffee.svg');
144                }
145            }
146        }
147
148        > .actions {
149            grid-column: 3;
150            grid-row: 1;
151            padding: 0.5em 0 0.5em 0.5em;
152            display: flex;
153            flex-direction: column;
154            align-items: end;
155            gap: 0.5em;
156
157            .version {
158                line-height: 1.2;
159                margin-bottom: 1em;
160            }
161        }
162
163
164        > .notices {
165            grid-column: 2 / span 2;
166            grid-row: 2;
167            padding: 0 0.5em;
168
169            ul, li {
170                list-style: none;
171                margin: 0.5em 0 0 0;
172                padding: 0;
173
174                div.li {
175                    display: flex;
176                    line-height: 1.2em;
177                    gap: 0.25em;
178                    align-items: center;
179                    span.icon svg {
180                        fill: @ini_link;
181                    }
182                }
183
184                &.error div.li span.icon svg {
185                    fill: #f33;
186                }
187                &.security div.li span.icon svg,
188                &.warning div.li span.icon svg {
189                    fill: #f90;
190                }
191            }
192        }
193
194        > .details {
195            grid-column: 1 / span 3;
196            grid-row: 3;
197
198            details {
199                font-size: 90%;
200                border: 1px solid transparent; // fixes jumping summary
201                summary {
202                    cursor: pointer;
203                    float: left;
204                    margin-top: -1.5em; // moves it up into the screenshot margin
205                    color: @ini_text_alt;
206                }
207
208                &[open] {
209                    dl {
210                        margin: 0.5em 0 0.5em 0;
211                    }
212                }
213
214                dl {
215                    margin: 0;
216                    display: grid;
217                    grid-template-columns: @thumbwidth auto;
218
219                    dt {
220                        grid-column: 1;
221                    }
222
223                    dd {
224                        grid-column: 2;
225                        margin: 0 0 0 0.5em;
226                    }
227                }
228            }
229        }
230    }
231
232    section.extension.installed.disabled {
233        .screenshot img,
234        .main,
235        .details {
236            opacity: 0.5;
237        }
238    }
239
240    &.filter {
241        section.extension {
242            display: none;
243        }
244        section.extension.update {
245            display: grid;
246        }
247    }
248}
249
250/**
251 * Search form
252 */
253#extension__manager form.search {
254    display: block;
255    margin-bottom: 2em;
256
257    span {
258        font-weight: bold;
259    }
260
261    input.edit {
262        width: 25em;
263    }
264}
265
266/**
267 * Install form
268 */
269#extension__manager form.install {
270    text-align: center;
271    display: block;
272    width: 60%;
273}
274