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 .expert-switch
  57   padding: 5px 10px
  58
  59 .expert-mode, button.expert-mode:hover
  60   background-color: #ffcc99
  61
  62 .white-turn
  63   background-color: white
  64
  65 .black-turn
  66   background-color: black
  67
  68 // TODO: div.board, board9, board10, board11, board12
  69 div.board
  70   float: left
  71   width: 12.5%
  72   height: 0
  73   padding-bottom: 12.5%
  74   display: inline-block
  75   position: relative
  76
  77 .game
  78   clear: both
  79
  80 .game .board
  81   cursor: pointer
  82
  83 #choices
  84     margin-bottom: 10px
  85
  86 #choices
  87     margin: 0 auto 0 auto
  88     position: relative
  89     z-index: 300
  90     overflow-y: inherit
  91     background-color: rgba(0,0,0,0) //transparent
  92
  93 #choices img
  94     cursor: pointer
  95     background-color: #e6ee9c
  96
  97 #choices img:hover
  98     background-color: skyblue
  99
 100 img.choice-piece
 101     height: 0
 102     width: 90%
 103     padding: 5%
 104     height: 90%
 105
 106 img.piece, img.mark-square, img.choice-piece
 107     max-width: 100%
 108     height: auto
 109     display: block
 110
 111 img.mark-square
 112     opacity: 0.6
 113
 114 img.ghost
 115     position: absolute
 116     opacity: 0.4
 117     top: 0
 118
 119 img.piece
 120   width: 100%
 121
 122 img.mark-square
 123   width: 76%
 124   position: absolute
 125   top: 12%
 126   left: 12%
 127   opacity: .7
 128
 129 figure.diagram-container > figcaption
 130   display: block
 131   clear: both
 132   padding-top: 5px
 133
 134 .light-square
 135   background-color: #f0d9b5
 136 .dark-square
 137   background-color: #b58863
 138
 139 .highlight
 140   background-color: #00cc66
 141
 142 .incheck
 143   background-color: #cc3300
 144
 145 .light-square-diag
 146   background-color: #e5e5ca
 147 .dark-square-diag
 148   background-color: #6f8f57
 149
 150 p.boxed
 151   background-color: #FFCC66
 152   padding: 5px
 153
 154 .stageDelimiter
 155   color: purple
 156
 157 // To show (new) pieces, and/or there values...
 158 figure.showPieces > img
 159   width: 50px
 160
 161 figure.showPieces > figcaption
 162   color: #6C6C6C
 163
 164 figure.diagram-container
 165   margin: 15px 0 15px 0
 166   text-align: center
 167   width: 100%
 168   display: block
 169
 170 .section-title
 171   padding: 0
 172
 173 .section-title > h4
 174   padding: 5px
 175
 176 .section-content
 177   padding: 5px
 178
 179 ol, ul:not(.browser-default)
 180   padding-left: 20px
 181
 182 ul:not(.browser-default)
 183   margin-top: 5px
 184
 185 ul:not(.browser-default) > li
 186   list-style-type: disc
 187
 188 .rulesTitle
 189   font-weight: bold
 190   cursor: pointer
 191   padding: 3px;
 192   background-color: lightgrey