Fixed #306

src/_sass/_colors.scss

@@ -115,6 +115,7 @@ $titlebar-backdrop:                     if($topbar == 'dark', background(g), bac
 $keyboard:                              if($variant == 'light', $grey-050, $grey-800); // for gnome-shell keyboard
 $keyboard-alt:                          if($variant == 'light', $grey-300, $grey-900); // for gnome-shell keyboard
 $system:                                if($blackness == 'true', $grey-850, $grey-800); // for gnome-shell keyboard
+$popover:                               if($variant == 'light', background(a), background(e));
 
 $panel-solid:                           if($topbar == 'dark', background(e), background(c)); // for Unity panel which doesn't allow translucent colors
 $panel:                                 if($opacity == 'default', rgba($panel-solid, 0.65), $panel-solid);

src/_sass/gnome-shell/widgets/_popovers-42.scss

@@ -25,7 +25,7 @@
   .popup-menu-content {
     padding: $space-size;
     margin: 0 3px 14px;
-    background-color: $surface;
+    background-color: if($opacity == 'solid', $popover, rgba($popover, 0.96));
     border-radius: $popup-radius;
     border: none;
     box-shadow: $shell-shadow-z3;

src/_sass/gnome-shell/widgets/_popovers.scss

@@ -26,7 +26,7 @@
 .popup-menu-content {
   padding: $space-size 0;
   margin: $space-size 10px 13px 10px;
-  background-color: $surface;
+  background-color: if($opacity == 'solid', $popover, rgba($popover, 0.96));
   border-radius: $popup-radius;
   box-shadow: $shell-shadow-z3;
 }

src/_sass/gtk/apps/_gnome-4.0.scss

@@ -765,3 +765,36 @@ window.dialog {
     }
   }
 }
+
+//
+// Rnote
+//
+
+@function gtkcolor($c) {
+  @return unquote("@#{$c}");
+}
+
+button.colorpad {
+    padding: 0px;
+    margin: 0px;
+    background-blend-mode: screen;
+    background-image:
+        linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55),
+        linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55);
+    background-color: gtkcolor(colorpad_color);
+    color:  gtkcolor(colorpad_fg_color);
+    background-size: 18px 18px;
+    background-position: 0px 0px, 9px 9px;
+
+    &:hover {
+        filter: brightness(93%);
+    }
+
+    &:active {
+        filter: brightness(86%);
+    }
+
+    &:checked {
+        filter: brightness(100%);
+    }
+}

src/_sass/gtk/apps/_mate.scss

@@ -171,14 +171,14 @@ na-tray-applet {
 }
 
 // remove right space a bit
-na-tray-applet > widget > box {
+// na-tray-applet > widget > box {
-  // margin-right: 2px;
+//   margin-right: 2px;
-}
+// }
 
 // no background for icon-padding area
-na-tray-applet widget box widget {
+// na-tray-applet widget box widget {
-  // background-color: transparent;
+//   background-color: transparent;
-}
+// }
 
 // Classic icon style
 .mate-panel-menu-bar {

src/_sass/gtk/apps/_misc.scss

@@ -397,8 +397,8 @@ window.background.csd {
 window.background:not(.solid-csd):not(.csd) {
   // reserved area at the most-right side of GtkMenuBar
   > grid.horizontal > grid.horizontal {
-    background-color: $titlebar;
+    background-color: transparent;
-    box-shadow: inset 0 -1px $divider;
+    // box-shadow: inset 0 -1px $divider;
 
     // > button.flat.small-button { // 'close' button
     // }

src/_sass/gtk/apps/_xfce.scss

@@ -100,9 +100,6 @@ XfdesktopIconView.view {
   // Set the application icon- and preview-size to 64px
   -XfwmTabwinWidget-icon-size: 64px;
   -XfwmTabwinWidget-preview-size: 64px;
-
-  button {
-  }
 }
 
 

src/gnome-shell/shell-40-0/gnome-shell-Compact.css

@@ -460,7 +460,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .popup-menu-content {
   padding: 4px 0;
   margin: 4px 10px 13px 10px;
-  background-color: #FFFFFF;
+  background-color: rgba(255, 255, 255, 0.96);
   border-radius: 18px;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
 }

src/gnome-shell/shell-40-0/gnome-shell-Dark-Compact.css

@@ -460,7 +460,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .popup-menu-content {
   padding: 4px 0;
   margin: 4px 10px 13px 10px;
-  background-color: #3C3C3C;
+  background-color: rgba(33, 33, 33, 0.96);
   border-radius: 18px;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
 }

src/gnome-shell/shell-40-0/gnome-shell-Dark.css

@@ -460,7 +460,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .popup-menu-content {
   padding: 6px 0;
   margin: 6px 10px 13px 10px;
-  background-color: #3C3C3C;
+  background-color: rgba(33, 33, 33, 0.96);
   border-radius: 20px;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
 }

src/gnome-shell/shell-40-0/gnome-shell.css

@@ -460,7 +460,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .popup-menu-content {
   padding: 6px 0;
   margin: 6px 10px 13px 10px;
-  background-color: #FFFFFF;
+  background-color: rgba(255, 255, 255, 0.96);
   border-radius: 20px;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
 }

src/gnome-shell/shell-42-0/gnome-shell-Compact.css

@@ -515,7 +515,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .popup-menu .popup-menu-content {
   padding: 4px;
   margin: 0 3px 14px;
-  background-color: #FFFFFF;
+  background-color: rgba(255, 255, 255, 0.96);
   border-radius: 18px;
   border: none;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);

src/gnome-shell/shell-42-0/gnome-shell-Dark-Compact.css

@@ -515,7 +515,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .popup-menu .popup-menu-content {
   padding: 4px;
   margin: 0 3px 14px;
-  background-color: #3C3C3C;
+  background-color: rgba(33, 33, 33, 0.96);
   border-radius: 18px;
   border: none;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);

src/gnome-shell/shell-42-0/gnome-shell-Dark.css

@@ -515,7 +515,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .popup-menu .popup-menu-content {
   padding: 6px;
   margin: 0 3px 14px;
-  background-color: #3C3C3C;
+  background-color: rgba(33, 33, 33, 0.96);
   border-radius: 20px;
   border: none;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);

src/gnome-shell/shell-42-0/gnome-shell.css

@@ -515,7 +515,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .popup-menu .popup-menu-content {
   padding: 6px;
   margin: 0 3px 14px;
-  background-color: #FFFFFF;
+  background-color: rgba(255, 255, 255, 0.96);
   border-radius: 20px;
   border: none;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);

src/gtk/3.0/gtk-Compact.css

@@ -6329,8 +6329,7 @@ window.background.csd > box.vertical > overlay > stack > scrolledwindow.frame >
 }
 
 window.background:not(.solid-csd):not(.csd) > grid.horizontal > grid.horizontal {
-  background-color: #2C2C2C;
+  background-color: transparent;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
 }
 
 window.background:not(.solid-csd):not(.csd) > notebook:not(.frame) {

src/gtk/3.0/gtk-Dark-Compact.css

@@ -6325,8 +6325,7 @@ window.background.csd > box.vertical > overlay > stack > scrolledwindow.frame >
 }
 
 window.background:not(.solid-csd):not(.csd) > grid.horizontal > grid.horizontal {
-  background-color: #2C2C2C;
+  background-color: transparent;
-  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
 }
 
 window.background:not(.solid-csd):not(.csd) > notebook:not(.frame) {

src/gtk/3.0/gtk-Dark.css

@@ -6325,8 +6325,7 @@ window.background.csd > box.vertical > overlay > stack > scrolledwindow.frame >
 }
 
 window.background:not(.solid-csd):not(.csd) > grid.horizontal > grid.horizontal {
-  background-color: #2C2C2C;
+  background-color: transparent;
-  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
 }
 
 window.background:not(.solid-csd):not(.csd) > notebook:not(.frame) {

src/gtk/3.0/gtk-Light-Compact.css

@@ -6328,8 +6328,7 @@ window.background.csd > box.vertical > overlay > stack > scrolledwindow.frame >
 }
 
 window.background:not(.solid-csd):not(.csd) > grid.horizontal > grid.horizontal {
-  background-color: #FFFFFF;
+  background-color: transparent;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
 }
 
 window.background:not(.solid-csd):not(.csd) > notebook:not(.frame) {

src/gtk/3.0/gtk-Light.css

@@ -6328,8 +6328,7 @@ window.background.csd > box.vertical > overlay > stack > scrolledwindow.frame >
 }
 
 window.background:not(.solid-csd):not(.csd) > grid.horizontal > grid.horizontal {
-  background-color: #FFFFFF;
+  background-color: transparent;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
 }
 
 window.background:not(.solid-csd):not(.csd) > notebook:not(.frame) {

src/gtk/3.0/gtk.css

@@ -6329,8 +6329,7 @@ window.background.csd > box.vertical > overlay > stack > scrolledwindow.frame >
 }
 
 window.background:not(.solid-csd):not(.csd) > grid.horizontal > grid.horizontal {
-  background-color: #2C2C2C;
+  background-color: transparent;
-  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
 }
 
 window.background:not(.solid-csd):not(.csd) > notebook:not(.frame) {

src/gtk/4.0/gtk-Compact.css

@@ -5458,6 +5458,29 @@ window.dialog > .dialog-vbox > box > scrolledwindow > viewport > widget > list.b
   border-radius: 0;
 }
 
+button.colorpad {
+  padding: 0px;
+  margin: 0px;
+  background-blend-mode: screen;
+  background-image: linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55), linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55);
+  background-color: @colorpad_color;
+  color: @colorpad_fg_color;
+  background-size: 18px 18px;
+  background-position: 0px 0px, 9px 9px;
+}
+
+button.colorpad:hover {
+  filter: brightness(93%);
+}
+
+button.colorpad:active {
+  filter: brightness(86%);
+}
+
+button.colorpad:checked {
+  filter: brightness(100%);
+}
+
 avatar {
   border-radius: 9999px;
   font-weight: bold;

src/gtk/4.0/gtk-Dark-Compact.css

@@ -5428,6 +5428,29 @@ window.dialog > .dialog-vbox > box > scrolledwindow > viewport > widget > list.b
   border-radius: 0;
 }
 
+button.colorpad {
+  padding: 0px;
+  margin: 0px;
+  background-blend-mode: screen;
+  background-image: linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55), linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55);
+  background-color: @colorpad_color;
+  color: @colorpad_fg_color;
+  background-size: 18px 18px;
+  background-position: 0px 0px, 9px 9px;
+}
+
+button.colorpad:hover {
+  filter: brightness(93%);
+}
+
+button.colorpad:active {
+  filter: brightness(86%);
+}
+
+button.colorpad:checked {
+  filter: brightness(100%);
+}
+
 avatar {
   border-radius: 9999px;
   font-weight: bold;

src/gtk/4.0/gtk-Dark.css

@@ -5428,6 +5428,29 @@ window.dialog > .dialog-vbox > box > scrolledwindow > viewport > widget > list.b
   border-radius: 0;
 }
 
+button.colorpad {
+  padding: 0px;
+  margin: 0px;
+  background-blend-mode: screen;
+  background-image: linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55), linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55);
+  background-color: @colorpad_color;
+  color: @colorpad_fg_color;
+  background-size: 18px 18px;
+  background-position: 0px 0px, 9px 9px;
+}
+
+button.colorpad:hover {
+  filter: brightness(93%);
+}
+
+button.colorpad:active {
+  filter: brightness(86%);
+}
+
+button.colorpad:checked {
+  filter: brightness(100%);
+}
+
 avatar {
   border-radius: 9999px;
   font-weight: bold;

src/gtk/4.0/gtk-Light-Compact.css

@@ -5412,6 +5412,29 @@ window.dialog > .dialog-vbox > box > scrolledwindow > viewport > widget > list.b
   border-radius: 0;
 }
 
+button.colorpad {
+  padding: 0px;
+  margin: 0px;
+  background-blend-mode: screen;
+  background-image: linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55), linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55);
+  background-color: @colorpad_color;
+  color: @colorpad_fg_color;
+  background-size: 18px 18px;
+  background-position: 0px 0px, 9px 9px;
+}
+
+button.colorpad:hover {
+  filter: brightness(93%);
+}
+
+button.colorpad:active {
+  filter: brightness(86%);
+}
+
+button.colorpad:checked {
+  filter: brightness(100%);
+}
+
 avatar {
   border-radius: 9999px;
   font-weight: bold;

src/gtk/4.0/gtk-Light.css

@@ -5412,6 +5412,29 @@ window.dialog > .dialog-vbox > box > scrolledwindow > viewport > widget > list.b
   border-radius: 0;
 }
 
+button.colorpad {
+  padding: 0px;
+  margin: 0px;
+  background-blend-mode: screen;
+  background-image: linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55), linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55);
+  background-color: @colorpad_color;
+  color: @colorpad_fg_color;
+  background-size: 18px 18px;
+  background-position: 0px 0px, 9px 9px;
+}
+
+button.colorpad:hover {
+  filter: brightness(93%);
+}
+
+button.colorpad:active {
+  filter: brightness(86%);
+}
+
+button.colorpad:checked {
+  filter: brightness(100%);
+}
+
 avatar {
   border-radius: 9999px;
   font-weight: bold;

src/gtk/4.0/gtk.css

@@ -5458,6 +5458,29 @@ window.dialog > .dialog-vbox > box > scrolledwindow > viewport > widget > list.b
   border-radius: 0;
 }
 
+button.colorpad {
+  padding: 0px;
+  margin: 0px;
+  background-blend-mode: screen;
+  background-image: linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55), linear-gradient(45deg, #0f0f0f55 25%, transparent 25%, transparent 75%, #0f0f0f55 75%, #0f0f0f55);
+  background-color: @colorpad_color;
+  color: @colorpad_fg_color;
+  background-size: 18px 18px;
+  background-position: 0px 0px, 9px 9px;
+}
+
+button.colorpad:hover {
+  filter: brightness(93%);
+}
+
+button.colorpad:active {
+  filter: brightness(86%);
+}
+
+button.colorpad:checked {
+  filter: brightness(100%);
+}
+
 avatar {
   border-radius: 9999px;
   font-weight: bold;