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