Improved visuals for ignored messages on mobile
authorAlexander Ebert <ebert@woltlab.com>
Thu, 31 Aug 2017 14:56:17 +0000 (16:56 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Thu, 31 Aug 2017 14:56:17 +0000 (16:56 +0200)
wcfsetup/install/files/style/ui/userIgnore.scss

index 7292c299e63599845a648508aec02136c8d2deb4..00f115638a6bc40b049716d275e3e965e8cc8036 100644 (file)
 }
 
 .ignoredUserMessage {
-       background-color: $wcfStatusInfoBackground !important;
-       border-left: 5px solid $wcfStatusInfoBorder !important;
-       color: $wcfStatusInfoText !important;
-       cursor: pointer !important;
-       
-       &::before {
-               content: attr(data-ignored-user-message);
+       @include screen-md-up {
+               background-color: $wcfStatusInfoBackground !important;
+               border-left: 5px solid $wcfStatusInfoBorder !important;
+               color: $wcfStatusInfoText !important;
+               cursor: pointer !important;
                
-               @include screen-md-up {
+               &::before {
+                       content: attr(data-ignored-user-message);
                        padding: 10px 20px;
+                       
                }
+       }       
+       
+       @include screen-sm-down {
+               border-top: 1px solid $wcfContentBorder;
+               margin: 0 -10px;
+               padding-top: 30px;
                
-               @include screen-sm-down {
+               &::before {
+                       background-color: $wcfStatusInfoBackground !important;
+                       border-left: 5px solid $wcfStatusInfoBorder !important;
+                       color: $wcfStatusInfoText !important;
+                       content: attr(data-ignored-user-message);
+                       cursor: pointer !important;
+                       display: block;
                        padding: 10px;
                }
        }