X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=styl.styl;h=ae2bdc4aead213982de53cdf0a312d634a0a250f;hp=bccabd48fa4e6da3397b28ca439226e60863763f;hb=5a5d608f1cf57587e6acf1f83f98c1ae5aa48938;hpb=3fee07a619dd65120b2500e17ce09febd3cc4068

diff --git a/styl.styl b/styl.styl
index bccabd4..ae2bdc4 100644
--- a/styl.styl
+++ b/styl.styl
@@ -9,34 +9,45 @@ p
 	margin: 0
 * p
 	margin-top: 10px
-		
+
+color_crayon = #8c8c8c
+color_selected = #544c4c
+color_hover = #777
+color_dragging = #9e9373
+color_controls = #000
 .crayon_mockup
-	
 	svg
-		path
+		path.polyline
 			fill: none
-			stroke: #8c8c8c
 			stroke-width: 5
 			stroke-linecap: butt
 			stroke-linejoin: round
 			stroke-miterlimit: 4
 			stroke-opacity: 1
 			stroke-dasharray: none
-			filter: url(#crayon)
+			// fails in firefox (must be inline) filter: url(#crayon)
 		rect
 			fill: none
 		rect.canvas_border
-			overflow: hidden;
-			stroke: #ccc;
-			stroke-width: 2;
-			stroke-linecap: butt;
-			stroke-linejoin:miter;
-			stroke-dasharray:2 4;
-			stroke-dashoffset:1;
+			overflow: hidden
+			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
-			stroke: #8c8c8c;
-			stroke-width: 4;
-			stroke-linecap: butt;
-			stroke-linejoin:miter;
-			filter: url(#crayon);
+			stroke: color_crayon
+			stroke-width: 4
+			stroke-linecap: butt
+			stroke-linejoin:miter
+			// this doesn't work in firefox: filter: url(#crayon)
+		rect.box, path.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
+			stroke: color_selected