fix: background color for hover and selected elements in the sidebar is properly displayed

Author: IamGianluca

gtk4/rose-pine-dawn.css

@@ -1,4 +1,3 @@
-
 @define-color accent_bg_color #907aa9;
 @define-color accent_fg_color #faf4ed;
 @define-color accent_color #907aa9;
@@ -30,7 +29,6 @@
 @define-color headerbar_backdrop_color @window_bg_color;
 @define-color headerbar_shade_color #faf4ed;
 
-
 @define-color card_bg_color #fffaf3;
 @define-color card_fg_color #575279;
 @define-color card_shade_color #fffaf3;
@@ -41,3 +39,19 @@
 @define-color sidebar_backdrop_color #f2e9e1;
 @define-color sidebar_bg_color #f2e9e1;
 @define-color sidebar_fg_color #575279;
+
+/* Target the specific row in the sidebar that's selected */
+.navigation-sidebar row:selected {
+  background-color: #907aa9;
+  color: #faf4ed;
+}
+
+/* Target the label in the selected row */
+.navigation-sidebar row:selected .sidebar-label {
+  color: #faf4ed; 
+}
+
+/* Hover effect for non-selected rows */
+.navigation-sidebar row:hover:not(:selected) {
+  background-color: rgba(196, 167, 231, 0.2);
+}

gtk4/rose-pine-moon.css

@@ -1,4 +1,3 @@
-
 @define-color accent_bg_color #c4a7e7;
 @define-color accent_fg_color #232136;
 @define-color accent_color #c4a7e7;
@@ -30,7 +29,6 @@
 @define-color headerbar_backdrop_color @window_bg_color;
 @define-color headerbar_shade_color #232136;
 
-
 @define-color card_bg_color #2a273f;
 @define-color card_fg_color #e0def4;
 @define-color card_shade_color #2a273f;
@@ -41,3 +39,19 @@
 @define-color sidebar_backdrop_color #393552;
 @define-color sidebar_bg_color #393552;
 @define-color sidebar_fg_color #e0def4;
+
+/* Target the specific row in the sidebar that's selected */
+.navigation-sidebar row:selected {
+  background-color: #c4a7e7;
+  color: #232136;
+}
+
+/* Target the label in the selected row */
+.navigation-sidebar row:selected .sidebar-label {
+  color: #232136; 
+}
+
+/* Hover effect for non-selected rows */
+.navigation-sidebar row:hover:not(:selected) {
+  background-color: rgba(196, 167, 231, 0.2);
+}

gtk4/rose-pine.css

@@ -1,4 +1,3 @@
-
 @define-color accent_bg_color #c4a7e7;
 @define-color accent_fg_color #191724;
 @define-color accent_color #c4a7e7;
@@ -30,7 +29,6 @@
 @define-color headerbar_backdrop_color @window_bg_color;
 @define-color headerbar_shade_color #191724;
 
-
 @define-color card_bg_color #1f1d2e;
 @define-color card_fg_color #e0def4;
 @define-color card_shade_color #1f1d2e;
@@ -41,3 +39,19 @@
 @define-color sidebar_backdrop_color #26233A;
 @define-color sidebar_bg_color #26233A;
 @define-color sidebar_fg_color #e0def4;
+
+/* Target the specific row in the sidebar that's selected */
+.navigation-sidebar row:selected {
+  background-color: #c4a7e7;
+  color: #191724;
+}
+
+/* Target the label in the selected row */
+.navigation-sidebar row:selected .sidebar-label {
+  color: #191724; 
+}
+
+/* Hover effect for non-selected rows */
+.navigation-sidebar row:hover:not(:selected) {
+  background-color: rgba(196, 167, 231, 0.2);
+}