mirror of
https://github.com/roytam1/UXP.git
synced 2026-05-26 05:46:58 +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.
203 lines
7.2 KiB
CSS
203 lines
7.2 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/. */
|
|
|
|
/* Variable declarations for light and dark devtools themes.
|
|
* Colors are taken from:
|
|
* https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.
|
|
* Changes should be kept in sync with commandline.css and commandline.inc.css.
|
|
*/
|
|
|
|
/* IMPORTANT NOTE:
|
|
* This file is parsed in js (see client/shared/theme.js)
|
|
* so the formatting should be consistent (i.e. no '}' inside a rule).
|
|
*/
|
|
|
|
:root.theme-light {
|
|
--theme-body-background: white;
|
|
--theme-sidebar-background: white;
|
|
--theme-contrast-background: #e6b064;
|
|
|
|
--theme-tab-toolbar-background: #fcfcfc;
|
|
--theme-toolbar-background: #fcfcfc;
|
|
--theme-selection-background: #4c9ed9;
|
|
--theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15);
|
|
--theme-selection-color: #f5f7fa;
|
|
--theme-splitter-color: #dde1e4;
|
|
--theme-comment: #696969;
|
|
|
|
--theme-body-color: #393f4c;
|
|
--theme-body-color-alt: #585959;
|
|
--theme-body-color-inactive: #999797;
|
|
--theme-content-color1: #292e33;
|
|
--theme-content-color2: #8fa1b2;
|
|
--theme-content-color3: #667380;
|
|
|
|
--theme-highlight-green: #2cbb0f;
|
|
--theme-highlight-blue: #0088cc;
|
|
--theme-highlight-bluegrey: #0072ab;
|
|
--theme-highlight-purple: #5b5fff;
|
|
--theme-highlight-lightorange: #d97e00;
|
|
--theme-highlight-orange: #f13c00;
|
|
--theme-highlight-red: #ed2655;
|
|
--theme-highlight-pink: #b82ee5;
|
|
--theme-highlight-gray: #dde1e4;
|
|
|
|
/* For accessibility purposes we want to enhance the focus styling. This
|
|
* should improve keyboard navigation usability. */
|
|
--theme-focus-outline-color: #000000;
|
|
|
|
/* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
|
|
--theme-graphs-green: #85d175;
|
|
--theme-graphs-blue: #83b7f6;
|
|
--theme-graphs-bluegrey: #0072ab;
|
|
--theme-graphs-purple: #b693eb;
|
|
--theme-graphs-yellow: #efc052;
|
|
--theme-graphs-orange: #d97e00;
|
|
--theme-graphs-red: #e57180;
|
|
--theme-graphs-grey: #cccccc;
|
|
--theme-graphs-full-red: #f00;
|
|
--theme-graphs-full-blue: #00f;
|
|
|
|
/* Images */
|
|
--theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
|
|
--theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
|
|
|
|
/* Tooltips */
|
|
--theme-tooltip-border: #d9e1e8;
|
|
--theme-tooltip-background: rgba(255, 255, 255, .9);
|
|
--theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
|
|
|
|
/* Command line */
|
|
--theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
|
|
--theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
|
|
}
|
|
|
|
:root.theme-dark {
|
|
--theme-body-background: #393f4c;
|
|
--theme-sidebar-background: #393f4c;
|
|
--theme-contrast-background: #ffb35b;
|
|
|
|
--theme-tab-toolbar-background: #272b35;
|
|
--theme-toolbar-background: #272b35;
|
|
--theme-selection-background: #5675B9;
|
|
--theme-selection-background-semitransparent: rgba(86, 117, 185, 0.5);
|
|
--theme-selection-color: #f5f7fa;
|
|
--theme-splitter-color: #454d5d;
|
|
--theme-comment: #757873;
|
|
|
|
--theme-body-color: #8fa1b2;
|
|
--theme-body-color-alt: #b6babf;
|
|
--theme-body-color-inactive: #8fa1b2;
|
|
--theme-content-color1: #a9bacb;
|
|
--theme-content-color2: #8fa1b2;
|
|
--theme-content-color3: #5f7387;
|
|
|
|
--theme-highlight-green: #00ff7f;
|
|
--theme-highlight-blue: #46afe3;
|
|
--theme-highlight-bluegrey: #5e88b0;
|
|
--theme-highlight-purple: #bcb8db;
|
|
--theme-highlight-lightorange: #d99b28;
|
|
--theme-highlight-orange: #d96629;
|
|
--theme-highlight-red: #eb5368;
|
|
--theme-highlight-pink: #df80ff;
|
|
--theme-highlight-gray: #e9f4fe;
|
|
|
|
/* For accessibility purposes we want to enhance the focus styling. This
|
|
* should improve keyboard navigation usability. */
|
|
--theme-focus-outline-color: #ced3d9;
|
|
|
|
/* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
|
|
--theme-graphs-green: #70bf53;
|
|
--theme-graphs-blue: #46afe3;
|
|
--theme-graphs-bluegrey: #5e88b0;
|
|
--theme-graphs-purple: #df80ff;
|
|
--theme-graphs-yellow: #d99b28;
|
|
--theme-graphs-orange: #d96629;
|
|
--theme-graphs-red: #eb5368;
|
|
--theme-graphs-grey: #757873;
|
|
--theme-graphs-full-red: #f00;
|
|
--theme-graphs-full-blue: #00f;
|
|
|
|
/* Images */
|
|
--theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
|
|
--theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
|
|
|
|
/* Tooltips */
|
|
--theme-tooltip-border: #434850;
|
|
--theme-tooltip-background: rgba(19, 28, 38, .9);
|
|
--theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
|
|
|
|
/* Command line */
|
|
--theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
|
|
--theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
|
|
}
|
|
|
|
:root.theme-firebug {
|
|
--theme-body-background: #fcfcfc;
|
|
--theme-sidebar-background: #fcfcfc;
|
|
--theme-contrast-background: #e6b064;
|
|
|
|
--theme-tab-toolbar-background: #d8eaf9;
|
|
--theme-toolbar-background: #f0f1f2;
|
|
--theme-selection-background: #3399ff;
|
|
--theme-selection-background-semitransparent: rgba(128,128,128,0.2);
|
|
--theme-selection-color: white;
|
|
--theme-splitter-color: #aabccf;
|
|
--theme-comment: green;
|
|
|
|
--theme-body-color: #000000;
|
|
--theme-body-color-alt: #585959;
|
|
--theme-content-color1: #292e33;
|
|
--theme-content-color2: #8fa1b2;
|
|
--theme-content-color3: #667380;
|
|
|
|
--theme-highlight-green: #2cbb0f;
|
|
--theme-highlight-blue: #3455db;
|
|
--theme-highlight-bluegrey: #0072ab;
|
|
--theme-highlight-purple: #887ce6;
|
|
--theme-highlight-lightorange: #d97e00;
|
|
--theme-highlight-orange: #f13c00;
|
|
--theme-highlight-red: #e22f6f;
|
|
--theme-highlight-pink: #b82ee5;
|
|
--theme-highlight-gray: #dde1e4;
|
|
|
|
/* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
|
|
--theme-graphs-green: #85d175;
|
|
--theme-graphs-blue: #83b7f6;
|
|
--theme-graphs-bluegrey: #0072ab;
|
|
--theme-graphs-purple: #b693eb;
|
|
--theme-graphs-yellow: #efc052;
|
|
--theme-graphs-orange: #d97e00;
|
|
--theme-graphs-red: #e57180;
|
|
--theme-graphs-grey: #cccccc;
|
|
--theme-graphs-full-red: #f00;
|
|
--theme-graphs-full-blue: #00f;
|
|
|
|
/* Images */
|
|
--theme-pane-collapse-image: url(chrome://devtools/skin/images/firebug/pane-collapse.svg);
|
|
--theme-pane-expand-image: url(chrome://devtools/skin/images/firebug/pane-expand.svg);
|
|
|
|
/* Font size */
|
|
--theme-toolbar-font-size: 12px;
|
|
|
|
/* Header */
|
|
--theme-header-background: #F0F0F0 linear-gradient(to top,
|
|
rgba(0, 0, 0, 0.1),
|
|
transparent) repeat-x;
|
|
|
|
/* Command line */
|
|
--theme-command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
|
|
--theme-command-line-image-focus: url(chrome://devtools/skin/images/firebug/commandline-icon.svg#focus);
|
|
}
|
|
|
|
:root {
|
|
--theme-focus-border-color-textbox: #0675d3;
|
|
--theme-textbox-box-shadow: rgba(97,181,255,.75);
|
|
|
|
/* For accessibility purposes we want to enhance the focus styling. This
|
|
* should improve keyboard navigation usability. */
|
|
--theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
|
|
--theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
|
|
}
|