diff --git a/README.md b/README.md index c87ec2d0..787853af 100644 --- a/README.md +++ b/README.md @@ -9,10 +9,10 @@ [Download Firefox](https://www.mozilla.org/en-US/firefox/all/#product-desktop-release) / [Download WaveFox](https://github.com/QNetITQ/WaveFox/releases) / [WaveFox Nightly](https://github.com/QNetITQ/WaveFox/tree/WaveFox-Nightly)
- WaveFox v1.7.132 + WaveFox v1.7.133 - ##### Minimum Requirements - - Firefox 132 + - Firefox 133 - Windows / MacOS / Linux - Download the `chrome` folder and put it in your user profile folder @@ -73,6 +73,13 @@ ## Optional +### Windows 11/10 Custom Transparency +Install [DWMBlurGlass](https://github.com/Maplespe/DWMBlurGlass). Configure to your liking and activate the keys below. Works only with the system theme. If you just want to enable MicaAlt on Windows 11, see the FAQ. +![изображение](https://github.com/user-attachments/assets/632c972f-b48a-4ca6-8c69-28859e34485b) + +- `browser.theme.windows.accent-color-in-tabs.enabled` +- `userChrome.Windows.Transparency.Enabled` + ### Linux Transparency Requires Linux with transparency support. Works only with the system theme. @@ -128,12 +135,12 @@ By default context menus follow the selected interface density, but it is possib - `userChrome.Menu.Size.Touch.Enabled` ### Lepton Icons (Menu icons) -This is third-party code. I will update this code according to the original source. The first two keys are mandatory. The rest can be turned on arbitrarily or all together. +This is third-party code. I will update this code according to the original source. Unlike other options, these keys can be enabled in any order, or all together. ![изображение](https://user-images.githubusercontent.com/85301851/151192118-0cbdb5a7-a77f-4275-8841-2ac321657c86.png) -- `svg.context-properties.content.enabled` -- `userChrome.Menu.Icons.LeptonIcons.Enabled` +- `svg.context-properties.content.enabled` (Required key) +- `userChrome.Menu.Icons.LeptonIcons.Enabled` (Required key) - `userChrome.icon.panel_full` or `userChrome.icon.panel_photon` - `userChrome.icon.library` - `userChrome.icon.panel` @@ -165,7 +172,7 @@ This is third-party code. I will update this code according to the original sour ![Снимок](https://github.com/QNetITQ/WaveFox/assets/85301851/514cf30d-a417-48cb-bfd1-0e77c9df1bf4) - `userChrome.Tabs.TabsOnBottom.Enabled` -- `browser.tabs.inTitlebar` (Required key. Set the value to 0) +- `browser.tabs.inTitlebar` (Optional key. Set the value to 0) ### One Line ![Снимок](https://github.com/QNetITQ/WaveFox/assets/85301851/05bba314-643d-46f3-a09c-b3ac31f9761d) diff --git a/chrome/modules/horizontal_tabs/Experimental.css b/chrome/modules/horizontal_tabs/Experimental.css new file mode 100644 index 00000000..f2701395 --- /dev/null +++ b/chrome/modules/horizontal_tabs/Experimental.css @@ -0,0 +1,372 @@ +/* ---------------------------------------- Custom properties ---------------------------------------- */ + +@property --wavefox-ft-tab-border-radius +{ + syntax: ""; + inherits: true; + initial-value: 4px; +} + +/* ---------------------------------------- Density ---------------------------------------- */ + +:root +{ + --tab-min-height: 36px !important; + + &[uidensity="compact"] + { + --tab-min-height: 32px !important; + } + + &[uidensity="touch"] + { + --tab-min-height: 40px !important; + } +} + +/* ---------------------------------------- Titlebar ---------------------------------------- */ + +:root[tabsintitlebar] +{ + .browser-titlebar + { + will-change: auto !important; + transition: color var(--inactive-window-transition) !important; + + &:-moz-window-inactive + { + color: color-mix(in srgb, currentColor calc(var(--inactive-titlebar-opacity) * 100%), transparent) !important; + opacity: 1 !important; + } + } +} + +/* ---------------------------------------- Tabs ---------------------------------------- */ + +.tabbrowser-tab +{ + &[pinned] .tab-content + { + padding-inline: calc((var(--tab-min-height) - 16px) / 2) !important; + } + + &:not([pinned]) .tab-content + { + padding-inline: 10px !important; + } + + &[pending] .tab-icon-image + { + filter: saturate(0) !important; + } + + .tab-background + { + border-radius: var(--wavefox-ft-tab-border-radius) !important; + } + + .tab-close-button + { + width: 16px !important; + height: 16px !important; + border-radius: 50% !important; + padding: 2px !important; + margin: 0px !important; + } +} + +/* ---------------------------------------- Indents ---------------------------------------- */ + +#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])) +{ + margin-inline-start: 0px !important; +} + + + + + + + + + + + + + + + + + + + + + + +/* ---------------------------------------- Floating tabs ---------------------------------------- */ + +@media (-moz-bool-pref: "userChrome.Tabs.Option1.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option2.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option3.Enabled") +{ + /* -------------------- Tab shapes -------------------- */ + + @media (-moz-bool-pref: "userChrome.Tabs.Option1.Enabled") + { + :root + { + --wavefox-ft-border-radius: 8px; + } + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option2.Enabled") + { + :root + { + --wavefox-ft-border-radius: 12px; + } + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option3.Enabled") + { + :root + { + --wavefox-ft-border-radius: 50px; + } + } +} + + + + + + + + + + + +/* ---------------------------------------- Attached tabs ---------------------------------------- */ + +@media (-moz-bool-pref: "userChrome.Tabs.Option4.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option5.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") +{ + + +/* ---------------------------------------- Tabs ---------------------------------------- */ + +:root +{ + @media (-moz-bool-pref: "userChrome.Tabs.Option4.Enabled") + { + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option5.Enabled") + { + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled") + { + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 4); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled") + { + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2 - 6px); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled") + { + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled") + { + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") + { + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2); + } + + @media (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") + { + --tab-first-last-inline-margin: calc(var(--tab-min-height) / 2); + } + + /* -------------------- Attached Tabs -------------------- */ + + @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option12.Enabled") or + (-moz-bool-pref: "userChrome.Tabs.Option13.Enabled") + { + --tab-scroll-animation-inline-margin: calc(-1 * var(--tab-first-last-inline-margin)); + --tab-scroll-animation-inline-padding: var(--tab-first-last-inline-margin); + --tab-bg-block-margin: 0px; + --my-tab-inline-padding: 0px; + --tab-separator-offset: 0px; + --pinned-tabs-width-offset: 2px; + } +} + +/* ---------------------------------------- Main Window ---------------------------------------- */ + +:root +{ + --tab-shadow-max-size: 0px !important; + --tab-attention-indicator-position: 50% calc(50% + 12px); + --tabstrip-min-height: auto !important; +} + +/* ---------------------------------------- Nav Bar ---------------------------------------- */ + +#nav-bar +{ + border: none !important; +} + +/* ---------------------------------------- Tabs ---------------------------------------- */ + +.tabbrowser-tab +{ + overflow-clip-margin: var(--tab-min-height) !important; + padding-inline: var(--my-tab-inline-padding) !important; + + &[visuallyselected] + { + color: var(--toolbar-color) !important; + position: relative; + z-index: 2 !important; + + .tab-background + { + background-color: var(--toolbar-bgcolor) !important; + } + } + + &:not([visuallyselected]) + { + color: inherit !important; + + #tabbrowser-tabs[movingtab] & + { + z-index: 0 !important; + } + } + + .tab-background + { + mask-image: var(--left-svg), var(--center-svg), var(--right-svg); + mask-size: auto 100%, calc(100% - var(--tab-min-height) * 2) 100%, auto 100%; + mask-position: left center, center center, right center; + mask-repeat: no-repeat, no-repeat, no-repeat; + box-shadow: none !important; + outline: none !important; + margin-block: var(--tab-bg-block-margin) !important; + margin-inline: calc(-1 * (var(--tab-min-height) / 2)) !important; + border-radius: 0px !important; + pointer-events: none !important; + } +} + +#tabbrowser-tabs[overflow] .tab-drop-indicator +{ + inset-inline-start: var(--tab-first-last-inline-margin) !important; +} + +/* -------------------- Container Indicators -------------------- */ + +.tab-context-line +{ + margin: 0px !important; +} + +/* -------------------- Tab Icon Indicators -------------------- */ + +.tabbrowser-tab:is([image], [pinned]) .tab-content[attention]:not([selected]), +.tab-content[pinned][titlechanged]:not([selected]) +{ + background-position: var(--tab-attention-indicator-position) !important; +} + +/* ---------------------------------------- Tab Bar ---------------------------------------- */ + +#TabsToolbar #search-container +{ + padding-block: 0 !important; +} + +/* ---------------------------------------- Indents ---------------------------------------- */ + +#tabbrowser-tabs:not([overflow]) .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([hidden])), +#tabbrowser-tabs[overflow] .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])), +#tabbrowser-tabs[overflow][haspinnedtabs] +{ + margin-inline-start: var(--tab-first-last-inline-margin) !important; +} + +.tabbrowser-tab:nth-last-child(1 of .tabbrowser-tab:not([hidden])) +{ + margin-inline-end: var(--tab-first-last-inline-margin) !important; +} + +/* ---------------------------------------- Tab Scroll Animation ---------------------------------------- */ + +#tabbrowser-tabs[overflow] .tabbrowser-tab:not([pinned]) +{ + box-sizing: content-box !important; +} + +#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:not([pinned]) +{ + pointer-events: none !important; + box-sizing: content-box !important; + padding-inline: var(--tab-scroll-animation-inline-padding) !important; + margin-inline: var(--tab-scroll-animation-inline-margin) !important; + overflow-clip-margin: 0px !important; +} + +#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:not([pinned]) .tab-stack +{ + pointer-events: auto !important; +} + +#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-child(1 of .tabbrowser-tab:not([pinned], [hidden])) +{ + margin-inline-start: 0px !important; +} + +#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-last-child(1 of .tabbrowser-tab:not([hidden])) +{ + margin-inline-end: 0px !important; +} + + + + + + + + + + + + + + + +} diff --git a/chrome/modules/horizontal_tabs/wavefox_one_line.css b/chrome/modules/horizontal_tabs/wavefox_one_line.css index 716ce882..8fd43b86 100644 --- a/chrome/modules/horizontal_tabs/wavefox_one_line.css +++ b/chrome/modules/horizontal_tabs/wavefox_one_line.css @@ -8,9 +8,14 @@ grid-template-columns: auto minmax(auto, 0%) !important; } - #titlebar + #TabsToolbar { - grid-area: 1 / 1 / span 1 / span 1 !important; + grid-area: 2 / 1 / auto / auto !important; + } + + #nav-bar + { + grid-area: 2 / 2 / auto / auto !important; } } @@ -20,18 +25,18 @@ { grid-template-columns: minmax(auto, 0%) auto !important; } + + #TabsToolbar + { + grid-area: 2 / 2 / auto / auto !important; + } #nav-bar { - grid-area: 1 / 1 / span 1 / span 1 !important; + grid-area: 2 / 1 / auto / auto !important; } } - :root - { - --drag-space: 0px !important; - } - #navigator-toolbox { display: grid !important; @@ -43,6 +48,9 @@ #nav-bar { width: fit-content !important; + background-color: transparent !important; + margin-top: var(--drag-space) !important; + box-shadow: var(--inner-box-shadow) !important; } #urlbar-container, @@ -51,14 +59,9 @@ padding-block: 0px !important; } - #urlbar-container - { - --urlbar-container-height: var(--tab-min-height) !important; - } - /* -------------------- Bookmarks Bar / Notifications -------------------- */ - #navigator-toolbox > *:not(#titlebar, #nav-bar) + #navigator-toolbox > *:not(#TabsToolbar, #nav-bar) { grid-column: 1 / span 2 !important; } @@ -70,68 +73,66 @@ --panel-arrow-offset: 0px !important; } - /* -------------------- Floating Tabs -------------------- */ + /* -------------------- Windows -------------------- */ - @media (-moz-bool-pref: "userChrome.Tabs.Option1.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option2.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option3.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option4.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option5.Enabled") + @media (-moz-platform: windows) { - #TabsToolbar::before + @media (-moz-windows-accent-color-in-titlebar) or (-moz-windows-mica) { - display: none !important; + :root[tabsintitlebar]:not([lwtheme]) #nav-bar + { + color: inherit !important; + --toolbarbutton-icon-fill: currentColor !important; + --toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent) !important; + --toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent) !important; + } } + + :root[tabsintitlebar] #nav-bar + { + will-change: auto !important; + transition: color var(--inactive-window-transition) !important; - #nav-bar + &:-moz-window-inactive + { + color: color-mix(in srgb, currentColor calc(var(--inactive-titlebar-opacity) * 100%), transparent) !important; + } + } + } + + /* -------------------- Linux -------------------- */ + + @media (-moz-platform: linux) + { + :root[tabsintitlebar]:not([lwtheme]) #nav-bar { - margin: var(--tab-block-margin) !important; - border-radius: var(--tab-border-radius) !important; - box-shadow: var(--outer-box-shadow) !important; + color: inherit !important; } - #PersonalToolbar + :root[tabsintitlebar] #nav-bar { - margin-inline: var(--tab-block-margin) !important; - border-radius: var(--tab-border-radius) !important; - box-shadow: var(--outer-box-shadow) !important; - } + will-change: auto !important; + transition: color var(--inactive-window-transition) !important; - #PersonalToolbar[collapsed="false"] - { - margin-bottom: var(--tab-block-margin) !important; + &:-moz-window-inactive + { + color: color-mix(in srgb, currentColor calc(var(--inactive-titlebar-opacity) * 100%), transparent) !important; + } } } + + /* -------------------- MacOS -------------------- */ - /* -------------------- Attached Tabs -------------------- */ - - @media (-moz-bool-pref: "userChrome.Tabs.Option6.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option7.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option8.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option9.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option10.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option11.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option12.Enabled") or - (-moz-bool-pref: "userChrome.Tabs.Option13.Enabled") + @media (-moz-platform: macos) { - #nav-bar + :root[tabsintitlebar] #nav-bar { - position: relative !important; - overflow: visible !important; + will-change: auto !important; + transition: color var(--inactive-window-transition) !important; - &::before + &:-moz-window-inactive { - content: ""; - display: block; - position: absolute; - width: 100%; - height: 100%; - inset-inline-start: 0px; - inset-block-start: 0px; - pointer-events: none; - z-index: 0; - clip-path: inset(0 -4px); - box-shadow: var(--outer-box-shadow); + color: color-mix(in srgb, currentColor calc(var(--inactive-titlebar-opacity) * 100%), transparent) !important; } } } diff --git a/chrome/modules/horizontal_tabs/wavefox_tab_media_icons_and_text.css b/chrome/modules/horizontal_tabs/wavefox_tab_media_icons_and_text.css new file mode 100644 index 00000000..04ba519a --- /dev/null +++ b/chrome/modules/horizontal_tabs/wavefox_tab_media_icons_and_text.css @@ -0,0 +1,131 @@ +/* -------------------- Media Icons -------------------- */ + +.tab-icon-overlay:not([crashed]) +{ + background-color: transparent !important; + border: none !important; + fill: currentColor !important; +} + +.tab-icon-overlay:not([crashed]):hover +{ + background-color: var(--toolbarbutton-hover-background) !important; +} + +.tab-icon-overlay:not([crashed]):hover:active +{ + background-color: var(--toolbarbutton-active-background) !important; +} + +.tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):not([crashed]) .tab-icon-overlay +{ + top: -8px !important; + inset-inline-end: -8px !important; +} + +.tab-icon-overlay[indicator-replaces-favicon], +.tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) +{ + opacity: 1 !important; +} + +.tabbrowser-tab:not([pinned]) .tab-icon-stack > * +{ + margin-inline-end: 10px !important; +} + +.tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):is([soundplaying], [muted], [activemedia-blocked]):not([crashed]) .tab-icon-stack > :not(.tab-icon-overlay) +{ + mask-image: url("svg_files/media/Media.svg"); + mask-size: 16px 16px; +} + +:root:-moz-locale-dir(rtl) .tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):is([soundplaying], [muted], [activemedia-blocked]):not([crashed]) .tab-icon-stack > :not(.tab-icon-overlay) +{ + mask-image: url("svg_files/media/Media_rtl.svg"); + mask-size: 16px 16px; +} + +/* ---------- Picture-In-Picture ---------- */ + +.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack::before +{ + content: ""; + display: block; + position: absolute; + width: 16px; + height: 16px; + background-color: currentColor; + mask-size: 16px 16px; + mask-position: center center; + mask-repeat: no-repeat; +} + +:root:-moz-locale-dir(rtl) .tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack::before +{ + transform: rotateY(180deg); +} + +.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack > :not(.tab-icon-overlay) +{ + position: relative !important; + padding: 2px !important; + inset-inline-start: 8px !important; + top: 8px !important; + mask-image: none !important; + box-sizing: border-box !important; + z-index: 1 !important; +} + +.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before +{ + mask-image: url("svg_files/media/PIP.svg"); +} + +.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before +{ + mask-image: url("svg_files/media/PIP_Sound.svg"); +} + +/* -------------------- Tab Text -------------------- */ + +.tab-label-container +{ + height: var(--tab-min-height) !important; + font-size: 12px !important; +} + +.tab-label +{ + width: 100% !important; + height: 16px !important; + line-height: 16px !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + margin-block: 0px !important; +} + +#tabbrowser-tabs[secondarytext-unsupported] .tab-label +{ + height: var(--tab-min-height) !important; + line-height: var(--tab-min-height) !important; +} + +.tab-secondary-label +{ + width: 100% !important; + height: 16px !important; + line-height: 16px !important; + overflow: hidden !important; + margin-block: 0px !important; + order: -1 !important; +} + +.tab-secondary-label > * +{ + width: 100% !important; + height: 16px !important; + line-height: 16px !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} diff --git a/chrome/modules/horizontal_tabs/wavefox_tab_separators.css b/chrome/modules/horizontal_tabs/wavefox_tab_separators.css index cf36ac61..78f2e705 100644 --- a/chrome/modules/horizontal_tabs/wavefox_tab_separators.css +++ b/chrome/modules/horizontal_tabs/wavefox_tab_separators.css @@ -46,9 +46,9 @@ .tabbrowser-tab:not([hidden]):is([selected], :hover, [multiselected]) .tab-stack::before, .tabbrowser-tab:not([hidden]):is([selected], :hover, [multiselected]) .tab-stack::after, - .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after, - .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab[hidden] + .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after, - .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab[hidden] ~ .tabbrowser-tab[hidden] + .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after + #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after, + #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab[hidden] + .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after, + #tabbrowser-tabs:not([movingtab]) .tabbrowser-tab:not([hidden]):has(+ .tabbrowser-tab[hidden] ~ .tabbrowser-tab[hidden] + .tabbrowser-tab:is([selected], :hover, [multiselected]):not([hidden])) .tab-stack::after { opacity: 0 !important; } diff --git a/chrome/modules/horizontal_tabs/wavefox_tabs.css b/chrome/modules/horizontal_tabs/wavefox_tabs.css index e4981d16..f19da2bc 100644 --- a/chrome/modules/horizontal_tabs/wavefox_tabs.css +++ b/chrome/modules/horizontal_tabs/wavefox_tabs.css @@ -84,6 +84,7 @@ { --tab-shadow-max-size: 0px !important; --tab-attention-indicator-position: 50% calc(50% + 12px); + --tabstrip-min-height: auto !important; } /* ---------------------------------------- Nav Bar ---------------------------------------- */ @@ -97,22 +98,16 @@ :root[tabsintitlebar] { - #titlebar - { - will-change: auto !important; - transition: none !important; - opacity: 1 !important; - } - - .titlebar-color + .browser-titlebar { will-change: auto !important; transition: color var(--inactive-window-transition) !important; - } - &:-moz-window-inactive .titlebar-color - { - color: color-mix(in srgb, currentColor calc(var(--inactive-titlebar-opacity) * 100%), transparent) !important; + &:-moz-window-inactive + { + color: color-mix(in srgb, currentColor calc(var(--inactive-titlebar-opacity) * 100%), transparent) !important; + opacity: 1 !important; + } } } @@ -260,144 +255,6 @@ background-position: var(--tab-attention-indicator-position) !important; } -/* -------------------- Media Icons -------------------- */ - -.tab-icon-overlay:not([crashed]) -{ - background-color: transparent !important; - border: none !important; - border-radius: 50% !important; - color: inherit !important; - fill: currentColor !important; - fill-opacity: 1 !important; - z-index: 1 !important; -} - -.tab-icon-overlay:not([crashed]):hover -{ - background-color: var(--toolbarbutton-hover-background) !important; -} - -.tab-icon-overlay:not([crashed]):hover:active -{ - background-color: var(--toolbarbutton-active-background) !important; -} - -.tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):not([crashed]) .tab-icon-overlay -{ - top: -8px !important; - inset-inline-end: -8px !important; -} - -.tab-icon-overlay[indicator-replaces-favicon], -.tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) -{ - opacity: 1 !important; -} - -.tabbrowser-tab:not([pinned]) .tab-icon-stack > * -{ - margin-inline-end: 10px !important; -} - -.tabbrowser-tab[busy] .tab-icon-overlay -{ - display: none !important; -} - -.tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):is([soundplaying], [muted], [activemedia-blocked]):not([busy], [crashed]) .tab-icon-stack > :not(.tab-icon-overlay) -{ - mask-image: url("svg_files/media/Media.svg"); - mask-size: 16px 16px; -} - -:root:-moz-locale-dir(rtl) .tabbrowser-tab:is([pinned], [image], [sharing], [pictureinpicture]):is([soundplaying], [muted], [activemedia-blocked]):not([busy], [crashed]) .tab-icon-stack > :not(.tab-icon-overlay) -{ - mask-image: url("svg_files/media/Media_rtl.svg"); -} - -/* ---------- Picture-In-Picture ---------- */ - -.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack::before -{ - content: ""; - display: block; - position: absolute; - width: 16px; - height: 16px; - background-color: currentColor; - mask-size: 16px 16px; - mask-position: center center; - mask-repeat: no-repeat; -} - -:root:-moz-locale-dir(rtl) .tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack::before -{ - transform: rotateY(180deg); -} - -.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]) .tab-icon-stack > :not(.tab-icon-overlay) -{ - position: relative !important; - padding: 2px !important; - inset-inline-start: 8px !important; - top: 8px !important; - mask-image: none !important; - box-sizing: border-box !important; - z-index: 1 !important; -} - -.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before -{ - mask-image: url("svg_files/media/PIP.svg"); -} - -.tabbrowser-tab[pictureinpicture]:not([busy], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-stack::before -{ - mask-image: url("svg_files/media/PIP_Sound.svg"); -} - -/* -------------------- Tab Text -------------------- */ - -.tab-label-container -{ - height: var(--tab-min-height) !important; -} - -.tab-label -{ - width: 100% !important; - height: 16px !important; - line-height: 16px !important; - overflow: hidden !important; - text-overflow: ellipsis !important; - margin-block: 0px !important; -} - -#tabbrowser-tabs[secondarytext-unsupported] .tab-label -{ - height: var(--tab-min-height) !important; - line-height: var(--tab-min-height) !important; -} - -.tab-secondary-label -{ - width: 100% !important; - height: 16px !important; - line-height: 16px !important; - margin-block: 0px !important; - order: -1 !important; -} - -.tab-secondary-label > * -{ - width: 100% !important; - height: 16px !important; - line-height: 16px !important; - overflow: hidden !important; - text-overflow: ellipsis !important; -} - /* ---------------------------------------- Tab Bar ---------------------------------------- */ #TabsToolbar #search-container diff --git a/chrome/modules/horizontal_tabs/wavefox_tabs_on_bottom.css b/chrome/modules/horizontal_tabs/wavefox_tabs_on_bottom.css index c0e87417..5b1a63de 100644 --- a/chrome/modules/horizontal_tabs/wavefox_tabs_on_bottom.css +++ b/chrome/modules/horizontal_tabs/wavefox_tabs_on_bottom.css @@ -2,17 +2,19 @@ { /* -------------------- Title Bar -------------------- */ - #titlebar + #TabsToolbar { - order: 2 !important; + order: 3 !important; } #toolbar-menubar { - --toolbarbutton-icon-fill: inherit !important; + order: 0 !important; background-color: var(--toolbar-bgcolor) !important; color: var(--toolbar-color) !important; - appearance: none !important; + --toolbarbutton-icon-fill: inherit !important; + --toolbarbutton-hover-background: inherit !important; + --toolbarbutton-active-background: inherit !important; } #TabsToolbar::before @@ -24,14 +26,14 @@ #nav-bar { - order: 0 !important; + order: 1 !important; } /* -------------------- Personal Bar -------------------- */ #PersonalToolbar { - order: 1 !important; + order: 2 !important; } /* -------------------- Tabs -------------------- */ @@ -45,4 +47,21 @@ { transform: rotateX(180deg); } + + /* -------------------- Window Control Buttons -------------------- */ + + #TabsToolbar > :is(.titlebar-buttonbox-container, .titlebar-spacer) + { + display: none !important; + } + + #toolbar-menubar[inactive] ~ #nav-bar > .titlebar-buttonbox-container + { + display: block !important; + } + + :root[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[inactive] ~ #nav-bar > .titlebar-spacer[type="post-tabs"] + { + display: block !important; + } } diff --git a/chrome/modules/horizontal_tabs/wavefox_toolbar_buttons.css b/chrome/modules/horizontal_tabs/wavefox_toolbar_buttons.css index 9c7d3c33..7082e7a4 100644 --- a/chrome/modules/horizontal_tabs/wavefox_toolbar_buttons.css +++ b/chrome/modules/horizontal_tabs/wavefox_toolbar_buttons.css @@ -59,9 +59,15 @@ counter-increment: TabCounter; } +#tabbrowser-tabs ~ #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon +{ + opacity: 0 !important; +} + #tabbrowser-tabs ~ #alltabs-button::after { content: counter(TabCounter); + position: absolute; } /* ---------------------------------------- Tab Bar ---------------------------------------- */ @@ -94,5 +100,5 @@ .toolbarbutton-1:has(+ #tabbrowser-tabs[overflow][haspinnedtabs]) { margin-inline-end: calc(-1 * var(--tab-first-last-inline-margin) / 2) !important; - z-index: 0 !important; + z-index: 1 !important; } diff --git a/chrome/modules/horizontal_tabs/wavefox_toolbar_transparency.css b/chrome/modules/horizontal_tabs/wavefox_toolbar_transparency.css index 22e1c48c..ffb6d110 100644 --- a/chrome/modules/horizontal_tabs/wavefox_toolbar_transparency.css +++ b/chrome/modules/horizontal_tabs/wavefox_toolbar_transparency.css @@ -4,10 +4,11 @@ { :root:not([lwtheme]) { + --outer-box-shadow: initial !important; + --inner-box-shadow: initial !important; + --outer-drop-shadow: initial !important; --toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent) !important; --toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent) !important; - --urlbar-box-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent) !important; - --urlbar-box-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent) !important; @media (-moz-bool-pref: "userChrome.Toolbar.Transparency.Low.Enabled") { @@ -29,12 +30,7 @@ #PersonalToolbar { background-color: color-mix(in srgb, var(--toolbar-bgcolor), transparent var(--toolbar-transparency-level)) !important; - } - - #urlbar:not([focused], [open]) > #urlbar-background, - #searchbar:not(:focus-within) - { - background-color: color-mix(in srgb, var(--toolbar-field-background-color), transparent var(--toolbar-transparency-level)) !important; + background-image: none !important; } } } @@ -46,28 +42,16 @@ --toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent) !important; --toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent) !important; - #nav-bar - { - --toolbar-field-background-color: var(--toolbar-bgcolor) !important; - --toolbar-field-color: var(--toolbar-color) !important; - --toolbar-field-border-color: transparent !important; - background-color: transparent !important; - } - - #urlbar:not([focused], [open]) > #urlbar-background, - #searchbar:not(:focus-within) - { - box-shadow: var(--outer-box-shadow) !important; - } - + #nav-bar, #PersonalToolbar { background-color: transparent !important; } - #TabsToolbar::before + #TabsToolbar::before, + #nav-bar { - display: none !important; + box-shadow: none !important; } } } diff --git a/chrome/modules/horizontal_tabs/wavefox_transparency_on_windows.css b/chrome/modules/horizontal_tabs/wavefox_transparency_on_windows.css new file mode 100644 index 00000000..34d7e44d --- /dev/null +++ b/chrome/modules/horizontal_tabs/wavefox_transparency_on_windows.css @@ -0,0 +1,19 @@ +@media (-moz-bool-pref: "userChrome.Windows.Transparency.Enabled") +{ + :root[tabsintitlebar]:not([lwtheme]) + { + background-color: transparent !important; + + #navigator-toolbox + { + background-color: transparent !important; + border-top-color: transparent !important; + } + + &:not([inFullscreen]) .browser-titlebar > .titlebar-buttonbox-container + { + align-items: start !important; + opacity: 0 !important; + } + } +} diff --git a/chrome/userChrome.css b/chrome/userChrome.css index c163ce80..405a91ef 100644 --- a/chrome/userChrome.css +++ b/chrome/userChrome.css @@ -1,20 +1,22 @@ -@layer BasicPriority, HighPriority, VeryHighPriority; +@layer BasicPriority, HighPriority, VeryHighPriority; /* ---------- Horizontal Tabs ---------- */ -@import "modules/horizontal_tabs/wavefox_tab_shapes.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_tabs.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_drag_space.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_selected_tab_indicator.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_toolbar_transparency.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_tab_shadows.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_tab_separators.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_tabs_on_bottom.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_one_line.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_toolbar_buttons.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_context_menu_densities.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); -@import "modules/horizontal_tabs/wavefox_rounded_web_page.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.revamp"); -@import "modules/horizontal_tabs/wavefox_transparency_on_linux.css" layer(BasicPriority) /* supports() */ (-moz-platform: linux); -@import "Lepton_Icons/icons/Lepton_Icons.css" layer(BasicPriority) /* supports() */ (-moz-bool-pref: "userChrome.Menu.Icons.LeptonIcons.Enabled"); +@import "modules/horizontal_tabs/wavefox_tab_shapes.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_tabs.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_drag_space.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_selected_tab_indicator.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_toolbar_transparency.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_tab_shadows.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_tab_separators.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_tabs_on_bottom.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_one_line.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_toolbar_buttons.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_context_menu_densities.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_tab_media_icons_and_text.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@import "modules/horizontal_tabs/wavefox_rounded_web_page.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.revamp"); +@import "modules/horizontal_tabs/wavefox_transparency_on_linux.css" layer(BasicPriority) /* supports() */ (-moz-platform: linux); +@import "modules/horizontal_tabs/wavefox_transparency_on_windows.css" layer(BasicPriority) /* supports() */ (-moz-platform: windows); +@import "Lepton_Icons/icons/Lepton_Icons.css" layer(BasicPriority) /* supports() */ (-moz-bool-pref: "userChrome.Menu.Icons.LeptonIcons.Enabled"); /* ---------------------------------------- Third-party styles (Maximum priority) ---------------------------------------- */