public/stylesheets/variant.sass

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