Bug 1339783 - use theme-toolbar-hover for accordion header background on hover;r=gl
Move toolbar only variable toolbar-tab-hover to variables.css and reuse it in
accordion.
MozReview-Commit-ID: KgBLlYIYlrr
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -19,17 +19,17 @@
font-size: 11px;
padding: 5px;
transition: all 0.25s ease;
width: 100%;
-moz-user-select: none;
}
.accordion ._header:hover {
- background-color: var(--theme-selection-color);
+ background-color: var(--theme-toolbar-hover);
}
.accordion ._header:hover svg {
fill: var(--theme-comment-alt);
}
.accordion ._content {
border-bottom: 1px solid var(--theme-splitter-color);
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -16,17 +16,17 @@
--viewport-selection-arrow-hovered:
url("./images/select-arrow.svg#light-hovered");
--viewport-selection-arrow-selected:
url("./images/select-arrow.svg#light-selected");
}
.theme-dark {
--rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
- --submit-button-active-background-color: var(--toolbar-tab-hover-active);
+ --submit-button-active-background-color: var(--theme-toolbar-hover-active);
--submit-button-active-color: var(--theme-selection-color);
--viewport-color: #c6ccd0;
--viewport-hover-color: #dde1e4;
--viewport-active-color: #fcfcfc;
--viewport-selection-arrow: url("./images/select-arrow.svg#dark");
--viewport-selection-arrow-hovered:
url("./images/select-arrow.svg#dark-hovered");
--viewport-selection-arrow-selected:
@@ -531,17 +531,17 @@ select > option.divider {
color: var(--theme-body-color);
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
}
#device-submit-button:hover {
- background-color: var(--toolbar-tab-hover);
+ background-color: var(--theme-toolbar-hover);
}
#device-submit-button:hover:active {
background-color: var(--submit-button-active-background-color);
color: var(--submit-button-active-color);
}
/**
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -90,22 +90,22 @@
.theme-dark .tabs .tabs-menu-item a,
.theme-light .tabs .tabs-menu-item a {
color: inherit;
padding: 3px 15px;
}
.theme-dark .tabs .tabs-menu-item:hover:not(.is-active),
.theme-light .tabs .tabs-menu-item:hover:not(.is-active) {
- background-color: var(--toolbar-tab-hover);
+ background-color: var(--theme-toolbar-hover);
}
.theme-dark .tabs .tabs-menu-item:hover:active:not(.is-active),
.theme-light .tabs .tabs-menu-item:hover:active:not(.is-active) {
- background-color: var(--toolbar-tab-hover-active);
+ background-color: var(--theme-toolbar-hover-active);
}
.theme-dark .tabs .tabs-menu-item.is-active,
.theme-light .tabs .tabs-menu-item.is-active {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
@@ -160,17 +160,17 @@
.theme-firebug .tabs .tabs-menu-item.is-active a {
background-color: var(--theme-toolbar-tab-selected-background);
border: 1px solid var(--theme-splitter-color);
border-bottom-color: transparent;
color: var(--theme-body-color);
}
.theme-firebug .tabs .tabs-menu-item:hover:active a {
- background-color: var(--toolbar-tab-hover-active);
+ background-color: var(--theme-toolbar-hover-active);
}
.theme-firebug .tabs .tabs-menu-item.is-active:hover:active a {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
.theme-firebug .tabs .tabs-menu-item a {
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -1,31 +1,27 @@
/* 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/. */
/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
.theme-light {
- --toolbar-tab-hover: rgba(170, 170, 170, .2);
- --toolbar-tab-hover-active: rgba(170, 170, 170, .4);
--searchbox-background-color: #ffee99;
--searchbox-border-color: #ffbf00;
--searcbox-no-match-background-color: #ffe5e5;
--searcbox-no-match-border-color: #e52e2e;
--magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
--filter-image: url(chrome://devtools/skin/images/filter.svg);
--tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
--icon-filter: none;
--checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
}
.theme-dark {
- --toolbar-tab-hover: rgba(110,120,130,0.1);
- --toolbar-tab-hover-active: rgba(110,120,130,0.2);
--searchbox-background-color: #4d4222;
--searchbox-border-color: #d99f2b;
--searcbox-no-match-background-color: #402325;
--searcbox-no-match-border-color: #cc3d3d;
--magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
--filter-image: url(chrome://devtools/skin/images/filter.svg);
--tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
--icon-filter: invert(1);
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -129,25 +129,25 @@
border-color: var(--theme-splitter-color);
}
.theme-dark .devtools-tab:hover {
color: #ced3d9;
}
.devtools-tab:hover {
- background-color: var(--toolbar-tab-hover);
+ background-color: var(--theme-toolbar-hover);
}
.theme-dark .devtools-tab:hover:active {
color: var(--theme-selection-color);
}
.devtools-tab:hover:active {
- background-color: var(--toolbar-tab-hover-active);
+ background-color: var(--theme-toolbar-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);
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -13,19 +13,22 @@
* 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-hover-background: #e6b064;
--theme-tab-toolbar-background: #fcfcfc;
--theme-toolbar-background: #fcfcfc;
+ --theme-toolbar-hover: rgba(170, 170, 170, .2);
+ --theme-toolbar-hover-active: rgba(170, 170, 170, .4);
--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;
@@ -76,16 +79,18 @@
: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-toolbar-hover: rgba(110, 120, 130, 0.1);
+ --theme-toolbar-hover-active: rgba(110, 120, 130, 0.2);
--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;