OLD | NEW |
1 /* Copyright 2014 The Chromium Authors. All rights reserved. | 1 /* Copyright 2014 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 /* Set the global 'box-sizing' state to 'border-box'. | 5 /* Set the global 'box-sizing' state to 'border-box'. |
6 * *::after and *::before used to select pseudo-elements not selectable by *. */ | 6 * *::after and *::before used to select pseudo-elements not selectable by *. */ |
7 | 7 |
8 *, | 8 *, |
9 *::after, | 9 *::after, |
10 *::before { | 10 *::before { |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
66 border-spacing: 0; | 66 border-spacing: 0; |
67 } | 67 } |
68 | 68 |
69 td, | 69 td, |
70 th { | 70 th { |
71 padding: 0; | 71 padding: 0; |
72 } | 72 } |
73 | 73 |
74 /* Base typography. */ | 74 /* Base typography. */ |
75 | 75 |
76 body, | |
77 html { | 76 html { |
78 font-size: 14px; | 77 font-size: 14px; |
| 78 } |
| 79 |
| 80 body { |
79 height: 100%; | 81 height: 100%; |
80 line-height: 1.4; | 82 line-height: 1.4; |
81 text-rendering: optimizeLegibility; | 83 text-rendering: optimizeLegibility; |
| 84 transition-property: color, background-color; |
| 85 transition-duration: 0.5s; |
| 86 transition-timing-function: ease; |
82 overflow-x: hidden; | 87 overflow-x: hidden; |
83 -webkit-overflow-scrolling: touch; | 88 -webkit-overflow-scrolling: touch; |
84 } | 89 } |
85 | 90 |
86 /* Classes for light, dark and sepia themes. | 91 /* Classes for light, dark and sepia themes. |
87 * Must agree with classes returned by useTheme() in dom_distiller_viewer.js | 92 * Must agree with classes returned by useTheme() in dom_distiller_viewer.js |
88 * and with CSS class constants in viewer.cc */ | 93 * and with CSS class constants in viewer.cc */ |
89 | 94 |
90 .light { | 95 .light { |
91 color: #333; | 96 color: #333; |
92 background-color: #FFF; | 97 background-color: #FFF; |
93 } | 98 } |
94 | 99 |
95 .dark { | 100 .dark { |
96 color: #FFF; | 101 color: #DDD; |
97 background-color: #000; | 102 background-color: #000; |
98 } | 103 } |
99 | 104 |
100 .sepia { | 105 .sepia { |
101 color: #000; | 106 color: #000; |
102 background-color: rgb(203, 173, 141); | 107 background-color: rgb(203, 173, 141); |
103 } | 108 } |
104 | 109 |
105 .serif { | 110 .serif { |
106 font-family: serif; | 111 font-family: serif; |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
144 h6 { | 149 h6 { |
145 line-height: 1.296; | 150 line-height: 1.296; |
146 margin-bottom: 0.444rem; | 151 margin-bottom: 0.444rem; |
147 } | 152 } |
148 | 153 |
149 /* Content. */ | 154 /* Content. */ |
150 | 155 |
151 /* Margins for Show Original link. */ | 156 /* Margins for Show Original link. */ |
152 | 157 |
153 #showOriginal { | 158 #showOriginal { |
154 margin: auto 1.296rem 1.296rem 1.296rem; | 159 margin: auto 1.296rem 1.296rem 5%; |
155 } | 160 } |
156 | 161 |
157 #content { | 162 #content { |
158 margin: 0.2rem; | 163 margin: 0.2rem 2.2%; |
159 } | 164 } |
160 | 165 |
161 /* Main margins. */ | 166 /* Main margins. */ |
162 | 167 |
163 body { | 168 body { |
164 max-width: 800px; | 169 max-width: 800px; |
165 margin: 0px; | 170 margin: 0px; |
166 } | 171 } |
167 | 172 |
168 #mainContent { | 173 #mainContent { |
(...skipping 26 matching lines...) Expand all Loading... |
195 } | 200 } |
196 | 201 |
197 .verticalCenterInner { | 202 .verticalCenterInner { |
198 display: table-cell; | 203 display: table-cell; |
199 vertical-align: middle; | 204 vertical-align: middle; |
200 } | 205 } |
201 | 206 |
202 | 207 |
203 /* Link colors for light, dark and sepia themes */ | 208 /* Link colors for light, dark and sepia themes */ |
204 | 209 |
205 a:link { | 210 .light a:link, |
| 211 .sepia a:link { |
206 color: #55F; | 212 color: #55F; |
207 } | 213 } |
208 | 214 |
209 a:visited { | 215 .dark a:link { |
| 216 color: #88F; |
| 217 } |
| 218 |
| 219 .light a:visited, |
| 220 .sepia a:visited { |
210 color: #902290; | 221 color: #902290; |
211 } | 222 } |
212 | 223 |
| 224 .dark a:visited { |
| 225 color: #D872D8; |
| 226 } |
| 227 |
213 blockquote { | 228 blockquote { |
214 border-left: 4px solid #eee; | 229 border-left: 4px solid #eee; |
215 padding-left: 1em; | 230 padding-left: 1em; |
216 } | 231 } |
217 | 232 |
218 cite { | 233 cite { |
219 color: rgba(0, 0, 0, .54); | 234 opacity: .54; |
220 font-style: italic; | 235 font-style: italic; |
221 } | 236 } |
222 | 237 |
223 hr { | 238 hr { |
224 background-color: #e4dfdf; | 239 opacity: .5; |
225 border: none; | 240 border-style: solid; |
226 height: 1px; | 241 height: 1px 0 0 0; |
227 margin: inherit auto; | |
228 width: 75%; | 242 width: 75%; |
229 } | 243 } |
230 | 244 |
231 h1 { | 245 h1 { |
232 font-size: 1.7rem; | 246 font-size: 1.7rem; |
233 line-height: 1.296; | 247 line-height: 1.296; |
234 margin-bottom: 0.444rem; | 248 margin-bottom: 0.444rem; |
235 } | 249 } |
236 | 250 |
237 q { | 251 q { |
238 color: #222; | 252 opacity: .8; |
239 display:block; | 253 display:block; |
240 font-size: 1.5rem; | |
241 font-style: italic; | 254 font-style: italic; |
242 font-weight: 600; | 255 font-weight: 600; |
243 line-height: 1.444; | 256 line-height: 1.444; |
244 } | 257 } |
245 | 258 |
246 embed, | 259 embed, |
247 img, | 260 img, |
248 object, | 261 object, |
249 video { | 262 video { |
250 max-width: 100%; | 263 max-width: 100%; |
251 } | 264 } |
252 | 265 |
253 /* TODO(sunangel): make images zoomable. */ | 266 /* TODO(sunangel): make images zoomable. */ |
254 | 267 |
255 img { | 268 img { |
256 display: block; | 269 display: block; |
257 height: auto; | 270 height: auto; |
258 margin: 0 auto 0.6rem auto; | 271 margin: 0 auto 0.6rem auto; |
259 } | 272 } |
260 | 273 |
261 /* TODO(nyquist): set these classes directly in the dom distiller. */ | 274 /* TODO(nyquist): set these classes directly in the dom distiller. */ |
262 | 275 |
263 embed+[class*='caption'], | 276 embed+[class*='caption'], |
264 figcaption, | 277 figcaption, |
265 img+[class*='caption'], | 278 img+[class*='caption'], |
266 object+[class*='caption'], | 279 object+[class*='caption'], |
267 video+[class*='caption'] { | 280 video+[class*='caption'] { |
268 color: rgba(0,0,0,.54); | 281 opacity: .54; |
269 display: table; | 282 display: table; |
270 font-style: italic; | 283 font-style: italic; |
271 margin: 0 auto; | 284 margin: 0 auto; |
272 } | 285 } |
273 | 286 |
274 ol, | 287 ol, |
275 ul { | 288 ul { |
276 margin-left: 1.296rem; | 289 margin-left: 1.296rem; |
277 } | 290 } |
278 | 291 |
(...skipping 28 matching lines...) Expand all Loading... |
307 display: none; | 320 display: none; |
308 } | 321 } |
309 | 322 |
310 /* Footer feedback form. */ | 323 /* Footer feedback form. */ |
311 #contentWrap { | 324 #contentWrap { |
312 min-height: 100%; | 325 min-height: 100%; |
313 overflow: auto; | 326 overflow: auto; |
314 padding-bottom: 120px; | 327 padding-bottom: 120px; |
315 } | 328 } |
316 | 329 |
| 330 #feedbackContainer { |
| 331 font-size: 14px; |
| 332 } |
| 333 |
317 .footerFeedback { | 334 .footerFeedback { |
318 background-color: #4285F4; | 335 background-color: #4285F4; |
319 clear: both; | 336 clear: both; |
320 color: #fff; | 337 color: #fff; |
321 display: none; | 338 display: none; |
322 height: 120px; | 339 height: 120px; |
323 margin-top: -120px; | 340 margin-top: -120px; |
324 width: 100%; | 341 width: 100%; |
325 } | 342 } |
326 | 343 |
327 .feedbackContent { | 344 .feedbackContent { |
| 345 font-size: 14px; |
328 background-color: #4285F4; | 346 background-color: #4285F4; |
329 clear: both; | 347 clear: both; |
330 padding: 14px; | 348 padding: 14px; |
331 } | 349 } |
332 | 350 |
333 #feedbackQuestion { | 351 #feedbackQuestion { |
334 font-size: 20px; | 352 font-size: 1.4em; |
335 font-weight: 700; | 353 font-weight: 700; |
336 text-align: center; | 354 text-align: center; |
337 width: 100%; | 355 width: 100%; |
338 } | 356 } |
339 | 357 |
340 .feedbackButtonWrap { | 358 .feedbackButtonWrap { |
341 margin-top: 14px; | 359 margin-top: 14px; |
342 text-align: center; | 360 text-align: center; |
343 width: 100%; | 361 width: 100%; |
344 } | 362 } |
(...skipping 449 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
794 border-color: rgb(250,36,36); | 812 border-color: rgb(250,36,36); |
795 } | 813 } |
796 | 814 |
797 #loader.red .circle.red .mask.first .mover { | 815 #loader.red .circle.red .mask.first .mover { |
798 background-color: rgb(33,89,189); | 816 background-color: rgb(33,89,189); |
799 } | 817 } |
800 | 818 |
801 #loader.red .circle.red .mask.second .mover { | 819 #loader.red .circle.red .mask.second .mover { |
802 background-color: rgb(250,36,36); | 820 background-color: rgb(250,36,36); |
803 } | 821 } |
OLD | NEW |