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