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