From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Fri, 2 Feb 2018 04:16:08 -0500 Subject: Add m-esr52 at 52.6.0 --- devtools/client/themes/variables.css | 203 +++++++++++++++++++++++++++++++++++ 1 file changed, 203 insertions(+) create mode 100644 devtools/client/themes/variables.css (limited to 'devtools/client/themes/variables.css') diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css new file mode 100644 index 000000000..84f9282a6 --- /dev/null +++ b/devtools/client/themes/variables.css @@ -0,0 +1,203 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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); +} -- cgit v1.2.3