style.styl

   1 body
   2         margin: 0px
   3         padding: 10px
   4         font: 15 Arimo, Arial, sans-serif
   5 h1
   6         font-size: 28px
   7         margin: 0
   8 p
   9         margin: 0
  10 * p
  11         margin-top: 10px
  12
  13 .footer
  14         font-size: 13px
  15
  16 color_crayon = #8c8c8c
  17 color_selected = #544c4c
  18 color_hover = #777
  19 color_dragging = #9e9373
  20 color_controls = #000
  21 color_controls_hover = #222
  22 color_controls_selected = #444
  23 color_controls_dragging = #666
  24 .crayon_mockup
  25         svg
  26                 .polyline
  27                         fill: none
  28                         stroke-width: 5
  29                         stroke-linecap: butt
  30                         stroke-linejoin: round
  31                         stroke-miterlimit: 4
  32                         stroke-opacity: 1
  33                         stroke-dasharray: none
  34                         // fails in firefox (must be inline) filter: url(#crayon)
  35                 .canvas_border
  36                         overflow: hidden
  37                         fill: none
  38                         stroke: #ccc
  39                         stroke-width: 2
  40                         stroke-linecap: butt
  41                         stroke-linejoin:miter
  42                         stroke-dasharray:2 4
  43                         stroke-dashoffset:1
  44                         //stroke-opacity:1;marker:none;enable-background:accumulate
  45                 .box
  46                         stroke: color_crayon
  47                         fill: none
  48                         stroke-width: 4
  49                         stroke-linecap: butt
  50                         stroke-linejoin:miter
  51                         // this doesn't work in firefox: filter: url(#crayon)
  52                 .box, .polyline
  53                         stroke: color_crayon
  54                 .box.selected, .polyline.selected
  55                         stroke: color_selected
  56                 .box.dragging, .polyline.dragging
  57                         stroke: color_dragging
  58                 .box.normal.hover, .polyline.normal.hover
  59                         stroke: color_hover
  60                 .control_point
  61                         stroke: none
  62                         fill: color_controls
  63                 .control_point.selected
  64                         fill: color_controls_selected
  65                 .control_point.dragging
  66                         fill: color_controls_dragging
  67                 .control_point.normal.hover
  68                         fill: color_controls_hover