SPR-814: detail.php "show img "

This commit is contained in:
Silke Pisulla 2017-04-20 11:56:22 +02:00
commit ee135d5f6e
2 changed files with 88 additions and 47 deletions

View file

@ -282,6 +282,12 @@
-webkit-flex: @elem;
}
.flex-wrap() {
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* positioning */

View file

@ -4,17 +4,34 @@
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
#dokuwiki__detail {
// linked image
.img-link{
/* + + + + + linked image + + + + + */
.img-link {
text-align: center;
a {
display: inline-block;
margin: 0 auto 1.4em;
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;
z-index: 2;
display: block;
width: 100%;
box-sizing: border-box;
background: @ini_button_background;
line-height: @line-height-default;
padding: @margin-small;
}
img {
margin: 0;
@ -27,37 +44,36 @@
&:hover,
&:focus,
&:active {
&:before{
position: absolute;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
display: block;
padding: @margin-small;
text-decoration: none;
z-index:2;
background: @ini_button_background;
color: @ini_button_color;
content:attr(title);
&::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 */
margin: @margin-default -(@margin-default);
/* + + + + + 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;
background-color: @ini_background_page_header;
h1, h2, h3, h4, h5, h6, p{
margin: @margin-default -(@margin-default);
h1,
h2,
h3,
h4,
h5,
h6,
p {
padding-left: @margin-default;
padding-right: @margin-default;
}
@ -67,64 +83,83 @@
}
dl {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
.display-flex();
.flex-wrap();
width: 100%;
dt, dd {
dt,
dd {
box-sizing: border-box;
margin: .2em 0;
padding: (@small-spacing * 2) @small-spacing;
}
dt {
width: 33.3%;
background-color: @ini_highlight;
color: @ini_highlight_text;
}
dd {
width: 66.6%;
padding-left: (@small-spacing * 2);
@media @screen_min-xxs {
width: 33.3%;
}
@media @screen_max-xxs {
width: 40%;
}
}
dd {
padding-left: (@small-spacing * 2);
@media @screen_min-xxs {
width: 66.6%;
}
@media @screen_max-xxs {
width: 59.9%;
}
}
}
.os-map {
p {
text-align: right;
}
iframe {
padding: 0;
margin: 0;
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 {
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 {
h1,
h2,
h3,
h4,
h5,
h6,
p {
padding-left: @margin-small;
}
}
}
}