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 #inspector-toolbar {
   6   border-top: none;
   7 }
   8
   9 #inspector-searchlabel {
  10   overflow: hidden;
  11 }
  12
  13 #inspector-breadcrumbs-toolbar {
  14   padding: 0px;
  15   border-bottom-width: 0px;
  16   border-top-width: 1px;
  17 }
  18
  19 /* Expand/collapse panel toolbar button */
  20
  21 #inspector-pane-toggle {
  22   list-style-image: var(--theme-pane-collapse-image);
  23 }
  24
  25 #inspector-pane-toggle[pane-collapsed] {
  26   list-style-image: var(--theme-pane-expand-image);
  27 }
  28
  29 @media (max-width: 700px) {
  30   #inspector-pane-toggle > .toolbarbutton-icon {
  31     transform: rotate(90deg);
  32   }
  33 }
  34
  35 /* Add element toolbar button */
  36
  37 #inspector-element-add-button {
  38   list-style-image: url("chrome://devtools/skin/images/add.svg");
  39 }
  40
  41 /* Tooltip: Events */
  42
  43 #devtools-tooltip-events-container {
  44   margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
  45   max-width: 590px;
  46   overflow-y: auto;
  47 }
  48
  49 .event-header {
  50   display: flex;
  51   align-items: center;
  52   cursor: pointer;
  53 }
  54
  55 .event-header:first-child {
  56   border-width: 0;
  57 }
  58
  59 .event-header:not(:first-child) {
  60   border-width: 1px 0 0 0;
  61 }
  62
  63 .event-tooltip-event-type,
  64 .event-tooltip-filename,
  65 .event-tooltip-attributes {
  66   margin-inline-start: 0;
  67   flex-shrink: 0;
  68   cursor: pointer;
  69 }
  70
  71 .event-tooltip-event-type {
  72   font-weight: bold;
  73   font-size: 13px;
  74 }
  75
  76 .event-tooltip-filename {
  77   margin-inline-end: 0;
  78   font-size: 100%;
  79   flex-shrink: 1;
  80 }
  81
  82 .event-tooltip-debugger-icon {
  83   width: 16px;
  84   height: 16px;
  85   margin-inline-end: 4px;
  86   opacity: 0.6;
  87   flex-shrink: 0;
  88 }
  89
  90 .event-tooltip-debugger-icon:hover {
  91   opacity: 1;
  92 }
  93
  94 .event-tooltip-content-box {
  95   display: none;
  96   height: 100px;
  97   overflow: hidden;
  98   margin-inline-end: 0;
  99   border: 1px solid var(--theme-splitter-color);
 100   border-width: 1px 0 0 0;
 101 }
 102
 103 .event-toolbox-content-box iframe {
 104   height: 100%;
 105 }
 106
 107 .event-tooltip-content-box[open] {
 108   display: block;
 109 }
 110
 111 .event-tooltip-source-container {
 112   margin-top: 5px;
 113   margin-bottom: 10px;
 114   margin-inline-start: 5px;
 115   margin-inline-end: 0;
 116 }
 117
 118 .event-tooltip-source {
 119   margin-bottom: 0;
 120 }
 121
 122 .event-tooltip-attributes-container {
 123   display: flex;
 124   flex-shrink: 0;
 125   flex-grow: 1;
 126   justify-content: flex-end;
 127 }
 128
 129 .event-tooltip-attributes-box {
 130   display: flex;
 131   flex-shrink: 0;
 132   align-items: center;
 133   border-radius: 3px;
 134   padding: 2px;
 135   margin-inline-start: 5px;
 136   background-color: var(--theme-body-color-alt);
 137   color: var(--theme-toolbar-background);
 138 }
 139
 140 .event-tooltip-attributes {
 141   margin: 0;
 142   font-size: 9px;
 143   padding-top: 2px;
 144 }