public/stylesheets/variant.sass

   1 .container#variantPage
   2   padding: 0
   3
   4 // https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
   5 figure.diagram-container > .diagram
   6   display: block
   7   width: 45%
   8   min-width: 300px
   9   max-width: 800px
  10   margin-left: auto
  11   margin-right: auto
  12
  13 .connected, .disconnected
  14   width: 20px
  15   height: 20px
  16   margin: 0 auto 15px auto
  17   border: 1px solid brown
  18
  19 .connected
  20   background-color: green
  21
  22 .disconnected
  23   background-color: red
  24
  25 // TODO: div.board, board9, board10, board11, board12
  26 div.board
  27   float: left
  28   width: 12.5%
  29   height: 0
  30   padding-bottom: 12.5%
  31   display: inline-block
  32   position: relative
  33
  34 #choices
  35     margin-bottom: 10px
  36
  37 #choices
  38     margin: 0 auto 0 auto
  39     position: relative
  40     z-index: 300
  41     overflow-y: inherit
  42     background-color: rgba(0,0,0,0) //transparent
  43
  44 #choices img
  45     cursor: pointer
  46     background-color: #e6ee9c
  47
  48 #choices img:hover
  49     background-color: skyblue
  50
  51 img.choice-piece
  52     height: 0
  53     width: 90%
  54     padding: 5%
  55     height: 90%
  56
  57 img.piece, img.mark-square, img.choice-piece
  58     max-width: 100%
  59     height: auto
  60     display: block
  61
  62 img.mark-square
  63     opacity: 0.6
  64
  65 img.ghost
  66     position: absolute
  67     opacity: 0.4
  68     top: 0
  69
  70 img.piece
  71   width: 100%
  72
  73 img.mark-square
  74   width: 76%
  75   position: absolute
  76   top: 12%
  77   left: 12%
  78   opacity: .7
  79
  80 figure.diagram-container > figcaption
  81   display: block
  82   clear: both
  83   padding-top: 5px
  84
  85 .light-square
  86   background-color: #f0d9b5
  87 .dark-square
  88   background-color: #b58863
  89
  90 .highlight
  91   background-color: #00cc00
  92
  93 .light-square-diag
  94   background-color: #e5e5ca
  95 .dark-square-diag
  96   background-color: #6f8f57
  97
  98 p.boxed
  99   background-color: #FFCC66
 100   padding: 5px
 101
 102 .stageDelimiter
 103   color: purple
 104
 105 // To show (new) pieces, and/or there values...
 106 figure.showPieces > img
 107   width: 50px
 108
 109 figure.showPieces > figcaption
 110   color: #6C6C6C
 111
 112 figure.diagram-container
 113   margin: 15px 0 15px 0
 114   text-align: center
 115   width: 100%
 116   display: block
 117
 118 .section-title
 119   padding: 0
 120
 121 .section-title > h4
 122   padding: 5px
 123
 124 .section-content
 125   padding: 5px
 126
 127 ol, ul:not(.browser-default)
 128   padding-left: 20px
 129
 130 ul:not(.browser-default)
 131   margin-top: 5px
 132
 133 ul:not(.browser-default) > li
 134   list-style-type: disc
 135
 136 .rulesTitle
 137   font-weight: bold
 138   cursor: pointer
 139   padding: 3px;
 140   background-color: lightgrey