Clean up CSS and fix issues with shadows and struts (#493)

data/styles/Application.css

@@ -0,0 +1,107 @@
+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 {
+    border-radius: 5px 5px 0 0;
+    margin-bottom: 4px;
+}
+
+panel.translucent.color-dark > box {
+    background-color: alpha(black, 0.4);
+    box-shadow:
+        0 1px 3px alpha(#000, 0.3),
+        0 1px 1px alpha(#000, 0.3);
+}
+
+panel.translucent.color-light > box {
+    background-color: alpha(white, 0.75);
+    box-shadow:
+        inset 0 -1px 0 0 alpha(white, 0.2),
+        inset 0 1px 0 0 alpha(white, 0.3),
+        inset 1px 0 0 0 alpha(white, 0.07),
+        inset -1px 0 0 0 alpha(white, 0.07),
+        0 1px 3px alpha(black, 0.16),
+        0 1px 1px alpha(black, 0.1);
+}
+
+panel menubar {
+    background: transparent;
+    box-shadow: none;
+    border: none;
+}
+
+.composited-indicator {
+    padding: 0 6px;
+}
+
+.composited-indicator > revealer {
+    color: white;
+    font-weight: bold;
+    text-shadow:
+        0 0 2px alpha(black, 0.3),
+        0 1px 2px alpha(black, 0.6);
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.composited-indicator > revealer image,
+.composited-indicator > revealer spinner {
+    -gtk-icon-shadow:
+        0 0 2px alpha(black, 0.3),
+        0 1px 2px alpha(black, 0.6);
+    -gtk-icon-palette:
+        error @STRAWBERRY_300,
+        success @LIME_300,
+        warning mix(@BANANA_300, @BANANA_500, 0.5);
+}
+
+.color-light .composited-indicator > revealer {
+    color: alpha(black, 0.65);
+    text-shadow:
+        0 0 2px alpha(white, 0.3),
+        0 1px 0 alpha(white, 0.25);
+}
+
+.color-light .composited-indicator > revealer image,
+.color-light .composited-indicator > revealer spinner {
+    -gtk-icon-shadow:
+        0 0 2px alpha(white, 0.3),
+        0 1px 0 alpha(white, 0.25);
+    -gtk-icon-palette:
+        error @STRAWBERRY_700,
+        success mix(@LIME_700, @LIME_900, 0.5),
+        warning mix(@BANANA_700, @BANANA_900, 0.5);
+}
+
+.translucent.color-dark .composited-indicator > revealer {
+    text-shadow:
+        0 0 2px alpha(black, 0.15),
+        0 1px 2px alpha(black, 0.3);
+}
+
+.translucent.color-dark .composited-indicator > revealer image,
+.translucent.color-dark .composited-indicator > revealer spinner {
+    -gtk-icon-shadow:
+        0 0 2px alpha(black, 0.15),
+        0 1px 2px alpha(black, 0.3);
+}
+
+.translucent.color-light .composited-indicator > revealer {
+    text-shadow: none;
+}
+
+.translucent.color-light .composited-indicator > revealer image,
+.translucent.color-light .composited-indicator > revealer spinner {
+    -gtk-icon-shadow: none;
+}

data/wingpanel.gresource.xml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <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>
+    <file alias="Application.css" compressed="true">styles/Application.css</file>
   </gresource>
 </gresources>

src/PanelWindow.vala

@@ -45,15 +45,8 @@ 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");
+        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);
 
         this.screen.size_changed.connect (update_panel_dimensions);
@@ -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 () {

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;

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);
 

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 = [