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                         // svg element has: filter: url(#crayon) (firefox can't handle it being here)
  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                 .box
  45                         stroke: color_crayon
  46                         fill: none
  47                         stroke-width: 4
  48                         stroke-linecap: butt
  49                         stroke-linejoin:miter
  50                         // svg element has: filter: url(#crayon) (firefox can't handle it being here)
  51                 .box, .polyline
  52                         stroke: color_crayon
  53                 .box.selected, .polyline.selected
  54                         stroke: color_selected
  55                 .box.dragging, .polyline.dragging
  56                         stroke: color_dragging
  57                 .box.normal.hover, .polyline.normal.hover
  58                         stroke: color_hover
  59                 .control_point
  60                         stroke: none
  61                         fill: color_controls
  62                 .control_point.selected
  63                         fill: color_controls_selected
  64                 .control_point.dragging
  65                         fill: color_controls_dragging
  66                 .control_point.normal.hover
  67                         fill: color_controls_hover