Appearance: update dock style

Author: danirabbit

data/dock-dark.svg

@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/io/elementary/settings/desktop">
-    <file compressed="true">dock.svg</file>
-    <file compressed="true">dock-dark.svg</file>
     <file compressed="true">notify-center.svg</file>
     <file compressed="true">notify-center-dark.svg</file>
     <file compressed="true">plug.css</file>

data/dock.svg

@@ -95,29 +95,53 @@ settingspage.wallpaper actionbar box.start {
 }
 
 .appearance-view desktop-preview .shell {
-    background-image:
-        url("resource:///io/elementary/settings/desktop/notify-center.svg"),
-        url("resource:///io/elementary/settings/desktop/dock.svg");
+    background-image: url("resource:///io/elementary/settings/desktop/notify-center.svg");
     background-repeat: no-repeat;
-    background-size: 40px 55px, 54px 12px;
-    background-position: calc(100% - 3px) 3px, calc(50% + 0.5px) bottom;
+    background-size: 40px 55px;
+    background-position: calc(100% - 3px) 3px;
     transition: all 300ms ease-in-out;
 }
 
 .appearance-view desktop-preview box:dir(rtl) {
-    background-position: 3px 3px, calc(50% + 0.5px) bottom;
+    background-position: 3px 3px;
 }
 
 .appearance-view desktop-preview.dark .shell {
-    background-image:
-        url("resource:///io/elementary/settings/desktop/notify-center-dark.svg"),
-        url("resource:///io/elementary/settings/desktop/dock-dark.svg");
+    background-image: url("resource:///io/elementary/settings/desktop/notify-center-dark.svg");
 }
 
 .appearance-view desktop-preview.dim .shell {
     background-color: alpha(black, 0.3);
 }
 
+.appearance-view desktop-preview .dock {
+    border-radius: 2px;
+    min-height: 0.6em;
+    min-width: 5em;
+    background: alpha(#fafafa, 0.6);
+    box-shadow:
+        inset 0 -1px 0 0 alpha(white, 0.1),
+        inset 0 1px 0 0 alpha(white, 0.15),
+        inset 1px 0 0 0 alpha(white, 0.035),
+        inset -1px 0 0 0 alpha(white, 0.035),
+        0 0 0 1px alpha(black, 0.1),
+        0 1px 3px alpha(black, 0.10),
+        0 3px 9px alpha(black, 0.15);
+    margin: 0.25em;
+}
+
+.appearance-view desktop-preview.dark .dock {
+    background: alpha(#444, 0.6);
+    box-shadow:
+        inset 0 -1px 0 0 alpha(white, 0.05),
+        inset 0 1px 0 0 alpha(white, 0.07),
+        inset 1px 0 0 0 alpha(white, 0.0175),
+        inset -1px 0 0 0 alpha(white, 0.0175),
+        0 0 0 1px alpha(black, 0.7),
+        0 1px 2px alpha(black, 0.1),
+        0 2px 4px alpha(black, 0.3);
+}
+
 .appearance-view desktop-preview .window {
     border-radius: 0.25em;
     min-height: 32px;

data/icons.gresource.xml

@@ -412,6 +412,12 @@ public class PantheonShell.Appearance : Switchboard.SettingsPage {
                 content_fit = COVER
             };
 
+            var dock = new Gtk.Box (HORIZONTAL, 0) {
+                halign = CENTER,
+                valign = END
+            };
+            dock.add_css_class ("dock");
+
             var window_back = new Gtk.Box (HORIZONTAL, 0) {
                 halign = CENTER,
                 valign = CENTER
@@ -434,6 +440,7 @@ public class PantheonShell.Appearance : Switchboard.SettingsPage {
                 overflow = HIDDEN
             };
             overlay.add_overlay (shell);
+            overlay.add_overlay (dock);
             overlay.add_overlay (window_back);
             overlay.add_overlay (window_front);
             overlay.add_css_class (Granite.STYLE_CLASS_CARD);