Bug 1288401 - Inspector sidebar tabs are missing the :active styling. r=ntim
MozReview-Commit-ID: 3Mhc25G9AK3
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -69,43 +69,48 @@
.theme-dark .tabs .tabs-menu-item a:hover,
.theme-dark .tabs .tabs-menu-item a,
.theme-light .tabs .tabs-menu-item a:hover,
.theme-light .tabs .tabs-menu-item a {
padding: 3px 15px;
}
-.theme-dark .tabs .tabs-menu-item:hover,
-.theme-light .tabs .tabs-menu-item:hover {
+.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);
}
+.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);
+}
+
.theme-dark .tabs .tabs-menu-item.is-active,
-.theme-dark .tabs .tabs-menu-item.is-active:hover,
-.theme-light .tabs .tabs-menu-item.is-active,
-.theme-light .tabs .tabs-menu-item.is-active:hover {
+.theme-light .tabs .tabs-menu-item.is-active {
background-color: var(--theme-selection-background);
}
.theme-dark .tabs .tabs-menu-item.is-active a,
-.theme-dark .tabs .tabs-menu-item.is-active:hover a,
-.theme-light .tabs .tabs-menu-item.is-active a,
-.theme-light .tabs .tabs-menu-item.is-active:hover a {
+.theme-light .tabs .tabs-menu-item.is-active a {
color: var(--theme-selection-color);
}
/* Dark Theme */
.theme-dark .tabs .tabs-menu-item a {
+ color: var(--theme-body-color-alt);
+}
+
+.theme-dark .tabs .tabs-menu-item:hover:not(.is-active) a {
color: #CED3D9;
}
-.theme-dark .tabs .tabs-menu-item:active:hover {
- background-color: hsla(206, 37%, 4%, .4); /* --toolbar-tab-hover-active */
+.theme-dark .tabs .tabs-menu-item:hover:active a {
+ color: var(--theme-selection-color);
}
/* Firebug Theme */
.theme-firebug .tabs {
background-color: rgb(219, 234, 249);
background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
}
@@ -129,30 +134,33 @@
.theme-firebug .tabs .tabs-menu-item a {
font-family: var(--proportional-font-family);
font-weight: bold;
color: var(--theme-body-color);
border-radius: 4px 4px 0 0;
}
-.theme-firebug .tabs .tabs-menu-item:hover a {
+.theme-firebug .tabs .tabs-menu-item:hover:not(.is-active) a {
border: 1px solid #C8C8C8;
border-bottom: 1px solid transparent;
background-color: transparent;
}
-.theme-firebug .tabs .tabs-menu-item.is-active a,
-.theme-firebug .tabs .tabs-menu-item.is-active:hover a {
+.theme-firebug .tabs .tabs-menu-item.is-active a {
background-color: rgb(247, 251, 254);
border: 1px solid rgb(170, 188, 207);
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);
+}
+
.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 {
border: 1px solid transparent;
}