X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=styl.styl;fp=styl.styl;h=5d41158121ba137e5b858a9e300bcdf35b48e667;hp=ef85724381f1d5c9cff23dfd250d4f1d6fe08de4;hb=0334684c7b92ea68acf4bd53b2e5d7378d3f3862;hpb=b1a9291591e94a627421082ee880c22ec986d7b5

diff --git a/styl.styl b/styl.styl
index ef85724..5d41158 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 = #000
+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;
-			// this doesn't work in firefox: 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