public/stylesheets/variant.sass

   1 .container#variantPage
   2   padding: 0
   3
   4 //.container#variantPage > .row > div
   5 @media screen and (max-width: 767px)
   6   .col-sm-12
   7     padding: 0
   8   h4
   9     margin: 0 0 10px 0
  10   p
  11     margin-left: 0
  12     margin-right: 0
  13     padding: 0 3px
  14
  15 .warn
  16   padding: 3px
  17   color: red
  18   background-color: lightgrey
  19   font-weight: bold
  20
  21 .playing, button.playing:hover
  22   background-color: #ffcc99
  23
  24 .seek, button.seek:hover
  25   background-color: #cc99ff
  26
  27 figure.diagram-container
  28   margin: 15px 0 15px 0
  29   text-align: center
  30   width: 100%
  31   display: block
  32
  33 // https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
  34 figure.diagram-container > .diagram
  35   display: block
  36   width: 40%
  37   min-width: 300px
  38   max-width: 800px
  39   margin-left: auto
  40   margin-right: auto
  41
  42 figure.diagram-container > .diagram2
  43   display: block
  44   float: left
  45   width: 40%
  46   min-width: 300px
  47   max-width: 800px
  48   margin-right: 40px
  49   margin-bottom: 10px
  50
  51 figure.diagram-container > figcaption
  52   display: block
  53   clear: both
  54   padding-top: 5px
  55
  56 .topindicator
  57   position: relative
  58   border: 1px solid brown
  59
  60 .indic-left
  61   float: left
  62   margin: 0 0 10px 20px
  63
  64 .indic-right
  65   float: right
  66   margin: 0 20px 10px 0
  67
  68 .marginleft
  69   margin-left: 30px
  70
  71 .reserve-count
  72   padding-left: 40%
  73
  74 .reserve-div
  75   margin-bottom: 20px
  76
  77 .reserve-row-1
  78   margin-bottom: 15px
  79
  80 .connected
  81   background-color: green
  82
  83 .disconnected
  84   background-color: red
  85
  86 .settings-btn
  87   padding: 6px 7px 0 7px
  88
  89 .settings-btn-small
  90   padding: 0 3px
  91
  92 .white-turn
  93   background-color: white
  94
  95 .black-turn
  96   background-color: black
  97
  98 div.board
  99   float: left
 100   height: 0
 101   display: inline-block
 102   position: relative
 103
 104 div.board8
 105   width: 12.5%
 106   padding-bottom: 12.5%
 107
 108 div.board10
 109   width: 10%
 110   padding-bottom: 10%
 111
 112 div.board11
 113   width: 9.09%
 114   padding-bottom: 9.1%
 115
 116 .game
 117   clear: both
 118
 119 .game .board
 120   cursor: pointer
 121
 122 #choices
 123     margin-bottom: 10px
 124
 125 #choices
 126     margin: 0 auto 0 auto
 127     position: relative
 128     z-index: 300
 129     overflow-y: inherit
 130     background-color: rgba(0,0,0,0) //transparent
 131
 132 #choices img
 133     cursor: pointer
 134     background-color: #e6ee9c
 135
 136 #choices img:hover
 137     background-color: skyblue
 138
 139 img.choice-piece
 140     height: 0
 141     width: 90%
 142     padding: 5%
 143     height: 90%
 144
 145 img.piece, img.mark-square, img.choice-piece
 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 .section-content
 213   padding: 0 5px
 214
 215 ol, ul:not(.browser-default)
 216   padding-left: 20px
 217
 218 ul:not(.browser-default)
 219   margin-top: 5px
 220
 221 ul:not(.browser-default) > li
 222   list-style-type: disc
 223
 224 .variantpage-title
 225   font-weight: bold
 226   cursor: pointer
 227   padding: 3px
 228   margin-left: 0
 229   margin-right: 0
 230   background-color: lightgrey
 231
 232 #fen-string
 233   margin-top: 0
 234
 235 #pgn-game
 236   margin-top: 0
 237   margin-bottom: 0
 238
 239 #downloadBtn
 240   display: block
 241   margin-left: auto
 242   margin-right: auto
 243
 244 #pgn-div > a
 245   display: none
 246
 247 #fen-div > p
 248   margin-left: 0
 249   margin-right: 0
 250
 251 .newproblem-form input, .newproblem-form textarea
 252   width: 100%
 253
 254 .emphasis
 255   font-style: italic
 256
 257 #newpbInstructions
 258   margin-bottom: var(--universal-margin);
 259
 260 .center-btn
 261   margin-left: 40%
 262
 263 //TODO?
 264 .center-inline
 265   text-align: center
 266 .center-block
 267   margin-left: auto
 268   margin-right: auto
 269
 270 .mistake-newproblem
 271   color: #663300
 272
 273 #problem-solution
 274   display: none
 275
 276 .topspace
 277   margin-top: 15px
 278
 279 .problem
 280   cursor: pointer
 281   margin-bottom: 15px
 282
 283 #solution-div h3
 284   cursor: pointer
 285
 286 .newproblem-form, .newproblem-preview
 287   max-width: 90%
 288
 289 .clickable
 290   cursor: pointer
 291
 292 .name-connected
 293   color: green
 294
 295 .name-disconnected
 296   color: red
 297
 298 .clearer
 299   clear: both
 300
 301 .my-chatmsg
 302   color: black
 303
 304 .opp-chatmsg
 305   color: blue