SPR-814: style linked image
This commit is contained in:
parent
ecb77cc51c
commit
2ac13e1431
3 changed files with 70 additions and 4 deletions
64
css/template_detail.less
Normal file
64
css/template_detail.less
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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 _____________
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue