0ea9af425bd82bb14b383a1975ca53907b9dd53c
[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 h4
9 margin: 0 0 10px 0
10 p
11 margin-left: 0
12 margin-right: 0
13 padding: 0 3px
14
15 #pgn-div > a
16 display: none
17
18 #pgn-div > p
19 cursor: pointer
20
21 #fen-div > p
22 margin-left: 0
23 margin-right: 0
24
25 .warn
26 padding: 3px
27 color: red
28 background-color: lightgrey
29 font-weight: bold
30
31 .playing, button.playing:hover
32 background-color: #ffcc99
33
34 .seek, button.seek:hover
35 background-color: #cc99ff
36
37 // https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
38 figure.diagram-container > .diagram
39 display: block
40 width: 45%
41 min-width: 300px
42 max-width: 800px
43 margin-left: auto
44 margin-right: auto
45
46 .topindicator
47 position: relative
48 border: 1px solid brown
49
50 .indic-left
51 float: left
52 margin: 0 0 10px 20px
53
54 .indic-right
55 float: right
56 margin: 0 20px 10px 0
57
58 .marginleft
59 margin-left: 30px
60
61 .reserve-count
62 padding-left: 40%
63
64 .reserve-div
65 margin-bottom: 20px
66
67 .reserve-row-1
68 margin-bottom: 15px
69
70 .connected
71 background-color: green
72
73 .disconnected
74 background-color: red
75
76 .settings-btn
77 padding: 6px 7px 0 7px
78
79 .white-turn
80 background-color: white
81
82 .black-turn
83 background-color: black
84
85 div.board
86 float: left
87 height: 0
88 display: inline-block
89 position: relative
90
91 div.board8
92 width: 12.5%
93 padding-bottom: 12.5%
94
95 div.board10
96 width: 10%
97 padding-bottom: 10%
98
99 div.board11
100 width: 9.09%
101 padding-bottom: 9.1%
102
103 .game
104 clear: both
105
106 .game .board
107 cursor: pointer
108
109 #choices
110 margin-bottom: 10px
111
112 #choices
113 margin: 0 auto 0 auto
114 position: relative
115 z-index: 300
116 overflow-y: inherit
117 background-color: rgba(0,0,0,0) //transparent
118
119 #choices img
120 cursor: pointer
121 background-color: #e6ee9c
122
123 #choices img:hover
124 background-color: skyblue
125
126 img.choice-piece
127 height: 0
128 width: 90%
129 padding: 5%
130 height: 90%
131
132 img.piece, img.mark-square, img.choice-piece
133 max-width: 100%
134 height: auto
135 display: block
136
137 img.mark-square
138 opacity: 0.6
139
140 img.ghost
141 position: absolute
142 opacity: 0.4
143 top: 0
144
145 img.piece
146 width: 100%
147
148 img.mark-square
149 width: 76%
150 position: absolute
151 top: 12%
152 left: 12%
153 opacity: .7
154
155 figure.diagram-container > figcaption
156 display: block
157 clear: both
158 padding-top: 5px
159
160 .highlight
161 background-color: #00cc66 !important
162
163 .incheck
164 background-color: #cc3300 !important
165
166 .light-square.lichess
167 background-color: #f0d9b5;
168 .dark-square.lichess
169 background-color: #b58863;
170 .light-square.chesscom
171 background-color: #e5e5ca;
172 .dark-square.chesscom
173 background-color: #6f8f57;
174 .light-square.chesstempo
175 background-color: #fdfdfd;
176 .dark-square.chesstempo
177 background-color: #88a0a8;
178
179 .light-square-diag
180 background-color: #e5e5ca
181 .dark-square-diag
182 background-color: #6f8f57
183
184 p.boxed
185 background-color: #FFCC66
186 padding: 5px
187
188 .stageDelimiter
189 color: purple
190
191 // To show (new) pieces, and/or there values...
192 figure.showPieces > img
193 width: 50px
194
195 figure.showPieces > figcaption
196 color: #6C6C6C
197
198 figure.diagram-container
199 margin: 15px 0 15px 0
200 text-align: center
201 width: 100%
202 display: block
203
204 .section-title
205 padding: 0
206
207 .section-title > h4
208 padding: 5px
209
210 .section-content
211 padding: 5px
212
213 ol, ul:not(.browser-default)
214 padding-left: 20px
215
216 ul:not(.browser-default)
217 margin-top: 5px
218
219 ul:not(.browser-default) > li
220 list-style-type: disc
221
222 .rulesTitle
223 font-weight: bold
224 cursor: pointer
225 padding: 3px;
226 background-color: lightgrey