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