second part of syncing LCARStrek with Firefox 45-48 devtools theme changes
[themes.git] / LCARStrek / 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://devtools/skin/filters.svg#bypass-light);
73}
74.theme-dark .nodes g.bypassed rect {
75 fill: url(chrome://devtools/skin/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("images/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("images/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("images/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.1dppx) {
173 #inspector-pane-toggle {
174 list-style-image: url("images/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("images/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("images/alerticon-warning@2x.png");
188 }
189}
190
191/**
192 * Inspector toolbar
193 */
194
195#audio-node-toolbar .bypass {
196 list-style-image: url(images/power.svg);
197}
198
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}
218
219#inspector-pane-toggle {
220 background: none;
221 box-shadow: none;
222 border: none;
223 list-style-image: url("images/debugger-collapse.png");
224 -moz-image-region: rect(0px,16px,16px,0px);
225}
226
227#inspector-pane-toggle[pane-collapsed] {
228 list-style-image: url("images/debugger-expand.png");
229}
230
231#inspector-pane-toggle:active {
232 -moz-image-region: rect(0px,32px,16px,16px);
233}