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 51px;
   7 }
   8
   9 @media print {
  10   #container {
  11     max-width: 100% !important;
  12     font-size: 14px !important;
  13     font-family: Georgia, "Times New Roman", serif !important;
  14   }
  15
  16   body {
  17     padding-top: 0px;
  18     padding-bottom: 0px;
  19   }
  20 }
  21
  22 body.loaded {
  23   transition: color 0.4s, background-color 0.4s;
  24 }
  25
  26 body.light {
  27   color: #333333;
  28   background-color: #ffffff;
  29 }
  30
  31 body.dark {
  32   color: #eeeeee;
  33   background-color: #333333;
  34 }
  35
  36 body.dark *::-moz-selection {
  37   background-color: #FFFFFF;
  38   color: #0095DD;
  39 }
  40 body.dark a::-moz-selection {
  41   color: #DD4800;
  42 }
  43
  44 body.sepia {
  45   color: #5b4636;
  46   background-color: #f4ecd8;
  47 }
  48
  49 body.sans-serif,
  50 body.sans-serif .remove-button {
  51   font-family: Helvetica, Arial, sans-serif;
  52 }
  53
  54 body.serif,
  55 body.serif .remove-button  {
  56   font-family: Georgia, "Times New Roman", serif;
  57 }
  58
  59 #container {
  60   max-width: 30em;
  61   margin: 0 auto;
  62 }
  63
  64 #container.font-size1 {
  65   font-size: 12px;
  66 }
  67
  68 #container.font-size2 {
  69   font-size: 14px;
  70 }
  71
  72 #container.font-size3 {
  73   font-size: 16px;
  74 }
  75
  76 #container.font-size4  {
  77   font-size: 18px;
  78 }
  79
  80 #container.font-size5 {
  81   font-size: 20px;
  82 }
  83
  84 #container.font-size6 {
  85   font-size: 22px;
  86 }
  87
  88 #container.font-size7 {
  89   font-size: 24px;
  90 }
  91
  92 #container.font-size8 {
  93   font-size: 26px;
  94 }
  95
  96 #container.font-size9 {
  97   font-size: 28px;
  98 }
  99
 100 #container.content-width1 {
 101   max-width: 20em;
 102 }
 103
 104 #container.content-width2 {
 105   max-width: 25em;
 106 }
 107
 108 #container.content-width3 {
 109   max-width: 30em;
 110 }
 111
 112 #container.content-width4  {
 113   max-width: 35em;
 114 }
 115
 116 #container.content-width5 {
 117   max-width: 40em;
 118 }
 119
 120 #container.content-width6 {
 121   max-width: 45em;
 122 }
 123
 124 #container.content-width7 {
 125   max-width: 50em;
 126 }
 127
 128 #container.content-width8 {
 129   max-width: 55em;
 130 }
 131
 132 #container.content-width9 {
 133   max-width: 60em;
 134 }
 135
 136 /* Override some controls and content styles based on color scheme */
 137
 138 body.light > .container > .header > .domain {
 139   border-bottom-color: #333333 !important;
 140 }
 141
 142 body.sepia > .container > .header > .domain {
 143   border-bottom-color: #5b4636 !important;
 144 }
 145
 146 body.dark > .container > .header > .domain {
 147   border-bottom-color: #eeeeee !important;
 148 }
 149
 150 body.sepia > .container > .footer {
 151   background-color: #dedad4 !important;
 152 }
 153
 154 body.light blockquote {
 155   border-inline-start: 2px solid #333333 !important;
 156 }
 157
 158 body.sepia blockquote {
 159   border-inline-start: 2px solid #5b4636 !important;
 160 }
 161
 162 body.dark blockquote {
 163   border-inline-start: 2px solid #eeeeee !important;
 164 }
 165
 166 /* Add toolbar transition base on loaded class  */
 167
 168 body.loaded .toolbar {
 169   transition: transform 0.3s ease-out;
 170 }
 171
 172 body:not(.loaded) .toolbar:-moz-locale-dir(ltr) {
 173   transform: translateX(-100%);
 174 }
 175
 176 body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
 177   transform: translateX(100%);
 178 }