X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=style.styl;h=54a5e0d73b804ee1c1e843cf2ac7b9f2fda5695f;hp=5cd95d35c5556c4a0a3ae865f7db5f5fcdaeb74e;hb=d7d9898f16c11d98423ff35278a123813cf8393e;hpb=67a786e6d0b589a4ae7e2833d3f1d5d1963a5edc

diff --git a/style.styl b/style.styl
index 5cd95d3..54a5e0d 100644
--- a/style.styl
+++ b/style.styl
@@ -10,6 +10,9 @@ p
 * p
 	margin-top: 10px
 
+.footer
+	font-size: 13px
+
 color_crayon = #8c8c8c
 color_selected = #544c4c
 color_hover = #777
@@ -17,9 +20,10 @@ 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
@@ -27,36 +31,37 @@ color_controls_selected = #444
 			stroke-miterlimit: 4
 			stroke-opacity: 1
 			stroke-dasharray: none
-			// fails in firefox (must be inline) filter: url(#crayon)
-		rect
-			fill: none
-		rect.canvas_border
+			// svg element has: filter: url(#crayon) (firefox can't handle it being here)
+		.canvas_border
 			overflow: hidden
+			fill: none
 			stroke: #ccc
 			stroke-width: 2
 			stroke-linecap: butt
 			stroke-linejoin:miter
 			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
+			// svg element has: filter: url(#crayon) (firefox can't handle it being here)
+		.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
-		circle.control_point
+		.box.dragging, .polyline.dragging
+			stroke: color_dragging
+		.box.normal.hover, .polyline.normal.hover
+			stroke: color_hover
+		.control_point
 			stroke: none
 			fill: color_controls
-		circle.control_point.hover
-			fill: color_controls_hover
-		circle.control_point.selected
+		.control_point.selected
 			fill: color_controls_selected
+		.control_point.dragging
+			fill: color_controls_dragging
+		.control_point.normal.hover
+			fill: color_controls_hover