[CSS] Update overview style to match latest mockup

https://bugzilla.gnome.org/show_bug.cgi?id=609401

data/Makefile.am

@@ -31,13 +31,12 @@ dist_theme_DATA =				\
 	theme/scroll-button-down.png		\
 	theme/scroll-button-up-hover.png	\
 	theme/scroll-button-up.png		\
-	theme/scroll-vhandle.png        \
+	theme/scroll-hhandle.svg        \
+	theme/scroll-vhandle.svg        \
 	theme/section-back.svg          \
 	theme/section-more.svg          \
 	theme/single-view-active.svg          \
 	theme/single-view.svg          \
-	theme/switch-scroll-hhandle.svg		\
-	theme/switch-scroll-hhandle-hover.svg		\
 	theme/ws-switch-arrow-left.svg		\
 	theme/ws-switch-arrow-right.svg
 

data/theme/gnome-shell.css

@@ -41,36 +41,32 @@ StScrollView
   scrollbar-height: 16px;
 }
 
-StButton#up-stepper
+StScrollBar {
-{
+    background-color: #080808;
-  border-image: url("scroll-button-up.png") 5;
+    border: 1px solid #2d2d2d;
-}
+    border-radius: 8px;
-
-StButton#up-stepper:hover,
-StButton#up-stepper:active
-{
-  border-image: url("scroll-button-up-hover.png") 5;
-}
-
-StButton#down-stepper
-{
-  border-image: url("scroll-button-down.png") 5;
-}
-
-StButton#down-stepper:hover,
-StButton#down-stepper:active
-{
-  border-image: url("scroll-button-down-hover.png") 5;
 }
 
 StScrollBar StButton#vhandle
 {
-  border-image: url("scroll-vhandle.png") 5;
+    background-image: url("scroll-vhandle.svg");
+    background-color: #252525;
+    border: 1px solid #080808;
+    border-radius: 8px;
 }
 
+StScrollBar StButton#hhandle
+{
+    background-image: url("scroll-hhandle.svg");
+    background-color: #252525;
+    border: 1px solid #080808;
+    border-radius: 8px;
+}
+
+StScrollBar StButton#hhandle:hover,
 StScrollBar StButton#vhandle:hover
 {
-  border-image: url("scroll-vhandle.png") 5;
+    background-color: #292929;
 }
 
 StTooltip {
@@ -89,6 +85,7 @@ StTooltip {
     background-gradient-direction: vertical;
     background-gradient-start: #161616;
     background-gradient-end: #000000;
+    border-bottom: 1px solid #1f1f1f;
 }
 
 #panelLeft, #panelCenter, #panelRight {
@@ -138,35 +135,27 @@ StTooltip {
     spacing: 4px;
 }
 
-/* Overlay */
+/* Overview */
 
 .overview {
-    background-color: #000;
+    background-color: #111;
 }
 
 .info-bar {
-    color: #cccccc;
+    color: #fff;
     font-size: 14px;
-    spacing: 8px;
+    spacing: 20px;
-}
-
-.info-bar-panel {
-    padding: 11px;
-}
-
-.info-bar-panel > StBin {
-    border-radius: 3px;
-    border: 1px solid #5c5c5c;
-    background: #1e1e1e;
-    height: 26px;
 }
 
 .info-bar-link-button {
-    text-decoration: underline;
+    background-color: #2d2d2d;
+    padding: 2px 14px;
+    border-radius: 10px;
+    border: 1px solid #181818;
 }
 
 .info-bar-link-button:hover {
-    color: #ffffff;
+    border: 1px solid #666666;
 }
 
 .workspaces {
@@ -177,7 +166,7 @@ StTooltip {
     height: 48px;
 }
 
-.workspaces-bar StBoxLayout {
+.workspaces-bar, .workspaces-bar * {
     spacing: 5px;
 }
 
@@ -239,27 +228,11 @@ StTooltip {
 }
 
 #SwitchScroll {
-    height: 16px;
+    height: 14px;
 }
 
-#SwitchScroll StBin{
+#SwitchScroll #hhandle {
-    border: 1px solid rgba(128,128,128,0.40);
+    border-radius: 7px;
-    border-radius: 8px;
-}
-
-#SwitchScroll StButton#hhandle {
-  border-image: url("switch-scroll-hhandle.svg") 5;
-}
-
-#SwitchScroll StButton#hhandle:hover {
-  border-image: url("switch-scroll-hhandle-hover.svg") 5;
-}
-
-#SwitchScroll StButton#backward-stepper,
-#SwitchScroll StButton#forward-stepper
-{
-    width: 0px;
-    border: 0px;
 }
 
 /* Dash */
@@ -408,7 +381,7 @@ StTooltip {
 }
 
 .app-well-app {
-    border: 1px solid #080808;
+    border: 1px solid #181818;
     border-radius: 4px;
     padding: 2px;
     width: 70px;
@@ -418,8 +391,8 @@ StTooltip {
 
 .app-well-app.running {
     background-gradient-direction: vertical;
-    background-gradient-start: #3c3c3c;
+    background-gradient-start: #3d3d3d;
-    background-gradient-end: #000000;
+    background-gradient-end: #181818;
 }
 
 .app-well-app:hover {

data/theme/scroll-hhandle.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10"
+   height="4"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.47 r22583"
+   sodipodi:docname="scroll-hhandle.svg">
+  <defs
+     id="defs4">
+  </defs>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="rect3592"
+       width="2"
+       height="4"
+       x="0"
+       y="0"
+       rx="0"
+       ry="0" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect3592"
+       id="use2825"
+       transform="translate(8,0)"
+       width="10"
+       height="4" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#use2825"
+       id="use2827"
+       transform="translate(-4,0)"
+       width="10"
+       height="4" />
+  </g>
+</svg>

data/theme/scroll-vhandle.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="4"
+   height="10"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.47 r22583"
+   sodipodi:docname="scroll-hhandle.svg">
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="rect3592"
+       width="2"
+       height="4"
+       x="0"
+       y="-4"
+       rx="0"
+       ry="0"
+       transform="matrix(0,1,-1,0,0,0)" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#rect3592"
+       id="use3705"
+       transform="translate(0,4)"
+       width="4"
+       height="10" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#use3705"
+       id="use3707"
+       transform="translate(0,4)"
+       width="4"
+       height="10" />
+  </g>
+</svg>

data/theme/switch-scroll-hhandle-hover.svg

@@ -1,123 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="300"
-   height="16"
-   id="svg5337"
-   version="1.1"
-   inkscape:version="0.47pre4 r22446"
-   sodipodi:docname="New document 2">
-  <defs
-     id="defs5339">
-    <inkscape:perspective
-       sodipodi:type="inkscape:persp3d"
-       inkscape:vp_x="0 : 16 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_z="32 : 16 : 1"
-       inkscape:persp3d-origin="16 : 10.666667 : 1"
-       id="perspective5345" />
-    <inkscape:perspective
-       id="perspective5323"
-       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
-       inkscape:vp_z="1 : 0.5 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_x="0 : 0.5 : 1"
-       sodipodi:type="inkscape:persp3d" />
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient356"
-       id="linearGradient5313"
-       gradientUnits="userSpaceOnUse"
-       x1="495.75"
-       y1="675.5"
-       x2="495.75"
-       y2="683" />
-    <linearGradient
-       id="linearGradient356">
-      <stop
-         style="stop-color:#bbbbbb;stop-opacity:1;"
-         offset="0"
-         id="stop357" />
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="1.0000000"
-         id="stop358" />
-    </linearGradient>
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="2.7994505"
-     inkscape:cx="111.6181"
-     inkscape:cy="33.67855"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     inkscape:grid-bbox="true"
-     inkscape:document-units="px"
-     inkscape:window-width="1680"
-     inkscape:window-height="997"
-     inkscape:window-x="0"
-     inkscape:window-y="26"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata5342">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1"
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     transform="translate(0,-16)">
-    <g
-       style="display:inline"
-       id="g6342"
-       transform="translate(-334.52404,-658.85869)">
-      <rect
-         ry="8"
-         rx="8"
-         y="675.5"
-         x="335.5"
-         height="15"
-         width="299"
-         id="rect5457-5"
-         style="fill:url(#linearGradient5313);fill-opacity:1;stroke:#999999;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
-      <g
-         transform="translate(0.5,0)"
-         id="g6337">
-        <path
-           style="fill:none;stroke:#666666;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.8"
-           d="m 480.5,680.3717 0,5.2566"
-           id="path6304" />
-        <path
-           style="fill:none;stroke:#666666;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.8;display:inline"
-           d="m 484.5,680.3717 0,5.2566"
-           id="path6304-0" />
-        <path
-           style="fill:none;stroke:#666666;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.8;display:inline"
-           d="m 488.5,680.3717 0,5.2566"
-           id="path6304-8" />
-      </g>
-    </g>
-  </g>
-</svg>

data/theme/switch-scroll-hhandle.svg

@@ -1,123 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="300"
-   height="16"
-   id="svg5337"
-   version="1.1"
-   inkscape:version="0.47pre4 r22446"
-   sodipodi:docname="New document 2">
-  <defs
-     id="defs5339">
-    <inkscape:perspective
-       sodipodi:type="inkscape:persp3d"
-       inkscape:vp_x="0 : 16 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_z="32 : 16 : 1"
-       inkscape:persp3d-origin="16 : 10.666667 : 1"
-       id="perspective5345" />
-    <inkscape:perspective
-       id="perspective5323"
-       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
-       inkscape:vp_z="1 : 0.5 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_x="0 : 0.5 : 1"
-       sodipodi:type="inkscape:persp3d" />
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient356"
-       id="linearGradient5313"
-       gradientUnits="userSpaceOnUse"
-       x1="495.75"
-       y1="675.5"
-       x2="495.75"
-       y2="683" />
-    <linearGradient
-       id="linearGradient356">
-      <stop
-         style="stop-color:#999999;stop-opacity:1;"
-         offset="0"
-         id="stop357" />
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="1.0000000"
-         id="stop358" />
-    </linearGradient>
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="2.7994505"
-     inkscape:cx="111.6181"
-     inkscape:cy="33.67855"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     inkscape:grid-bbox="true"
-     inkscape:document-units="px"
-     inkscape:window-width="1680"
-     inkscape:window-height="997"
-     inkscape:window-x="0"
-     inkscape:window-y="26"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata5342">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1"
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     transform="translate(0,-16)">
-    <g
-       style="display:inline"
-       id="g6342"
-       transform="translate(-334.52404,-658.85869)">
-      <rect
-         ry="8"
-         rx="8"
-         y="675.5"
-         x="335.5"
-         height="15"
-         width="299"
-         id="rect5457-5"
-         style="fill:url(#linearGradient5313);fill-opacity:1;stroke:#999999;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
-      <g
-         transform="translate(0.5,0)"
-         id="g6337">
-        <path
-           style="fill:none;stroke:#666666;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.8"
-           d="m 480.5,680.3717 0,5.2566"
-           id="path6304" />
-        <path
-           style="fill:none;stroke:#666666;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.8;display:inline"
-           d="m 484.5,680.3717 0,5.2566"
-           id="path6304-0" />
-        <path
-           style="fill:none;stroke:#666666;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.8;display:inline"
-           d="m 488.5,680.3717 0,5.2566"
-           id="path6304-8" />
-      </g>
-    </g>
-  </g>
-</svg>