Improved styling of messages

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 2182b5f3a876c499dcdd6d20215a554bda9beaa3..c87b622ca369c57f0799e8c1f666188984f35eed 100644 (file)
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -133,47 +133,33 @@
        margin-bottom: 20px;
 }
 
-.messageQuickOptions {
-       @extend .inlineList;
+.messageStatus {
+       flex: 1 1 auto;
        
-       flex: 0 0 auto;
-       //opacity: .3;
-       order: 2;
-       transition: opacity .2s linear;
+       @extend .inlineList;
        
-       .badge {
-               color: rgb(255, 255, 255);
+       .messagePublicationTime {
+               color: $wcfContentDimmedText;
                
                @extend .wcfFontSmall;
        }
 }
 
-.message:hover .messageQuickOptions {
-       //opacity: .6;
-}
-
-.message .messageHeader .messageQuickOptions:hover {
-       //opacity: 1;
-}
-
-.messageHeadline {
-       flex: 1 auto;
-       order: 1;
+.messageQuickOptions {
+       flex: 0 0 auto;
        
-       > h1 {
-               margin-bottom: 5px;
-               
-               @extend .wcfFontHeadline;
-       }
+       @extend .inlineList;
        
-       > p {
+       .badge {
+               color: rgb(255, 255, 255);
+               
                @extend .wcfFontSmall;
        }
 }
 
 /* content - body */
 .messageBody {
-       flex: 1 auto;
+       flex: 1 1 auto;
        
        &.editor {
                align-items: center;
@@ -196,12 +182,25 @@
        margin-top: 20px;
 }
 
-.messageFooterNote {
-       border-left: 2px solid rgb(238, 238, 238);
-       padding-left: 5px;
+.messageFooterNote,
+.messageFooterNotes > .likesSummary {
+       border-left: 5px solid $wcfContentBorderInner;
+       color: $wcfContentDimmedText;
+       padding: 5px 10px;
+       
+       @extend .wcfFontSmall;
        
        &:not(:first-child) {
-               margin-top: 5px;
+               margin-top: 10px;
+       }
+       
+       a {
+               color: $wcfContentDimmedLink;
+               
+               &:hover {
+                       color: $wcfContentDimmedLinkActive;
+                       text-decoration: underline;
+               }
        }
 }