public/stylesheets/variant.sass

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