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