EarlyBlue/global/aboutReader.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 body {
   6   padding: 64px 0;
   7   max-width: 660px;
   8   margin: 0 auto;
   9 }
  10
  11 @media (max-width: 785px) {
  12   body {
  13     padding-top: 64px;
  14     -moz-padding-end: 0;
  15     padding-bottom: 64px;
  16     -moz-padding-start: 51px;
  17   }
  18 }
  19
  20 body.loaded {
  21   transition: color 0.4s, background-color 0.4s;
  22 }
  23
  24 .light,
  25 .light-button {
  26   color: #333333;
  27   background-color: #ffffff;
  28 }
  29
  30 .dark,
  31 .dark-button {
  32   color: #eeeeee;
  33   background-color: #333333;
  34 }
  35
  36 .sepia,
  37 .sepia-button {
  38   color: #333333;
  39   background-color: #f0ece7;
  40 }
  41
  42 .sans-serif,
  43 .sans-serif .remove-button {
  44   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
  45 }
  46
  47 .serif,
  48 .serif .remove-button {
  49   font-family: "Charis SIL", Georgia, "Times New Roman", serif;
  50 }
  51
  52 .font-size1 {
  53   font-size: 10px;
  54 }
  55
  56 .font-size2 {
  57   font-size: 12px;
  58 }
  59
  60 .font-size3 {
  61   font-size: 14px;
  62 }
  63
  64 .font-size4  {
  65   font-size: 16px;
  66 }
  67
  68 .font-size5 {
  69   font-size: 18px;
  70 }
  71
  72 .font-size6 {
  73   font-size: 20px;
  74 }
  75
  76 .font-size7 {
  77   font-size: 22px;
  78 }
  79
  80 .font-size8 {
  81   font-size: 24px;
  82 }
  83
  84 .font-size9 {
  85   font-size: 26px;
  86 }
  87
  88
  89 /* Loading/error message */
  90
  91 .message {
  92   margin-top: 40px;
  93   display: none;
  94   text-align: center;
  95   width: 100%;
  96   font-size: 0.9em;
  97 }
  98
  99 /* Header */
 100
 101 .header {
 102   text-align: start;
 103   display: none;
 104 }
 105
 106 .domain {
 107   font-size: 0.9em;
 108   line-height: 1.48em;
 109   padding-bottom: 4px;
 110   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
 111   text-decoration: none;
 112   border-bottom: 1px solid;
 113   color: #0095dd;
 114 }
 115
 116 .light > .container > .header > .domain,
 117 .sepia > .container > .header > .domain {
 118   border-bottom-color: #333333;
 119 }
 120
 121 .dark > .container > .header > .domain {
 122   border-bottom-color: #eeeeee;
 123 }
 124
 125 .header > h1 {
 126   font-size: 1.33em;
 127   line-height: 1.25em;
 128   width: 100%;
 129   margin: 30px 0;
 130   padding: 0;
 131 }
 132
 133 .header > .credits {
 134   font-size: 0.9em;
 135   line-height: 1.48em;
 136   margin: 0 0 30px 0;
 137   padding: 0;
 138   font-style: italic;
 139 }
 140
 141 /* Content */
 142
 143 #moz-reader-content {
 144   display: none;
 145   font-size: 1em;
 146   line-height: 1.6em;
 147 }
 148
 149 .content h1,
 150 .content h2,
 151 .content h3 {
 152   font-weight: bold;
 153 }
 154
 155 #moz-reader-content h1 {
 156   font-size: 1.33em;
 157   line-height: 1.25em;
 158 }
 159
 160 #moz-reader-content h2 {
 161   font-size: 1.1em;
 162   line-height: 1.51em;
 163 }
 164
 165 #moz-reader-content h3 {
 166   font-size: 1em;
 167   line-height: 1.66em;
 168 }
 169
 170 .content a {
 171   text-decoration: underline;
 172   font-weight: normal;
 173 }
 174
 175 .content a,
 176 .content a:visited,
 177 .content a:hover,
 178 .content a:active {
 179   color: #0095dd;
 180 }
 181
 182 .content * {
 183   max-width: 100%;
 184   height: auto;
 185 }
 186
 187 .content p,
 188 .content code,
 189 .content pre,
 190 .content blockquote,
 191 .content ul,
 192 .content ol,
 193 .content li,
 194 .content figure,
 195 .content .wp-caption {
 196   margin: 0 0 30px 0;
 197 }
 198
 199 .content p > img:only-child,
 200 .content p > a:only-child > img:only-child,
 201 .content .wp-caption img,
 202 .content figure img {
 203   display: block;
 204 }
 205
 206 .content img[moz-reader-center] {
 207   margin-left: auto;
 208   margin-right: auto;
 209 }
 210
 211 #moz-reader-content .caption,
 212 #moz-reader-content .wp-caption-text,
 213 #moz-reader-content figcaption {
 214   font-size: 0.9em;
 215   line-height: 1.48em;
 216   font-style: italic;
 217 }
 218
 219 .content code,
 220 .content pre {
 221   white-space: pre-wrap;
 222 }
 223
 224 .content blockquote {
 225   padding: 0;
 226   -moz-padding-start: 16px;
 227 }
 228
 229 .light > .container > .content blockquote,
 230 .sepia > .container > .content blockquote {
 231   -moz-border-start: 2px solid #333333;
 232 }
 233
 234 .dark > .container > .content blockquote {
 235   -moz-border-start: 2px solid #eeeeee;
 236 }
 237 .dark *::-moz-selection {
 238   background-color: #FFFFFF;
 239   color: #0095DD;
 240 }
 241 .dark a::-moz-selection {
 242   color: #DD4800;
 243 }
 244
 245 .content ul,
 246 .content ol {
 247   padding: 0;
 248 }
 249
 250 .content ul {
 251   -moz-padding-start: 30px;
 252   list-style: disc;
 253 }
 254
 255 .content ol {
 256   -moz-padding-start: 30px;
 257   list-style: decimal;
 258 }
 259
 260 /*======= Controls toolbar =======*/
 261
 262 .toolbar {
 263   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
 264   position: fixed;
 265   height: 100%;
 266   top: 0;
 267   left: 0;
 268   margin: 0;
 269   padding: 0;
 270   list-style: none;
 271   background-color: #fbfbfb;
 272   -moz-user-select: none;
 273   border-right: 1px solid #b5b5b5;
 274 }
 275
 276 .button {
 277   display: block;
 278   background-size: 24px 24px;
 279   background-repeat: no-repeat;
 280   color: #333;
 281   background-color: #fbfbfb;
 282   height: 40px;
 283   padding: 0;
 284 }
 285
 286 .toolbar .button {
 287   width: 40px;
 288   background-position: center;
 289   margin-right: -1px;
 290   border-top: 0;
 291   border-left: 0;
 292   border-right: 1px solid #b5b5b5;
 293   border-bottom: 1px solid #c1c1c1;
 294 }
 295
 296 .button[hidden] {
 297   display: none;
 298 }
 299
 300 .dropdown {
 301   text-align: center;
 302   list-style: none;
 303   margin: 0;
 304   padding: 0;
 305 }
 306
 307 .dropdown li {
 308   margin: 0;
 309   padding: 0;
 310 }
 311
 312 /*======= Font style popup =======*/
 313
 314 .dropdown-popup {
 315   min-width: 300px;
 316   text-align: start;
 317   position: absolute;
 318   left: 48px; /* offset to account for toolbar width */
 319   z-index: 1000;
 320   background-color: #fbfbfb;
 321   visibility: hidden;
 322   border-radius: 4px;
 323   border: 1px 1px 0 1px solid #b5b5b5;
 324   box-shadow: 0 1px 12px #666;
 325 }
 326
 327 .dropdown-popup > hr {
 328   display: none;
 329 }
 330
 331 .open > .dropdown-popup {
 332   visibility: visible;
 333 }
 334
 335 .dropdown-arrow {
 336   position: absolute;
 337   top: 30px; /* offset arrow from top of popup */
 338   left: -16px;
 339   width: 24px;
 340   height: 24px;
 341   background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
 342   display: block;
 343 }
 344
 345 #font-type-buttons,
 346 #font-size-buttons,
 347 #color-scheme-buttons {
 348   display: flex;
 349   flex-direction: row;
 350 }
 351
 352 #font-type-buttons > button:first-child {
 353   border-top-left-radius: 3px;
 354 }
 355 #font-type-buttons > button:last-child {
 356   border-top-right-radius: 3px;
 357 }
 358 #color-scheme-buttons > button:first-child {
 359   border-bottom-left-radius: 3px;
 360 }
 361 #color-scheme-buttons > button:last-child {
 362   border-bottom-right-radius: 3px;
 363 }
 364
 365 #font-type-buttons > button,
 366 #font-size-buttons > button,
 367 #color-scheme-buttons > button {
 368   text-align: center;
 369   border: 0;
 370 }
 371
 372 #font-type-buttons > button,
 373 #font-size-buttons > button {
 374   width: 50%;
 375   background-color: transparent;
 376   border-left: 1px solid #B5B5B5;
 377   border-bottom: 1px solid #B5B5B5;
 378 }
 379
 380 #color-scheme-buttons > button {
 381   width: 33.33%;
 382   font-size: 14px;
 383 }
 384
 385 #color-scheme-buttons > .dark-button {
 386   margin-top: -1px;
 387   height: 61px;
 388 }
 389
 390 #font-type-buttons > button:first-child,
 391 #font-size-buttons > button:first-child {
 392   border-left: 0;
 393 }
 394
 395 #font-type-buttons > button {
 396   display: inline-block;
 397   font-size: 58px;
 398   height: 100px;
 399 }
 400
 401 /* Make the serif button content the same size as the sans-serif button content. */
 402 #font-type-buttons > .serif-button {
 403   padding-top: 1px;
 404   font-size: 60px;
 405 }
 406
 407 #font-size-buttons > button,
 408 #color-scheme-buttons > button {
 409   height: 60px;
 410 }
 411
 412 #font-type-buttons > button:active:hover,
 413 #font-type-buttons > button.selected,
 414 #color-scheme-buttons > button:active:hover,
 415 #color-scheme-buttons > button.selected {
 416   box-shadow: inset 0 -3px 0 0 #fc6420;
 417 }
 418
 419 #font-type-buttons > button:active:hover,
 420 #font-type-buttons > button.selected {
 421   border-bottom: 1px solid #FC6420;
 422 }
 423
 424 #font-type-buttons > button > div {
 425   color: #666;
 426   font-size: 12px;
 427   margin-top: -4px;
 428 }
 429
 430 .button:hover,
 431 #font-size-buttons > button:hover,
 432 #font-type-buttons > button:hover {
 433   background-color: #ebebeb;
 434 }
 435
 436 .dropdown.open,
 437 .button:active,
 438 #font-size-buttons > button:active,
 439 #font-size-buttons > button.selected {
 440   background-color: #dadada;
 441 }
 442
 443 /* Only used on Android */
 444 #font-size-sample {
 445   display: none;
 446 }
 447
 448 .serif-button {
 449   font-family: "Charis SIL", Georgia, "Times New Roman", serif;
 450 }
 451
 452 .minus-button,
 453 .plus-button {
 454   background-color: transparent;
 455   border: 0;
 456   background-size: 18px 18px;
 457   background-repeat: no-repeat;
 458   background-position: center;
 459 }
 460
 461 .footer {
 462   height: 64px;
 463   background-color: #ebebeb;
 464   position: absolute;
 465   left: 0;
 466   width: 100%;
 467   text-align: center;
 468   padding: 12px 0;
 469   box-sizing: border-box;
 470   box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset;
 471 }
 472
 473 .sepia .footer {
 474   background-color: #dedad4;
 475 }
 476
 477 .remove-button {
 478   background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
 479   margin: 0 auto;
 480   border: 1px solid #c1c1c1;
 481   background-position: 10px 7px;
 482   padding-left: 42px;
 483   padding-right: 10px;
 484   border-radius: 2px;
 485   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 486   font-size: 18px;
 487 }
 488
 489
 490 /*======= Toolbar icons =======*/
 491
 492 /* Android-only controls */
 493 .share-button {
 494   display: none;
 495 }
 496
 497 .close-button {
 498   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
 499   height: 68px;
 500   background-position: center 8px;
 501 }
 502
 503 .close-button:hover {
 504   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
 505   background-color: #d94141;
 506   border-bottom: 1px solid #d94141;
 507   border-right: 1px solid #d94141;
 508 }
 509
 510 .close-button:hover:active {
 511   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
 512   background-color: #AE2325;
 513   border-bottom: 1px solid #AE2325;
 514   border-right: 1px solid #AE2325;
 515 }
 516
 517 .style-button {
 518   background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
 519 }
 520
 521 .toggle-button.on {
 522   background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
 523 }
 524
 525 .toggle-button {
 526   background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg");
 527 }
 528
 529 .list-button {
 530   background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg");
 531 }
 532 .list-button.on {
 533   background-color: #d9d9d9;
 534 }
 535
 536 .minus-button {
 537   background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
 538 }
 539
 540 .plus-button {
 541   background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
 542 }
 543
 544 @media print {
 545   .toolbar {
 546     display: none;
 547   }
 548   .footer {
 549     display: none;
 550   }
 551 }