SPR-814: detail.php "show img "
This commit is contained in:
parent
6db1065031
commit
ee135d5f6e
2 changed files with 88 additions and 47 deletions
|
@ -282,6 +282,12 @@
|
|||
-webkit-flex: @elem;
|
||||
}
|
||||
|
||||
.flex-wrap() {
|
||||
flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* positioning */
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue