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 /* Privacy pane */
 259
 260 #doNotTrackInfo,
 261 #trackingProtectionPBMLearnMore,
 262 #trackingProtectionLearnMore {
 263   -moz-margin-start: 1.5em !important;
 264   margin-top: 0;
 265 }
 266
 267 /* Collapse the non-active vboxes in decks to use only the height the
 268    active vbox needs */
 269 #historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
 270 #historyPane:not([selectedIndex="2"]) > #historyCustomPane,
 271 #weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount,
 272 #weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate,
 273 #weavePrefsDeck:not([selectedIndex="3"]) > #noFxaAccount,
 274 #weavePrefsDeck:not([selectedIndex="4"]) > #hasFxaAccount,
 275 #fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
 276 #fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
 277   visibility: collapse;
 278 }
 279
 280 /* XXX This style is for bug 740213 and should be removed once that
 281    bug has a solution. */
 282 description > html|a {
 283   cursor: pointer;
 284 }
 285
 286 #noFxaAccount {
 287   /* Overriding the margins from the base preferences.css theme file.
 288      These overrides can be simplified by fixing bug 1027174 */
 289   margin: 0;
 290 }
 291
 292 #weavePrefsDeck > vbox > label,
 293 #weavePrefsDeck > vbox > groupbox,
 294 #weavePrefsDeck > vbox > description,
 295 #weavePrefsDeck > vbox > #pairDevice > label,
 296 #weavePrefsDeck > #needsUpdate > hbox > #loginError,
 297 #weavePrefsDeck > #hasFxaAccount > vbox > label,
 298 #weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label {
 299   /* no margin-start for elements at the begin of a line */
 300   -moz-margin-start: 0;
 301 }
 302
 303 #advancedPrefs {
 304   padding-bottom: 0; /* no padding needed in inContent prefs */
 305 }
 306
 307 #tabsElement {
 308 /*  -moz-margin-end: 4px; / add the 4px end-margin of other elements */
 309 }
 310
 311 #telemetryLearnMore,
 312 #FHRLearnMore,
 313 #crashReporterLearnMore {
 314   /* provide some margin between the links and the label text */
 315   /* !important is needed to override the rules defined in common.css */
 316   -moz-margin-start: 20px !important;
 317   /* center the links */
 318   margin-top: 8px;
 319   margin-bottom: 8px;
 320 }
 321
 322 .text-link {
 323   margin-bottom: 0;
 324 }
 325
 326 #showUpdateHistory {
 327   -moz-margin-start: 0;
 328 }
 329
 330 /**
 331  * Dialog
 332  */
 333
 334 #dialogOverlay {
 335   background-color: rgba(0,0,0,0.75);
 336   visibility: hidden;
 337 }
 338
 339 #dialogBox {
 340   background-color: #000000;
 341   background-clip: content-box;
 342   color: #FF9F00;
 343   /* font-size: 14px; */
 344   border: 1px solid #9C9CFF;
 345   border-radius: 10px;
 346   display: -moz-box;
 347   margin: 0;
 348   padding-right: 6px;
 349   padding-left: 6px;
 350 }
 351
 352 #dialogBox[resizable="true"] {
 353   resize: both;
 354   overflow: hidden;
 355   min-height: 20em;
 356   min-width: 66ch;
 357 }
 358
 359 #dialogBox > .groupbox-title {
 360   -moz-margin-start: 0;
 361   -moz-margin-end: 0;
 362 /*  padding: 3.5px 0;
 363   background-color: #F1F1F1; */
 364 }
 365
 366 #dialogTitle {
 367   text-align: center;
 368   -moz-user-select: none;
 369 }
 370
 371 .close-icon {
 372   background-color: transparent !important;
 373   border: none;
 374   box-shadow: none;
 375   padding: 0;
 376   height: auto;
 377   min-height: 16px;
 378   min-width: 0;
 379 }
 380
 381 #dialogBox > .groupbox-title > caption {
 382   margin: 0;
 383   border-radius: 1000px;
 384   background-color: #A09090;
 385 }
 386
 387 #dialogBox > .groupbox-body {
 388   -moz-appearance: none;
 389   padding: 0;
 390 }
 391
 392 #dialogFrame {
 393   -moz-box-flex: 1;
 394   /* Default dialog dimensions */
 395   height: 20em;
 396   width: 66ch;
 397 }
 398
 399 .largeDialogContainer.doScroll {
 400   overflow-y: auto;
 401   -moz-box-flex: 1;
 402 }
 403
 404 /**
 405  * End Dialog
 406  */
 407
 408 /**
 409  * Font dialog menulist fixes
 410  */
 411
 412 #defaultFontType,
 413 #serif,
 414 #sans-serif,
 415 #monospace {
 416   min-width: 30ch;
 417 }
 418
 419 /**
 420  * Sync migration
 421  */
 422 #sync-migrate-upgrade-description {
 423   /* description elts need a min-width to wrap correctly - bug 630864? */
 424   min-width: 100px
 425 }
 426
 427 #sync-migration {
 428   border: 1px solid #9C9CFF;
 429   background-color: #000000;
 430   color: #A09090;
 431   text-shadow: none;
 432   margin: 5px 0 0 0;
 433   animation: fadein 3000ms;
 434 }
 435
 436 @keyframes fadein {
 437   from { opacity: 0; }
 438   to   { opacity: 1; }
 439 }
 440
 441 /**
 442  * Sync
 443  */
 444
 445 #fxaProfileImage {
 446   max-width: 60px;
 447   border-radius: 50%;
 448   list-style-image: url(chrome://browser/skin/fxa/default-avatar.png);
 449   margin-inline-end: 15px;
 450 }
 451
 452 #fxaProfileImage.actionable {
 453   cursor: pointer;
 454 }
 455
 456 #fxaProfileImage.actionable:hover {
 457   box-shadow: 0px 0px 0px 1px #FFCF00;
 458 }
 459
 460 #fxaProfileImage.actionable:hover:active {
 461   box-shadow: 0px 0px 0px 1px #FF9F00;
 462 }
 463
 464 #noFxaAccount {
 465   /* Overriding the margins from the base preferences.css theme file.
 466      These overrides can be simplified by fixing bug 1027174 */
 467   margin: 0;
 468   padding-top: 15px;
 469 }
 470
 471 #fxaContentWrapper {
 472   -moz-box-flex: 1;
 473 }
 474
 475 #noFxaGroup {
 476   -moz-box-flex: 1;
 477   margin: 0;
 478 }
 479
 480 #fxaContentWrapper {
 481   padding-right: 15px;
 482 }
 483
 484 #noFxaGroup > vbox,
 485 #fxaGroup {
 486   -moz-box-align: start;
 487 }
 488
 489 #syncStatusMessage {
 490   visibility: collapse;
 491   opacity: 0;
 492   transition: opacity 1s linear;
 493   padding: 14px 8px 14px 14px;
 494   border-radius: 2px;
 495 }
 496
 497 #syncStatusMessage[message-type] {
 498   visibility: visible;
 499   opacity: 1;
 500 }
 501
 502 #syncStatusMessage[message-type="verify-success"] {
 503   background-color: #008484;
 504 }
 505
 506 #syncStatusMessage[message-type="verify-error"] {
 507   background-color: #FF0000;
 508 }
 509
 510 #syncStatusMessage[message-type="migration"] {
 511   background-color: #FF9F00;
 512 }
 513
 514 #syncStatusMessageWrapper {
 515   -moz-box-flex: 1;
 516   padding-right: 5px;
 517 }
 518
 519 #syncStatusMessageTitle, #syncStatusMessageDescription {
 520   color: #9C9CFF;
 521 }
 522
 523 #syncStatusMessage[message-type="migration"] #syncStatusMessageTitle {
 524   display: none;
 525 }
 526
 527 #syncStatusMessageTitle {
 528   font-weight: bold !important;
 529   font-size: 16px;
 530   line-height: 157%;
 531   margin: 0 0 20px;
 532 }
 533
 534 #syncStatusMessageDescription {
 535   font-size: 14px;
 536   line-height: 158%;
 537   margin: 0 !important;
 538 }
 539
 540 #syncStatusMessageClose {
 541   margin: 0px;
 542 }
 543
 544 #syncStatusMessage {
 545   visibility: collapse;
 546   opacity: 0;
 547   transition: opacity 1s linear;
 548   padding: 14px 8px 14px 14px;
 549   border-radius: 2px;
 550 }
 551
 552 #syncStatusMessage[message-type] {
 553   visibility: visible;
 554   opacity: 1;
 555 }
 556
 557 #syncStatusMessage[message-type="verify-success"] {
 558   background-color: #008484;
 559 }
 560
 561 #syncStatusMessage[message-type="verify-error"] {
 562   background-color: #FF0000;
 563 }
 564
 565 #syncStatusMessage[message-type="migration"] {
 566   background-color: #FFCF00;
 567 }
 568
 569 #sync-migration-buttons-deck {
 570   visibility: collapse;
 571 }
 572
 573 #learnMoreLink {
 574   margin: 0;
 575   color: #336699;
 576   text-decoration: underline;
 577 }
 578
 579 #syncStatusMessage[message-type="migration"] #sync-migration-buttons-deck {
 580   visibility: visible;
 581 }
 582
 583 #sync-migration-buttons-deck {
 584   margin-top: 20px;
 585 }
 586
 587 #sync-migration-buttons-deck button {
 588   margin: 0 10px 0 0;
 589   border: 0;
 590   border-radius: 2px;
 591 }
 592
 593 #sync-migrate-upgrade,
 594 #sync-migrate-resend {
 595 /*  background-color: #0095DD;
 596   color: #FBFBFB; */
 597 }
 598
 599 #sync-migrate-upgrade:hover,
 600 #sync-migrate-resend:hover {
 601 /*  background-color: #008ACB; */
 602 }
 603
 604 #sync-migrate-upgrade:hover:active,
 605 #sync-migrate-resend:hover:active {
 606 /*  background-color: #006B9D; */
 607 }
 608
 609 #syncStatusMessageWrapper {
 610   -moz-box-flex: 1;
 611   padding-right: 5px;
 612 }
 613
 614 #syncStatusMessageTitle, #syncStatusMessageDescription {
 615   color: #A09090;
 616 }
 617
 618 #syncStatusMessage[message-type="migration"] #syncStatusMessageTitle {
 619   display: none;
 620 }
 621
 622 #syncStatusMessageTitle {
 623   font-weight: bold !important;
 624   font-size: 16px;
 625   line-height: 157%;
 626   margin: 0 0 20px;
 627 }
 628
 629
 630 #syncStatusMessageDescription {
 631   font-size: 14px;
 632   line-height: 158%;
 633   margin: 0 !important;
 634 }
 635
 636 #syncStatusMessageClose {
 637   margin: 0px;
 638 }
 639
 640 #fxaSyncEngines > vbox:first-child {
 641   margin-right: 80px;
 642 }
 643
 644 #fxaSyncComputerName {
 645   margin-inline-start: 0px;
 646   -moz-box-flex: 1;
 647 }
 648
 649 #tosPP-small-ToS {
 650   margin-bottom: 1em;
 651 }
 652
 653 #fxaLoginRejectedWarning {
 654   list-style-image: url("chrome://browser/skin/warning.svg");
 655   margin: 4px 8px 0px 0px;
 656 }
 657
 658 #noFxaCaption {
 659   font-weight: bold;
 660   margin-bottom: 11px;
 661 }
 662
 663 .fxaSyncIllustration {
 664   margin-top: 35px;
 665 }
 666
 667 #syncOptions caption {
 668   margin-bottom: 11px;
 669 }
 670
 671 #fxaSyncComputerName {
 672   margin-left: 0px;
 673 }
 674
 675 #noFxaDescription {
 676   margin-bottom: 20px !important;
 677 }
 678
 679 .separator {
 680   border-bottom: 1px solid var(--in-content-header-border-color);
 681 }
 682
 683 .fxaAccountBox {
 684   border: 1px solid #A09090;
 685   border-radius: 5px;
 686   padding: 14px 20px 14px 14px;
 687 }
 688
 689 #signedOutAccountBoxTitle {
 690   font-weight: bold;
 691 }
 692
 693 .fxaAccountBoxButtons {
 694   margin-bottom: 0 !important;
 695   margin-top: 11px;
 696 }
 697
 698 .fxaAccountBoxButtons > * {
 699   -moz-box-flex: 1;
 700 }
 701
 702 .fxaAccountBoxButtons > button {
 703   text-align: center;
 704   padding-left: 11px;
 705   padding-right: 11px;
 706   margin: 0;
 707   min-width: 0;
 708 }
 709
 710 .fxaAccountBoxButtons > button:first-child {
 711   margin-right: 14px !important;
 712 }
 713
 714 .fxaSyncIllustration {
 715   width: 231px;
 716   list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png)
 717 }
 718
 719 #fxaEmailAddress1,
 720 #fxaEmailAddress2,
 721 #fxaEmailAddress3 {
 722   word-break: break-all;
 723 }
 724
 725 .fxaFirefoxLogo {
 726   list-style-image: url(chrome://browser/skin/fxa/logo.png);
 727   max-width: 64px;
 728   margin-inline-end: 14px;
 729 }
 730
 731 .fxaMobilePromo {
 732   margin-bottom: 31px;
 733 }
 734
 735 #fxaLoginRejectedWarning {
 736   list-style-image: url(chrome://browser/skin/warning.svg);
 737   filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
 738   margin: 4px 8px 0px 0px;
 739 }
 740
 741 #syncOptions {
 742   margin-bottom: 27.5px;
 743 }
 744
 745 .androidLink,
 746 .iOSLink {
 747   margin: 0;
 748 }
 749
 750 #tosPP-small {
 751   margin-top: 20px;
 752   margin-bottom: 20px;
 753 }
 754
 755 @media (min-resolution: 1.1dppx) {
 756   .fxaSyncIllustration {
 757     list-style-image: url(chrome://browser/skin/fxa/sync-illustration@2x.png)
 758   }
 759   .fxaFirefoxLogo {
 760     list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
 761   }
 762   #fxaProfileImage {
 763     list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png);
 764   }
 765 }
 766
 767 /* === END shared/incontentprefs/preferences.inc.css === */
 768
 769 caption {
 770 }
 771
 772 .indent-small {
 773   -moz-margin-start: 10px;
 774 }
 775
 776 @media (min-resolution: 2dppx) {
 777   checkbox:hover::before,
 778   checkbox[checked]::before {
 779   }
 780
 781   checkbox[checked]::before {
 782   }
 783 }