xref: /template/sprintdoc/css/template_detail.less (revision bd04be26c697600e206f99572d5bc8b9881d6b1d) 
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
8
9#dokuwiki__detail {
10
11/* + + + + +  linked image  + + + + + */
12    .img-link {
13        text-align: center;
14
15        a {
16            position: relative;
17            left: 0;
18            display: inline-block;
19            max-width: 100%;
20            color: @ini_button_color;
21            margin: 0 auto 1.4em;
22
23            &::before {
24                position: absolute;
25                top: 0;
26                left: 0;
27                display: block;
28                width: 100%;
29                box-sizing: border-box;
30                background: @ini_button_background;
31                line-height: @line-height-default;
32                padding: @margin-small;
33            }
34
35            img {
36                margin: 0;
37                display: block;
38                border: 1px dotted @ini_background_site;
39                position: relative;
40            }
41
42            &:hover,
43            &:focus,
44            &:active {
45                text-decoration: none;
46
47                &::before {
48                    content: attr(title);
49                }
50
51                img {
52                    border: 1px solid @ini_button_background;
53                }
54            }
55        }
56    }
57
58
59/* + + + + +  meta data  + + + + + */
60    div.img_detail {
61
62        /* vertical minus margin of .img-detail corresponds to the padding of .page */
63        background-color: @ini_background_page_header;
64        border: solid @ini_border_light;
65        border-width: 1px 0;
66        margin: @margin-default -(@margin-default);
67
68        h1,
69        h2,
70        h3,
71        h4,
72        h5,
73        h6,
74        p {
75            padding-left: @margin-default;
76            padding-right: @margin-default;
77        }
78
79        > h4 {
80            padding-top: (@margin-default / 2);
81        }
82
83        dl {
84            .display-flex();
85            .flex-wrap();
86
87            width: 100%;
88
89            dt,
90            dd {
91                box-sizing: border-box;
92                margin: .2em 0;
93                padding: (@small-spacing * 2) @small-spacing;
94            }
95
96            dt {
97                background-color: @ini_highlight;
98                color: @ini_highlight_text;
99
100                @media @screen_min-xs {
101                    width: 33.3%;
102                }
103
104                @media @screen_max-xs {
105                    width: 40%;
106                }
107            }
108
109            dd {
110                padding-left: (@small-spacing * 2);
111
112                @media @screen_min-xs {
113                    width: 66.6%;
114                }
115
116                @media @screen_max-xs {
117                    width: 59.9%;
118                }
119            }
120        }
121
122        .os-map {
123            p {
124                text-align: right;
125            }
126
127            iframe {
128                border: solid @ini_button_background;
129                border-width: 1px 0;
130                margin: 0;
131                padding: 0;
132            }
133        }
134
135        @media @screen_max-md {
136            margin-right: -(@margin-default * 1.6);
137
138            h1,
139            h2,
140            h3,
141            h4,
142            h5,
143            h6,
144            p {
145                padding-right: (@margin-default * 1.6);
146            }
147        }
148
149        @media @screen_max-xs {
150            margin-left: -(@margin-small);
151
152            h1,
153            h2,
154            h3,
155            h4,
156            h5,
157            h6,
158            p {
159                padding-left: @margin-small;
160            }
161        }
162    }
163}
164