public/stylesheets/variant.sass

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