xref: /dokuwiki/lib/plugins/extension/style.less (revision b41ff07f7c9b9b261df7f8af0279201a2abe06db) 
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 22%;
70        grid-template-rows: repeat(4, auto);
71        margin-bottom: 1em;
72        border-bottom: 1px solid @ini_border;
73        word-break: break-word;
74
75        > .screenshot {
76            grid-column: 1;
77            grid-row: 1;
78            padding-top: 0.5em;
79            padding-right: 0.5em;
80            margin-bottom: 1.5em; // adds space for the detail summary label
81            position: relative;
82
83            img.shot {
84                border: 1px solid @ini_border;
85                border-radius: 2px;
86                width: 100%;
87                height: auto;
88            }
89
90            .id {
91                font-size: 80%;
92                color: @ini_text_alt;
93                background-color: @ini_background_alt;
94                padding: 0.1em 0.25em;
95                position: absolute;
96                top: 0.5em;
97                left: 0;
98                border-bottom-left-radius: 2px;
99                white-space: nowrap;
100                max-width: 100%;
101                overflow: hidden;
102                text-overflow: ellipsis;
103                cursor: default;
104            }
105
106            .popularity {
107                cursor: default;
108                img {
109                    vertical-align: middle;
110                    height: 1.2rem;
111                    width: auto;
112                }
113            }
114        }
115
116        > .main {
117            grid-column: 2;
118            grid-row: 1;
119            padding: 0.5em;
120            min-height: 7em;
121
122            > h2 {
123                font-size: 100%;
124                line-height: 1.2;
125                font-weight: normal;
126                display: flex;
127                gap: 1em;
128                justify-content: space-between;
129
130                strong {
131                    font-size: 120%;
132                    font-weight: bold;
133                }
134
135                .version {
136                    white-space: nowrap;
137                }
138            }
139
140            .linkbar {
141                a.bugs {
142                    background-image: url('images/bug.svg');
143                }
144                a.donate {
145                    background-image: url('images/coffee.svg');
146                }
147            }
148        }
149
150        > .actions {
151            grid-column: 3;
152            grid-row: 1;
153            padding: 0.5em 0 0.5em 0.5em;
154            display: flex;
155            flex-direction: column;
156            align-items: end;
157            gap: 0.5em;
158
159            .available {
160                line-height: 1.2;
161                margin-bottom: 1em;
162                text-align: right;
163
164                .version {
165                    white-space: nowrap;
166                    background: linear-gradient(to top, @ini_highlight, transparent);
167                }
168            }
169        }
170
171
172        > .notices {
173            grid-column: 2 / span 2;
174            grid-row: 2;
175            padding: 0 0.5em;
176
177            ul, li {
178                list-style: none;
179                margin: 0.5em 0 0 0;
180                padding: 0;
181
182                div.li {
183                    display: flex;
184                    line-height: 1.2em;
185                    gap: 0.25em;
186                    align-items: center;
187                    span.icon svg {
188                        fill: @ini_link;
189                    }
190                }
191
192                &.error div.li span.icon svg {
193                    fill: #f33;
194                }
195                &.security div.li span.icon svg,
196                &.warning div.li span.icon svg {
197                    fill: #f90;
198                }
199            }
200        }
201
202        > .details {
203            grid-column: 1 / span 3;
204            grid-row: 3;
205
206            details {
207                font-size: 90%;
208                border: 1px solid transparent; // fixes jumping summary
209                summary {
210                    cursor: pointer;
211                    float: left;
212                    margin-top: -1.5em; // moves it up into the screenshot margin
213                    color: @ini_text_alt;
214                }
215
216                &[open] {
217                    dl {
218                        margin: 0.5em 0 0.5em 0;
219                    }
220                }
221
222                dl {
223                    margin: 0;
224                    display: grid;
225                    grid-template-columns: @thumbwidth auto;
226
227                    dt {
228                        grid-column: 1;
229                    }
230
231                    dd {
232                        grid-column: 2;
233                        margin: 0 0 0 0.5em;
234                    }
235                }
236            }
237        }
238    }
239
240    section.extension.installed.disabled {
241        .screenshot img,
242        .main,
243        .details {
244            opacity: 0.5;
245        }
246    }
247
248    &.filter {
249        section.extension {
250            display: none;
251        }
252        section.extension.update {
253            display: grid;
254        }
255    }
256}
257
258/**
259 * Search form
260 */
261#extension__manager form.search {
262    display: block;
263    margin-bottom: 2em;
264
265    span {
266        font-weight: bold;
267    }
268
269    input.edit {
270        width: 25em;
271    }
272}
273
274/**
275 * Install form
276 */
277#extension__manager form.install {
278    text-align: center;
279    display: block;
280    width: 60%;
281}
282