first part of syncing LCARStrek with Firefox 38 windows theme changes

[themes.git] / LCARStrek / browser / devtools / webaudioeditor.css

diff --git a/LCARStrek/browser/devtools/webaudioeditor.css b/LCARStrek/browser/devtools/webaudioeditor.css
index 552c29aeb67403b64cf5260fe26c6e3b7377931b..9acb10d913977a477167e3d91ebef20162863076 100644 (file)
--- a/LCARStrek/browser/devtools/webaudioeditor.css
+++ b/LCARStrek/browser/devtools/webaudioeditor.css
@@ -8,8 +8,8 @@
 }
 
 .notice-container {
 }
 
 .notice-container {

-  background-color: #000000; /* Toolbars */
-  color: #A09090; /* Light foreground text */
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);

 }
 
 #reload-notice {
 }
 
 #reload-notice {


@@ -39,10 +39,27 @@ svg {
 .edgePath path {
   stroke-width: 1px;
   fill: none;
 .edgePath path {
   stroke-width: 1px;
   fill: none;

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

 }
 
 }
 

-.edgePath path {
-  stroke: #9C9CFF; /* 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 */
 }
 
 /* Audio Nodes */


@@ -52,33 +69,72 @@ svg {
 }
 
 .nodes rect {
 }
 
 .nodes rect {

-  stroke: #9C9CFF; /* Tab toolbar */
-  fill: #000000; /* Toolbars */
+  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 {
 .nodes g.selected rect {

-  fill: #008484; /* Select Highlight Blue */
+  fill: var(--theme-selection-background);

 }
 
 }
 

-/* Text in nodes */
+
+/* Text in nodes and edges */

 text {
 text {

-  cursor: pointer;
+  cursor: default; /* override the "text" cursor */

   font-weight: 300;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
   font-size: 14px;
 }
 
 text {
   font-weight: 300;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
   font-size: 14px;
 }
 
 text {

-  fill: #A09090; /* Grey foreground text */
+  fill: var(--theme-body-color-alt);

 }
 g.selected text {
 }
 g.selected text {

-/*  fill: #f0f1f2; / Toolbars */
+/*  fill: var(--theme-toolbar-background); */
+}
+
+.nodes text {
+  cursor: pointer;

 }
 
 /**
  * Inspector Styles
  */
 
 }
 
 /**
  * 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;
 .web-audio-inspector .error {
   background-image: url("alerticon-warning.png");
   background-size: 13px 12px;


@@ -108,6 +164,20 @@ g.selected text {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
   -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");
 @media (min-resolution: 2dppx) {
   #inspector-pane-toggle {
     list-style-image: url("debugger-collapse@2x.png");


@@ -127,6 +197,34 @@ g.selected text {
   }
 }
 
   }
 }
 

+/**
+ * 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
 /**
  * Responsive Styles
  * `.devtools-responsive-container` takes care of most of


@@ -146,3 +244,19 @@ g.selected text {
     margin-right: 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);
+}