Improved attachment styling

diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index d29e5e1e6642b22792587cf6ccc1d43084b87b38..53e769133dbd31d8cc285194bc237cbee381f6a0 100644 (file)
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -66,14 +66,6 @@
                }
        }
        
-       &:hover {
-               .attachmentThumbnailImage {
-                       img {
-                               opacity: 1;
-                       }
-               }
-       }
-       
        .attachmentThumbnailData {
                backface-visibility: hidden;
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .5) 100%);
@@ -93,9 +85,10 @@
                position: absolute;
                text-overflow: ellipsis;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
+               transition: .2s ease opacity;
                width: 100%;
                white-space: nowrap;
-       
+               
                @include wcfFontHeadline;
        }
        
@@ -111,6 +104,18 @@
                        color: inherit;
                }
        }
+       
+       &:hover {
+               .attachmentThumbnailImage {
+                       img {
+                               opacity: 1;
+                       }
+               }
+               
+               .attachmentFilename {
+                       opacity: 0;
+               }
+       }
 }
 
 /* attachments tab in editor */
@@ -175,8 +180,35 @@
 }
 
 /* embedded images */
-.embeddedAttachmentLink img {
+.embeddedAttachmentLink {
        border: 1px solid $wcfContentBorderInner;
+       display: inline-block;
+       max-width: 100%;
+       min-height: 48px;
        padding: 2px;
+       position: relative;
+       
+       &::after {
+               background-color: rgba(0, 0, 0, .8);
+               border-radius: 2px;
+               box-shadow: 0 0 3px rgba(0, 0, 0, .15);
+               bottom: 5px;
+               color: white;
+               content: $fa-var-search;
+               display: block;
+               font-family: FontAwesome;
+               font-size: 21px;
+               opacity: .5;
+               padding: 2px 8px;
+               position: absolute;
+               right: 5px;
+               text-decoration: none;
+               transition: .2s ease opacity;
+       }
+       
+       &:hover {
+               &::after {
+                       opacity: .8;
+               }
+       }
 }
-