public/stylesheets/variant.sass

   1 // Menu:
   2
   3 #menuBar
   4   background: linear-gradient(#e66465, #9198e5)
   5   height: 29px
   6   margin-bottom: 10px
   7   @media screen and (max-width: 767px)
   8     height: 100%
   9     margin-bottom: 0
  10   @media screen and (min-width: 768px)
  11     width: 100%
  12     overflow: hidden
  13
  14 a#homeLink
  15   margin-left: 10px
  16   margin-top: 2px
  17   color: black
  18   display: inline-block
  19   @media screen and (max-width: 767px)
  20     display: block
  21     margin: 5px 0 0 12px
  22
  23 .info-container
  24   display: inline-block
  25   vertical-align: top
  26   padding: 0
  27   box-sizing: border-box
  28   a
  29     text-decoration: none
  30     color: black
  31   a, p
  32     display: inline-block
  33     padding: 0
  34     border: 1px solid black;
  35     margin: 1px 0 0 15px
  36     @media screen and (max-width: 767px)
  37       margin-top: 10px
  38       display: block
  39
  40 #helpMenu
  41   @media screen and (min-width: 768px)
  42     float: right
  43   .info-container
  44     p
  45       margin: 1px 0 0 15px
  46
  47 #flagMenu
  48   @media screen and (min-width: 768px)
  49     margin-top: 1px
  50     float: right
  51   margin: 0 15px
  52   @media screen and (max-width: 767px)
  53     margin: 25px 5px 0 15px
  54   img
  55     display: inline-block
  56     margin: 0
  57     height: 25px
  58
  59 label.drawer-toggle
  60   padding: 0
  61   &::before
  62     font-size: 2em;
  63     max-height: 32px;
  64     top: -7px;
  65     left: 5px
  66
  67 // Game section:
  68
  69 button.play
  70   height: 24px
  71   margin: 0
  72   padding: 0 10px 24px 10px
  73   box-sizing: border-box
  74   border: 1px solid brown
  75 button.play.spaceleft
  76   margin-left: 15px
  77 button.play.spaceright
  78   margin-right: 15px
  79
  80 .aboveboard-wrapper
  81   width: 80vh
  82   margin: 0 auto
  83   @media screen and (max-width: 767px)
  84     width: 100%
  85     margin: 0
  86
  87 button.above-board
  88   margin-left: 15px
  89   margin-right: 15px
  90
  91 i.material-icons
  92   font-size: 24px
  93
  94 .indic-left
  95   border: 1px solid brown
  96   float: left
  97   margin: 0 0 var(--universal-margin) 10vh
  98   @media screen and (max-width: 767px)
  99     margin-left: 20px
 100
 101 .indic-right
 102   border: 1px solid brown
 103   float: right
 104   margin: 0 10vh var(--universal-margin) 0
 105   @media screen and (max-width: 767px)
 106     margin-right: 20px
 107
 108 .my-chatmsg
 109   color: black
 110
 111 .opp-chatmsg
 112   color: blue
 113
 114 // TODO: this fix is not good (button height 0 if chat overflow window height)
 115 #sendChatBtn
 116   min-height: 42px
 117
 118 .connected
 119   background-color: green
 120
 121 .disconnected
 122   background-color: red
 123
 124 .white-turn
 125   background-color: white
 126
 127 .black-turn
 128   background-color: black
 129
 130 button.playing
 131   background-color: #ffcc99
 132   &:hover
 133     background-color: #ffcc99
 134
 135 button.seek
 136   background-color: #cc99ff
 137   &:hover
 138     background-color: #cc99ff
 139
 140 .game.reserve-div
 141   margin-bottom: 18px
 142
 143 .reserve-count
 144   padding-left: 40%
 145
 146 .reserve-row-1
 147   margin-bottom: 15px
 148
 149 div.board
 150   float: left
 151   height: 0
 152   display: inline-block
 153   position: relative
 154
 155 div.board8
 156   width: 12.5%
 157   padding-bottom: 12.5%
 158
 159 div.board8-reserve
 160   width: 10%
 161   padding-bottom: 10%
 162
 163 div.board10
 164   width: 10%
 165   padding-bottom: 10%
 166
 167 div.board11
 168   width: 9.09%
 169   padding-bottom: 9.1%
 170
 171 // NOTE: no variants with reserve of size != 8
 172
 173 .game
 174   width: 80vh
 175   margin: 0 auto
 176   .board
 177     cursor: pointer
 178   @media screen and (max-width: 767px)
 179     width: 100%
 180     margin: 0
 181
 182 #choices
 183   margin: 0 auto 0 auto
 184   position: relative
 185   z-index: 300
 186   overflow-y: inherit
 187   background-color: rgba(0,0,0,0)
 188   img
 189     cursor: pointer
 190     background-color: #e6ee9c
 191     &:hover
 192       background-color: skyblue
 193     .choice-piece
 194       width: 90%
 195       max-width: 100%
 196       height: auto
 197       display: block
 198
 199 img.piece
 200   width: 100%
 201
 202 img.piece, img.mark-square
 203   max-width: 100%
 204   height: auto
 205   display: block
 206
 207 img.mark-square
 208   opacity: 0.6
 209   width: 76%
 210   position: absolute
 211   top: 12%
 212   left: 12%
 213   opacity: .7
 214
 215 img.ghost
 216   position: absolute
 217   opacity: 0.4
 218   top: 0
 219
 220 .highlight
 221   background-color: #00cc66 !important
 222
 223 .incheck
 224   background-color: #cc3300 !important
 225
 226 .light-square.lichess
 227   background-color: #f0d9b5;
 228 .dark-square.lichess
 229   background-color: #b58863;
 230
 231 .light-square.chesscom
 232   background-color: #e5e5ca;
 233 .dark-square.chesscom
 234   background-color: #6f8f57;
 235
 236 .light-square.chesstempo
 237   background-color: #fdfdfd;
 238 .dark-square.chesstempo
 239   background-color: #88a0a8;
 240
 241 .light-square-diag
 242   background-color: #e5e5ca
 243 .dark-square-diag
 244   background-color: #6f8f57
 245
 246 #fen-string
 247   margin-top: 0
 248
 249 #pgn-game
 250   margin-top: 0
 251   margin-bottom: 0
 252
 253 #downloadBtn
 254   display: block
 255   margin-left: auto
 256   margin-right: auto
 257
 258 #pgn-div > a
 259   display: none
 260
 261 #fen-div > p
 262   margin-left: 0
 263   margin-right: 0
 264
 265 #modal-eog+div .card
 266   overflow: hidden
 267
 268 #actions
 269   margin: 10px 0
 270
 271 // Rules section:
 272
 273 .warn
 274   padding: 3px
 275   color: red
 276   background-color: lightgrey
 277   font-weight: bold
 278
 279 figure.diagram-container
 280   margin: 15px 0 15px 0
 281   text-align: center
 282   width: 100%
 283   display: block
 284   .diagram
 285     display: block
 286     width: 40%
 287     min-width: 240px
 288     max-width: 800px
 289     margin-left: auto
 290     margin-right: auto
 291   .diag12
 292     float: left
 293     margin-left: calc(10% - 20px)
 294     margin-right: 40px
 295     @media screen and (max-width: 500px)
 296       float: none
 297       margin: 0 auto 10px auto
 298   .diag22
 299     float: left
 300     margin-right: calc(10% - 20px)
 301     @media screen and (max-width: 500px)
 302       float: none
 303       margin: 0 auto
 304   figcaption
 305     display: block
 306     clear: both
 307     padding-top: 5px
 308
 309 p.boxed
 310   background-color: #FFCC66
 311   padding: 5px
 312
 313 .stageDelimiter
 314   color: purple
 315
 316 // To show (new) pieces, and/or there values...
 317 figure.showPieces > img
 318   width: 50px
 319
 320 figure.showPieces > figcaption
 321   color: #6C6C6C
 322
 323 .section-title
 324   padding: 0
 325
 326 .section-title > h4
 327   padding: 5px
 328
 329 ol, ul:not(.browser-default)
 330   padding-left: 20px
 331
 332 ul:not(.browser-default)
 333   margin-top: 5px
 334
 335 ul:not(.browser-default) > li
 336   list-style-type: disc
 337
 338 // Problems section:
 339
 340 .newproblem-form input, .newproblem-form textarea
 341   width: 100%
 342
 343 .emphasis
 344   font-style: italic
 345
 346 #newpbInstructions
 347   margin-bottom: var(--universal-margin);
 348
 349 .center-btn
 350   margin-left: 40%
 351
 352 //TODO?
 353 .center-inline
 354   text-align: center
 355 .center-block
 356   margin-left: auto
 357   margin-right: auto
 358
 359 .mistake-newproblem
 360   color: #663300
 361
 362 #problem-solution
 363   display: none
 364
 365 #solution-div h3
 366   background-color: lightgrey
 367   padding: 3px 5px
 368
 369 .newproblem-form, .newproblem-preview
 370   max-width: 90%
 371
 372 #problemControls
 373   width: 75%
 374   margin: 0 auto
 375   @media screen and (max-width: 767px)
 376     width: 100%
 377     margin: 0
 378
 379 .problem
 380   margin: 10px 0