xref: /dokuwiki/lib/plugins/extension/style.less (revision 20db0ca9581169263a362cff92dccc6dc1e32836) 
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    section.extension {
66        display: grid;
67        grid-template-columns: auto 1fr 15em;
68        grid-template-rows: repeat(3);
69        gap: 1em;
70        margin-bottom: 1em;
71        border-bottom: 1px solid @ini_border;
72
73        > h2 {
74            grid-column: 1 / span 2;
75            grid-row: 1;
76            margin: 0; // is added by grid gap
77            position: relative;
78
79            .version {
80                font-size: 80%;
81                font-weight: normal;
82            }
83
84            .popularity {
85                font-size: 1rem;
86                background-color: @ini_background;
87                border: 1px solid @ini_border;
88                height: .4em;
89                margin: 0 auto;
90                padding: 1px;
91                width: 5.5em;
92                position: absolute;
93                right: 0;
94                top: 0.25em;
95
96                div {
97                    background-color: @ini_border;
98                    height: 100%;
99                }
100            }
101        }
102
103        > .screenshot {
104            grid-column: 1;
105            grid-row: 2;
106        }
107
108        > .main {
109            grid-column: 2;
110            grid-row: 2;
111        }
112
113        > .details {
114            grid-column: 1 / span 2;
115            grid-row: 3;
116
117            .linkbar {
118                line-height: 1.2em;
119                font-size: 90%;
120            }
121
122            details {
123                font-size: 90%;
124                border: 1px solid transparent; // fixes jumping summary
125                summary {
126                    cursor: pointer;
127                    float: right;
128                    margin-top: -1.2em;
129                    line-height: 1.2em;
130                }
131
132                dl {
133                    margin-top: 1em;
134
135                    dt {
136                        float: left;
137                        clear: left;
138                        width: 30%;
139                        text-align: right;
140                        margin-right: 1em;
141                    }
142
143                    dd {
144                        float: left;
145                        width: 60%;
146                        margin-left: 1em;
147                    }
148                }
149            }
150        }
151
152        > .version {
153            grid-column: 3;
154            grid-row: 1;
155            align-self: end;
156        }
157
158        > .actions {
159            grid-column: 3;
160            grid-row: 2 / span 2;
161        }
162    }
163}
164
165/**
166 * Search form
167 */
168#extension__manager form.search {
169    display: block;
170    margin-bottom: 2em;
171
172    span {
173        font-weight: bold;
174    }
175
176    input.edit {
177        width: 25em;
178    }
179}
180
181/**
182 * Install form
183 */
184#extension__manager form.install {
185    text-align: center;
186    display: block;
187    width: 60%;
188}
189
190#extension__viewoptions label {
191    margin-left: 1em;
192    vertical-align: baseline;
193}
194