Gnome-shell v42: Improve notifications appearance

gnome-shell/_common.scss

@@ -1142,20 +1142,6 @@ StScrollBar {
           box-shadow: none;
         }
 
-          .message-icon-bin {
-            padding: 10px 3px 10px 10px;
-            &:rtl { padding: 10px 10px 10px 3px; }
-          }
-
-          .message-icon-bin > StIcon {
-            icon-size: 16px;
-            -st-icon-style: symbolic;
-          }
-
-          .message-secondary-bin {
-            padding: 0 12px;
-          }
-
           .message-secondary-bin > .event-time {
             color: darken($fg_color, 15%);
             font-size: 0.7em;
@@ -1177,12 +1163,26 @@ StScrollBar {
           .message-content {
           //  color: darken($fg_color,20%);
             padding: 10px;
-            *:hover > StIcon,
-            *:focus > StIcon, {
-              color: $red;
+
+          }
+
+            // close button
+          .message-close-button {
+            color: $fg_color;
+            background-color: transparentize($fg_color, 0.9);
+            border-radius: 99px;
+
+            &:hover {
+              background-color: transparentize($red, 0.7);
+               > StIcon { color: $selected_fg_color; }
+            }
+            &:active {
+              background-color: transparentize($red, 0.5);
+              > StIcon { color: $selected_fg_color; }
             }
           }
 
+
           .message-media-control {
             padding: 12px;
             color: darken($fg_color, 20%);
@@ -1699,13 +1699,16 @@ StScrollBar {
     font-size: 11pt;
     width: 34em;
     margin: 5px;
-    border-radius: 3px;
+    border-radius: 12px;
     color: $topbar_color;
     background-color: $bg_color;
     border: 1px solid $borders_color;
-    box-shadow: 0 1px 4px black;
-    &:hover { background-color: transparentize($bg_color, 0.04); }
-    &:focus { background-color: transparentize($bg_color, 0.04); }
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.445);
+    &:hover, &:focus { 
+      background-color: lighten($bg_color, 3%); 
+      box-shadow: none;
+      border-radius: 12px;
+    }
     *{ color: $topbar_color; }
 
     .notification-icon { padding: 5px; }
@@ -1715,13 +1718,14 @@ StScrollBar {
       background-color: darken($bg_color, 2%);
       padding-top: 2px;
       spacing: 1px;
+      border-radius: 0px 0px 12px 12px;
     }
     .notification-button {
-      padding: 5px;
+      padding: 7px;
       background-color: transparentize($bg_color, 0.1);
       box-shadow: none;
-      &:first-child { border-radius: 0 0 0 3px; }
-      &:last-child { border-radius: 0 0 3px 0; }
+      &:first-child { border-radius: 0 0 0 12px; }
+      &:last-child { border-radius: 0 0 12px 0; }
       &:hover, &focus { background-color: darken($bg_color,2%); color: $selected_bg_color;}
     }
   }