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   h4
   9     margin: 0 0 10px 0
  10   p
  11     margin-left: 0
  12     margin-right: 0
  13     padding: 0 3px
  14
  15 .warn
  16   padding: 3px
  17   color: red
  18   background-color: lightgrey
  19   font-weight: bold
  20
  21 .playing, button.playing:hover
  22   background-color: #ffcc99
  23
  24 .seek, button.seek:hover
  25   background-color: #cc99ff
  26
  27 // https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
  28 figure.diagram-container > .diagram
  29   display: block
  30   width: 45%
  31   min-width: 300px
  32   max-width: 800px
  33   margin-left: auto
  34   margin-right: auto
  35
  36 .topindicator
  37   position: relative
  38   border: 1px solid brown
  39
  40 .indic-left
  41   float: left
  42   margin: 0 0 10px 20px
  43
  44 .indic-right
  45   float: right
  46   margin: 0 20px 10px 0
  47
  48 .marginleft
  49   margin-left: 30px
  50
  51 .reserve-count
  52   padding-left: 40%
  53
  54 .reserve-div
  55   margin-bottom: 20px
  56
  57 .reserve-row-1
  58   margin-bottom: 15px
  59
  60 .connected
  61   background-color: green
  62
  63 .disconnected
  64   background-color: red
  65
  66 .settings-btn
  67   padding: 6px 7px 0 7px
  68
  69 .settings-btn-small
  70   padding: 0 3px
  71
  72 .white-turn
  73   background-color: white
  74
  75 .black-turn
  76   background-color: black
  77
  78 div.board
  79   float: left
  80   height: 0
  81   display: inline-block
  82   position: relative
  83
  84 div.board8
  85   width: 12.5%
  86   padding-bottom: 12.5%
  87
  88 div.board10
  89   width: 10%
  90   padding-bottom: 10%
  91
  92 div.board11
  93   width: 9.09%
  94   padding-bottom: 9.1%
  95
  96 .game
  97   clear: both
  98
  99 .game .board
 100   cursor: pointer
 101
 102 #choices
 103     margin-bottom: 10px
 104
 105 #choices
 106     margin: 0 auto 0 auto
 107     position: relative
 108     z-index: 300
 109     overflow-y: inherit
 110     background-color: rgba(0,0,0,0) //transparent
 111
 112 #choices img
 113     cursor: pointer
 114     background-color: #e6ee9c
 115
 116 #choices img:hover
 117     background-color: skyblue
 118
 119 img.choice-piece
 120     height: 0
 121     width: 90%
 122     padding: 5%
 123     height: 90%
 124
 125 img.piece, img.mark-square, img.choice-piece
 126     max-width: 100%
 127     height: auto
 128     display: block
 129
 130 img.mark-square
 131     opacity: 0.6
 132
 133 img.ghost
 134     position: absolute
 135     opacity: 0.4
 136     top: 0
 137
 138 img.piece
 139   width: 100%
 140
 141 img.mark-square
 142   width: 76%
 143   position: absolute
 144   top: 12%
 145   left: 12%
 146   opacity: .7
 147
 148 figure.diagram-container > figcaption
 149   display: block
 150   clear: both
 151   padding-top: 5px
 152
 153 .highlight
 154   background-color: #00cc66 !important
 155
 156 .incheck
 157   background-color: #cc3300 !important
 158
 159 .light-square.lichess
 160     background-color: #f0d9b5;
 161 .dark-square.lichess
 162     background-color: #b58863;
 163 .light-square.chesscom
 164     background-color: #e5e5ca;
 165 .dark-square.chesscom
 166     background-color: #6f8f57;
 167 .light-square.chesstempo
 168     background-color: #fdfdfd;
 169 .dark-square.chesstempo
 170     background-color: #88a0a8;
 171
 172 .light-square-diag
 173   background-color: #e5e5ca
 174 .dark-square-diag
 175   background-color: #6f8f57
 176
 177 p.boxed
 178   background-color: #FFCC66
 179   padding: 5px
 180
 181 .stageDelimiter
 182   color: purple
 183
 184 // To show (new) pieces, and/or there values...
 185 figure.showPieces > img
 186   width: 50px
 187
 188 figure.showPieces > figcaption
 189   color: #6C6C6C
 190
 191 figure.diagram-container
 192   margin: 15px 0 15px 0
 193   text-align: center
 194   width: 100%
 195   display: block
 196
 197 .section-title
 198   padding: 0
 199
 200 .section-title > h4
 201   padding: 5px
 202
 203 .section-content
 204   padding: 0 5px
 205
 206 ol, ul:not(.browser-default)
 207   padding-left: 20px
 208
 209 ul:not(.browser-default)
 210   margin-top: 5px
 211
 212 ul:not(.browser-default) > li
 213   list-style-type: disc
 214
 215 .rulesTitle
 216   font-weight: bold
 217   cursor: pointer
 218   padding: 3px;
 219   background-color: lightgrey
 220
 221 #fen-string
 222   margin-top: 0
 223
 224 #pgn-game
 225   margin-top: 0
 226   margin-bottom: 0
 227
 228 #downloadBtn
 229   display: block
 230   margin-left: auto
 231   margin-right: auto
 232
 233 #pgn-div > a
 234   display: none
 235
 236 #fen-div > p
 237   margin-left: 0
 238   margin-right: 0