SPR-814: style linked image

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);
+        }
+    }
+}