From 4b77aefaf603f656e030a439ca660f467504e989 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 18 Jun 2016 00:37:52 +0200
Subject: [PATCH] Using a more appealing icon for quotes

---
 com.woltlab.wcf/templates/quoteMetaCode.tpl   | 19 ++++----
 .../install/files/style/bbcode/quote.scss     | 48 +++++++++++--------
 2 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/com.woltlab.wcf/templates/quoteMetaCode.tpl b/com.woltlab.wcf/templates/quoteMetaCode.tpl
index 19195cbc59..dd6f2e4d2c 100644
--- a/com.woltlab.wcf/templates/quoteMetaCode.tpl
+++ b/com.woltlab.wcf/templates/quoteMetaCode.tpl
@@ -1,12 +1,13 @@
 <blockquote class="quoteBox{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
-	<header class="quoteBoxHeader">
-		<span class="quoteBoxIcon">
-			{if $quoteAuthorObject}
-				<a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(32)}</a>
-			{else}
-				<span class="icon icon24 fa-quote-left"></span>
-			{/if}
-		</span>
+	<div class="quoteBoxIcon">
+		{if $quoteAuthorObject}
+			<a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(64)}</a>
+		{else}
+			<span class="quoteBoxQuoteSymbol"></span>
+		{/if}
+	</div>
+	
+	<div class="quoteBoxTitle">
 		<span class="quoteBoxTitle">
 			{if $quoteAuthor}
 				{if $quoteLink}
@@ -18,7 +19,7 @@
 				{lang}wcf.bbcode.quote{/lang}
 			{/if}
 		</span>
-	</header>
+	</div>
 	
 	<div>
 		<!-- META_CODE_INNER_CONTENT -->
diff --git a/wcfsetup/install/files/style/bbcode/quote.scss b/wcfsetup/install/files/style/bbcode/quote.scss
index 422badb0db..0eb8f9b30b 100644
--- a/wcfsetup/install/files/style/bbcode/quote.scss
+++ b/wcfsetup/install/files/style/bbcode/quote.scss
@@ -4,7 +4,7 @@
 	box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
 	font-style: italic;
 	margin: 20px 0;
-	padding: 10px 20px;
+	padding: 20px;
 	
 	&:first-child {
 		margin-top: 0;
@@ -27,31 +27,37 @@
 	@include wcfFontHeadline;
 }
 
-.quoteBoxHeader {
-	align-items: center;
-	display: flex;
+.quoteBoxTitle {
 	font-style: normal;
 	margin-bottom: 20px;
 	
-	.quoteBoxIcon {
-		flex: 0 0 auto;
-		
-		> a {
-			display: block;
-			font-size: 0;
-			margin-right: 5px;
-		}
-		
-		> .icon {
-			margin-right: 7px;
-			position: relative;
-			top: 2px;
-		}
+	@include wcfFontHeadline;
+}
+
+.quoteBoxIcon {
+	float: right;
+	margin: 0 0 10px 10px;
+	
+	> a {
+		display: block;
+		font-size: 0;
 	}
 	
-	.quoteBoxTitle {
-		flex: 1 auto;
+	> .quoteBoxQuoteSymbol {
+		color: $wcfContentDimmedText;
+		display: block;
+		font-family: Georgia, "Times New Roman", serif;
+		font-size: 160px;
+		font-style: normal;
+		height: 64px;
+		line-height: 160px;
+		text-align: center;
+		width: 64px;
 		
-		@include wcfFontHeadline;
+		&::before {
+			content: "\201c";
+			position: relative;
+			top: -5px;
+		}
 	}
 }
-- 
2.20.1