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   border-bottom: 1px solid #A09090;
 387   margin-bottom: 15px;
 388   padding-bottom: 15px;
 389 }
 390
 391 #header-advanced {
 392   border-bottom: none;
 393   padding-bottom: 0;
 394 }
 395
 396 .header-name {
 397   font-size: 2.5rem;
 398   font-weight: normal;
 399   line-height: 40px;
 400   margin: 0;
 401 }
 402
 403 .indent {
 404   margin-top: 7px;
 405   margin-bottom: 7px;
 406 }
 407
 408 /* General Pane */
 409 /*
 410 filefield {
 411   -moz-appearance: none;
 412   background-color: transparent;
 413   border: none;
 414   padding: 0;
 415 }
 416
 417 .fileFieldContentBox {
 418   background-color: transparent;
 419 }
 420
 421 .fileFieldIcon {
 422   -moz-margin-start: 10px;
 423   -moz-margin-end: 0;
 424 }
 425
 426 .fileFieldLabel {
 427   -moz-margin-start: -26px;
 428   -moz-padding-start: 36px;
 429 }
 430 */
 431
 432 /* Applications Pane Styles */
 433
 434 #applicationsContent {
 435   padding: 15px 0;
 436 }
 437
 438 #filter {
 439   -moz-margin-start: 0;
 440 }
 441
 442 #handlersView {
 443   -moz-margin-start: 0;
 444   font-size: 1.25rem;
 445   line-height: 22px;
 446   border: none; /*1px solid #9C9CFF;*/
 447   margin: 0;
 448   overflow-y: auto;
 449   border-top-left-radius: 0;
 450   border-top-right-radius: 0;
 451   height: 500px;
 452 }
 453
 454 #handlersView > listheader {
 455   border: none;
 456   background: transparent;
 457   padding: 0;
 458 }
 459
 460 #handlersView > listheader > treecol {
 461 }
 462
 463 #handlersView > scrollbox {
 464   border-left: 1px solid #9C9CFF;
 465   border-right: 1px solid #9C9CFF;
 466   border-bottom: 1px solid #9C9CFF;
 467 }
 468
 469 #typeColumn,
 470 #actionColumn {
 471   line-height: 20px;
 472 /*  color: #737980;
 473   height: 36px;
 474   padding: 0 10px;
 475   background-color: #F7F7F7;
 476   border: 1px solid #CCCCCC;
 477   -moz-border-top-colors: none;
 478   -moz-border-right-colors: none;
 479   -moz-border-bottom-colors: none;
 480   -moz-border-left-colors: none;
 481 */
 482 }
 483
 484 #typeColumn:-moz-locale-dir(ltr),
 485 #actionColumn:-moz-locale-dir(rtl) {
 486   border-top-left-radius: 5px;
 487 }
 488
 489 #typeColumn:-moz-locale-dir(rtl),
 490 #actionColumn:-moz-locale-dir(ltr) {
 491   border-top-right-radius: 5px;
 492 }
 493 /*
 494 #typeColumn:hover,
 495 #actionColumn:hover {
 496   border-color: #737980;
 497 }
 498
 499 #typeColumn:hover:active,
 500 #actionColumn:hover:active {
 501   padding: 0 10px;
 502   border-color: #0096DC;
 503 }
 504 */
 505 #typeColumn > .treecol-sortdirection[sortDirection=ascending],
 506 #actionColumn > .treecol-sortdirection[sortDirection=ascending],
 507 #typeColumn > .treecol-sortdirection[sortDirection=descending],
 508 #actionColumn > .treecol-sortdirection[sortDirection=descending] {
 509 }
 510
 511 #typeColumn > .treecol-sortdirection[sortDirection=descending],
 512 #actionColumn > .treecol-sortdirection[sortDirection=descending] {
 513 }
 514
 515 #handlersView > richlistitem {
 516   min-height: 40px !important;
 517 }
 518
 519 .typeIcon {
 520   -moz-margin-start: 10px !important;
 521   -moz-margin-end: 9px !important;
 522 }
 523
 524 .actionIcon {
 525   -moz-margin-start: 11px !important;
 526   -moz-margin-end: 8px !important;
 527 }
 528
 529 .actionsMenu {
 530   height: 40px;
 531   max-height: 40px;
 532 }
 533
 534 .actionsMenu > menupopup > menuitem {
 535   -moz-padding-start: 10px !important;
 536 }
 537
 538 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
 539   -moz-margin-end: 8px !important;
 540 }
 541
 542 /* XXX This style is for bug 740213 and should be removed once that
 543    bug has a solution. */
 544 description > html|a {
 545   cursor: pointer;
 546 }
 547
 548 #offlineAppsList,
 549 #syncEnginesList {
 550 /*  -moz-appearance: none;
 551   color: #737980;
 552   padding: 10px;
 553   border: 1px solid rgba(23,50,77,0.4);
 554   border-radius: 5px;
 555   background-color: #F1F1F1;*/
 556 }
 557
 558 #noFxaAccount {
 559   /* Overriding the margins from the base preferences.css theme file.
 560      These overrides can be simplified by fixing bug 1027174 */
 561   margin: 0;
 562 }
 563
 564 #weavePrefsDeck > vbox > label,
 565 #weavePrefsDeck > vbox > groupbox,
 566 #weavePrefsDeck > vbox > description,
 567 #weavePrefsDeck > vbox > #pairDevice > label,
 568 #weavePrefsDeck > #needsUpdate > hbox > #loginError,
 569 #weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP) > label {
 570   /* no margin-start for elements at the begin of a line */
 571   -moz-margin-start: 0;
 572 }
 573
 574 #advancedPrefs {
 575   padding-bottom: 0; /* no padding needed in inContent prefs */
 576 }
 577
 578 #encryptionPanel {
 579   margin-top: 15px;
 580 }
 581
 582 #telemetryLearnMore,
 583 #FHRLearnMore,
 584 #crashReporterLearnMore {
 585   /* center the links */
 586   margin-top: 8px;
 587   margin-bottom: 8px;
 588 }
 589
 590
 591 /**
 592  * Sub-dialog
 593  */
 594
 595 #dialogOverlay {
 596   background-color: rgba(0,0,0,0.75);
 597   visibility: hidden;
 598 }
 599
 600 #dialogBox {
 601   border: 1px solid #9C9CFF;
 602   display: -moz-box;
 603   margin: 0;
 604   padding-right: 6px;
 605   padding-left: 6px;
 606 }
 607
 608 #dialogBox[resizable="true"] {
 609   resize: both;
 610   overflow: hidden;
 611   min-height: 30em;
 612   min-width: 66ch;
 613 }
 614
 615 .close-icon {
 616   background-color: transparent !important;
 617   border: none;
 618   box-shadow: none;
 619   height: 18px;
 620   padding: 0;
 621   min-width: 18px;
 622 }
 623
 624 #dialogBox > .groupbox-title > caption {
 625   margin: 0;
 626   border-radius: 1000px;
 627   background-color: #A09090;
 628 }
 629
 630 #dialogBox > .groupbox-body {
 631   -moz-appearance: none;
 632   padding: 0;
 633 }
 634
 635 #dialogFrame {
 636   -moz-box-flex: 1;
 637   /* Default dialog dimensions */
 638   height: 30em;
 639   width: 66ch;
 640 }
 641
 642 /* needs to be removed with bug 1035625 */
 643 :-moz-any(dialog, window, prefwindow) resizer {
 644   display: none;
 645 }
 646
 647 tree:not(#rejectsTree) {
 648   min-height: 15em;
 649 }
 650
 651 :-moz-any(dialog, window, prefwindow) groupbox {
 652   -moz-margin-start: 8px;
 653   -moz-margin-end: 8px;
 654 }
 655
 656 /**
 657  * End sub-dialog
 658  */
 659
 660 /* === END shared/in-content/preferences.css === */
 661
 662 caption {
 663 }
 664
 665 .indent-small {
 666   -moz-margin-start: 10px;
 667 }
 668
 669 @media (min-resolution: 2dppx) {
 670   checkbox:hover::before,
 671   checkbox[checked]::before {
 672   }
 673
 674   checkbox[checked]::before {
 675   }
 676
 677   .category-icon {
 678     list-style-image: url("chrome://browser/skin/preferences/in-content/icons@2x.png");
 679   }
 680
 681   #category-general > .category-icon {
 682     -moz-image-region: rect(0, 48px, 48px, 0);
 683   }
 684
 685   #category-general[selected] > .category-icon {
 686     -moz-image-region: rect(48px, 48px, 96px, 0);
 687   }
 688
 689   #category-content > .category-icon {
 690     -moz-image-region: rect(0, 96px, 48px, 48px);
 691   }
 692
 693   #category-content[selected] > .category-icon {
 694     -moz-image-region: rect(48px, 96px, 96px, 48px);
 695   }
 696
 697   #category-application > .category-icon {
 698     -moz-image-region: rect(0, 144px, 48px, 96px);
 699   }
 700
 701   #category-application[selected] > .category-icon {
 702     -moz-image-region: rect(48px, 144px, 96px, 96px);
 703   }
 704
 705   #category-privacy > .category-icon {
 706     -moz-image-region: rect(0, 192px, 48px, 144px);
 707   }
 708
 709   #category-privacy[selected] > .category-icon {
 710     -moz-image-region: rect(48px, 192px, 96px, 144px);
 711   }
 712
 713   #category-security > .category-icon {
 714     -moz-image-region: rect(0, 240px, 48px, 192px);
 715   }
 716
 717   #category-security[selected] > .category-icon {
 718     -moz-image-region: rect(48px, 240px, 96px, 192px);
 719   }
 720
 721   #category-sync > .category-icon {
 722     -moz-image-region: rect(0, 288px, 48px, 240px);
 723   }
 724
 725   #category-sync[selected] > .category-icon {
 726     -moz-image-region: rect(48px, 288px, 96px, 240px);
 727   }
 728
 729   #category-advanced > .category-icon {
 730     -moz-image-region: rect(0, 336px, 48px, 288px);
 731   }
 732
 733   #category-advanced[selected] > .category-icon {
 734     -moz-image-region: rect(48px, 336px, 96px, 288px);
 735   }
 736 }