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/. */
5 /* Reload and waiting notices */
11 background-color: var(--theme-toolbar-background);
12 color: var(--theme-body-color-alt);
23 #waiting-notice::before {
24 display: inline-block;
26 background: url("chrome://global/skin/icons/loading.gif") center no-repeat;
43 stroke: #A09090; /* Grey foreground text */
46 /* AudioParam connection edges */
47 g.edgePath.param-connection {
48 stroke-dasharray: 5,5;
51 .edgePath.param-connection path {
52 stroke: #A09090; /* Grey foreground text */
55 /* Labels in AudioParam connection should have background that match
56 * the main background so there's whitespace around the label, on top of the
59 fill: var(--theme-body-background);
62 fill: var(--theme-highlight-color-blue);
72 stroke: var(--theme-splitter-color);
73 fill: var(--theme-toolbar-background);
80 .theme-light .nodes g.bypassed rect {
81 fill: url(chrome://browser/skin/devtools/filters.svg#bypass-light);
83 .theme-dark .nodes g.bypassed rect {
84 fill: url(chrome://browser/skin/devtools/filters.svg#bypass-dark);
86 .nodes g.bypassed.selected rect {
87 stroke: var(--theme-selection-background);
91 .nodes g.bypassed text {
100 .nodes g.selected rect {
101 fill: var(--theme-selection-background);
105 /* Text in nodes and edges */
107 cursor: default; /* override the "text" cursor */
109 font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
114 fill: var(--theme-body-color-alt);
117 /* fill: var(--theme-toolbar-background); */
128 /* hide the variables view scope title as its redundant,
129 * because there's only one scope displayed. */
130 .variables-view-scope > .title {
134 #web-audio-inspector-title {
138 .web-audio-inspector .error {
139 background-image: url("alerticon-warning.png");
140 background-size: 13px 12px;
141 -moz-appearance: none;
143 transition: opacity .5s ease-out 0s;
146 #inspector-pane-toggle {
150 list-style-image: url("debugger-collapse.png");
151 -moz-image-region: rect(0px,16px,16px,0px);
154 #inspector-pane-toggle > .toolbarbutton-icon {
159 #inspector-pane-toggle[pane-collapsed] {
160 list-style-image: url("debugger-expand.png");
163 #inspector-pane-toggle:active {
164 -moz-image-region: rect(0px,32px,16px,16px);
171 #automation-param-toolbar .automation-param-button[selected] {
172 color: var(--theme-selection-color);
173 background-color: var(--theme-selection-background);
181 @media (min-resolution: 2dppx) {
182 #inspector-pane-toggle {
183 list-style-image: url("debugger-collapse@2x.png");
184 -moz-image-region: rect(0px,32px,32px,0px);
187 #inspector-pane-toggle[pane-collapsed] {
188 list-style-image: url("debugger-expand@2x.png");
191 #inspector-pane-toggle:active {
192 -moz-image-region: rect(0px,64px,32px,32px);
195 .web-audio-inspector .error {
196 background-image: url("alerticon-warning@2x.png");
204 #audio-node-toolbar .bypass {
205 list-style-image: url(power.svg#power);
208 #audio-node-toolbar .bypass[disabled] {
209 list-style-image: url(power.svg#power-disabled);
212 #audio-node-toolbar .bypass:not([disabled]):hover,
213 #audio-node-toolbar .bypass:hover:active,
214 #audio-node-toolbar .bypass[checked] {
215 list-style-image: url(power.svg#power-active);
218 #audio-node-toolbar toolbarbutton[checked] {
219 background-color: var(--theme-selection-background); /* Select Highlight Blue */
222 /* don't invert checked buttons so we can have white icons on light theme */
223 #audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon {
230 * `.devtools-responsive-container` takes care of most of
231 * the changing of host types.
233 @media (max-width: 700px) {
235 * Override the inspector toggle so it's always open
236 * in the portrait view, with the toggle button hidden.
238 #inspector-pane-toggle {
242 #web-audio-inspector {
243 margin-left: 0px !important;
244 margin-right: 0px !important;
248 #inspector-pane-toggle {
252 list-style-image: url("debugger-collapse.png");
253 -moz-image-region: rect(0px,16px,16px,0px);
256 #inspector-pane-toggle[pane-collapsed] {
257 list-style-image: url("debugger-expand.png");
260 #inspector-pane-toggle:active {
261 -moz-image-region: rect(0px,32px,16px,16px);