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: #000000; /* Toolbars */
  12   color: #A09090; /* Light foreground text */
  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: #000000;
  60 }
  61 g.edgeLabel tspan {
  62   fill: #9C9CFF; /* Grey foreground text */
  63 }
  64
  65 /* Audio Nodes */
  66 .nodes rect {
  67   stroke-width: 1px;
  68   cursor: pointer;
  69 }
  70
  71 .nodes rect {
  72   stroke: #9C9CFF; /* Tab toolbar */
  73   fill: #000000; /* Toolbars */
  74 }
  75
  76 .nodes g.selected rect {
  77   fill: #008484; /* Select Highlight Blue */
  78 }
  79
  80 /* Text in nodes and edges */
  81 text {
  82   cursor: default; /* override the "text" cursor */
  83   font-weight: 300;
  84   font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
  85   font-size: 14px;
  86 }
  87
  88 text {
  89   fill: #A09090; /* Grey foreground text */
  90 }
  91 g.selected text {
  92 /*  fill: #f0f1f2; / Toolbars */
  93 }
  94
  95 .nodes text {
  96   cursor: pointer;
  97 }
  98
  99 /**
 100  * Inspector Styles
 101  */
 102
 103 #web-audio-inspector-title {
 104   margin: 6px;
 105 }
 106
 107 .web-audio-inspector .error {
 108   background-image: url("alerticon-warning.png");
 109   background-size: 13px 12px;
 110   -moz-appearance: none;
 111   opacity: 0;
 112   transition: opacity .5s ease-out 0s;
 113 }
 114
 115 #inspector-pane-toggle {
 116   background: none;
 117   box-shadow: none;
 118   border: none;
 119   list-style-image: url("debugger-collapse.png");
 120   -moz-image-region: rect(0px,16px,16px,0px);
 121 }
 122
 123 #inspector-pane-toggle > .toolbarbutton-icon {
 124   width: 16px;
 125   height: 16px;
 126 }
 127
 128 #inspector-pane-toggle[pane-collapsed] {
 129   list-style-image: url("debugger-expand.png");
 130 }
 131
 132 #inspector-pane-toggle:active {
 133   -moz-image-region: rect(0px,32px,16px,16px);
 134 }
 135
 136 @media (min-resolution: 2dppx) {
 137   #inspector-pane-toggle {
 138     list-style-image: url("debugger-collapse@2x.png");
 139     -moz-image-region: rect(0px,32px,32px,0px);
 140   }
 141
 142   #inspector-pane-toggle[pane-collapsed] {
 143     list-style-image: url("debugger-expand@2x.png");
 144   }
 145
 146   #inspector-pane-toggle:active {
 147     -moz-image-region: rect(0px,64px,32px,32px);
 148   }
 149
 150   .web-audio-inspector .error {
 151     background-image: url("alerticon-warning@2x.png");
 152   }
 153 }
 154
 155 /**
 156  * Responsive Styles
 157  * `.devtools-responsive-container` takes care of most of
 158  * the changing of host types.
 159  */
 160 @media (max-width: 700px) {
 161   /**
 162    * Override the inspector toggle so it's always open
 163    * in the portrait view, with the toggle button hidden.
 164    */
 165   #inspector-pane-toggle {
 166     display: none;
 167   }
 168
 169   #web-audio-inspector {
 170     margin-left: 0px !important;
 171     margin-right: 0px !important;
 172   }
 173 }
 174
 175 #inspector-pane-toggle {
 176   background: none;
 177   box-shadow: none;
 178   border: none;
 179   list-style-image: url("debugger-collapse.png");
 180   -moz-image-region: rect(0px,16px,16px,0px);
 181 }
 182
 183 #inspector-pane-toggle[pane-collapsed] {
 184   list-style-image: url("debugger-expand.png");
 185 }
 186
 187 #inspector-pane-toggle:active {
 188   -moz-image-region: rect(0px,32px,16px,16px);
 189 }