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