public/stylesheets/variant.sass

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