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