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 #pgn-div > a
  16   display: none
  17
  18 #pgn-div > p
  19   cursor: pointer
  20
  21 #fen-div > p
  22   margin-left: 0
  23   margin-right: 0
  24
  25 .warn
  26   padding: 3px
  27   color: red
  28   background-color: lightgrey
  29   font-weight: bold
  30
  31 .playing, button.playing:hover
  32   background-color: #ffcc99
  33
  34 .seek, button.seek:hover
  35   background-color: #cc99ff
  36
  37 // https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
  38 figure.diagram-container > .diagram
  39   display: block
  40   width: 45%
  41   min-width: 300px
  42   max-width: 800px
  43   margin-left: auto
  44   margin-right: auto
  45
  46 .topindicator
  47   position: relative
  48   border: 1px solid brown
  49
  50 .indic-left
  51   float: left
  52   margin: 0 0 10px 20px
  53
  54 .indic-right
  55   float: right
  56   margin: 0 20px 10px 0
  57
  58 .marginleft
  59   margin-left: 30px
  60
  61 .reserve-count
  62   padding-left: 40%
  63
  64 .reserve-div
  65   margin-bottom: 20px
  66
  67 .reserve-row-1
  68   margin-bottom: 15px
  69
  70 .connected
  71   background-color: green
  72
  73 .disconnected
  74   background-color: red
  75
  76 .settings-btn
  77   padding: 6px 7px 0 7px
  78
  79 .white-turn
  80   background-color: white
  81
  82 .black-turn
  83   background-color: black
  84
  85 div.board
  86   float: left
  87   height: 0
  88   display: inline-block
  89   position: relative
  90
  91 div.board8
  92   width: 12.5%
  93   padding-bottom: 12.5%
  94
  95 div.board10
  96   width: 10%
  97   padding-bottom: 10%
  98
  99 div.board11
 100   width: 9.09%
 101   padding-bottom: 9.1%
 102
 103 .game
 104   clear: both
 105
 106 .game .board
 107   cursor: pointer
 108
 109 #choices
 110     margin-bottom: 10px
 111
 112 #choices
 113     margin: 0 auto 0 auto
 114     position: relative
 115     z-index: 300
 116     overflow-y: inherit
 117     background-color: rgba(0,0,0,0) //transparent
 118
 119 #choices img
 120     cursor: pointer
 121     background-color: #e6ee9c
 122
 123 #choices img:hover
 124     background-color: skyblue
 125
 126 img.choice-piece
 127     height: 0
 128     width: 90%
 129     padding: 5%
 130     height: 90%
 131
 132 img.piece, img.mark-square, img.choice-piece
 133     max-width: 100%
 134     height: auto
 135     display: block
 136
 137 img.mark-square
 138     opacity: 0.6
 139
 140 img.ghost
 141     position: absolute
 142     opacity: 0.4
 143     top: 0
 144
 145 img.piece
 146   width: 100%
 147
 148 img.mark-square
 149   width: 76%
 150   position: absolute
 151   top: 12%
 152   left: 12%
 153   opacity: .7
 154
 155 figure.diagram-container > figcaption
 156   display: block
 157   clear: both
 158   padding-top: 5px
 159
 160 .highlight
 161   background-color: #00cc66 !important
 162
 163 .incheck
 164   background-color: #cc3300 !important
 165
 166 .light-square.lichess
 167     background-color: #f0d9b5;
 168 .dark-square.lichess
 169     background-color: #b58863;
 170 .light-square.chesscom
 171     background-color: #e5e5ca;
 172 .dark-square.chesscom
 173     background-color: #6f8f57;
 174 .light-square.chesstempo
 175     background-color: #fdfdfd;
 176 .dark-square.chesstempo
 177     background-color: #88a0a8;
 178
 179 .light-square-diag
 180   background-color: #e5e5ca
 181 .dark-square-diag
 182   background-color: #6f8f57
 183
 184 p.boxed
 185   background-color: #FFCC66
 186   padding: 5px
 187
 188 .stageDelimiter
 189   color: purple
 190
 191 // To show (new) pieces, and/or there values...
 192 figure.showPieces > img
 193   width: 50px
 194
 195 figure.showPieces > figcaption
 196   color: #6C6C6C
 197
 198 figure.diagram-container
 199   margin: 15px 0 15px 0
 200   text-align: center
 201   width: 100%
 202   display: block
 203
 204 .section-title
 205   padding: 0
 206
 207 .section-title > h4
 208   padding: 5px
 209
 210 .section-content
 211   padding: 5px
 212
 213 ol, ul:not(.browser-default)
 214   padding-left: 20px
 215
 216 ul:not(.browser-default)
 217   margin-top: 5px
 218
 219 ul:not(.browser-default) > li
 220   list-style-type: disc
 221
 222 .rulesTitle
 223   font-weight: bold
 224   cursor: pointer
 225   padding: 3px;
 226   background-color: lightgrey