Using a different style for mobile menu buttons

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index d7800c08c3f51c224a0021935481c37ea32a66d2..ebb3821ff87fffd75ee8bb7b8c96765ee6c2a099 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -349,14 +349,6 @@
        }
 }
 
-@keyframes wcfMobileMenuNewContent {
-       0%   { box-shadow: 0 0 0 rgba(255, 0, 0, 0); }
-       25%  { box-shadow: 0 0 0 rgba(255, 0, 0, 1); }
-       50%  { box-shadow: 0 0 10px rgba(255, 0, 0, 1); }
-       75%  { box-shadow: 0 0 0 rgba(255, 0, 0, 1); }
-       100% { box-shadow: 0 0 0 rgba(255, 0, 0, 0); }
-}
-
 @include screen-md-down {
        .pageHeader > div > div {
                padding-bottom: 10px;
@@ -406,6 +398,8 @@
        
        .mainMenu,
        .userPanel {
+               position: relative;
+               
                &::before {
                        background-color: $wcfHeaderMenuBackground;
                        border-radius: 2px;
@@ -421,9 +415,15 @@
                        color: $wcfHeaderMenuLinkActive;
                }
                
-               &.pageMenuMobileButtonHasContent::before {
-                       animation: wcfMobileMenuNewContent 8s infinite;
-                       animation-delay: 2s;
+               &.pageMenuMobileButtonHasContent::after {
+                       background-color: rgb(244, 67, 54);
+                       border-radius: 50%;
+                       content: "";
+                       height: 10px;
+                       position: absolute;
+                       right: -3px;
+                       top: -6px;
+                       width: 10px;
                }
        }