Improvement: Xfce Whisker menu rounded corners and triangle transparency

thekomer · Jan 27, 2022 · cb2e4cb · cb2e4cb
1 parent 5e4689e
commit cb2e4cb
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 14 deletions.
diff --git a/gtk-3.0/apps/_xfce.scss b/gtk-3.0/apps/_xfce.scss
@@ -116,6 +116,16 @@ wnck-pager {
 #whiskermenu-window {
 	color: $fg_color;
 	background-color: $bg_color;
+	border-radius: 0.5em;
+	box-shadow: 4px 4px 10px 3px $borders_color;
+}
+
+// corner triangle
+#whiskermenu-window box widget {
+	color: transparent;
+	&:hover {
+		color: $fg_color;
+	}
 }
 
 // category button
@@ -138,9 +148,11 @@ wnck-pager {
         // background-color: $selected_bg_color;
 				@include button(active-header);
 				//border-radius: 0;
+				//box-shadow: none;
 				box-shadow: none;
 				&:hover{
 					color: white;
+					font-weight: bold;
 				}
     }
 }

diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css
@@ -5948,7 +5948,14 @@ wnck-pager {
  ****************/
 #whiskermenu-window {
   color: #BFC3CD;
-  background-color: #0E111D; }
+  background-color: #0E111D;
+  border-radius: 0.5em;
+  box-shadow: 4px 4px 10px 3px rgba(255, 255, 255, 0.05); }
+
+#whiskermenu-window box widget {
+  color: transparent; }
+  #whiskermenu-window box widget:hover {
+    color: #BFC3CD; }
 
 #whiskermenu-window button {
   background-color: transparent;
@@ -5973,7 +5980,8 @@ wnck-pager {
     color: white;
     box-shadow: none; }
     #whiskermenu-window button:checked:hover {
-      color: white; }
+      color: white;
+      font-weight: bold; }
 
 #whiskermenu-window treeview {
   background-color: transparent;

diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css
@@ -5948,7 +5948,14 @@ wnck-pager {
  ****************/
 #whiskermenu-window {
   color: #BFC3CD;
-  background-color: #0E111D; }
+  background-color: #0E111D;
+  border-radius: 0.5em;
+  box-shadow: 4px 4px 10px 3px rgba(255, 255, 255, 0.05); }
+
+#whiskermenu-window box widget {
+  color: transparent; }
+  #whiskermenu-window box widget:hover {
+    color: #BFC3CD; }
 
 #whiskermenu-window button {
   background-color: transparent;
@@ -5973,7 +5980,8 @@ wnck-pager {
     color: white;
     box-shadow: none; }
     #whiskermenu-window button:checked:hover {
-      color: white; }
+      color: white;
+      font-weight: bold; }
 
 #whiskermenu-window treeview {
   background-color: transparent;

diff --git a/gtk-4.0/apps/_xfce.scss b/gtk-4.0/apps/_xfce.scss
@@ -116,6 +116,16 @@ wnck-pager {
 #whiskermenu-window {
 	color: $fg_color;
 	background-color: $bg_color;
+	border-radius: 0.5em;
+	box-shadow: 4px 4px 10px 3px $borders_color;
+}
+
+// corner triangle
+#whiskermenu-window box widget {
+	color: transparent;
+	&:hover {
+		color: $fg_color;
+	}
 }
 
 // category button
@@ -127,17 +137,23 @@ wnck-pager {
     padding: 2px;
     margin: 1px 0px;
     &:hover {
-        @include button(hover-header, $selected_bg_color, $selected_fg_color);
-        //background: transparentize($fg_color, 0.95);
+        //@include button(hover-header, $selected_bg_color, $selected_fg_color);
+        @include button(hover-header);
+        background: transparentize($fg_color, 0.90);
         border-radius: 0;
         box-shadow: none;
         -gtk-icon-effect: highlight;
     }
     &:checked {
         // background-color: $selected_bg_color;
 				@include button(active-header);
-				border-radius: 0;
+				//border-radius: 0;
+				//box-shadow: none;
 				box-shadow: none;
+				&:hover{
+					color: white;
+					font-weight: bold;
+				}
     }
 }
 
@@ -174,6 +190,10 @@ wnck-pager {
 			color: $selected_bg_color;
 			background: transparent;
 		}
+		&:backdrop {
+			color: inherit;
+			background: transparent;
+		}
 		&:selected, &:active, &:checked {
 			@include button(active-header);
 		}
@@ -276,4 +296,4 @@ window.thunar statusbar {
 		background: linear-gradient(to right, transparentize($theme-gradient-start, 0.2), transparentize($theme-gradient-end,0.2));
 		label, image { color: inherit; }
 	}}
-}
+}
diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css
@@ -5919,7 +5919,14 @@ wnck-pager {
  ****************/
 #whiskermenu-window {
   color: #BFC3CD;
-  background-color: #0E111D; }
+  background-color: #0E111D;
+  border-radius: 0.5em;
+  box-shadow: 4px 4px 10px 3px rgba(255, 255, 255, 0.05); }
+
+#whiskermenu-window box widget {
+  color: transparent; }
+  #whiskermenu-window box widget:hover {
+    color: #BFC3CD; }
 
 #whiskermenu-window button {
   background-color: transparent;
@@ -5929,10 +5936,11 @@ wnck-pager {
   padding: 2px;
   margin: 1px 0px; }
   #whiskermenu-window button:hover {
-    color: #fefefe;
+    color: #ff6a00;
     border-radius: 0;
     text-shadow: none;
     border: none;
+    background: rgba(191, 195, 205, 0.1);
     border-radius: 0;
     box-shadow: none;
     -gtk-icon-effect: highlight; }
@@ -5941,8 +5949,10 @@ wnck-pager {
     background: linear-gradient(to right, #ff3300, #ffa100);
     box-shadow: 0px 0px 5px rgba(255, 106, 0, 0.98);
     color: white;
-    border-radius: 0;
     box-shadow: none; }
+    #whiskermenu-window button:checked:hover {
+      color: white;
+      font-weight: bold; }
 
 #whiskermenu-window treeview {
   background-color: transparent;
@@ -5974,6 +5984,9 @@ wnck-pager {
     .thunar toolbar button:hover {
       color: #ff6a00;
       background: transparent; }
+    .thunar toolbar button:backdrop {
+      color: inherit;
+      background: transparent; }
     .thunar toolbar button:selected, .thunar toolbar button:active, .thunar toolbar button:checked {
       border-radius: 1em;
       background: linear-gradient(to right, #ff3300, #ffa100);

diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css
@@ -5919,7 +5919,14 @@ wnck-pager {
  ****************/
 #whiskermenu-window {
   color: #BFC3CD;
-  background-color: #0E111D; }
+  background-color: #0E111D;
+  border-radius: 0.5em;
+  box-shadow: 4px 4px 10px 3px rgba(255, 255, 255, 0.05); }
+
+#whiskermenu-window box widget {
+  color: transparent; }
+  #whiskermenu-window box widget:hover {
+    color: #BFC3CD; }
 
 #whiskermenu-window button {
   background-color: transparent;
@@ -5929,10 +5936,11 @@ wnck-pager {
   padding: 2px;
   margin: 1px 0px; }
   #whiskermenu-window button:hover {
-    color: #fefefe;
+    color: #ff6a00;
     border-radius: 0;
     text-shadow: none;
     border: none;
+    background: rgba(191, 195, 205, 0.1);
     border-radius: 0;
     box-shadow: none;
     -gtk-icon-effect: highlight; }
@@ -5941,8 +5949,10 @@ wnck-pager {
     background: linear-gradient(to right, #ff3300, #ffa100);
     box-shadow: 0px 0px 5px rgba(255, 106, 0, 0.98);
     color: white;
-    border-radius: 0;
     box-shadow: none; }
+    #whiskermenu-window button:checked:hover {
+      color: white;
+      font-weight: bold; }
 
 #whiskermenu-window treeview {
   background-color: transparent;
@@ -5974,6 +5984,9 @@ wnck-pager {
     .thunar toolbar button:hover {
       color: #ff6a00;
       background: transparent; }
+    .thunar toolbar button:backdrop {
+      color: inherit;
+      background: transparent; }
     .thunar toolbar button:selected, .thunar toolbar button:active, .thunar toolbar button:checked {
       border-radius: 1em;
       background: linear-gradient(to right, #ff3300, #ffa100);