LCARStrek/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 #content-width-buttons,
 167 #line-height-buttons {
 168   display: flex;
 169   flex-direction: row;
 170 }
 171
 172 #font-type-buttons > button:first-child {
 173   border-top-left-radius: 3px;
 174 }
 175 #font-type-buttons > button:last-child {
 176   border-top-right-radius: 3px;
 177 }
 178 #color-scheme-buttons > button:first-child {
 179   border-bottom-left-radius: 3px;
 180 }
 181 #color-scheme-buttons > button:last-child {
 182   border-bottom-right-radius: 3px;
 183 }
 184
 185 #font-type-buttons > button,
 186 #font-size-buttons > button,
 187 #color-scheme-buttons > button,
 188 #content-width-buttons > button,
 189 #line-height-buttons > button {
 190   text-align: center;
 191   border: 0;
 192 }
 193
 194 #font-type-buttons > button,
 195 #font-size-buttons > button,
 196 #content-width-buttons > button,
 197 #line-height-buttons > button {
 198   width: 50%;
 199   background-color: transparent;
 200   border-left: 1px solid #B5B5B5;
 201   border-bottom: 1px solid #B5B5B5;
 202 }
 203
 204 #color-scheme-buttons > button {
 205   width: 33.33%;
 206   font-size: 14px;
 207 }
 208
 209 #color-scheme-buttons > .dark-button {
 210   margin-top: -1px;
 211   height: 61px;
 212 }
 213
 214 #font-type-buttons > button:first-child,
 215 #font-size-buttons > button:first-child,
 216 #content-width-buttons > button:first-child,
 217 #line-height-buttons > button:first-child {
 218   border-left: 0;
 219 }
 220
 221 #font-type-buttons > button {
 222   display: inline-block;
 223   font-size: 62px;
 224   height: 100px;
 225 }
 226
 227 #font-size-buttons > button,
 228 #color-scheme-buttons > button,
 229 #content-width-buttons > button,
 230 #line-height-buttons > button {
 231   height: 60px;
 232 }
 233
 234 #font-type-buttons > button:active:hover,
 235 #font-type-buttons > button.selected,
 236 #color-scheme-buttons > button:active:hover,
 237 #color-scheme-buttons > button.selected {
 238   box-shadow: inset 0 -3px 0 0 #fc6420;
 239 }
 240
 241 #font-type-buttons > button:active:hover,
 242 #font-type-buttons > button.selected {
 243   border-bottom: 1px solid #FC6420;
 244 }
 245
 246 /* Make the serif button content the same size as the sans-serif button content. */
 247 #font-type-buttons > button > .description {
 248   color: #666;
 249   font-size: 12px;
 250   margin-top: -5px;
 251 }
 252
 253 /* Font sizes are different per-platform, so we need custom CSS to line them up. */
 254 #font-type-buttons > .sans-serif-button > .name {
 255   margin-top: 2px;
 256 }
 257
 258 #font-type-buttons > .sans-serif-button > .description {
 259   margin-top: -4px;
 260 }
 261
 262 #font-type-buttons > .serif-button > .name {
 263   font-size: 63px;
 264 }
 265
 266 .button:hover,
 267 #font-size-buttons > button:hover,
 268 #font-type-buttons > button:hover,
 269 #content-width-buttons > button:hover,
 270 #line-height-buttons > button:hover {
 271   background-color: #ebebeb;
 272 }
 273
 274 .dropdown.open,
 275 .button:active,
 276 #font-size-buttons > button:active,
 277 #font-size-buttons > button.selected,
 278 #content-width-buttons > button:active,
 279 #content-width-buttons > button.selected,
 280 #line-height-buttons > button:active,
 281 #line-height-buttons > button.selected {
 282   background-color: #dadada;
 283 }
 284
 285 /* Only used on Android */
 286 #font-size-sample {
 287   display: none;
 288 }
 289
 290 .minus-button,
 291 .plus-button,
 292 .content-width-minus-button,
 293 .content-width-plus-button,
 294 .line-height-minus-button,
 295 .line-height-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 /*======= Toolbar icons =======*/
 304
 305 .close-button {
 306   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
 307   height: 68px;
 308   background-position: center 8px;
 309 }
 310
 311 .close-button:hover {
 312   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
 313   background-color: #d94141;
 314   border-bottom: 1px solid #d94141;
 315   border-right: 1px solid #d94141;
 316 }
 317
 318 .close-button:hover:active {
 319   background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
 320   background-color: #AE2325;
 321   border-bottom: 1px solid #AE2325;
 322   border-right: 1px solid #AE2325;
 323 }
 324
 325 .style-button {
 326   background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
 327 }
 328
 329 .minus-button {
 330   background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
 331 }
 332
 333 .plus-button {
 334   background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
 335 }
 336
 337 .content-width-minus-button {
 338   background-size: 42px 16px;
 339   background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
 340 }
 341
 342 .content-width-plus-button {
 343   background-size: 44px 16px;
 344   background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
 345 }
 346
 347 .line-height-minus-button {
 348   background-size: 34px 14px;
 349   background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
 350 }
 351
 352 .line-height-plus-button {
 353   background-size: 34px 24px;
 354   background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
 355 }
 356
 357 @media print {
 358   .toolbar {
 359     display: none !important;
 360   }
 361 }