gecko-dev/browser/themes/shared/devtools/commandline.inc.css

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