Improved styling of collapsed messages

diff --git a/wcfsetup/install/files/style/bootstrap/mixin/list.scss b/wcfsetup/install/files/style/bootstrap/mixin/list.scss
index fe55b0adf302fb6dc3f8f484b5ac0921229ae0f7..918b58f8f3af69bf835de7584cde3686fd944079 100644 (file)
--- a/wcfsetup/install/files/style/bootstrap/mixin/list.scss
+++ b/wcfsetup/install/files/style/bootstrap/mixin/list.scss
@@ -35,7 +35,7 @@
        flex-wrap: wrap;
        
        > li {
-               flex: 0 auto;
+               flex: 0 0 auto;
                
                &:not(:last-child) {
                        margin-right: 5px;

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 86d2b8b66a7c59989141027e3e9521b7862d7218..5d2eb3e85c3d1df268c893aa39f4a14079f57fa6 100644 (file)
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -155,6 +155,10 @@
                .userCredits {
                        display: none;
                }
+               
+               + .messageContent {
+                       margin-top: 20px;
+               }
        }
        
        a {
@@ -254,7 +258,6 @@
        flex-direction: column;
        
        @include screen-sm-down {
-               margin-top: 20px;
                position: relative;
        }
        
@@ -316,7 +319,13 @@
 }
 
 .messageTitle {
-       @include wcfFontHeadline;
+       @include screen-sm-up {
+               @include wcfFontHeadline;
+       }
+       
+       @include screen-xs {
+               @include wcfFontDefault;
+       }
        
        color: $wcfContentHeadlineText;
                
@@ -523,6 +532,14 @@
        }
 }
 
+.messageCollapsed {
+       @include screen-sm-down {
+               border-top: 1px solid $wcfContentBorderInner;
+               margin: 0 -10px;
+               padding: 30px 10px 0;
+       }
+}
+
 .messageReduced {
        .messageHeader {
                background-color: $wcfSidebarBackground;