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

diff --git a/styl.styl b/styl.styl
index c5b6d5c..ae2bdc4 100644
--- a/styl.styl
+++ b/styl.styl
@@ -1,35 +1,53 @@
+body
+	margin: 0px
+	padding: 10px
+	font: 15 Arimo, Arial, sans-serif
+h1
+	font-size: 28px
+	margin: 0
+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
-		border: 1px dotted #aaa
-		/.crayon_mockup.delete_tool svg
-			cursor: crosshair
-	svg path
-		fill: none
-		stroke: #8c8c8c
-		stroke-width: 3
-		stroke-linecap: butt
-		stroke-linejoin: round
-		stroke-miterlimit: 4
-		stroke-opacity: 1
-		stroke-dasharray: none
-		/.crayon_mockup.delete_tool svg path:hover
+		path.polyline
+			fill: none
 			stroke-width: 5
-			stroke: #f00
-	.button
-		display: inline-block
-		border-radius: 4px
-		background: white
-		box-shadow: 1px 1px 4px rgba(0,0,0,0.5)
-		padding: 1px 2px
-		cursor: pointer
-		&:hover
-			background-color: #f9f9f9
-		margin: 0 4px
-		* + &
-			margin-left: 8px
-	.button.disabled
-		color: #777
-		background-color: #f3f3f3
-		cursor: default
-	.toolbar, .tool_options
-		padding-bottom: 5px
+			stroke-linecap: butt
+			stroke-linejoin: round
+			stroke-miterlimit: 4
+			stroke-opacity: 1
+			stroke-dasharray: none
+			// 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
+			//stroke-opacity:1;marker:none;enable-background:accumulate
+		rect.box
+			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