LCARStrek/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 /* Context Graph */
  24 svg {
  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 */
  38 g.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. */
  49 g.edgeLabel rect {
  50   fill: var(--theme-body-background);
  51 }
  52 g.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 */
  97 text {
  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
 104 text {
 105   fill: var(--theme-body-color-alt);
 106 }
 107 g.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("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("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("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("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(power.svg#power);
 197 }
 198
 199 #audio-node-toolbar .bypass[disabled] {
 200   list-style-image: url(power.svg#power-disabled);
 201 }
 202
 203 #audio-node-toolbar .bypass:not([disabled]):hover,
 204 #audio-node-toolbar .bypass:hover:active,
 205 #audio-node-toolbar .bypass[checked] {
 206   list-style-image: url(power.svg#power-active);
 207 }
 208
 209 #audio-node-toolbar toolbarbutton[checked] {
 210   background-color: var(--theme-selection-background); /* Select Highlight Blue */
 211 }
 212
 213 /* don't invert checked buttons so we can have white icons on light theme */
 214 #audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon {
 215   filter: none;
 216 }
 217
 218
 219 /**
 220  * Responsive Styles
 221  * `.devtools-responsive-container` takes care of most of
 222  * the changing of host types.
 223  */
 224 @media (max-width: 700px) {
 225   /**
 226    * Override the inspector toggle so it's always open
 227    * in the portrait view, with the toggle button hidden.
 228    */
 229   #inspector-pane-toggle {
 230     display: none;
 231   }
 232
 233   #web-audio-inspector {
 234     margin-left: 0px !important;
 235     margin-right: 0px !important;
 236   }
 237 }
 238
 239 #inspector-pane-toggle {
 240   background: none;
 241   box-shadow: none;
 242   border: none;
 243   list-style-image: url("debugger-collapse.png");
 244   -moz-image-region: rect(0px,16px,16px,0px);
 245 }
 246
 247 #inspector-pane-toggle[pane-collapsed] {
 248   list-style-image: url("debugger-expand.png");
 249 }
 250
 251 #inspector-pane-toggle:active {
 252   -moz-image-region: rect(0px,32px,16px,16px);
 253 }