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