SettinsgSidebar: Add styles for bottom bar (#301)

* SettingsSidebar: add a show_title_buttons option * Add styles for bottom bar
elementary · Mar 21, 2024 · 233ae0d · 233ae0d
1 parent d598758
commit 233ae0d
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 3 deletions.
diff --git a/data/styles/Plug.scss b/data/styles/Plug.scss
@@ -24,7 +24,35 @@ toolbarview {
         }
     }
 
-    headerbar {
+    &.undershoot-bottom scrolledwindow {
+        overshoot.bottom {
+            background:
+                linear-gradient(
+                    to bottom,
+                    #{'alpha(@accent_color, 0)'} 80%,
+                    #{'alpha(@accent_color, 0.25)'} 100%
+                ),
+                linear-gradient(
+                    to top,
+                    #{'@borders'},
+                    rgba(black, 0.05) 1px,
+                    rgba(black, 0.0) rem(3px)
+                );
+        }
+
+        undershoot.bottom {
+            background:
+                linear-gradient(
+                    to top,
+                    #{'@borders'},
+                    rgba(black, 0.05) 1px,
+                    rgba(black, 0.0) rem(3px)
+                );
+        }
+    }
+
+    headerbar,
+    actionbar {
         background: inherit;
         box-shadow: none;
     }

diff --git a/data/styles/SettingsSidebar.scss b/data/styles/SettingsSidebar.scss
@@ -1,6 +1,4 @@
 settingssidebar {
-    background: #{'@insensitive_bg_color'};
-
     list {
         background: inherit;
         min-width: rem(200px);
@@ -25,4 +23,49 @@ settingssidebar {
             }
         }
     }
+
+    toolbarview {
+        revealer.bottom-bar {
+            color: #{'mix(@text_color, @insensitive_bg_color, 0.15)'};
+
+            &.raised {
+                box-shadow: 0 -1px #{'alpha(@highlight_color, 0.2)'};
+                background-color: rgba(black, 0.01);
+                background-image:
+                    linear-gradient(
+                        to bottom,
+                        #{'@borders'} 1px,
+                        rgba(black, 0.07) 1px,
+                        transparent rem(3px)
+                    );
+            }
+
+            &.raised.border {
+                background: rgba(black, 0.03);
+                box-shadow:
+                    0 -1px #{'@borders'},
+                    inset 0 1px #{'alpha(@highlight_color, 0.3)'};
+            }
+
+            actionbar {
+                padding: rem(6px);
+
+                box.start > label {
+                    margin: rem(6px);
+                    font-weight: 500;
+                }
+
+                box.end > switch {
+                    slider,
+                    trough {
+                         min-height: 1.5em;
+                    }
+
+                    slider {
+                         min-width: 1.5em;
+                    }
+                }
+            }
+        }
+    }
 }
diff --git a/lib/SettingsSidebar.vala b/lib/SettingsSidebar.vala
@@ -93,6 +93,8 @@ public class Switchboard.SettingsSidebar : Gtk.Widget {
         toolbarview.add_top_bar (headerbar);
         toolbarview.set_parent (this);
 
+        add_css_class (Granite.STYLE_CLASS_SIDEBAR);
+
         on_sidebar_changed ();
         stack.pages.items_changed.connect (on_sidebar_changed);