gecko-dev/devtools/client/themes/webaudioeditor.css

197 строки
3.9 KiB
CSS

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
/* Reload and waiting notices */
.notice-container {
margin-top: -50vh;
color: var(--theme-body-color-alt);
}
#reload-notice {
font-size: 120%;
}
#waiting-notice {
font-size: 110%;
}
/* Context Graph */
svg {
overflow: hidden;
-moz-box-flex: 1;
--arrow-color: var(--theme-splitter-color);
--text-color: var(--theme-body-color);
}
.theme-dark svg {
--arrow-color: var(--theme-body-color-alt);
}
/* Edges in graph */
.edgePath path {
stroke-width: 1px;
stroke: var(--arrow-color);
fill: none;
}
svg #arrowhead {
/* !important is needed to override inline style */
fill: var(--arrow-color) !important;
}
/* AudioParam connection edges */
g.edgePath.param-connection path {
stroke-dasharray: 5,5;
stroke: var(--arrow-colo);
}
/* 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(--text-color);
}
/* Audio Nodes */
.nodes rect {
stroke-width: 1px;
cursor: pointer;
stroke: var(--theme-splitter-color);
fill: var(--theme-toolbar-background);
}
/**
* Bypassed Nodes
*/
.theme-light .nodes g.bypassed rect {
fill: url(chrome://devtools/skin/images/filters.svg#bypass-light);
}
.theme-dark .nodes g.bypassed rect {
fill: url(chrome://devtools/skin/images/filters.svg#bypass-dark);
}
.nodes g.bypassed.selected rect {
stroke: var(--theme-selection-background);
}
.nodes g.bypassed text {
opacity: 0.6;
}
/**
* Selected Nodes
*/
.nodes g.selected rect {
fill: var(--theme-selection-background);
}
/* Don't style bypassed nodes text differently because it'd be illegible in light-theme */
g.selected:not(.bypassed) text {
fill: var(--theme-selection-color);
}
/* Text in nodes and edges */
text {
cursor: default; /* override the "text" cursor */
fill: var(--text-color);
font-size: 1.25em;
/* Make sure text stays inside its container in RTL locales */
direction: ltr;
}
.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(images/alerticon-warning.png);
background-size: 13px 12px;
-moz-appearance: none;
opacity: 0;
transition: opacity .5s ease-out 0s;
}
#inspector-pane-toggle {
background: none;
box-shadow: none;
border: none;
list-style-image: var(--theme-pane-collapse-image);
}
#inspector-pane-toggle > .toolbarbutton-icon {
width: 16px;
height: 16px;
}
#inspector-pane-toggle.pane-collapsed {
list-style-image: var(--theme-pane-expand-image);
}
/**
* 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.1dppx) {
.web-audio-inspector .error {
background-image: url(images/alerticon-warning@2x.png);
}
}
/**
* Inspector toolbar
*/
#audio-node-toolbar .bypass {
list-style-image: url(images/power.svg);
}
/**
* Responsive Styles
* `.devtools-responsive-container` takes care of most of
* the changing of host types.
*/
@media (max-width: 700px) {
/**
* Override the inspector toggle so it's always open
* in the portrait view, with the toggle button hidden.
*/
#inspector-pane-toggle {
display: none;
}
#web-audio-inspector {
margin-left: 0px !important;
margin-right: 0px !important;
}
}