Revision control
Copy as Markdown
Other Tools
/* 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
/* Mostly copied from mozilla/devtools/client/themes/commandline.inc.css */
/* Developer Tools */
/* Developer toolbar */
/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
We are copy/pasting variables from light-theme and dark-theme,
since they aren't loaded in this context (within browser.css). */
#developer-toolbar[devtoolstheme="light"] {
--gcli-background-color: #ebeced; /* --theme-tab-toolbar-background */
--gcli-input-background: #f0f1f2; /* --theme-toolbar-background */
--gcli-input-focused-background: #f7f7f7; /* --theme-sidebar-background */
--gcli-input-color: #18191a; /* --theme-body-color */
--gcli-border-color: #aaaaaa; /* --theme-splitter-color */
--selection-background: #4c9ed9; /* --theme-selection-background */
--selection-color: #f5f7fa; /* --theme-selection-color */
}
#developer-toolbar[devtoolstheme="dark"] {
--gcli-background-color: #343c45; /* --theme-toolbar-background */
--gcli-input-background: rgba(37, 44, 51, .6); /* --theme-tab-toolbar-background */
--gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */
--gcli-input-color: #b6babf; /* --theme-body-color-alt */
--gcli-border-color: #000000; /* --theme-splitter-color */
--selection-background: #1d4f73; /* --theme-selection-background */
--selection-color: #f5f7fa; /* --theme-selection-color */
}
#developer-toolbar {
padding: 0;
background-color: var(--gcli-background-color);
border-top: 1px solid var(--gcli-border-color);
}
#developer-toolbar[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before {
filter: invert(1);
}
#developer-toolbar-toolbox-button {
-moz-image-region: rect(0px, 64px, 16px, 48px);
}
#developer-toolbar-toolbox-button:hover > .toolbarbutton-icon {
filter: brightness(120%);
}
#developer-toolbar-toolbox-button:hover:active > .toolbarbutton-icon {
filter: saturate(150%);
}
#developer-toolbar-toolbox-button[checked=true] > .toolbarbutton-icon {
filter: hue-rotate(180deg);
}
@media (min-resolution: 1.1dppx) {
#developer-toolbar-toolbox-button {
-moz-image-region: rect(0px, 128px, 32px, 96px);
}
}
/* Error counter */
#developer-toolbar-toolbox-button[error-count]:before {
color: white;
min-width: 16px;
text-shadow: none;
background-color: firebrick;
border-radius: 2px;
margin-inline-end: 2px;
/*
Firefox browser/themes/windows/browser.css
color: #FDF3DE;
min-width: 16px;
text-shadow: none;
background-image: linear-gradient(#B4211B, #8A1915);
border-radius: 1px;
margin-inline-end: 5px;
Firefox browser/themes/linux/browser.css
color: #FDF3DE;
min-width: 16px;
text-shadow: none;
background-image: linear-gradient(#B4211B, #8A1915);
border-radius: 1px;
margin-inline-end: 2px;
*/
}
/* 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 {
-moz-box-align: center;
padding-top: 0;
padding-bottom: 0;
padding-right: 8px;
text-shadow: none;
box-shadow: none;
background-color: transparent;
}
.gclitoolbar-input-node {
-moz-appearance: none;
color: var(--gcli-input-color);
background-color: var(--gcli-input-background);
background-repeat: no-repeat;
background-position: 4px center;
box-shadow: 1px 0 0 var(--gcli-border-color) inset,
-1px 0 0 var(--gcli-border-color) inset;
outline-style: none;
padding: 0;
}
.gclitoolbar-input-node[focused="true"] {
background-color: var(--gcli-input-focused-background);
}
.gclitoolbar-input-node::before {
content: "";
display: inline-block;
-moz-box-ordinal-group: 0;
width: 16px;
height: 16px;
margin: 0 2px;
background-position: 0 center;
background-size: 32px 16px;
}
.gclitoolbar-input-node[focused="true"]::before {
background-position: -16px center;
}
@media (min-resolution: 1.1dppx) {
.gclitoolbar-input-node::before {
}
}
.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
background-color: var(--selection-background);
color: var(--selection-color);
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%);
}