From 2ac13e14316e4dcdcd92344027505d3695d158fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jana=20Deutschla=CC=88nder?= <deutschlaender@cosmocode.de>
Date: Tue, 11 Apr 2017 12:53:03 +0200
Subject: [PATCH] SPR-814: style linked image

---
 css/template_detail.less | 64 ++++++++++++++++++++++++++++++++++++++++
 detail.php               |  6 ++--
 style.ini                |  4 ++-
 3 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 css/template_detail.less

diff --git a/css/template_detail.less b/css/template_detail.less
new file mode 100644
index 0000000..b11c551
--- /dev/null
+++ b/css/template_detail.less
@@ -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);
+        }
+    }
+}
diff --git a/detail.php b/detail.php
index 8c87871..5768eb1 100755
--- a/detail.php
+++ b/detail.php
@@ -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>
-
-
-                                <?php tpl_img(900, 700); /* the image; parameters: maximum width, maximum height (and more) */ ?>
+                                <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>
diff --git a/style.ini b/style.ini
index 1fd8b20..64e1480 100755
--- a/style.ini
+++ b/style.ini
@@ -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 _____________