index.styl

@require "./node_modules/normalize.css/normalize.css"

$background = #272730
$elevated = #41414C
$subtle = #898992
$primary = #5666F3
$highlight = #00F5FF

body
  margin 0
  padding 0
  background $background
  color white
  font-size 16px

.wrapper
  margin 0 auto
  width 400px

.box
  position absolute
  border 1px solid $highlight
  // border-right 2px solid $highlight
  top 0px
  height 10px
  pointer-events none
  &.selected
    background-color transparent

h1
  color $primary
  font-family monospace
  font-size 18px
  margin-top 2rem

.start,
.end,
.hover
  position absolute
  top: 12px
  font-size 10px
  font-family monospace
  padding 2px
  width 50px
  color $highlight

.start
  text-align right
  margin-left -53px

.hover
  text-align center
  margin-left -27px

path.selection,
rect.selection
  fill transparent
  stroke $highlight
  stroke-width 1

path.segment
  fill transparent
  stroke $highlight
  stroke-width 1
  &.normal
    fill $primary
    stroke none
  &.outside
    fill $elevated
    stroke none
path.line
  fill transparent
  stroke-width 1
  &.normal
    stroke $primary
  &.outside
    stroke $elevated

text.label,
text.axis
  font-size 10px
  font-family monospace

text.label
  fill $highlight

text.axis
  fill $primary
  text-anchor middle
  alignment-baseline middle
text.axis.x
  text-anchor end
  transform rotate(-90deg)
text.axis.y
  text-anchor end

.radial text.axis.x
  transform none
  text-anchor middle
  alignment-baseline alphabetic
  transform translate(0, -5px)
.radial text.axis.y
  font-size 8px
  text-anchor middle
.radial .background text.axis.y
  stroke $background
  stroke-width 4

line.grid.x,
line.grid.y,
circle.grid.y
  fill none
  stroke $primary
  stroke-width 0.5
  stroke-dasharray 5
.axis_major line.grid.x,
.axis_major line.grid.y,
.axis_major circle.grid.y
  stroke-width 1
  stroke-dasharray none
.grid_inv line.grid
  stroke $background
  stroke-width 0.5
  stroke-dasharray 5
path.grid.x
  fill $primary

circle.scatter
  fill $primary

path.histogram,
rect.histogram
  fill $primary