mirror of
https://github.com/roytam1/UXP.git
synced 2026-05-26 13:58:49 +00:00
Moonchild
d388e478a0
Vim control lines were re-introduced or not entirely cleaned up. This nukes them again. Removing from the rest of js, caps, chrome, config, devtools, docshell, image, intl. More to come.
408 lines
10 KiB
CSS
408 lines
10 KiB
CSS
/* 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/. */
|
|
|
|
:root {
|
|
--close-button-image: url(chrome://devtools/skin/images/close.svg);
|
|
--dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
|
|
--dock-side-image: url(chrome://devtools/skin/images/dock-side.svg);
|
|
--dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg);
|
|
|
|
--command-paintflashing-image: url(images/command-paintflashing.svg);
|
|
--command-screenshot-image: url(images/command-screenshot.svg);
|
|
--command-responsive-image: url(images/command-responsivemode.svg);
|
|
--command-scratchpad-image: url(images/tool-scratchpad.svg);
|
|
--command-pick-image: url(images/command-pick.svg);
|
|
--command-frames-image: url(images/command-frames.svg);
|
|
--command-splitconsole-image: url(images/command-console.svg);
|
|
--command-noautohide-image: url(images/command-noautohide.svg);
|
|
--command-rulers-image: url(images/command-rulers.svg);
|
|
--command-measure-image: url(images/command-measure.svg);
|
|
}
|
|
|
|
.theme-firebug {
|
|
--close-button-image: url(chrome://devtools/skin/images/firebug/close.svg);
|
|
--dock-bottom-image: url(chrome://devtools/skin/images/firebug/dock-bottom.svg);
|
|
--dock-side-image: url(chrome://devtools/skin/images/firebug/dock-side.svg);
|
|
--dock-undock-image: url(chrome://devtools/skin/images/firebug/dock-undock.svg);
|
|
|
|
--command-paintflashing-image: url(images/firebug/command-paintflashing.svg);
|
|
--command-screenshot-image: url(images/firebug/command-screenshot.svg);
|
|
--command-responsive-image: url(images/firebug/command-responsivemode.svg);
|
|
--command-scratchpad-image: url(images/firebug/command-scratchpad.svg);
|
|
--command-pick-image: url(images/firebug/command-pick.svg);
|
|
--command-frames-image: url(images/firebug/command-frames.svg);
|
|
--command-splitconsole-image: url(images/firebug/command-console.svg);
|
|
--command-noautohide-image: url(images/firebug/command-noautohide.svg);
|
|
--command-rulers-image: url(images/firebug/command-rulers.svg);
|
|
--command-measure-image: url(images/firebug/command-measure.svg);
|
|
}
|
|
|
|
/* Toolbox tabbar */
|
|
|
|
.devtools-tabbar {
|
|
-moz-appearance: none;
|
|
min-height: 24px;
|
|
border: 0px solid;
|
|
border-bottom-width: 1px;
|
|
padding: 0;
|
|
background: var(--theme-tab-toolbar-background);
|
|
border-bottom-color: var(--theme-splitter-color);
|
|
}
|
|
|
|
#toolbox-tabs {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Set flex attribute to Toolbox buttons and Picker container so,
|
|
they don't overlapp with the tab bar */
|
|
#toolbox-buttons {
|
|
display: flex;
|
|
}
|
|
|
|
#toolbox-picker-container {
|
|
display: flex;
|
|
}
|
|
|
|
/* Toolbox tabs */
|
|
|
|
.devtools-tab {
|
|
-moz-appearance: none;
|
|
-moz-binding: url("chrome://global/content/bindings/general.xml#control-item");
|
|
-moz-box-align: center;
|
|
min-width: 32px;
|
|
min-height: 24px;
|
|
max-width: 100px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-style: solid;
|
|
border-width: 0;
|
|
border-inline-start-width: 1px;
|
|
-moz-box-align: center;
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
/* Save space on the tab-strip in Firebug theme */
|
|
.theme-firebug .devtools-tab {
|
|
-moz-box-flex: initial;
|
|
}
|
|
|
|
.theme-dark .devtools-tab {
|
|
color: var(--theme-body-color-alt);
|
|
border-color: #42484f;
|
|
}
|
|
|
|
.theme-light .devtools-tab {
|
|
color: var(--theme-body-color);
|
|
border-color: var(--theme-splitter-color);
|
|
}
|
|
|
|
.theme-dark .devtools-tab:hover {
|
|
color: #ced3d9;
|
|
}
|
|
|
|
.devtools-tab:hover {
|
|
background-color: var(--toolbar-tab-hover);
|
|
}
|
|
|
|
.theme-dark .devtools-tab:hover:active {
|
|
color: var(--theme-selection-color);
|
|
}
|
|
|
|
.devtools-tab:hover:active {
|
|
background-color: var(--toolbar-tab-hover-active);
|
|
}
|
|
|
|
.theme-dark .devtools-tab:not([selected])[highlighted] {
|
|
background-color: hsla(99, 100%, 14%, .3);
|
|
}
|
|
|
|
.theme-light .devtools-tab:not([selected])[highlighted] {
|
|
background-color: rgba(44, 187, 15, .2);
|
|
}
|
|
|
|
/* Display execution pointer in the Debugger tab to indicate
|
|
that the debugger is paused. */
|
|
.theme-firebug #toolbox-tab-jsdebugger.devtools-tab:not([selected])[highlighted] {
|
|
background-color: rgba(89, 178, 234, .2);
|
|
background-image: url(chrome://devtools/skin/images/firebug/tool-debugger-paused.svg);
|
|
background-repeat: no-repeat;
|
|
padding-left: 13px !important;
|
|
background-position: 3px 6px;
|
|
}
|
|
|
|
.devtools-tab > image {
|
|
border: none;
|
|
margin: 0;
|
|
margin-inline-start: 4px;
|
|
opacity: 0.6;
|
|
max-height: 16px;
|
|
width: 16px; /* Prevents collapse during theme switching */
|
|
}
|
|
|
|
/* Support invertable icon flags and make icon white when it's on a blue background */
|
|
.theme-light .devtools-tab[icon-invertable="light-theme"]:not([selected]) > image,
|
|
.devtools-tab[icon-invertable="dark-theme"][selected] > image {
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* Don't apply any filter to non-invertable command button icons */
|
|
.command-button:not(.command-button-invertable),
|
|
/* [icon-invertable="light-theme"] icons are white, so do not invert them for the dark theme */
|
|
.theme-dark .devtools-tab[icon-invertable="light-theme"] > image,
|
|
/* Since "highlighted" icons are green, we should omit the filter */
|
|
.devtools-tab[icon-invertable][highlighted]:not([selected]) > image {
|
|
filter: none;
|
|
}
|
|
|
|
.devtools-tab > label {
|
|
white-space: nowrap;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.devtools-tab:hover > image {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.devtools-tab:active > image,
|
|
.devtools-tab[selected] > image {
|
|
opacity: 1;
|
|
}
|
|
|
|
.devtools-tabbar .devtools-tab[selected],
|
|
.devtools-tabbar .devtools-tab[selected]:hover:active {
|
|
color: var(--theme-selection-color);
|
|
background-color: var(--theme-selection-background);
|
|
}
|
|
|
|
#toolbox-tabs .devtools-tab[selected],
|
|
#toolbox-tabs .devtools-tab[highlighted] {
|
|
border-width: 0;
|
|
padding-inline-start: 1px;
|
|
}
|
|
|
|
#toolbox-tabs .devtools-tab[selected]:last-child,
|
|
#toolbox-tabs .devtools-tab[highlighted]:last-child {
|
|
padding-inline-end: 1px;
|
|
}
|
|
|
|
#toolbox-tabs .devtools-tab[selected] + .devtools-tab,
|
|
#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab {
|
|
border-inline-start-width: 0;
|
|
padding-inline-start: 1px;
|
|
}
|
|
|
|
#toolbox-tabs .devtools-tab:first-child[selected] {
|
|
border-inline-start-width: 0;
|
|
}
|
|
|
|
#toolbox-tabs .devtools-tab:last-child {
|
|
border-inline-end-width: 1px;
|
|
}
|
|
|
|
.devtools-tab:not([highlighted]) > .highlighted-icon,
|
|
.devtools-tab[selected] > .highlighted-icon,
|
|
.devtools-tab:not([selected])[highlighted] > .default-icon {
|
|
visibility: collapse;
|
|
}
|
|
|
|
/* The options tab is special - it doesn't have the same parent
|
|
as the other tabs (toolbox-option-container vs toolbox-tabs) */
|
|
#toolbox-option-container .devtools-tab:not([selected]) {
|
|
background-color: transparent;
|
|
}
|
|
#toolbox-option-container .devtools-tab {
|
|
border-color: transparent;
|
|
border-width: 0;
|
|
padding-inline-start: 1px;
|
|
}
|
|
#toolbox-tab-options > image {
|
|
margin: 0 8px;
|
|
}
|
|
|
|
/* Toolbox controls */
|
|
|
|
#toolbox-controls > button,
|
|
#toolbox-dock-buttons > button {
|
|
-moz-appearance: none;
|
|
border: none;
|
|
margin: 0 4px;
|
|
min-width: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
/* Save space in Firebug theme */
|
|
.theme-firebug #toolbox-controls button {
|
|
margin-inline-start: 0 !important;
|
|
min-width: 12px;
|
|
margin: 0 1px;
|
|
}
|
|
|
|
#toolbox-close::before {
|
|
background-image: var(--close-button-image);
|
|
}
|
|
|
|
#toolbox-dock-bottom::before {
|
|
background-image: var(--dock-bottom-image);
|
|
}
|
|
|
|
#toolbox-dock-side::before {
|
|
background-image: var(--dock-side-image);
|
|
}
|
|
|
|
#toolbox-dock-window::before {
|
|
background-image: var(--dock-undock-image);
|
|
}
|
|
|
|
#toolbox-dock-bottom-minimize::before {
|
|
background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png");
|
|
}
|
|
|
|
#toolbox-dock-bottom-minimize.minimized::before {
|
|
background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png");
|
|
}
|
|
|
|
#toolbox-buttons:empty + .devtools-separator,
|
|
.devtools-separator[invisible] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#toolbox-controls-separator {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Command buttons */
|
|
|
|
.command-button {
|
|
padding: 0;
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.command-button::before {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.command-button:hover {
|
|
background-color: var(--toolbar-tab-hover);
|
|
}
|
|
|
|
.theme-light .command-button:hover {
|
|
background-color: inherit;
|
|
}
|
|
|
|
.command-button:hover:active,
|
|
.command-button[checked=true]:not(:hover) {
|
|
background-color: var(--toolbar-tab-hover-active)
|
|
}
|
|
|
|
.theme-light .command-button:hover:active,
|
|
.theme-light .command-button[checked=true]:not(:hover) {
|
|
background-color: inherit;
|
|
}
|
|
|
|
.command-button:hover::before {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.command-button:hover:active::before,
|
|
.command-button[checked=true]::before,
|
|
.command-button[open=true]::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Command button images */
|
|
|
|
#command-button-paintflashing::before {
|
|
background-image: var(--command-paintflashing-image);
|
|
}
|
|
|
|
#command-button-screenshot::before {
|
|
background-image: var(--command-screenshot-image);
|
|
}
|
|
|
|
#command-button-responsive::before {
|
|
background-image: var(--command-responsive-image);
|
|
}
|
|
|
|
#command-button-scratchpad::before {
|
|
background-image: var(--command-scratchpad-image);
|
|
}
|
|
|
|
#command-button-pick::before {
|
|
background-image: var(--command-pick-image);
|
|
}
|
|
|
|
#command-button-splitconsole::before {
|
|
background-image: var(--command-splitconsole-image);
|
|
}
|
|
|
|
#command-button-noautohide::before {
|
|
background-image: var(--command-noautohide-image);
|
|
}
|
|
|
|
#command-button-eyedropper::before {
|
|
background-image: var(--command-eyedropper-image);
|
|
}
|
|
|
|
#command-button-rulers::before {
|
|
background-image: var(--command-rulers-image);
|
|
}
|
|
|
|
#command-button-measure::before {
|
|
background-image: var(--command-measure-image);
|
|
}
|
|
|
|
#command-button-frames::before {
|
|
background-image: var(--command-frames-image);
|
|
}
|
|
|
|
#command-button-frames {
|
|
background-image: url("chrome://devtools/skin/images/dropmarker.svg");
|
|
background-repeat: no-repeat;
|
|
|
|
/* Override background-size from the command-button.
|
|
The drop down arrow is smaller */
|
|
background-size: 8px 4px !important;
|
|
min-width: 32px;
|
|
}
|
|
|
|
#command-button-frames:-moz-locale-dir(ltr) {
|
|
background-position: right;
|
|
}
|
|
|
|
#command-button-frames:-moz-locale-dir(rtl) {
|
|
background-position: left;
|
|
}
|
|
|
|
/* Toolbox panels */
|
|
|
|
.toolbox-panel {
|
|
display: -moz-box;
|
|
-moz-box-flex: 1;
|
|
visibility: collapse;
|
|
}
|
|
|
|
.toolbox-panel[selected] {
|
|
visibility: visible;
|
|
}
|
|
|
|
/**
|
|
* When panels are collapsed or hidden, making sure that they are also
|
|
* inaccessible by keyboard. This is not the case by default because the are
|
|
* predominantly hidden using visibility: collapse; style or collapsed
|
|
* attribute.
|
|
*/
|
|
.toolbox-panel *,
|
|
#toolbox-panel-webconsole[collapsed] * {
|
|
-moz-user-focus: ignore;
|
|
}
|
|
|
|
/**
|
|
* Enrure that selected toolbox panel's contents are keyboard accessible as they
|
|
* are explicitly made not to be when hidden (default).
|
|
*/
|
|
.toolbox-panel[selected] * {
|
|
-moz-user-focus: normal;
|
|
}
|