LCARStrek/browser/devtools/webaudioeditor.css

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