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