gecko/browser/themes/shared/devtools/common.css

%if 0
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif

:root {
  font: message-box;
}

.devtools-monospace {
%ifdef XP_MACOSX
  font-family: Menlo, monospace;
%endif
%ifdef XP_LINUX
  font-family: monospace;
  font-size: 80%;
%endif
%ifdef XP_WIN
  font-family: Consolas, monospace;
%endif
}

/* Splitters */
.devtools-horizontal-splitter {
  -moz-appearance: none;
  background-image: none;
  background-color: transparent;
  border: 1px solid black;
  border-width: 1px 0 0 0;
  min-height: 3px;
  height: 3px;
  margin-bottom: -3px;
  position: relative;
}

.devtools-side-splitter {
  -moz-appearance: none;
  background-image: none;
  border: 0;
  -moz-border-start: 1px solid black;
  min-width: 0;
  width: 3px;
  background-color: transparent;
  -moz-margin-end: -3px;
  position: relative;
  cursor: e-resize;
}

.devtools-toolbox-side-iframe {
  min-width: 465px;
}

/* Autocomplete Popup */
/* Dark and light theme */

.devtools-autocomplete-popup {
  -moz-appearance: none !important;
  border: 1px solid hsl(210,11%,10%);
  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
  background-color: transparent;
  background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
  border-radius: 3px;
  overflow-x: hidden;
%ifdef XP_LINUX
  max-height: 32rem;
%else
  max-height: 40rem;
%endif
}

.devtools-autocomplete-listbox {
  -moz-appearance: none !important;
  background-color: transparent;
  border-width: 0px !important;
}

.devtools-autocomplete-listbox > richlistitem,
.devtools-autocomplete-listbox > richlistitem[selected] {
  width: 100%;
  background-color: transparent;
  border-radius: 4px;
}

.devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
.devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
  background-color: rgba(0,0,0,0.5);
}

.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
  color: hsl(208,100%,60%);
}

.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
  color: #eee;
}

.devtools-autocomplete-listbox.dark-theme > richlistitem > label {
  color: #ccc;
}

.devtools-autocomplete-listbox > richlistitem > .initial-value,
.devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
  margin: 0;
  padding: 1px 0;
}

.devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
  text-align: right;
}

/* Rest of the light theme */

.devtools-autocomplete-popup.light-theme {
  border: 1px solid hsl(210,24%,90%);
  box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset;
  background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%));
}

.devtools-autocomplete-listbox.light-theme > richlistitem[selected],
.devtools-autocomplete-listbox.light-theme > richlistitem:hover {
  background-color: rgba(128,128,128,0.3);
}

.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
  color: #222;
}

.devtools-autocomplete-listbox.light-theme > richlistitem > label {
  color: #666;
}

/* Responsive container */

.devtools-responsive-container {
  -moz-box-orient: horizontal;
}

@media (max-width: 700px) {
  .devtools-responsive-container {
    -moz-box-orient: vertical;
  }

  .devtools-responsive-container > .devtools-side-splitter {
    border: 0;
    margin: 0;
    border-top: 1px solid black;
    min-height: 3px;
    height: 3px;
    margin-bottom: -3px;
    /* In some edge case the cursor is not changed to n-resize */
    cursor: n-resize;
  }

  .devtools-responsive-container > .devtools-sidebar-tabs {
    min-height: 35vh;
    max-height: 75vh;
  }
}

/* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */

.devtools-tooltip .panel-arrowcontent {
  padding: 4px;
}

.devtools-tooltip .panel-arrowcontainer {
  /* Reseting the transition used when panels are shown */
  transition: none;
  /* Panels slide up/down/left/right when they appear using a transform.
  Since we want to remove the transition, we don't need to transform anymore
  plus it can interfeer by causing mouseleave events on the underlying nodes */
  transform: none;
}

.devtools-tooltip[clamped-dimensions] {
  max-height: 400px;
  max-width: 400px;
}
.devtools-tooltip[clamped-dimensions] .panel-arrowcontent {
  overflow: hidden;
}

/* Tooltip: Simple Text */

.devtools-tooltip-simple-text {
  max-width: 400px;
  margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
  padding: 8px 12px;
  white-space: pre-wrap;
}

.devtools-tooltip-simple-text:first-child {
  margin-top: -4px;
}

.devtools-tooltip-simple-text:last-child {
  margin-bottom: -4px;
}

/* Tooltip: Variables View */

.devtools-tooltip-variables-view-box {
  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
}

/* Tooltip: Tiles */

.devtools-tooltip-tiles {
  background-color: #eee;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.devtools-tooltip-iframe {
  border: none;
  background: transparent;
}