Left: | ||
Right: |
LEFT | RIGHT |
---|---|
1 body | 1 body |
2 { | 2 { |
3 font-family: Arial, Helvetica, sans-serif; | 3 font-family: Arial, Helvetica, sans-serif; |
4 font-size: 20px; | 4 font-size: 20px; |
5 background: repeating-linear-gradient(0deg, #F8F6F5, #F6F4F2 50%, #FCFBF9); | 5 background: repeating-linear-gradient(0deg, #F8F6F5, #F6F4F2 50%, #FCFBF9); |
6 background: -webkit-repeating-linear-gradient(0deg, #F5F4F3, #FAF9F8 50%, #F5F 4F3); | 6 background: -webkit-repeating-linear-gradient(0deg, #F5F4F3, #FAF9F8 50%, #F5F 4F3); |
7 background-size: 5px 5px; | 7 background-size: 5px 5px; |
8 max-width: 800px; | 8 max-width: 800px; |
9 margin: auto; | 9 margin: auto; |
10 line-height: 1.5; | 10 line-height: 1.5; |
(...skipping 118 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
129 -webkit-box-align: center; | 129 -webkit-box-align: center; |
130 | 130 |
131 display: box; | 131 display: box; |
132 box-orient: horizontal; | 132 box-orient: horizontal; |
133 box-pack: center; | 133 box-pack: center; |
134 box-align: center; | 134 box-align: center; |
135 } | 135 } |
136 | 136 |
137 #share-popup | 137 #share-popup |
138 { | 138 { |
139 width: 550px; | |
140 height: 550px; | |
141 border: none; | 139 border: none; |
142 } | 140 } |
143 | 141 |
144 #glass-pane, #share-popup | 142 #glass-pane, #share-popup |
145 { | 143 { |
146 visibility: hidden; | 144 visibility: hidden; |
147 opacity: 0; | 145 opacity: 0; |
148 -webkit-transition-property: opacity, visibility; | 146 -webkit-transition-property: opacity, visibility; |
149 transition-property: opactiy, visibility; | 147 transition-property: opacity, visibility; |
Wladimir Palant
2012/10/25 10:45:03
opactiy => opacity?
Felix Dahlke
2012/10/25 12:00:51
Yes, ouch.
| |
150 } | 148 } |
151 | 149 |
152 #glass-pane | 150 #glass-pane |
153 { | 151 { |
154 -webkit-transition-duration: 0.2s; | 152 -webkit-transition-duration: 0.2s; |
155 transition-duration: 0.2s; | 153 transition-duration: 0.2s; |
Wladimir Palant
2012/10/25 10:45:03
Maybe merge this with the #glass-pane rules above?
Felix Dahlke
2012/10/25 12:00:51
This is actually what I came up with fine tuning t
| |
156 } | 154 } |
157 | 155 |
158 #share-popup | 156 #share-popup |
159 { | 157 { |
160 -webkit-transition-duration: 0.1s; | 158 -webkit-transition-duration: 0.1s; |
161 transition-duration: 0.1s; | 159 transition-duration: 0.1s; |
162 } | 160 } |
Wladimir Palant
2012/10/25 10:45:03
Maybe merge this with the #share-popup rules above
Felix Dahlke
2012/10/25 12:00:51
Same as above.
| |
163 | 161 |
164 #glass-pane.visible, #share-popup.visible | 162 #glass-pane.visible, #share-popup.visible |
165 { | 163 { |
166 visibility: visible; | 164 visibility: visible; |
167 opacity: 1; | 165 opacity: 1; |
168 } | 166 } |
169 | 167 |
170 #share-popup.visible | 168 #share-popup.visible |
171 { | 169 { |
172 -webkit-transition-duration: 0.15s; | 170 -webkit-transition-duration: 0.15s; |
(...skipping 17 matching lines...) Expand all Loading... | |
190 } | 188 } |
191 } | 189 } |
192 | 190 |
193 @media (max-height: 700px) | 191 @media (max-height: 700px) |
194 { | 192 { |
195 body | 193 body |
196 { | 194 { |
197 font-size: 16px; | 195 font-size: 16px; |
198 } | 196 } |
199 } | 197 } |
LEFT | RIGHT |