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