From c521e5945c7a388c34fb284fc12e12c8fe1edf2b Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Mon, 21 Nov 2016 23:18:39 +0100
Subject: [PATCH] Improved attachment styling

---
 .../install/files/style/ui/attachment.scss    | 54 +++++++++++++++----
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index d29e5e1e66..53e769133d 100644
--- 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;
+		}
+	}
 }
-
-- 
2.20.1