xref: /template/sprintdoc/css/template_detail.less (revision ee135d5f6e39710a48b92471b7a5ed0849a0f904) 
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                z-index: 2;
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;
40                position: relative;
41                z-index: 1;
42            }
43
44            &:hover,
45            &:focus,
46            &:active {
47                text-decoration: none;
48
49                &::before {
50                    content: attr(title);
51                }
52
53                img {
54                    border: 1px solid @ini_button_background;
55                }
56            }
57        }
58    }
59
60
61/* + + + + +  meta data  + + + + + */
62    div.img_detail {
63
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        dl {
86            .display-flex();
87            .flex-wrap();
88
89            width: 100%;
90
91            dt,
92            dd {
93                box-sizing: border-box;
94                margin: .2em 0;
95                padding: (@small-spacing * 2) @small-spacing;
96            }
97
98            dt {
99                background-color: @ini_highlight;
100                color: @ini_highlight_text;
101
102                @media @screen_min-xxs {
103                    width: 33.3%;
104                }
105
106                @media @screen_max-xxs {
107                    width: 40%;
108                }
109            }
110
111            dd {
112                padding-left: (@small-spacing * 2);
113
114                @media @screen_min-xxs {
115                    width: 66.6%;
116                }
117
118                @media @screen_max-xxs {
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