diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss index 07c4636..8f6f41e 100644 --- a/src/compatibility/_os.scss +++ b/src/compatibility/_os.scss @@ -40,6 +40,12 @@ background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Original: -moz-menuhover */ } + menulist > menupopup > menuitem[_moz-menuactive="true"], + menulist > menupopup > menu[_moz-menuactive="true"] { + background-color: highlight !important; + color: highlighttext !important; + } + #PlacesToolbar menu, #PlacesToolbar menuitem, #BMB_bookmarksPopup menu, diff --git a/src/padding/_menu.scss b/src/padding/_menu.scss index b4151d0..4f7d83a 100644 --- a/src/padding/_menu.scss +++ b/src/padding/_menu.scss @@ -13,6 +13,11 @@ menupopup > menu { padding-block: var(--menu-padding) !important; } +#ContentSelectDropdown > menupopup > menucaption, +#ContentSelectDropdown > menupopup > menuitem { + padding-block: 0 !important; +} + @include OS($mac) { :root:not([uidensity="touch"]) .menu-text, :root:not([uidensity="touch"]) .menu-iconic-text { diff --git a/src/padding/_tabbar_height.scss b/src/padding/_tabbar_height.scss index b7c437a..eb11973 100644 --- a/src/padding/_tabbar_height.scss +++ b/src/padding/_tabbar_height.scss @@ -1,9 +1,5 @@ /* Toolbar Height */ @include NotOption($tabPhotonLikePadding) { - :root:not([uidensity="touch"]) #TabsToolbar { - --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ - } - :root:not([uidensity]) #TabsToolbar { --tab-min-height: 36px !important; /* 38px -> 36px */ } @@ -13,23 +9,15 @@ } @include Option($tabPhotonLikePadding) { - #TabsToolbar { - --tab-min-height: 33px !important; - --toolbarbutton-inner-padding: unset !important; + tabbrowser-arrowscrollbox { + --tabbar-max-height: 33px; + max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar)); } - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px !important; + :root[uidensity="compact"] #tabbrowser-arrowscrollbox { + --tabbar-max-height: 29px; } - :root[uidensity="touch"] #TabsToolbar { - --tab-min-height: 41px !important; - } - #tabbrowser-tabs, - #tabbrowser-arrowscrollbox, - #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { - min-height: var(--tab-min-height) !important; - } - #tabbrowser-arrowscrollbox { - height: var(--tab-min-height); + :root[uidensity="touch"] #tabbrowser-arrowscrollbox { + --tabbar-max-height: 45px; } /* Top Margin */ @@ -40,17 +28,14 @@ } @include Option($tabLeptonLikePadding) { - .toolbar-items, - .tabbrowser-tab { + #tabbrowser-arrowscrollbox { --tabbar-max-height: 38px; max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar)); } - :root[uidensity="compact"] .toolbar-items, - :root[uidensity="compact"] .tabbrowser-tab { - --tabbar-max-height: 36px; + :root[uidensity="compact"] #tabbrowser-arrowscrollbox { + --tabbar-max-height: 32px; } - :root[uidensity="touch"] .toolbar-items, - :root[uidensity="touch"] .tabbrowser-tab { + :root[uidensity="touch"] #tabbrowser-arrowscrollbox { --tabbar-max-height: 45px; } } diff --git a/src/tabbar/selected_tab/_bottom_rounded_corner.scss b/src/tabbar/selected_tab/_bottom_rounded_corner.scss index 1ed3f26..1aa2ee4 100644 --- a/src/tabbar/selected_tab/_bottom_rounded_corner.scss +++ b/src/tabbar/selected_tab/_bottom_rounded_corner.scss @@ -19,7 +19,10 @@ /* Color */ fill: var(--toolbar-bgcolor) !important; - stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important; + stroke: var( + --tab-line-color, + var(--tabs-border-color, rgba(128, 128, 142, 0.9)) + ) !important; -moz-context-properties: fill, stroke !important; /* Image */ @@ -27,8 +30,16 @@ background-repeat: no-repeat; background-position-y: bottom; } -:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, -:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { +:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + tab[visuallyselected] + > stack:-moz-lwtheme::before, +:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + tab[visuallyselected] + > stack:-moz-lwtheme::after { /* As Selected Tab - Box Shadow */ stroke: var(--toolbar-color) !important; } diff --git a/src/tabbar/selected_tab/_box_shadow.scss b/src/tabbar/selected_tab/_box_shadow.scss index 4b433a1..c22c26c 100644 --- a/src/tabbar/selected_tab/_box_shadow.scss +++ b/src/tabbar/selected_tab/_box_shadow.scss @@ -15,6 +15,47 @@ box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; } +/* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ +#TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))), + 0 0 4px rgba(128, 128, 142, 0.5) !important; +} + +#TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important; +} + +/* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border + around the tab to help themes that are dependent on tab_line to show the selected tab. */ +:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]) + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + box-shadow: 0 0 0 1px + var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))), + 0 0 4px rgba(128, 128, 142, 0.5) !important; +} + +:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + box-shadow: 0 0 0 1px + var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important; +} + /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; diff --git a/src/theme/_proton_color.scss b/src/theme/_proton_color.scss index 898973a..e5a5462 100644 --- a/src/theme/_proton_color.scss +++ b/src/theme/_proton_color.scss @@ -49,8 +49,12 @@ --in-content-table-background: #f8f8fa; --in-content-table-border-color: var(--in-content-box-border-color); /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */ - --in-content-table-header-background: var(--in-content-primary-button-background); /* Legacy: #0a84ff; rgb(5, 64, 150); */ - --in-content-table-header-color: var(--in-content-primary-button-text-color); /* Legacy: #ffffff; var(--in-content-page-color); */ + --in-content-table-header-background: var( + --in-content-primary-button-background + ); /* Legacy: #0a84ff; rgb(5, 64, 150); */ + --in-content-table-header-color: var( + --in-content-primary-button-text-color + ); /* Legacy: #ffffff; var(--in-content-page-color); */ --in-content-sidebar-width: 240px; --dialog-warning-text-color: var(--red-60); diff --git a/src/theme/proton_chrome/_proton_commons.scss b/src/theme/proton_chrome/_proton_commons.scss index 40f531f..617d6e8 100644 --- a/src/theme/proton_chrome/_proton_commons.scss +++ b/src/theme/proton_chrome/_proton_commons.scss @@ -357,7 +357,10 @@ height: 12px !important; } - dropmarker::part(icon) { + /* dropmarker::part(icon) + * ::part is not apply chrome + */ + dropmarker[exportparts="icon: dropmarker-icon"] { list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important; -moz-context-properties: fill !important; fill: currentColor !important; diff --git a/src/theme/system_default_theme/_mac.scss b/src/theme/system_default_theme/_mac.scss index 81b3a77..49d1640 100644 --- a/src/theme/system_default_theme/_mac.scss +++ b/src/theme/system_default_theme/_mac.scss @@ -177,7 +177,7 @@ /*- Toolbar ----------------------------------------------------------------*/ :root:not(:-moz-lwtheme) #navigator-toolbox, :root[lwt-default-theme-in-dark-mode] #navigator-toolbox { - appearance: auto !important; + background-color: var(--mac-bgcolor) !important; } :root:not(:-moz-lwtheme) #titlebar { diff --git a/src/theme/system_default_theme/_win10.scss b/src/theme/system_default_theme/_win10.scss index 66f7a19..a023ed0 100644 --- a/src/theme/system_default_theme/_win10.scss +++ b/src/theme/system_default_theme/_win10.scss @@ -292,11 +292,11 @@ > .tab-stack > .tab-background[multiselected]:not([selected]), :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #tabbrowser-tabs:not([movingtab]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab - > .tab-stack - > .tab-background[multiselected]:not([selected]) { + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]) { background-image: linear-gradient( color-mix(in srgb, currentColor 11%, transparent), color-mix(in srgb, currentColor 11%, transparent)