diff --git a/README.md b/README.md index b8c37acb..7785c0bf 100644 --- a/README.md +++ b/README.md @@ -6,13 +6,13 @@ ## Installation -[Download Firefox](https://www.mozilla.org/en-US/firefox/all/#product-desktop-release) / [Download WaveFox](https://github.com/QNetITQ/WaveFox/releases) +[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.130+ + WaveFox v1.7.131 - ##### Minimum Requirements - - Firefox 130+ + - Firefox 131 - Windows / MacOS / Linux - Download the `chrome` folder and put it in your user profile folder @@ -94,7 +94,6 @@ Works only with the system theme. - `userChrome.Toolbar.Transparency.VeryHigh.Enabled` ### Tab Bar Shadows -Incompatible with AMO themes. ![изображение](https://user-images.githubusercontent.com/85301851/152011749-4d5619b3-0fd8-40f9-a3dc-96be31839971.png) ##### Shadows (Light Theme) @@ -102,14 +101,14 @@ Incompatible with AMO themes. - `userChrome.LightTheme.Tabs.Shadows.Saturation.Medium.Enabled` - `userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled` - `userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled` - - `userChrome.LightTheme.Tabs.Shadows.Blur.Low.Enabled` (Shadow like border) + - `userChrome.LightTheme.Tabs.Borders.Enabled` (Shadow like border) ##### Shadows (Dark Theme) - `userChrome.DarkTheme.Tabs.Shadows.Saturation.Low.Enabled` - `userChrome.DarkTheme.Tabs.Shadows.Saturation.Medium.Enabled` - `userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled` - `userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled` - - `userChrome.DarkTheme.Tabs.Shadows.Blur.Low.Enabled` (Shadow like border) + - `userChrome.DarkTheme.Tabs.Borders.Enabled` (Shadow like border) ### Tab Separators ![изображение](https://user-images.githubusercontent.com/85301851/152351312-f6ad4578-e7d5-40b7-8b2d-49388a750f54.png) @@ -129,7 +128,7 @@ 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. +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. ![изображение](https://user-images.githubusercontent.com/85301851/151192118-0cbdb5a7-a77f-4275-8841-2ac321657c86.png) @@ -174,6 +173,11 @@ This is third-party code. I will update this code according to the original sour - `userChrome.OneLine.TabBarFirst.Enabled` - `userChrome.OneLine.NavBarFirst.Enabled` +### Rounded Web Page (Experimentally) +![изображение](https://github.com/user-attachments/assets/93ffab37-bbe5-4b17-993d-cc084fd341ad) + +- `userChrome.WebPage.Rounding.Enabled` +
diff --git a/chrome/modules/horizontal_tabs/wavefox_rounded_web_page b/chrome/modules/horizontal_tabs/wavefox_rounded_web_page new file mode 100644 index 00000000..993d7f28 --- /dev/null +++ b/chrome/modules/horizontal_tabs/wavefox_rounded_web_page @@ -0,0 +1,13 @@ +@media (-moz-bool-pref: "userChrome.WebPage.Rounding.Enabled") +{ + :root:not([inFullscreen], [inDOMFullscreen]) #browser > #tabbrowser-tabbox + { + margin: 8px !important; + filter: var(--outer-drop-shadow) !important; + + #tabbrowser-tabpanels + { + clip-path: xywh(0 0 100% 100% round 8px) !important; + } + } +} diff --git a/chrome/modules/horizontal_tabs/wavefox_selected_tab_indicator.css b/chrome/modules/horizontal_tabs/wavefox_selected_tab_indicator.css index 49fdb40a..1bcbee58 100644 --- a/chrome/modules/horizontal_tabs/wavefox_selected_tab_indicator.css +++ b/chrome/modules/horizontal_tabs/wavefox_selected_tab_indicator.css @@ -2,11 +2,11 @@ { .tabbrowser-tab[visuallyselected][usercontextid] .tab-background { - box-shadow: inset 0 -2px 0 var(--tab-loading-fill) !important; + box-shadow: inset 0 -2px 0 var(--tab-selected-outline-color) !important; } .tabbrowser-tab[visuallyselected]:not([usercontextid]) .tab-background { - box-shadow: inset 0 2px 0 var(--tab-loading-fill) !important; + box-shadow: inset 0 2px 0 var(--tab-selected-outline-color) !important; } } diff --git a/chrome/modules/horizontal_tabs/wavefox_tab_shadows.css b/chrome/modules/horizontal_tabs/wavefox_tab_shadows.css index d42662c9..5e5fe6c9 100644 --- a/chrome/modules/horizontal_tabs/wavefox_tab_shadows.css +++ b/chrome/modules/horizontal_tabs/wavefox_tab_shadows.css @@ -8,7 +8,7 @@ :root { --shadow-blur: 4px; - --shadow-color: rgb(0, 0, 0); + --shadow-color: var(--tab-selected-outline-color); --outer-box-shadow: 0 0 @@ -30,7 +30,7 @@ /* ---------- Blur ---------- */ - @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Shadows.Blur.Low.Enabled") + @media (-moz-bool-pref: "userChrome.LightTheme.Tabs.Borders.Enabled") { --shadow-blur: 2px; } @@ -58,6 +58,20 @@ } } + /* ---------- System Theme / Light Theme ---------- */ + + :root:is(:not([lwtheme]), [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26)"]) + { + --shadow-color: rgb(0,0,0); + } + + /* ---------- AMO Theme ---------- */ + + :root[lwtheme]:not([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26)"]) + { + --shadow-saturation: 100%; + } + /* ---------- Tab Bar ---------- */ #TabsToolbar @@ -84,15 +98,8 @@ .tabbrowser-tab[visuallyselected] { - position: relative; - z-index: 2 !important; filter: var(--outer-drop-shadow); } - - #tabbrowser-tabs[movingtab] .tabbrowser-tab:not([visuallyselected]) - { - z-index: 0 !important; - } } } @@ -106,7 +113,7 @@ :root { --shadow-blur: 4px; - --shadow-color: rgb(0, 0, 0); + --shadow-color: var(--tab-selected-outline-color); --outer-box-shadow: 0 0 @@ -128,7 +135,7 @@ /* ---------- Blur ---------- */ - @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Shadows.Blur.Low.Enabled") + @media (-moz-bool-pref: "userChrome.DarkTheme.Tabs.Borders.Enabled") { --shadow-blur: 2px; } @@ -155,6 +162,20 @@ --shadow-saturation: 100%; } } + + /* ---------- System Theme / Dark Theme ---------- */ + + :root:is(:not([lwtheme]), [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254)"]) + { + --shadow-color: rgb(0,0,0); + } + + /* ---------- AMO Theme ---------- */ + + :root[lwtheme]:not([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254)"]) + { + --shadow-saturation: 100%; + } /* ---------- Tab Bar ---------- */ @@ -182,15 +203,8 @@ .tabbrowser-tab[visuallyselected] { - position: relative; - z-index: 2 !important; filter: var(--outer-drop-shadow); } - - #tabbrowser-tabs[movingtab] .tabbrowser-tab:not([visuallyselected]) - { - z-index: 0 !important; - } } } diff --git a/chrome/modules/horizontal_tabs/wavefox_tabs.css b/chrome/modules/horizontal_tabs/wavefox_tabs.css index 0d11e1d1..14e4f278 100644 --- a/chrome/modules/horizontal_tabs/wavefox_tabs.css +++ b/chrome/modules/horizontal_tabs/wavefox_tabs.css @@ -78,42 +78,6 @@ } } -/* ---------------------------------------- System Theme ---------------------------------------- */ - -@media not (prefers-contrast) -{ - :root:not([lwtheme]) - { - .tabbrowser-tab[visuallyselected] - { - color: var(--toolbar-color) !important; - - .tab-background - { - background-color: var(--toolbar-bgcolor) !important; - } - } - } -} - -/* ---------------------------------------- Light Theme / Dark Theme ---------------------------------------- */ - -: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-tab[visuallyselected] - { - color: var(--toolbar-color) !important; - - .tab-background - { - background-color: var(--toolbar-bgcolor) !important; - } - } -} - /* ---------------------------------------- Main Window ---------------------------------------- */ :root @@ -169,10 +133,44 @@ .tabbrowser-tab { --tab-label-mask-size: 0px !important; - overflow: visible !important; - justify-content: flex-end !important; + overflow-clip-margin: var(--tab-min-height) !important; padding-inline: var(--tab-inline-padding) !important; + &[visuallyselected] + { + color: var(--toolbar-color) !important; + position: relative; + z-index: 2 !important; + + .tab-background + { + --gradient-background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)); + --gradient-background-attachment: fixed; + --gradient-background-size: auto auto; + --gradient-background-position: left top; + --gradient-background-repeat: no-repeat; + + --amo-background-image-1: var(--lwt-header-image, none); + --amo-background-attachment-1: fixed; + --amo-background-size-1: auto auto; + --amo-background-position-1: right top; + --amo-background-repeat-1: no-repeat; + + --amo-background-image-2: var(--lwt-additional-images, none); + --amo-background-attachment-2: fixed, fixed, fixed; + --amo-background-size-2: auto auto, auto auto, auto auto; + --amo-background-position-2: var(--lwt-background-alignment); + --amo-background-repeat-2: var(--lwt-background-tiling); + + background-color: transparent !important; + background-image: var(--gradient-background-image), var(--amo-background-image-1), var(--amo-background-image-2) !important; + background-attachment: var(--gradient-background-attachment), var(--amo-background-attachment-1), var(--amo-background-attachment-2) !important; + background-size: var(--gradient-background-size), var(--amo-background-size-1), var(--amo-background-size-2) !important; + background-position: var(--gradient-background-position), var(--amo-background-position-1), var(--amo-background-position-2) !important; + background-repeat: var(--gradient-background-repeat), var(--amo-background-repeat-1), var(--amo-background-repeat-2) !important; + } + } + &:not([visuallyselected]) { color: inherit !important; @@ -186,6 +184,11 @@ { background-color: var(--toolbarbutton-active-background) !important; } + + #tabbrowser-tabs[movingtab] & + { + z-index: 0 !important; + } } .tab-background @@ -213,9 +216,9 @@ } } -.tab-drop-indicator +#tabbrowser-tabs[overflow] .tab-drop-indicator { - opacity: 0 !important; + inset-inline-start: var(--tab-first-last-inline-margin) !important; } .tabbrowser-tab[pending] .tab-icon-image @@ -434,7 +437,6 @@ 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 !important; overflow-clip-margin: 0px !important; } diff --git a/chrome/userChrome.css b/chrome/userChrome.css index 58627191..1eaed824 100644 --- a/chrome/userChrome.css +++ b/chrome/userChrome.css @@ -1,17 +1,18 @@ @layer BasicPriority, HighPriority, VeryHighPriority; -@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_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_rounded_web_page.css" layer(BasicPriority) /* supports() */ not (-moz-bool-pref: "sidebar.verticalTabs"); +@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"); /* ---------------------------------------- Third-party styles (Maximum priority) ---------------------------------------- */