From 9e68180349d251ac64b3d59c2adf67fa9a1bae9e Mon Sep 17 00:00:00 2001 From: BobbyHo Date: Sat, 12 Nov 2016 13:58:09 +0800 Subject: Fix selected tab highlighting --- .../chrome/browser/sass/_browser-sass.scss | 90 +++++++++++----------- .../chrome/browser/sass/browser-dark.css | 72 ++++++++--------- .../chrome/browser/sass/browser-darker.css | 72 ++++++++--------- .../chrome/browser/sass/browser-light.css | 72 ++++++++--------- 4 files changed, 153 insertions(+), 153 deletions(-) (limited to 'arc-firefox-theme/chrome/browser/sass') diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index 51699b3..d68bf05 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -3092,7 +3092,7 @@ html|span.ac-emphasize-text-url { } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[visuallyselected=true] { +.tabbrowser-tab[selected=true] { position: relative; z-index: 2; } @@ -3264,32 +3264,32 @@ html|span.ac-emphasize-text-url { } .tab-icon-sound:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying] { +.tab-icon-sound[selected=true][soundplaying] { list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio"); } .tab-icon-sound:hover:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying]:hover { +.tab-icon-sound[selected=true][soundplaying]:hover { list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-hover"); } .tab-icon-sound:hover:active:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { +.tab-icon-sound[selected=true][soundplaying]:hover:active { list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-pressed"); } .tab-icon-sound[muted]:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted] { +.tab-icon-sound[selected=true][muted] { list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted"); } .tab-icon-sound[muted]:hover:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted]:hover { +.tab-icon-sound[selected=true][muted]:hover { list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted-hover"); } .tab-icon-sound[muted]:hover:active:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted]:hover:active { +.tab-icon-sound[selected=true][muted]:hover:active { list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted-pressed"); } @@ -3366,17 +3366,17 @@ html|span.ac-emphasize-text-url { transition: opacity 150ms ease; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:not([selected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -3398,8 +3398,8 @@ html|span.ac-emphasize-text-url { */ -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { /* position ::after on top of its parent */ margin-inline-start: -30px; background-size: 100% 100%; @@ -3408,47 +3408,47 @@ html|span.ac-emphasize-text-url { position: relative; } -.tab-background-start[visuallyselected=true]::before, -.tab-background-end[visuallyselected=true]::before { +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { /* all ::before pseudo elements */ content: ""; display: -moz-box; } -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-start.svg); background-size: 100% 100%; } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-end.svg); background-size: 100% 100%; } /* For lightweight themes, clip the header image on start, middle, and end. */ -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } -//.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr)::after, -//.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl)::after { +//.tab-background-start[selected=true]:-moz-locale-dir(ltr)::after, +//.tab-background-end[selected=true]:-moz-locale-dir(rtl)::after { // background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png); //} -//.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr)::after, -//.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl)::after { +//.tab-background-end[selected=true]:-moz-locale-dir(ltr)::after, +//.tab-background-start[selected=true]:-moz-locale-dir(rtl)::after { // background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png); //} -.tab-background-middle[visuallyselected=true] { +.tab-background-middle[selected=true] { background-clip: padding-box, padding-box, content-box; background-color: transparent; background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-middle.svg); @@ -3461,7 +3461,7 @@ html|span.ac-emphasize-text-url { /* Selected tab lightweight theme styles. See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 2px, rgba(255,255,255,.4) 2px, rgba(255,255,255,.4));/*, @@ -3471,21 +3471,21 @@ html|span.ac-emphasize-text-url { } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { background-image: linear-gradient(transparent 2px, rgba(255,255,255,.4) 2px, rgba(255,255,255,.4)); } -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; } /* End selected tab */ /* new tab button border and gradient on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]), +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover { background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-start-hover.svg), url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-middle-hover.svg), @@ -3517,20 +3517,20 @@ html|span.ac-emphasize-text-url { position: absolute; } -.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]), -.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) { +.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { background-image: radial-gradient(farthest-corner at center bottom, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 20%, rgba(127,179,255,0.25) 40%, transparent 70%); background-position: center bottom var(--tab-toolbar-navbar-overlap); background-repeat: no-repeat; background-size: 85% 100%; } -.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([visuallyselected="true"]) { +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { background-position: left bottom var(--tab-toolbar-navbar-overlap); background-size: 34px 100%; } -.tab-label[attention]:not([visuallyselected="true"]) { +.tab-label[attention]:not([selected="true"]) { font-weight: bold; } @@ -3554,8 +3554,8 @@ html|span.ac-emphasize-text-url { /* Also show separators beside the selected tab when dragging it. */ //#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after, -//.tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before, -//#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after { +//.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before, +//#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { // content: ""; // display: -moz-box; //} @@ -3621,15 +3621,15 @@ html|span.ac-emphasize-text-url { } /* Tab close button */ -//.tab-close-button:not([visuallyselected]):not(:hover) { +//.tab-close-button:not([selected]):not(:hover) { // background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 64, 16, 48); //} -//#TabsToolbar[brighttext] .tab-close-button:not([visuallyselected]):not(:hover) { +//#TabsToolbar[brighttext] .tab-close-button:not([selected]):not(:hover) { // background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); //} -//.tab-close-button:not([visuallyselected]):not(:hover):-moz-lwtheme-darktext { +//.tab-close-button:not([selected]):not(:hover):-moz-lwtheme-darktext { // background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 96, 16, 80); //} diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index ab1ce34..eed09eb 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -2353,7 +2353,7 @@ html|span.ac-emphasize-text-url { color: #D3DAE3; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[visuallyselected=true] { +.tabbrowser-tab[selected=true] { position: relative; z-index: 2; } @@ -2482,27 +2482,27 @@ html|span.ac-emphasize-text-url { list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } .tab-icon-sound:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying] { +.tab-icon-sound[selected=true][soundplaying] { list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio"); } .tab-icon-sound:hover:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying]:hover { +.tab-icon-sound[selected=true][soundplaying]:hover { list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-hover"); } .tab-icon-sound:hover:active:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { +.tab-icon-sound[selected=true][soundplaying]:hover:active { list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-pressed"); } .tab-icon-sound[muted]:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted] { +.tab-icon-sound[selected=true][muted] { list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-muted"); } .tab-icon-sound[muted]:hover:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted]:hover { +.tab-icon-sound[selected=true][muted]:hover { list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-muted-hover"); } .tab-icon-sound[muted]:hover:active:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted]:hover:active { +.tab-icon-sound[selected=true][muted]:hover:active { list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-muted-pressed"); } .tab-background, @@ -2547,16 +2547,16 @@ html|span.ac-emphasize-text-url { .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { transition: opacity 150ms ease; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:not([selected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2573,8 +2573,8 @@ html|span.ac-emphasize-text-url { - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer events go through to ::before to get the proper shape. */ -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { /* position ::after on top of its parent */ margin-inline-start: -30px; background-size: 100% 100%; @@ -2582,32 +2582,32 @@ html|span.ac-emphasize-text-url { display: -moz-box; position: relative; } -.tab-background-start[visuallyselected=true]::before, -.tab-background-end[visuallyselected=true]::before { +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { /* all ::before pseudo elements */ content: ""; display: -moz-box; } -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-start.svg); background-size: 100% 100%; } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-end.svg); background-size: 100% 100%; } /* For lightweight themes, clip the header image on start, middle, and end. */ -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } -.tab-background-middle[visuallyselected=true] { +.tab-background-middle[selected=true] { background-clip: padding-box, padding-box, content-box; background-color: transparent; background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-middle.svg); @@ -2619,7 +2619,7 @@ html|span.ac-emphasize-text-url { /* Selected tab lightweight theme styles. See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 2px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0.4)); /*, @@ -2628,18 +2628,18 @@ lwtHeader;*/ background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { background-image: linear-gradient(transparent 2px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0.4)); } -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; } /* End selected tab */ /* new tab button border and gradient on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]), +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover { background-image: url(chrome://browser/skin/custom_images/dark/tabs/tab-start-hover.svg), url(chrome://browser/skin/custom_images/dark/tabs/tab-middle-hover.svg), url(chrome://browser/skin/custom_images/dark/tabs/tab-end-hover.svg); background-position: left bottom, 30px bottom, right bottom; @@ -2664,18 +2664,18 @@ lwtHeader;*/ height: 100%; position: absolute; } -.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]), -.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) { +.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { background-image: radial-gradient(farthest-corner at center bottom, white 3%, rgba(186, 221, 251, 0.75) 20%, rgba(127, 179, 255, 0.25) 40%, transparent 70%); background-position: center bottom var(--tab-toolbar-navbar-overlap); background-repeat: no-repeat; background-size: 85% 100%; } -.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([visuallyselected="true"]) { +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { background-position: left bottom var(--tab-toolbar-navbar-overlap); background-size: 34px 100%; } -.tab-label[attention]:not([visuallyselected="true"]) { +.tab-label[attention]:not([selected="true"]) { font-weight: bold; } /* Tab separators */ diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index 92759b4..6338ea6 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -2353,7 +2353,7 @@ html|span.ac-emphasize-text-url { color: #5c616c; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[visuallyselected=true] { +.tabbrowser-tab[selected=true] { position: relative; z-index: 2; } @@ -2482,27 +2482,27 @@ html|span.ac-emphasize-text-url { list-style-image: url("chrome://browser/skin/custom_images/dark/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } .tab-icon-sound:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying] { +.tab-icon-sound[selected=true][soundplaying] { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio"); } .tab-icon-sound:hover:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying]:hover { +.tab-icon-sound[selected=true][soundplaying]:hover { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-hover"); } .tab-icon-sound:hover:active:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { +.tab-icon-sound[selected=true][soundplaying]:hover:active { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-pressed"); } .tab-icon-sound[muted]:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted] { +.tab-icon-sound[selected=true][muted] { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted"); } .tab-icon-sound[muted]:hover:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted]:hover { +.tab-icon-sound[selected=true][muted]:hover { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-hover"); } .tab-icon-sound[muted]:hover:active:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted]:hover:active { +.tab-icon-sound[selected=true][muted]:hover:active { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-pressed"); } .tab-background, @@ -2547,16 +2547,16 @@ html|span.ac-emphasize-text-url { .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { transition: opacity 150ms ease; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:not([selected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2573,8 +2573,8 @@ html|span.ac-emphasize-text-url { - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer events go through to ::before to get the proper shape. */ -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { /* position ::after on top of its parent */ margin-inline-start: -30px; background-size: 100% 100%; @@ -2582,32 +2582,32 @@ html|span.ac-emphasize-text-url { display: -moz-box; position: relative; } -.tab-background-start[visuallyselected=true]::before, -.tab-background-end[visuallyselected=true]::before { +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { /* all ::before pseudo elements */ content: ""; display: -moz-box; } -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-start.svg); background-size: 100% 100%; } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-end.svg); background-size: 100% 100%; } /* For lightweight themes, clip the header image on start, middle, and end. */ -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } -.tab-background-middle[visuallyselected=true] { +.tab-background-middle[selected=true] { background-clip: padding-box, padding-box, content-box; background-color: transparent; background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-middle.svg); @@ -2619,7 +2619,7 @@ html|span.ac-emphasize-text-url { /* Selected tab lightweight theme styles. See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 2px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0.4)); /*, @@ -2628,18 +2628,18 @@ lwtHeader;*/ background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { background-image: linear-gradient(transparent 2px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0.4)); } -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; } /* End selected tab */ /* new tab button border and gradient on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]), +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover { background-image: url(chrome://browser/skin/custom_images/darker/tabs/tab-start-hover.svg), url(chrome://browser/skin/custom_images/darker/tabs/tab-middle-hover.svg), url(chrome://browser/skin/custom_images/darker/tabs/tab-end-hover.svg); background-position: left bottom, 30px bottom, right bottom; @@ -2664,18 +2664,18 @@ lwtHeader;*/ height: 100%; position: absolute; } -.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]), -.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) { +.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { background-image: radial-gradient(farthest-corner at center bottom, white 3%, rgba(186, 221, 251, 0.75) 20%, rgba(127, 179, 255, 0.25) 40%, transparent 70%); background-position: center bottom var(--tab-toolbar-navbar-overlap); background-repeat: no-repeat; background-size: 85% 100%; } -.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([visuallyselected="true"]) { +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { background-position: left bottom var(--tab-toolbar-navbar-overlap); background-size: 34px 100%; } -.tab-label[attention]:not([visuallyselected="true"]) { +.tab-label[attention]:not([selected="true"]) { font-weight: bold; } /* Tab separators */ diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index ec0dcd1..694ef8c 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -2353,7 +2353,7 @@ html|span.ac-emphasize-text-url { color: #5c616c; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ -.tabbrowser-tab[visuallyselected=true] { +.tabbrowser-tab[selected=true] { position: relative; z-index: 2; } @@ -2482,27 +2482,27 @@ html|span.ac-emphasize-text-url { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-pressed"); } .tab-icon-sound:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying] { +.tab-icon-sound[selected=true][soundplaying] { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio"); } .tab-icon-sound:hover:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying]:hover { +.tab-icon-sound[selected=true][soundplaying]:hover { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-hover"); } .tab-icon-sound:hover:active:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active { +.tab-icon-sound[selected=true][soundplaying]:hover:active { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-pressed"); } .tab-icon-sound[muted]:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted] { +.tab-icon-sound[selected=true][muted] { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted"); } .tab-icon-sound[muted]:hover:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted]:hover { +.tab-icon-sound[selected=true][muted]:hover { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-hover"); } .tab-icon-sound[muted]:hover:active:-moz-lwtheme, -.tab-icon-sound[visuallyselected=true][muted]:hover:active { +.tab-icon-sound[selected=true][muted]:hover:active { list-style-image: url("chrome://browser/skin/custom_images/light/tabs/tab-audio.svg#tab-audio-muted-pressed"); } .tab-background, @@ -2547,16 +2547,16 @@ html|span.ac-emphasize-text-url { .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator { transition: opacity 150ms ease; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { min-height: var(--tab-min-height); width: 30px; } -.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:not([selected=true]), .tabbrowser-tab:-moz-lwtheme { color: inherit; } @@ -2573,8 +2573,8 @@ html|span.ac-emphasize-text-url { - ::after - provides the border/stroke of the tab curve and is overlayed above ::before. Pointer events go through to ::before to get the proper shape. */ -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { /* position ::after on top of its parent */ margin-inline-start: -30px; background-size: 100% 100%; @@ -2582,32 +2582,32 @@ html|span.ac-emphasize-text-url { display: -moz-box; position: relative; } -.tab-background-start[visuallyselected=true]::before, -.tab-background-end[visuallyselected=true]::before { +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { /* all ::before pseudo elements */ content: ""; display: -moz-box; } -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-start.svg); background-size: 100% 100%; } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before { background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-end.svg); background-size: 100% 100%; } /* For lightweight themes, clip the header image on start, middle, and end. */ -.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); } -.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, -.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); } -.tab-background-middle[visuallyselected=true] { +.tab-background-middle[selected=true] { background-clip: padding-box, padding-box, content-box; background-color: transparent; background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-middle.svg); @@ -2619,7 +2619,7 @@ html|span.ac-emphasize-text-url { /* Selected tab lightweight theme styles. See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(transparent 2px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0.4)); /*, @@ -2628,18 +2628,18 @@ lwtHeader;*/ background-size: var(--tab-stroke-background-size), auto 100%, auto auto; } /* These LWT styles are normally overridden by browser-lightweightTheme.css */ -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { background-image: linear-gradient(transparent 2px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0.4)); } -.tab-background-start[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-end[visuallyselected=true]:-moz-lwtheme::before, -.tab-background-middle[visuallyselected=true]:-moz-lwtheme { +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { background-color: transparent; } /* End selected tab */ /* new tab button border and gradient on hover */ -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]), +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), .tabs-newtab-button:hover { background-image: url(chrome://browser/skin/custom_images/light/tabs/tab-start-hover.svg), url(chrome://browser/skin/custom_images/light/tabs/tab-middle-hover.svg), url(chrome://browser/skin/custom_images/light/tabs/tab-end-hover.svg); background-position: left bottom, 30px bottom, right bottom; @@ -2664,18 +2664,18 @@ lwtHeader;*/ height: 100%; position: absolute; } -.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]), -.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) { +.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { background-image: radial-gradient(farthest-corner at center bottom, white 3%, rgba(186, 221, 251, 0.75) 20%, rgba(127, 179, 255, 0.25) 40%, transparent 70%); background-position: center bottom var(--tab-toolbar-navbar-overlap); background-repeat: no-repeat; background-size: 85% 100%; } -.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([visuallyselected="true"]) { +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { background-position: left bottom var(--tab-toolbar-navbar-overlap); background-size: 34px 100%; } -.tab-label[attention]:not([visuallyselected="true"]) { +.tab-label[attention]:not([selected="true"]) { font-weight: bold; } /* Tab separators */ -- cgit v1.2.3