yinyang.styl

// These widths must match minorWidth and majorWidth in yinyang.coffee
minorWidth = 0.05
majorWidth = 0.15

@media print
  .noprint
    display: none

.w-100
  width: 100%
.text-left
  text-align: left
.text-right
  text-align: right
.align-middle
  vertical-align: middle

svg
  width: 100%
  height: 100%
  touch-action: none
  user-select: none

  rect.background
    fill: #ddd
    stroke: none
  .grid
    line
      stroke-width: minorWidth
      stroke: #666
      stroke-linecap: square
    rect.border
      fill: none
      stroke-width: majorWidth
      stroke: black

  circle
    stroke-width: 0.05 // 1/20
    &.X
      fill: black
      stroke: white
    &.O
      fill: white
      stroke: black
  .user circle, .solution circle
    &.X
      stroke: black
    &.O
      stroke: white
  .dash circle
    fill: none
    stroke-dasharray: 0.1 0.1;

  .error
    fill: hsl(0,100%,50%)

  .target
    fill: purple
    cursor: pointer
    /.font-solved &
      cursor: default
      opacity: 0

svg.solved
  rect.border
    transition: stroke 1s
    stroke: purple