SPR-814: style linked image

This commit is contained in:
Jana Deutschländer 2017-04-11 12:53:03 +02:00
commit 2ac13e1431
3 changed files with 70 additions and 4 deletions

64
css/template_detail.less Normal file
View file

@ -0,0 +1,64 @@
/**
* 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 {
display: inline-block;
margin: 0 auto 1.4em;
position: relative;
img {
margin: 0;
display: block;
border: 1px dotted @ini_background;
position: relative;
z-index: 1;
}
&:hover,
&:focus,
&:active {
&:before{
position: absolute;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
display: block;
padding: @margin-small;
z-index:2;
background: @ini_button_background;
color: @ini_button_color;
content:attr(title);
}
img {
border: 1px solid @ini_button_background;
}
}
}
}
// meta data
.img_detail {
/* vertical minus margin of .img-detail corresponds to the padding of .page */
margin: @margin-default -(@margin-default);
@media @screen_max-md {
margin-right: -(@margin-default * 1.6);
}
@media @screen_max-xs {
margin-left: -(@margin-small);
}
}
}

View file

@ -168,9 +168,9 @@ header('X-UA-Compatible: IE=edge,chrome=1');
echo p_locale_xhtml('showrev');
} ?>
<h1><?php echo hsc(tpl_img_getTag('IPTC.Headline', $IMG)) ?></h1>
<div class="img-link">
<?php tpl_img(900, 700); /* the image; parameters: maximum width, maximum height (and more) */ ?>
</div>
<div class="img_detail">
<h2><?php print nl2br(hsc(tpl_img_getTag('simple.title'))); ?></h2>

View file

@ -72,7 +72,6 @@ css/area_nav-pagetools.less = all
css/area_nav-metabox.less = all
css/area_main-sidebar-nav.less = all
css/area_main-sidebar-content.less = all
;css/area_sidetools.less = all
css/area_main-content.less = all
css/area_main-content-secedit.less = all
css/area_togglelink.less = all
@ -80,7 +79,10 @@ css/area_forms.less = all
css/area_search.less = all
css/area_tabs.less = all
; ____________ template styles _____________
css/template_admin.less = all
css/template_detail.less = all
; _____________ plugin styles _____________