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