Fixed Transparent element of notification widget covers part of the p…

…age on < 1024px openwisp#130
niteshsinha17 · Sep 19, 2020 · 677bb29 · 677bb29
1 parent 1d9c8de
commit 677bb29
Showing 1 changed file with 40 additions and 30 deletions.
diff --git a/openwisp_notifications/static/openwisp-notifications/css/notifications.css b/openwisp_notifications/static/openwisp-notifications/css/notifications.css
@@ -63,7 +63,7 @@
   height: 0px;
   overflow: visible;
 }
-.ow-notification-toast{
+.ow-notification-toast {
   margin: 5px auto;
   width: fit-content;
   text-transform: none;
@@ -75,35 +75,39 @@
   font-size: 12px;
   border-color: rgba(0, 0, 0, 0.7);
 }
-#container .ow-notification-toast a{
+#container .ow-notification-toast a {
   border-bottom: 0 none;
 }
 .ow-notification-toast.info,
-.ow-notification-toast.warning{
+.ow-notification-toast.warning {
   background-color: #efefef;
   color: #333333;
 }
 #container .ow-notification-toast.info a,
-#container .ow-notification-toast.warning a{ color: #df5d43; }
-.ow-notification-toast.error{
+#container .ow-notification-toast.warning a {
+  color: #df5d43;
+}
+.ow-notification-toast.error {
   background-color: #d04124;
   color: #fff;
 }
 #container .ow-notification-toast.error a,
-#container .ow-notification-toast.success a{ color: #fff; }
-.ow-notification-toast.success{
+#container .ow-notification-toast.success a {
+  color: #fff;
+}
+.ow-notification-toast.success {
   background-color: #1daa2d;
   color: #fff;
 }
-.ow-notification-toast > div{
+.ow-notification-toast > div {
   display: flex;
   align-items: center;
 }
-.ow-notification-toast p{
+.ow-notification-toast p {
   margin: 0.5em;
   font-weight: 500;
 }
-.ow-notification-toast .ow-notify-close.btn{
+.ow-notification-toast .ow-notify-close.btn {
   min-width: 12px;
   min-height: 12px;
   float: right;
@@ -116,9 +120,11 @@
   filter: invert(30%) sepia(3%);
 }
 .ow-notification-toast.warning .icon {
-  filter: invert(20%) sepia(90%) saturate(5000%) hue-rotate(366deg) brightness(92%) contrast(96%);
+  filter: invert(20%) sepia(90%) saturate(5000%) hue-rotate(366deg)
+    brightness(92%) contrast(96%);
 }
-.ow-notification-toast.error .icon, .ow-notification-toast.success .icon {
+.ow-notification-toast.error .icon,
+.ow-notification-toast.success .icon {
   filter: invert(100%) sepia(0%);
 }
 
@@ -182,15 +188,15 @@
   font-weight: bold;
   background-color: #efefef;
 }
-.ow-notification-elem.unread{
+.ow-notification-elem.unread {
   background: #515151;
   color: #fff;
 }
-.ow-notification-elem p{
+.ow-notification-elem p {
   margin: 5px auto 0px auto;
   font-weight: normal;
 }
-.ow-notification-meta{
+.ow-notification-meta {
   display: flex;
   justify-content: space-between;
   color: #777;
@@ -242,7 +248,7 @@
   height: 3em;
 }
 #ow-notifications-loader .loader {
-  margin : 0px auto;
+  margin: 0px auto;
   width: 3em;
   height: 3em;
 }
@@ -256,39 +262,42 @@
   text-transform: uppercase;
 }
 .ow-notification-elem .icon,
-.ow-notification-toast .icon{
+.ow-notification-toast .icon {
   min-height: 15px;
   min-width: 15px;
   background-repeat: no-repeat;
-  filter: invert(46%) sepia(4%) saturate(139%) hue-rotate(317deg) brightness(99%) contrast(85%);
+  filter: invert(46%) sepia(4%) saturate(139%) hue-rotate(317deg)
+    brightness(99%) contrast(85%);
   margin: -1px 1px 0 0;
 }
-.ow-notification-elem:hover .icon{
-  filter: invert(20%) sepia(1%) saturate(139%) hue-rotate(317deg) brightness(99%) contrast(85%);
+.ow-notification-elem:hover .icon {
+  filter: invert(20%) sepia(1%) saturate(139%) hue-rotate(317deg)
+    brightness(99%) contrast(85%);
 }
 .ow-notification-elem.unread .icon {
-  filter: invert(95%) sepia(1%) saturate(139%) hue-rotate(317deg) brightness(99%) contrast(85%);
+  filter: invert(95%) sepia(1%) saturate(139%) hue-rotate(317deg)
+    brightness(99%) contrast(85%);
 }
 .ow-notification-elem.unread:hover .icon {
-  filter: invert(100%) sepia(0%) saturate(139%) hue-rotate(317deg) brightness(100%) contrast(85%);
+  filter: invert(100%) sepia(0%) saturate(139%) hue-rotate(317deg)
+    brightness(100%) contrast(85%);
 }
 .ow-notify-info {
-  background-image: url('/static/openwisp-notifications/images/icons/icon-info.svg');
+  background-image: url("/static/openwisp-notifications/images/icons/icon-info.svg");
 }
 .ow-notify-warning {
-  background-image: url('/static/openwisp-notifications/images/icons/icon-warning.svg');
+  background-image: url("/static/openwisp-notifications/images/icons/icon-warning.svg");
 }
 .ow-notify-error {
-  background-image: url('/static/openwisp-notifications/images/icons/icon-error.svg');
+  background-image: url("/static/openwisp-notifications/images/icons/icon-error.svg");
 }
 .ow-notify-success {
-  background-image: url('/static/openwisp-notifications/images/icons/icon-success.svg');
+  background-image: url("/static/openwisp-notifications/images/icons/icon-success.svg");
 }
 .ow-notify-close {
-  background-image: url('/static/openwisp-notifications/images/icons/icon-close.svg');
+  background-image: url("/static/openwisp-notifications/images/icons/icon-close.svg");
 }
 
-
 @media screen and (max-width: 600px) {
   .ow-notification-dropdown {
     width: 99%;
@@ -302,11 +311,12 @@
     line-height: 40px !important;
     position: absolute;
     top: 43px;
+    bottom: auto;
     right: 113px;
   }
 }
 
-@media screen and (min-width: 1025px){
+@media screen and (min-width: 1025px) {
   .ow-notification-dropdown {
     width: 500px;
   }
@@ -316,7 +326,7 @@
   }
 }
 
-@media screen and (max-height: 768px){
+@media screen and (max-height: 768px) {
   .ow-notification-wrapper {
     max-height: 70vh;
   }