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