scale rounded and slider active variant

Signed-off-by: Manuel Quiñones <manuq@laptop.org>

3 files changed, 154 insertions, 5 deletions

diff --git a/assets/scale-slider-active.svg b/assets/scale-slider-active.svg
new file mode 100644
index 0000000..ead06dd
--- /dev/null
+++ b/assets/scale-slider-active.svg
@@ -0,0 +1,127 @@
+<?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="32"
+   height="32"
+   id="svg5980"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="scale-slider-horizontal.svg">
+  <defs
+     id="defs5982">
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4714-2"
+       id="linearGradient5304-8"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,-1,1,0,-167.30724,401.40146)"
+       x1="108.59611"
+       y1="477.02258"
+       x2="113.8317"
+       y2="477.02258" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient4714-2">
+      <stop
+         style="stop-color:#eeeeec;stop-opacity:1;"
+         offset="0"
+         id="stop4716-4" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="1"
+         id="stop4718-5" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4722-3"
+       id="linearGradient5306-4"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,-1,1,0,-166.30724,401.40146)"
+       x1="116.15861"
+       y1="479.89758"
+       x2="107.97111"
+       y2="479.89758" />
+    <linearGradient
+       id="linearGradient4722-3">
+      <stop
+         style="stop-color:#babdb6;stop-opacity:1;"
+         offset="0"
+         id="stop4724-2" />
+      <stop
+         style="stop-color:#7b8073;stop-opacity:1"
+         offset="1"
+         id="stop4726-2" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ff06ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="8.8688426"
+     inkscape:cx="16"
+     inkscape:cy="16"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:window-width="1024"
+     inkscape:window-height="542"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1"
+     showguides="true"
+     inkscape:guide-bbox="true" />
+  <metadata
+     id="metadata5985">
+    <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">
+    <g
+       id="g5104"
+       transform="matrix(1.9661528,0,0,1.9661528,0.27077716,-27.255355)">
+      <path
+         transform="matrix(1.0909091,0,0,1.0909091,-332.77273,-294.63637)"
+         d="m 319.25,290.25 c 0,3.79696 -3.07804,6.875 -6.875,6.875 -3.79696,0 -6.875,-3.07804 -6.875,-6.875 0,-3.79696 3.07804,-6.875 6.875,-6.875 3.79696,0 6.875,3.07804 6.875,6.875 z"
+         sodipodi:ry="6.875"
+         sodipodi:rx="6.875"
+         sodipodi:cy="290.25"
+         sodipodi:cx="312.375"
+         id="path5387"
+         style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:0.91666669;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         sodipodi:type="arc" />
+      <path
+         sodipodi:type="arc"
+         style="color:#000000;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.91666669;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="path5102"
+         sodipodi:cx="312.375"
+         sodipodi:cy="290.25"
+         sodipodi:rx="6.875"
+         sodipodi:ry="6.875"
+         d="m 319.25,290.25 c 0,3.79696 -3.07804,6.875 -6.875,6.875 -3.79696,0 -6.875,-3.07804 -6.875,-6.875 0,-3.79696 3.07804,-6.875 6.875,-6.875 3.79696,0 6.875,3.07804 6.875,6.875 z"
+         transform="matrix(0.6088795,0,0,0.6088795,-182.19873,-154.72728)" />
+    </g>
+  </g>
+</svg>
diff --git a/assets/scale-slider.svg b/assets/scale-slider.svg
index ead06dd..b0aaa49 100644
--- a/assets/scale-slider.svg
+++ b/assets/scale-slider.svg
@@ -15,7 +15,7 @@
    id="svg5980"
    version="1.1"
    inkscape:version="0.48.1 r9760"
-   sodipodi:docname="scale-slider-horizontal.svg">
+   sodipodi:docname="scale-slider.svg">
   <defs
      id="defs5982">
     <linearGradient
@@ -70,9 +70,9 @@
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
      inkscape:zoom="8.8688426"
-     inkscape:cx="16"
+     inkscape:cx="-5.3669369"
      inkscape:cy="16"
-     inkscape:current-layer="layer1"
+     inkscape:current-layer="g5104"
      showgrid="true"
      inkscape:grid-bbox="true"
      inkscape:document-units="px"
@@ -91,7 +91,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -110,7 +110,7 @@
          sodipodi:cy="290.25"
          sodipodi:cx="312.375"
          id="path5387"
-         style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:0.91666669;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         style="color:#000000;fill:#e5e5e5;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:0.91666669000000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
          sodipodi:type="arc" />
       <path
          sodipodi:type="arc"
diff --git a/sugar-theme.css b/sugar-theme.css
index 29506f7..fc4ee31 100644
--- a/sugar-theme.css
+++ b/sugar-theme.css
@@ -177,6 +177,24 @@ GtkScale {
     -GtkRange-slider-width: 32; /* $scale_slider_width */
 }
 
+GtkScale.trough {
+    border-width: 2;
+    border-radius: 30;
+    border-style: solid;
+    border-color: @button_grey;
+    background-color: @button_grey;
+}
+
+/*
+
+FIXME - :active selection is not working
+
+GtkScale.trough:active {
+    border-color: @white;
+}
+
+*/
+
 GtkScale.slider {
     border-width: 0;
     border-radius: 0;
@@ -186,6 +204,10 @@ GtkScale.slider {
     background-image: url("assets/scale-slider.svg");
 }
 
+GtkScale.slider:active {
+    background-image: url("assets/scale-slider-active.svg");
+}
+
 GtkScale.slider:insensitive {
 }