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