EarlyBlue/navigator/webDeveloper.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
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   6 @namespace html url("http://www.w3.org/1999/xhtml");
   7
   8 /* Mostly copied from mozilla/devtools/client/themes/commandline.inc.css  */
   9 /* Developer Tools */
  10
  11 /* Developer toolbar */
  12
  13 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
  14    We are copy/pasting variables from light-theme and dark-theme,
  15    since they aren't loaded in this context (within browser.css). */
  16 #developer-toolbar[devtoolstheme="light"],
  17 #developer-toolbar[devtoolstheme="dark"] {
  18   --gcli-background-color: #CCD0DD; /* --theme-tab-toolbar-background */
  19   --gcli-input-background: #FFFFFF; /* --theme-toolbar-background */
  20   --gcli-input-focused-background: #FFFFFF; /* --theme-sidebar-background */
  21   --gcli-input-color: #000000; /* --theme-body-color */
  22   --gcli-border-color: #666699; /* --theme-splitter-color */
  23   --selection-background: #336699; /* --theme-selection-background */
  24   --selection-color: #FFFFFF; /* --theme-selection-color */
  25 }
  26
  27 #developer-toolbar {
  28   padding: 0;
  29   background-color: var(--gcli-background-color);
  30   border-top: 1px solid var(--gcli-border-color);
  31 }
  32
  33 #developer-toolbar[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before  {
  34   filter: invert(1);
  35 }
  36
  37 #developer-toolbar-toolbox-button {
  38   list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
  39   -moz-image-region: rect(0px, 64px, 16px, 48px);
  40 }
  41
  42 #developer-toolbar-toolbox-button:hover > .toolbarbutton-icon {
  43   filter: brightness(120%);
  44 }
  45
  46 #developer-toolbar-toolbox-button:hover:active > .toolbarbutton-icon {
  47   filter: saturate(150%);
  48 }
  49
  50 #developer-toolbar-toolbox-button[checked=true] > .toolbarbutton-icon {
  51   filter: hue-rotate(180deg);
  52 }
  53
  54 @media (min-resolution: 1.1dppx) {
  55   #developer-toolbar-toolbox-button {
  56     list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
  57     -moz-image-region: rect(0px, 128px, 32px, 96px);
  58   }
  59 }
  60
  61 /* Error counter */
  62
  63 #developer-toolbar-toolbox-button[error-count]:before {
  64   color: #000000;
  65   min-width: 16px;
  66   text-shadow: none;
  67   background-color: #FFCCCC;
  68   border-radius: 2px;
  69   margin-inline-end: 2px;
  70 /*
  71   Firefox browser/themes/windows/browser.css
  72   color: #FDF3DE;
  73   min-width: 16px;
  74   text-shadow: none;
  75   background-image: linear-gradient(#B4211B, #8A1915);
  76   border-radius: 1px;
  77   margin-inline-end: 5px;
  78   Firefox browser/themes/linux/browser.css
  79   color: #FDF3DE;
  80   min-width: 16px;
  81   text-shadow: none;
  82   background-image: linear-gradient(#B4211B, #8A1915);
  83   border-radius: 1px;
  84   margin-inline-end: 2px;
  85 */
  86 }
  87
  88 /* GCLI */
  89
  90 html|*#gcli-tooltip-frame,
  91 html|*#gcli-output-frame {
  92   padding: 0;
  93   border-width: 0;
  94   background-color: transparent;
  95 }
  96
  97 #gcli-output,
  98 #gcli-tooltip {
  99   border-width: 0;
 100   background-color: transparent;
 101   -moz-appearance: none;
 102 }
 103
 104 .gclitoolbar-input-node,
 105 .gclitoolbar-complete-node {
 106   -moz-box-align: center;
 107   padding-top: 0;
 108   padding-bottom: 0;
 109   padding-right: 8px;
 110   text-shadow: none;
 111   box-shadow: none;
 112   background-color: transparent;
 113 }
 114
 115 .gclitoolbar-input-node {
 116   -moz-appearance: none;
 117   color: var(--gcli-input-color);
 118   background-color: var(--gcli-input-background);
 119   background-repeat: no-repeat;
 120   background-position: 4px center;
 121   box-shadow: 1px 0 0 var(--gcli-border-color) inset,
 122               -1px 0 0 var(--gcli-border-color) inset;
 123   outline-style: none;
 124   padding: 0;
 125 }
 126
 127 .gclitoolbar-input-node[focused="true"] {
 128   background-color: var(--gcli-input-focused-background);
 129 }
 130
 131 .gclitoolbar-input-node::before {
 132   content: "";
 133   display: inline-block;
 134   -moz-box-ordinal-group: 0;
 135   width: 16px;
 136   height: 16px;
 137   margin: 0 2px;
 138   background-image: url("chrome://devtools/skin/images/commandline-icon.png");
 139   background-position: 0 center;
 140   background-size: 32px 16px;
 141 }
 142
 143 .gclitoolbar-input-node[focused="true"]::before {
 144   background-position: -16px center;
 145 }
 146
 147 @media (min-resolution: 1.1dppx) {
 148   .gclitoolbar-input-node::before {
 149     background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
 150   }
 151 }
 152
 153 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
 154   background-color: var(--selection-background);
 155   color: var(--selection-color);
 156   text-shadow: none;
 157 }
 158
 159 .gclitoolbar-complete-node {
 160   padding-left: 21px;
 161   background-color: transparent;
 162   color: transparent;
 163   z-index: 100;
 164   pointer-events: none;
 165 }
 166
 167 .gcli-in-incomplete,
 168 .gcli-in-error,
 169 .gcli-in-ontab,
 170 .gcli-in-todo,
 171 .gcli-in-closebrace,
 172 .gcli-in-param,
 173 .gcli-in-valid {
 174   margin: 0;
 175   padding: 0;
 176 }
 177
 178 .gcli-in-incomplete {
 179   border-bottom: 2px dotted #999;
 180 }
 181
 182 .gcli-in-error {
 183   border-bottom: 2px dotted #F00;
 184 }
 185
 186 .gcli-in-ontab {
 187   color: hsl(210,0%,35%);
 188 }
 189
 190 .gcli-in-todo {
 191   color: hsl(210,50%,35%);
 192 }
 193
 194 .gcli-in-closebrace {
 195   color: hsl(0,0%,80%);
 196 }