Position notification container with CSS (hestiacp#3067)

Author: AlecRust

web/css/src/themes/dark.css

@@ -36,7 +36,7 @@ strong {
   background: linear-gradient(to bottom, rgb(255 255 255 / 15%) 0%, rgb(255 255 255 / 15%) 30%, rgb(255 255 255 / 15%) 95%) !important;
 }
 
-.l-menu__item a {
+.l-menu__item > a {
   color: #e7e7e7;
 
   &:hover {
@@ -53,18 +53,6 @@ strong {
   }
 }
 
-.lang-ar .l-menu__item a {
-  padding: 11px;
-}
-
-.lang-de .l-menu__item a {
-  padding: 11px 12px;
-}
-
-.lang-tw .l-menu__item a {
-  padding: 13px 18px;
-}
-
 .l-profile__logout {
   color: #e7e7e7 !important;
 }

web/css/src/themes/default.css

@@ -66,11 +66,10 @@
   background: linear-gradient(to bottom, rgb(104 145 196 / 100%) 0%, rgb(69 114 181 / 100%) 50%, rgb(65 90 149 / 100%) 100%);
   background-color: #5070a6;
   position: fixed;
-  size: 100% 39px;
+  size: 100% 40px;
   z-index: 900;
   top: 0;
   font-size: 0.8rem;
-  text-shadow: 1px 1px rgb(0 0 0 / 25%);
   box-shadow: 0 4px 10px rgb(100 100 100 / 40%);
   border-bottom: 1px solid #fff;
 }
@@ -108,14 +107,16 @@
 .l-menu__item {
   display: flex;
   align-self: stretch;
-  font-weight: 600;
+  position: relative;
 }
 
-.l-menu__item a {
+.l-menu__item > a {
   color: #f7f7f7;
   display: flex;
   align-items: center;
   position: relative;
+  font-weight: 600;
+  text-shadow: 1px 1px rgb(0 0 0 / 25%);
   padding-left: 10px;
   padding-right: 10px;
   border-left: 1px solid transparent;
@@ -164,7 +165,6 @@
 .l-profile {
   display: flex;
   align-items: center;
-  overflow: hidden;
 }
 
 .l-profile__username,
@@ -208,11 +208,11 @@
 .notification-container {
   background-color: rgb(255 255 255 / 95%);
   box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
-  margin: 0 18px;
-  max-height: 90%;
+  max-height: 500px;
   overflow-y: auto;
-  position: fixed;
-  top: 34px;
+  position: absolute;
+  top: 100%;
+  right: 0;
   width: 390px;
   z-index: 300;
   font-size: 0.8rem;
@@ -566,7 +566,7 @@
   display: flex;
   position: sticky;
   z-index: 2;
-  top: 38px;
+  top: 39px;
   height: 45px;
   justify-content: center;
   background-color: #fff;
@@ -2243,7 +2243,7 @@ body.mobile .l-unit-toolbar__col--right {
 }
 
 .l-content {
-  padding-top: 39px;
+  padding-top: 40px;
 }
 
 .l-content.collapsed .l-sort {

web/css/src/themes/flat.css

@@ -34,12 +34,12 @@ strong {
   box-shadow: none !important;
 }
 
-.l-menu__item a:hover {
+.l-menu__item > a:hover {
   background: #fff !important;
   box-shadow: none;
 }
 
-.l-menu__item a:active {
+.l-menu__item > a:active {
   background: none;
   box-shadow: none !important;
 }

web/css/src/themes/vestia.css

@@ -36,7 +36,7 @@ strong {
   background-color: #fff;
 }
 
-.l-menu__item a:hover {
+.l-menu__item > a:hover {
   background: #f79b44 !important;
   box-shadow: none !important;
   padding: 12px 10px !important;
@@ -47,7 +47,7 @@ strong {
   text-shadow: none !important;
 }
 
-.l-menu__item a:active {
+.l-menu__item > a:active {
   background: none;
   box-shadow: none !important;
   text-shadow: none !important;