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