Using a more appealing icon for quotes

diff --git a/com.woltlab.wcf/templates/quoteMetaCode.tpl b/com.woltlab.wcf/templates/quoteMetaCode.tpl
index 19195cbc5998af2575971a4007b7aa2815309b2a..dd6f2e4d2cee1ccf7741a2c464e0fc5a3e4ddf96 100644 (file)
--- 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 422badb0db03dda7d9c93c366277cbf6f7308a20..0eb8f9b30b3a0d88ec7f8fbb8aa6338ddb99c1a5 100644 (file)
--- 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;
+               }
        }
 }