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