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 .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   line-height: 22px;
  32   color: #FF9F00;
  33 }
  34
  35 * {
  36   -moz-user-select: text;
  37 }
  38
  39 button,
  40 treecol {
  41   /* override the * rule */
  42   -moz-user-select: none;
  43 }
  44
  45 /* Category List */
  46
  47 #categories {
  48   max-height: 100vh;
  49
  50   background-color: #A09090;
  51   padding-top: 4em;
  52   margin: 0;
  53   border-radius: 1em 0 0 0;
  54   border: none;
  55 }
  56
  57 #categories > scrollbox {
  58   overflow-x: hidden !important;
  59 }
  60
  61 .category {
  62   background-color: #000000;
  63   color: #FFCF00;
  64   -moz-border-end-width: 0;
  65   -moz-padding-start: 15px;
  66   -moz-padding-end: 21px;
  67   min-height: 40px;
  68   transition: background-color 150ms;
  69 }
  70
  71 .category:hover {
  72   background-color: #FFCF00;
  73   color: #000000;
  74 }
  75
  76 .category[selected] {
  77   background-color: #008484;
  78   color: #000000;
  79 }
  80
  81 #categories[keyboard-navigation="true"]:-moz-focusring > .category[current] {
  82   border-top: 1px dotted #000000;
  83   border-bottom: 1px dotted #000000;
  84 }
  85
  86 .category-name {
  87   line-height: 22px;
  88   font-size: 1.25rem;
  89   padding-bottom: 2px;
  90   -moz-padding-start: 9px;
  91   margin: 0;
  92 }
  93
  94 /**
  95  * We want the last category to always have non-0 getBoundingClientRect().bottom
  96  * so we can use the value to figure out the max-height of the list in
  97  * preferences.js, so use collapse instead of display: none; if it's hidden
  98  */
  99 #categories > .category[hidden="true"] {
 100   display: -moz-box;
 101   visibility: collapse;
 102 }
 103
 104 .category-icon {
 105   width: 24px;
 106   height: 24px;
 107   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.png");
 108 }
 109
 110 #category-general > .category-icon {
 111   -moz-image-region: rect(0, 24px, 24px, 0);
 112 }
 113
 114 #category-general:hover > .category-icon,
 115 #category-general[selected] > .category-icon {
 116   -moz-image-region: rect(24px, 24px, 48px, 0);
 117 }
 118
 119 #category-search > .category-icon {
 120   -moz-image-region: rect(0, 192px, 24px, 168px);
 121 }
 122
 123 #category-search:hover > .category-icon,
 124 #category-search[selected] > .category-icon {
 125   -moz-image-region: rect(24px, 192px, 48px, 168px);
 126 }
 127
 128 #category-content > .category-icon {
 129   -moz-image-region: rect(0, 48px,  24px, 24px)
 130 }
 131
 132 #category-content:hover > .category-icon,
 133 #category-content[selected] > .category-icon {
 134   -moz-image-region: rect(24px, 48px, 48px, 24px);
 135 }
 136
 137 #category-application > .category-icon {
 138   -moz-image-region: rect(0, 72px,  24px, 48px)
 139 }
 140
 141 #category-application:hover > .category-icon,
 142 #category-application[selected] > .category-icon {
 143   -moz-image-region: rect(24px, 72px, 48px, 48px);
 144 }
 145
 146 #category-privacy > .category-icon {
 147   -moz-image-region: rect(0, 96px,  24px, 72px)
 148 }
 149
 150 #category-privacy:hover > .category-icon,
 151 #category-privacy[selected] > .category-icon {
 152   -moz-image-region: rect(24px, 96px, 48px, 72px);
 153 }
 154
 155 #category-security > .category-icon {
 156   -moz-image-region: rect(0, 120px,  24px, 96px)
 157 }
 158
 159 #category-security:hover > .category-icon,
 160 #category-security[selected] > .category-icon {
 161   -moz-image-region: rect(24px, 120px, 48px, 96px);
 162 }
 163
 164 #category-sync > .category-icon {
 165   -moz-image-region: rect(0, 144px, 24px, 120px);
 166 }
 167
 168 #category-sync:hover > .category-icon,
 169 #category-sync[selected] > .category-icon {
 170   -moz-image-region: rect(24px, 144px, 48px, 120px);
 171 }
 172
 173 #category-advanced > .category-icon {
 174   -moz-image-region: rect(0, 168px, 24px, 144px)
 175 }
 176
 177 #category-advanced:hover > .category-icon,
 178 #category-advanced[selected] > .category-icon {
 179   -moz-image-region: rect(24px, 168px, 48px, 144px);
 180 }
 181
 182 @media (max-width: 800px) {
 183   .category-name {
 184     display: none;
 185   }
 186 }
 187
 188 /* header */
 189
 190 #header-advanced {
 191   border-bottom: none;
 192   padding-bottom: 0;
 193 }
 194
 195 .indent {
 196   margin-top: 7px;
 197   margin-bottom: 7px;
 198 }
 199
 200 /* General Pane */
 201
 202 #startupTable {
 203   border-collapse: collapse;
 204 }
 205
 206 #startupTable > tr > td {
 207   padding: 0; /* remove the padding from html.css */
 208 }
 209
 210 #startupTable > tr:not(:first-child) > td {
 211   padding-top: 0.5em; /* add a spacing between the rows */
 212 }
 213
 214 #startupTable > tr > .label-cell {
 215   text-align: end;
 216   width: 0; /* make the column as small as possible */
 217 }
 218
 219 #startupTable > tr > .label-cell > label {
 220   white-space: nowrap;
 221 }
 222
 223 #startupTable > tr > .content-cell > menulist,
 224 #startupTable > tr > .content-cell > textbox {
 225   width: calc(100% - 8px);
 226   margin-left: 4px;
 227   margin-right: 4px;
 228 }
 229
 230 #startupTable > tr > .homepage-buttons {
 231   display: flex;
 232   flex-wrap: wrap;
 233 }
 234
 235 #startupTable > tr > .homepage-buttons > .content-cell-item {
 236   flex-grow: 1;
 237 }
 238
 239 #useFirefoxSync  {
 240   font-size: 90%;
 241   -moz-margin-end: 8px !important;
 242 }
 243
 244 #getStarted {
 245   font-size: 90%;
 246 }
 247
 248 #isNotDefaultLabel {
 249   font-weight: bold;
 250 }
 251
 252 /* Content pane */
 253 #playDRMContentLink {
 254   /* Line up with the buttons in the other grid bits: */
 255   margin-left: 4px !important;
 256   margin-right: 4px !important;
 257 }
 258
 259 /* Applications Pane Styles */
 260
 261 #applicationsContent {
 262   padding: 15px 0;
 263 }
 264
 265 #filter {
 266   -moz-margin-start: 0;
 267 }
 268
 269 #handlersView {
 270   height: 25em;
 271 }
 272
 273 #handlersView > richlistitem {
 274   min-height: 36px !important;
 275 }
 276
 277 .typeIcon {
 278   -moz-margin-start: 10px !important;
 279   -moz-margin-end: 9px !important;
 280 }
 281
 282 .actionIcon {
 283   -moz-margin-start: 11px !important;
 284   -moz-margin-end: 8px !important;
 285 }
 286
 287 .actionsMenu {
 288   min-height: 36px;
 289 }
 290
 291 .actionsMenu > menupopup > menuitem {
 292   -moz-padding-start: 10px !important;
 293 }
 294
 295 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
 296   -moz-margin-end: 8px !important;
 297 }
 298
 299 /* XXX This style is for bug 740213 and should be removed once that
 300    bug has a solution. */
 301 description > html|a {
 302   cursor: pointer;
 303 }
 304
 305 #noFxaAccount {
 306   /* Overriding the margins from the base preferences.css theme file.
 307      These overrides can be simplified by fixing bug 1027174 */
 308   margin: 0;
 309 }
 310
 311 #weavePrefsDeck > vbox > label,
 312 #weavePrefsDeck > vbox > groupbox,
 313 #weavePrefsDeck > vbox > description,
 314 #weavePrefsDeck > vbox > #pairDevice > label,
 315 #weavePrefsDeck > #needsUpdate > hbox > #loginError,
 316 #weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label,
 317 #weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-small) > label {
 318   /* no margin-start for elements at the begin of a line */
 319   -moz-margin-start: 0;
 320 }
 321
 322 #advancedPrefs {
 323   padding-bottom: 0; /* no padding needed in inContent prefs */
 324 }
 325
 326 #tabsElement {
 327 /*  -moz-margin-end: 4px; / add the 4px end-margin of other elements */
 328 }
 329
 330 #encryptionPanel {
 331   margin-top: 15px;
 332 }
 333
 334 #telemetryLearnMore,
 335 #FHRLearnMore,
 336 #crashReporterLearnMore {
 337   /* center the links */
 338   margin-top: 8px;
 339   margin-bottom: 8px;
 340 }
 341
 342 #trackingProtectionImage {
 343   width: 16px;
 344   height: 16px;
 345   list-style-image: url("chrome://browser/skin/bad-content-blocked-16.png");
 346 }
 347
 348 @media (min-resolution: 2dppx) {
 349   #trackingProtectionImage {
 350     list-style-image: url("chrome://browser/skin/bad-content-blocked-16@2x.png");
 351   }
 352 }
 353
 354 /**
 355  * Dialog
 356  */
 357
 358 #dialogOverlay {
 359   background-color: rgba(0,0,0,0.75);
 360   visibility: hidden;
 361 }
 362
 363 #dialogBox {
 364   background-color: #000000;
 365   background-clip: content-box;
 366   color: #FF9F00;
 367   /* font-size: 14px; */
 368   border: 1px solid #9C9CFF;
 369   border-radius: 10px;
 370   display: -moz-box;
 371   margin: 0;
 372   padding-right: 6px;
 373   padding-left: 6px;
 374 }
 375
 376 #dialogBox[resizable="true"] {
 377   resize: both;
 378   overflow: hidden;
 379   min-height: 20em;
 380   min-width: 66ch;
 381 }
 382
 383 #dialogBox > .groupbox-title {
 384   -moz-margin-start: 0;
 385   -moz-margin-end: 0;
 386 /*  padding: 3.5px 0;
 387   background-color: #F1F1F1; */
 388 }
 389
 390 #dialogTitle {
 391   text-align: center;
 392 }
 393
 394 .close-icon {
 395   background-color: transparent !important;
 396   border: none;
 397   box-shadow: none;
 398   height: 18px;
 399   padding: 0;
 400   min-width: 18px;
 401 }
 402
 403 #dialogBox > .groupbox-title > caption {
 404   margin: 0;
 405   border-radius: 1000px;
 406   background-color: #A09090;
 407 }
 408
 409 #dialogBox > .groupbox-body {
 410   -moz-appearance: none;
 411   padding: 0;
 412 }
 413
 414 #dialogFrame {
 415   -moz-box-flex: 1;
 416   /* Default dialog dimensions */
 417   height: 20em;
 418   width: 66ch;
 419 }
 420
 421 /**
 422  * End Dialog
 423  */
 424
 425 /**
 426  * Sync migration
 427  */
 428 #sync-migrate-upgrade-description {
 429   /* description elts need a min-width to wrap correctly - bug 630864? */
 430   min-width: 100px
 431 }
 432
 433 #sync-migration {
 434   border: 1px solid #9C9CFF;
 435   background-color: #000000;
 436   color: #A09090;
 437   text-shadow: none;
 438   margin: 5px 0 0 0;
 439   animation: fadein 3000ms;
 440 }
 441
 442 @keyframes fadein {
 443   from { opacity: 0; }
 444   to   { opacity: 1; }
 445 }
 446
 447 /* === END shared/in-content/preferences.css === */
 448
 449 caption {
 450 }
 451
 452 .indent-small {
 453   -moz-margin-start: 10px;
 454 }
 455
 456 @media (min-resolution: 2dppx) {
 457   checkbox:hover::before,
 458   checkbox[checked]::before {
 459   }
 460
 461   checkbox[checked]::before {
 462   }
 463
 464   .category-icon {
 465     list-style-image: url("chrome://browser/skin/preferences/in-content/icons@2x.png");
 466   }
 467
 468   #category-general > .category-icon {
 469     -moz-image-region: rect(0, 48px, 48px, 0);
 470   }
 471
 472   #category-general:hover > .category-icon,
 473   #category-general[selected] > .category-icon {
 474     -moz-image-region: rect(48px, 48px, 96px, 0);
 475   }
 476
 477   #category-search > .category-icon {
 478     -moz-image-region: rect(0, 384px, 48px, 336px);
 479   }
 480
 481   #category-search:hover > .category-icon,
 482   #category-search[selected] > .category-icon {
 483     -moz-image-region: rect(48, 384px, 96px, 336px);
 484   }
 485
 486   #category-content > .category-icon {
 487     -moz-image-region: rect(0, 96px, 48px, 48px);
 488   }
 489
 490   #category-content:hover > .category-icon,
 491   #category-content[selected] > .category-icon {
 492     -moz-image-region: rect(48px, 96px, 96px, 48px);
 493   }
 494
 495   #category-application > .category-icon {
 496     -moz-image-region: rect(0, 144px, 48px, 96px);
 497   }
 498
 499   #category-application:hover > .category-icon,
 500   #category-application[selected] > .category-icon {
 501     -moz-image-region: rect(48px, 144px, 96px, 96px);
 502   }
 503
 504   #category-privacy > .category-icon {
 505     -moz-image-region: rect(0, 192px, 48px, 144px);
 506   }
 507
 508   #category-privacy:hover > .category-icon,
 509   #category-privacy[selected] > .category-icon {
 510     -moz-image-region: rect(48px, 192px, 96px, 144px);
 511   }
 512
 513   #category-security > .category-icon {
 514     -moz-image-region: rect(0, 240px, 48px, 192px);
 515   }
 516
 517   #category-security:hover > .category-icon,
 518   #category-security[selected] > .category-icon {
 519     -moz-image-region: rect(48px, 240px, 96px, 192px);
 520   }
 521
 522   #category-sync > .category-icon {
 523     -moz-image-region: rect(0, 288px, 48px, 240px);
 524   }
 525
 526   #category-sync:hover > .category-icon,
 527   #category-sync[selected] > .category-icon {
 528     -moz-image-region: rect(48px, 288px, 96px, 240px);
 529   }
 530
 531   #category-advanced > .category-icon {
 532     -moz-image-region: rect(0, 336px, 48px, 288px);
 533   }
 534
 535   #category-advanced:hover > .category-icon,
 536   #category-advanced[selected] > .category-icon {
 537     -moz-image-region: rect(48px, 336px, 96px, 288px);
 538   }
 539 }