michael@0: %if 0
michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: %endif
michael@0: 
michael@0: :root {
michael@0:   font: message-box;
michael@0: }
michael@0: 
michael@0: .devtools-monospace {
michael@0: %ifdef XP_MACOSX
michael@0:   font-family: Menlo, monospace;
michael@0: %elifdef XP_WIN
michael@0:   font-family: Consolas, monospace;
michael@0: %else
michael@0:   font-family: monospace;
michael@0: %endif
michael@0: %if defined(MOZ_WIDGET_GTK) || defined(MOZ_WIDGET_QT)
michael@0:   font-size: 80%;
michael@0: %endif
michael@0: }
michael@0: 
michael@0: /* Splitters */
michael@0: .devtools-horizontal-splitter {
michael@0:   -moz-appearance: none;
michael@0:   background-image: none;
michael@0:   background-color: transparent;
michael@0:   border: 0;
michael@0:   border-bottom: 1px solid rgba(118, 121, 125, .5);
michael@0:   min-height: 3px;
michael@0:   height: 3px;
michael@0:   margin-top: -3px;
michael@0:   position: relative;
michael@0: }
michael@0: 
michael@0: .devtools-side-splitter {
michael@0:   -moz-appearance: none;
michael@0:   background-image: none;
michael@0:   background-color: transparent;
michael@0:   border: 0;
michael@0:   -moz-border-end: 1px solid rgba(118, 121, 125, .5);
michael@0:   min-width: 3px;
michael@0:   width: 3px;
michael@0:   -moz-margin-start: -3px;
michael@0:   position: relative;
michael@0:   cursor: e-resize;
michael@0: }
michael@0: 
michael@0: .devtools-toolbox-side-iframe {
michael@0:   min-width: 465px;
michael@0: }
michael@0: 
michael@0: /* Autocomplete Popup */
michael@0: /* Dark and light theme */
michael@0: 
michael@0: .devtools-autocomplete-popup {
michael@0:   -moz-appearance: none !important;
michael@0:   border: 1px solid hsl(210,11%,10%);
michael@0:   box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
michael@0:   background-color: transparent;
michael@0:   background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
michael@0:   border-radius: 3px;
michael@0:   overflow-x: hidden;
michael@0: %if defined(MOZ_WIDGET_GTK) || defined(MOZ_WIDGET_QT)
michael@0:   max-height: 32rem;
michael@0: %else
michael@0:   max-height: 40rem;
michael@0: %endif
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox {
michael@0:   -moz-appearance: none !important;
michael@0:   background-color: transparent;
michael@0:   border-width: 0px !important;
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox > richlistitem,
michael@0: .devtools-autocomplete-listbox > richlistitem[selected] {
michael@0:   width: 100%;
michael@0:   background-color: transparent;
michael@0:   border-radius: 4px;
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
michael@0: .devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
michael@0:   background-color: rgba(0,0,0,0.5);
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
michael@0: .devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
michael@0:   color: hsl(208,100%,60%);
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
michael@0:   color: #eee;
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox.dark-theme > richlistitem > label {
michael@0:   color: #ccc;
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox > richlistitem > .initial-value,
michael@0: .devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
michael@0:   margin: 0;
michael@0:   padding: 1px 0;
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
michael@0:   text-align: right;
michael@0: }
michael@0: 
michael@0: /* Rest of the light theme */
michael@0: 
michael@0: .devtools-autocomplete-popup.light-theme {
michael@0:   border: 1px solid hsl(210,24%,90%);
michael@0:   box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset;
michael@0:   background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%));
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox.light-theme > richlistitem[selected],
michael@0: .devtools-autocomplete-listbox.light-theme > richlistitem:hover {
michael@0:   background-color: rgba(128,128,128,0.3);
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
michael@0: .devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
michael@0:   color: #222;
michael@0: }
michael@0: 
michael@0: .devtools-autocomplete-listbox.light-theme > richlistitem > label {
michael@0:   color: #666;
michael@0: }
michael@0: 
michael@0: /* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */
michael@0: 
michael@0: .devtools-tooltip .panel-arrowcontent {
michael@0:   padding: 4px;
michael@0: }
michael@0: 
michael@0: .devtools-tooltip .panel-arrowcontainer {
michael@0:   /* Reseting the transition used when panels are shown */
michael@0:   transition: none;
michael@0:   /* Panels slide up/down/left/right when they appear using a transform.
michael@0:   Since we want to remove the transition, we don't need to transform anymore
michael@0:   plus it can interfeer by causing mouseleave events on the underlying nodes */
michael@0:   transform: none;
michael@0: }
michael@0: 
michael@0: .devtools-tooltip[clamped-dimensions] {
michael@0:   min-height: 100px;
michael@0:   max-height: 400px;
michael@0:   min-width: 100px;
michael@0:   max-width: 400px;
michael@0: }
michael@0: .devtools-tooltip[clamped-dimensions] .panel-arrowcontent {
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: /* Tooltip: Simple Text */
michael@0: 
michael@0: .devtools-tooltip-simple-text {
michael@0:   max-width: 400px;
michael@0:   margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
michael@0:   padding: 8px 12px;
michael@0:   white-space: pre-wrap;
michael@0: }
michael@0: 
michael@0: .devtools-tooltip-simple-text:first-child {
michael@0:   margin-top: -4px;
michael@0: }
michael@0: 
michael@0: .devtools-tooltip-simple-text:last-child {
michael@0:   margin-bottom: -4px;
michael@0: }
michael@0: 
michael@0: /* Tooltip: Font Family Previewer Text */
michael@0: .devtools-tooltip-font-previewer-text {
michael@0:   max-width: 400px;
michael@0:   line-height: 1.5;
michael@0:   font-size: 150%;
michael@0:   text-align: center;
michael@0: }
michael@0: 
michael@0: /* Tooltip: Alert Icon */
michael@0: 
michael@0: .devtools-tooltip-alert-icon {
michael@0:   width: 32px;
michael@0:   height: 32px;
michael@0:   margin: 6px;
michael@0:   -moz-margin-end: 20px;
michael@0: }
michael@0: 
michael@0: .devtools-tooltip-alert-icon {
michael@0:   list-style-image: url("chrome://global/skin/icons/warning-32.png");
michael@0: }
michael@0: 
michael@0: /* Tooltip: Variables View */
michael@0: 
michael@0: .devtools-tooltip-variables-view-box {
michael@0:   margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
michael@0: }
michael@0: 
michael@0: /* Tooltip: Tiles */
michael@0: 
michael@0: .devtools-tooltip-tiles {
michael@0:   background-color: #eee;
michael@0:   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
michael@0:     linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
michael@0:   background-size: 20px 20px;
michael@0:   background-position: 0 0, 10px 10px;
michael@0: }
michael@0: 
michael@0: .devtools-tooltip-iframe {
michael@0:   border: none;
michael@0:   background: transparent;
michael@0: }
michael@0: 
michael@0: /* Eyedropper Widget */
michael@0: 
michael@0: .devtools-eyedropper-panel {
michael@0:   pointer-events: none;
michael@0:   -moz-appearance: none;
michael@0:   width: 156px;
michael@0:   height: 120px;
michael@0:   background-color: transparent;
michael@0:   border: none;
michael@0: }