try to get a bit more of an LCARS style into the new in-content prefs

[themes.git] / LCARStrek / browser / preferences / in-content / preferences.css

/* - This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
   - You can obtain one at http://mozilla.org/MPL/2.0/. */

/* === BEGIN shared/in-content/preferences.css === */

@namespace html "http://www.w3.org/1999/xhtml";

#dialogBox,
dialog,
window,
prefwindow,
.windowDialog,
page {
  background-color: #000000;
}

* {
  -moz-user-select: text;
}

treecol {
  /* override the * rule to let the treecol be sortable */
  -moz-user-select: none;
}

caption {
}

caption > label {
}

.main-content {
  padding: 1.5em 0 0; /* That padding needs to match the upper stripe. */
  overflow: auto;

  /* This actually results in two black boxes extending to the right and bottom,
   * leaving the LCARS-gray background only in a top stripe and
   * a bit larger area on the top left.
   * The prefpane will overlay that with the rounded shape we want. */
  background-color: #A09090;
  background-position: 3em 1.5em, 0px 5em;
  background-image: linear-gradient(0deg, #000, #000), linear-gradient(0deg, #000, #000);
  background-repeat: no-repeat;
}

prefpane {
  padding: 10px 20px 0px;
  border-radius: 1em 0 0 0;
  background-color: #000000;

  max-width: 800px;
  font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  font-size: 1.25rem;
  line-height: 22px;
  color: #FF9F00;
}

prefpane > .content-box {
  max-width: 800px;
  overflow: visible;
}

/* groupboxes */

groupbox {
}

groupbox label {
}

/* tabpanels and tabs */

tabpanels {
}

tabs {
}

.tabs-left,
.tabs-right {
}

tab {
}

tab[selected] {
}

.tab-text {
}

tab:not([selected]):hover > .tab-middle > .tab-text {
}

tab:not([selected]):hover:active > .tab-middle > .tab-text {
}

tab[selected] > .tab-middle > .tab-text {
}

/* buttons and menulists */

button,
menulist {
}

button:not([disabled]):hover,
menulist:not([disabled]):hover {
}

button:not([disabled]):hover:active,
menulist[open="true"]:not([disabled]) {
}

button[disabled],
menulist[disabled] {
}

button > .button-box,
menulist > .menulist-label-box {
}

button[type="menu"] > .button-box > .button-menu-dropmarker {
}
/*
.help-button {
  min-width: 30px;
  border-radius: 2px;
  border: 1px solid #C1C1C1;
  background-color: #FFCB00;
  background-image: none;
  box-shadow: none;
}

.help-button:not([disabled="true"]):hover {
  background-color: #F4C200;
  background-image: none;
}

.help-button:not([disabled="true"]):hover:active {
  background-color: #EABA00;
  background-image: none;
}

.close-icon > .button-box,
.help-button > .button-box {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
*/
.help-button > .button-box > .button-icon {
  width: 26px;
  height: 26px;
  background-image: url("chrome://browser/skin/preferences/in-content/help-glyph.png");
  background-position: center;
}

@media (min-resolution: 2dppx) {
  .help-button > .button-box > .button-icon {
    background-size: 26px 26px;
    background-image: url("chrome://browser/skin/preferences/in-content/help-glyph@2x.png");
  }
}

.help-button > .button-box > .button-text {
  display: none;
}

.spinbuttons-button {
}

.spinbuttons-up {
}

.spinbuttons-down  {
}

.spinbuttons-button > .button-box {
}

.spinbuttons-up > .button-box > .button-icon {
}

.spinbuttons-up[disabled] > .button-box > .button-icon {
}

.spinbuttons-down > .button-box > .button-icon {
}

.spinbuttons-down[disabled] > .button-box > .button-icon {
}

menulist:not([editable="true"]) > .menulist-dropmarker {
}

menulist[disabled]:not([editable="true"]) > .menulist-dropmarker {
}

menulist > menupopup,
button[type="menu"] > menupopup {
}

menulist > menupopup menu,
menulist > menupopup menuitem,
button[type="menu"] > menupopup menu,
button[type="menu"] > menupopup menuitem {
}

menulist > menupopup > menu[_moz-menuactive="true"],
menulist > menupopup > menuitem[_moz-menuactive="true"],
button[type="menu"] > menupopup > menu[_moz-menuactive="true"],
button[type="menu"] > menupopup > menuitem[_moz-menuactive="true"] {
}

menulist > menupopup > menu[selected="true"],
menulist > menupopup > menuitem[selected="true"],
button[type="menu"] > menupopup > menu[selected="true"],
button[type="menu"] > menupopup > menuitem[selected="true"] {
}

menulist > menupopup menuseparator,
button[type="menu"] > menupopup menuseparator {
}

/* textboxes */

textbox {
}

textbox[focused] {
}

textbox[disabled] {
}

/* Links */

.text-link,
.inline-link,
html|a.inline-link {
}

.text-link:hover,
.inline-link:hover {
}

.text-link:hover:active,
.inline-link:hover:active {
}

/* Checkboxes and radio buttons */

.checkbox-check {
}

.checkbox-check[checked] {
}

radio {
}

.radio-check {
}

.radio-check[selected] {
}

/* Category List */

#categories {
  background-color: #A09090;
  padding-top: 4em;
  margin: 0;
  border-radius: 1em 0 0 0;
  border: none;
}

.category {
  background-color: #000000;
  color: #FFCF00;
  -moz-border-end-width: 0;
  -moz-padding-start: 15px;
  -moz-padding-end: 21px;
  min-height: 40px;
  transition: background-color 150ms;
}

.category:hover {
  background-color: #FFCF00;
  color: #000000;
}

.category[selected] {
  background-color: #008484;
  color: #000000;
}

#categories[keyboard-navigation="true"]:-moz-focusring > .category[current] {
  border-top: 1px dotted #000000;
  border-bottom: 1px dotted #000000;
}

.category-name {
  line-height: 22px;
  font-size: 1.25rem;
  padding-bottom: 2px;
  -moz-padding-start: 9px;
  margin: 0;
}

.category-icon {
  width: 24px;
  height: 24px;
  list-style-image: url("chrome://browser/skin/preferences/in-content/icons.png");
}

#category-general > .category-icon {
  -moz-image-region: rect(0, 24px, 24px, 0);
}

#category-general:hover > .category-icon,
#category-general[selected] > .category-icon {
  -moz-image-region: rect(24px, 24px, 48px, 0);
}

#category-content > .category-icon {
  -moz-image-region: rect(0, 48px,  24px, 24px)
}

#category-content:hover > .category-icon,
#category-content[selected] > .category-icon {
  -moz-image-region: rect(24px, 48px, 48px, 24px);
}

#category-application > .category-icon {
  -moz-image-region: rect(0, 72px,  24px, 48px)
}

#category-application:hover > .category-icon,
#category-application[selected] > .category-icon {
  -moz-image-region: rect(24px, 72px, 48px, 48px);
}

#category-privacy > .category-icon {
  -moz-image-region: rect(0, 96px,  24px, 72px)
}

#category-privacy:hover > .category-icon,
#category-privacy[selected] > .category-icon {
  -moz-image-region: rect(24px, 96px, 48px, 72px);
}

#category-security > .category-icon {
  -moz-image-region: rect(0, 120px,  24px, 96px)
}

#category-security:hover > .category-icon,
#category-security[selected] > .category-icon {
  -moz-image-region: rect(24px, 120px, 48px, 96px);
}

#category-sync > .category-icon {
  -moz-image-region: rect(0, 144px, 24px, 120px);
}

#category-sync:hover > .category-icon,
#category-sync[selected] > .category-icon {
  -moz-image-region: rect(24px, 144px, 48px, 120px);
}

#category-advanced > .category-icon {
  -moz-image-region: rect(0, 168px, 24px, 144px)
}

#category-advanced:hover > .category-icon,
#category-advanced[selected] > .category-icon {
  -moz-image-region: rect(24px, 168px, 48px, 144px);
}

/* header */

.header {
  margin-bottom: 15px;
}

.header-icon {
  width: 40px;
  max-height: 40px;
  -moz-margin-end: 20px;
  list-style-image: url("chrome://browser/skin/preferences/in-content/header.png");
}

.header-name {
  font-size: 2.5rem;
  font-weight: normal;
  line-height: 40px;
  margin: 0;
}

#header-general > .header-icon {
  -moz-image-region: rect(0, 40px, 40px, 0);
}

#header-content > .header-icon {
  -moz-image-region: rect(0, 80px, 40px, 40px);
}

#header-application > .header-icon {
  -moz-image-region: rect(0, 120px, 40px, 80px);
}

#header-privacy > .header-icon {
  -moz-image-region: rect(0, 160px, 40px, 120px);
}

#header-security > .header-icon {
  -moz-image-region: rect(0, 200px, 40px, 160px);
}

#header-sync > .header-icon {
  -moz-image-region: rect(0, 240px, 40px, 200px);
}

#header-advanced > .header-icon {
  -moz-image-region: rect(0, 280px, 40px, 240px);
}

@media (min-resolution: 2dppx) {
  .header-icon {
    list-style-image: url("chrome://browser/skin/preferences/in-content/header@2x.png");
  }

  #header-general > .header-icon {
    -moz-image-region: rect(0, 80px, 80px, 0);
  }

  #header-content > .header-icon {
    -moz-image-region: rect(0, 160px, 80px, 80px);
  }

  #header-application > .header-icon {
    -moz-image-region: rect(0, 240px, 80px, 160px);
  }

  #header-privacy > .header-icon {
    -moz-image-region: rect(0, 320px, 80px, 240px);
  }

  #header-security > .header-icon {
    -moz-image-region: rect(0, 400px, 80px, 320px);
  }

  #header-sync > .header-icon {
    -moz-image-region: rect(0, 480px, 80px, 400px);
  }

  #header-advanced > .header-icon {
    -moz-image-region: rect(0, 560px, 80px, 480px);
  }
}

.indent {
  margin-top: 7px;
  margin-bottom: 7px;
}

/* General Pane */
/*
filefield {
  -moz-appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
}

.fileFieldContentBox {
  background-color: transparent;
}

.fileFieldIcon {
  -moz-margin-start: 10px;
  -moz-margin-end: 0;
}

.fileFieldLabel {
  -moz-margin-start: -26px;
  -moz-padding-start: 36px;
}
*/

/* Applications Pane Styles */

#applicationsContent {
  -moz-margin-start: 60px;
  padding: 15px 0;
}

#filter {
  -moz-margin-start: 0;
}

#handlersView {
  -moz-margin-start: 0;
  font-size: 1.25rem;
  line-height: 22px;
  border: none; /*1px solid #9C9CFF;*/
  margin: 0;
  overflow-y: auto;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  height: 500px;
}

#handlersView > listheader {
  border: none;
  background: transparent;
  padding: 0;
}

#handlersView > listheader > treecol {
}

#handlersView > scrollbox {
  border-left: 1px solid #9C9CFF;
  border-right: 1px solid #9C9CFF;
  border-bottom: 1px solid #9C9CFF;
}

#typeColumn,
#actionColumn {
  line-height: 20px;
/*  color: #737980;
  height: 36px;
  padding: 0 10px;
  background-color: #F7F7F7;
  border: 1px solid #CCCCCC;
  -moz-border-top-colors: none;
  -moz-border-right-colors: none;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
*/
}

#typeColumn:-moz-locale-dir(ltr),
#actionColumn:-moz-locale-dir(rtl) {
  border-top-left-radius: 5px;
}

#typeColumn:-moz-locale-dir(rtl),
#actionColumn:-moz-locale-dir(ltr) {
  border-top-right-radius: 5px;
}
/*
#typeColumn:hover,
#actionColumn:hover {
  border-color: #737980;
}

#typeColumn:hover:active,
#actionColumn:hover:active {
  padding: 0 10px;
  border-color: #0096DC;
}
*/
#typeColumn > .treecol-sortdirection[sortDirection=ascending],
#actionColumn > .treecol-sortdirection[sortDirection=ascending],
#typeColumn > .treecol-sortdirection[sortDirection=descending],
#actionColumn > .treecol-sortdirection[sortDirection=descending] {
}

#typeColumn > .treecol-sortdirection[sortDirection=descending],
#actionColumn > .treecol-sortdirection[sortDirection=descending] {
}

#handlersView > richlistitem {
  min-height: 40px !important;
}

.typeIcon {
  -moz-margin-start: 10px !important;
  -moz-margin-end: 9px !important;
}

.actionIcon {
  -moz-margin-start: 11px !important;
  -moz-margin-end: 8px !important;
}

.actionsMenu {
  height: 40px;
  max-height: 40px;
}

.actionsMenu > menupopup > menuitem {
  -moz-padding-start: 10px !important;
}

.actionsMenu > menupopup > menuitem > .menu-iconic-left {
  -moz-margin-end: 8px !important;
}

/* XXX This style is for bug 740213 and should be removed once that
   bug has a solution. */
description > html|a {
  cursor: pointer;
}

#offlineAppsList,
#syncEnginesList {
/*  -moz-appearance: none;
  color: #737980;
  padding: 10px;
  border: 1px solid rgba(23,50,77,0.4);
  border-radius: 5px;
  background-color: #F1F1F1;*/
}

#weavePrefsDeck {
  -moz-margin-start: 60px;
}

#noFxaAccount {
  /* Overriding the margins from the base preferences.css theme file.
     These overrides can be simplified by fixing bug 1027174 */
  margin: 0;
}

#weavePrefsDeck > vbox > label,
#weavePrefsDeck > vbox > groupbox,
#weavePrefsDeck > vbox > description,
#weavePrefsDeck > vbox > #pairDevice > label,
#weavePrefsDeck > #needsUpdate > hbox > #loginError,
#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP) > label {
  /* no margin-start for elements at the begin of a line */
  -moz-margin-start: 0;
}

#advancedPrefs {
  padding-bottom: 0; /* no padding needed in inContent prefs */
}

#encryptionPanel {
  margin-top: 15px;
  -moz-margin-start: 60px;
}

#telemetryLearnMore,
#FHRLearnMore,
#crashReporterLearnMore {
  /* center the links */
  margin-top: 8px;
  margin-bottom: 8px;
}


/**
 * Sub-dialog
 */

#dialogOverlay {
  background-color: rgba(0,0,0,0.75);
  visibility: hidden;
}

#dialogBox {
  border: 1px solid #9C9CFF;
  display: -moz-box;
  margin: 0;
  padding-right: 6px;
  padding-left: 6px;
}

#dialogBox[resizable="true"] {
  resize: both;
  overflow: hidden;
  min-height: 30em;
  min-width: 66ch;
}

#dialogTitle {
  -moz-margin-start: 5px !important;
}

.close-icon {
  background-color: transparent !important;
  border: none;
  box-shadow: none;
  height: 18px;
  padding: 0;
  min-width: 18px;
}

#dialogBox > .groupbox-body {
  -moz-appearance: none;
  padding: 0;
}

#dialogFrame {
  -moz-box-flex: 1;
  /* Default dialog dimensions */
  height: 20em;
  width: 66ch;
}

/* needs to be removed with bug 1035625 */
:-moz-any(dialog, window, prefwindow) resizer {
  display: none;
}

tree:not(#rejectsTree) {
  min-height: 15em;
}

:-moz-any(dialog, window, prefwindow) groupbox {
  -moz-margin-start: 8px;
  -moz-margin-end: 8px;
}

/**
 * End sub-dialog
 */

/* === END shared/in-content/preferences.css === */

caption {
}

.indent-small {
  -moz-margin-start: 10px;
}

@media (min-resolution: 2dppx) {
  checkbox:hover::before,
  checkbox[checked]::before {
  }

  checkbox[checked]::before {
  }

  .category-icon {
    list-style-image: url("chrome://browser/skin/preferences/in-content/icons@2x.png");
  }

  #category-general > .category-icon {
    -moz-image-region: rect(0, 48px, 48px, 0);
  }

  #category-general[selected] > .category-icon {
    -moz-image-region: rect(48px, 48px, 96px, 0);
  }

  #category-content > .category-icon {
    -moz-image-region: rect(0, 96px, 48px, 48px);
  }

  #category-content[selected] > .category-icon {
    -moz-image-region: rect(48px, 96px, 96px, 48px);
  }

  #category-application > .category-icon {
    -moz-image-region: rect(0, 144px, 48px, 96px);
  }

  #category-application[selected] > .category-icon {
    -moz-image-region: rect(48px, 144px, 96px, 96px);
  }

  #category-privacy > .category-icon {
    -moz-image-region: rect(0, 192px, 48px, 144px);
  }

  #category-privacy[selected] > .category-icon {
    -moz-image-region: rect(48px, 192px, 96px, 144px);
  }

  #category-security > .category-icon {
    -moz-image-region: rect(0, 240px, 48px, 192px);
  }

  #category-security[selected] > .category-icon {
    -moz-image-region: rect(48px, 240px, 96px, 192px);
  }

  #category-sync > .category-icon {
    -moz-image-region: rect(0, 288px, 48px, 240px);
  }

  #category-sync[selected] > .category-icon {
    -moz-image-region: rect(48px, 288px, 96px, 240px);
  }

  #category-advanced > .category-icon {
    -moz-image-region: rect(0, 336px, 48px, 288px);
  }

  #category-advanced[selected] > .category-icon {
    -moz-image-region: rect(48px, 336px, 96px, 288px);
  }
}