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