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