first part of syncing LCARStrek with Firefox 38 windows theme changes

[themes.git] / LCARStrek / browser / devtools / webaudioeditor.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/. */

/* Reload and waiting notices */
.notice-container {
  margin-top: -50vh;
}

.notice-container {
  background-color: var(--theme-toolbar-background);
  color: var(--theme-body-color-alt);
}

#reload-notice {
  font-size: 120%;
}

#waiting-notice {
  font-size: 110%;
}

#waiting-notice::before {
  display: inline-block;
  content: "";
  background: url("chrome://global/skin/icons/loading.gif") center no-repeat;
  width: 16px;
  height: 16px;
  -moz-margin-end: 6px;
}

/* Context Graph */
svg {
  overflow: hidden;
  -moz-box-flex: 1;
}

/* Edges in graph */
.edgePath path {
  stroke-width: 1px;
  fill: none;

  stroke: #A09090; /* Grey foreground text */
}

/* AudioParam connection edges */
g.edgePath.param-connection {
  stroke-dasharray: 5,5;
}

.edgePath.param-connection path {
  stroke: #A09090; /* Grey foreground text */
}

/* Labels in AudioParam connection should have background that match
 * the main background so there's whitespace around the label, on top of the
 * dotted lines. */
g.edgeLabel rect {
  fill: var(--theme-body-background);
}
g.edgeLabel tspan {
  fill: var(--theme-highlight-color-blue);
}

/* Audio Nodes */
.nodes rect {
  stroke-width: 1px;
  cursor: pointer;
}

.nodes rect {
  stroke: var(--theme-splitter-color);
  fill: var(--theme-toolbar-background);
}

/**
 * Bypassed Nodes
 */

.theme-light .nodes g.bypassed rect {
  fill: url(chrome://browser/skin/devtools/filters.svg#bypass-light);
}
.theme-dark .nodes g.bypassed rect {
  fill: url(chrome://browser/skin/devtools/filters.svg#bypass-dark);
}
.nodes g.bypassed.selected rect {
  stroke: var(--theme-selection-background);
}

/*
.nodes g.bypassed text {
  opacity: 0.8;
}
*/

/**
 * Selected Nodes
 */

.nodes g.selected rect {
  fill: var(--theme-selection-background);
}


/* Text in nodes and edges */
text {
  cursor: default; /* override the "text" cursor */
  font-weight: 300;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  font-size: 14px;
}

text {
  fill: var(--theme-body-color-alt);
}
g.selected text {
/*  fill: var(--theme-toolbar-background); */
}

.nodes text {
  cursor: pointer;
}

/**
 * Inspector Styles
 */

/* hide the variables view scope title as its redundant,
 * because there's only one scope displayed. */
.variables-view-scope > .title {
  display: none;
}

#web-audio-inspector-title {
  margin: 6px;
}

.web-audio-inspector .error {
  background-image: url("alerticon-warning.png");
  background-size: 13px 12px;
  -moz-appearance: none;
  opacity: 0;
  transition: opacity .5s ease-out 0s;
}

#inspector-pane-toggle {
  background: none;
  box-shadow: none;
  border: none;
  list-style-image: url("debugger-collapse.png");
  -moz-image-region: rect(0px,16px,16px,0px);
}

#inspector-pane-toggle > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

#inspector-pane-toggle[pane-collapsed] {
  list-style-image: url("debugger-expand.png");
}

#inspector-pane-toggle:active {
  -moz-image-region: rect(0px,32px,16px,16px);
}

/**
 * Automation Styles
 */

#automation-param-toolbar .automation-param-button[selected] {
  color: var(--theme-selection-color);
  background-color: var(--theme-selection-background);
}

#automation-graph {
  overflow: hidden;
  -moz-box-flex: 1;
}

@media (min-resolution: 2dppx) {
  #inspector-pane-toggle {
    list-style-image: url("debugger-collapse@2x.png");
    -moz-image-region: rect(0px,32px,32px,0px);
  }

  #inspector-pane-toggle[pane-collapsed] {
    list-style-image: url("debugger-expand@2x.png");
  }

  #inspector-pane-toggle:active {
    -moz-image-region: rect(0px,64px,32px,32px);
  }

  .web-audio-inspector .error {
    background-image: url("alerticon-warning@2x.png");
  }
}

/**
 * Inspector toolbar
 */

#audio-node-toolbar .bypass {
  list-style-image: url(power.svg#power);
}

#audio-node-toolbar .bypass[disabled] {
  list-style-image: url(power.svg#power-disabled);
}

#audio-node-toolbar .bypass:not([disabled]):hover,
#audio-node-toolbar .bypass:hover:active,
#audio-node-toolbar .bypass[checked] {
  list-style-image: url(power.svg#power-active);
}

#audio-node-toolbar toolbarbutton[checked] {
  background-color: var(--theme-selection-background); /* Select Highlight Blue */
}

/* don't invert checked buttons so we can have white icons on light theme */
#audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon {
  filter: none;
}


/**
 * Responsive Styles
 * `.devtools-responsive-container` takes care of most of
 * the changing of host types.
 */
@media (max-width: 700px) {
  /**
   * Override the inspector toggle so it's always open
   * in the portrait view, with the toggle button hidden.
   */
  #inspector-pane-toggle {
    display: none;
  }

  #web-audio-inspector {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}

#inspector-pane-toggle {
  background: none;
  box-shadow: none;
  border: none;
  list-style-image: url("debugger-collapse.png");
  -moz-image-region: rect(0px,16px,16px,0px);
}

#inspector-pane-toggle[pane-collapsed] {
  list-style-image: url("debugger-expand.png");
}

#inspector-pane-toggle:active {
  -moz-image-region: rect(0px,32px,16px,16px);
}