make newTab and inspector tool work well from 40 up to 43 nightly
[themes.git] / LCARStrek / browser / devtools / webaudioeditor.css
... / ...
CommitLineData
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/. */
4
5/* Reload and waiting notices */
6.notice-container {
7 margin-top: -50vh;
8}
9
10.notice-container {
11 background-color: var(--theme-toolbar-background);
12 color: var(--theme-body-color-alt);
13}
14
15#reload-notice {
16 font-size: 120%;
17}
18
19#waiting-notice {
20 font-size: 110%;
21}
22
23/* Context Graph */
24svg {
25 overflow: hidden;
26 -moz-box-flex: 1;
27}
28
29/* Edges in graph */
30.edgePath path {
31 stroke-width: 1px;
32 fill: none;
33
34 stroke: #A09090; /* Grey foreground text */
35}
36
37/* AudioParam connection edges */
38g.edgePath.param-connection {
39 stroke-dasharray: 5,5;
40}
41
42.edgePath.param-connection path {
43 stroke: #A09090; /* Grey foreground text */
44}
45
46/* Labels in AudioParam connection should have background that match
47 * the main background so there's whitespace around the label, on top of the
48 * dotted lines. */
49g.edgeLabel rect {
50 fill: var(--theme-body-background);
51}
52g.edgeLabel tspan {
53 fill: var(--theme-highlight-color-blue);
54}
55
56/* Audio Nodes */
57.nodes rect {
58 stroke-width: 1px;
59 cursor: pointer;
60}
61
62.nodes rect {
63 stroke: var(--theme-splitter-color);
64 fill: var(--theme-toolbar-background);
65}
66
67/**
68 * Bypassed Nodes
69 */
70
71.theme-light .nodes g.bypassed rect {
72 fill: url(chrome://browser/skin/devtools/filters.svg#bypass-light);
73}
74.theme-dark .nodes g.bypassed rect {
75 fill: url(chrome://browser/skin/devtools/filters.svg#bypass-dark);
76}
77.nodes g.bypassed.selected rect {
78 stroke: var(--theme-selection-background);
79}
80
81/*
82.nodes g.bypassed text {
83 opacity: 0.8;
84}
85*/
86
87/**
88 * Selected Nodes
89 */
90
91.nodes g.selected rect {
92 fill: var(--theme-selection-background);
93}
94
95
96/* Text in nodes and edges */
97text {
98 cursor: default; /* override the "text" cursor */
99 font-weight: 300;
100 font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
101 font-size: 14px;
102}
103
104text {
105 fill: var(--theme-body-color-alt);
106}
107g.selected text {
108/* fill: var(--theme-toolbar-background); */
109}
110
111.nodes text {
112 cursor: pointer;
113}
114
115/**
116 * Inspector Styles
117 */
118
119/* hide the variables view scope title as its redundant,
120 * because there's only one scope displayed. */
121.variables-view-scope > .title {
122 display: none;
123}
124
125#web-audio-inspector-title {
126 margin: 6px;
127}
128
129.web-audio-inspector .error {
130 background-image: url("alerticon-warning.png");
131 background-size: 13px 12px;
132 -moz-appearance: none;
133 opacity: 0;
134 transition: opacity .5s ease-out 0s;
135}
136
137#inspector-pane-toggle {
138 background: none;
139 box-shadow: none;
140 border: none;
141 list-style-image: url("debugger-collapse.png");
142 -moz-image-region: rect(0px,16px,16px,0px);
143}
144
145#inspector-pane-toggle > .toolbarbutton-icon {
146 width: 16px;
147 height: 16px;
148}
149
150#inspector-pane-toggle[pane-collapsed] {
151 list-style-image: url("debugger-expand.png");
152}
153
154#inspector-pane-toggle:active {
155 -moz-image-region: rect(0px,32px,16px,16px);
156}
157
158/**
159 * Automation Styles
160 */
161
162#automation-param-toolbar .automation-param-button[selected] {
163 color: var(--theme-selection-color);
164 background-color: var(--theme-selection-background);
165}
166
167#automation-graph {
168 overflow: hidden;
169 -moz-box-flex: 1;
170}
171
172@media (min-resolution: 1.25dppx) {
173 #inspector-pane-toggle {
174 list-style-image: url("debugger-collapse@2x.png");
175 -moz-image-region: rect(0px,32px,32px,0px);
176 }
177
178 #inspector-pane-toggle[pane-collapsed] {
179 list-style-image: url("debugger-expand@2x.png");
180 }
181
182 #inspector-pane-toggle:active {
183 -moz-image-region: rect(0px,64px,32px,32px);
184 }
185
186 .web-audio-inspector .error {
187 background-image: url("alerticon-warning@2x.png");
188 }
189}
190
191/**
192 * Inspector toolbar
193 */
194
195#audio-node-toolbar .bypass {
196 list-style-image: url(power.svg#power);
197}
198
199#audio-node-toolbar .bypass[disabled] {
200 list-style-image: url(power.svg#power-disabled);
201}
202
203#audio-node-toolbar .bypass:not([disabled]):hover,
204#audio-node-toolbar .bypass:hover:active,
205#audio-node-toolbar .bypass[checked] {
206 list-style-image: url(power.svg#power-active);
207}
208
209#audio-node-toolbar toolbarbutton[checked] {
210 background-color: var(--theme-selection-background); /* Select Highlight Blue */
211}
212
213/* don't invert checked buttons so we can have white icons on light theme */
214#audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon {
215 filter: none;
216}
217
218
219/**
220 * Responsive Styles
221 * `.devtools-responsive-container` takes care of most of
222 * the changing of host types.
223 */
224@media (max-width: 700px) {
225 /**
226 * Override the inspector toggle so it's always open
227 * in the portrait view, with the toggle button hidden.
228 */
229 #inspector-pane-toggle {
230 display: none;
231 }
232
233 #web-audio-inspector {
234 margin-left: 0px !important;
235 margin-right: 0px !important;
236 }
237}
238
239#inspector-pane-toggle {
240 background: none;
241 box-shadow: none;
242 border: none;
243 list-style-image: url("debugger-collapse.png");
244 -moz-image-region: rect(0px,16px,16px,0px);
245}
246
247#inspector-pane-toggle[pane-collapsed] {
248 list-style-image: url("debugger-expand.png");
249}
250
251#inspector-pane-toggle:active {
252 -moz-image-region: rect(0px,32px,16px,16px);
253}