LCARStrek/browser/preferences/in-content/preferences.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 /* === BEGIN shared/incontentprefs/preferences.inc.css === */
   6
   7 @namespace html "http://www.w3.org/1999/xhtml";
   8
   9 .main-content {
  10   padding: 1.5em 0 0; /* That padding needs to match the upper stripe. */
  11   overflow: auto;
  12
  13   /* This actually results in two black boxes extending to the right and bottom,
  14    * leaving the LCARS-gray background only in a top stripe and
  15    * a bit larger area on the top left.
  16    * The prefpane will overlay that with the rounded shape we want. */
  17   background-color: #A09090;
  18   background-position: 3em 1.5em, 0px 5em;
  19   background-image: linear-gradient(0deg, #000, #000), linear-gradient(0deg, #000, #000);
  20   background-repeat: no-repeat;
  21 }
  22
  23 #mainPrefPane {
  24   padding: 10px 20px 0px;
  25   border-radius: 1em 0 0 0;
  26   background-color: #000000;
  27
  28   max-width: 800px;
  29   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  30   font-size: 1.25rem;
  31   color: #FF9F00;
  32 }
  33
  34 * {
  35   -moz-user-select: text;
  36 }
  37
  38 button,
  39 treecol {
  40   /* override the * rule */
  41   -moz-user-select: none;
  42 }
  43
  44 /* Category List */
  45
  46 #categories {
  47   max-height: 100vh;
  48 }
  49
  50 #categories > scrollbox {
  51   overflow-x: hidden !important;
  52 }
  53
  54 /**
  55  * We want the last category to always have non-0 getBoundingClientRect().bottom
  56  * so we can use the value to figure out the max-height of the list in
  57  * preferences.js, so use collapse instead of display: none; if it's hidden
  58  */
  59 #categories > .category[hidden="true"] {
  60   display: -moz-box;
  61   visibility: collapse;
  62 }
  63
  64 #category-general > .category-icon {
  65   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general");
  66 }
  67
  68 #category-general:hover > .category-icon,
  69 #category-general[selected] > .category-icon {
  70   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general-active");
  71 }
  72
  73 #category-search > .category-icon {
  74   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search");
  75 }
  76
  77 #category-search:hover > .category-icon,
  78 #category-search[selected] > .category-icon {
  79   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search-active");
  80 }
  81
  82 #category-content > .category-icon {
  83   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content");
  84 }
  85
  86 #category-content:hover > .category-icon,
  87 #category-content[selected] > .category-icon {
  88   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content-active");
  89 }
  90
  91 #category-application > .category-icon {
  92   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications");
  93 }
  94
  95 #category-application:hover > .category-icon,
  96 #category-application[selected] > .category-icon {
  97   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications-active");
  98 }
  99
 100 #category-privacy > .category-icon {
 101   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy");
 102 }
 103
 104 #category-privacy:hover > .category-icon,
 105 #category-privacy[selected] > .category-icon {
 106   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy-active");
 107 }
 108
 109 #category-security > .category-icon {
 110   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security");
 111 }
 112
 113 #category-security:hover > .category-icon,
 114 #category-security[selected] > .category-icon {
 115   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security-active");
 116 }
 117
 118 #category-sync > .category-icon {
 119   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync");
 120 }
 121
 122 #category-sync:hover > .category-icon,
 123 #category-sync[selected] > .category-icon {
 124   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync-active");
 125 }
 126
 127 #category-advanced > .category-icon {
 128   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced");
 129 }
 130
 131 #category-advanced:hover > .category-icon,
 132 #category-advanced[selected] > .category-icon {
 133   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced-active");
 134 }
 135
 136 @media (max-width: 800px) {
 137   .category-name {
 138     display: none;
 139   }
 140 }
 141
 142 /* header */
 143
 144 #header-advanced {
 145   border-bottom: none;
 146   padding-bottom: 0;
 147 }
 148
 149 .indent {
 150   margin-top: 7px;
 151   margin-bottom: 7px;
 152 }
 153
 154 /* General Pane */
 155
 156 #startupTable {
 157   border-collapse: collapse;
 158 }
 159
 160 #startupTable > tr > td {
 161   padding: 0; /* remove the padding from html.css */
 162 }
 163
 164 #startupTable > tr:not(:first-child) > td {
 165   padding-top: 0.5em; /* add a spacing between the rows */
 166 }
 167
 168 #startupTable > tr > .label-cell {
 169   text-align: end;
 170   width: 0; /* make the column as small as possible */
 171 }
 172
 173 #startupTable > tr > .label-cell > label {
 174   white-space: nowrap;
 175 }
 176
 177 #startupTable > tr > .content-cell > menulist,
 178 #startupTable > tr > .content-cell > textbox {
 179   width: calc(100% - 8px);
 180   margin-left: 4px;
 181   margin-right: 4px;
 182 }
 183
 184 #startupTable > tr > .homepage-buttons {
 185   display: flex;
 186   flex-wrap: wrap;
 187 }
 188
 189 #startupTable > tr > .homepage-buttons > .content-cell-item {
 190   flex-grow: 1;
 191 }
 192
 193 #useFirefoxSync  {
 194   font-size: 90%;
 195   -moz-margin-end: 8px !important;
 196 }
 197
 198 #getStarted {
 199   font-size: 90%;
 200 }
 201
 202 #isNotDefaultLabel {
 203   font-weight: bold;
 204 }
 205
 206 /* Content pane */
 207 #playDRMContentLink {
 208   /* Line up with the buttons in the other grid bits: */
 209   margin-left: 4px !important;
 210   margin-right: 4px !important;
 211 }
 212
 213 #defaultFontSizeLabel {
 214   /* !important needed to override common !important rule */
 215   -moz-margin-start: 4px !important;
 216 }
 217
 218 /* Applications Pane Styles */
 219
 220 #applicationsContent {
 221   padding: 15px 0;
 222 }
 223
 224 #filter {
 225   -moz-margin-start: 0;
 226 }
 227
 228 #handlersView {
 229   height: 25em;
 230 }
 231
 232 #handlersView > richlistitem {
 233   min-height: 36px !important;
 234 }
 235
 236 .typeIcon {
 237   -moz-margin-start: 10px !important;
 238   -moz-margin-end: 9px !important;
 239 }
 240
 241 .actionIcon {
 242   -moz-margin-start: 11px !important;
 243   -moz-margin-end: 8px !important;
 244 }
 245
 246 .actionsMenu {
 247   min-height: 36px;
 248 }
 249
 250 .actionsMenu > menupopup > menuitem {
 251   -moz-padding-start: 10px !important;
 252 }
 253
 254 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
 255   -moz-margin-end: 8px !important;
 256 }
 257
 258 /* Collapse the non-active vboxes in decks to use only the height the
 259    active vbox needs */
 260 #historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
 261 #historyPane:not([selectedIndex="2"]) > #historyCustomPane,
 262 #weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount,
 263 #weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate,
 264 #weavePrefsDeck:not([selectedIndex="3"]) > #noFxaAccount,
 265 #weavePrefsDeck:not([selectedIndex="4"]) > #hasFxaAccount,
 266 #fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
 267 #fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
 268   visibility: collapse;
 269 }
 270
 271 /* XXX This style is for bug 740213 and should be removed once that
 272    bug has a solution. */
 273 description > html|a {
 274   cursor: pointer;
 275 }
 276
 277 #noFxaAccount {
 278   /* Overriding the margins from the base preferences.css theme file.
 279      These overrides can be simplified by fixing bug 1027174 */
 280   margin: 0;
 281 }
 282
 283 #weavePrefsDeck > vbox > label,
 284 #weavePrefsDeck > vbox > groupbox,
 285 #weavePrefsDeck > vbox > description,
 286 #weavePrefsDeck > vbox > #pairDevice > label,
 287 #weavePrefsDeck > #needsUpdate > hbox > #loginError,
 288 #weavePrefsDeck > #hasFxaAccount > vbox > label,
 289 #weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label {
 290   /* no margin-start for elements at the begin of a line */
 291   -moz-margin-start: 0;
 292 }
 293
 294 #advancedPrefs {
 295   padding-bottom: 0; /* no padding needed in inContent prefs */
 296 }
 297
 298 #tabsElement {
 299 /*  -moz-margin-end: 4px; / add the 4px end-margin of other elements */
 300 }
 301
 302 #telemetryLearnMore,
 303 #FHRLearnMore,
 304 #crashReporterLearnMore {
 305   /* provide some margin between the links and the label text */
 306   /* !important is needed to override the rules defined in common.css */
 307   -moz-margin-start: 20px !important;
 308   /* center the links */
 309   margin-top: 8px;
 310   margin-bottom: 8px;
 311 }
 312
 313 .text-link {
 314   margin-bottom: 0;
 315 }
 316
 317 #showUpdateHistory {
 318   -moz-margin-start: 0;
 319 }
 320
 321 /**
 322  * Dialog
 323  */
 324
 325 #dialogOverlay {
 326   background-color: rgba(0,0,0,0.75);
 327   visibility: hidden;
 328 }
 329
 330 #dialogBox {
 331   background-color: #000000;
 332   background-clip: content-box;
 333   color: #FF9F00;
 334   /* font-size: 14px; */
 335   border: 1px solid #9C9CFF;
 336   border-radius: 10px;
 337   display: -moz-box;
 338   margin: 0;
 339   padding-right: 6px;
 340   padding-left: 6px;
 341 }
 342
 343 #dialogBox[resizable="true"] {
 344   resize: both;
 345   overflow: hidden;
 346   min-height: 20em;
 347   min-width: 66ch;
 348 }
 349
 350 #dialogBox > .groupbox-title {
 351   -moz-margin-start: 0;
 352   -moz-margin-end: 0;
 353 /*  padding: 3.5px 0;
 354   background-color: #F1F1F1; */
 355 }
 356
 357 #dialogTitle {
 358   text-align: center;
 359   -moz-user-select: none;
 360 }
 361
 362 .close-icon {
 363   background-color: transparent !important;
 364   border: none;
 365   box-shadow: none;
 366   padding: 0;
 367   height: auto;
 368   min-height: 16px;
 369   min-width: 0;
 370 }
 371
 372 #dialogBox > .groupbox-title > caption {
 373   margin: 0;
 374   border-radius: 1000px;
 375   background-color: #A09090;
 376 }
 377
 378 #dialogBox > .groupbox-body {
 379   -moz-appearance: none;
 380   padding: 0;
 381 }
 382
 383 #dialogFrame {
 384   -moz-box-flex: 1;
 385   /* Default dialog dimensions */
 386   height: 20em;
 387   width: 66ch;
 388 }
 389
 390 .largeDialogContainer.doScroll {
 391   overflow-y: auto;
 392   -moz-box-flex: 1;
 393 }
 394
 395 /**
 396  * End Dialog
 397  */
 398
 399 /**
 400  * Font dialog menulist fixes
 401  */
 402
 403 #defaultFontType,
 404 #serif,
 405 #sans-serif,
 406 #monospace {
 407   min-width: 30ch;
 408 }
 409
 410 /**
 411  * Sync migration
 412  */
 413 #sync-migrate-upgrade-description {
 414   /* description elts need a min-width to wrap correctly - bug 630864? */
 415   min-width: 100px
 416 }
 417
 418 #sync-migration {
 419   border: 1px solid #9C9CFF;
 420   background-color: #000000;
 421   color: #A09090;
 422   text-shadow: none;
 423   margin: 5px 0 0 0;
 424   animation: fadein 3000ms;
 425 }
 426
 427 @keyframes fadein {
 428   from { opacity: 0; }
 429   to   { opacity: 1; }
 430 }
 431
 432 /**
 433  * Sync
 434  */
 435
 436 #fxaProfileImage {
 437   max-width: 60px;
 438   border-radius: 50%;
 439   list-style-image: url(chrome://browser/skin/fxa/default-avatar.png);
 440   margin-inline-end: 15px;
 441 }
 442
 443 #fxaProfileImage.actionable {
 444   cursor: pointer;
 445 }
 446
 447 #fxaProfileImage.actionable:hover {
 448   box-shadow: 0px 0px 0px 1px #FFCF00;
 449 }
 450
 451 #fxaProfileImage.actionable:hover:active {
 452   box-shadow: 0px 0px 0px 1px #FF9F00;
 453 }
 454
 455 #noFxaAccount {
 456   /* Overriding the margins from the base preferences.css theme file.
 457      These overrides can be simplified by fixing bug 1027174 */
 458   margin: 0;
 459   padding-top: 15px;
 460 }
 461
 462 #fxaContentWrapper {
 463   -moz-box-flex: 1;
 464 }
 465
 466 #noFxaGroup {
 467   -moz-box-flex: 1;
 468   margin: 0;
 469 }
 470
 471 #fxaContentWrapper {
 472   padding-right: 15px;
 473 }
 474
 475 #noFxaGroup > vbox,
 476 #fxaGroup {
 477   -moz-box-align: start;
 478 }
 479
 480 #syncStatusMessage {
 481   visibility: collapse;
 482   opacity: 0;
 483   transition: opacity 1s linear;
 484   padding: 14px 8px 14px 14px;
 485   border-radius: 2px;
 486 }
 487
 488 #syncStatusMessage[message-type] {
 489   visibility: visible;
 490   opacity: 1;
 491 }
 492
 493 #syncStatusMessage[message-type="verify-success"] {
 494   background-color: #008484;
 495 }
 496
 497 #syncStatusMessage[message-type="verify-error"] {
 498   background-color: #FF0000;
 499 }
 500
 501 #syncStatusMessage[message-type="migration"] {
 502   background-color: #FF9F00;
 503 }
 504
 505 #syncStatusMessageWrapper {
 506   -moz-box-flex: 1;
 507   padding-right: 5px;
 508 }
 509
 510 #syncStatusMessageTitle, #syncStatusMessageDescription {
 511   color: #9C9CFF;
 512 }
 513
 514 #syncStatusMessage[message-type="migration"] #syncStatusMessageTitle {
 515   display: none;
 516 }
 517
 518 #syncStatusMessageTitle {
 519   font-weight: bold !important;
 520   font-size: 16px;
 521   line-height: 157%;
 522   margin: 0 0 20px;
 523 }
 524
 525 #syncStatusMessageDescription {
 526   font-size: 14px;
 527   line-height: 158%;
 528   margin: 0 !important;
 529 }
 530
 531 #syncStatusMessageClose {
 532   margin: 0px;
 533 }
 534
 535 #fxaSyncEngines > vbox:first-child {
 536   margin-right: 80px;
 537 }
 538
 539 #fxaSyncComputerName {
 540   margin-inline-start: 0px;
 541   -moz-box-flex: 1;
 542 }
 543
 544 #tosPP-small-ToS {
 545   margin-bottom: 14px;
 546 }
 547
 548 #noFxaCaption {
 549   font-weight: bold;
 550   margin-bottom: 11px;
 551 }
 552
 553 .fxaSyncIllustration {
 554   margin-top: 35px;
 555 }
 556
 557 #syncOptions caption {
 558   margin-bottom: 11px;
 559 }
 560
 561 #fxaDeviceName {
 562   margin-bottom: 27.5px;
 563 }
 564
 565 #noFxaDescription {
 566   margin-bottom: 20px !important;
 567 }
 568
 569 .separator {
 570   border-bottom: 1px solid var(--in-content-header-border-color);
 571 }
 572
 573 .fxaAccountBox {
 574   border: 1px solid #A09090;
 575   border-radius: 5px;
 576   padding: 14px 20px 14px 14px;
 577 }
 578
 579 #signedOutAccountBoxTitle {
 580   font-weight: bold;
 581 }
 582
 583 .fxaAccountBoxButtons {
 584   margin-bottom: 0 !important;
 585   margin-top: 11px;
 586 }
 587
 588 .fxaAccountBoxButtons > * {
 589   -moz-box-flex: 1;
 590 }
 591
 592 .fxaAccountBoxButtons > button {
 593   text-align: center;
 594   padding-left: 11px;
 595   padding-right: 11px;
 596   margin: 0;
 597   min-width: 0;
 598 }
 599
 600 .fxaAccountBoxButtons > button:first-child {
 601   margin-right: 14px !important;
 602 }
 603
 604 .fxaSyncIllustration {
 605   width: 231px;
 606   list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png)
 607 }
 608
 609 #fxaEmailAddress1,
 610 #fxaEmailAddress2,
 611 #fxaEmailAddress3 {
 612   word-break: break-all;
 613 }
 614
 615 .fxaFirefoxLogo {
 616   list-style-image: url(chrome://browser/skin/fxa/logo.png);
 617   max-width: 64px;
 618   margin-inline-end: 14px;
 619 }
 620
 621 .fxaMobilePromo {
 622   margin-bottom: 31px;
 623 }
 624
 625 #fxaLoginRejectedWarning {
 626   list-style-image: url(chrome://browser/skin/warning.svg);
 627   filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
 628   margin: 4px 8px 0px 0px;
 629 }
 630
 631 #syncOptions {
 632   margin-bottom: 27.5px;
 633 }
 634
 635 .androidLink,
 636 .iOSLink {
 637   margin: 0;
 638 }
 639
 640 #tosPP-small {
 641   margin-top: 20px;
 642   margin-bottom: 20px;
 643 }
 644
 645 @media (min-resolution: 1.1dppx) {
 646   .fxaSyncIllustration {
 647     list-style-image: url(chrome://browser/skin/fxa/sync-illustration@2x.png)
 648   }
 649   .fxaFirefoxLogo {
 650     list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
 651   }
 652   #fxaProfileImage {
 653     list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png);
 654   }
 655 }
 656
 657 /* === END shared/incontentprefs/preferences.inc.css === */
 658
 659 caption {
 660 }
 661
 662 .indent-small {
 663   -moz-margin-start: 10px;
 664 }
 665
 666 @media (min-resolution: 2dppx) {
 667   checkbox:hover::before,
 668   checkbox[checked]::before {
 669   }
 670
 671   checkbox[checked]::before {
 672   }
 673 }