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 #choices
  41     margin-bottom: 10px
  42
  43 #choices
  44     margin: 0 auto 0 auto
  45     position: relative
  46     z-index: 300
  47     overflow-y: inherit
  48     background-color: rgba(0,0,0,0) //transparent
  49
  50 #choices img
  51     cursor: pointer
  52     background-color: #e6ee9c
  53
  54 #choices img:hover
  55     background-color: skyblue
  56
  57 img.choice-piece
  58     height: 0
  59     width: 90%
  60     padding: 5%
  61     height: 90%
  62
  63 img.piece, img.mark-square, img.choice-piece
  64     max-width: 100%
  65     height: auto
  66     display: block
  67
  68 img.mark-square
  69     opacity: 0.6
  70
  71 img.ghost
  72     position: absolute
  73     opacity: 0.4
  74     top: 0
  75
  76 img.piece
  77   width: 100%
  78
  79 img.mark-square
  80   width: 76%
  81   position: absolute
  82   top: 12%
  83   left: 12%
  84   opacity: .7
  85
  86 figure.diagram-container > figcaption
  87   display: block
  88   clear: both
  89   padding-top: 5px
  90
  91 .light-square
  92   background-color: #f0d9b5
  93 .dark-square
  94   background-color: #b58863
  95
  96 .highlight
  97   background-color: #00cc00
  98
  99 .light-square-diag
 100   background-color: #e5e5ca
 101 .dark-square-diag
 102   background-color: #6f8f57
 103
 104 p.boxed
 105   background-color: #FFCC66
 106   padding: 5px
 107
 108 .stageDelimiter
 109   color: purple
 110
 111 // To show (new) pieces, and/or there values...
 112 figure.showPieces > img
 113   width: 50px
 114
 115 figure.showPieces > figcaption
 116   color: #6C6C6C
 117
 118 figure.diagram-container
 119   margin: 15px 0 15px 0
 120   text-align: center
 121   width: 100%
 122   display: block
 123
 124 .section-title
 125   padding: 0
 126
 127 .section-title > h4
 128   padding: 5px
 129
 130 .section-content
 131   padding: 5px
 132
 133 ol, ul:not(.browser-default)
 134   padding-left: 20px
 135
 136 ul:not(.browser-default)
 137   margin-top: 5px
 138
 139 ul:not(.browser-default) > li
 140   list-style-type: disc
 141
 142 .rulesTitle
 143   font-weight: bold
 144   cursor: pointer
 145   padding: 3px;
 146   background-color: lightgrey