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 10px 0;
  67   padding: 0;
  68   font-style: italic;
  69 }
  70
  71 .header > .meta-data {
  72   font-size: 0.65em;
  73   margin: 0 0 15px 0;
  74 }
  75
  76 /*======= Controls toolbar =======*/
  77
  78 .toolbar {
  79   font-family: Helvetica, Arial, sans-serif;
  80   position: fixed;
  81   height: 100%;
  82   top: 0;
  83   left: 0;
  84   margin: 0;
  85   padding: 0;
  86   list-style: none;
  87   background-color: #fbfbfb;
  88   -moz-user-select: none;
  89   border-right: 1px solid #b5b5b5;
  90   z-index: 1;
  91 }
  92
  93 .button {
  94   display: block;
  95   background-size: 24px 24px;
  96   background-repeat: no-repeat;
  97   color: #333;
  98   background-color: #fbfbfb;
  99   height: 40px;
 100   padding: 0;
 101 }
 102
 103 .toolbar .button {
 104   width: 40px;
 105   background-position: center;
 106   margin-right: -1px;
 107   border-top: 0;
 108   border-left: 0;
 109   border-right: 1px solid #b5b5b5;
 110   border-bottom: 1px solid #c1c1c1;
 111 }
 112
 113 .button[hidden] {
 114   display: none;
 115 }
 116
 117 .dropdown {
 118   text-align: center;
 119   list-style: none;
 120   margin: 0;
 121   padding: 0;
 122 }
 123
 124 .dropdown li {
 125   margin: 0;
 126   padding: 0;
 127 }
 128
 129 /*======= Popup =======*/
 130
 131 .dropdown-popup {
 132   min-width: 300px;
 133   text-align: start;
 134   position: absolute;
 135   left: 48px; /* offset to account for toolbar width */
 136   z-index: 1000;
 137   background-color: #fbfbfb;
 138   visibility: hidden;
 139   border-radius: 4px;
 140   border: 1px solid #b5b5b5;
 141   border-bottom-width: 0;
 142   box-shadow: 0 1px 3px #c1c1c1;
 143 }
 144
 145 .keep-open .dropdown-popup {
 146   z-index: initial;
 147 }
 148
 149 .dropdown-popup > hr {
 150   display: none;
 151 }
 152
 153 .open > .dropdown-popup {
 154   visibility: visible;
 155 }
 156
 157 .dropdown-arrow {
 158   position: absolute;
 159   top: 30px; /* offset arrow from top of popup */
 160   left: -16px;
 161   width: 16px;
 162   height: 24px;
 163   background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
 164   display: block;
 165 }
 166
 167 /*======= Font style popup =======*/
 168
 169 #font-type-buttons,
 170 #font-size-buttons,
 171 #color-scheme-buttons,
 172 #content-width-buttons,
 173 #line-height-buttons {
 174   display: flex;
 175   flex-direction: row;
 176 }
 177
 178 #font-type-buttons > button:first-child {
 179   border-top-left-radius: 3px;
 180 }
 181 #font-type-buttons > button:last-child {
 182   border-top-right-radius: 3px;
 183 }
 184 #color-scheme-buttons > button:first-child {
 185   border-bottom-left-radius: 3px;
 186 }
 187 #color-scheme-buttons > button:last-child {
 188   border-bottom-right-radius: 3px;
 189 }
 190
 191 #font-type-buttons > button,
 192 #font-size-buttons > button,
 193 #color-scheme-buttons > button,
 194 #content-width-buttons > button,
 195 #line-height-buttons > button {
 196   text-align: center;
 197   border: 0;
 198 }
 199
 200 #font-type-buttons > button,
 201 #font-size-buttons > button,
 202 #content-width-buttons > button,
 203 #line-height-buttons > button {
 204   width: 50%;
 205   background-color: transparent;
 206   border-left: 1px solid #B5B5B5;
 207   border-bottom: 1px solid #B5B5B5;
 208 }
 209
 210 #color-scheme-buttons > button {
 211   width: 33.33%;
 212   font-size: 14px;
 213 }
 214
 215 #color-scheme-buttons > .dark-button {
 216   margin-top: -1px;
 217   height: 61px;
 218 }
 219
 220 #font-type-buttons > button:first-child,
 221 #font-size-buttons > button:first-child,
 222 #content-width-buttons > button:first-child,
 223 #line-height-buttons > button:first-child {
 224   border-left: 0;
 225 }
 226
 227 #font-type-buttons > button {
 228   display: inline-block;
 229   font-size: 62px;
 230   height: 100px;
 231 }
 232
 233 #font-size-buttons > button,
 234 #color-scheme-buttons > button,
 235 #content-width-buttons > button,
 236 #line-height-buttons > button {
 237   height: 60px;
 238 }
 239
 240 #font-type-buttons > button:active:hover,
 241 #font-type-buttons > button.selected,
 242 #color-scheme-buttons > button:active:hover,
 243 #color-scheme-buttons > button.selected {
 244   box-shadow: inset 0 -3px 0 0 #fc6420;
 245 }
 246
 247 #font-type-buttons > button:active:hover,
 248 #font-type-buttons > button.selected {
 249   border-bottom: 1px solid #FC6420;
 250 }
 251
 252 /* Make the serif button content the same size as the sans-serif button content. */
 253 #font-type-buttons > button > .description {
 254   color: #666;
 255   font-size: 12px;
 256   margin-top: -5px;
 257 }
 258
 259 /* Font sizes are different per-platform, so we need custom CSS to line them up. */
 260 %ifdef XP_MACOSX
 261 #font-type-buttons > .sans-serif-button > .name {
 262   margin-top: 10px;
 263 }
 264
 265 #font-type-buttons > .sans-serif-button > .description {
 266   margin-top: -4px;
 267 }
 268
 269 #font-type-buttons > .serif-button > .name {
 270   font-size: 63px;
 271 }
 272 %elifdef XP_WIN
 273 #font-type-buttons > .sans-serif-button > .name {
 274   margin-top: 2px;
 275 }
 276
 277 #font-type-buttons > .sans-serif-button > .description {
 278   margin-top: -4px;
 279 }
 280
 281 #font-type-buttons > .serif-button > .name {
 282   font-size: 63px;
 283 }
 284 %else
 285 #font-type-buttons > .sans-serif-button > .name {
 286   margin-top: 5px;
 287 }
 288
 289 #font-type-buttons > .sans-serif-button > .description {
 290   margin-top: -8px;
 291 }
 292
 293 #font-type-buttons > .serif-button > .name {
 294   font-size: 70px;
 295 }
 296 %endif
 297
 298 .button:hover,
 299 #font-size-buttons > button:hover,
 300 #font-type-buttons > button:hover,
 301 #content-width-buttons > button:hover,
 302 #line-height-buttons > button:hover {
 303   background-color: #ebebeb;
 304 }
 305
 306 .dropdown.open,
 307 .button:active,
 308 #font-size-buttons > button:active,
 309 #font-size-buttons > button.selected,
 310 #content-width-buttons > button:active,
 311 #content-width-buttons > button.selected,
 312 #line-height-buttons > button:active,
 313 #line-height-buttons > button.selected {
 314   background-color: #dadada;
 315 }
 316
 317 /* Only used on Android */
 318 #font-size-sample {
 319   display: none;
 320 }
 321
 322 .minus-button,
 323 .plus-button,
 324 .content-width-minus-button,
 325 .content-width-plus-button,
 326 .line-height-minus-button,
 327 .line-height-plus-button {
 328   background-color: transparent;
 329   border: 0;
 330   background-size: 18px 18px;
 331   background-repeat: no-repeat;
 332   background-position: center;
 333 }
 334
 335 /*======= Toolbar icons =======*/
 336
 337 .close-button {
 338   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
 339   -moz-context-properties: fill;
 340   fill: #808080;
 341   height: 68px;
 342   background-position: center 8px;
 343 }
 344
 345 .close-button:hover {
 346   fill: #fff;
 347   background-color: #d94141;
 348   border-bottom: 1px solid #d94141;
 349   border-right: 1px solid #d94141;
 350 }
 351
 352 .close-button:hover:active {
 353   background-color: #AE2325;
 354   border-bottom: 1px solid #AE2325;
 355   border-right: 1px solid #AE2325;
 356 }
 357
 358 .style-button {
 359   background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
 360 }
 361
 362 .minus-button {
 363   background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
 364 }
 365
 366 .plus-button {
 367   background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
 368 }
 369
 370 .content-width-minus-button {
 371   background-size: 42px 16px;
 372   background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
 373 }
 374
 375 .content-width-plus-button {
 376   background-size: 44px 16px;
 377   background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
 378 }
 379
 380 .line-height-minus-button {
 381   background-size: 34px 14px;
 382   background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
 383 }
 384
 385 .line-height-plus-button {
 386   background-size: 34px 24px;
 387   background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
 388 }
 389
 390 @media print {
 391   .toolbar {
 392     display: none !important;
 393   }
 394 }