Clean up CSS and fix issues with shadows and struts

elementary · Aug 11, 2023 · 51e1f54 · 51e1f54
1 parent 483f01d
commit 51e1f54
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 85 deletions.
diff --git a/data/styles/application.css b/data/styles/application.css
@@ -1,16 +1,54 @@
+panel {
+    background-color: transparent;
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    min-height: 16px;
+}
+
+panel > box {
+    /*Don't transition shadow etc to avoid visual issues with struts*/
+    transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+panel.maximized {
+    background-color: #000;
+}
+
+panel.translucent > box {
+    margin-bottom: 4px;
+}
+
+panel.translucent.color-dark > box {
+    background-color: alpha(#000, 0.5);
+    box-shadow:
+        0 1px 3px alpha(#000, 0.24),
+        0 1px 1px alpha(#000, 0.52);
+}
+
+panel.translucent.color-light > box {
+    background-color: alpha(#fff, 0.85);
+    box-shadow:
+        inset 0 -1px 1px alpha(#fff, 0.2),
+        0 1px 3px alpha(#000, 0.24),
+        0 1px 1px alpha(#000, 0.12);
+}
+
+panel menubar {
+    background: transparent;
+    box-shadow: none;
+    border: none;
+}
+
 .composited-indicator {
     padding: 0 6px;
 }
 
-.composited-indicator > revealer label,
-.composited-indicator > revealer image,
-.composited-indicator > revealer spinner {
+.composited-indicator > revealer {
     color: #fff;
     font-weight: bold;
     text-shadow:
         0 0 2px alpha(#000, 0.3),
         0 1px 2px alpha(#000, 0.6);
-    transition: all 200ms ease-in-out;
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
     -gtk-icon-shadow:
         0 0 2px alpha(#000, 0.3),
         0 1px 2px alpha(#000, 0.6);
@@ -20,9 +58,7 @@
         warning mix(@BANANA_300, @BANANA_500, 0.5);
 }
 
-.panel.color-light .composited-indicator > revealer label,
-.panel.color-light .composited-indicator > revealer image,
-.panel.color-light .composited-indicator > revealer spinner {
+.color-light .composited-indicator > revealer {
     color: alpha(#000, 0.65);
     text-shadow:
         0 0 2px alpha(#fff, 0.3),

diff --git a/data/styles/panel.css b/data/styles/panel.css
diff --git a/data/wingpanel.gresource.xml b/data/wingpanel.gresource.xml
@@ -2,6 +2,5 @@
 <gresources>
   <gresource prefix="/io/elementary/wingpanel">
     <file alias="application.css" compressed="true">styles/application.css</file>
-    <file alias="panel.css" compressed="true">styles/panel.css</file>
   </gresource>
 </gresources>
diff --git a/src/PanelWindow.vala b/src/PanelWindow.vala
@@ -45,13 +45,6 @@ public class Wingpanel.PanelWindow : Gtk.Window {
 
         monitor_number = screen.get_primary_monitor ();
 
-        var panel_provider = new Gtk.CssProvider ();
-        panel_provider.load_from_resource ("io/elementary/wingpanel/panel.css");
-
-        var style_context = get_style_context ();
-        style_context.add_class (Widgets.StyleClass.PANEL);
-        style_context.add_provider (panel_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-
         var app_provider = new Gtk.CssProvider ();
         app_provider.load_from_resource ("io/elementary/wingpanel/application.css");
         Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), app_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
@@ -88,6 +81,8 @@ public class Wingpanel.PanelWindow : Gtk.Window {
 
         key_controller = new Gtk.EventControllerKey (this);
         key_controller.key_pressed.connect (on_key_pressed);
+
+        panel.size_allocate.connect (update_panel_dimensions);
     }
 
     private void on_realize () {

diff --git a/src/Widgets/IndicatorEntry.vala b/src/Widgets/IndicatorEntry.vala
@@ -49,7 +49,7 @@ public class Wingpanel.Widgets.IndicatorEntry : Gtk.MenuItem {
         display_widget = base_indicator.get_display_widget ();
         halign = Gtk.Align.START;
         name = base_indicator.code_name + "/entry";
-        get_style_context ().add_class (StyleClass.COMPOSITED_INDICATOR);
+        get_style_context ().add_class ("composited-indicator");
 
         if (display_widget == null) {
             return;

diff --git a/src/Widgets/Panel.vala b/src/Widgets/Panel.vala
@@ -27,15 +27,12 @@ public class Wingpanel.Widgets.Panel : Gtk.EventBox {
     private unowned Gtk.StyleContext style_context;
     private Gtk.CssProvider? style_provider = null;
 
-    private static Gtk.CssProvider resource_provider;
-
     public Panel (Services.PopoverManager popover_manager) {
         Object (popover_manager : popover_manager);
     }
 
-    static construct {
-        resource_provider = new Gtk.CssProvider ();
-        resource_provider.load_from_resource ("io/elementary/wingpanel/panel.css");
+    class construct {
+        set_css_name ("panel");
     }
 
     construct {
@@ -48,18 +45,15 @@ public class Wingpanel.Widgets.Panel : Gtk.EventBox {
             can_focus = true,
             halign = Gtk.Align.START
         };
-        left_menubar.get_style_context ().add_provider (resource_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         center_menubar = new Gtk.MenuBar () {
             can_focus = true
         };
-        center_menubar.get_style_context ().add_provider (resource_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         right_menubar = new IndicatorMenuBar () {
             can_focus = true,
             halign = Gtk.Align.END
         };
-        right_menubar.get_style_context ().add_provider (resource_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         var box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
         box.pack_start (left_menubar);
@@ -79,8 +73,6 @@ public class Wingpanel.Widgets.Panel : Gtk.EventBox {
         });
 
         style_context = get_style_context ();
-        style_context.add_class (StyleClass.PANEL);
-        style_context.add_provider (resource_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         Services.BackgroundManager.get_default ().background_state_changed.connect (update_background);
     }
@@ -290,7 +282,7 @@ public class Wingpanel.Widgets.Panel : Gtk.EventBox {
 
         string css = """
             .panel {
-                transition: all %ums ease-in-out;
+                transition: all %ums cubic-bezier(0.4, 0, 0.2, 1);
             }
         """.printf (animation_duration);
 

diff --git a/src/Widgets/StyleClass.vala b/src/Widgets/StyleClass.vala
diff --git a/src/meson.build b/src/meson.build
@@ -9,8 +9,7 @@ wingpanel_files = files(
     'Widgets/IndicatorEntry.vala',
     'Widgets/IndicatorMenuBar.vala',
     'Widgets/IndicatorPopover.vala',
-    'Widgets/Panel.vala',
-    'Widgets/StyleClass.vala',
+    'Widgets/Panel.vala'
 )
 
 wingpanel_deps = [