1/**
2 * This file provides the design styles for the metatabbox
3 */
4
5#spr__meta-box {
6    .display-flex();
7    .flex-direction();
8    .justify-content(flex-end);
9
10    position: relative;
11    float: right;
12    max-width: 40%;
13    margin-top: -(@page_padding-top); // reverse padding-top of .page container
14    margin-right: -1px;
15
16    // >= 1024
17    @media @screen_min-md {
18        height: @page-header_height;
19        border: 1px solid transparent;
20    }
21
22    // < 1024
23    @media @screen_max-md {
24        position: relative;
25        top: .2rem;
26        right: auto;
27        float: none;
28        max-width: 100%;
29        min-height: @page-header_height;
30        height: auto;
31        border: 0 none;
32    }
33
34    &.sticky {
35        position: fixed;
36        top: 0;
37
38        ul.meta-tabs > li > a {
39            border-top-color: @ini_background_site;
40            border-bottom-color: @noopentasks-border;
41            border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
42
43        }
44
45        .meta-content .tab-pane.active {
46            max-height: 80vh;
47            overflow: auto;
48        }
49    }
50
51    + .msg-area + a {
52        clear: right;
53        margin-top: 20px;
54    }
55
56    .tab-container {
57        display: table;
58
59        @media @screen_max-md {
60            display: block;
61            width: 100%;
62        }
63    }
64
65    .box-content {
66        position: relative;
67        height: 0;
68        overflow-y: visible;
69    }
70
71
72    /* + + + + +  tab controls  + + + + + */
73    ul.meta-tabs {
74        list-style: none;
75        line-height: 160%;
76        margin: 0;
77        padding: 0;
78
79        @media @screen_min-md {
80            white-space: nowrap;
81            text-align: right;
82        }
83
84        &::before,
85        &::after {
86            content: '';
87            clear: both;
88            display: table;
89            box-sizing: border-box;
90        }
91
92        > li:first-child {
93            > a {
94                margin-left: 0;
95            }
96        }
97
98        > li {
99            position: relative;
100            display: inline-block;
101            vertical-align: bottom;
102            margin: 0;
103
104            @media @screen_min-md {
105                margin-left: .3rem;
106            }
107
108            @media @screen_max-md {
109                margin-right: .4rem;
110                margin-bottom: .2rem;
111            }
112
113            > a {
114                cursor: pointer;
115                position: relative;
116                display: block;
117                font-size: @font-size-small;
118                transition: @transition background-color, @transition border-color, @transition color;
119
120                @media @screen_min-md {
121                    background-color: @ini_background_site;
122                    border: 1px solid @noopentasks-border;
123                    border-bottom-color: @ini_background_site;
124                    border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius
125                    color: @ini_nav_menu_color;
126                    margin-left: 4px;
127                    padding: .3em 1rem .1em;
128                }
129
130                @media @screen_max-md {
131                    background-color: @ini_background;
132                    top: 0;
133                    border: 1px solid @ini_existing;
134                    color: @ini_existing;
135                    margin-top: .2rem;
136                    margin-left: 0;
137                    padding: .2em .3rem;
138                }
139
140                * {
141                    cursor: pointer;
142                    color: inherit;
143                    font-size: inherit;
144                }
145
146                .prefix {
147                    position: relative;
148                    color: inherit;
149                    font-size: @font-size-small;
150                }
151
152                &:hover,
153                &:focus,
154                &:active {
155                    text-decoration: none;
156
157                    @media @screen_min-md {
158                        background-color: @ini_background;
159                        border-color: @ini_existing;
160                        color: @ini_existing;
161                    }
162
163                    @media @screen_max-md {
164                        background-color: @ini_existing;
165                        border-color: @ini_background;
166                        color: @ini_background;
167                    }
168                }
169            }
170
171            &.active {
172                > a {
173                    cursor: default;
174                    background-color: @ini_background;
175                    border-color: @ini_existing;
176                    border-bottom-color: @ini_background;
177                    color: @ini_existing;
178
179                    @media @screen_max-md {
180                        background-color: @ini_existing;
181                        border-bottom-color: @ini_existing;
182                        border-radius: 0;
183                        color: @ini_background;
184                    }
185                }
186            }
187        }
188    }
189
190    /* + + + + +  toggle content  + + + + + */
191    .meta-content {
192        margin-top: -1px;
193
194        @media @screen_max-md {
195            clear: both;
196            margin-top: 2px;
197        }
198
199        .tab-pane {
200            position: absolute;
201            top: 0;
202            right: 0;
203            display: none;
204            width: 100%;
205            background-color: @ini_background;
206            border: 1px solid @ini_existing;
207
208            @media @screen_min-xs {
209                min-width: 20em;
210            }
211
212            @media @screen_min-md {
213                border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
214            }
215
216            &.active {
217                display: block;
218            }
219
220            a {
221                color: @ini_existing;
222            }
223
224            > div {
225                font-size: @font-size-small;
226                padding: .8rem .5rem .5rem;
227
228                * {
229                    font-size: inherit;
230                }
231
232                p {
233                    padding-left: 1em;
234                }
235
236                ul {
237                    list-style: none;
238                    padding-left: 0;
239                }
240
241                li {
242                    list-style-image: none; // overwrite universally styles
243                    margin-left: 0;
244                    padding-left: 1em;
245                }
246            }
247
248            &#spr__tab-tags {
249                > div {
250                    ul {
251                        li {
252                            padding-left: 0;
253                        }
254                    }
255                }
256            }
257
258            #dw__toc {
259                width: auto;
260                float: none;
261                margin: 0;
262                padding: .6rem .5rem .5rem .8rem;
263                background: transparent;
264                border: 0 none;
265
266                h3 {
267                    display: none;
268                }
269
270                > div {
271                    padding: 0;
272                }
273
274                > div ul.toc {
275                    font-size: @font-size-small;
276                    padding-left: .5em;
277
278                    a {
279                        font-size: @font-size-small;
280                        display: inline-block;
281                        padding-left: 10px;
282                        position: relative;
283                    }
284
285                    div.li {
286                        position: relative;
287                        padding: .15em 0;
288
289                        &::before {
290                            content: '';
291                            position: absolute;
292                            top: .6em;
293                            left: 0;
294                            display: inline-block;
295                            width: 4px;
296                            height: 4px;
297                            overflow: hidden;
298                            background-color: @ini_existing;
299                        }
300                    }
301                }
302
303                > div > ul.toc {
304                    padding: 0;
305                }
306            }
307        }
308    }
309
310    /* + + + + +  tab issues  + + + + + */
311    #spr__tab-issues {
312        ul.mmissuelist {
313            padding-left: 0;
314            margin-top: 1rem;
315
316            li {
317                &.noissue {
318                    font-size: @font-size-small;
319                    list-style-type: none;
320                    margin-left: 0;
321
322                    .li {
323                        font-size: @font-size-small;
324                        margin-left: .5rem;
325                    }
326                }
327
328                a {
329                    display: inline-block;
330                }
331            }
332
333            img {
334                vertical-align: bottom;
335                margin-right: .3rem;
336            }
337
338            .mm__status {
339                padding-left: .3rem;
340                padding-right: .3rem;
341            }
342
343            form {
344                vertical-align: text-top;
345            }
346        }
347    }
348
349    /* + + + + +  tab issues  + + + + + */
350    /* see plugins/magic-matcher.less   */
351    #spr__tab-issues {
352        ul.mmissuelist {
353            padding-left: 0;
354            margin-top: .5rem;
355            margin-bottom: .6rem;
356
357            li {
358                list-style-type: none;
359                margin-top: .3rem;
360                margin-left: .5rem;
361
362                &.noissue {
363                    list-style-type: none;
364                    margin-left: 0;
365                }
366            }
367
368            a {
369                display: inline-block;
370                font-size: @font-size-small;
371
372                * {
373                    font-size: inherit;
374                }
375            }
376
377            img {
378                vertical-align: bottom;
379                margin-right: .3rem;
380            }
381
382            .mm__status {
383                display: inline-block;
384                text-decoration: none;
385                padding-left: .3rem;
386                padding-right: .3rem;
387            }
388
389            form {
390                vertical-align: text-top;
391
392                button {
393                    background: @ini_button_background;
394                    border-color: @ini_button_background;
395                    color: @ini_button_color;
396                    font-size: @font-size-small;
397                    padding: .2em .3em;
398
399                    &[name="removeIssue"] {
400                        min-width: 20px;
401                        font-size: .94rem;
402                        font-weight: bold;
403                        line-height: 95%;
404                        text-align: center;
405                        padding: 0 .1rem .1rem;
406                        margin-left: .5rem;
407                    }
408
409                    &:hover,
410                    &:focus,
411                    &:active {
412                        background: @ini_button_color;
413                        color: @ini_button_background;
414                    }
415                }
416            }
417        }
418    }
419}
420