EarlyBlue/global/aboutReaderControls.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 .light-button {
   6   color: #333333;
   7   background-color: #ffffff;
   8 }
   9
  10 .dark-button {
  11   color: #eeeeee;
  12   background-color: #333333;
  13 }
  14
  15 .sepia-button {
  16   color: #5b4636;
  17   background-color: #f4ecd8;
  18 }
  19
  20 .sans-serif-button {
  21   font-family: Helvetica, Arial, sans-serif;
  22 }
  23
  24 .serif-button {
  25   font-family: Georgia, "Times New Roman", serif;
  26 }
  27
  28 /* Loading/error message */
  29
  30 #reader-message {
  31   margin-top: 40px;
  32   display: none;
  33   text-align: center;
  34   width: 100%;
  35   font-size: 0.9em;
  36 }
  37
  38 /* Header */
  39
  40 .header {
  41   text-align: start;
  42   display: none;
  43 }
  44
  45 .domain {
  46   font-size: 0.9em;
  47   line-height: 1.48em;
  48   padding-bottom: 4px;
  49   font-family: Helvetica, Arial, sans-serif;
  50   text-decoration: none;
  51   border-bottom: 1px solid;
  52   color: #0095dd;
  53 }
  54
  55 .header > h1 {
  56   font-size: 1.6em;
  57   line-height: 1.25em;
  58   width: 100%;
  59   margin: 30px 0;
  60   padding: 0;
  61 }
  62
  63 .header > .credits {
  64   font-size: 0.9em;
  65   line-height: 1.48em;
  66   margin: 0 0 30px 0;
  67   padding: 0;
  68   font-style: italic;
  69 }
  70
  71 /*======= Controls toolbar =======*/
  72
  73 .toolbar {
  74   font-family: Helvetica, Arial, sans-serif;
  75   position: fixed;
  76   height: 100%;
  77   top: 0;
  78   left: 0;
  79   margin: 0;
  80   padding: 0;
  81   list-style: none;
  82   background-color: #fbfbfb;
  83   -moz-user-select: none;
  84   border-right: 1px solid #b5b5b5;
  85 }
  86
  87 .button {
  88   display: block;
  89   background-size: 24px 24px;
  90   background-repeat: no-repeat;
  91   color: #333;
  92   background-color: #fbfbfb;
  93   height: 40px;
  94   padding: 0;
  95 }
  96
  97 .toolbar .button {
  98   width: 40px;
  99   background-position: center;
 100   margin-right: -1px;
 101   border-top: 0;
 102   border-left: 0;
 103   border-right: 1px solid #b5b5b5;
 104   border-bottom: 1px solid #c1c1c1;
 105 }
 106
 107 .button[hidden] {
 108   display: none;
 109 }
 110
 111 .dropdown {
 112   text-align: center;
 113   list-style: none;
 114   margin: 0;
 115   padding: 0;
 116 }
 117
 118 .dropdown li {
 119   margin: 0;
 120   padding: 0;
 121 }
 122
 123 /*======= Popup =======*/
 124
 125 .dropdown-popup {
 126   min-width: 300px;
 127   text-align: start;
 128   position: absolute;
 129   left: 48px; /* offset to account for toolbar width */
 130   z-index: 1000;
 131   background-color: #fbfbfb;
 132   visibility: hidden;
 133   border-radius: 4px;
 134   border: 1px solid #b5b5b5;
 135   border-bottom-width: 0;
 136   box-shadow: 0 1px 12px #666;
 137 }
 138
 139 .keep-open .dropdown-popup {
 140   z-index: initial;
 141 }
 142
 143 .dropdown-popup > hr {
 144   display: none;
 145 }
 146
 147 .open > .dropdown-popup {
 148   visibility: visible;
 149 }
 150
 151 .dropdown-arrow {
 152   position: absolute;
 153   top: 30px; /* offset arrow from top of popup */
 154   left: -16px;
 155   width: 24px;
 156   height: 24px;
 157   background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
 158   display: block;
 159 }
 160
 161 /*======= Font style popup =======*/
 162
 163 #font-type-buttons,
 164 #font-size-buttons,
 165 #color-scheme-buttons {
 166   display: flex;
 167   flex-direction: row;
 168 }
 169
 170 #font-type-buttons > button:first-child {
 171   border-top-left-radius: 3px;
 172 }
 173 #font-type-buttons > button:last-child {
 174   border-top-right-radius: 3px;
 175 }
 176 #color-scheme-buttons > button:first-child {
 177   border-bottom-left-radius: 3px;
 178 }
 179 #color-scheme-buttons > button:last-child {
 180   border-bottom-right-radius: 3px;
 181 }
 182
 183 #font-type-buttons > button,
 184 #font-size-buttons > button,
 185 #color-scheme-buttons > button {
 186   text-align: center;
 187   border: 0;
 188 }
 189
 190 #font-type-buttons > button,
 191 #font-size-buttons > button {
 192   width: 50%;
 193   background-color: transparent;
 194   border-left: 1px solid #B5B5B5;
 195   border-bottom: 1px solid #B5B5B5;
 196 }
 197
 198 #color-scheme-buttons > button {
 199   width: 33.33%;
 200   font-size: 14px;
 201 }
 202
 203 #color-scheme-buttons > .dark-button {
 204   margin-top: -1px;
 205   height: 61px;
 206 }
 207
 208 #font-type-buttons > button:first-child,
 209 #font-size-buttons > button:first-child {
 210   border-left: 0;
 211 }
 212
 213 #font-type-buttons > button {
 214   display: inline-block;
 215   font-size: 62px;
 216   height: 100px;
 217 }
 218
 219 #font-size-buttons > button,
 220 #color-scheme-buttons > button {
 221   height: 60px;
 222 }
 223
 224 #font-type-buttons > button:active:hover,
 225 #font-type-buttons > button.selected,
 226 #color-scheme-buttons > button:active:hover,
 227 #color-scheme-buttons > button.selected {
 228   box-shadow: inset 0 -3px 0 0 #fc6420;
 229 }
 230
 231 #font-type-buttons > button:active:hover,
 232 #font-type-buttons > button.selected {
 233   border-bottom: 1px solid #FC6420;
 234 }
 235
 236 /* Make the serif button content the same size as the sans-serif button content. */
 237 #font-type-buttons > button > .description {
 238   color: #666;
 239   font-size: 12px;
 240   margin-top: -5px;
 241 }
 242
 243 /* Font sizes are different per-platform, so we need custom CSS to line them up. */
 244 %ifdef XP_MACOSX
 245 #font-type-buttons > .sans-serif-button > .name {
 246   margin-top: 10px;
 247 }
 248
 249 #font-type-buttons > .sans-serif-button > .description {
 250   margin-top: -4px;
 251 }
 252
 253 #font-type-buttons > .serif-button > .name {
 254   font-size: 63px;
 255 }
 256 %elifdef XP_WIN
 257 #font-type-buttons > .sans-serif-button > .name {
 258   margin-top: 2px;
 259 }
 260
 261 #font-type-buttons > .sans-serif-button > .description {
 262   margin-top: -4px;
 263 }
 264
 265 #font-type-buttons > .serif-button > .name {
 266   font-size: 63px;
 267 }
 268 %else
 269 #font-type-buttons > .sans-serif-button > .name {
 270   margin-top: 5px;
 271 }
 272
 273 #font-type-buttons > .sans-serif-button > .description {
 274   margin-top: -8px;
 275 }
 276
 277 #font-type-buttons > .serif-button > .name {
 278   font-size: 70px;
 279 }
 280 %endif
 281
 282 .button:hover,
 283 #font-size-buttons > button:hover,
 284 #font-type-buttons > button:hover {
 285   background-color: #ebebeb;
 286 }
 287
 288 .dropdown.open,
 289 .button:active,
 290 #font-size-buttons > button:active,
 291 #font-size-buttons > button.selected {
 292   background-color: #dadada;
 293 }
 294
 295 /* Only used on Android */
 296 #font-size-sample {
 297   display: none;
 298 }
 299
 300 .minus-button,
 301 .plus-button {
 302   background-color: transparent;
 303   border: 0;
 304   background-size: 18px 18px;
 305   background-repeat: no-repeat;
 306   background-position: center;
 307 }
 308
 309 /*======= Toolbar icons =======*/
 310
 311 .close-button {
 312   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
 313   height: 68px;
 314   background-position: center 8px;
 315 }
 316
 317 .close-button:hover {
 318   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
 319   background-color: #d94141;
 320   border-bottom: 1px solid #d94141;
 321   border-right: 1px solid #d94141;
 322 }
 323
 324 .close-button:hover:active {
 325   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
 326   background-color: #AE2325;
 327   border-bottom: 1px solid #AE2325;
 328   border-right: 1px solid #AE2325;
 329 }
 330
 331 .style-button {
 332   background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
 333 }
 334
 335 .minus-button {
 336   background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
 337 }
 338
 339 .plus-button {
 340   background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
 341 }
 342
 343 #pocket-button {
 344   background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark");
 345 }
 346
 347 #pocket-button:hover:active {
 348   background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added");
 349 }
 350
 351 @media print {
 352   .toolbar {
 353     display: none !important;
 354   }
 355 }