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.board4
  85   width: 25%
  86   padding-bottom: 25%
  87
  88 div.board8
  89   width: 12.5%
  90   padding-bottom: 12.5%
  91
  92 div.board10
  93   width: 10%
  94   padding-bottom: 10%
  95
  96 div.board11
  97   width: 9.09%
  98   padding-bottom: 9.1%
  99
 100 .game
 101   clear: both
 102
 103 .game .board
 104   cursor: pointer
 105
 106 #choices
 107     margin-bottom: 10px
 108
 109 #choices
 110     margin: 0 auto 0 auto
 111     position: relative
 112     z-index: 300
 113     overflow-y: inherit
 114     background-color: rgba(0,0,0,0) //transparent
 115
 116 #choices img
 117     cursor: pointer
 118     background-color: #e6ee9c
 119
 120 #choices img:hover
 121     background-color: skyblue
 122
 123 img.choice-piece
 124     height: 0
 125     width: 90%
 126     padding: 5%
 127     height: 90%
 128
 129 img.piece, img.mark-square, img.choice-piece
 130     max-width: 100%
 131     height: auto
 132     display: block
 133
 134 img.mark-square
 135     opacity: 0.6
 136
 137 img.ghost
 138     position: absolute
 139     opacity: 0.4
 140     top: 0
 141
 142 img.piece
 143   width: 100%
 144
 145 img.mark-square
 146   width: 76%
 147   position: absolute
 148   top: 12%
 149   left: 12%
 150   opacity: .7
 151
 152 figure.diagram-container > figcaption
 153   display: block
 154   clear: both
 155   padding-top: 5px
 156
 157 .highlight
 158   background-color: #00cc66 !important
 159
 160 .incheck
 161   background-color: #cc3300 !important
 162
 163 .light-square.lichess
 164     background-color: #f0d9b5;
 165 .dark-square.lichess
 166     background-color: #b58863;
 167 .light-square.chesscom
 168     background-color: #e5e5ca;
 169 .dark-square.chesscom
 170     background-color: #6f8f57;
 171 .light-square.chesstempo
 172     background-color: #fdfdfd;
 173 .dark-square.chesstempo
 174     background-color: #88a0a8;
 175
 176 .light-square-diag
 177   background-color: #e5e5ca
 178 .dark-square-diag
 179   background-color: #6f8f57
 180
 181 p.boxed
 182   background-color: #FFCC66
 183   padding: 5px
 184
 185 .stageDelimiter
 186   color: purple
 187
 188 // To show (new) pieces, and/or there values...
 189 figure.showPieces > img
 190   width: 50px
 191
 192 figure.showPieces > figcaption
 193   color: #6C6C6C
 194
 195 figure.diagram-container
 196   margin: 15px 0 15px 0
 197   text-align: center
 198   width: 100%
 199   display: block
 200
 201 .section-title
 202   padding: 0
 203
 204 .section-title > h4
 205   padding: 5px
 206
 207 .section-content
 208   padding: 0 5px
 209
 210 ol, ul:not(.browser-default)
 211   padding-left: 20px
 212
 213 ul:not(.browser-default)
 214   margin-top: 5px
 215
 216 ul:not(.browser-default) > li
 217   list-style-type: disc
 218
 219 .rulesTitle
 220   font-weight: bold
 221   cursor: pointer
 222   padding: 3px;
 223   background-color: lightgrey
 224
 225 #fen-string
 226   margin-top: 0
 227
 228 #pgn-game
 229   margin-top: 0
 230   margin-bottom: 0
 231
 232 #downloadBtn
 233   display: block
 234   margin-left: auto
 235   margin-right: auto
 236
 237 #pgn-div > a
 238   display: none
 239
 240 #fen-div > p
 241   margin-left: 0
 242   margin-right: 0