xref: /template/sprintdoc/css/template_detail.less (revision 5b3e899e4c60edf9b51667b4b48220ba0c620b1e) 
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        @media screen {
64            /* vertical minus margin of .img-detail corresponds to the padding of .page */
65            background-color: @ini_background_page_header;
66            border: solid @ini_border_light;
67            border-width: 1px 0;
68            margin: @margin-default -(@margin-default);
69
70            h1,
71            h2,
72            h3,
73            h4,
74            h5,
75            h6,
76            p {
77                padding-left: @margin-default;
78                padding-right: @margin-default;
79            }
80
81            > h4 {
82                padding-top: (@margin-default / 2);
83            }
84        }
85
86        dl {
87            @media screen {
88                .display-flex();
89                .flex-wrap();
90
91                width: 100%;
92
93                dt,
94                dd {
95                    box-sizing: border-box;
96                    margin: .2em 0;
97                    padding: (@small-spacing * 2) @small-spacing;
98                }
99            }
100
101            dt {
102                background-color: @ini_highlight;
103                color: @ini_highlight_text;
104
105                @media @screen_min-xs {
106                    width: 33.3%;
107                }
108
109                @media @screen_max-xs {
110                    width: 40%;
111                }
112            }
113
114            dd {
115                padding-left: (@small-spacing * 2);
116
117                @media @screen_min-xs {
118                    width: 66.6%;
119                }
120
121                @media @screen_max-xs {
122                    width: 59.9%;
123                }
124            }
125        }
126
127        .os-map {
128            p {
129                text-align: right;
130            }
131
132            iframe {
133                border: solid @ini_button_background;
134                border-width: 1px 0;
135                margin: 0;
136                padding: 0;
137            }
138        }
139
140        @media @screen_max-md {
141            margin-right: -(@margin-default * 1.6);
142
143            h1,
144            h2,
145            h3,
146            h4,
147            h5,
148            h6,
149            p {
150                padding-right: (@margin-default * 1.6);
151            }
152        }
153
154        @media @screen_max-xs {
155            margin-left: -(@margin-small);
156
157            h1,
158            h2,
159            h3,
160            h4,
161            h5,
162            h6,
163            p {
164                padding-left: @margin-small;
165            }
166        }
167    }
168}
169