Fixed bigger board variants. Still buggish
[vchess.git] / public / stylesheets / variant.sass
CommitLineData
1d184b4c
BA
1.container#variantPage
2 padding: 0
3
6a01d4f7
BA
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
01ca2adc
BA
17#pgn-div > a
18 display: none
19
20#pgn-div > p
21 cursor: pointer
22
e7cfa68d
BA
23.warn
24 padding: 3px
25 color: red
26 background-color: lightgrey
27 font-weight: bold
28
e64a4eff 29.playing, button.playing:hover
186516b8
BA
30 background-color: #ffcc99
31
e64a4eff 32.seek, button.seek:hover
186516b8
BA
33 background-color: #cc99ff
34
1d184b4c
BA
35// https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
36figure.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
bdb1f12d
BA
44.topindicator
45 position: relative
1d184b4c
BA
46 border: 1px solid brown
47
bdb1f12d
BA
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
1d184b4c
BA
56.connected
57 background-color: green
58
59.disconnected
60 background-color: red
61
3ed62725
BA
62.expert-switch
63 padding: 5px 10px
64
65.expert-mode, button.expert-mode:hover
66 background-color: #ffcc99
67
bdb1f12d
BA
68.white-turn
69 background-color: white
70
71.black-turn
72 background-color: black
73
1d184b4c
BA
74div.board
75 float: left
1d184b4c 76 height: 0
1d184b4c
BA
77 display: inline-block
78 position: relative
79
c94bc812
BA
80div.board8
81 width: 12.5%
82 padding-bottom: 12.5%
83
84div.board10
85 width: 10%
86 padding-bottom: 10%
87
88div.board11
8a196305 89 width: 9.09%
c94bc812
BA
90 padding-bottom: 9.1%
91
bdb1f12d
BA
92.game
93 clear: both
94
3066bb47
BA
95.game .board
96 cursor: pointer
97
1d184b4c
BA
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
115img.choice-piece
116 height: 0
117 width: 90%
118 padding: 5%
119 height: 90%
120
121img.piece, img.mark-square, img.choice-piece
122 max-width: 100%
123 height: auto
124 display: block
125
126img.mark-square
127 opacity: 0.6
128
129img.ghost
130 position: absolute
131 opacity: 0.4
132 top: 0
133
134img.piece
135 width: 100%
136
137img.mark-square
138 width: 76%
139 position: absolute
140 top: 12%
141 left: 12%
142 opacity: .7
143
144figure.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
e64a4eff
BA
155 background-color: #00cc66
156
157.incheck
158 background-color: #cc3300
1d184b4c
BA
159
160.light-square-diag
161 background-color: #e5e5ca
162.dark-square-diag
163 background-color: #6f8f57
164
165p.boxed
166 background-color: #FFCC66
167 padding: 5px
168
169.stageDelimiter
170 color: purple
171
172// To show (new) pieces, and/or there values...
173figure.showPieces > img
174 width: 50px
175
176figure.showPieces > figcaption
177 color: #6C6C6C
178
179figure.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
194ol, ul:not(.browser-default)
195 padding-left: 20px
196
197ul:not(.browser-default)
198 margin-top: 5px
199
200ul: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