xref: /dokuwiki/lib/plugins/extension/style.less (revision 981e70cabab67fd2c1ea32d1f7d1ee51fe3e16a6) 
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
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: 0.5em 0.5em 0.5em 0;
78
79            img {
80                border: 1px solid @ini_border;
81                border-radius: 2px;
82            }
83
84            .id {
85                font-size: 80%;
86                color: @ini_text_alt;
87            }
88        }
89
90        > .main {
91            grid-column: 2;
92            grid-row: 1;
93            padding: 0.5em;
94            min-height: 7em;
95
96            > h2 {
97                font-size: 100%;
98                line-height: 1.2;
99                font-weight: normal;
100                display: flex;
101                gap: 1em;
102                justify-content: space-between;
103
104                strong {
105                    font-size: 120%;
106                    font-weight: bold;
107                }
108
109                .version {
110                }
111            }
112        }
113
114        > .actions {
115            grid-column: 3;
116            grid-row: 1;
117            padding: 0.5em 0 0.5em 0.5em;
118            border-left: 1px solid @ini_border;
119
120            .version {
121                line-height: 1.2;
122                margin-bottom: 1em;
123            }
124        }
125
126
127        > .notices {
128            grid-column: 2 / span 2;
129            grid-row: 2;
130            padding: 0 0.5em;
131
132            ul, li {
133                list-style: none;
134                margin: 0.5em 0 0 0;
135                padding: 0;
136            }
137        }
138
139        > .details {
140            grid-column: 1 / span 3;
141            grid-row: 3;
142
143            details {
144                font-size: 90%;
145                border: 1px solid transparent; // fixes jumping summary
146                summary {
147                    cursor: pointer;
148                    float: left;
149                    margin-top: -1.5em;
150                    color: @ini_text_alt;
151                }
152
153                &[open] {
154                    dl {
155                        margin: 0.5em 0 0.5em 0;
156                    }
157                }
158
159                dl {
160                    margin: 0;
161                    display: grid;
162                    grid-template-columns: @thumbwidth auto;
163
164                    dt {
165                    }
166
167                    dd {
168                        grid-column: 2;
169                        margin: 0 0 0 0.5em;
170                    }
171                }
172            }
173        }
174    }
175
176    section.extension.update .actions .version {
177        background-color: @ini_highlight;
178    }
179}
180
181/**
182 * Search form
183 */
184#extension__manager form.search {
185    display: block;
186    margin-bottom: 2em;
187
188    span {
189        font-weight: bold;
190    }
191
192    input.edit {
193        width: 25em;
194    }
195}
196
197/**
198 * Install form
199 */
200#extension__manager form.install {
201    text-align: center;
202    display: block;
203    width: 60%;
204}
205
206#extension__viewoptions label {
207    margin-left: 1em;
208    vertical-align: baseline;
209}
210