LCARStrek/browser/devtools/inspector.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 window {
   6   padding: 0;
   7 }
   8
   9 #inspector-toolbar {
  10   border-top: none;
  11 }
  12
  13 #inspector-inspect-toolbutton {
  14   list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
  15   -moz-image-region: rect(0 16px 16px 0);
  16 }
  17
  18 #inspector-inspect-toolbutton[checked=true],
  19 #inspector-inspect-toolbutton:hover {
  20   -moz-image-region: rect(0 32px 16px 16px);
  21 }
  22
  23 /* Highlighter toolbar - breadcrumbs */
  24
  25 #inspector-breadcrumbs {
  26   -moz-margin-end: 3px;
  27   /* A fake 1px-shadow is included in the border-images of the
  28      inspector-breadcrumbs-buttons, to match toolbar-buttons style.
  29      This negative margin compensate the extra row of pixels created
  30      by the shadow.*/
  31   /*margin: -1px 0;*/
  32 }
  33
  34 #inspector-breadcrumbs > .scrollbutton-up,
  35 #inspector-breadcrumbs > .scrollbutton-down {
  36   min-height: 25px;
  37   margin-top: 0;
  38   margin-bottom: 0;
  39 }
  40
  41 #inspector-breadcrumbs > .scrollbutton-up {
  42   -moz-margin-end: 1px;
  43 }
  44
  45 #inspector-breadcrumbs > .scrollbutton-down {
  46   -moz-margin-end: 0;
  47 }
  48
  49 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
  50 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
  51 }
  52
  53 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
  54 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
  55   /* margin: 0 5px; */
  56 }
  57
  58 #inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
  59 #inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
  60 }
  61
  62 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
  63 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
  64 }
  65
  66 #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(ltr) {
  67   border-top-right-radius: 0;
  68   border-bottom-right-radius: 0;
  69 }
  70
  71 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr) {
  72   border-top-left-radius: 0;
  73   border-bottom-left-radius: 0;
  74 }
  75
  76 #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(rtl) {
  77   border-top-left-radius: 0;
  78   border-bottom-left-radius: 0;
  79 }
  80
  81 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl) {
  82   border-top-right-radius: 0;
  83   border-bottom-right-radius: 0;
  84 }
  85
  86 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
  87 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
  88 /*  transform: scaleX(-1); */
  89 }
  90
  91 .inspector-breadcrumbs-button {
  92   background-color: #000000;
  93   border-radius: 0;
  94   border-style: solid;
  95   border-width: 2px 13px;
  96   outline: none;
  97   color: #FF9F00;
  98   width: 85px; /* Can't use max-width. See bug 723132 */
  99   /* The content of the button can be larger than the button */
 100   overflow: hidden;
 101   min-height: 25px;
 102   margin: 0 -11px 0 0;
 103   padding: 0 9px;
 104 }
 105
 106 .inspector-breadcrumbs-button:hover {
 107   background-color: #FFCF00;
 108   color: #000000;
 109 }
 110
 111 .inspector-breadcrumbs-button[checked]:not(:hover) {
 112   background-color: #008484;
 113   color: #000000;
 114 }
 115
 116 .inspector-breadcrumbs-button[siblings-menu-open],
 117 .inspector-breadcrumbs-button:active {
 118   background-color: #FF9F00;
 119   color: #000000;
 120 }
 121
 122 .inspector-breadcrumbs-button:-moz-focusring > .button-box {
 123   border-width: 0;
 124 }
 125
 126 .inspector-breadcrumbs-button:-moz-focusring > label {
 127   border-bottom: 1px dotted #008484;
 128 }
 129
 130 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
 131   /*color: hsl(208,100%,60%); */
 132 }
 133
 134 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
 135   /*color: hsl(205,100%,70%); */
 136 }
 137
 138 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
 139   color: #FF9F00;
 140 }
 141
 142 .inspector-breadcrumbs-id,
 143 .inspector-breadcrumbs-classes {
 144   /*color: #8d99a6; */
 145 }
 146
 147 .inspector-breadcrumbs-pseudo-classes {
 148   color: #FFCF00;
 149 }
 150
 151 /* fit height of other buttons to breadcrumbs */
 152 #inspector-toolbar .devtools-toolbarbutton,
 153 #highlighter-closebutton,
 154 #inspector-option-toolbarbutton {
 155   min-height: 25px;
 156 }
 157
 158 /* Highlighter toolbar - breadcrumbs - LTR */
 159
 160 .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
 161 }
 162
 163 .inspector-breadcrumbs-button {
 164   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
 165 }
 166
 167 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
 168 .inspector-breadcrumbs-button:not([checked]):hover:active {
 169   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
 170 }
 171
 172 .inspector-breadcrumbs-button[checked] {
 173   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
 174 }
 175
 176 .inspector-breadcrumbs-button[checked][siblings-menu-open],
 177 .inspector-breadcrumbs-button[checked]:hover:active {
 178   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
 179 }
 180
 181 .inspector-breadcrumbs-button:first-of-type {
 182   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
 183 }
 184
 185 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
 186 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
 187   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
 188 }
 189
 190 .inspector-breadcrumbs-button:first-of-type[checked] {
 191   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
 192 }
 193
 194 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
 195 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
 196   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
 197 }
 198
 199 .inspector-breadcrumbs-button:last-of-type {
 200   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
 201 }
 202
 203 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
 204 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
 205   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
 206 }
 207
 208 .inspector-breadcrumbs-button:last-of-type[checked] {
 209   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
 210 }
 211
 212 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
 213 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
 214   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
 215 }
 216
 217 /* Highlighter toolbar - breadcrumbs - RTL */
 218
 219 .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
 220 }
 221
 222 .inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
 223   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
 224 }
 225
 226 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
 227 .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
 228   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
 229 }
 230
 231 .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
 232   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
 233 }
 234
 235 .inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
 236 .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
 237   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
 238 }
 239
 240 .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
 241   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
 242 }
 243
 244 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
 245 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
 246   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
 247 }
 248
 249 .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
 250   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
 251 }
 252
 253 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
 254 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
 255   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
 256 }
 257
 258 .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
 259   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
 260 }
 261
 262 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
 263 }
 264
 265 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
 266 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
 267   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
 268 }
 269
 270 .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
 271   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
 272 }
 273
 274 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
 275 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
 276   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
 277 }
 278
 279 #inspector-searchbox {
 280   transition-property: max-width, -moz-padding-end, -moz-padding-start;
 281   transition-duration: 250ms;
 282   transition-timing-function: ease;
 283 }
 284
 285 #inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box {
 286   overflow: hidden;
 287 }
 288
 289 #inspector-searchbox:not([focused]):not([filled]) {
 290   max-width: 20px !important;
 291   -moz-padding-end: 6px;
 292   -moz-padding-start: 22px;
 293   background-position: 8px center, top left, top left;
 294 }
 295
 296 #inspector-searchbox[focused],
 297 #inspector-searchbox[filled] {
 298   max-width: 200px !important;
 299 }