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   color: var(--theme-body-color-alt);
   9 }
  10
  11 #reload-notice {
  12   font-size: 120%;
  13 }
  14
  15 #waiting-notice {
  16   font-size: 110%;
  17 }
  18
  19 /* Context Graph */
  20 svg {
  21   overflow: hidden;
  22   -moz-box-flex: 1;
  23 }
  24
  25 /* Edges in graph */
  26 .edgePath path {
  27   stroke-width: 1px;
  28   fill: none;
  29
  30   stroke: var(--theme-body-color-alt);
  31 }
  32
  33 /* AudioParam connection edges */
  34 g.edgePath.param-connection {
  35   stroke-dasharray: 5,5;
  36 }
  37
  38 .edgePath.param-connection path {
  39   stroke: var(--theme-body-color-alt);
  40 }
  41
  42 /* Labels in AudioParam connection should have background that match
  43  * the main background so there's whitespace around the label, on top of the
  44  * dotted lines. */
  45 g.edgeLabel rect {
  46   fill: var(--theme-body-background);
  47 }
  48 g.edgeLabel tspan {
  49   fill: var(--theme-body-color-alt);
  50 }
  51
  52 /* Audio Nodes */
  53 .nodes rect {
  54   stroke-width: 1px;
  55   cursor: pointer;
  56
  57   stroke: var(--theme-splitter-color);
  58   fill: var(--theme-toolbar-background);
  59 }
  60
  61 /**
  62  * Bypassed Nodes
  63  */
  64
  65 .theme-light .nodes g.bypassed rect {
  66   fill: url(chrome://devtools/skin/images/filters.svg#bypass-light);
  67 }
  68 .theme-dark .nodes g.bypassed rect {
  69   fill: url(chrome://devtools/skin/images/filters.svg#bypass-dark);
  70 }
  71 .nodes g.bypassed.selected rect {
  72   stroke: var(--theme-selection-background);
  73 }
  74
  75 /*
  76 .nodes g.bypassed text {
  77   opacity: 0.8;
  78 }
  79 */
  80
  81 /**
  82  * Selected Nodes
  83  */
  84
  85 .nodes g.selected rect {
  86   fill: var(--theme-selection-background);
  87 }
  88
  89
  90 /* Text in nodes and edges */
  91 text {
  92   cursor: default; /* override the "text" cursor */
  93   font-weight: 300;
  94   font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  95   font-size: 14px;
  96 }
  97
  98 text {
  99   fill: var(--theme-body-color-alt);
 100 }
 101
 102 .nodes text {
 103   cursor: pointer;
 104 }
 105
 106 /**
 107  * Inspector Styles
 108  */
 109
 110 /* hide the variables view scope title as its redundant,
 111  * because there's only one scope displayed. */
 112 .variables-view-scope > .title {
 113   display: none;
 114 }
 115
 116 #web-audio-inspector-title {
 117   margin: 6px;
 118 }
 119
 120 .web-audio-inspector .error {
 121   background-image: url("images/alerticon-warning.png");
 122   background-size: 13px 12px;
 123   -moz-appearance: none;
 124   opacity: 0;
 125   transition: opacity .5s ease-out 0s;
 126 }
 127
 128 #inspector-pane-toggle {
 129   background: none;
 130   box-shadow: none;
 131   border: none;
 132   list-style-image: var(--theme-pane-collapse-image);
 133 }
 134
 135 #inspector-pane-toggle > .toolbarbutton-icon {
 136   width: 16px;
 137   height: 16px;
 138 }
 139
 140 #inspector-pane-toggle[pane-collapsed] {
 141   list-style-image: var(--theme-pane-expand-image);
 142 }
 143
 144 /**
 145  * Automation Styles
 146  */
 147
 148 #automation-param-toolbar .automation-param-button[selected] {
 149   color: var(--theme-selection-color);
 150   background-color: var(--theme-selection-background);
 151 }
 152
 153 #automation-graph {
 154   overflow: hidden;
 155   -moz-box-flex: 1;
 156 }
 157
 158 @media (min-resolution: 1.1dppx) {
 159   .web-audio-inspector .error {
 160     background-image: url("images/alerticon-warning@2x.png");
 161   }
 162 }
 163
 164 /**
 165  * Inspector toolbar
 166  */
 167
 168 #audio-node-toolbar .bypass {
 169   list-style-image: url(images/power.svg);
 170 }
 171
 172 /**
 173  * Responsive Styles
 174  * `.devtools-responsive-container` takes care of most of
 175  * the changing of host types.
 176  */
 177 @media (max-width: 700px) {
 178   /**
 179    * Override the inspector toggle so it's always open
 180    * in the portrait view, with the toggle button hidden.
 181    */
 182   #inspector-pane-toggle {
 183     display: none;
 184   }
 185
 186   #web-audio-inspector {
 187     margin-left: 0px !important;
 188     margin-right: 0px !important;
 189   }
 190 }