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 .connected
  59   background-color: green
  60
  61 .disconnected
  62   background-color: red
  63
  64 .expert-switch
  65   padding: 5px 10px
  66
  67 .expert-mode, button.expert-mode:hover
  68   background-color: #ffcc99
  69
  70 .white-turn
  71   background-color: white
  72
  73 .black-turn
  74   background-color: black
  75
  76 div.board
  77   float: left
  78   height: 0
  79   display: inline-block
  80   position: relative
  81
  82 div.board8
  83   width: 12.5%
  84   padding-bottom: 12.5%
  85
  86 div.board10
  87   width: 10%
  88   padding-bottom: 10%
  89
  90 div.board11
  91   width: 9.09%
  92   padding-bottom: 9.1%
  93
  94 .game
  95   clear: both
  96
  97 .game .board
  98   cursor: pointer
  99
 100 #choices
 101     margin-bottom: 10px
 102
 103 #choices
 104     margin: 0 auto 0 auto
 105     position: relative
 106     z-index: 300
 107     overflow-y: inherit
 108     background-color: rgba(0,0,0,0) //transparent
 109
 110 #choices img
 111     cursor: pointer
 112     background-color: #e6ee9c
 113
 114 #choices img:hover
 115     background-color: skyblue
 116
 117 img.choice-piece
 118     height: 0
 119     width: 90%
 120     padding: 5%
 121     height: 90%
 122
 123 img.piece, img.mark-square, img.choice-piece
 124     max-width: 100%
 125     height: auto
 126     display: block
 127
 128 img.mark-square
 129     opacity: 0.6
 130
 131 img.ghost
 132     position: absolute
 133     opacity: 0.4
 134     top: 0
 135
 136 img.piece
 137   width: 100%
 138
 139 img.mark-square
 140   width: 76%
 141   position: absolute
 142   top: 12%
 143   left: 12%
 144   opacity: .7
 145
 146 figure.diagram-container > figcaption
 147   display: block
 148   clear: both
 149   padding-top: 5px
 150
 151 .light-square
 152   background-color: #f0d9b5
 153 .dark-square
 154   background-color: #b58863
 155
 156 .highlight
 157   background-color: #00cc66
 158
 159 .incheck
 160   background-color: #cc3300
 161
 162 .light-square-diag
 163   background-color: #e5e5ca
 164 .dark-square-diag
 165   background-color: #6f8f57
 166
 167 p.boxed
 168   background-color: #FFCC66
 169   padding: 5px
 170
 171 .stageDelimiter
 172   color: purple
 173
 174 // To show (new) pieces, and/or there values...
 175 figure.showPieces > img
 176   width: 50px
 177
 178 figure.showPieces > figcaption
 179   color: #6C6C6C
 180
 181 figure.diagram-container
 182   margin: 15px 0 15px 0
 183   text-align: center
 184   width: 100%
 185   display: block
 186
 187 .section-title
 188   padding: 0
 189
 190 .section-title > h4
 191   padding: 5px
 192
 193 .section-content
 194   padding: 5px
 195
 196 ol, ul:not(.browser-default)
 197   padding-left: 20px
 198
 199 ul:not(.browser-default)
 200   margin-top: 5px
 201
 202 ul:not(.browser-default) > li
 203   list-style-type: disc
 204
 205 .rulesTitle
 206   font-weight: bold
 207   cursor: pointer
 208   padding: 3px;
 209   background-color: lightgrey