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/in-content/preferences.css === */
   6
   7 @namespace html "http://www.w3.org/1999/xhtml";
   8
   9 #dialogBox,
  10 dialog,
  11 window,
  12 prefwindow,
  13 .windowDialog,
  14 page {
  15   background-color: #000000;
  16 }
  17
  18 * {
  19   -moz-user-select: text;
  20 }
  21
  22 treecol {
  23   /* override the * rule to let the treecol be sortable */
  24   -moz-user-select: none;
  25 }
  26
  27 caption {
  28 }
  29
  30 caption > label {
  31 }
  32
  33 .main-content {
  34   padding: 1.5em 0 0; /* That padding needs to match the upper stripe. */
  35   overflow: auto;
  36
  37   /* This actually results in two black boxes extending to the right and bottom,
  38    * leaving the LCARS-gray background only in a top stripe and
  39    * a bit larger area on the top left.
  40    * The prefpane will overlay that with the rounded shape we want. */
  41   background-color: #A09090;
  42   background-position: 3em 1.5em, 0px 5em;
  43   background-image: linear-gradient(0deg, #000, #000), linear-gradient(0deg, #000, #000);
  44   background-repeat: no-repeat;
  45 }
  46
  47 prefpane {
  48   padding: 10px 20px 0px;
  49   border-radius: 1em 0 0 0;
  50   background-color: #000000;
  51
  52   max-width: 800px;
  53   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  54   font-size: 1.25rem;
  55   line-height: 22px;
  56   color: #FF9F00;
  57 }
  58
  59 prefpane > .content-box {
  60   max-width: 800px;
  61   overflow: visible;
  62 }
  63
  64 /* groupboxes */
  65
  66 groupbox {
  67 }
  68
  69 groupbox label {
  70 }
  71
  72 /* tabpanels and tabs */
  73
  74 tabpanels {
  75 }
  76
  77 tabs {
  78 }
  79
  80 .tabs-left,
  81 .tabs-right {
  82 }
  83
  84 tab {
  85 }
  86
  87 tab[selected] {
  88 }
  89
  90 .tab-text {
  91 }
  92
  93 tab:not([selected]):hover > .tab-middle > .tab-text {
  94 }
  95
  96 tab:not([selected]):hover:active > .tab-middle > .tab-text {
  97 }
  98
  99 tab[selected] > .tab-middle > .tab-text {
 100 }
 101
 102 /* buttons and menulists */
 103
 104 button,
 105 menulist {
 106 }
 107
 108 button:not([disabled]):hover,
 109 menulist:not([disabled]):hover {
 110 }
 111
 112 button:not([disabled]):hover:active,
 113 menulist[open="true"]:not([disabled]) {
 114 }
 115
 116 button[disabled],
 117 menulist[disabled] {
 118 }
 119
 120 button > .button-box,
 121 menulist > .menulist-label-box {
 122 }
 123
 124 button[type="menu"] > .button-box > .button-menu-dropmarker {
 125 }
 126 /*
 127 .help-button {
 128   min-width: 30px;
 129   border-radius: 2px;
 130   border: 1px solid #C1C1C1;
 131   background-color: #FFCB00;
 132   background-image: none;
 133   box-shadow: none;
 134 }
 135
 136 .help-button:not([disabled="true"]):hover {
 137   background-color: #F4C200;
 138   background-image: none;
 139 }
 140
 141 .help-button:not([disabled="true"]):hover:active {
 142   background-color: #EABA00;
 143   background-image: none;
 144 }
 145
 146 .close-icon > .button-box,
 147 .help-button > .button-box {
 148   padding-top: 0;
 149   padding-bottom: 0;
 150   padding-right: 0 !important;
 151   padding-left: 0 !important;
 152 }
 153 */
 154 .help-button > .button-box > .button-icon {
 155   width: 26px;
 156   height: 26px;
 157   background-image: url("chrome://browser/skin/preferences/in-content/help-glyph.png");
 158   background-position: center;
 159 }
 160
 161 @media (min-resolution: 2dppx) {
 162   .help-button > .button-box > .button-icon {
 163     background-size: 26px 26px;
 164     background-image: url("chrome://browser/skin/preferences/in-content/help-glyph@2x.png");
 165   }
 166 }
 167
 168 .help-button > .button-box > .button-text {
 169   display: none;
 170 }
 171
 172 .spinbuttons-button {
 173 }
 174
 175 .spinbuttons-up {
 176 }
 177
 178 .spinbuttons-down  {
 179 }
 180
 181 .spinbuttons-button > .button-box {
 182 }
 183
 184 .spinbuttons-up > .button-box > .button-icon {
 185 }
 186
 187 .spinbuttons-up[disabled] > .button-box > .button-icon {
 188 }
 189
 190 .spinbuttons-down > .button-box > .button-icon {
 191 }
 192
 193 .spinbuttons-down[disabled] > .button-box > .button-icon {
 194 }
 195
 196 menulist:not([editable="true"]) > .menulist-dropmarker {
 197 }
 198
 199 menulist[disabled]:not([editable="true"]) > .menulist-dropmarker {
 200 }
 201
 202 menulist > menupopup,
 203 button[type="menu"] > menupopup {
 204 }
 205
 206 menulist > menupopup menu,
 207 menulist > menupopup menuitem,
 208 button[type="menu"] > menupopup menu,
 209 button[type="menu"] > menupopup menuitem {
 210 }
 211
 212 menulist > menupopup > menu[_moz-menuactive="true"],
 213 menulist > menupopup > menuitem[_moz-menuactive="true"],
 214 button[type="menu"] > menupopup > menu[_moz-menuactive="true"],
 215 button[type="menu"] > menupopup > menuitem[_moz-menuactive="true"] {
 216 }
 217
 218 menulist > menupopup > menu[selected="true"],
 219 menulist > menupopup > menuitem[selected="true"],
 220 button[type="menu"] > menupopup > menu[selected="true"],
 221 button[type="menu"] > menupopup > menuitem[selected="true"] {
 222 }
 223
 224 menulist > menupopup menuseparator,
 225 button[type="menu"] > menupopup menuseparator {
 226 }
 227
 228 /* textboxes */
 229
 230 textbox {
 231 }
 232
 233 textbox[focused] {
 234 }
 235
 236 textbox[disabled] {
 237 }
 238
 239 /* Links */
 240
 241 .text-link,
 242 .inline-link,
 243 html|a.inline-link {
 244 }
 245
 246 .text-link:hover,
 247 .inline-link:hover {
 248 }
 249
 250 .text-link:hover:active,
 251 .inline-link:hover:active {
 252 }
 253
 254 /* Checkboxes and radio buttons */
 255
 256 .checkbox-check {
 257 }
 258
 259 .checkbox-check[checked] {
 260 }
 261
 262 radio {
 263 }
 264
 265 .radio-check {
 266 }
 267
 268 .radio-check[selected] {
 269 }
 270
 271 /* Category List */
 272
 273 #categories {
 274   background-color: #A09090;
 275   padding-top: 4em;
 276   margin: 0;
 277   border-radius: 1em 0 0 0;
 278   border: none;
 279 }
 280
 281 .category {
 282   background-color: #000000;
 283   color: #FFCF00;
 284   -moz-border-end-width: 0;
 285   -moz-padding-start: 15px;
 286   -moz-padding-end: 21px;
 287   min-height: 40px;
 288   transition: background-color 150ms;
 289 }
 290
 291 .category:hover {
 292   background-color: #FFCF00;
 293   color: #000000;
 294 }
 295
 296 .category[selected] {
 297   background-color: #008484;
 298   color: #000000;
 299 }
 300
 301 #categories[keyboard-navigation="true"]:-moz-focusring > .category[current] {
 302   border-top: 1px dotted #000000;
 303   border-bottom: 1px dotted #000000;
 304 }
 305
 306 .category-name {
 307   line-height: 22px;
 308   font-size: 1.25rem;
 309   padding-bottom: 2px;
 310   -moz-padding-start: 9px;
 311   margin: 0;
 312 }
 313
 314 .category-icon {
 315   width: 24px;
 316   height: 24px;
 317   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.png");
 318 }
 319
 320 #category-general > .category-icon {
 321   -moz-image-region: rect(0, 24px, 24px, 0);
 322 }
 323
 324 #category-general:hover > .category-icon,
 325 #category-general[selected] > .category-icon {
 326   -moz-image-region: rect(24px, 24px, 48px, 0);
 327 }
 328
 329 #category-content > .category-icon {
 330   -moz-image-region: rect(0, 48px,  24px, 24px)
 331 }
 332
 333 #category-content:hover > .category-icon,
 334 #category-content[selected] > .category-icon {
 335   -moz-image-region: rect(24px, 48px, 48px, 24px);
 336 }
 337
 338 #category-application > .category-icon {
 339   -moz-image-region: rect(0, 72px,  24px, 48px)
 340 }
 341
 342 #category-application:hover > .category-icon,
 343 #category-application[selected] > .category-icon {
 344   -moz-image-region: rect(24px, 72px, 48px, 48px);
 345 }
 346
 347 #category-privacy > .category-icon {
 348   -moz-image-region: rect(0, 96px,  24px, 72px)
 349 }
 350
 351 #category-privacy:hover > .category-icon,
 352 #category-privacy[selected] > .category-icon {
 353   -moz-image-region: rect(24px, 96px, 48px, 72px);
 354 }
 355
 356 #category-security > .category-icon {
 357   -moz-image-region: rect(0, 120px,  24px, 96px)
 358 }
 359
 360 #category-security:hover > .category-icon,
 361 #category-security[selected] > .category-icon {
 362   -moz-image-region: rect(24px, 120px, 48px, 96px);
 363 }
 364
 365 #category-sync > .category-icon {
 366   -moz-image-region: rect(0, 144px, 24px, 120px);
 367 }
 368
 369 #category-sync:hover > .category-icon,
 370 #category-sync[selected] > .category-icon {
 371   -moz-image-region: rect(24px, 144px, 48px, 120px);
 372 }
 373
 374 #category-advanced > .category-icon {
 375   -moz-image-region: rect(0, 168px, 24px, 144px)
 376 }
 377
 378 #category-advanced:hover > .category-icon,
 379 #category-advanced[selected] > .category-icon {
 380   -moz-image-region: rect(24px, 168px, 48px, 144px);
 381 }
 382
 383 /* header */
 384
 385 .header {
 386   margin-bottom: 15px;
 387 }
 388
 389 .header-icon {
 390   width: 40px;
 391   max-height: 40px;
 392   -moz-margin-end: 20px;
 393   list-style-image: url("chrome://browser/skin/preferences/in-content/header.png");
 394 }
 395
 396 .header-name {
 397   font-size: 2.5rem;
 398   font-weight: normal;
 399   line-height: 40px;
 400   margin: 0;
 401 }
 402
 403 #header-general > .header-icon {
 404   -moz-image-region: rect(0, 40px, 40px, 0);
 405 }
 406
 407 #header-content > .header-icon {
 408   -moz-image-region: rect(0, 80px, 40px, 40px);
 409 }
 410
 411 #header-application > .header-icon {
 412   -moz-image-region: rect(0, 120px, 40px, 80px);
 413 }
 414
 415 #header-privacy > .header-icon {
 416   -moz-image-region: rect(0, 160px, 40px, 120px);
 417 }
 418
 419 #header-security > .header-icon {
 420   -moz-image-region: rect(0, 200px, 40px, 160px);
 421 }
 422
 423 #header-sync > .header-icon {
 424   -moz-image-region: rect(0, 240px, 40px, 200px);
 425 }
 426
 427 #header-advanced > .header-icon {
 428   -moz-image-region: rect(0, 280px, 40px, 240px);
 429 }
 430
 431 @media (min-resolution: 2dppx) {
 432   .header-icon {
 433     list-style-image: url("chrome://browser/skin/preferences/in-content/header@2x.png");
 434   }
 435
 436   #header-general > .header-icon {
 437     -moz-image-region: rect(0, 80px, 80px, 0);
 438   }
 439
 440   #header-content > .header-icon {
 441     -moz-image-region: rect(0, 160px, 80px, 80px);
 442   }
 443
 444   #header-application > .header-icon {
 445     -moz-image-region: rect(0, 240px, 80px, 160px);
 446   }
 447
 448   #header-privacy > .header-icon {
 449     -moz-image-region: rect(0, 320px, 80px, 240px);
 450   }
 451
 452   #header-security > .header-icon {
 453     -moz-image-region: rect(0, 400px, 80px, 320px);
 454   }
 455
 456   #header-sync > .header-icon {
 457     -moz-image-region: rect(0, 480px, 80px, 400px);
 458   }
 459
 460   #header-advanced > .header-icon {
 461     -moz-image-region: rect(0, 560px, 80px, 480px);
 462   }
 463 }
 464
 465 .indent {
 466   margin-top: 7px;
 467   margin-bottom: 7px;
 468 }
 469
 470 /* General Pane */
 471 /*
 472 filefield {
 473   -moz-appearance: none;
 474   background-color: transparent;
 475   border: none;
 476   padding: 0;
 477 }
 478
 479 .fileFieldContentBox {
 480   background-color: transparent;
 481 }
 482
 483 .fileFieldIcon {
 484   -moz-margin-start: 10px;
 485   -moz-margin-end: 0;
 486 }
 487
 488 .fileFieldLabel {
 489   -moz-margin-start: -26px;
 490   -moz-padding-start: 36px;
 491 }
 492 */
 493
 494 /* Applications Pane Styles */
 495
 496 #applicationsContent {
 497   -moz-margin-start: 60px;
 498   padding: 15px 0;
 499 }
 500
 501 #filter {
 502   -moz-margin-start: 0;
 503 }
 504
 505 #handlersView {
 506   -moz-margin-start: 0;
 507   font-size: 1.25rem;
 508   line-height: 22px;
 509   border: none; /*1px solid #9C9CFF;*/
 510   margin: 0;
 511   overflow-y: auto;
 512   border-top-left-radius: 0;
 513   border-top-right-radius: 0;
 514   height: 500px;
 515 }
 516
 517 #handlersView > listheader {
 518   border: none;
 519   background: transparent;
 520   padding: 0;
 521 }
 522
 523 #handlersView > listheader > treecol {
 524 }
 525
 526 #handlersView > scrollbox {
 527   border-left: 1px solid #9C9CFF;
 528   border-right: 1px solid #9C9CFF;
 529   border-bottom: 1px solid #9C9CFF;
 530 }
 531
 532 #typeColumn,
 533 #actionColumn {
 534   line-height: 20px;
 535 /*  color: #737980;
 536   height: 36px;
 537   padding: 0 10px;
 538   background-color: #F7F7F7;
 539   border: 1px solid #CCCCCC;
 540   -moz-border-top-colors: none;
 541   -moz-border-right-colors: none;
 542   -moz-border-bottom-colors: none;
 543   -moz-border-left-colors: none;
 544 */
 545 }
 546
 547 #typeColumn:-moz-locale-dir(ltr),
 548 #actionColumn:-moz-locale-dir(rtl) {
 549   border-top-left-radius: 5px;
 550 }
 551
 552 #typeColumn:-moz-locale-dir(rtl),
 553 #actionColumn:-moz-locale-dir(ltr) {
 554   border-top-right-radius: 5px;
 555 }
 556 /*
 557 #typeColumn:hover,
 558 #actionColumn:hover {
 559   border-color: #737980;
 560 }
 561
 562 #typeColumn:hover:active,
 563 #actionColumn:hover:active {
 564   padding: 0 10px;
 565   border-color: #0096DC;
 566 }
 567 */
 568 #typeColumn > .treecol-sortdirection[sortDirection=ascending],
 569 #actionColumn > .treecol-sortdirection[sortDirection=ascending],
 570 #typeColumn > .treecol-sortdirection[sortDirection=descending],
 571 #actionColumn > .treecol-sortdirection[sortDirection=descending] {
 572 }
 573
 574 #typeColumn > .treecol-sortdirection[sortDirection=descending],
 575 #actionColumn > .treecol-sortdirection[sortDirection=descending] {
 576 }
 577
 578 #handlersView > richlistitem {
 579   min-height: 40px !important;
 580 }
 581
 582 .typeIcon {
 583   -moz-margin-start: 10px !important;
 584   -moz-margin-end: 9px !important;
 585 }
 586
 587 .actionIcon {
 588   -moz-margin-start: 11px !important;
 589   -moz-margin-end: 8px !important;
 590 }
 591
 592 .actionsMenu {
 593   height: 40px;
 594   max-height: 40px;
 595 }
 596
 597 .actionsMenu > menupopup > menuitem {
 598   -moz-padding-start: 10px !important;
 599 }
 600
 601 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
 602   -moz-margin-end: 8px !important;
 603 }
 604
 605 /* XXX This style is for bug 740213 and should be removed once that
 606    bug has a solution. */
 607 description > html|a {
 608   cursor: pointer;
 609 }
 610
 611 #offlineAppsList,
 612 #syncEnginesList {
 613 /*  -moz-appearance: none;
 614   color: #737980;
 615   padding: 10px;
 616   border: 1px solid rgba(23,50,77,0.4);
 617   border-radius: 5px;
 618   background-color: #F1F1F1;*/
 619 }
 620
 621 #weavePrefsDeck {
 622   -moz-margin-start: 60px;
 623 }
 624
 625 #noFxaAccount {
 626   /* Overriding the margins from the base preferences.css theme file.
 627      These overrides can be simplified by fixing bug 1027174 */
 628   margin: 0;
 629 }
 630
 631 #weavePrefsDeck > vbox > label,
 632 #weavePrefsDeck > vbox > groupbox,
 633 #weavePrefsDeck > vbox > description,
 634 #weavePrefsDeck > vbox > #pairDevice > label,
 635 #weavePrefsDeck > #needsUpdate > hbox > #loginError,
 636 #weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP) > label {
 637   /* no margin-start for elements at the begin of a line */
 638   -moz-margin-start: 0;
 639 }
 640
 641 #advancedPrefs {
 642   padding-bottom: 0; /* no padding needed in inContent prefs */
 643 }
 644
 645 #encryptionPanel {
 646   margin-top: 15px;
 647   -moz-margin-start: 60px;
 648 }
 649
 650 #telemetryLearnMore,
 651 #FHRLearnMore,
 652 #crashReporterLearnMore {
 653   /* center the links */
 654   margin-top: 8px;
 655   margin-bottom: 8px;
 656 }
 657
 658
 659 /**
 660  * Sub-dialog
 661  */
 662
 663 #dialogOverlay {
 664   background-color: rgba(0,0,0,0.75);
 665   visibility: hidden;
 666 }
 667
 668 #dialogBox {
 669   border: 1px solid #9C9CFF;
 670   display: -moz-box;
 671   margin: 0;
 672   padding-right: 6px;
 673   padding-left: 6px;
 674 }
 675
 676 #dialogBox[resizable="true"] {
 677   resize: both;
 678   overflow: hidden;
 679   min-height: 30em;
 680   min-width: 66ch;
 681 }
 682
 683 #dialogTitle {
 684   -moz-margin-start: 5px !important;
 685 }
 686
 687 .close-icon {
 688   background-color: transparent !important;
 689   border: none;
 690   box-shadow: none;
 691   height: 18px;
 692   padding: 0;
 693   min-width: 18px;
 694 }
 695
 696 #dialogBox > .groupbox-body {
 697   -moz-appearance: none;
 698   padding: 0;
 699 }
 700
 701 #dialogFrame {
 702   -moz-box-flex: 1;
 703   /* Default dialog dimensions */
 704   height: 20em;
 705   width: 66ch;
 706 }
 707
 708 /* needs to be removed with bug 1035625 */
 709 :-moz-any(dialog, window, prefwindow) resizer {
 710   display: none;
 711 }
 712
 713 tree:not(#rejectsTree) {
 714   min-height: 15em;
 715 }
 716
 717 :-moz-any(dialog, window, prefwindow) groupbox {
 718   -moz-margin-start: 8px;
 719   -moz-margin-end: 8px;
 720 }
 721
 722 /**
 723  * End sub-dialog
 724  */
 725
 726 /* === END shared/in-content/preferences.css === */
 727
 728 caption {
 729 }
 730
 731 .indent-small {
 732   -moz-margin-start: 10px;
 733 }
 734
 735 @media (min-resolution: 2dppx) {
 736   checkbox:hover::before,
 737   checkbox[checked]::before {
 738   }
 739
 740   checkbox[checked]::before {
 741   }
 742
 743   .category-icon {
 744     list-style-image: url("chrome://browser/skin/preferences/in-content/icons@2x.png");
 745   }
 746
 747   #category-general > .category-icon {
 748     -moz-image-region: rect(0, 48px, 48px, 0);
 749   }
 750
 751   #category-general[selected] > .category-icon {
 752     -moz-image-region: rect(48px, 48px, 96px, 0);
 753   }
 754
 755   #category-content > .category-icon {
 756     -moz-image-region: rect(0, 96px, 48px, 48px);
 757   }
 758
 759   #category-content[selected] > .category-icon {
 760     -moz-image-region: rect(48px, 96px, 96px, 48px);
 761   }
 762
 763   #category-application > .category-icon {
 764     -moz-image-region: rect(0, 144px, 48px, 96px);
 765   }
 766
 767   #category-application[selected] > .category-icon {
 768     -moz-image-region: rect(48px, 144px, 96px, 96px);
 769   }
 770
 771   #category-privacy > .category-icon {
 772     -moz-image-region: rect(0, 192px, 48px, 144px);
 773   }
 774
 775   #category-privacy[selected] > .category-icon {
 776     -moz-image-region: rect(48px, 192px, 96px, 144px);
 777   }
 778
 779   #category-security > .category-icon {
 780     -moz-image-region: rect(0, 240px, 48px, 192px);
 781   }
 782
 783   #category-security[selected] > .category-icon {
 784     -moz-image-region: rect(48px, 240px, 96px, 192px);
 785   }
 786
 787   #category-sync > .category-icon {
 788     -moz-image-region: rect(0, 288px, 48px, 240px);
 789   }
 790
 791   #category-sync[selected] > .category-icon {
 792     -moz-image-region: rect(48px, 288px, 96px, 240px);
 793   }
 794
 795   #category-advanced > .category-icon {
 796     -moz-image-region: rect(0, 336px, 48px, 288px);
 797   }
 798
 799   #category-advanced[selected] > .category-icon {
 800     -moz-image-region: rect(48px, 336px, 96px, 288px);
 801   }
 802 }