The Tor Browser / annotate

mobile/android/themes/core/aboutReader.css@b8a032363ba2 (annotated)

mobile/android/themes/core/aboutReader.css

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

michael@0 1 /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0 2 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
michael@0 3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0 4
michael@0 5 html {
michael@0 6 -moz-text-size-adjust: none;
michael@0 7 }
michael@0 8
michael@0 9 body {
michael@0 10 padding: 20px;
michael@0 11 transition-property: background-color, color;
michael@0 12 transition-duration: 0.4s;
michael@0 13 max-width: 35em;
michael@0 14 margin-left: auto;
michael@0 15 margin-right: auto;
michael@0 16 }
michael@0 17
michael@0 18 .light {
michael@0 19 background-color: #ffffff;
michael@0 20 color: #222222;
michael@0 21 }
michael@0 22
michael@0 23 .dark {
michael@0 24 background-color: #000000;
michael@0 25 color: #eeeeee;
michael@0 26 }
michael@0 27
michael@0 28 .sans-serif {
michael@0 29 font-family: sans-serif;
michael@0 30 }
michael@0 31
michael@0 32 .serif {
michael@0 33 font-family: serif;
michael@0 34 }
michael@0 35
michael@0 36 .message {
michael@0 37 margin-top: 40px;
michael@0 38 display: none;
michael@0 39 text-align: center;
michael@0 40 width: 100%;
michael@0 41 font-size: 16px;
michael@0 42 }
michael@0 43
michael@0 44 .header {
michael@0 45 text-align: start;
michael@0 46 display: none;
michael@0 47 }
michael@0 48
michael@0 49 .domain,
michael@0 50 .credits {
michael@0 51 font-family: sans-serif;
michael@0 52 }
michael@0 53
michael@0 54 .domain {
michael@0 55 margin-top: 10px;
michael@0 56 padding-bottom: 10px;
michael@0 57 color: #00acff !important;
michael@0 58 text-decoration: none;
michael@0 59 }
michael@0 60
michael@0 61 .domain-border {
michael@0 62 margin-top: 15px;
michael@0 63 border-bottom: 1.5px solid #777777;
michael@0 64 width: 50%;
michael@0 65 }
michael@0 66
michael@0 67 .header > h1 {
michael@0 68 font-size: 2.625em;
michael@0 69 font-weight: 700;
michael@0 70 line-height: 1.1em;
michael@0 71 width: 100%;
michael@0 72 margin: 0px;
michael@0 73 margin-top: 32px;
michael@0 74 margin-bottom: 16px;
michael@0 75 padding: 0px;
michael@0 76 }
michael@0 77
michael@0 78 .header > .credits {
michael@0 79 padding: 0px;
michael@0 80 margin: 0px;
michael@0 81 margin-bottom: 32px;
michael@0 82 }
michael@0 83
michael@0 84 .light > .header > .domain {
michael@0 85 color: #ee7600;
michael@0 86 border-bottom-color: #d0d0d0;
michael@0 87 }
michael@0 88
michael@0 89 .light > .header > h1 {
michael@0 90 color: #222222;
michael@0 91 }
michael@0 92
michael@0 93 .light > .header > .credits {
michael@0 94 color: #898989;
michael@0 95 }
michael@0 96
michael@0 97 .dark > .header > .domain {
michael@0 98 color: #ff9400;
michael@0 99 border-bottom-color: #777777;
michael@0 100 }
michael@0 101
michael@0 102 .dark > .header > h1 {
michael@0 103 color: #eeeeee;
michael@0 104 }
michael@0 105
michael@0 106 .dark > .header > .credits {
michael@0 107 color: #aaaaaa;
michael@0 108 }
michael@0 109
michael@0 110 .font-size1 > .header > h1 {
michael@0 111 font-size: 27px;
michael@0 112 }
michael@0 113
michael@0 114 .font-size2 > .header > h1 {
michael@0 115 font-size: 29px;
michael@0 116 }
michael@0 117
michael@0 118 .font-size3 > .header > h1 {
michael@0 119 font-size: 31px;
michael@0 120 }
michael@0 121
michael@0 122 .font-size4 > .header > h1 {
michael@0 123 font-size: 33px;
michael@0 124 }
michael@0 125
michael@0 126 .font-size5 > .header > h1 {
michael@0 127 font-size: 35px;
michael@0 128 }
michael@0 129
michael@0 130 /* This covers caption, domain, and credits
michael@0 131 texts in the reader UI */
michael@0 132
michael@0 133 .font-size1 > .content .wp-caption-text,
michael@0 134 .font-size1 > .content figcaption,
michael@0 135 .font-size1 > .header > .domain,
michael@0 136 .font-size1 > .header > .credits {
michael@0 137 font-size: 10px;
michael@0 138 }
michael@0 139
michael@0 140 .font-size2 > .content .wp-caption-text,
michael@0 141 .font-size2 > .content figcaption,
michael@0 142 .font-size2 > .header > .domain,
michael@0 143 .font-size2 > .header > .credits {
michael@0 144 font-size: 13px;
michael@0 145 }
michael@0 146
michael@0 147 .font-size3 > .content .wp-caption-text,
michael@0 148 .font-size3 > .content figcaption,
michael@0 149 .font-size3 > .header > .domain,
michael@0 150 .font-size3 > .header > .credits {
michael@0 151 font-size: 15px;
michael@0 152 }
michael@0 153
michael@0 154 .font-size4 > .content .wp-caption-text,
michael@0 155 .font-size4 > .content figcaption,
michael@0 156 .font-size4 > .header > .domain,
michael@0 157 .font-size4 > .header > .credits {
michael@0 158 font-size: 17px;
michael@0 159 }
michael@0 160
michael@0 161 .font-size5 > .content .wp-caption-text,
michael@0 162 .font-size5 > .content figcaption,
michael@0 163 .font-size5 > .header > .domain,
michael@0 164 .font-size5 > .header > .credits {
michael@0 165 font-size: 19px;
michael@0 166 }
michael@0 167
michael@0 168 .content {
michael@0 169 display: none;
michael@0 170 }
michael@0 171
michael@0 172 .content a {
michael@0 173 text-decoration: underline !important;
michael@0 174 font-weight: normal;
michael@0 175 }
michael@0 176
michael@0 177 .light > .content a,
michael@0 178 .light > .content a:visited,
michael@0 179 .light > .content a:hover,
michael@0 180 .light > .content a:active {
michael@0 181 color: #00acff !important;
michael@0 182 }
michael@0 183
michael@0 184 .dark > .content a,
michael@0 185 .dark > .content a:visited,
michael@0 186 .dark > .content a:hover,
michael@0 187 .dark > .content a:active {
michael@0 188 color: #00acff !important;
michael@0 189 }
michael@0 190
michael@0 191 .content * {
michael@0 192 max-width: 100% !important;
michael@0 193 height: auto !important;
michael@0 194 }
michael@0 195
michael@0 196 .content p {
michael@0 197 line-height: 1.4em !important;
michael@0 198 margin: 0px !important;
michael@0 199 margin-bottom: 20px !important;
michael@0 200 }
michael@0 201
michael@0 202 /* Covers all images showing edge-to-edge using a
michael@0 203 an optional caption text */
michael@0 204 .content .wp-caption,
michael@0 205 .content figure {
michael@0 206 display: block !important;
michael@0 207 width: 100% !important;
michael@0 208 margin: 0px !important;
michael@0 209 margin-bottom: 32px !important;
michael@0 210 }
michael@0 211
michael@0 212 /* Images marked to be shown edge-to-edge with an
michael@0 213 optional captio ntext */
michael@0 214 .content p > img:only-child,
michael@0 215 .content p > a:only-child > img:only-child,
michael@0 216 .content .wp-caption img,
michael@0 217 .content figure img {
michael@0 218 max-width: none !important;
michael@0 219 height: auto !important;
michael@0 220 display: block !important;
michael@0 221 margin-top: 0px !important;
michael@0 222 margin-bottom: 32px !important;
michael@0 223 }
michael@0 224
michael@0 225 /* If image is place inside one of these blocks
michael@0 226 there's no need to add margin at the bottom */
michael@0 227 .content .wp-caption img,
michael@0 228 .content figure img {
michael@0 229 margin-bottom: 0px !important;
michael@0 230 }
michael@0 231
michael@0 232 /* Image caption text */
michael@0 233 .content .caption,
michael@0 234 .content .wp-caption-text,
michael@0 235 .content figcaption {
michael@0 236 font-family: sans-serif;
michael@0 237 margin: 0px !important;
michael@0 238 padding-top: 4px !important;
michael@0 239 }
michael@0 240
michael@0 241 .light > .content .caption,
michael@0 242 .light > .content .wp-caption-text,
michael@0 243 .light > .content figcaption {
michael@0 244 color: #898989;
michael@0 245 }
michael@0 246
michael@0 247 .dark > .content .caption,
michael@0 248 .dark > .content .wp-caption-text,
michael@0 249 .dark > .content figcaption {
michael@0 250 color: #aaaaaa;
michael@0 251 }
michael@0 252
michael@0 253 /* Ensure all pre-formatted code inside the reader content
michael@0 254 are properly wrapped inside content width */
michael@0 255 .content code,
michael@0 256 .content pre {
michael@0 257 white-space: pre-wrap !important;
michael@0 258 margin-bottom: 20px !important;
michael@0 259 }
michael@0 260
michael@0 261 .content blockquote {
michael@0 262 margin: 0px !important;
michael@0 263 margin-bottom: 20px !important;
michael@0 264 padding: 0px !important;
michael@0 265 -moz-padding-start: 16px !important;
michael@0 266 border: 0px !important;
michael@0 267 border-left: 2px solid !important;
michael@0 268 }
michael@0 269
michael@0 270 .light > .content blockquote {
michael@0 271 color: #898989 !important;
michael@0 272 border-left-color: #d0d0d0 !important;
michael@0 273 }
michael@0 274
michael@0 275 .dark > .content blockquote {
michael@0 276 color: #aaaaaa !important;
michael@0 277 border-left-color: #777777 !important;
michael@0 278 }
michael@0 279
michael@0 280 .content ul,
michael@0 281 .content ol {
michael@0 282 margin: 0px !important;
michael@0 283 margin-bottom: 20px !important;
michael@0 284 padding: 0px !important;
michael@0 285 line-height: 1.5em;
michael@0 286 }
michael@0 287
michael@0 288 .content ul {
michael@0 289 -moz-padding-start: 30px !important;
michael@0 290 list-style: disk !important;
michael@0 291 }
michael@0 292
michael@0 293 .content ol {
michael@0 294 -moz-padding-start: 35px !important;
michael@0 295 list-style: decimal !important;
michael@0 296 }
michael@0 297
michael@0 298 .font-size1-sample,
michael@0 299 .font-size1 > .content {
michael@0 300 font-size: 14px !important;
michael@0 301 }
michael@0 302
michael@0 303 .font-size2-sample,
michael@0 304 .font-size2 > .content {
michael@0 305 font-size: 16px !important;
michael@0 306 }
michael@0 307
michael@0 308 .font-size3-sample,
michael@0 309 .font-size3 > .content {
michael@0 310 font-size: 18px !important;
michael@0 311 }
michael@0 312
michael@0 313 .font-size4-sample,
michael@0 314 .font-size4 > .content {
michael@0 315 font-size: 20px !important;
michael@0 316 }
michael@0 317
michael@0 318 .font-size5-sample,
michael@0 319 .font-size5 > .content {
michael@0 320 font-size: 22px !important;
michael@0 321 }
michael@0 322
michael@0 323 .toolbar {
michael@0 324 font-family: "Clear Sans",sans-serif;
michael@0 325 transition-property: visibility, opacity;
michael@0 326 transition-duration: 0.7s;
michael@0 327 visibility: visible;
michael@0 328 opacity: 1.0;
michael@0 329 position: fixed;
michael@0 330 width: 100%;
michael@0 331 bottom: 0px;
michael@0 332 left: 0px;
michael@0 333 margin: 0;
michael@0 334 padding: 0;
michael@0 335 list-style: none;
michael@0 336 background-color: #ced7de;
michael@0 337 -moz-user-select: none;
michael@0 338 }
michael@0 339
michael@0 340 .toolbar-hidden {
michael@0 341 transition-property: visibility, opacity;
michael@0 342 transition-duration: 0.7s;
michael@0 343 visibility: hidden;
michael@0 344 opacity: 0.0;
michael@0 345 }
michael@0 346
michael@0 347 .toolbar > * {
michael@0 348 float: right;
michael@0 349 width: 33%;
michael@0 350 }
michael@0 351
michael@0 352 .button {
michael@0 353 color: white;
michael@0 354 display: block;
michael@0 355 background-position: center;
michael@0 356 background-size: 30px 24px;
michael@0 357 background-repeat: no-repeat;
michael@0 358 }
michael@0 359
michael@0 360 .dropdown {
michael@0 361 text-align: center;
michael@0 362 display: inline-block;
michael@0 363 list-style: none;
michael@0 364 margin: 0px;
michael@0 365 padding: 0px;
michael@0 366 }
michael@0 367
michael@0 368 .dropdown li {
michael@0 369 margin: 0px;
michael@0 370 padding: 0px;
michael@0 371 }
michael@0 372
michael@0 373 .dropdown-toggle {
michael@0 374 margin: 0px;
michael@0 375 padding: 0px;
michael@0 376 }
michael@0 377
michael@0 378 .dropdown-popup {
michael@0 379 text-align: start;
michael@0 380 position: absolute;
michael@0 381 left: 0px;
michael@0 382 z-index: 1000;
michael@0 383 float: left;
michael@0 384 background: #dde2e7;
michael@0 385 margin-top: 12px;
michael@0 386 margin-bottom: 10px;
michael@0 387 padding-top: 4px;
michael@0 388 padding-bottom: 8px;
michael@0 389 font-size: 14px;
michael@0 390 box-shadow: 0px -1px 12px #333;
michael@0 391 border-radius: 3px;
michael@0 392 visibility: hidden;
michael@0 393 }
michael@0 394
michael@0 395 .dropdown-popup > hr {
michael@0 396 width: 100%;
michael@0 397 height: 0px;
michael@0 398 border: 0px;
michael@0 399 border-top: 1px solid #C5D0DA;
michael@0 400 margin: 0;
michael@0 401 }
michael@0 402
michael@0 403 .open > .dropdown-popup {
michael@0 404 margin-top: 0px;
michael@0 405 margin-bottom: 6px;
michael@0 406 bottom: 100%;
michael@0 407 visibility: visible;
michael@0 408 }
michael@0 409
michael@0 410 .dropdown-arrow {
michael@0 411 position: absolute;
michael@0 412 width: 40px;
michael@0 413 height: 18px;
michael@0 414 bottom: -18px;
michael@0 415 background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-mdpi.png');
michael@0 416 background-size: 40px 18px;
michael@0 417 background-position: center;
michael@0 418 display: block;
michael@0 419 }
michael@0 420
michael@0 421 #font-type-buttons,
michael@0 422 .segmented-button {
michael@0 423 display: flex;
michael@0 424 flex-direction: row;
michael@0 425 list-style: none;
michael@0 426 padding: 10px 5px;
michael@0 427 white-space: nowrap;
michael@0 428 }
michael@0 429
michael@0 430 #font-type-buttons > li,
michael@0 431 .segmented-button > li {
michael@0 432 width: 50px; /* combined with flex, this acts as a minimum width */
michael@0 433 flex: 1 0 auto;
michael@0 434 text-align: center;
michael@0 435 line-height: 20px;
michael@0 436 }
michael@0 437
michael@0 438 #font-type-buttons > li {
michael@0 439 padding: 10px 0;
michael@0 440 }
michael@0 441
michael@0 442 .segmented-button > li {
michael@0 443 border-left: 1px solid #C5D0DA;
michael@0 444 }
michael@0 445
michael@0 446 .segmented-button > li:first-child {
michael@0 447 border-left: 0px;
michael@0 448 }
michael@0 449
michael@0 450 #font-type-buttons > li > a,
michael@0 451 .segmented-button > li > a {
michael@0 452 vertical-align: middle;
michael@0 453 text-decoration: none;
michael@0 454 color: black;
michael@0 455 }
michael@0 456
michael@0 457 #font-type-buttons > li > a {
michael@0 458 display: inline-block;
michael@0 459 font-size: 48px;
michael@0 460 line-height: 50px;
michael@0 461 margin-bottom: 5px;
michael@0 462 border-bottom: 3px solid transparent;
michael@0 463 }
michael@0 464
michael@0 465 .segmented-button > li > a {
michael@0 466 display: block;
michael@0 467 padding: 5px 0;
michael@0 468 font-family: "Clear Sans",sans-serif;
michael@0 469 font-weight: lighter;
michael@0 470 }
michael@0 471
michael@0 472 #font-type-buttons > li > a:active,
michael@0 473 #font-type-buttons > li.selected > a {
michael@0 474 border-color: #ff9400;
michael@0 475 }
michael@0 476
michael@0 477 .segmented-button > li > a:active,
michael@0 478 .segmented-button > li.selected > a {
michael@0 479 font-weight: bold;
michael@0 480 }
michael@0 481
michael@0 482 #font-type-buttons > li > .sans-serif {
michael@0 483 font-weight: lighter;
michael@0 484 }
michael@0 485
michael@0 486 #font-type-buttons > li > div {
michael@0 487 color: #666;
michael@0 488 font-size: 12px;
michael@0 489 }
michael@0 490
michael@0 491 .toggle-button.on {
michael@0 492 background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-mdpi.png');
michael@0 493 }
michael@0 494
michael@0 495 .toggle-button {
michael@0 496 background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-mdpi.png');
michael@0 497 }
michael@0 498
michael@0 499 .share-button {
michael@0 500 background-image: url('chrome://browser/skin/images/reader-share-icon-mdpi.png');
michael@0 501 }
michael@0 502
michael@0 503 .style-button {
michael@0 504 background-image: url('chrome://browser/skin/images/reader-style-icon-mdpi.png');
michael@0 505 }
michael@0 506
michael@0 507 @media screen and (min-resolution: 1.25dppx) {
michael@0 508 .dropdown-arrow {
michael@0 509 background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-hdpi.png');
michael@0 510 }
michael@0 511
michael@0 512 .step-control > .plus-button {
michael@0 513 background-image: url('chrome://browser/skin/images/reader-plus-icon-hdpi.png');
michael@0 514 }
michael@0 515
michael@0 516 .step-control > .minus-button {
michael@0 517 background-image: url('chrome://browser/skin/images/reader-minus-icon-hdpi.png');
michael@0 518 }
michael@0 519
michael@0 520 .toggle-button.on {
michael@0 521 background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-hdpi.png');
michael@0 522 }
michael@0 523
michael@0 524 .toggle-button {
michael@0 525 background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-hdpi.png');
michael@0 526 }
michael@0 527
michael@0 528 .share-button {
michael@0 529 background-image: url('chrome://browser/skin/images/reader-share-icon-hdpi.png');
michael@0 530 }
michael@0 531
michael@0 532 .style-button {
michael@0 533 background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
michael@0 534 }
michael@0 535 }
michael@0 536
michael@0 537 @media screen and (min-resolution: 2dppx) {
michael@0 538 .dropdown-arrow {
michael@0 539 background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-xhdpi.png');
michael@0 540 }
michael@0 541
michael@0 542 .step-control > .plus-button {
michael@0 543 background-image: url('chrome://browser/skin/images/reader-plus-icon-xhdpi.png');
michael@0 544 }
michael@0 545
michael@0 546 .step-control > .minus-button {
michael@0 547 background-image: url('chrome://browser/skin/images/reader-minus-icon-xhdpi.png');
michael@0 548 }
michael@0 549
michael@0 550 .toggle-button.on {
michael@0 551 background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-xhdpi.png');
michael@0 552 }
michael@0 553
michael@0 554 .toggle-button {
michael@0 555 background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-xhdpi.png');
michael@0 556 }
michael@0 557
michael@0 558 .share-button {
michael@0 559 background-image: url('chrome://browser/skin/images/reader-share-icon-xhdpi.png');
michael@0 560 }
michael@0 561
michael@0 562 .style-button {
michael@0 563 background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
michael@0 564 }
michael@0 565 }
michael@0 566
michael@0 567 @media screen and (orientation: portrait) {
michael@0 568 .button {
michael@0 569 height: 48px;
michael@0 570 }
michael@0 571 }
michael@0 572
michael@0 573 @media screen and (orientation: landscape) {
michael@0 574 .button {
michael@0 575 height: 40px;
michael@0 576 }
michael@0 577 }
michael@0 578
michael@0 579 @media screen and (min-width: 960px) {
michael@0 580 .button {
michael@0 581 width: 56px;
michael@0 582 height: 56px;
michael@0 583 }
michael@0 584
michael@0 585 .toolbar > * {
michael@0 586 width: 56px;
michael@0 587 }
michael@0 588 }

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial