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 #trackingProtectionImage {
 314   width: 16px;
 315   height: 16px;
 316   list-style-image: url("chrome://browser/skin/bad-content-blocked-16.png");
 317 }
 318
 319 @media (min-resolution: 2dppx) {
 320   #trackingProtectionImage {
 321     list-style-image: url("chrome://browser/skin/bad-content-blocked-16@2x.png");
 322   }
 323 }
 324
 325 #showUpdateHistory {
 326   -moz-margin-start: 0;
 327 }
 328
 329 /**
 330  * Dialog
 331  */
 332
 333 #dialogOverlay {
 334   background-color: rgba(0,0,0,0.75);
 335   visibility: hidden;
 336 }
 337
 338 #dialogBox {
 339   background-color: #000000;
 340   background-clip: content-box;
 341   color: #FF9F00;
 342   /* font-size: 14px; */
 343   border: 1px solid #9C9CFF;
 344   border-radius: 10px;
 345   display: -moz-box;
 346   margin: 0;
 347   padding-right: 6px;
 348   padding-left: 6px;
 349 }
 350
 351 #dialogBox[resizable="true"] {
 352   resize: both;
 353   overflow: hidden;
 354   min-height: 20em;
 355   min-width: 66ch;
 356 }
 357
 358 #dialogBox > .groupbox-title {
 359   -moz-margin-start: 0;
 360   -moz-margin-end: 0;
 361 /*  padding: 3.5px 0;
 362   background-color: #F1F1F1; */
 363 }
 364
 365 #dialogTitle {
 366   text-align: center;
 367   -moz-user-select: none;
 368 }
 369
 370 .close-icon {
 371   background-color: transparent !important;
 372   border: none;
 373   box-shadow: none;
 374   padding: 0;
 375   height: auto;
 376   min-height: 16px;
 377   min-width: 0;
 378 }
 379
 380 #dialogBox > .groupbox-title > caption {
 381   margin: 0;
 382   border-radius: 1000px;
 383   background-color: #A09090;
 384 }
 385
 386 #dialogBox > .groupbox-body {
 387   -moz-appearance: none;
 388   padding: 0;
 389 }
 390
 391 #dialogFrame {
 392   -moz-box-flex: 1;
 393   /* Default dialog dimensions */
 394   height: 20em;
 395   width: 66ch;
 396 }
 397
 398 .largeDialogContainer.doScroll {
 399   overflow-y: auto;
 400   -moz-box-flex: 1;
 401 }
 402
 403 /**
 404  * End Dialog
 405  */
 406
 407 /**
 408  * Font dialog menulist fixes
 409  */
 410
 411 #defaultFontType,
 412 #serif,
 413 #sans-serif,
 414 #monospace {
 415   min-width: 30ch;
 416 }
 417
 418 /**
 419  * Sync migration
 420  */
 421 #sync-migrate-upgrade-description {
 422   /* description elts need a min-width to wrap correctly - bug 630864? */
 423   min-width: 100px
 424 }
 425
 426 #sync-migration {
 427   border: 1px solid #9C9CFF;
 428   background-color: #000000;
 429   color: #A09090;
 430   text-shadow: none;
 431   margin: 5px 0 0 0;
 432   animation: fadein 3000ms;
 433 }
 434
 435 @keyframes fadein {
 436   from { opacity: 0; }
 437   to   { opacity: 1; }
 438 }
 439
 440 /**
 441  * Sync
 442  */
 443
 444 #fxaProfileImage {
 445   max-width: 60px;
 446   border-radius: 50%;
 447   list-style-image: url(chrome://browser/skin/fxa/default-avatar.png);
 448   margin-inline-end: 15px;
 449 }
 450
 451 #fxaProfileImage.actionable {
 452   cursor: pointer;
 453 }
 454
 455 #fxaProfileImage.actionable:hover {
 456 }
 457
 458 #fxaProfileImage.actionable:hover:active {
 459 }
 460
 461 #noFxaAccount {
 462   /* Overriding the margins from the base preferences.css theme file.
 463      These overrides can be simplified by fixing bug 1027174 */
 464   margin: 0;
 465   padding-top: 15px;
 466 }
 467
 468 #fxaContentWrapper {
 469   -moz-box-flex: 1;
 470 }
 471
 472 #noFxaGroup {
 473   -moz-box-flex: 1;
 474   margin: 0;
 475 }
 476
 477 #fxaContentWrapper {
 478   padding-right: 15px;
 479 }
 480
 481 #noFxaGroup > vbox,
 482 #fxaGroup {
 483   -moz-box-align: start;
 484 }
 485
 486 #syncStatusMessage {
 487   visibility: collapse;
 488   opacity: 0;
 489   transition: opacity 1s linear;
 490   padding: 14px 8px 14px 14px;
 491   border-radius: 2px;
 492 }
 493
 494 #syncStatusMessage[message-type] {
 495   visibility: visible;
 496   opacity: 1;
 497 }
 498
 499 #syncStatusMessage[message-type="verify-success"] {
 500   background-color: #008484;
 501 }
 502
 503 #syncStatusMessage[message-type="verify-error"] {
 504   background-color: #FF0000;
 505 }
 506
 507 #syncStatusMessage[message-type="migration"] {
 508   background-color: #FF9F00;
 509 }
 510
 511 #syncStatusMessageWrapper {
 512   -moz-box-flex: 1;
 513   padding-right: 5px;
 514 }
 515
 516 #syncStatusMessageTitle, #syncStatusMessageDescription {
 517   color: #9C9CFF;
 518 }
 519
 520 #syncStatusMessage[message-type="migration"] #syncStatusMessageTitle {
 521   display: none;
 522 }
 523
 524 #syncStatusMessageTitle {
 525   font-weight: bold !important;
 526   font-size: 16px;
 527   line-height: 157%;
 528   margin: 0 0 20px;
 529 }
 530
 531 #syncStatusMessageDescription {
 532   font-size: 14px;
 533   line-height: 158%;
 534   margin: 0 !important;
 535 }
 536
 537 #syncStatusMessageClose {
 538   margin: 0px;
 539 }
 540
 541 #fxaSyncEngines > vbox:first-child {
 542   margin-right: 80px;
 543 }
 544
 545 #fxaSyncComputerName {
 546   margin-inline-start: 0px;
 547   -moz-box-flex: 1;
 548 }
 549
 550 #tosPP-small-ToS {
 551   margin-bottom: 14px;
 552 }
 553
 554 #noFxaCaption {
 555   font-weight: bold;
 556   margin-bottom: 11px;
 557 }
 558
 559 .fxaSyncIllustration {
 560   margin-top: 35px;
 561 }
 562
 563 #syncOptions caption {
 564   margin-bottom: 11px;
 565 }
 566
 567 #fxaDeviceName {
 568   margin-bottom: 27.5px;
 569 }
 570
 571 #noFxaDescription {
 572   margin-bottom: 20px !important;
 573 }
 574
 575 .separator {
 576   border-bottom: 1px solid var(--in-content-header-border-color);
 577 }
 578
 579 .fxaAccountBox {
 580   border: 1px solid #A09090;
 581   border-radius: 5px;
 582   padding: 14px 20px 14px 14px;
 583 }
 584
 585 #signedOutAccountBoxTitle {
 586   font-weight: bold;
 587 }
 588
 589 .fxaAccountBoxButtons {
 590   margin-bottom: 0 !important;
 591   margin-top: 11px;
 592 }
 593
 594 .fxaAccountBoxButtons > * {
 595   -moz-box-flex: 1;
 596 }
 597
 598 .fxaAccountBoxButtons > button {
 599   text-align: center;
 600   padding-left: 11px;
 601   padding-right: 11px;
 602   margin: 0;
 603   min-width: 0;
 604 }
 605
 606 .fxaAccountBoxButtons > button:first-child {
 607   margin-right: 14px !important;
 608 }
 609
 610 .fxaSyncIllustration {
 611   width: 231px;
 612   list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png)
 613 }
 614
 615 #fxaEmailAddress1,
 616 #fxaEmailAddress2,
 617 #fxaEmailAddress3 {
 618   word-break: break-all;
 619 }
 620
 621 .fxaFirefoxLogo {
 622   list-style-image: url(chrome://browser/skin/fxa/logo.png);
 623   max-width: 64px;
 624   margin-inline-end: 14px;
 625 }
 626
 627 .fxaMobilePromo {
 628   margin-bottom: 31px;
 629 }
 630
 631 #fxaLoginRejectedWarning {
 632   list-style-image: url(chrome://browser/skin/warning.svg);
 633   filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
 634   margin: 4px 8px 0px 0px;
 635 }
 636
 637 #syncOptions {
 638   margin-bottom: 27.5px;
 639 }
 640
 641 .androidLink,
 642 .iOSLink {
 643   margin: 0;
 644 }
 645
 646 #tosPP-small {
 647   margin-top: 20px;
 648   margin-bottom: 20px;
 649 }
 650
 651 @media (min-resolution: 1.1dppx) {
 652   .fxaSyncIllustration {
 653     list-style-image: url(chrome://browser/skin/fxa/sync-illustration@2x.png)
 654   }
 655   .fxaFirefoxLogo {
 656     list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
 657   }
 658   #fxaProfileImage {
 659     list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png);
 660   }
 661 }
 662
 663 /* === END shared/incontentprefs/preferences.inc.css === */
 664
 665 caption {
 666 }
 667
 668 .indent-small {
 669   -moz-margin-start: 10px;
 670 }
 671
 672 @media (min-resolution: 2dppx) {
 673   checkbox:hover::before,
 674   checkbox[checked]::before {
 675   }
 676
 677   checkbox[checked]::before {
 678   }
 679 }