diff --git a/chrome/content/newtab.css b/chrome/content/newtab.css index 9a631a0..8d8addd 100644 --- a/chrome/content/newtab.css +++ b/chrome/content/newtab.css @@ -230,7 +230,6 @@ background-position: center !important; background-size: cover !important; background-attachment: fixed !important; - transition: background 0.25s ease !important; } body[lwt-newtab][lwt-newtab-brighttext] { diff --git a/chrome/global/colors.css b/chrome/global/colors.css index e343f21..2fdbcaf 100644 --- a/chrome/global/colors.css +++ b/chrome/global/colors.css @@ -65,6 +65,8 @@ --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor); --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor); --uc-private-browding-indicator-text: var(--button-primary-color); + --tab-icon-overlay-stroke: #fff !important; + --tab-icon-overlay-fill: #252525 !important; } /* dark */ @@ -131,6 +133,8 @@ --uc-private-browding-indicator-hover: var(--button-primary-hover-bgcolor); --uc-private-browding-indicator-active: var(--button-primary-active-bgcolor); --uc-private-browding-indicator-text: var(--button-primary-color); + --tab-icon-overlay-stroke: #4b4b4b !important; + --tab-icon-overlay-fill: #fff !important; } #urlbar { diff --git a/chrome/global/popup.css b/chrome/global/popup.css index 6ad7f7b..93db1af 100644 --- a/chrome/global/popup.css +++ b/chrome/global/popup.css @@ -42,7 +42,7 @@ /* app menu */ .addon-banner-item, .panel-banner-item { - margin: 0 4px 4px !important; + margin: 2px 4px 2px !important; padding-inline: 4px 12px !important; padding-block: var(--arrowpanel-menuitem-padding-block) !important; border-radius: var(--arrowpanel-menuitem-border-radius) !important; diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index 62babfa..1da2b43 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -92,13 +92,13 @@ --uc-tab-corner-bg: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } -.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) { +.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) { background-color: color-mix(in srgb, currentColor 8%, transparent) !important; --uc-tab-corner-bg: color-mix(in srgb, currentColor 8%, transparent) !important; } @supports not -moz-bool-pref("uc.tweak.floating-tabs") { - :root:not([lwtheme-brighttext="true"]) .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"], [multiselected]) { + :root:not([lwtheme-brighttext="true"]) .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected="true"], [multiselected]) { background-color: color-mix(in srgb, white 30%, transparent) !important; --uc-tab-corner-bg: color-mix(in srgb, white 30%, transparent) !important; } @@ -182,7 +182,7 @@ opacity: 1 !important; } -.tab-icon-overlay:not([pinned]) { +#tabbrowser-tabs:not([closebuttons="activetab"]) .tab-icon-overlay:not([pinned]) { margin-inline: 22px 6px !important; } @@ -190,10 +190,52 @@ margin-inline: 0px 6px !important; } +/* move sound playing icon on top of favicon when there isn't enough space */ +.tab-icon-overlay:not([crashed]):is([pinned], [sharing]), +#tabbrowser-tabs[closebuttons="activetab"] .tab-icon-overlay:not([crashed]) { + top: -5.5px !important; + inset-inline-end: -6px !important; +} + +#tabbrowser-tabs[closebuttons="activetab"] :is( + .tab-icon-overlay[soundplaying]:not([crashed]), + .tab-icon-overlay[muted]:not([crashed]), + .tab-icon-overlay[activemedia-blocked]:not([crashed]) +) { + stroke: var(--tab-icon-overlay-stroke, white) !important; + color: var(--tab-icon-overlay-fill, black) !important; + fill-opacity: 1 !important; +} + +#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is( + .tab-icon-overlay[soundplaying]:not([crashed]), + .tab-icon-overlay[muted]:not([crashed]), + .tab-icon-overlay[activemedia-blocked]:not([crashed]) +) { + stroke: var(--tab-icon-overlay-stroke, black) !important; + color: var(--tab-icon-overlay-fill, white) !important; +} + +#tabbrowser-tabs[closebuttons="activetab"] :is( + .tab-icon-overlay:not([crashed])[soundplaying]:hover, + .tab-icon-overlay:not([crashed])[muted]:hover, + .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover +) { + background-color: var(--tab-icon-overlay-stroke, white) !important; +} + +#TabsToolbar[brighttext] #tabbrowser-tabs[closebuttons="activetab"] :is( + .tab-icon-overlay:not([crashed])[soundplaying]:hover, + .tab-icon-overlay:not([crashed])[muted]:hover, + .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover +) { + background-color: var(--tab-icon-overlay-stroke, black) !important; +} + .tab-icon-overlay[soundplaying]:not([crashed]), .tab-icon-overlay[muted]:not([crashed]), .tab-icon-overlay[activemedia-blocked]:not([crashed]) { - border-radius: 2px !important; + border-radius: 4px !important; padding: 0 !important; } @@ -216,7 +258,7 @@ #TabsToolbar #tabs-newtab-button>.toolbarbutton-icon, #TabsToolbar #alltabs-button>.toolbarbutton-badge-stack, -#TabsToolbar #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] ~ #new-tab-button>.toolbarbutton-icon { +#TabsToolbar #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"]~#new-tab-button>.toolbarbutton-icon { padding: var(--uc-toolbarbutton-inner-padding) !important; width: calc(2 * var(--uc-toolbarbutton-inner-padding) + 16px) !important; } @@ -325,11 +367,11 @@ toolbarbutton[part="scrollbutton-down"] { padding-inline-start: 6px !important; } -#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox { +#tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox { margin-inline-start: 8px !important; } -#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { +#tabbrowser-tabs[positionpinnedtabs]>#tabbrowser-arrowscrollbox>.tabbrowser-tab[pinned] { clip-path: inset(-4px -4px 0) !important; }