163 lines
3.5 KiB
Text
163 lines
3.5 KiB
Text
/**
|
|
* This file provides the design styles for the the detail template
|
|
* (media details)
|
|
*
|
|
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
|
*/
|
|
|
|
|
|
#dokuwiki__detail {
|
|
|
|
/* + + + + + linked image + + + + + */
|
|
.img-link {
|
|
text-align: center;
|
|
|
|
a {
|
|
position: relative;
|
|
left: 0;
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
color: @ini_button_color;
|
|
margin: 0 auto 1.4em;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: @ini_button_background;
|
|
line-height: @line-height-default;
|
|
padding: @margin-small;
|
|
}
|
|
|
|
img {
|
|
margin: 0;
|
|
display: block;
|
|
border: 1px dotted @ini_background_site;
|
|
position: relative;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
text-decoration: none;
|
|
|
|
&::before {
|
|
content: attr(title);
|
|
}
|
|
|
|
img {
|
|
border: 1px solid @ini_button_background;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* + + + + + meta data + + + + + */
|
|
div.img_detail {
|
|
|
|
/* vertical minus margin of .img-detail corresponds to the padding of .page */
|
|
background-color: @ini_background_page_header;
|
|
border: solid @ini_border_light;
|
|
border-width: 1px 0;
|
|
margin: @margin-default -(@margin-default);
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p {
|
|
padding-left: @margin-default;
|
|
padding-right: @margin-default;
|
|
}
|
|
|
|
> h4 {
|
|
padding-top: (@margin-default / 2);
|
|
}
|
|
|
|
dl {
|
|
.display-flex();
|
|
.flex-wrap();
|
|
|
|
width: 100%;
|
|
|
|
dt,
|
|
dd {
|
|
box-sizing: border-box;
|
|
margin: .2em 0;
|
|
padding: (@small-spacing * 2) @small-spacing;
|
|
}
|
|
|
|
dt {
|
|
background-color: @ini_highlight;
|
|
color: @ini_highlight_text;
|
|
|
|
@media @screen_min-xs {
|
|
width: 33.3%;
|
|
}
|
|
|
|
@media @screen_max-xs {
|
|
width: 40%;
|
|
}
|
|
}
|
|
|
|
dd {
|
|
padding-left: (@small-spacing * 2);
|
|
|
|
@media @screen_min-xs {
|
|
width: 66.6%;
|
|
}
|
|
|
|
@media @screen_max-xs {
|
|
width: 59.9%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.os-map {
|
|
p {
|
|
text-align: right;
|
|
}
|
|
|
|
iframe {
|
|
border: solid @ini_button_background;
|
|
border-width: 1px 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@media @screen_max-md {
|
|
margin-right: -(@margin-default * 1.6);
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p {
|
|
padding-right: (@margin-default * 1.6);
|
|
}
|
|
}
|
|
|
|
@media @screen_max-xs {
|
|
margin-left: -(@margin-small);
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p {
|
|
padding-left: @margin-small;
|
|
}
|
|
}
|
|
}
|
|
}
|