michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
michael@0:  * You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: /* Reload and waiting notices */
michael@0: .notice-container {
michael@0:   margin-top: -50vh;
michael@0: }
michael@0: 
michael@0: .theme-dark .notice-container {
michael@0:   background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
michael@0:   color: #f5f7fa; /* Light foreground text */
michael@0: }
michael@0: 
michael@0: .theme-light .notice-container {
michael@0:   background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */
michael@0:   color: #585959; /* Grey foreground text */
michael@0: }
michael@0: 
michael@0: #reload-notice {
michael@0:   font-size: 120%;
michael@0: }
michael@0: 
michael@0: #waiting-notice {
michael@0:   font-size: 110%;
michael@0: }
michael@0: 
michael@0: #waiting-notice::before {
michael@0:   display: inline-block;
michael@0:   content: "";
michael@0:   background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
michael@0:   width: 16px;
michael@0:   height: 16px;
michael@0:   -moz-margin-end: 6px;
michael@0: }
michael@0: 
michael@0: #requests-menu-reload-notice-button {
michael@0:   min-height: 2em;
michael@0: }
michael@0: 
michael@0: /* Context Graph */
michael@0: svg {
michael@0:   position: fixed;
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: /* Edges in graph */
michael@0: .edgePath path {
michael@0:   stroke-width: 1.5px;
michael@0:   fill: none;
michael@0: }
michael@0: 
michael@0: .theme-dark .edgePath path { stroke: #f5f7fa; }
michael@0: .theme-light .edgePath path { stroke: #585959; }
michael@0: 
michael@0: /* Audio Nodes */
michael@0: .nodes rect {
michael@0:   stroke-width: 2px;
michael@0:   cursor: pointer;
michael@0: }
michael@0: 
michael@0: .theme-dark .nodes rect {
michael@0:   stroke: #585959;
michael@0:   fill: #f5f7fa;
michael@0: }
michael@0: 
michael@0: .theme-light .nodes rect {
michael@0:   fill: #585959;
michael@0:   stroke: #f5f7fa;
michael@0: }
michael@0: 
michael@0: .nodes g.selected rect {
michael@0:   stroke-width: 1.5px;
michael@0:   animation-duration: 1s;
michael@0:   animation-iteration-count: infinite;
michael@0:   animation-timing-function: ease-in-out;
michael@0:   animation-direction: alternate;
michael@0: }
michael@0: 
michael@0: .theme-dark .nodes g.selected rect { animation-name: dark-selected-glow; }
michael@0: .theme-light .nodes g.selected rect { animation-name: light-selected-glow; }
michael@0: 
michael@0: /* Text in nodes */
michael@0: text {
michael@0:   cursor: pointer;
michael@0:   font-weight: 300;
michael@0:   font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
michael@0:   font-size: 14px;
michael@0: }
michael@0: 
michael@0: .theme-dark text {
michael@0:   fill: #333;
michael@0:   /* text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; */
michael@0: }
michael@0: .theme-light text {
michael@0:   fill: #111;
michael@0: }
michael@0: 
michael@0: /**
michael@0:  * Animations for graphs
michael@0:  */
michael@0: @keyframes dark-selected-glow {
michael@0:   0% { fill: #1d4f73; }
michael@0:   100% { fill: #3CA3ED; }
michael@0: }
michael@0: @keyframes light-selected-glow {
michael@0:   0% { fill: #4c9ed9; }
michael@0:   100% { fill: #59BAFF; }
michael@0: }
michael@0: 
michael@0: /**
michael@0:  * Inspector Styles
michael@0:  */
michael@0: 
michael@0: .web-audio-inspector .error {
michael@0:   background-image: url(chrome://browser/skin/devtools/alerticon-warning.png);
michael@0:   -moz-appearance: none;
michael@0:   opacity: 0;
michael@0:   transition: opacity .5s ease-out 0s;
michael@0: }