polyline widget coming along

[crayon_mockup.git] / style.styl

diff --git a/style.styl b/style.styl
index ae2bdc4..88c81de 100644 (file)
--- a/style.styl
+++ b/style.styl
@@ -10,14 +10,20 @@ p
 * p
        margin-top: 10px
 
+.footer
+       font-size: 13px
+
 color_crayon = #8c8c8c
 color_selected = #544c4c
 color_hover = #777
 color_dragging = #9e9373
 color_controls = #000
+color_controls_hover = #222
+color_controls_selected = #444
+color_controls_dragging = #666
 .crayon_mockup
        svg
-               path.polyline
+               .polyline
                        fill: none
                        stroke-width: 5
                        stroke-linecap: butt
@@ -26,10 +32,9 @@ color_controls = #000
                        stroke-opacity: 1
                        stroke-dasharray: none
                        // fails in firefox (must be inline) filter: url(#crayon)
-               rect
-                       fill: none
-               rect.canvas_border
+               .canvas_border
                        overflow: hidden
+                       fill: none
                        stroke: #ccc
                        stroke-width: 2
                        stroke-linecap: butt
@@ -37,17 +42,27 @@ color_controls = #000
                        stroke-dasharray:2 4
                        stroke-dashoffset:1
                        //stroke-opacity:1;marker:none;enable-background:accumulate
-               rect.box
+               .box
                        stroke: color_crayon
+                       fill: none
                        stroke-width: 4
                        stroke-linecap: butt
                        stroke-linejoin:miter
                        // this doesn't work in firefox: filter: url(#crayon)
-               rect.box, path.polyline
+               .box, .polyline
                        stroke: color_crayon
-               rect.box.hover, path.polyline.hover
-                       stroke: color_hover
-               rect.box.dragging, path.polyline.dragging
-                       stroke: color_dragging
-               rect.box.selected, path.polyline.selected
+               .box.selected, .polyline.selected
                        stroke: color_selected
+               .box.dragging, .polyline.dragging
+                       stroke: color_dragging
+               .box.normal.hover, .polyline.normal.hover
+                       stroke: color_hover
+               .control_point
+                       stroke: none
+                       fill: color_controls
+               .control_point.selected
+                       fill: color_controls_selected
+               .control_point.dragging
+                       fill: color_controls_dragging
+               .control_point.normal.hover
+                       fill: color_controls_hover