Bug 975804 - DevTools themes - Use border-image instead of background-image for separators and borders on sidebar tabs. r=bgrins

This commit is contained in:
Albert Juhé Lluveras 2014-08-26 13:31:00 -04:00
parent dd5b044a1b
commit 52b550e89c

View File

@ -380,87 +380,84 @@
margin: 0;
min-width: 78px;
text-align: center;
background-color: transparent;
color: inherit;
-moz-box-flex: 1;
border-width: 0;
-moz-border-start-width: 1px;
border-style: solid;
border-radius: 0;
position: static;
-moz-margin-start: -1px;
text-shadow: none;
}
.devtools-sidebar-tabs > tabs > tab {
background-size: calc(100% - 1px) 100%, 1px 100%;
background-repeat: no-repeat;
background-position: 1px, 0;
}
.devtools-sidebar-tabs > tabs > tab:not(:last-of-type) {
background-size: calc(100% - 2px) 100%, 1px 100%;
}
.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
background-position: calc(100% - 1px), 100%;
}
.devtools-sidebar-tabs > tabs > tab {
background-color: transparent;
.devtools-sidebar-tabs > tabs > tab:first-child {
-moz-border-start-width: 0;
}
.theme-dark .devtools-sidebar-tabs > tabs > tab {
background-image: linear-gradient(transparent, transparent), @smallSeparatorDark@;
border-image: @smallSeparatorDark@ 1 1;
}
.theme-dark .devtools-sidebar-tabs > tabs > tab:hover {
background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparatorDark@;
background: hsla(206,37%,4%,.2);
border-image: @smallSeparatorDark@ 1 1;
}
.theme-dark .devtools-sidebar-tabs > tabs > tab:hover:active {
background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparatorDark@;
background: hsla(206,37%,4%,.4);
border-image: @smallSeparatorDark@ 1 1;
}
.theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab {
background-image: linear-gradient(transparent, transparent), @solidSeparatorDark@;
border-image: @solidSeparatorDark@ 1 1;
}
.theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover {
background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparatorDark@;
background: hsla(206,37%,4%,.2);
border-image: @solidSeparatorDark@ 1 1;
}
.theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover:active {
background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparatorDark@;
background: hsla(206,37%,4%,.4);
border-image: @solidSeparatorDark@ 1 1;
}
.theme-dark .devtools-sidebar-tabs > tabs > tab[selected],
.theme-dark .devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
color: #f5f7fa;
background-image: linear-gradient(#1d4f73, #1d4f73), @solidSeparatorDark@;
background: #1d4f73;
border-image: @solidSeparatorDark@ 1 1;
}
.theme-light .devtools-sidebar-tabs > tabs > tab {
background-image: linear-gradient(transparent, transparent), @smallSeparatorLight@;
border-image: @smallSeparatorLight@ 1 1;
}
.theme-light .devtools-sidebar-tabs > tabs > tab:hover {
background-image: linear-gradient(#ddd, #ddd), @smallSeparatorLight@;
background: #ddd;
border-image: @smallSeparatorLight@ 1 1;
}
.theme-light .devtools-sidebar-tabs > tabs > tab:hover:active {
background-image: linear-gradient(#ddd, #ddd), @smallSeparatorLight@;
background: #ddd;
border-image: @smallSeparatorLight@ 1 1;
}
.theme-light .devtools-sidebar-tabs > tabs > tab[selected] + tab {
background-image: linear-gradient(transparent, transparent), @solidSeparatorLight@;
border-image: @solidSeparatorLight@;
}
.theme-light .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover {
background-image: linear-gradient(#ddd, #ddd), @solidSeparatorLight@;
background: #ddd;
border-image: @solidSeparatorLight@;
}
.theme-light .devtools-sidebar-tabs > tabs > tab[selected],
.theme-light .devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
color: #f5f7fa;
background-image: linear-gradient(#4c9ed9, #4c9ed9), @solidSeparatorLight@;
background: #4c9ed9;
border-image: @solidSeparatorLight@;
}
/* Toolbox - moved from toolbox.css.