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, button.playing:hover
  11   background-color: #ffcc99
  12
  13 .seek, button.seek:hover
  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: #00cc66
 107
 108 .incheck
 109   background-color: #cc3300
 110
 111 .light-square-diag
 112   background-color: #e5e5ca
 113 .dark-square-diag
 114   background-color: #6f8f57
 115
 116 p.boxed
 117   background-color: #FFCC66
 118   padding: 5px
 119
 120 .stageDelimiter
 121   color: purple
 122
 123 // To show (new) pieces, and/or there values...
 124 figure.showPieces > img
 125   width: 50px
 126
 127 figure.showPieces > figcaption
 128   color: #6C6C6C
 129
 130 figure.diagram-container
 131   margin: 15px 0 15px 0
 132   text-align: center
 133   width: 100%
 134   display: block
 135
 136 .section-title
 137   padding: 0
 138
 139 .section-title > h4
 140   padding: 5px
 141
 142 .section-content
 143   padding: 5px
 144
 145 ol, ul:not(.browser-default)
 146   padding-left: 20px
 147
 148 ul:not(.browser-default)
 149   margin-top: 5px
 150
 151 ul:not(.browser-default) > li
 152   list-style-type: disc
 153
 154 .rulesTitle
 155   font-weight: bold
 156   cursor: pointer
 157   padding: 3px;
 158   background-color: lightgrey