| 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 |