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