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