}
.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 {
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;
stroke-width: 1px;
fill: none;
- stroke: #9C9CFF; /* Grey foreground text */
+ 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: #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 {
- fill: #008484; /* Select Highlight Blue */
+ fill: var(--theme-selection-background);
}
-/* Text in nodes */
+
+/* Text in nodes and edges */
text {
- cursor: pointer;
+ cursor: default; /* override the "text" cursor */
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 {
-/* fill: #f0f1f2; / Toolbars */
+/* 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-image-region: rect(0px,32px,16px,16px);
}
-@media (min-resolution: 2dppx) {
+/**
+ * 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: 1.25dppx) {
#inspector-pane-toggle {
list-style-image: url("debugger-collapse@2x.png");
-moz-image-region: rect(0px,32px,32px,0px);
}
}
+/**
+ * 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