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