cpedit.styl

// Side-by-side layout of menu and GUI
body
  display: flex
  margin: 0px
  height: 100vh

#menu
  max-width: 50%
  flex: 0
  display: flex
  flex-direction: column
  min-width: min-content
  overflow-x: hidden
  overflow-y: auto
  background: black
  color: white
  a:link
    color: white
  a:hover
    color: yellow

  hr
    width: 100%

#interface
  flex: 1

.input, .multinput
  font-size: large
  input
    font-size: large
  white-space: nowrap
  padding: 5px 10px 5px 5px
  .input
    padding: 2px 0px
  .gap
    min-width: 5px
    flex: 0

  &:hover
    color: yellow
    background: gray

  label, span
    display: block
    flex: 1

  input[type='button'], td button
    width: 100%
  input[type='text']
    width: 5em
    flex: 1

table
  color: inherit
  font: inherit
  td
    padding: 0

.input, .row
  display: flex
  align-items: center

.clickable, .clickable button, .clickable input, .clickable label, .input button
  cursor: pointer

.number
  text-align: center

// Drawing style

svg
  width: 100%
  height: 100%

line
  stroke-linecap: round

.grid line
  stroke: #dddddd
  stroke-width: 0.05

.crease line, .drag line
  stroke-width: 0.1

  &.B // boundary
    stroke: black
  &.M // mountain
    stroke: red
  &.V // valley
    stroke: blue
  &.U // unfolded
    stroke: gray
  &.C // cut
    stroke: green

  &.drag
    stroke: purple
    stroke-width: 0.25

.drag circle
  fill: purple

.vertex circle.drag
  fill: purple
  stroke: purple
  stroke-width: 0.1