LCARStrek/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 :root {
   6   --eyedropper-image: url(images/command-eyedropper.svg);
   7 }
   8
   9 window {
  10   padding: 0;
  11 }
  12
  13 :root.theme-dark {
  14   --breadcrumbs-border-color: #9C9CFF;
  15 }
  16
  17 /* Use flex layout for the Inspector toolbar. For now, it's done
  18    specifically for the Inspector toolbar since general rule applied
  19    on .devtools-toolbar breaks breadcrubs and also toolbars in other
  20    panels (e.g. webconsole, debugger), these are not ready for HTML
  21    layout yet. */
  22 #inspector-toolbar.devtools-toolbar {
  23   display: flex;
  24 }
  25
  26 #inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer {
  27   flex-grow: 1;
  28   display: inline-block;
  29 }
  30
  31 #inspector-searchlabel {
  32   overflow: hidden;
  33 }
  34
  35 /* Make sure the text is vertically centered in Inspector's
  36    search box. This can be removed when the search box is
  37    switched to HTML.
  38    See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1265759 */
  39 #inspector-searchbox {
  40   line-height: 19px;
  41 }
  42
  43 #inspector-breadcrumbs-toolbar {
  44   padding: 0px;
  45   border-bottom-width: 0px;
  46   border-top-width: 1px;
  47   border-top-color: var(--breadcrumbs-border-color);
  48   /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
  49      get mistaken as a splitter */
  50   background-color: var(--theme-body-background);
  51   display: block;
  52   position: relative;
  53 }
  54
  55 #inspector-breadcrumbs-toolbar,
  56 #inspector-breadcrumbs-toolbar * {
  57   box-sizing: border-box;
  58 }
  59
  60 #inspector-breadcrumbs {
  61   display: flex;
  62   /* Break out of the XUL flexbox, so the splitter can still shrink the
  63      markup view even if the contents of the breadcrumbs are wider than
  64      the new width. */
  65   position: absolute;
  66   top: 0;
  67   left: 0;
  68   bottom: 0;
  69   right: 0;
  70 }
  71
  72 #inspector-breadcrumbs .scrollbutton-up,
  73 #inspector-breadcrumbs .scrollbutton-down {
  74   flex: 0;
  75   display: flex;
  76   align-items: center;
  77 }
  78
  79 #inspector-breadcrumbs .html-arrowscrollbox-inner {
  80   flex: 1;
  81   display: flex;
  82   overflow: hidden;
  83 }
  84
  85 #inspector-breadcrumbs .breadcrumbs-widget-item {
  86   white-space: nowrap;
  87   flex-shrink: 0;
  88   font: message-box;
  89 }
  90
  91 #inspector-eyedropper-toggle {
  92   /* hidden by default, until we can check that the required highlighter exists */
  93    display: none;
  94 }
  95
  96 #inspector-eyedropper-toggle::before {
  97   background-image: var(--eyedropper-image);
  98 }
  99
 100 /* Add element toolbar button */
 101 #inspector-element-add-button::before {
 102   background-image: url("chrome://devtools/skin/images/add.svg");
 103   list-style-image: url("chrome://devtools/skin/images/add.svg");
 104   -moz-user-focus: normal;
 105 }
 106
 107 /* "no results" warning message displayed in the ruleview and in the computed view */
 108
 109 #ruleview-no-results,
 110 #computedview-no-results {
 111   color: var(--theme-body-color-inactive);
 112   text-align: center;
 113   margin: 5px;
 114 }