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 /*======= Font style 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 .dropdown-popup > hr {
 140   display: none;
 141 }
 142
 143 .open > .dropdown-popup {
 144   visibility: visible;
 145 }
 146
 147 .dropdown-arrow {
 148   position: absolute;
 149   top: 30px; /* offset arrow from top of popup */
 150   left: -16px;
 151   width: 24px;
 152   height: 24px;
 153   background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
 154   display: block;
 155 }
 156
 157 #font-type-buttons,
 158 #font-size-buttons,
 159 #color-scheme-buttons {
 160   display: flex;
 161   flex-direction: row;
 162 }
 163
 164 #font-type-buttons > button:first-child {
 165   border-top-left-radius: 3px;
 166 }
 167 #font-type-buttons > button:last-child {
 168   border-top-right-radius: 3px;
 169 }
 170 #color-scheme-buttons > button:first-child {
 171   border-bottom-left-radius: 3px;
 172 }
 173 #color-scheme-buttons > button:last-child {
 174   border-bottom-right-radius: 3px;
 175 }
 176
 177 #font-type-buttons > button,
 178 #font-size-buttons > button,
 179 #color-scheme-buttons > button {
 180   text-align: center;
 181   border: 0;
 182 }
 183
 184 #font-type-buttons > button,
 185 #font-size-buttons > button {
 186   width: 50%;
 187   background-color: transparent;
 188   border-left: 1px solid #B5B5B5;
 189   border-bottom: 1px solid #B5B5B5;
 190 }
 191
 192 #color-scheme-buttons > button {
 193   width: 33.33%;
 194   font-size: 14px;
 195 }
 196
 197 #color-scheme-buttons > .dark-button {
 198   margin-top: -1px;
 199   height: 61px;
 200 }
 201
 202 #font-type-buttons > button:first-child,
 203 #font-size-buttons > button:first-child {
 204   border-left: 0;
 205 }
 206
 207 #font-type-buttons > button {
 208   display: inline-block;
 209   font-size: 62px;
 210   height: 100px;
 211 }
 212
 213 #font-size-buttons > button,
 214 #color-scheme-buttons > button {
 215   height: 60px;
 216 }
 217
 218 #font-type-buttons > button:active:hover,
 219 #font-type-buttons > button.selected,
 220 #color-scheme-buttons > button:active:hover,
 221 #color-scheme-buttons > button.selected {
 222   box-shadow: inset 0 -3px 0 0 #fc6420;
 223 }
 224
 225 #font-type-buttons > button:active:hover,
 226 #font-type-buttons > button.selected {
 227   border-bottom: 1px solid #FC6420;
 228 }
 229
 230 /* Make the serif button content the same size as the sans-serif button content. */
 231 #font-type-buttons > button > .description {
 232   color: #666;
 233   font-size: 12px;
 234   margin-top: -5px;
 235 }
 236
 237 /* Font sizes are different per-platform, so we need custom CSS to line them up. */
 238 %ifdef XP_MACOSX
 239 #font-type-buttons > .sans-serif-button > .name {
 240   margin-top: 10px;
 241 }
 242
 243 #font-type-buttons > .sans-serif-button > .description {
 244   margin-top: -4px;
 245 }
 246
 247 #font-type-buttons > .serif-button > .name {
 248   font-size: 63px;
 249 }
 250 %elifdef XP_WIN
 251 #font-type-buttons > .sans-serif-button > .name {
 252   margin-top: 2px;
 253 }
 254
 255 #font-type-buttons > .sans-serif-button > .description {
 256   margin-top: -4px;
 257 }
 258
 259 #font-type-buttons > .serif-button > .name {
 260   font-size: 63px;
 261 }
 262 %else
 263 #font-type-buttons > .sans-serif-button > .name {
 264   margin-top: 5px;
 265 }
 266
 267 #font-type-buttons > .sans-serif-button > .description {
 268   margin-top: -8px;
 269 }
 270
 271 #font-type-buttons > .serif-button > .name {
 272   font-size: 70px;
 273 }
 274 %endif
 275
 276 .button:hover,
 277 #font-size-buttons > button:hover,
 278 #font-type-buttons > button:hover {
 279   background-color: #ebebeb;
 280 }
 281
 282 .dropdown.open,
 283 .button:active,
 284 #font-size-buttons > button:active,
 285 #font-size-buttons > button.selected {
 286   background-color: #dadada;
 287 }
 288
 289 /* Only used on Android */
 290 #font-size-sample {
 291   display: none;
 292 }
 293
 294 .minus-button,
 295 .plus-button {
 296   background-color: transparent;
 297   border: 0;
 298   background-size: 18px 18px;
 299   background-repeat: no-repeat;
 300   background-position: center;
 301 }
 302
 303 .footer {
 304   height: 64px;
 305   background-color: #ebebeb;
 306   position: absolute;
 307   left: 0;
 308   width: 100%;
 309   text-align: center;
 310   padding: 12px 0;
 311   box-sizing: border-box;
 312   box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset;
 313 }
 314
 315 .remove-button {
 316   background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
 317   margin: 0 auto;
 318   border: 1px solid #c1c1c1;
 319   background-position: 10px 7px;
 320   padding-left: 42px;
 321   padding-right: 10px;
 322   border-radius: 2px;
 323   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 324   font-size: 18px;
 325 }
 326
 327
 328 /*======= Toolbar icons =======*/
 329
 330 /* Android-only controls */
 331 .share-button {
 332   display: none;
 333 }
 334
 335 .close-button {
 336   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
 337   height: 68px;
 338   background-position: center 8px;
 339 }
 340
 341 .close-button:hover {
 342   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
 343   background-color: #d94141;
 344   border-bottom: 1px solid #d94141;
 345   border-right: 1px solid #d94141;
 346 }
 347
 348 .close-button:hover:active {
 349   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
 350   background-color: #AE2325;
 351   border-bottom: 1px solid #AE2325;
 352   border-right: 1px solid #AE2325;
 353 }
 354
 355 .style-button {
 356   background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
 357 }
 358
 359 .toggle-button.on {
 360   background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
 361 }
 362
 363 .toggle-button {
 364   background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg");
 365 }
 366
 367 .list-button {
 368   background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg");
 369 }
 370 .list-button.on {
 371   background-color: #d9d9d9;
 372 }
 373
 374 .minus-button {
 375   background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
 376 }
 377
 378 .plus-button {
 379   background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
 380 }
 381
 382 #pocket-button {
 383   background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark");
 384 }
 385
 386 #pocket-button:hover:active {
 387   background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added");
 388 }
 389
 390 @media print {
 391   .toolbar {
 392     display: none !important;
 393   }
 394   .footer {
 395     display: none !important;
 396   }
 397 }