public/stylesheets/variant.sass

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