xref: /template/sprintdoc/css/template_detail.less (revision 4e86a8f0c29235cac21105c7d268f30e45773d7e) 
1/**
2 * This file provides the design styles for the the detail template
3 * (media details)
4 *
5 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
6 */
7#dokuwiki__detail {
8
9    // linked image
10    .img-link{
11
12        text-align: center;
13
14        a {
15            display: inline-block;
16            margin: 0 auto 1.4em;
17            position: relative;
18
19            img {
20                margin: 0;
21                display: block;
22                border: 1px dotted @ini_background;
23                position: relative;
24                z-index: 1;
25            }
26
27            &:hover,
28            &:focus,
29            &:active {
30                &:before{
31                    position: absolute;
32                    top: 0;
33                    left: 0;
34                    width: 100%;
35                    box-sizing: border-box;
36                    display: block;
37                    padding: @margin-small;
38
39                    z-index:2;
40                    background: @ini_button_background;
41                    color: @ini_button_color;
42                    content:attr(title);
43                }
44                img {
45                    border: 1px solid @ini_button_background;
46                }
47            }
48
49        }
50    }
51
52    // meta data
53    div.img_detail {
54        /* vertical minus margin of .img-detail corresponds to the padding of .page  */
55        margin: @margin-default -(@margin-default);
56
57        border: solid @ini_border_light;
58        border-width: 1px 0;
59        background-color: @ini_background_page_header;
60        h1, h2, h3, h4, h5, h6, p{
61            padding-left: @margin-default;
62            padding-right: @margin-default;
63        }
64
65        > h4 {
66            padding-top: (@margin-default / 2);
67        }
68
69        dl {
70            display: flex;
71            display: -webkit-flex;
72            display: -ms-flexbox;
73
74
75            flex-direction: row;
76            -webkit-flex-direction: row;
77            -ms-flex-direction: row;
78
79            flex-wrap: wrap;
80            -webkit-flex-wrap: wrap;
81            -ms-flex-wrap: wrap;
82
83            width: 100%;
84
85            dt, dd {
86                box-sizing: border-box;
87                margin: .2em 0;
88                padding: (@small-spacing * 2) @small-spacing;
89            }
90
91            dt {
92                width: 33.3%;
93                background-color: @ini_highlight;
94                color: @ini_highlight_text;
95
96            }
97            dd {
98                width: 66.6%;
99                padding-left: (@small-spacing * 2);
100            }
101
102        }
103        .os-map {
104            p {
105                text-align: right;
106            }
107            iframe {
108                padding: 0;
109                margin: 0;
110                border: solid @ini_button_background;
111                border-width: 1px 0;
112            }
113        }
114
115        @media @screen_max-md {
116            margin-right: -(@margin-default * 1.6);
117            h1, h2, h3, h4, h5, h6, p {
118                padding-right: (@margin-default * 1.6);
119            }
120        }
121
122        @media @screen_max-xs {
123            margin-left: -(@margin-small);
124            h1, h2, h3, h4, h5, h6, p {
125                padding-left: @margin-small;
126            }
127        }
128
129    }
130}
131