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 /* Highlighter toolbar - breadcrumbs */
  14
  15 #inspector-breadcrumbs {
  16   -moz-margin-end: 3px;
  17   /* A fake 1px-shadow is included in the border-images of the
  18      inspector-breadcrumbs-buttons, to match toolbar-buttons style.
  19      This negative margin compensate the extra row of pixels created
  20      by the shadow.*/
  21   /*margin: -1px 0;*/
  22 }
  23
  24 #inspector-breadcrumbs > .scrollbutton-up,
  25 #inspector-breadcrumbs > .scrollbutton-down {
  26   min-height: 25px;
  27   margin-top: 0;
  28   margin-bottom: 0;
  29 }
  30
  31 #inspector-breadcrumbs > .scrollbutton-up {
  32   -moz-margin-end: 1px;
  33 }
  34
  35 #inspector-breadcrumbs > .scrollbutton-down {
  36   -moz-margin-end: 0;
  37 }
  38
  39 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
  40 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
  41 }
  42
  43 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
  44 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
  45   /* margin: 0 5px; */
  46 }
  47
  48 #inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
  49 #inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
  50 }
  51
  52 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
  53 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
  54 }
  55
  56 #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(ltr) {
  57   border-top-right-radius: 0;
  58   border-bottom-right-radius: 0;
  59 }
  60
  61 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr) {
  62   border-top-left-radius: 0;
  63   border-bottom-left-radius: 0;
  64 }
  65
  66 #inspector-breadcrumbs > .scrollbutton-up:-moz-locale-dir(rtl) {
  67   border-top-left-radius: 0;
  68   border-bottom-left-radius: 0;
  69 }
  70
  71 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl) {
  72   border-top-right-radius: 0;
  73   border-bottom-right-radius: 0;
  74 }
  75
  76 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
  77 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
  78 /*  transform: scaleX(-1); */
  79 }
  80
  81 .inspector-breadcrumbs-button {
  82   background-color: #000000;
  83   border-radius: 0;
  84   border-style: solid;
  85   border-width: 2px 13px;
  86   outline: none;
  87   color: #FF9F00;
  88   width: 85px; /* Can't use max-width. See bug 723132 */
  89   /* The content of the button can be larger than the button */
  90   overflow: hidden;
  91   min-height: 25px;
  92   margin: 0 -11px 0 0;
  93   padding: 0 9px;
  94 }
  95
  96 .inspector-breadcrumbs-button:hover {
  97   background-color: #FFCF00;
  98   color: #000000;
  99 }
 100
 101 .inspector-breadcrumbs-button[checked]:not(:hover) {
 102   background-color: #008484;
 103   color: #000000;
 104 }
 105
 106 .inspector-breadcrumbs-button[siblings-menu-open],
 107 .inspector-breadcrumbs-button:active {
 108   background-color: #FF9F00;
 109   color: #000000;
 110 }
 111
 112 .inspector-breadcrumbs-button:-moz-focusring > .button-box {
 113   border-width: 0;
 114 }
 115
 116 .inspector-breadcrumbs-button:-moz-focusring > label {
 117   border-bottom: 1px dotted #008484;
 118 }
 119
 120 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
 121   /*color: hsl(208,100%,60%); */
 122 }
 123
 124 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
 125   /*color: hsl(205,100%,70%); */
 126 }
 127
 128 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
 129   color: #FF9F00;
 130 }
 131
 132 .inspector-breadcrumbs-id,
 133 .inspector-breadcrumbs-classes {
 134   /*color: #8d99a6; */
 135 }
 136
 137 .inspector-breadcrumbs-pseudo-classes {
 138   color: #FFCF00;
 139 }
 140
 141 /* fit height of other buttons to breadcrumbs */
 142 #inspector-toolbar .devtools-toolbarbutton,
 143 #highlighter-closebutton,
 144 #inspector-option-toolbarbutton {
 145   min-height: 25px;
 146 }
 147
 148 /* Highlighter toolbar - breadcrumbs - LTR */
 149
 150 .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
 151 }
 152
 153 .inspector-breadcrumbs-button {
 154   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
 155 }
 156
 157 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
 158 .inspector-breadcrumbs-button:not([checked]):hover:active {
 159   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
 160 }
 161
 162 .inspector-breadcrumbs-button[checked] {
 163   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
 164 }
 165
 166 .inspector-breadcrumbs-button[checked][siblings-menu-open],
 167 .inspector-breadcrumbs-button[checked]:hover:active {
 168   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
 169 }
 170
 171 .inspector-breadcrumbs-button:first-of-type {
 172   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
 173 }
 174
 175 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
 176 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
 177   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
 178 }
 179
 180 .inspector-breadcrumbs-button:first-of-type[checked] {
 181   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
 182 }
 183
 184 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
 185 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
 186   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
 187 }
 188
 189 .inspector-breadcrumbs-button:last-of-type {
 190   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
 191 }
 192
 193 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
 194 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
 195   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
 196 }
 197
 198 .inspector-breadcrumbs-button:last-of-type[checked] {
 199   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
 200 }
 201
 202 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
 203 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
 204   border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
 205 }
 206
 207 /* Highlighter toolbar - breadcrumbs - RTL */
 208
 209 .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
 210 }
 211
 212 .inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
 213   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
 214 }
 215
 216 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
 217 .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
 218   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
 219 }
 220
 221 .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
 222   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
 223 }
 224
 225 .inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
 226 .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
 227   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
 228 }
 229
 230 .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
 231   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
 232 }
 233
 234 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
 235 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
 236   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
 237 }
 238
 239 .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
 240   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
 241 }
 242
 243 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
 244 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
 245   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
 246 }
 247
 248 .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
 249   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
 250 }
 251
 252 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
 253 }
 254
 255 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
 256 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
 257   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
 258 }
 259
 260 .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
 261   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
 262 }
 263
 264 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
 265 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
 266   border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
 267 }
 268
 269 #inspector-searchbox {
 270   transition-property: max-width, -moz-padding-end, -moz-padding-start;
 271   transition-duration: 250ms;
 272   transition-timing-function: ease;
 273 }
 274
 275 #inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box {
 276   overflow: hidden;
 277 }
 278
 279 #inspector-searchbox:not([focused]):not([filled]) {
 280   max-width: 20px !important;
 281   -moz-padding-end: 6px;
 282   -moz-padding-start: 22px;
 283   background-position: 8px center, top left, top left;
 284 }
 285
 286 #inspector-searchbox[focused],
 287 #inspector-searchbox[filled] {
 288   max-width: 200px !important;
 289 }
 290
 291 /* Expand/collapse panel toolbar button */
 292
 293 #inspector-pane-toggle {
 294   list-style-image: url("debugger-collapse.png");
 295   -moz-image-region: rect(0px,16px,16px,0px);
 296 }
 297
 298 #inspector-pane-toggle > .toolbarbutton-icon {
 299   width: 16px;
 300   height: 16px;
 301 }
 302
 303 #inspector-pane-toggle[pane-collapsed] {
 304   list-style-image: url("debugger-expand.png");
 305 }
 306
 307 #inspector-pane-toggle:hover,
 308 #inspector-pane-toggle:active {
 309   -moz-image-region: rect(0px,32px,16px,16px);
 310 }
 311
 312 @media (min-resolution: 2dppx) {
 313   #inspector-pane-toggle {
 314     list-style-image: url("debugger-collapse@2x.png");
 315     -moz-image-region: rect(0px,32px,32px,0px);
 316   }
 317
 318   #inspector-pane-toggle[pane-collapsed] {
 319     list-style-image: url("debugger-expand@2x.png");
 320   }
 321
 322   #inspector-pane-toggle:hover,
 323   #inspector-pane-toggle:active {
 324     -moz-image-region: rect(0px,64px,32px,32px);
 325   }
 326 }
 327
 328 /* Tooltip: Events */
 329
 330 #devtools-tooltip-events-container {
 331   margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
 332   max-width: 590px;
 333   overflow-y: auto;
 334 }
 335
 336 .event-header {
 337   display: flex;
 338   align-items: center;
 339   cursor: pointer;
 340 }
 341
 342 .event-tooltip-event-type,
 343 .event-tooltip-filename,
 344 .event-tooltip-attributes {
 345   -moz-margin-start: 0;
 346   flex-shrink: 0;
 347   cursor: pointer;
 348 }
 349
 350 .event-tooltip-event-type {
 351   font-weight: bold;
 352   font-size: 13px;
 353 }
 354
 355 .event-tooltip-filename {
 356   -moz-margin-end: 0;
 357   font-size: 100%;
 358   flex-shrink: 1;
 359 }
 360
 361 .event-tooltip-debugger-icon {
 362   width: 16px;
 363   height: 16px;
 364   -moz-margin-end: 4px;
 365   opacity: 0.6;
 366   flex-shrink: 0;
 367 }
 368
 369 .event-tooltip-debugger-icon:hover {
 370   opacity: 1;
 371 }
 372
 373 .event-tooltip-content-box {
 374   display: none;
 375   overflow: auto;
 376   -moz-margin-end: 0;
 377 }
 378
 379 .event-tooltip-content-box[open] {
 380   display: block;
 381 }
 382
 383 .event-tooltip-source-container {
 384   margin-top: 5px;
 385   margin-bottom: 10px;
 386   -moz-margin-start: 5px;
 387   -moz-margin-end: 0;
 388 }
 389
 390 .event-tooltip-source {
 391   margin-bottom: 0;
 392 }
 393
 394 .event-tooltip-attributes-container {
 395   display: flex;
 396   flex-shrink: 0;
 397   flex-grow: 1;
 398   justify-content: flex-end;
 399 }
 400
 401 .event-tooltip-attributes-box {
 402   display: flex;
 403   flex-shrink: 0;
 404   align-items: center;
 405   border-radius: 3px;
 406   padding: 2px;
 407   -moz-margin-start: 5px;
 408   background-color: var(--theme-sidebar-background);
 409   color: var(--theme-highlight-blue);
 410 }
 411
 412 .event-tooltip-attributes {
 413   margin: 0;
 414   font-size: 9px;
 415   padding-top: 2px;
 416 }