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 }
 108
 109 #category-general > .category-icon {
 110   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general");
 111 }
 112
 113 #category-general:hover > .category-icon,
 114 #category-general[selected] > .category-icon {
 115   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general-active");
 116 }
 117
 118 #category-search > .category-icon {
 119   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search");
 120 }
 121
 122 #category-search:hover > .category-icon,
 123 #category-search[selected] > .category-icon {
 124   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search-active");
 125 }
 126
 127 #category-content > .category-icon {
 128   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content");
 129 }
 130
 131 #category-content:hover > .category-icon,
 132 #category-content[selected] > .category-icon {
 133   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content-active");
 134 }
 135
 136 #category-application > .category-icon {
 137   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications");
 138 }
 139
 140 #category-application:hover > .category-icon,
 141 #category-application[selected] > .category-icon {
 142   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications-active");
 143 }
 144
 145 #category-privacy > .category-icon {
 146   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy");
 147 }
 148
 149 #category-privacy:hover > .category-icon,
 150 #category-privacy[selected] > .category-icon {
 151   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy-active");
 152 }
 153
 154 #category-security > .category-icon {
 155   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security");
 156 }
 157
 158 #category-security:hover > .category-icon,
 159 #category-security[selected] > .category-icon {
 160   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security-active");
 161 }
 162
 163 #category-sync > .category-icon {
 164   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync");
 165 }
 166
 167 #category-sync:hover > .category-icon,
 168 #category-sync[selected] > .category-icon {
 169   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync-active");
 170 }
 171
 172 #category-advanced > .category-icon {
 173   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced");
 174 }
 175
 176 #category-advanced:hover > .category-icon,
 177 #category-advanced[selected] > .category-icon {
 178   list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced-active");
 179 }
 180
 181 @media (max-width: 800px) {
 182   .category-name {
 183     display: none;
 184   }
 185 }
 186
 187 /* header */
 188
 189 #header-advanced {
 190   border-bottom: none;
 191   padding-bottom: 0;
 192 }
 193
 194 .indent {
 195   margin-top: 7px;
 196   margin-bottom: 7px;
 197 }
 198
 199 /* General Pane */
 200
 201 #startupTable {
 202   border-collapse: collapse;
 203 }
 204
 205 #startupTable > tr > td {
 206   padding: 0; /* remove the padding from html.css */
 207 }
 208
 209 #startupTable > tr:not(:first-child) > td {
 210   padding-top: 0.5em; /* add a spacing between the rows */
 211 }
 212
 213 #startupTable > tr > .label-cell {
 214   text-align: end;
 215   width: 0; /* make the column as small as possible */
 216 }
 217
 218 #startupTable > tr > .label-cell > label {
 219   white-space: nowrap;
 220 }
 221
 222 #startupTable > tr > .content-cell > menulist,
 223 #startupTable > tr > .content-cell > textbox {
 224   width: calc(100% - 8px);
 225   margin-left: 4px;
 226   margin-right: 4px;
 227 }
 228
 229 #startupTable > tr > .homepage-buttons {
 230   display: flex;
 231   flex-wrap: wrap;
 232 }
 233
 234 #startupTable > tr > .homepage-buttons > .content-cell-item {
 235   flex-grow: 1;
 236 }
 237
 238 #useFirefoxSync  {
 239   font-size: 90%;
 240   -moz-margin-end: 8px !important;
 241 }
 242
 243 #getStarted {
 244   font-size: 90%;
 245 }
 246
 247 #isNotDefaultLabel {
 248   font-weight: bold;
 249 }
 250
 251 /* Content pane */
 252 #playDRMContentLink {
 253   /* Line up with the buttons in the other grid bits: */
 254   margin-left: 4px !important;
 255   margin-right: 4px !important;
 256 }
 257
 258 #defaultFontSizeLabel {
 259   /* !important needed to override common !important rule */
 260   -moz-margin-start: 4px !important;
 261 }
 262
 263 /* Applications Pane Styles */
 264
 265 #applicationsContent {
 266   padding: 15px 0;
 267 }
 268
 269 #filter {
 270   -moz-margin-start: 0;
 271 }
 272
 273 #handlersView {
 274   height: 25em;
 275 }
 276
 277 #handlersView > richlistitem {
 278   min-height: 36px !important;
 279 }
 280
 281 .typeIcon {
 282   -moz-margin-start: 10px !important;
 283   -moz-margin-end: 9px !important;
 284 }
 285
 286 .actionIcon {
 287   -moz-margin-start: 11px !important;
 288   -moz-margin-end: 8px !important;
 289 }
 290
 291 .actionsMenu {
 292   min-height: 36px;
 293 }
 294
 295 .actionsMenu > menupopup > menuitem {
 296   -moz-padding-start: 10px !important;
 297 }
 298
 299 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
 300   -moz-margin-end: 8px !important;
 301 }
 302
 303 /* Collapse the non-active vboxes in decks to use only the height the
 304    active vbox needs */
 305 #historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
 306 #historyPane:not([selectedIndex="2"]) > #historyCustomPane,
 307 #weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount,
 308 #weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate,
 309 #weavePrefsDeck:not([selectedIndex="3"]) > #fxaDeterminingStatus,
 310 #weavePrefsDeck:not([selectedIndex="4"]) > #noFxaAccount,
 311 #weavePrefsDeck:not([selectedIndex="5"]) > #hasFxaAccount,
 312 #fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
 313 #fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
 314   visibility: collapse;
 315 }
 316
 317 /* XXX This style is for bug 740213 and should be removed once that
 318    bug has a solution. */
 319 description > html|a {
 320   cursor: pointer;
 321 }
 322
 323 #noFxaAccount {
 324   /* Overriding the margins from the base preferences.css theme file.
 325      These overrides can be simplified by fixing bug 1027174 */
 326   margin: 0;
 327 }
 328
 329 #weavePrefsDeck > vbox > label,
 330 #weavePrefsDeck > vbox > groupbox,
 331 #weavePrefsDeck > vbox > description,
 332 #weavePrefsDeck > vbox > #pairDevice > label,
 333 #weavePrefsDeck > #needsUpdate > hbox > #loginError,
 334 #weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label,
 335 #weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-small) > label {
 336   /* no margin-start for elements at the begin of a line */
 337   -moz-margin-start: 0;
 338 }
 339
 340 #advancedPrefs {
 341   padding-bottom: 0; /* no padding needed in inContent prefs */
 342 }
 343
 344 #tabsElement {
 345 /*  -moz-margin-end: 4px; / add the 4px end-margin of other elements */
 346 }
 347
 348 #telemetryLearnMore,
 349 #FHRLearnMore,
 350 #crashReporterLearnMore {
 351   /* provide some margin between the links and the label text */
 352   /* !important is needed to override the rules defined in common.css */
 353   -moz-margin-start: 20px !important;
 354   /* center the links */
 355   margin-top: 8px;
 356   margin-bottom: 8px;
 357 }
 358
 359 #trackingProtectionImage {
 360   width: 16px;
 361   height: 16px;
 362   list-style-image: url("chrome://browser/skin/bad-content-blocked-16.png");
 363 }
 364
 365 @media (min-resolution: 2dppx) {
 366   #trackingProtectionImage {
 367     list-style-image: url("chrome://browser/skin/bad-content-blocked-16@2x.png");
 368   }
 369 }
 370
 371 #showUpdateHistory {
 372   -moz-margin-start: 0;
 373 }
 374
 375 /**
 376  * Dialog
 377  */
 378
 379 #dialogOverlay {
 380   background-color: rgba(0,0,0,0.75);
 381   visibility: hidden;
 382 }
 383
 384 #dialogBox {
 385   background-color: #000000;
 386   background-clip: content-box;
 387   color: #FF9F00;
 388   /* font-size: 14px; */
 389   border: 1px solid #9C9CFF;
 390   border-radius: 10px;
 391   display: -moz-box;
 392   margin: 0;
 393   padding-right: 6px;
 394   padding-left: 6px;
 395 }
 396
 397 #dialogBox[resizable="true"] {
 398   resize: both;
 399   overflow: hidden;
 400   min-height: 20em;
 401   min-width: 66ch;
 402 }
 403
 404 #dialogBox > .groupbox-title {
 405   -moz-margin-start: 0;
 406   -moz-margin-end: 0;
 407 /*  padding: 3.5px 0;
 408   background-color: #F1F1F1; */
 409 }
 410
 411 #dialogTitle {
 412   text-align: center;
 413 }
 414
 415 .close-icon {
 416   background-color: transparent !important;
 417   border: none;
 418   box-shadow: none;
 419   height: 18px;
 420   padding: 0;
 421   min-width: 18px;
 422 }
 423
 424 #dialogBox > .groupbox-title > caption {
 425   margin: 0;
 426   border-radius: 1000px;
 427   background-color: #A09090;
 428 }
 429
 430 #dialogBox > .groupbox-body {
 431   -moz-appearance: none;
 432   padding: 0;
 433 }
 434
 435 #dialogFrame {
 436   -moz-box-flex: 1;
 437   /* Default dialog dimensions */
 438   height: 20em;
 439   width: 66ch;
 440 }
 441
 442 .largeDialogContainer.doScroll {
 443   overflow-y: auto;
 444   -moz-box-flex: 1;
 445 }
 446
 447 /**
 448  * End Dialog
 449  */
 450
 451 /**
 452  * Font dialog menulist fixes
 453  */
 454
 455 #defaultFontType,
 456 #serif,
 457 #sans-serif,
 458 #monospace {
 459   min-width: 30ch;
 460 }
 461
 462 /**
 463  * Sync migration
 464  */
 465 #sync-migrate-upgrade-description {
 466   /* description elts need a min-width to wrap correctly - bug 630864? */
 467   min-width: 100px
 468 }
 469
 470 #sync-migration {
 471   border: 1px solid #9C9CFF;
 472   background-color: #000000;
 473   color: #A09090;
 474   text-shadow: none;
 475   margin: 5px 0 0 0;
 476   animation: fadein 3000ms;
 477 }
 478
 479 @keyframes fadein {
 480   from { opacity: 0; }
 481   to   { opacity: 1; }
 482 }
 483
 484 /* === END shared/in-content/preferences.css === */
 485
 486 caption {
 487 }
 488
 489 .indent-small {
 490   -moz-margin-start: 10px;
 491 }
 492
 493 @media (min-resolution: 2dppx) {
 494   checkbox:hover::before,
 495   checkbox[checked]::before {
 496   }
 497
 498   checkbox[checked]::before {
 499   }
 500 }