-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
- path.polyline
- fill: none
- stroke-width: 5
- 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