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: /* Developer toolbar */
michael@0: 
michael@0: #developer-toolbar {
michael@0:   -moz-appearance: none;
michael@0:   padding: 0;
michael@0:   min-height: 32px;
michael@0:   background-image: url(devtools/background-noise-toolbar.png), linear-gradient(#303840, #2d3640);
michael@0:   border-top: 1px solid #060a0d;
michael@0:   box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(206,37%,4%,.1) inset;
michael@0: }
michael@0: 
michael@0: #developer-toolbar > toolbarbutton {
michael@0:   -moz-appearance: none;
michael@0:   border: none;
michael@0:   background: transparent;
michael@0:   margin: 0;
michael@0:   padding: 0 10px;
michael@0:   width: 32px;
michael@0: }
michael@0: 
michael@0: .developer-toolbar-button > image {
michael@0:   margin: auto 10px;
michael@0: }
michael@0: 
michael@0: #developer-toolbar-toolbox-button {
michael@0:   list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
michael@0:   -moz-image-region: rect(0px, 16px, 16px, 0px);
michael@0: }
michael@0: 
michael@0: #developer-toolbar-toolbox-button > label {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #developer-toolbar-toolbox-button:hover {
michael@0:   -moz-image-region: rect(0px, 32px, 16px, 16px);
michael@0: }
michael@0: 
michael@0: #developer-toolbar-toolbox-button:hover:active {
michael@0:   -moz-image-region: rect(0px, 48px, 16px, 32px);
michael@0: }
michael@0: 
michael@0: #developer-toolbar-toolbox-button[checked=true] {
michael@0:   -moz-image-region: rect(0px, 64px, 16px, 48px);
michael@0: }
michael@0: 
michael@0: #developer-toolbar-closebutton {
michael@0:   list-style-image: url("chrome://browser/skin/devtools/close.png");
michael@0:   -moz-appearance: none;
michael@0:   border: none;
michael@0:   margin: 0 4px;
michael@0:   min-width: 16px;
michael@0:   width: 16px;
michael@0:   opacity: 0.6;
michael@0: }
michael@0: 
michael@0: #developer-toolbar-closebutton > .toolbarbutton-icon {
michael@0:   /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
michael@0:      use evil CSS to give the impression of smaller content */
michael@0:   margin: -4px;
michael@0: }
michael@0: 
michael@0: #developer-toolbar-closebutton > .toolbarbutton-text {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: #developer-toolbar-closebutton:hover {
michael@0:   opacity: 0.8;
michael@0: }
michael@0: 
michael@0: #developer-toolbar-closebutton:hover:active {
michael@0:   opacity: 1;
michael@0: }
michael@0: 
michael@0: /* GCLI */
michael@0: 
michael@0: html|*#gcli-tooltip-frame,
michael@0: html|*#gcli-output-frame {
michael@0:   padding: 0;
michael@0:   border-width: 0;
michael@0:   background-color: transparent;
michael@0: }
michael@0: 
michael@0: #gcli-output,
michael@0: #gcli-tooltip {
michael@0:   border-width: 0;
michael@0:   background-color: transparent;
michael@0:   -moz-appearance: none;
michael@0: }
michael@0: 
michael@0: .gclitoolbar-input-node,
michael@0: .gclitoolbar-complete-node {
michael@0:   margin: 0;
michael@0:   -moz-box-align: center;
michael@0:   padding-top: 0;
michael@0:   padding-bottom: 0;
michael@0:   padding-right: 8px;
michael@0:   text-shadow: none;
michael@0:   box-shadow: none;
michael@0:   border-width: 0;
michael@0:   background-color: transparent;
michael@0: }
michael@0: 
michael@0: .gclitoolbar-input-node {
michael@0:   -moz-appearance: none;
michael@0:   color: hsl(210,30%,85%);
michael@0:   padding-left: 20px;
michael@0:   background-color: #242b33;
michael@0:   background-repeat: no-repeat;
michael@0:   background-position: 4px center;
michael@0:   box-shadow: 0 1px 1px hsla(206,37%,4%,.2) inset,
michael@0:               1px 0 0 hsla(206,37%,4%,.2) inset,
michael@0:               -1px 0 0 hsla(206,37%,4%,.2) inset;
michael@0:   line-height: 32px;
michael@0:   outline-style: none;
michael@0:   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
michael@0: }
michael@0: 
michael@0: .gclitoolbar-input-node[focused="true"] {
michael@0:   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
michael@0:   background-color: #232e38;
michael@0: }
michael@0: 
michael@0: .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
michael@0:   background-color: hsl(210,30%,85%);
michael@0:   color: hsl(210,24%,16%);
michael@0:   text-shadow: none;
michael@0: }
michael@0: 
michael@0: .gclitoolbar-complete-node {
michael@0:   padding-left: 21px;
michael@0:   background-color: transparent;
michael@0:   color: transparent;
michael@0:   z-index: 100;
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: .gcli-in-incomplete,
michael@0: .gcli-in-error,
michael@0: .gcli-in-ontab,
michael@0: .gcli-in-todo,
michael@0: .gcli-in-closebrace,
michael@0: .gcli-in-param,
michael@0: .gcli-in-valid {
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: .gcli-in-incomplete {
michael@0:   border-bottom: 2px dotted #999;
michael@0: }
michael@0: 
michael@0: .gcli-in-error {
michael@0:   border-bottom: 2px dotted #F00;
michael@0: }
michael@0: 
michael@0: .gcli-in-ontab {
michael@0:   color: hsl(210,0%,35%);
michael@0: }
michael@0: 
michael@0: .gcli-in-todo {
michael@0:   color: hsl(210,50%,35%);
michael@0: }
michael@0: 
michael@0: .gcli-in-closebrace {
michael@0:   color: hsl(0,0%,80%);
michael@0: }