public/stylesheets/variant.sass

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