xref: /dokuwiki/lib/plugins/extension/style.less (revision 9791ae45a2cecde4116a2846f15bca9dec8f1bc5) 
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                }
167            }
168        }
169
170
171        > .notices {
172            grid-column: 2 / span 2;
173            grid-row: 2;
174            padding: 0 0.5em;
175
176            ul, li {
177                list-style: none;
178                margin: 0.5em 0 0 0;
179                padding: 0;
180
181                div.li {
182                    display: flex;
183                    line-height: 1.2em;
184                    gap: 0.25em;
185                    align-items: center;
186                    span.icon svg {
187                        fill: @ini_link;
188                    }
189                }
190
191                &.error div.li span.icon svg {
192                    fill: #f33;
193                }
194                &.security div.li span.icon svg,
195                &.warning div.li span.icon svg {
196                    fill: #f90;
197                }
198            }
199        }
200
201        > .details {
202            grid-column: 1 / span 3;
203            grid-row: 3;
204
205            details {
206                font-size: 90%;
207                border: 1px solid transparent; // fixes jumping summary
208                summary {
209                    cursor: pointer;
210                    float: left;
211                    margin-top: -1.5em; // moves it up into the screenshot margin
212                    color: @ini_text_alt;
213                }
214
215                &[open] {
216                    dl {
217                        margin: 0.5em 0 0.5em 0;
218                    }
219                }
220
221                dl {
222                    margin: 0;
223                    display: grid;
224                    grid-template-columns: @thumbwidth auto;
225
226                    dt {
227                        grid-column: 1;
228                    }
229
230                    dd {
231                        grid-column: 2;
232                        margin: 0 0 0 0.5em;
233                    }
234                }
235            }
236        }
237    }
238
239    section.extension.installed.disabled {
240        .screenshot img,
241        .main,
242        .details {
243            opacity: 0.5;
244        }
245    }
246
247    &.filter {
248        section.extension {
249            display: none;
250        }
251        section.extension.update {
252            display: grid;
253        }
254    }
255}
256
257/**
258 * Search form
259 */
260#extension__manager form.search {
261    display: block;
262    margin-bottom: 2em;
263
264    span {
265        font-weight: bold;
266    }
267
268    input.edit {
269        width: 25em;
270    }
271}
272
273/**
274 * Install form
275 */
276#extension__manager form.install {
277    text-align: center;
278    display: block;
279    width: 60%;
280}
281