cinnamon: really fix notification-buttons

3 files changed, 27 insertions, 20 deletions

diff --git a/common/cinnamon/cinnamon-dark.css b/common/cinnamon/cinnamon-dark.css
index e6f1d6b..d322198 100644
--- a/common/cinnamon/cinnamon-dark.css
+++ b/common/cinnamon/cinnamon-dark.css
@@ -7,7 +7,7 @@ stage {
 .label-shadow {
   color: transparent; }
 
-.notification-button, .notification-icon-button, .sound-button {
+.popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .sound-button {
   min-height: 20px;
   padding: 5px 32px;
   transition-duration: 0;
@@ -17,31 +17,31 @@ stage {
   background-color: #444a58;
   border: 1px solid #2b2e39;
   box-shadow: inset 0 2px 4px rgba(68, 74, 88, 0.05); }
-  .notification-button:focus, .notification-icon-button:focus, .sound-button:focus {
+  .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .sound-button:focus {
     text-shadow: 0 1px rgba(64, 69, 82, 0);
     color: #D3DAE3;
     background-color: #444a58;
     border: 1px solid #5294E2;
     box-shadow: inset 0 2px 4px rgba(68, 74, 88, 0.05); }
-  .notification-button:hover, .notification-icon-button:hover, .sound-button:hover {
+  .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .sound-button:hover {
     text-shadow: 0 1px rgba(64, 69, 82, 0);
     color: #D3DAE3;
     background-color: #505666;
     border: 1px solid #2b2e39;
     box-shadow: inset 0 2px 4px rgba(80, 86, 102, 0.05); }
-  .notification-button:hover:focus, .notification-icon-button:hover:focus, .sound-button:hover:focus {
+  .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .sound-button:hover:focus {
     text-shadow: 0 1px rgba(64, 69, 82, 0);
     color: #D3DAE3;
     background-color: #444a58;
     border: 1px solid #5294E2;
     box-shadow: inset 0 2px 4px rgba(68, 74, 88, 0.05); }
-  .notification-button:active, .notification-icon-button:active, .sound-button:active, .notification-button:active:focus, .notification-icon-button:active:focus, .sound-button:active:focus {
+  .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus {
     text-shadow: 0 1px rgba(64, 69, 82, 0);
     color: #ffffff;
     background-color: #5294E2;
     border: 1px solid #5294E2;
     box-shadow: inset 0 2px 4px #5294E2; }
-  .notification-button:insensitive, .notification-icon-button:insensitive, .sound-button:insensitive {
+  .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive {
     text-shadow: 0 1px rgba(64, 69, 82, 0);
     color: rgba(211, 218, 227, 0.45);
     border: 1px solid rgba(43, 46, 57, 0.55);
@@ -605,7 +605,7 @@ StScrollBar {
   .popup-menu #notification {
     color: #D3DAE3;
     border-image: url("dark-assets/misc/message.svg") 9 9 9 9; }
-    .notification-button, .notification-icon-button {
+    .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button {
       padding: 5px; }
   #notification.multi-line-notification {
     padding-bottom: 13px;
@@ -627,6 +627,9 @@ StScrollBar {
   min-height: 159px;
   color: #BAC3CF; }
 
+.notification-button, .notification-icon-button {
+  padding: 5px; }
+
 .notification-icon-button > StIcon {
   icon-size: 36px; }
 
diff --git a/common/cinnamon/cinnamon.css b/common/cinnamon/cinnamon.css
index 5715774..348d220 100644
--- a/common/cinnamon/cinnamon.css
+++ b/common/cinnamon/cinnamon.css
@@ -7,7 +7,7 @@ stage {
 .label-shadow {
   color: transparent; }
 
-.notification-button, .notification-icon-button, .sound-button {
+.popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .sound-button {
   min-height: 20px;
   padding: 5px 32px;
   transition-duration: 0;
@@ -17,31 +17,31 @@ stage {
   background-color: #fbfbfc;
   border: 1px solid #cfd6e6;
   box-shadow: inset 0 2px 4px rgba(251, 251, 252, 0.05); }
-  .notification-button:focus, .notification-icon-button:focus, .sound-button:focus {
+  .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .sound-button:focus {
     text-shadow: 0 1px rgba(255, 255, 255, 0);
     color: #5c616c;
     background-color: #fbfbfc;
     border: 1px solid #5294E2;
     box-shadow: inset 0 2px 4px rgba(251, 251, 252, 0.05); }
-  .notification-button:hover, .notification-icon-button:hover, .sound-button:hover {
+  .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .sound-button:hover {
     text-shadow: 0 1px rgba(255, 255, 255, 0);
     color: #5c616c;
     background-color: white;
     border: 1px solid #cfd6e6;
     box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05); }
-  .notification-button:hover:focus, .notification-icon-button:hover:focus, .sound-button:hover:focus {
+  .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .sound-button:hover:focus {
     text-shadow: 0 1px rgba(255, 255, 255, 0);
     color: #5c616c;
     background-color: #fbfbfc;
     border: 1px solid #5294E2;
     box-shadow: inset 0 2px 4px rgba(251, 251, 252, 0.05); }
-  .notification-button:active, .notification-icon-button:active, .sound-button:active, .notification-button:active:focus, .notification-icon-button:active:focus, .sound-button:active:focus {
+  .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus {
     text-shadow: 0 1px rgba(255, 255, 255, 0);
     color: #ffffff;
     background-color: #5294E2;
     border: 1px solid #5294E2;
     box-shadow: inset 0 2px 4px #5294E2; }
-  .notification-button:insensitive, .notification-icon-button:insensitive, .sound-button:insensitive {
+  .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive {
     text-shadow: 0 1px rgba(255, 255, 255, 0);
     color: rgba(92, 97, 108, 0.55);
     border: 1px solid rgba(207, 214, 230, 0.55);
@@ -605,7 +605,7 @@ StScrollBar {
   .popup-menu #notification {
     color: #5c616c;
     border-image: url("light-assets/misc/message.svg") 9 9 9 9; }
-    .notification-button, .notification-icon-button {
+    .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button {
       padding: 5px; }
   #notification.multi-line-notification {
     padding-bottom: 13px;
@@ -627,6 +627,9 @@ StScrollBar {
   min-height: 159px;
   color: #BAC3CF; }
 
+.notification-button, .notification-icon-button {
+  padding: 5px; }
+
 .notification-icon-button > StIcon {
   icon-size: 36px; }
 
diff --git a/common/cinnamon/sass/_common.scss b/common/cinnamon/sass/_common.scss
index 8d7051f..37942f5 100644
--- a/common/cinnamon/sass/_common.scss
+++ b/common/cinnamon/sass/_common.scss
@@ -712,11 +712,9 @@ StScrollBar {
     color: $fg_color;
     border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9;
 
-    @at-root {
-      .notification-button, .notification-icon-button {
-        @extend %button;
-        padding: 5px;
-      }
+    .notification-button, .notification-icon-button {
+      @extend %button;
+      padding: 5px;
     }
 
     StEntry { @extend %entry; }
@@ -747,7 +745,10 @@ StScrollBar {
     color: $osd_fg_color;
   }
 
-  &-button, &-icon-button { @extend %osd_button; }
+  &-button, &-icon-button {
+    @extend %osd_button;
+    padding: 5px;
+  }
 
   &-icon-button > StIcon { icon-size: 36px; }