diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css index 56ff86dd6456..be1e26e7a243 100644 --- a/browser/themes/shared/tabs.inc.css +++ b/browser/themes/shared/tabs.inc.css @@ -542,7 +542,7 @@ margin-top: 0 !important; } -/* Selected tab */ +/* Selected tab and tab hover */ #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: 0 0 4px rgba(0,0,0,.4); @@ -555,6 +555,17 @@ background-repeat: repeat-x; } +@media (prefers-contrast) { + .tab-background:is([selected], [multiselected]), + .tabbrowser-tab:hover > .tab-stack > .tab-background { + border: 1px solid currentColor; + } +} + +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) { + background-color: color-mix(in srgb, currentColor 11%, transparent); +} + /* Add a translucent color on top of multiselected tabs */ .tab-background[multiselected=true]:not([selected=true]) { opacity: .9; @@ -566,8 +577,10 @@ color: var(--lwt-tab-text, var(--toolbar-color)); } -.tab-background:is([selected], [multiselected]):-moz-lwtheme { - border: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor)); +@media not (prefers-contrast) { + .tab-background:is([selected], [multiselected]):-moz-lwtheme { + border: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor)); + } } /* @@ -586,20 +599,6 @@ background-size: auto 100%, auto 100%, auto auto; } -/* Tab hover */ - -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) { - background-color: color-mix(in srgb, currentColor 11%, transparent); -} - -@media (prefers-contrast) { - .tabbrowser-tab:hover:not(:focus) > .tab-stack > .tab-background:not(:-moz-lwtheme), - .tabbrowser-tab:not(:focus) > .tab-stack > .tab-background:is([selected], [multiselected]):not(:-moz-lwtheme) { - outline: 1px solid currentColor; - outline-offset: -1px; - } -} - /* Pinned tabs */ #TabsToolbar {