second part of syncing LCARStrek with Firefox 45-48 devtools theme changes
[themes.git] / LCARStrek / devtools / webaudioeditor.css
CommitLineData
acc20e5d
RK
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 {
28e80a05
RK
11 background-color: var(--theme-toolbar-background);
12 color: var(--theme-body-color-alt);
acc20e5d
RK
13}
14
15#reload-notice {
16 font-size: 120%;
17}
18
19#waiting-notice {
20 font-size: 110%;
21}
22
acc20e5d
RK
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;
acc20e5d 33
a21f2959
RK
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 {
28e80a05 50 fill: var(--theme-body-background);
a21f2959
RK
51}
52g.edgeLabel tspan {
368d0b7f 53 fill: var(--theme-highlight-color-blue);
acc20e5d
RK
54}
55
56/* Audio Nodes */
57.nodes rect {
58 stroke-width: 1px;
59 cursor: pointer;
60}
61
62.nodes rect {
28e80a05
RK
63 stroke: var(--theme-splitter-color);
64 fill: var(--theme-toolbar-background);
acc20e5d
RK
65}
66
368d0b7f
RK
67/**
68 * Bypassed Nodes
69 */
70
71.theme-light .nodes g.bypassed rect {
dc9d5d64 72 fill: url(chrome://devtools/skin/filters.svg#bypass-light);
368d0b7f
RK
73}
74.theme-dark .nodes g.bypassed rect {
dc9d5d64 75 fill: url(chrome://devtools/skin/filters.svg#bypass-dark);
368d0b7f
RK
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
acc20e5d 91.nodes g.selected rect {
28e80a05 92 fill: var(--theme-selection-background);
acc20e5d
RK
93}
94
368d0b7f 95
8922acc9 96/* Text in nodes and edges */
acc20e5d 97text {
8922acc9 98 cursor: default; /* override the "text" cursor */
acc20e5d
RK
99 font-weight: 300;
100 font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
101 font-size: 14px;
102}
103
104text {
28e80a05 105 fill: var(--theme-body-color-alt);
acc20e5d
RK
106}
107g.selected text {
28e80a05 108/* fill: var(--theme-toolbar-background); */
acc20e5d
RK
109}
110
8922acc9
RK
111.nodes text {
112 cursor: pointer;
113}
114
acc20e5d
RK
115/**
116 * Inspector Styles
117 */
118
368d0b7f
RK
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
a21f2959
RK
125#web-audio-inspector-title {
126 margin: 6px;
127}
128
acc20e5d 129.web-audio-inspector .error {
dc9d5d64 130 background-image: url("images/alerticon-warning.png");
acc20e5d
RK
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;
d0a8de80 141 list-style-image: url("images/debugger-collapse.png");
acc20e5d
RK
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] {
d0a8de80 151 list-style-image: url("images/debugger-expand.png");
acc20e5d
RK
152}
153
154#inspector-pane-toggle:active {
155 -moz-image-region: rect(0px,32px,16px,16px);
156}
157
368d0b7f
RK
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
024a65e9 172@media (min-resolution: 1.1dppx) {
acc20e5d 173 #inspector-pane-toggle {
d0a8de80 174 list-style-image: url("images/debugger-collapse@2x.png");
acc20e5d
RK
175 -moz-image-region: rect(0px,32px,32px,0px);
176 }
177
178 #inspector-pane-toggle[pane-collapsed] {
d0a8de80 179 list-style-image: url("images/debugger-expand@2x.png");
acc20e5d
RK
180 }
181
182 #inspector-pane-toggle:active {
183 -moz-image-region: rect(0px,64px,32px,32px);
184 }
185
186 .web-audio-inspector .error {
dc9d5d64 187 background-image: url("images/alerticon-warning@2x.png");
acc20e5d
RK
188 }
189}
190
368d0b7f
RK
191/**
192 * Inspector toolbar
193 */
194
195#audio-node-toolbar .bypass {
dadba0f2 196 list-style-image: url(images/power.svg);
368d0b7f
RK
197}
198
acc20e5d
RK
199/**
200 * Responsive Styles
201 * `.devtools-responsive-container` takes care of most of
202 * the changing of host types.
203 */
204@media (max-width: 700px) {
205 /**
206 * Override the inspector toggle so it's always open
207 * in the portrait view, with the toggle button hidden.
208 */
209 #inspector-pane-toggle {
210 display: none;
211 }
212
213 #web-audio-inspector {
214 margin-left: 0px !important;
215 margin-right: 0px !important;
216 }
217}
dccbbf95
RK
218
219#inspector-pane-toggle {
220 background: none;
221 box-shadow: none;
222 border: none;
d0a8de80 223 list-style-image: url("images/debugger-collapse.png");
dccbbf95
RK
224 -moz-image-region: rect(0px,16px,16px,0px);
225}
226
227#inspector-pane-toggle[pane-collapsed] {
d0a8de80 228 list-style-image: url("images/debugger-expand.png");
dccbbf95
RK
229}
230
231#inspector-pane-toggle:active {
232 -moz-image-region: rect(0px,32px,16px,16px);
233}