1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/mobile/android/themes/core/aboutReader.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,588 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this file,
1.6 + * You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +html {
1.9 + -moz-text-size-adjust: none;
1.10 +}
1.11 +
1.12 +body {
1.13 + padding: 20px;
1.14 + transition-property: background-color, color;
1.15 + transition-duration: 0.4s;
1.16 + max-width: 35em;
1.17 + margin-left: auto;
1.18 + margin-right: auto;
1.19 +}
1.20 +
1.21 +.light {
1.22 + background-color: #ffffff;
1.23 + color: #222222;
1.24 +}
1.25 +
1.26 +.dark {
1.27 + background-color: #000000;
1.28 + color: #eeeeee;
1.29 +}
1.30 +
1.31 +.sans-serif {
1.32 + font-family: sans-serif;
1.33 +}
1.34 +
1.35 +.serif {
1.36 + font-family: serif;
1.37 +}
1.38 +
1.39 +.message {
1.40 + margin-top: 40px;
1.41 + display: none;
1.42 + text-align: center;
1.43 + width: 100%;
1.44 + font-size: 16px;
1.45 +}
1.46 +
1.47 +.header {
1.48 + text-align: start;
1.49 + display: none;
1.50 +}
1.51 +
1.52 +.domain,
1.53 +.credits {
1.54 + font-family: sans-serif;
1.55 +}
1.56 +
1.57 +.domain {
1.58 + margin-top: 10px;
1.59 + padding-bottom: 10px;
1.60 + color: #00acff !important;
1.61 + text-decoration: none;
1.62 +}
1.63 +
1.64 +.domain-border {
1.65 + margin-top: 15px;
1.66 + border-bottom: 1.5px solid #777777;
1.67 + width: 50%;
1.68 +}
1.69 +
1.70 +.header > h1 {
1.71 + font-size: 2.625em;
1.72 + font-weight: 700;
1.73 + line-height: 1.1em;
1.74 + width: 100%;
1.75 + margin: 0px;
1.76 + margin-top: 32px;
1.77 + margin-bottom: 16px;
1.78 + padding: 0px;
1.79 +}
1.80 +
1.81 +.header > .credits {
1.82 + padding: 0px;
1.83 + margin: 0px;
1.84 + margin-bottom: 32px;
1.85 +}
1.86 +
1.87 +.light > .header > .domain {
1.88 + color: #ee7600;
1.89 + border-bottom-color: #d0d0d0;
1.90 +}
1.91 +
1.92 +.light > .header > h1 {
1.93 + color: #222222;
1.94 +}
1.95 +
1.96 +.light > .header > .credits {
1.97 + color: #898989;
1.98 +}
1.99 +
1.100 +.dark > .header > .domain {
1.101 + color: #ff9400;
1.102 + border-bottom-color: #777777;
1.103 +}
1.104 +
1.105 +.dark > .header > h1 {
1.106 + color: #eeeeee;
1.107 +}
1.108 +
1.109 +.dark > .header > .credits {
1.110 + color: #aaaaaa;
1.111 +}
1.112 +
1.113 +.font-size1 > .header > h1 {
1.114 + font-size: 27px;
1.115 +}
1.116 +
1.117 +.font-size2 > .header > h1 {
1.118 + font-size: 29px;
1.119 +}
1.120 +
1.121 +.font-size3 > .header > h1 {
1.122 + font-size: 31px;
1.123 +}
1.124 +
1.125 +.font-size4 > .header > h1 {
1.126 + font-size: 33px;
1.127 +}
1.128 +
1.129 +.font-size5 > .header > h1 {
1.130 + font-size: 35px;
1.131 +}
1.132 +
1.133 +/* This covers caption, domain, and credits
1.134 + texts in the reader UI */
1.135 +
1.136 +.font-size1 > .content .wp-caption-text,
1.137 +.font-size1 > .content figcaption,
1.138 +.font-size1 > .header > .domain,
1.139 +.font-size1 > .header > .credits {
1.140 + font-size: 10px;
1.141 +}
1.142 +
1.143 +.font-size2 > .content .wp-caption-text,
1.144 +.font-size2 > .content figcaption,
1.145 +.font-size2 > .header > .domain,
1.146 +.font-size2 > .header > .credits {
1.147 + font-size: 13px;
1.148 +}
1.149 +
1.150 +.font-size3 > .content .wp-caption-text,
1.151 +.font-size3 > .content figcaption,
1.152 +.font-size3 > .header > .domain,
1.153 +.font-size3 > .header > .credits {
1.154 + font-size: 15px;
1.155 +}
1.156 +
1.157 +.font-size4 > .content .wp-caption-text,
1.158 +.font-size4 > .content figcaption,
1.159 +.font-size4 > .header > .domain,
1.160 +.font-size4 > .header > .credits {
1.161 + font-size: 17px;
1.162 +}
1.163 +
1.164 +.font-size5 > .content .wp-caption-text,
1.165 +.font-size5 > .content figcaption,
1.166 +.font-size5 > .header > .domain,
1.167 +.font-size5 > .header > .credits {
1.168 + font-size: 19px;
1.169 +}
1.170 +
1.171 +.content {
1.172 + display: none;
1.173 +}
1.174 +
1.175 +.content a {
1.176 + text-decoration: underline !important;
1.177 + font-weight: normal;
1.178 +}
1.179 +
1.180 +.light > .content a,
1.181 +.light > .content a:visited,
1.182 +.light > .content a:hover,
1.183 +.light > .content a:active {
1.184 + color: #00acff !important;
1.185 +}
1.186 +
1.187 +.dark > .content a,
1.188 +.dark > .content a:visited,
1.189 +.dark > .content a:hover,
1.190 +.dark > .content a:active {
1.191 + color: #00acff !important;
1.192 +}
1.193 +
1.194 +.content * {
1.195 + max-width: 100% !important;
1.196 + height: auto !important;
1.197 +}
1.198 +
1.199 +.content p {
1.200 + line-height: 1.4em !important;
1.201 + margin: 0px !important;
1.202 + margin-bottom: 20px !important;
1.203 +}
1.204 +
1.205 +/* Covers all images showing edge-to-edge using a
1.206 + an optional caption text */
1.207 +.content .wp-caption,
1.208 +.content figure {
1.209 + display: block !important;
1.210 + width: 100% !important;
1.211 + margin: 0px !important;
1.212 + margin-bottom: 32px !important;
1.213 +}
1.214 +
1.215 +/* Images marked to be shown edge-to-edge with an
1.216 + optional captio ntext */
1.217 +.content p > img:only-child,
1.218 +.content p > a:only-child > img:only-child,
1.219 +.content .wp-caption img,
1.220 +.content figure img {
1.221 + max-width: none !important;
1.222 + height: auto !important;
1.223 + display: block !important;
1.224 + margin-top: 0px !important;
1.225 + margin-bottom: 32px !important;
1.226 +}
1.227 +
1.228 +/* If image is place inside one of these blocks
1.229 + there's no need to add margin at the bottom */
1.230 +.content .wp-caption img,
1.231 +.content figure img {
1.232 + margin-bottom: 0px !important;
1.233 +}
1.234 +
1.235 +/* Image caption text */
1.236 +.content .caption,
1.237 +.content .wp-caption-text,
1.238 +.content figcaption {
1.239 + font-family: sans-serif;
1.240 + margin: 0px !important;
1.241 + padding-top: 4px !important;
1.242 +}
1.243 +
1.244 +.light > .content .caption,
1.245 +.light > .content .wp-caption-text,
1.246 +.light > .content figcaption {
1.247 + color: #898989;
1.248 +}
1.249 +
1.250 +.dark > .content .caption,
1.251 +.dark > .content .wp-caption-text,
1.252 +.dark > .content figcaption {
1.253 + color: #aaaaaa;
1.254 +}
1.255 +
1.256 +/* Ensure all pre-formatted code inside the reader content
1.257 + are properly wrapped inside content width */
1.258 +.content code,
1.259 +.content pre {
1.260 + white-space: pre-wrap !important;
1.261 + margin-bottom: 20px !important;
1.262 +}
1.263 +
1.264 +.content blockquote {
1.265 + margin: 0px !important;
1.266 + margin-bottom: 20px !important;
1.267 + padding: 0px !important;
1.268 + -moz-padding-start: 16px !important;
1.269 + border: 0px !important;
1.270 + border-left: 2px solid !important;
1.271 +}
1.272 +
1.273 +.light > .content blockquote {
1.274 + color: #898989 !important;
1.275 + border-left-color: #d0d0d0 !important;
1.276 +}
1.277 +
1.278 +.dark > .content blockquote {
1.279 + color: #aaaaaa !important;
1.280 + border-left-color: #777777 !important;
1.281 +}
1.282 +
1.283 +.content ul,
1.284 +.content ol {
1.285 + margin: 0px !important;
1.286 + margin-bottom: 20px !important;
1.287 + padding: 0px !important;
1.288 + line-height: 1.5em;
1.289 +}
1.290 +
1.291 +.content ul {
1.292 + -moz-padding-start: 30px !important;
1.293 + list-style: disk !important;
1.294 +}
1.295 +
1.296 +.content ol {
1.297 + -moz-padding-start: 35px !important;
1.298 + list-style: decimal !important;
1.299 +}
1.300 +
1.301 +.font-size1-sample,
1.302 +.font-size1 > .content {
1.303 + font-size: 14px !important;
1.304 +}
1.305 +
1.306 +.font-size2-sample,
1.307 +.font-size2 > .content {
1.308 + font-size: 16px !important;
1.309 +}
1.310 +
1.311 +.font-size3-sample,
1.312 +.font-size3 > .content {
1.313 + font-size: 18px !important;
1.314 +}
1.315 +
1.316 +.font-size4-sample,
1.317 +.font-size4 > .content {
1.318 + font-size: 20px !important;
1.319 +}
1.320 +
1.321 +.font-size5-sample,
1.322 +.font-size5 > .content {
1.323 + font-size: 22px !important;
1.324 +}
1.325 +
1.326 +.toolbar {
1.327 + font-family: "Clear Sans",sans-serif;
1.328 + transition-property: visibility, opacity;
1.329 + transition-duration: 0.7s;
1.330 + visibility: visible;
1.331 + opacity: 1.0;
1.332 + position: fixed;
1.333 + width: 100%;
1.334 + bottom: 0px;
1.335 + left: 0px;
1.336 + margin: 0;
1.337 + padding: 0;
1.338 + list-style: none;
1.339 + background-color: #ced7de;
1.340 + -moz-user-select: none;
1.341 +}
1.342 +
1.343 +.toolbar-hidden {
1.344 + transition-property: visibility, opacity;
1.345 + transition-duration: 0.7s;
1.346 + visibility: hidden;
1.347 + opacity: 0.0;
1.348 +}
1.349 +
1.350 +.toolbar > * {
1.351 + float: right;
1.352 + width: 33%;
1.353 +}
1.354 +
1.355 +.button {
1.356 + color: white;
1.357 + display: block;
1.358 + background-position: center;
1.359 + background-size: 30px 24px;
1.360 + background-repeat: no-repeat;
1.361 +}
1.362 +
1.363 +.dropdown {
1.364 + text-align: center;
1.365 + display: inline-block;
1.366 + list-style: none;
1.367 + margin: 0px;
1.368 + padding: 0px;
1.369 +}
1.370 +
1.371 +.dropdown li {
1.372 + margin: 0px;
1.373 + padding: 0px;
1.374 +}
1.375 +
1.376 +.dropdown-toggle {
1.377 + margin: 0px;
1.378 + padding: 0px;
1.379 +}
1.380 +
1.381 +.dropdown-popup {
1.382 + text-align: start;
1.383 + position: absolute;
1.384 + left: 0px;
1.385 + z-index: 1000;
1.386 + float: left;
1.387 + background: #dde2e7;
1.388 + margin-top: 12px;
1.389 + margin-bottom: 10px;
1.390 + padding-top: 4px;
1.391 + padding-bottom: 8px;
1.392 + font-size: 14px;
1.393 + box-shadow: 0px -1px 12px #333;
1.394 + border-radius: 3px;
1.395 + visibility: hidden;
1.396 +}
1.397 +
1.398 +.dropdown-popup > hr {
1.399 + width: 100%;
1.400 + height: 0px;
1.401 + border: 0px;
1.402 + border-top: 1px solid #C5D0DA;
1.403 + margin: 0;
1.404 +}
1.405 +
1.406 +.open > .dropdown-popup {
1.407 + margin-top: 0px;
1.408 + margin-bottom: 6px;
1.409 + bottom: 100%;
1.410 + visibility: visible;
1.411 +}
1.412 +
1.413 +.dropdown-arrow {
1.414 + position: absolute;
1.415 + width: 40px;
1.416 + height: 18px;
1.417 + bottom: -18px;
1.418 + background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-mdpi.png');
1.419 + background-size: 40px 18px;
1.420 + background-position: center;
1.421 + display: block;
1.422 +}
1.423 +
1.424 +#font-type-buttons,
1.425 +.segmented-button {
1.426 + display: flex;
1.427 + flex-direction: row;
1.428 + list-style: none;
1.429 + padding: 10px 5px;
1.430 + white-space: nowrap;
1.431 +}
1.432 +
1.433 +#font-type-buttons > li,
1.434 +.segmented-button > li {
1.435 + width: 50px; /* combined with flex, this acts as a minimum width */
1.436 + flex: 1 0 auto;
1.437 + text-align: center;
1.438 + line-height: 20px;
1.439 +}
1.440 +
1.441 +#font-type-buttons > li {
1.442 + padding: 10px 0;
1.443 +}
1.444 +
1.445 +.segmented-button > li {
1.446 + border-left: 1px solid #C5D0DA;
1.447 +}
1.448 +
1.449 +.segmented-button > li:first-child {
1.450 + border-left: 0px;
1.451 +}
1.452 +
1.453 +#font-type-buttons > li > a,
1.454 +.segmented-button > li > a {
1.455 + vertical-align: middle;
1.456 + text-decoration: none;
1.457 + color: black;
1.458 +}
1.459 +
1.460 +#font-type-buttons > li > a {
1.461 + display: inline-block;
1.462 + font-size: 48px;
1.463 + line-height: 50px;
1.464 + margin-bottom: 5px;
1.465 + border-bottom: 3px solid transparent;
1.466 +}
1.467 +
1.468 +.segmented-button > li > a {
1.469 + display: block;
1.470 + padding: 5px 0;
1.471 + font-family: "Clear Sans",sans-serif;
1.472 + font-weight: lighter;
1.473 +}
1.474 +
1.475 +#font-type-buttons > li > a:active,
1.476 +#font-type-buttons > li.selected > a {
1.477 + border-color: #ff9400;
1.478 +}
1.479 +
1.480 +.segmented-button > li > a:active,
1.481 +.segmented-button > li.selected > a {
1.482 + font-weight: bold;
1.483 +}
1.484 +
1.485 +#font-type-buttons > li > .sans-serif {
1.486 + font-weight: lighter;
1.487 +}
1.488 +
1.489 +#font-type-buttons > li > div {
1.490 + color: #666;
1.491 + font-size: 12px;
1.492 +}
1.493 +
1.494 +.toggle-button.on {
1.495 + background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-mdpi.png');
1.496 +}
1.497 +
1.498 +.toggle-button {
1.499 + background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-mdpi.png');
1.500 +}
1.501 +
1.502 +.share-button {
1.503 + background-image: url('chrome://browser/skin/images/reader-share-icon-mdpi.png');
1.504 +}
1.505 +
1.506 +.style-button {
1.507 + background-image: url('chrome://browser/skin/images/reader-style-icon-mdpi.png');
1.508 +}
1.509 +
1.510 +@media screen and (min-resolution: 1.25dppx) {
1.511 + .dropdown-arrow {
1.512 + background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-hdpi.png');
1.513 + }
1.514 +
1.515 + .step-control > .plus-button {
1.516 + background-image: url('chrome://browser/skin/images/reader-plus-icon-hdpi.png');
1.517 + }
1.518 +
1.519 + .step-control > .minus-button {
1.520 + background-image: url('chrome://browser/skin/images/reader-minus-icon-hdpi.png');
1.521 + }
1.522 +
1.523 + .toggle-button.on {
1.524 + background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-hdpi.png');
1.525 + }
1.526 +
1.527 + .toggle-button {
1.528 + background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-hdpi.png');
1.529 + }
1.530 +
1.531 + .share-button {
1.532 + background-image: url('chrome://browser/skin/images/reader-share-icon-hdpi.png');
1.533 + }
1.534 +
1.535 + .style-button {
1.536 + background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
1.537 + }
1.538 +}
1.539 +
1.540 +@media screen and (min-resolution: 2dppx) {
1.541 + .dropdown-arrow {
1.542 + background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-xhdpi.png');
1.543 + }
1.544 +
1.545 + .step-control > .plus-button {
1.546 + background-image: url('chrome://browser/skin/images/reader-plus-icon-xhdpi.png');
1.547 + }
1.548 +
1.549 + .step-control > .minus-button {
1.550 + background-image: url('chrome://browser/skin/images/reader-minus-icon-xhdpi.png');
1.551 + }
1.552 +
1.553 + .toggle-button.on {
1.554 + background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-xhdpi.png');
1.555 + }
1.556 +
1.557 + .toggle-button {
1.558 + background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-xhdpi.png');
1.559 + }
1.560 +
1.561 + .share-button {
1.562 + background-image: url('chrome://browser/skin/images/reader-share-icon-xhdpi.png');
1.563 + }
1.564 +
1.565 + .style-button {
1.566 + background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
1.567 + }
1.568 +}
1.569 +
1.570 +@media screen and (orientation: portrait) {
1.571 + .button {
1.572 + height: 48px;
1.573 + }
1.574 +}
1.575 +
1.576 +@media screen and (orientation: landscape) {
1.577 + .button {
1.578 + height: 40px;
1.579 + }
1.580 +}
1.581 +
1.582 +@media screen and (min-width: 960px) {
1.583 + .button {
1.584 + width: 56px;
1.585 + height: 56px;
1.586 + }
1.587 +
1.588 + .toolbar > * {
1.589 + width: 56px;
1.590 + }
1.591 +}
