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 /* Use flex layout for the Inspector toolbar. For now, it's done
  14    specifically for the Inspector toolbar since general rule applied
  15    on .devtools-toolbar breaks breadcrubs and also toolbars in other
  16    panels (e.g. webconsole, debugger), these are not ready for HTML
  17    layout yet. */
  18 div#inspector-toolbar.devtools-toolbar {
  19   display: flex;
  20   background-size: calc(100% - 30px);
  21   background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF);
  22   background-repeat: no-repeat;
  23   background-position: center center;
  24 }
  25
  26 div#inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer {
  27   flex-grow: 1;
  28   display: inline-block;
  29 }
  30
  31 div#inspector-toolbar.devtools-toolbar::before,
  32 div#inspector-toolbar.devtools-toolbar::after {
  33   display: flex;
  34   content: "";
  35   width: 12px;
  36   min-height: 16px;
  37   background-color: #FF9F00;
  38 }
  39
  40 div#inspector-toolbar.devtools-toolbar::before {
  41   border-radius: 8px 0px 0px 8px;
  42   border: none;
  43   border-inline-end: 3px solid black;
  44   margin-inline-end: 2px;
  45 }
  46
  47 div#inspector-toolbar.devtools-toolbar::after {
  48   border-radius: 0px 8px 8px 0px;
  49   border: none;
  50   border-inline-start: 3px solid black;
  51   margin-inline-start: 2px;
  52 }
  53
  54
  55 #inspector-toolbar {
  56   border-top: none;
  57 }
  58
  59 #inspector-searchlabel {
  60   overflow: hidden;
  61 }
  62
  63 #inspector-breadcrumbs-toolbar {
  64   padding: 0px;
  65   border-bottom-width: 0px;
  66   border-top-width: 1px;
  67 }
  68
  69 /* Expand/collapse panel toolbar button */
  70
  71 #inspector-pane-toggle {
  72   list-style-image: var(--theme-pane-collapse-image);
  73 }
  74
  75 #inspector-pane-toggle[pane-collapsed] {
  76   list-style-image: var(--theme-pane-expand-image);
  77 }
  78
  79 @media (max-width: 700px) {
  80   #inspector-pane-toggle > .toolbarbutton-icon {
  81     transform: rotate(90deg);
  82   }
  83 }
  84
  85 /* Add element toolbar button */
  86
  87 #inspector-element-add-button {
  88   list-style-image: url("chrome://devtools/skin/images/add.svg");
  89 }
  90
  91 button#inspector-element-add-button::before {
  92   background-image: url("chrome://devtools/skin/images/add.svg");
  93   list-style-image: url("chrome://devtools/skin/images/add.svg");
  94   -moz-user-focus: normal;
  95 }
  96
  97 #inspector-search {
  98   flex: unset;
  99 }
 100
 101 /* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox
 102    is converted to html*/
 103 #inspector-searchbox {
 104   width: 100%;
 105 }
 106
 107 /* Eyedropper toolbar button */
 108
 109 #inspector-eyedropper-toggle {
 110   /* hidden by default, until we can check that the required highlighter exists */
 111   display: none;
 112 }
 113
 114 #inspector-eyedropper-toggle::before {
 115   background-image: var(--eyedropper-image);
 116 }
 117
 118 #inspector-sidebar-toggle-box {
 119   line-height: initial;
 120 }
 121
 122 button#sidebar-toggle {
 123   height: 100%;
 124 }
 125
 126 /* Set the minimum width for the side bar so, all tabs are
 127   properly visible. The value can be decreased when bug 1281789
 128   is fixed and the all-tabs-menu is available again. */
 129 #inspector-sidebar-container {
 130   overflow: hidden;
 131   min-width: 300px;
 132   position: relative;
 133 }
 134
 135 div#inspector-sidebar {
 136   position: absolute;
 137   top: 0;
 138   bottom: 0;
 139   left: 0;
 140   right: 0;
 141 }
 142
 143 /* Sidebar tabs */
 144
 145 .tabs .tabs-navigation {
 146   height: auto !important;
 147 }
 148
 149 .tabs .tabs-menu-item {
 150   border-radius: 8px 8px 0px 0px;
 151   margin-top: 2px;
 152   border: 0 !important;
 153   border-inline-end: 2px solid transparent !important;
 154   border-bottom: none;
 155   padding: 2px 4px 1px;
 156   background-color: var(--theme-button-background);
 157   color: var(--theme-button-color);
 158   background-clip: padding-box;
 159   height: auto !important;
 160 }
 161
 162 .tabs .tabs-menu-item a {
 163   color: inherit !important;
 164   padding: 0 !important;
 165   border: 0;
 166 }
 167
 168 .tabs .tabs-menu-item:hover {
 169   background-color: var(--theme-hover-background);
 170   color: var(--theme-hover-color);
 171 }
 172
 173 .tabs .tabs-menu-item:hover:active {
 174   background-color: var(--theme-active-background);
 175   color: var(--theme-active-color);
 176 }
 177
 178 /* Tooltip: Events */
 179
 180 #devtools-tooltip-events-container {
 181   margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
 182   max-width: 590px;
 183   overflow-y: auto;
 184 }
 185
 186 .event-header {
 187   display: flex;
 188   align-items: center;
 189   cursor: pointer;
 190 }
 191
 192 .event-header:first-child {
 193   border-width: 0;
 194 }
 195
 196 .event-header:not(:first-child) {
 197   border-width: 1px 0 0 0;
 198 }
 199
 200 .event-tooltip-event-type,
 201 .event-tooltip-filename,
 202 .event-tooltip-attributes {
 203   margin-inline-start: 0;
 204   flex-shrink: 0;
 205   cursor: pointer;
 206 }
 207
 208 .event-tooltip-event-type {
 209   font-weight: bold;
 210   font-size: 13px;
 211 }
 212
 213 .event-tooltip-filename {
 214   margin-inline-end: 0;
 215   font-size: 100%;
 216   flex-shrink: 1;
 217 }
 218
 219 .event-tooltip-debugger-icon {
 220   width: 16px;
 221   height: 16px;
 222   margin-inline-end: 4px;
 223   opacity: 0.6;
 224   flex-shrink: 0;
 225 }
 226
 227 .event-tooltip-debugger-icon:hover {
 228   opacity: 1;
 229 }
 230
 231 .event-tooltip-content-box {
 232   display: none;
 233   height: 100px;
 234   overflow: hidden;
 235   margin-inline-end: 0;
 236   border: 1px solid var(--theme-splitter-color);
 237   border-width: 1px 0 0 0;
 238 }
 239
 240 .event-toolbox-content-box iframe {
 241   height: 100%;
 242 }
 243
 244 .event-tooltip-content-box[open] {
 245   display: block;
 246 }
 247
 248 .event-tooltip-source-container {
 249   margin-top: 5px;
 250   margin-bottom: 10px;
 251   margin-inline-start: 5px;
 252   margin-inline-end: 0;
 253 }
 254
 255 .event-tooltip-source {
 256   margin-bottom: 0;
 257 }
 258
 259 .event-tooltip-attributes-container {
 260   display: flex;
 261   flex-shrink: 0;
 262   flex-grow: 1;
 263   justify-content: flex-end;
 264 }
 265
 266 .event-tooltip-attributes-box {
 267   display: flex;
 268   flex-shrink: 0;
 269   align-items: center;
 270   border-radius: 3px;
 271   padding: 2px;
 272   margin-inline-start: 5px;
 273   background-color: var(--theme-body-color-alt);
 274   color: var(--theme-toolbar-background);
 275 }
 276
 277 .event-tooltip-attributes {
 278   margin: 0;
 279   font-size: 9px;
 280   padding-top: 2px;
 281 }