CategoryView: use a Adw.ToolbarView

data/styles/CategoryView.scss

@@ -1,38 +1,11 @@
-category-view {
-    box > scrolledwindow {
-        overshoot.top {
-            background:
-                linear-gradient(
-                    to top,
-                    #{'alpha(@accent_color, 0)'} 80%,
-                    #{'alpha(@accent_color, 0.25)'} 100%
-                ),
-                linear-gradient(
-                    #{'@borders'},
-                    rgba(black, 0.05) 1px,
-                    rgba(black, 0.0) rem(3px)
-                );
-        }
+category-view .main-clamp {
+    padding: rem(12px);
 
-        undershoot.top {
-            background:
-                linear-gradient(
-                    #{'@borders'},
-                    rgba(black, 0.05) 1px,
-                    rgba(black, 0.0) rem(3px)
-                );
-        }
+    .category-box {
+        border-spacing: rem(24px);
     }
 
-    scrolledwindow clamp {
-        padding: rem(12px);
-
-        box.vertical {
-            border-spacing: rem(24px);
-        }
-
-        .rich-list row {
-            border-radius: rem(3px);
-        }
+    .rich-list row {
+        border-radius: rem(3px);
     }
 }

data/styles/Plug.scss

@@ -56,4 +56,37 @@ toolbarview {
         background: inherit;
         box-shadow: none;
     }
+
+    revealer.top-bar {
+        &.raised {
+            box-shadow:
+                inset 0 -1px 0 0 #{'alpha(@highlight_color, 0.2)'},
+                inset 0 1px 0 0 #{'alpha(@highlight_color, 0.3)'},
+                inset 1px 0 0 0 #{'alpha(@highlight_color, 0.07)'},
+                inset -1px 0 0 0 #{'alpha(@highlight_color, 0.07)'},
+                // Intentionally not in ems since it's used as a stroke
+                0 1px 0 0 #{'alpha(@borders, 0.4)'},
+                0 1px rem(2px) rgba(black, 0.2);
+
+            &:backdrop {
+                box-shadow:
+                    inset 0 -1px 0 0 #{'alpha(@highlight_color, 0.2)'},
+                    inset 0 1px 0 0 #{'alpha(@highlight_color, 0.3)'},
+                    inset 1px 0 0 0 #{'alpha(@highlight_color, 0.07)'},
+                    inset -1px 0 0 0 #{'alpha(@highlight_color, 0.07)'},
+                    0 0 0 1px #{'alpha(@borders, 0.3)'},
+                    0 1px rem(2px) rgba(black, 0.15);
+            }
+        }
+
+        &.raised.border {
+            box-shadow:
+                inset 0 -1px 0 0 #{'alpha(@highlight_color, 0.2)'},
+                inset 0 1px 0 0 #{'alpha(@highlight_color, 0.3)'},
+                inset 1px 0 0 0 #{'alpha(@highlight_color, 0.07)'},
+                inset -1px 0 0 0 #{'alpha(@highlight_color, 0.07)'},
+                // Intentionally not in ems since it's used as a stroke
+                0 1px 0 0 #{'alpha(@borders, 0.8)'};
+        }
+    }
 }

src/CategoryView.vala

@@ -39,7 +39,6 @@ public class Switchboard.CategoryView : Adw.NavigationPage {
             show_title_buttons = true,
             title_widget = search_clamp
         };
-        headerbar.add_css_class (Granite.STYLE_CLASS_FLAT);
 
         var searchview = new SearchView (search_box);
 
@@ -77,17 +76,19 @@ public class Switchboard.CategoryView : Adw.NavigationPage {
             maximum_size = 800,
             tightening_threshold = 800
         };
+        clamp.add_css_class ("main-clamp");
 
         var scrolled = new Gtk.ScrolledWindow () {
             child = clamp,
             hscrollbar_policy = NEVER
         };
 
-        var box = new Gtk.Box (VERTICAL, 0);
-        box.append (headerbar);
-        box.append (scrolled);
+        var toolbarview = new Adw.ToolbarView () {
+            content = scrolled
+        };
+        toolbarview.add_top_bar (headerbar);
 
-        child = box;
+        child = toolbarview;
         title = _("All Settings");
 
         load_default_plugs.begin ();