diff --git a/CREDITS b/CREDITS index 31a0104..b5a5812 100644 --- a/CREDITS +++ b/CREDITS @@ -156,6 +156,11 @@ W: https://gist.github.com/mmis1000/08d8de4bbe70c04423f0b966bcc286b1 C: Copyright (c) 2021 Mmis1000 L: MIT +N: edge-frfox +W: https://github.com/bmFtZQ/edge-frfox +C: Copyright (c) 2021 bmFtZQ +L: MIT + N: Feather W: https://github.com/feathericons/feather C: Copyright (c) 2013-2017 Cole Bemis @@ -246,3 +251,8 @@ N: Waterfox W: https://github.com/WaterfoxCo/Waterfox C: Copyright (c) 2012 Waterfox Limited L: MPL 2.0 + +N: WaveFox +W: https://github.com/QNetITQ/WaveFox +C: Copyright (c) 2021 QNetITQ +L: MIT diff --git a/__tests__/each.test.scss b/__tests__/each.test.scss index 9838760..da35864 100644 --- a/__tests__/each.test.scss +++ b/__tests__/each.test.scss @@ -11,7 +11,7 @@ } } @include expect { - @-moz-document url(about:home) { + @#{-moz-document} url(about:home) { @include example; } } @@ -27,7 +27,7 @@ } } @include expect { - @-moz-document url(about:home), url(about:newtab) { + @#{-moz-document} url(about:home), url(about:newtab) { @include example; } } diff --git a/__tests__/moz_document.test.scss b/__tests__/moz_document.test.scss new file mode 100644 index 0000000..34f479a --- /dev/null +++ b/__tests__/moz_document.test.scss @@ -0,0 +1,59 @@ +@use "true" as *; +@use "example" as *; +@use "../src/utils/moz_document" as *; + +@include test-module("Moz Documents [mix]") { + @include test("simple") { + @include assert { + @include output { + @include moz-document(url "about:downloads") { + @include example; + } + @include moz-document(url-prefix "about:") { + @include example; + } + @include moz-document(regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { + @include example; + } + } + @include expect { + @-moz-document url("about:downloads") { + @include example; + } + @-moz-document url-prefix("about:") { + @include example; + } + @-moz-document regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { + @include example; + } + } + } + } + @include test("multiple") { + @include assert { + @include output { + @include moz-document( + url "about:downloads", + url-prefix "about:", + regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" + ) { + @include example; + } + @include moz-document( + url-prefix "about:cache", + url-prefix "about:checkerboard" + ) { + @include example; + } + } + @include expect { + @-moz-document url("about:downloads"), url-prefix("about:"), regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { + @include example; + } + @-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") { + @include example; + } + } + } + } +} diff --git a/__tests__/option.test.scss b/__tests__/option.test.scss index 5cf2a6d..c86389f 100644 --- a/__tests__/option.test.scss +++ b/__tests__/option.test.scss @@ -32,6 +32,48 @@ } } } + + @include test("simple `and`") { + @include assert { + @include output { + @include option.Option("userChrome.tab.photon" "userChrome.padding.photon") { + @include example; + } + } + @include expect { + @supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) { + @include example; + } + } + } + } + + @include test("multiple `and`") { + @include assert { + @include output { + @include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow") { + @include example; + } + @include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow", "userChrome.icon.panel_full") { + @include example; + } + @include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow" "userChrome.icon.panel_full") { + @include example; + } + } + @include expect { + @supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or -moz-bool-pref("userChrome.tab.box_shadow") { + @include example; + } + @supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or -moz-bool-pref("userChrome.tab.box_shadow") or -moz-bool-pref("userChrome.icon.panel_full") { + @include example; + } + @supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or (-moz-bool-pref("userChrome.tab.box_shadow") and -moz-bool-pref("userChrome.icon.panel_full")) { + @include example; + } + } + } + } } @include test-module("If not exist pref [mx]") { @@ -50,5 +92,61 @@ } } - // Need multiple test + @include test("multiple") { + @include assert { + @include output { + @include option.NotOption("userChrome.tab.photon", "userChrome.padding.photon") { + @include example; + } + } + @include expect { + @supports (not -moz-bool-pref("userChrome.tab.photon")) or (not -moz-bool-pref("userChrome.padding.photon")) { + @include example; + } + } + } + } + + // @include test("simple `and`") { + // @include assert { + // @include output { + // @include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon") { + // @include example; + // } + // } + // @include expect { + // // top level parens + // @supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) { + // @include example; + // } + // } + // } + // } + + @include test("multiple `and`") { + @include assert { + @include output { + @include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow") { + @include example; + } + @include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow", "userChrome.icon.panel_full") { + @include example; + } + @include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow" "userChrome.icon.panel_full") { + @include example; + } + } + @include expect { + @supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or (not -moz-bool-pref("userChrome.tab.box_shadow")) { + @include example; + } + @supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or (not -moz-bool-pref("userChrome.tab.box_shadow")) or (not -moz-bool-pref("userChrome.icon.panel_full")) { + @include example; + } + @supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or ((not -moz-bool-pref("userChrome.tab.box_shadow")) and (not -moz-bool-pref("userChrome.icon.panel_full"))) { + @include example; + } + } + } + } } diff --git a/css/leptonChrome.css b/css/leptonChrome.css index fb40810..8c8358d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace html "http://www.w3.org/1999/xhtml"; /** Default Theme - Contrast **************************************************/ @@ -90,7 +91,8 @@ } } /*= Tab Separator Color ======================================================*/ - #TabsToolbar { + #TabsToolbar, + #nav-bar { --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent); /* 60% at v105 */ } /*= Light Weight Theme =======================================================*/ @@ -118,8 +120,8 @@ } /* Navbar Border */ #navigator-toolbox:-moz-lwtheme { - --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */ - --lwt-tabs-border-color: rgba(0, 0, 0, 0.3); + --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4) */ + --lwt-tabs-border-color: rgba(0, 0, 0, 0.4); } /*= Findbar Border Color =====================================================*/ html|input.findbar-textbox { @@ -271,13 +273,13 @@ } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { - menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"], - menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"] { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover 5%, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover 60%, transparent) !important; } - menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"][disabled="true"], - menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"][disabled="true"] { + menu[_moz-menuactive="true"][disabled="true"], + menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 5%, transparent) !important; border-color: color-mix(in srgb, currentColor 60%, transparent) !important; } @@ -293,13 +295,13 @@ } } @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { - menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"], - menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"] { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover 17%, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover 80%, transparent) !important; } - menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"][disabled="true"], - menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"][disabled="true"] { + menu[_moz-menuactive="true"][disabled="true"], + menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 17%, transparent) !important; border-color: color-mix(in srgb, currentColor 80%, transparent) !important; } @@ -307,13 +309,17 @@ /*= Windows 10 - Native Menu Active Color =====================================*/ @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { @media not (-moz-windows-non-native-menus) { - menu[_moz-menuactive="true"], - menuitem[_moz-menuactive="true"] { + menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menu[_moz-menuactive="true"], + menupopup:not([placespopup="true"]) menu[_moz-menuactive="true"], + menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menuitem[_moz-menuactive="true"], + menupopup:not([placespopup="true"]) menuitem[_moz-menuactive="true"] { background-color: #91c9f7 !important; border-color: transparent !important; } - menu[_moz-menuactive="true"][disabled="true"], - menuitem[_moz-menuactive="true"][disabled="true"] { + menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menu[_moz-menuactive="true"][disabled="true"], + menupopup:not([placespopup="true"]) menu[_moz-menuactive="true"][disabled="true"], + menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menuitem[_moz-menuactive="true"][disabled="true"], + menupopup:not([placespopup="true"]) menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 9%, transparent) !important; border-color: transparent !important; } @@ -1624,13 +1630,7 @@ /*= Proton Theme Mode ========================================================*/ @supports -moz-bool-pref("userChrome.theme.proton_chrome") { /*= Proton Commons ===========================================================*/ - @-moz-document url("chrome://global/content/commonDialog.xhtml"), - url("chrome://pippki/content/editcacert.xhtml"), - url("chrome://pippki/content/deletecert.xhtml"), - url("chrome://pippki/content/exceptionDialog.xhtml"), - url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), - url("chrome://global/content/appPicker.xhtml"), - url("chrome://browser/content/pageinfo/pageInfo.xhtml") + @-moz-document url("chrome://global/content/commonDialog.xhtml"), url("chrome://pippki/content/editcacert.xhtml"), url("chrome://pippki/content/deletecert.xhtml"), url("chrome://pippki/content/exceptionDialog.xhtml"), url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), url("chrome://global/content/appPicker.xhtml"), url("chrome://browser/content/pageinfo/pageInfo.xhtml") { /*- Overwrite --------------------------------------------------------------*/ @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { @@ -2196,8 +2196,7 @@ border: 1px solid var(--in-content-table-border-color) !important; border-radius: 4px !important; } - } - /*= Cert Exception Dialog ====================================================*/ + } /*= Cert Exception Dialog ====================================================*/ @-moz-document url("chrome://pippki/content/exceptionDialog.xhtml") { #locationTextBox { @@ -2745,6 +2744,43 @@ } */ } +/*= Panel UI Button Separator ================================================*/ +@supports -moz-bool-pref("userChrome.decoration.panel_button_separator") { + :root:not([chromehidden~="toolbar"]) #PanelUI-button { + margin-inline-start: 3px; + padding-inline-start: 2px; + border-inline-start: 1px solid; + border-image: linear-gradient( + transparent 4px, + var(--toolbarseparator-color) 4px, + var(--toolbarseparator-color) calc(100% - 4px), + transparent calc(100% - 4px) + ); + border-image-slice: 1; + } +} +/*= Panel UI Arrow ===========================================================*/ +@supports -moz-bool-pref("userChrome.decoration.panel_arrow") { + #appMenu-popup { + background-image: url("../icons/panelarrow-vertical.svg"); + background-repeat: no-repeat; + background-position-x: right 10px; + background-position-y: top; + -moz-context-properties: fill, stroke; + fill: var(--panel-background); + stroke: var(--panel-border-color); + } + #appMenu-popup[side="top"] { + margin-top: -8px !important; /* Original: -4px */ + padding-top: 4px; + } + #appMenu-popup[side="bottom"] { + background-image: url("../icons/panelarrow-vertical-reverse.svg"); + background-position-y: bottom; + margin-bottom: -8px !important; /* Original: -4px */ + padding-bottom: 4px; + } +} @media (prefers-reduced-motion: no-preference) { /*= Field Border ===========================================================*/ @supports -moz-bool-pref("userChrome.decoration.field_border") { @@ -2753,6 +2789,15 @@ #searchbar:hover:not(:focus-within) { --toolbar-field-border-color: var(--toolbar-field-focus-border-color); } + @supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target + > #stop-reload-button:hover + ~ #urlbar-container + #urlbar:not([focused="true"]) + > #urlbar-background { + --toolbar-field-border-color: var(--toolbar-field-focus-border-color); + } + } /*- Other Fields -----------------------------------------------------------*/ /* Sidebar */ .sidebar-panel[lwt-sidebar] #search-box:hover, @@ -2883,6 +2928,14 @@ #page-action-buttons > .urlbar-page-action:hover { transition: background-color 1.25s var(--animation-easing-function) !important; } + @supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target > #stop-reload-button .toolbarbutton-icon { + transition: background-color 2.5s var(--animation-easing-function) !important; + } + #nav-bar-customization-target > #stop-reload-button .toolbarbutton-icon:hover { + transition: background-color 1.25s var(--animation-easing-function) !important; + } + } /*- Border - Other Fields --------------------------------------------------*/ #search-box, xul|search-textbox.tabsFilter, @@ -3002,20 +3055,30 @@ } @supports -moz-bool-pref("userChrome.rounding.square_button") { :root { - --toolbarbutton-border-radius: 0 !important; /* Original: 4px */ + --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + } + .toolbarbutton-1, + .toolbarbutton-icon, + .panel-info-button, + .searchbar-engine-one-off-item, + .urlbarView-button, + .urlbarView-tip-button, + .urlbarView-action, + toolbarbutton.bookmark-item:not(.subviewbutton), + #sidebar-switcher-target { + --toolbarbutton-border-radius: 0; /* Original: 4px */ } button, - findbar toolbarbutton { + findbar toolbarbutton, + .notification-button { border-radius: 0 !important; } } -@supports -moz-bool-pref("userChrome.rounding.square_tab") or -moz-bool-pref("userChrome.round.square_button") { +@supports -moz-bool-pref("userChrome.rounding.square_tab") or -moz-bool-pref("userChrome.rounding.square_button") { /* Fix Tab bar button radius */ - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-icon, - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-text, - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-badge-stack, + #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button), .tab-close-button { - --tab-border-radius: var(--toolbarbutton-border-radius) !important; + --tab-border-radius: var(--toolbarbutton-border-radius); } } @supports -moz-bool-pref("userChrome.rounding.square_panel") { @@ -3049,11 +3112,17 @@ html|input { border-radius: 0 !important; } + #urlbar-input-container, #urlbar-background, #searchbar { --toolbarbutton-border-radius: 0; } } +@supports -moz-bool-pref("userChrome.rounding.square_urlView_item") { + .urlbarView-row-inner { + --toolbarbutton-border-radius: 0; + } +} @supports -moz-bool-pref("userChrome.rounding.square_checklabel") { .checkbox-check, xul|*.radio-check { @@ -3232,8 +3301,10 @@ padding-inline: 1px !important; } } - #TabsToolbar:not([multibar]) .tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -1px !important; + @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { + #TabsToolbar:not([multibar]) .tabbrowser-tab:not([last-visible-tab]) { + margin-inline-end: -1px !important; + } } } @supports -moz-bool-pref("userChrome.tab.photon_like_padding") { @@ -3368,20 +3439,22 @@ (var(--tab-min-height) - 18px) / 2 ) !important; /* Prevent overflow pinned tab bottom margin */ } - :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, - #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], - #TabsToolbar:not([multibar]) - #tabbrowser-arrowscrollbox[overflowing="true"] - > .tabbrowser-tab[pinned="true"] - .tab-stack, - #TabsToolbar:not([multibar]) - #tabbrowser-arrowscrollbox[overflowing="true"] - > .tabbrowser-tab[pinned="true"] - .tab-content { - max-height: var(--tab-min-height) !important; /* Force apply height */ - } - :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { - height: var(--tab-min-height) !important; + @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { + :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, + #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #TabsToolbar:not([multibar]) + #tabbrowser-arrowscrollbox[overflowing="true"] + > .tabbrowser-tab[pinned="true"] + .tab-stack, + #TabsToolbar:not([multibar]) + #tabbrowser-arrowscrollbox[overflowing="true"] + > .tabbrowser-tab[pinned="true"] + .tab-content { + max-height: var(--tab-min-height) !important; /* Force apply height */ + } + :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { + height: var(--tab-min-height) !important; + } } } /* Scroll Button - Size Fix */ @@ -3409,10 +3482,29 @@ } } /*= Tool Bar - Button Padding ================================================*/ +@supports -moz-bool-pref("userChrome.padding.toolbar_button") or -moz-bool-pref("userChrome.tab.newtab_button_smaller") { + :root { + --uc-small-toolbarbutton-inner-padding: 6px; + --uc-toolbarbutton-inner-padding-default: 8px; + } + :root[uidensity="compact"] { + --uc-small-toolbarbutton-inner-padding: 4px; + --uc-toolbarbutton-inner-padding-default: 6px; + } + :root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { + --uc-small-toolbarbutton-inner-padding: 9px; + --uc-toolbarbutton-inner-padding-default: 9px; + } +} @supports -moz-bool-pref("userChrome.padding.toolbar_button") { :root[uidensity="compact"] { --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */ } + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + :root { + --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding) !important; + } + } } /*= Nav Bar - Reduce Width ===================================================*/ @supports -moz-bool-pref("userChrome.padding.navbar_width") { @@ -3422,31 +3514,32 @@ } } /*= URL Bar - Reduce Padding =================================================*/ -@supports -moz-bool-pref("userChrome.padding.urlbar") { - :root:not([uidensity="touch"]) #urlbar-container, - :root:not([uidensity="touch"]) #search-container { - padding-block: 3px !important; /* Original: 4px */ - margin-inline: 5px !important; /* Original: 5px */ - } - :root:not([uidensity="compact"]) #urlbar-container, - :root:not([uidensity="compact"]) #search-container { - padding-block: 2px !important; - } - /* spread menu */ - :root:not([uidensity]) .urlbarView-row { - padding-block: 1px !important; /* Original: 2px */ - } - :root[uidensity="compact"] .urlbarView-row { - padding-block: 0px !important; - } - :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { - padding-block: 8px !important; /* Original: 10px */ - } - :root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) { - padding-block: 2px !important; +@supports not -moz-bool-pref("userChrome.urlView.as_commandbar") { + @supports -moz-bool-pref("userChrome.padding.urlbar") { + :root:not([uidensity="touch"]) #urlbar-container, + :root:not([uidensity="touch"]) #search-container { + padding-block: 3px !important; /* Original: 4px */ + } + :root:not([uidensity="compact"]) #urlbar-container, + :root:not([uidensity="compact"]) #search-container { + padding-block: 2px !important; + } + /* spread menu */ + :root:not([uidensity]) .urlbarView-row { + padding-block: 1px !important; /* Original: 2px */ + } + :root[uidensity="compact"] .urlbarView-row { + padding-block: 0px !important; + } + :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { + padding-block: 8px !important; /* Original: 10px */ + } + :root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) { + padding-block: 2px !important; + } } } -@supports -moz-bool-pref("userChrome.padding.urlView_expanding") { +@supports -moz-bool-pref("userChrome.padding.urlView_expanding") or -moz-bool-pref("userChrome.urlView.as_commandbar") { #urlbar[breakout][breakout-extend] { top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; left: 0 !important; @@ -3457,6 +3550,8 @@ padding-block: 0 !important; padding-inline: var(--urlbar-container-padding, 0px) !important; } +} +@supports -moz-bool-pref("userChrome.padding.urlView_expanding") { #urlbar[breakout][breakout-extend] > #urlbar-background { animation-name: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; @@ -3475,6 +3570,7 @@ @supports -moz-bool-pref("userChrome.padding.bookmarkbar") { :root[uidensity="compact"] #PersonalToolbar toolbarbutton { margin-top: 0px !important; /* Original: 2px */ + margin-bottom: 1px !important; } } /*= Info Bar - Reduce Padding ================================================*/ @@ -3517,7 +3613,7 @@ display: block; width: 2px; position: absolute; - background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); + background-image: linear-gradient(0deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); top: 0; inset-inline-start: 0; height: 100%; @@ -3814,16 +3910,6 @@ @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ - :root { - /* height if native titlebar is enabled, assumes empty menubar */ - --uc-menubar-height: 20px; - --uc-menubar-padding: 1px; /* FF's menubar padding */ - --uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding))); - } - :root[tabsintitlebar] { - /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ - --uc-menubar-height: 30px; - } /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root:not([sizemode="fullscreen"]) { @@ -3865,10 +3951,6 @@ #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px; } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - height: var(--uc-menubar-container-height); - } :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar @@ -3940,16 +4022,6 @@ @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ - :root { - /* height if native titlebar is enabled, assumes empty menubar */ - --uc-menubar-height: 20px; - --uc-menubar-padding: 1px; /* FF's menubar padding */ - --uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding))); - } - :root[tabsintitlebar] { - /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ - --uc-menubar-height: 30px; - } /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root:not([sizemode="fullscreen"]) { @@ -3991,10 +4063,6 @@ #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px; } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - height: var(--uc-menubar-container-height); - } :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar @@ -4339,7 +4407,8 @@ } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") or not -moz-bool-pref("userChrome.hidden.tabbar") { + @supports (not -moz-bool-pref("userChrome.tabbar.on_bottom")) or + (not -moz-bool-pref("userChrome.hidden.tabbar")) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; --uc-window-control-space: 0px; @@ -4417,533 +4486,121 @@ @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref( "userChrome.hidden.tabbar" ) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - /*= Windows Control - Move to toolbar ========================================*/ - /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 - See the above repository for updates as well as full license text. */ - /* Titlebar Button Box */ - :root { - --uc-titlebar-padding: 0px; - } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - } - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } - :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { - margin-top: calc(-1 * var(--uc-titlebar-padding)); - } - :root[sizemode="normal"][tabsintitlebar] #titlebar, - :root[sizemode="maximized"][tabsintitlebar] #titlebar { - appearance: none !important; - } - .browser-toolbar:not(.titlebar-color) { - background-clip: border-box !important; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - #toolbar-menubar:not([autohide="true"]) { - visibility: visible !important; - height: 0; - } - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - visibility: collapse; - } - } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 1; - visibility: visible; - } - @supports -moz-bool-pref("userChrome.autohide.navbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - visibility: collapse; - } - } - } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { - #navigator-toolbox:is(:hover, :focus-within) - #toolbar-menubar[inactive]:not([customizing]) - > .titlebar-buttonbox-container { - opacity: 1; - visibility: visible; - } - } - } - @media (prefers-reduced-motion: no-preference) { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), - visibility 100ms var(--animation-easing-function) 0.25s !important; - } - #navigator-toolbox:is(:hover, :focus-within) - #toolbar-menubar[inactive]:not([customizing]) - > .titlebar-buttonbox-container { - transition-delay: 0s !important; - } - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - visibility: hidden; - } - } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { - visibility: visible !important; - min-height: 0 !important; - max-height: 0 !important; - } - :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { - visibility: collapse !important; - } - } - /* At Activated Menubar */ - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; - } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - /*= Windows Control - Move to toolbar ========================================*/ - /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 - See the above repository for updates as well as full license text. */ - /* Titlebar Button Box */ - :root { - --uc-titlebar-padding: 0px; - } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - } - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } - :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { - margin-top: calc(-1 * var(--uc-titlebar-padding)); - } - :root[sizemode="normal"][tabsintitlebar] #titlebar, - :root[sizemode="maximized"][tabsintitlebar] #titlebar { - appearance: none !important; - } - .browser-toolbar:not(.titlebar-color) { - background-clip: border-box !important; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - #toolbar-menubar:not([autohide="true"]) { - visibility: visible !important; - height: 0; - } - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - visibility: collapse; - } - } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 1; - visibility: visible; - } - @supports -moz-bool-pref("userChrome.autohide.navbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - visibility: collapse; - } - } - } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { - #navigator-toolbox:is(:hover, :focus-within) - #toolbar-menubar[inactive]:not([customizing]) - > .titlebar-buttonbox-container { - opacity: 1; - visibility: visible; - } - } - } - @media (prefers-reduced-motion: no-preference) { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), - visibility 100ms var(--animation-easing-function) 0.25s !important; - } - #navigator-toolbox:is(:hover, :focus-within) - #toolbar-menubar[inactive]:not([customizing]) - > .titlebar-buttonbox-container { - transition-delay: 0s !important; - } - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - visibility: hidden; - } - } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { - visibility: visible !important; - min-height: 0 !important; - max-height: 0 !important; - } - :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { - visibility: collapse !important; - } - } - /* At Activated Menubar */ - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; - } - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - /*= Windows Control - Move to toolbar ========================================*/ - /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 - See the above repository for updates as well as full license text. */ - /* Titlebar Button Box */ - :root { - --uc-titlebar-padding: 0px; - } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - } - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } - :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { - margin-top: calc(-1 * var(--uc-titlebar-padding)); - } - :root[sizemode="normal"][tabsintitlebar] #titlebar, - :root[sizemode="maximized"][tabsintitlebar] #titlebar { - appearance: none !important; - } - .browser-toolbar:not(.titlebar-color) { - background-clip: border-box !important; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - #toolbar-menubar:not([autohide="true"]) { - visibility: visible !important; - height: 0; - } - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - visibility: collapse; - } - } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 1; - visibility: visible; - } - @supports -moz-bool-pref("userChrome.autohide.navbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - visibility: collapse; - } - } - } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { - #navigator-toolbox:is(:hover, :focus-within) - #toolbar-menubar[inactive]:not([customizing]) - > .titlebar-buttonbox-container { - opacity: 1; - visibility: visible; - } - } - } - @media (prefers-reduced-motion: no-preference) { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), - visibility 100ms var(--animation-easing-function) 0.25s !important; - } - #navigator-toolbox:is(:hover, :focus-within) - #toolbar-menubar[inactive]:not([customizing]) - > .titlebar-buttonbox-container { - transition-delay: 0s !important; - } - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - visibility: hidden; - } - } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { - visibility: visible !important; - min-height: 0 !important; - max-height: 0 !important; - } - :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { - visibility: collapse !important; - } - } - /* At Activated Menubar */ - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; - } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.hidden.titlebar_container") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (max-width: 1100px) { - /*= Windows Control - Move to toolbar ========================================*/ - /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 - See the above repository for updates as well as full license text. */ - /* Titlebar Button Box */ - :root { - --uc-titlebar-padding: 0px; - } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; + /*= Windows Control - Move to toolbar ========================================*/ + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ + :root { + --uc-titlebar-padding: 0px; + } + #navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; } } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; } } - @media (-moz-gtk-csd-available) { - @media screen and (max-width: 1100px) and (-moz-gtk-csd-reversed-placement) { - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; } - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } - :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { - margin-top: calc(-1 * var(--uc-titlebar-padding)); - } - :root[sizemode="normal"][tabsintitlebar] #titlebar, - :root[sizemode="maximized"][tabsintitlebar] #titlebar { - appearance: none !important; - } - .browser-toolbar:not(.titlebar-color) { - background-clip: border-box !important; - } + :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { + margin-top: calc(-1 * var(--uc-titlebar-padding)); } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - #toolbar-menubar:not([autohide="true"]) { - visibility: visible !important; - height: 0; - } + :root[sizemode="normal"][tabsintitlebar] #titlebar, + :root[sizemode="maximized"][tabsintitlebar] #titlebar { + appearance: none !important; } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + .browser-toolbar:not(.titlebar-color) { + background-clip: border-box !important; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #toolbar-menubar:not([autohide="true"]) { + visibility: visible !important; + height: 0; + } + } + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + @supports -moz-bool-pref("userChrome.autohide.navbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; visibility: collapse; } } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { opacity: 1; visibility: visible; } - @supports -moz-bool-pref("userChrome.autohide.navbar") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - visibility: collapse; - } - } } - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { - #navigator-toolbox:is(:hover, :focus-within) - #toolbar-menubar[inactive]:not([customizing]) - > .titlebar-buttonbox-container { - opacity: 1; - visibility: visible; - } - } - } - /* At Activated Menubar */ } - @media screen and (max-width: 1100px) and (prefers-reduced-motion: no-preference) { + @media (prefers-reduced-motion: no-preference) { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), visibility 100ms var(--animation-easing-function) 0.25s !important; @@ -4954,42 +4611,37 @@ transition-delay: 0s !important; } } - @media screen and (max-width: 1100px) { - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - visibility: hidden; - } + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; } } - @media screen and (max-width: 1100px) { - @supports -moz-bool-pref("userChrome.hidden.tabbar") { - :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { - visibility: visible !important; - min-height: 0 !important; - max-height: 0 !important; - } - :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { - visibility: collapse !important; - } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { + visibility: visible !important; + min-height: 0 !important; + max-height: 0 !important; + } + :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { + visibility: collapse !important; } } - @media screen and (max-width: 1100px) { - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } + /* At Activated Menubar */ + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; } - @media screen and (max-width: 1100px) { - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; - } + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; } } } - @media screen and (min-width: 1100px) { + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 @@ -4999,7 +4651,16 @@ --uc-titlebar-padding: 0px; } #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container { @@ -5013,6 +4674,9 @@ height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; @@ -5029,7 +4693,7 @@ } } @media (-moz-gtk-csd-available) { - @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + @media (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; @@ -5090,7 +4754,7 @@ } } } - @media screen and (min-width: 1100px) and (prefers-reduced-motion: no-preference) { + @media (prefers-reduced-motion: no-preference) { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), visibility 100ms var(--animation-easing-function) 0.25s !important; @@ -5138,7 +4802,16 @@ --uc-titlebar-padding: 0px; } #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, #TabsToolbar > .titlebar-buttonbox-container { @@ -5152,6 +4825,9 @@ height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; @@ -5168,7 +4844,7 @@ } } @media (-moz-gtk-csd-available) { - @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + @media (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; @@ -5229,7 +4905,7 @@ } } } - @media screen and (min-width: 1100px) and (prefers-reduced-motion: no-preference) { + @media (prefers-reduced-motion: no-preference) { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), visibility 100ms var(--animation-easing-function) 0.25s !important; @@ -5269,117 +4945,520 @@ } } } - } - } - /*= Navbar - Padding for window controls =====================================*/ - /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ - #nav-bar { - border-inline-style: solid !important; - border-inline-color: transparent; - } - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { @media screen and (max-width: 1100px) { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); + /*= Windows Control - Move to toolbar ========================================*/ + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ + :root { + --uc-titlebar-padding: 0px; + } + #navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (max-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; + } + :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { + margin-top: calc(-1 * var(--uc-titlebar-padding)); + } + :root[sizemode="normal"][tabsintitlebar] #titlebar, + :root[sizemode="maximized"][tabsintitlebar] #titlebar { + appearance: none !important; + } + .browser-toolbar:not(.titlebar-color) { + background-clip: border-box !important; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #toolbar-menubar:not([autohide="true"]) { + visibility: visible !important; + height: 0; + } + } + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + } + } + /* At Activated Menubar */ + } + @media screen and (max-width: 1100px) and (prefers-reduced-motion: no-preference) { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), + visibility 100ms var(--animation-easing-function) 0.25s !important; + } + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + transition-delay: 0s !important; + } + } + @media screen and (max-width: 1100px) { + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } + } + } + @media screen and (max-width: 1100px) { + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { + visibility: visible !important; + min-height: 0 !important; + max-height: 0 !important; + } + :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { + visibility: collapse !important; + } + } + } + @media screen and (max-width: 1100px) { + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + } + @media screen and (max-width: 1100px) { + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) + #toolbar-menubar:not([autohide="true"]) + .titlebar-buttonbox-container { + visibility: hidden; + } } } } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-drag-space-pre) !important; - } - } + @media screen and (min-width: 1100px) { @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-control-space) !important; + /*= Windows Control - Move to toolbar ========================================*/ + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ + :root { + --uc-titlebar-padding: 0px; } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-drag-space-pre) !important; + #navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-control-space) !important; + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; + } + :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { + margin-top: calc(-1 * var(--uc-titlebar-padding)); + } + :root[sizemode="normal"][tabsintitlebar] #titlebar, + :root[sizemode="maximized"][tabsintitlebar] #titlebar { + appearance: none !important; + } + .browser-toolbar:not(.titlebar-color) { + background-clip: border-box !important; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #toolbar-menubar:not([autohide="true"]) { + visibility: visible !important; + height: 0; + } + } + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + } + } + @media screen and (min-width: 1100px) and (prefers-reduced-motion: no-preference) { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), + visibility 100ms var(--animation-easing-function) 0.25s !important; + } + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + transition-delay: 0s !important; + } + } + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { + visibility: visible !important; + min-height: 0 !important; + max-height: 0 !important; + } + :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { + visibility: collapse !important; + } + } + /* At Activated Menubar */ + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) + #toolbar-menubar:not([autohide="true"]) + .titlebar-buttonbox-container { + visibility: hidden; + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + /*= Windows Control - Move to toolbar ========================================*/ + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ + :root { + --uc-titlebar-padding: 0px; + } + #navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; + } + :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { + margin-top: calc(-1 * var(--uc-titlebar-padding)); + } + :root[sizemode="normal"][tabsintitlebar] #titlebar, + :root[sizemode="maximized"][tabsintitlebar] #titlebar { + appearance: none !important; + } + .browser-toolbar:not(.titlebar-color) { + background-clip: border-box !important; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #toolbar-menubar:not([autohide="true"]) { + visibility: visible !important; + height: 0; + } + } + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + } + } + @media screen and (min-width: 1100px) and (prefers-reduced-motion: no-preference) { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), + visibility 100ms var(--animation-easing-function) 0.25s !important; + } + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + transition-delay: 0s !important; + } + } + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { + visibility: visible !important; + min-height: 0 !important; + max-height: 0 !important; + } + :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { + visibility: collapse !important; + } + } + /* At Activated Menubar */ + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) + #toolbar-menubar:not([autohide="true"]) + .titlebar-buttonbox-container { + visibility: hidden; } } } } } } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement: 0) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } + @supports not -moz-bool-pref("userChrome.navbar.as_sidebar") { + /*= Navbar - Padding for window controls =====================================*/ + /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ + #nav-bar { + border-inline-style: solid !important; + border-inline-color: transparent; } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); } } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (-moz-gtk-csd-reversed-placement: 0) and (max-width: 1100px) { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); + } } } } } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-drag-space-pre) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-control-space) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement: 0) and (min-width: 1100px) { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-drag-space-pre) !important; @@ -5391,143 +5470,109 @@ } } } - } - } - } - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (max-width: 1100px) { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } + } } } } } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement: 0) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { - margin-inline-start: var(--uc-window-control-space, 0px) !important; + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #nav-bar { - margin-inline-start: var(--uc-window-control-space, 0px) !important; + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (-moz-gtk-csd-reversed-placement: 0) and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement: 0) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } + } } } } } } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - #TabsToolbar { - margin-inline-start: var(--uc-window-control-width, 0px) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - #TabsToolbar { - margin-inline-start: var(--uc-window-control-width, 0px) !important; - } - } - } - } - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (-moz-gtk-csd-reversed-placement) and (max-width: 1100px) { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } } } } } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-control-space, 0px) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-control-space, 0px) !important; @@ -5539,49 +5584,155 @@ } } } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } } } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; } } } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - #TabsToolbar { - margin-inline-start: var(--uc-window-control-width, 0px) !important; + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { #TabsToolbar { margin-inline-start: var(--uc-window-control-width, 0px) !important; } } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + } } } } - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (-moz-gtk-csd-reversed-placement) and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + } + } + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; + } + } } } } @@ -5663,6 +5814,123 @@ } } } +/*= Tab Bar - Multi Row ======================================================*/ +@supports -moz-bool-pref("userChrome.tabbar.multi_row") { + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + :root { + --uc-multirow-tabbar-rows: 3; + --uc-multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */ + } + #tabbrowser-tabs { + min-height: unset !important; + padding-inline-start: 0px !important; + } + @-moz-document url("chrome://browser/content/browser.xhtml") + { + #scrollbutton-up ~ spacer, + #scrollbutton-up, + #scrollbutton-down { + display: var(--scrollbutton-display-model, initial); + } + scrollbox[part][orient="horizontal"] { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows)); + } + } + .scrollbox-clip[orient="horizontal"], + #tabbrowser-arrowscrollbox { + overflow: -moz-hidden-unscrollable; + display: block; + --scrollbutton-display-model: none; + } + #tabbrowser-tabs .tabbrowser-tab[pinned] { + position: static !important; + margin-inline-start: 0px !important; + } + .tabbrowser-tab[fadein]:not([pinned]) { + flex-grow: var(--uc-multirow-tab-dynamic-width); + } + .tabbrowser-tab > stack { + width: 100%; + height: 100%; + } + /* remove bottom margin so it doesn't throw off row height computation */ + #tabs-newtab-button { + margin-bottom: 0 !important; + } + #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] + > #tabbrowser-arrowscrollbox + > #tabbrowser-arrowscrollbox-periphery + > #tabs-newtab-button { + display: -moz-box !important; + } + #alltabs-button, + :root:not([customizing]) #TabsToolbar #new-tab-button, + #tabbrowser-arrowscrollbox > spacer, + .tabbrowser-tab::after { + display: none !important; + } +} +/*= Tab Bar - Scollmode disabled =============================================*/ +@supports -moz-bool-pref("userChrome.tabbar.unscroll") { + /* Disable scrollbox */ + spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox { + overflow: -moz-hidden-unscrollable !important; + } + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not([visuallyselected]) { + /* Set minimum width below which tabs will not shrink */ + --tab-min-width: 16px; + container-type: inline-size; + container-name: backgroundTab; + } + @container backgroundTab (max-width: 46px) { + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not([visuallyselected]) .tab-content { + --inline-tab-padding: 0px; + justify-self: center; + } + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not([pinned]):not([visuallyselected]) + .tab-icon-stack + > * { + margin-inline-end: 0 !important; + } + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not([pinned]):not([visuallyselected]) + .tab-label-container, + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not([pinned]):not([visuallyselected]):hover + .tab-close-button { + visibility: collapse !important; + } + } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox-periphery { + position: absolute !important; + right: 0; + top: 50%; + transform: translateY(-50%); + } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] + #tabbrowser-arrowscrollbox-periphery + > #tabs-newtab-button { + z-index: 2 !important; + } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox { + padding-inline-end: calc( + 16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2 + ) !important; + } +} +/*= Tab Bar - Fill width tab =================================================*/ +@supports -moz-bool-pref("userChrome.tabbar.fill_width") { + /* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ + .tabbrowser-tab[fadein]:not([style^="max-width"]) { + --tab-max-width: 100vw; + max-width: var(--tab-max-width) !important; + } +} /** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { @@ -5681,8 +5949,10 @@ #tabbrowser-tabs { z-index: 1 !important; } - #TabsToolbar:not([multibar]) { - overflow: clip; /* Prevent toolbar area over */ + @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { + #TabsToolbar:not([multibar]) { + overflow: clip; /* Prevent toolbar area over */ + } } /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { @@ -5714,22 +5984,34 @@ } /*= Multi Selected Color - More Contrast =====================================*/ @supports -moz-bool-pref("userChrome.tab.multi_selected") { + #TabsToolbar { + --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); + } + #TabsToolbar[brighttext] { + --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); + } #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[multiselected]:not([selected]):-moz-lwtheme { - background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), - linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; - } - .tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { - background: color-mix(in srgb, currentColor 65%, transparent); - opacity: 0.3; - } - #TabsToolbar[brighttext] - .tab-background[multiselected="true"]:not([selected="true"]) - > .tab-loading-burst:not([bursting]) { - opacity: 0.15; + > .tab-background[multiselected]:not([selected]) { + /* Original: + background-attachment: scroll, scroll, fixed; + background-color: transparent; + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), + var(--lwt-header-image, none); + background-position: 0 0, 0 0, right top; + background-repeat: repeat-x, repeat-x, no-repeat; + background-size: auto 100%, auto 100%, auto auto; + */ + background-attachment: scroll, fixed !important; + background-color: transparent !important; + background-image: linear-gradient(var(--uc-multiselected-tab-bgcolor), var(--uc-multiselected-tab-bgcolor)), + var(--lwt-header-image, none) !important; + background-position: 0 0, right top !important; + background-repeat: repeat-x, no-repeat !important; + background-size: auto 100%, auto auto !important; } @supports -moz-bool-pref("userChrome.tab.connect_to_window") { .tab-background[multiselected="true"] { @@ -5750,37 +6032,34 @@ } /*= Selected Tab - Box Shadow ================================================*/ @supports -moz-bool-pref("userChrome.tab.box_shadow") { - #TabsToolbar[brighttext] + #TabsToolbar { + --uc-tab-shadow-color: var( + --tab-line-color, + var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) + ); + --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); + } + #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: unset !important; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); + } + :root:is([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[visuallyselected="true"]:not(:focus) + .tabbrowser-tab:is([selected], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) - Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - box-shadow: 0 0 1px var(--toolbar-color) !important; + filter: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); } - #TabsToolbar[brighttext] + :root:is([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[multiselected]:not([visuallyselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - 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-tab[visuallyselected="true"]:not(:focus), + :root:is([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 { - 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; + .tabbrowser-tab[multiselected]:not([visuallyselected]) { + --uc-tab-shadow-color: var(--toolbar-color); } /* 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. */ @@ -5790,9 +6069,9 @@ .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; + --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); + filter: drop-shadow(-1px -0.5px 0px var(--uc-tab-shadow-color, transparent)) + drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); } :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] @@ -5800,96 +6079,358 @@ .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; + filter: drop-shadow(-1px -0.5px 0px var(--uc-tab-shadow-color, transparent)) + drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)); } } /*= Selected Tab - Bottom Rounded Corner =====================================*/ @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { - #tabbrowser-tabs { - --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 0px; - --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #TabsToolbar { + --uc-tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ + --uc-tab-corner-padding: 0px; + --uc-tab-corner-position: calc(var(--uc-tab-corner-padding) - var(--uc-tab-corner-rounding)); + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg"); + } + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { + /* Box */ + display: block; + position: absolute; + z-index: 1; + bottom: 0; + /* Shape */ + width: var(--uc-tab-corner-rounding); + height: 100%; + /* Color */ + fill: transparent; + stroke: transparent; + -moz-context-properties: fill, stroke; + /* Image */ + background-size: var(--uc-tab-corner-rounding); + background-repeat: no-repeat; + background-position-y: bottom; + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { + content: ""; + } + } + @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { + /* Based on tab background + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); + + defaults + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + */ + fill: var( + --lwt-selected-tab-background-color, + var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) + ) !important; + } + } + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before { + left: var(--uc-tab-corner-position); + background-image: var(--uc-tab-corner-left-side-svg); + } + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { + right: var(--uc-tab-corner-position); + background-image: var(--uc-tab-corner-right-side-svg); + } + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))); + } + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { + content: ""; + } + } + :root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + } + :root:not([customizing="true"]) + .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) + .tab-background::before, + :root:not([customizing="true"]) + .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) + .tab-background::after { + fill: color-mix(in srgb, currentColor 11%, transparent); + } + @supports -moz-bool-pref("userChrome.tab.multi_selected") { + :root:not([customizing="true"]) + .tabbrowser-tab[multiselected]:not([visuallyselected]) + .tab-background::before, + :root:not([customizing="true"]) + .tabbrowser-tab[multiselected]:not([visuallyselected]) + .tab-background::after { + fill: color-mix(in srgb, currentColor 65%, transparent); + opacity: 0.3; + } + } + :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]) + .tabbrowser-tab[visuallyselected] + .tab-background:-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]) + .tabbrowser-tab[visuallyselected] + .tab-background:-moz-lwtheme::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color); + } + @media (-moz-gtk-csd-available) { + :root:not([customizing="true"]) { + /* Fill color for GTK */ + } + :root:not([customizing="true"]):not([lwtheme="true"]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) + .tab-background::before, + :root:not([customizing="true"]):not([lwtheme="true"]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) + .tab-background::after { + /* As GTK Toolbar's background-color + background-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog); + stroke: transparent; + opacity: 1; + } + :root:not([customizing="true"]):not([lwtheme="true"]) + #TabsToolbar[brighttext] + .tabbrowser-tab[visuallyselected] + .tab-background::before, + :root:not([customizing="true"]):not([lwtheme="true"]) + #TabsToolbar[brighttext] + .tabbrowser-tab[visuallyselected] + .tab-background::after { + stroke: transparent; + } + } + } + } + } + } } - :root:not([customizing="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]) tab[visuallyselected] > stack::after { - content: "" !important; - /* Box */ - display: block !important; - position: absolute !important; - z-index: 1 !important; - /* Shape */ - width: var(--tab-corner-rounding) !important; - height: 100% !important; - /* Color */ - fill: var(--toolbar-bgcolor) !important; - stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important; - -moz-context-properties: fill, stroke !important; - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; - } - :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; - } - tab[visuallyselected] > stack::before { - left: var(--tab-corner-position) !important; - background-image: url("../icons/tab-bottom-corner-left.svg"); - } - tab[visuallyselected] > stack::after { - left: auto; - right: var(--tab-corner-position); - background-image: url("../icons/tab-bottom-corner-right.svg"); - } - @media (-moz-gtk-csd-available) { - /* Fill color for GTK */ - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after { - /* As GTK Toolbar's background-color + background-image + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #TabsToolbar { + --uc-tab-corner-height: calc(var(--tab-min-height) + 1px); + --uc-tab-corner-size: var(--uc-tab-corner-height); + --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); + --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); + --uc-tab-corner-bgimage: none; + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { + #TabsToolbar { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg"); + --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-wave.svg#svgClipPath"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg"); + --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-wave.svg#svgClipPath"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { + #TabsToolbar { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg"); + --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-australis.svg#svgClipPath"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg"); + --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-australis.svg#svgClipPath"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { + #TabsToolbar { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg"); + --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chrome.svg#svgClipPath"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg"); + --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chrome.svg#svgClipPath"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); + --uc-tab-corner-size: 16px; + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + #TabsToolbar { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg"); + --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chromeLegacy.svg#svgClipPath"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg"); + --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chromeLegacy.svg#svgClipPath"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #TabsToolbar { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg"); + --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-edge.svg#svgClipPath"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg"); + --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-edge.svg#svgClipPath"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); + --uc-tab-corner-size: 14px; + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + .tabbrowser-tab { + padding-inline: 0 !important; + overflow-clip-margin: var(--uc-tab-corner-half-size) !important; + } + .tabbrowser-tab .tab-background { + --tab-border-radius: 0px; + margin-inline: var(--uc-tab-corner-half-size) !important; + position: relative; + } + } + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + .tabbrowser-tab[visuallyselected] { + padding-inline: 0 !important; + overflow-clip-margin: var(--uc-tab-corner-half-size) !important; + } + .tabbrowser-tab[visuallyselected] .tab-background { + --tab-border-radius: 0px; + margin-inline: var(--uc-tab-corner-half-size) !important; + position: relative; + } + .tabbrowser-tab[visuallyselected] .tab-background::before, + .tabbrowser-tab[visuallyselected] .tab-background::after { + content: ""; + } + } + .tabbrowser-tab .tab-background::before, + .tabbrowser-tab .tab-background::after { + /* Box */ + display: block; + position: absolute; + z-index: -1; + bottom: -1px; + /* Shape */ + width: var(--uc-tab-corner-size); + height: var(--uc-tab-corner-height); + /* Color */ + fill: transparent; + -moz-context-properties: fill; + /* Image */ + background-size: cover, auto auto; + background-repeat: no-repeat, no-repeat; + background-position: bottom, right top; + background-attachment: scroll, fixed; + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + .tabbrowser-tab .tab-background::before, + .tabbrowser-tab .tab-background::after { + content: ""; + } + } + @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { + .tabbrowser-tab .tab-background::before, + .tabbrowser-tab .tab-background::after { + /* Based on tab background + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); + + defaults + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + */ + fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + } + } + .tabbrowser-tab .tab-background::before { + right: 100%; + background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage); + clip-path: var(--uc-tab-corner-left-side-clipPath); + } + .tabbrowser-tab .tab-background::after { + left: 100%; + background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage); + clip-path: var(--uc-tab-corner-right-side-clipPath); + } + .tabbrowser-tab[beforeselected-visible] .tab-background::after { + --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped); + } + .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-background::before { + --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped); + } + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background { + --uc-tab-corner-bgimage: var(--lwt-header-image, none); + } + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + } + .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::before, + .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::after { + fill: color-mix(in srgb, currentColor 11%, transparent); + } + @supports -moz-bool-pref("userChrome.tab.multi_selected") { + .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::before, + .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::after { + fill: var(--uc-multiselected-tab-bgcolor); + } + } + #tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme { + --uc-tab-corner-bgimage: none; + } + @media (-moz-gtk-csd-available) { + /* Fill color for GTK */ + @supports -moz-bool-pref("userChrome.tab.box_shadow") { + :root:not([lwtheme="true"]) .tabbrowser-tab { + --uc-tab-shadow-color: rgba(0, 0, 0, 0.4); + } + } + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background { + background-clip: content-box; + } + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { + /* As GTK Toolbar's background-color + background-image * --toolbar-non-lwt-bgcolor: -moz-dialog; * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); */ - fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; - stroke: transparent !important; + --uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor)); + fill: rgba(255, 255, 255, 0.075); + } + @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { + fill: rgba(255, 255, 255, 0.15); + } + } } - :root:not([customizing="true"]):not([lwtheme="true"]) - #TabsToolbar[brighttext] - tab[visuallyselected] - > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) - #TabsToolbar[brighttext] - tab[visuallyselected] - > stack::after { - stroke: transparent !important; + #tabbrowser-tabs[positionpinnedtabs], + #tabbrowser-tabs:not([overflow]) .tabbrowser-tab[first-visible-tab], + #tabbrowser-tabs[overflow] .tabbrowser-tab[first-visible-unpinned-tab] { + margin-left: var(--uc-tab-corner-half-size) !important; } - } - @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { - :root:not([customizing="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]) tab[visuallyselected] > stack::after { - /* Based on tab background - background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); - - defaults - background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); - */ - fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + .tabbrowser-tab[last-visible-tab] { + margin-right: var(--uc-tab-corner-half-size) !important; } } } /*= Selected Tab - Photon like contextline ===================================*/ -@supports -moz-bool-pref("userChrome.tab.photon_like_contextline") or -moz-bool-pref("userChrome.tab.static_separator") { +@supports -moz-bool-pref("userChrome.tab.photon_like_contextline") or -moz-bool-pref("userChrome.tab.static_separator") or -moz-bool-pref( + "userChrome.tab.bar_separator" + ) { :root[lwtheme-mozlightdark] #tabbrowser-tabs, :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { @@ -5969,7 +6510,7 @@ } /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ -@supports -moz-bool-pref("userChrome.tab.dynamic_separator") or -moz-bool-pref("userChrome.tab.dynamic_separtor") { +@supports -moz-bool-pref("userChrome.tab.dynamic_separator") { #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; @@ -5985,7 +6526,7 @@ position: relative; } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - .tab-background::before, + .tab-stack::before, #tabs-newtab-button::before { /* Box Model */ content: ""; @@ -6003,17 +6544,17 @@ transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { - .tab-background::before, + .tab-stack::before, #tabs-newtab-button::before { background-color: var(--tabs-border-color); } } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - .tab-background::before, + .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { /* Box Model */ content: ""; display: block; @@ -6028,35 +6569,35 @@ background-color: var(--toolbarseparator-color); } @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { - .tab-background::before, + .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { background-color: var(--tabs-border-color); } } - .tab-background::before { + .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } - .tabbrowser-tab[last-visible-tab] .tab-background::after { + .tabbrowser-tab[last-visible-tab] .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-stack::before { opacity: var(--tab-separator-opacity); } @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @@ -6072,28 +6613,28 @@ @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { opacity: var(--tab-separator-opacity); } } #navigator-toolbox:not([movingtab]) .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] - .tab-background::before { + .tab-stack::before { opacity: 0 !important; } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) ~ .tabbrowser-tab[afterhovered] - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, @@ -6107,7 +6648,7 @@ @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) - .tab-background::before { + .tab-stack::before { opacity: 0 !important; } :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { @@ -6119,7 +6660,7 @@ } /* Animate */ @media (prefers-reduced-motion: no-preference) { - .tab-background::before { + .tab-stack::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @@ -6130,7 +6671,7 @@ @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } @@ -6145,12 +6686,12 @@ #TabsToolbar { --toolbarseparator-color: color-mix(in srgb, currentColor 30%, transparent); } - .tabbrowser-tab[first-visible-tab="true"] .tab-background::before, - .tab-background::after { + .tabbrowser-tab[first-visible-tab="true"] .tab-stack::before, + .tab-stack::after { content: ""; } - .tab-background::before, - .tab-background::after { + .tab-stack::before, + .tab-stack::after { /* Box Model */ display: block; position: absolute; @@ -6163,62 +6704,147 @@ /* Bar Color */ border-right: 1px solid var(--toolbarseparator-color); } - .tab-background::after { + .tab-stack::after { right: 0; } @supports -moz-bool-pref("userChrome.tab.static_separator.selected_accent") { - .tabbrowser-tab[visuallyselected] .tab-background::before, - .tabbrowser-tab[visuallyselected] .tab-background::after, - .tabbrowser-tab[beforeselected-visible] .tab-background::after { + .tabbrowser-tab[visuallyselected] .tab-stack::before, + .tabbrowser-tab[visuallyselected] .tab-stack::after, + .tabbrowser-tab[beforeselected-visible] .tab-stack::after { --toolbarseparator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); } } @supports not -moz-bool-pref("userChrome.tab.static_separator.selected_accent") { - .tabbrowser-tab[visuallyselected] .tab-background::before, - .tabbrowser-tab[visuallyselected] .tab-background::after, - .tabbrowser-tab[beforeselected-visible] .tab-background::after { + .tabbrowser-tab[visuallyselected] .tab-stack::before, + .tabbrowser-tab[visuallyselected] .tab-stack::after, + .tabbrowser-tab[beforeselected-visible] .tab-stack::after { opacity: 0; } } /* Animate */ @media (prefers-reduced-motion: no-preference) { - .tab-background::before, - .tab-background::after { + .tab-stack::before, + .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } } +/*= Unselected Tab - Bar Separator ===========================================*/ +@supports -moz-bool-pref("userChrome.tab.bar_separator") { + .tab-stack::before { + /* Box Model */ + content: ""; + display: block; + position: absolute; + /* Position */ + top: 50%; + left: 0%; + transform: translateX(calc((var(--inline-tab-padding) - 5px) / 2)) translateY(calc(-50% + var(--tab-block-margin))); + z-index: 1; + /* Bar shape */ + width: 3px; + height: 20px; + /* Bar Color */ + background-color: var( + --uc-bar-separator-color, + var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))) + ); + } + @media (prefers-reduced-motion: no-preference) { + .tab-stack::before { + transition-property: opacity, background-color; + transition-duration: 0.2s; + transition-timing-function: var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + } + :root[sessionrestored] .tabbrowser-tab[busy] .tab-stack::before { + --uc-bar-separator-color: currentColor; + opacity: 0.7; + } + :root[sessionrestored] .tabbrowser-tab[busy][progress] .tab-stack::before { + --uc-bar-separator-color: var(--tab-loading-fill); + opacity: 1; + } + :root[sessionrestored] + #TabsToolbar[brighttext] + .tabbrowser-tab[busy][progress]:not([selected="true"]) + .tab-stack::before { + --uc-bar-separator-color: var(--lwt-tab-loading-fill-inactive, #84c1ff); + } + @supports -moz-bool-pref("userChrome.tab.unloaded") { + :root[sessionrestored] .tabbrowser-tab[pending] .tab-stack::before { + opacity: 0.7; + } + } +} /*= New tab button ============================================================*/ /*= New tab button - Looks like tab ==========================================*/ @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button { - /* Original: - margin: 0 0 var(--tabs-navbar-shadow-size) !important - => Can't override style. Therefore, we should approach it by bypass. + @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + #tabs-newtab-button { + /* Size */ + -moz-box-align: stretch !important; + padding-top: var(--tab-block-margin) !important; + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { + #tabs-newtab-button { + /* Original: + margin: 0 0 var(--tabs-navbar-shadow-size) !important + => Can't override style. Therefore, we should approach it by bypass. */ - --tabs-navbar-shadow-size: -1px; /* Original: 1px */ - --tabs-navbar-original-shadow-size: 1px; - --tab-corner-rounding: 4px; /* Hardcoded */ - /* Size */ - -moz-box-align: stretch !important; - padding-top: var(--tab-block-margin) !important; - /* Corner Rounding Image */ - --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); - background-image: url("../icons/tab-bottom-corner-left.svg"), url("../icons/tab-bottom-corner-right.svg"); - background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), - right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); - background-size: var(--tab-corner-rounding); - /* Corner Rounding Color */ - fill: transparent !important; - -moz-context-properties: fill !important; + --tabs-navbar-shadow-size: -1px; /* Original: 1px */ + --uc-tabs-navbar-shadow-size: 0.5px; + --uc-tab-corner-rounding: 4px; /* Hardcoded */ + --uc-newtab-bgcolor: transparent; + /* Corner Rounding Image */ + --uc-newtab-position: calc((var(--uc-tab-corner-rounding) / 2) * -1); + background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg); + background-repeat: no-repeat; + background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size), + right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size); + background-size: var(--uc-tab-corner-rounding); + /* Corner Rounding Color */ + fill: var(--uc-newtab-bgcolor) !important; + -moz-context-properties: fill !important; + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #tabs-newtab-button { + --uc-newtab-position: 0px; + --uc-newtab-non-corner-bgwidth: 0px; + --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); + --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); + transform: translateX(var(--uc-tab-corner-half-height-reverse)); + padding-inline: var(--uc-tab-corner-half-height) !important; + overflow-clip-margin: var(--uc-tab-corner-half-height) !important; + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)), + var(--uc-tab-corner-right-side-svg); + background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size), + center bottom var(--uc-tabs-navbar-shadow-size), + right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size); + background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height), + var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height), + var(--uc-tab-corner-height) var(--uc-tab-corner-height); + background-origin: padding-box; + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #tabs-newtab-button { + --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); + } + } + } } /* Corner Rounding Color */ #tabs-newtab-button:hover { - fill: var(--toolbarbutton-hover-background) !important; + --uc-newtab-bgcolor: var(--toolbarbutton-hover-background); } #tabs-newtab-button:hover:active { - fill: var(--toolbarbutton-active-background) !important; + --uc-newtab-bgcolor: var(--toolbarbutton-active-background); } @media (-moz-windows-accent-color-in-titlebar) { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, @@ -6229,6 +6855,35 @@ :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcoded for compatibility */ } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient( + to left, + color-mix(in srgb, AccentColorText 10%, transparent), + color-mix(in srgb, AccentColorText 10%, transparent) + ), + var(--uc-tab-corner-right-side-svg); + } + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabs-newtab-button:hover:active { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient( + to left, + color-mix(in srgb, AccentColorText 15%, transparent), + color-mix(in srgb, AccentColorText 15%, transparent) + ), + var(--uc-tab-corner-right-side-svg); + } + } + } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { @@ -6247,17 +6902,59 @@ transparent ) !important; /* Hardcoded for compatibility */ } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient( + to left, + color-mix(in srgb, -moz-accent-color-foreground 10%, transparent), + color-mix(in srgb, -moz-accent-color-foreground 10%, transparent) + ), + var(--uc-tab-corner-right-side-svg); + } + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabs-newtab-button:hover:active { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient( + to left, + color-mix(in srgb, -moz-accent-color-foreground 15%, transparent), + color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) + ), + var(--uc-tab-corner-right-side-svg); + } + } + } } } /* '+'Icon */ #tabs-newtab-button .toolbarbutton-icon { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding) - calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--tabs-navbar-original-shadow-size)) !important; + calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important; -moz-context-properties: fill, fill-opacity; fill: var(--toolbarbutton-icon-fill); fill-opacity: var(--toolbarbutton-icon-fill-opacity); } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #tabs-newtab-button .toolbarbutton-icon { + --tab-border-radius: 0px; + width: unset !important; + padding-inline: 0px !important; + margin-inline: calc(var(--uc-tab-corner-half-height) - 7.75px) !important; + background-color: transparent !important; + } + } } /*= New tab button - Smaller button ==========================================*/ @supports -moz-bool-pref("userChrome.tab.newtab_button_smaller") { @@ -6265,13 +6962,7 @@ --tab-border-radius: var(--toolbarbutton-border-radius); margin-left: 1px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ - --toolbarbutton-inner-padding: 6px; - } - :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: 4px; /* Photon: 6px */ - } - :root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: 9px; /* Photon: 9px */ + --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding); } } /*= New tab button - Proton like button ======================================*/ @@ -6339,6 +7030,12 @@ visibility: visible !important; opacity: 1; } + @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.with_selected") { + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + } @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") { .tabbrowser-tab:not([visuallyselected]) .tab-close-button { visibility: collapse !important; @@ -6348,27 +7045,23 @@ visibility: visible !important; opacity: 1; } + @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.with_selected") { + .tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + } } /* Animate */ @media (prefers-reduced-motion: no-preference) { /* Fade out */ - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + .tabbrowser-tab .tab-close-button { transition: opacity 0.1s var(--animation-easing-function) !important; } /* Fade in */ - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { + .tabbrowser-tab:hover .tab-close-button { transition: opacity 0.25s var(--animation-easing-function) !important; } - @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") { - /* Fade out */ - .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - transition: opacity 0.1s var(--animation-easing-function) !important; - } - /* Fade in */ - .tabbrowser-tab:hover .tab-close-button { - transition: opacity 0.25s var(--animation-easing-function) !important; - } - } } /* Closed Button's icon thicker */ .tabbrowser-tab .tab-content > .close-icon { @@ -6541,8 +7234,7 @@ .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="rtl"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) - .tab-label-container - :not([labeldirection]):-moz-locale-dir(rtl) { + .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-label-position-x: -4px; } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) @@ -6562,8 +7254,7 @@ .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="rtl"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) - .tab-label-container - :not([labeldirection]):-moz-locale-dir(rtl) { + .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-label-position-x: -4px; } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) @@ -6805,7 +7496,350 @@ display: none !important; } } +/** Nav Bar UI ****************************************************************/ +/*= Nav Bar - Navbar comabine with sidebar===================================*/ +@supports -moz-bool-pref("userChrome.navbar.as_sidebar") { + :root { + --uc-navbar-margin-block: var(--toolbarbutton-inner-padding); + --uc-urlbar-margin-top: calc(var(--uc-navbar-height) + var(--uc-navbar-margin-block)); + --uc-urlbar-container-height: 36px; + --uc-navbar-sideblock-height: calc(var(--uc-urlbar-margin-top) + var(--uc-urlbar-container-height)); + } + #nav-bar, + #sidebar-box, + #sidebar-header, + #sidebar { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } + #nav-bar, + #wrapper-urlbar-container, + #urlbar-container { + position: absolute !important; + } + #nav-bar-customization-target { + -moz-box-pack: justify; + } + #nav-bar { + z-index: 1; + margin-top: calc( + var(--uc-tabbar-height) + var(--uc-bm-height) + var(--uc-menubar-height) + var(--uc-navbar-margin-block) + ); + overflow-y: visible !important; + background: none !important; + box-shadow: none !important; + -moz-window-dragging: drag; + } + @supports selector(:has(a)) { + :root:has(#sidebar-box[hidden="true"]) #nav-bar { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + opacity: 0; + visibility: hidden; + } + :root:has(#sidebar-box[positionend="true"]) #nav-bar { + right: 0; + } + } + @media (prefers-reduced-motion: no-preference) { + @supports -moz-bool-pref("userChrome.decoration.animate") { + @supports not -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear, + margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + will-change: margin-inline-start, opacity, visibility, margin-top; + } + :root:has(#sidebar-box[hidden="true"]) #nav-bar, + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s, 0s, 0.25s, 0s, 0s !important; + } + } + @supports -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + will-change: margin-top; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s !important; + } + } + } + } + #urlbar-container { + top: var(--uc-urlbar-margin-top); + min-width: calc(var(--uc-sidebar-activate-width) - 2 * var(--toolbarbutton-inner-padding)) !important; + margin-inline: auto !important; /* Original: var(--urlbar-margin-inline) */ + left: 50%; + transform: translateX(-50%); + } + #customizableui-special-spring1, + #customizableui-special-spring2, + #wrapper-customizableui-special-spring1, + #wrapper-customizableui-special-spring2 { + display: none !important; + } + #sidebar-header { + margin-top: var(--uc-navbar-sideblock-height) !important; + -moz-window-dragging: drag; + } + :root[customizing="true"] #wrapper-urlbar-container { + left: 50%; + } + :root[customizing="true"] #browser[collapsed="true"] { + visibility: visible !important; + } + :root[customizing="true"] #browser[collapsed="true"] #appcontent { + visibility: collapse; + } + :root[customizing="true"] #browser[collapsed="true"] #sidebar-box { + position: absolute; + height: 100%; + } + :root[customizing="true"] #browser[collapsed="true"] #sidebar-box[positionend="true"] { + right: 0; + } + :root[customizing="true"] #customization-container { + --uc-customization-conatiner-margin: var(--uc-navbar-height-default); + width: calc(100% - var(--uc-sidebar-activate-width)); + height: calc(100% - var(--uc-customization-conatiner-margin)); + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[customizing="true"] #customization-container { + --uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default)); + } + } + :root[customizing="true"]:has(#sidebar-box:not([positionend="true"])) #customization-container { + margin-inline-start: var(--uc-sidebar-activate-width); + } + :root[customizing="true"]:has(#sidebar-box[positionend="true"]) #customization-container { + margin-inline-end: var(--uc-sidebar-activate-width); + } + :root[customizing="true"] #customization-palette-container, + :root[customizing="true"] #customization-panel-container { + flex-shrink: 0.5 !important; + } +} +/** Bookark Bar UI ************************************************************/ +@supports -moz-bool-pref("userChrome.bookmarkbar.multi_row") { + #PersonalToolbar { + --uc-multirow-bookmark-rows: 3; + --uc-multirow-bookmark-row-margin: 2px; + max-height: none !important; + } + #PlacesToolbar > hbox { + display: block; + width: 100vw; + } + #PlacesToolbarItems { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + scroll-snap-type: y mandatory; + max-height: calc( + var(--uc-multirow-bookmark-rows) * + ( + var(--uc-bm-height, calc(20px + 2 * var(--bookmark-block-padding, 4px))) + 2 * + var(--uc-multirow-bookmark-row-margin) + ) + ) !important; + } + #PlacesChevron { + display: none; + } + #PlacesToolbarItems > .bookmark-item { + scroll-snap-align: start; + margin-block: var(--uc-multirow-bookmark-row-margin) !important; + } +} /** Url View UI ***************************************************************/ +/*= Url Bar - Icon box as Separator ==========================================*/ +@supports -moz-bool-pref("userChrome.urlbar.iconbox_with_separator") { + #identity-box { + /* separator */ + position: relative; + } + #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open]), + #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open]), + #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open]) { + /* remove background from urlbar box */ + background-color: transparent !important; + } + #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open])::after, + #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open])::after, + #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open])::after { + opacity: 0.375; + } + #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button::after, + #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button::after, + #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button::after { + /* Box Model */ + content: ""; + position: absolute; + display: block; + /* Position */ + right: 0; + top: 50%; + transform: translateY(-50%); + /* Bar shape */ + width: 1px; + height: 1em; + /* Bar Color */ + opacity: 0; + background-color: currentColor; + } + #identity-box[pageproxystate="valid"] #identity-icon-label { + /* increase space between icon and text - as identity box padding */ + padding-inline-start: 8px !important; + } + @media (prefers-reduced-motion: no-preference) { + .identity-box-button::after { + transition: opacity 0.2s var(--animation-easing-function); + } + } +} +/*= Url View - Share Layout ==================================================*/ +@supports -moz-bool-pref("userChrome.urlView.as_commandbar") or -moz-bool-pref("userChrome.urlView.full_width_padding") { + .urlbarView { + --uc-urlView-padding: calc(5px + var(--urlbar-container-padding)); + margin-inline: 0 !important; /* Original: calc(5px + var(--urlbar-container-padding)) */ + } +} +/*= Url View - Looks like Launcher ===========================================*/ +@supports -moz-bool-pref("userChrome.urlView.as_commandbar") { + /* Init & Base Layout */ + .urlbarView { + --urlbarView-favicon-width: 32px; /* Original: 16px */ + --uc-urlView-typeIcon-size: 18px; + --uc-urlView-icon-size-differ: 14px; + --uc-searchBar-icon-size: 20px; + --uc-searchBar-button-size: 32px; + --uc-urlView-row-padding: 8px; + --uc-urlView-row-bottom: 2px; + --uc-urlView-margin: calc(var(--uc-sidebar-activate-width, 18rem) + var(--toolbarbutton-inner-padding)); + position: fixed !important; + left: 50vw; + transform: translateX(-50%); + top: 12vh !important; + width: calc(100vw - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; + /* paddding as margin */ + /* background */ + background-color: var(--toolbar-field-focus-background-color) !important; + background-clip: border-box; + border: 1px solid var(--arrowpanel-border-color) !important; + border-radius: var(--toolbarbutton-border-radius) !important; + box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13); + } + @supports not -moz-bool-pref("userChrome.urlView.full_width_padding") { + .urlbarView { + padding-inline: var(--uc-urlView-padding) !important; + } + } + .urlbarView-body-inner { + border-top: none !important; + } + /* Big icons */ + :root[uidensity="compact"] .urlbarView { + --urlbarView-favicon-width: 24px; /* Original: 16px */ + --uc-urlView-typeIcon-size: 16px; + --uc-urlView-icon-size-differ: 8px; + --uc-searchBar-icon-size: 18px; + --uc-searchBar-button-size: 30px; + } + :root[uidensity="touch"] .urlbarView { + --uc-urlView-row-padding: 17px; + --uc-urlView-row-bottom: 11px; + } + .urlbarView-row:not([type="tip"], [type="dynamic"]) { + position: relative; + min-height: calc(var(--urlbarView-favicon-width) + var(--uc-urlView-row-padding)) !important; + } + .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-row-inner { + height: var(--urlbarView-favicon-width) !important; + } + .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-favicon { + position: absolute; + top: 50%; + transform: translateY(-50%); + } + .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-title { + padding-inline-start: calc( + var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width) + ) !important; + } + .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-type-icon { + width: var(--uc-urlView-typeIcon-size) !important; + height: var(--uc-urlView-typeIcon-size) !important; + margin-inline-start: calc( + var(--uc-urlView-icon-size-differ) + var(--urlbarView-item-inline-padding) + ) !important; /* Original: 8px */ + bottom: var(--uc-urlView-row-bottom); + } + .urlbarView-row[dynamicType="quickactions"] .urlbarView-favicon-img { + width: var(--urlbarView-favicon-width) !important; /* Original: 16px */ + height: var(--urlbarView-favicon-width) !important; /* Original: 16px */ + } + .urlbarView-row[dynamicType="quickactions"] .urlbarView-label { + font-size: 0.95em !important; /* Original: 11px */ + } + :root[uidensity="touch"] .urlbarView-row { + padding-block: 6px !important; + } + :root[uidensity="touch"] .urlbarView-row-inner { + padding-block: 11px !important; + } + #urlbar .searchbar-engine-one-off-item { + min-width: var(--uc-searchBar-button-size) !important; /* Original: 28px */ + height: var(--uc-searchBar-button-size) !important; + } + #urlbar .searchbar-engine-one-off-item > .button-box > .button-icon { + width: var(--uc-searchBar-icon-size) !important; /* Original: 16px */ + height: var(--uc-searchBar-icon-size) !important; + } +} +/*= Url View - Full Width Pddding ============================================*/ +@supports -moz-bool-pref("userChrome.urlView.full_width_padding") { + .urlbarView { + --uc-urlView-padding-double: calc(var(--uc-urlView-padding) * 2); + --uc-urlView-full-width-padding: var(--uc-urlView-padding-double); + } + @supports not -moz-bool-pref("userChrome.urlView.as_commandbar") { + .urlbarView { + --uc-urlView-full-width-padding: var(--uc-urlView-padding); + width: 100% !important; + } + } + #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { + border-color: transparent !important; + } + #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner::before { + content: ""; + position: absolute; + border-top: 1px solid var(--autocomplete-popup-separator-color); + transform: translate(-50%, -1px); + left: 50%; + } + #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner::before, + .urlbarView .search-one-offs { + width: calc(100% + 2px - var(--uc-urlView-padding-double)) !important; + } + .urlbarView .search-one-offs { + margin-inline: var(--uc-urlView-full-width-padding) !important; + } + .urlbarView-row-inner { + padding-inline: calc(var(--uc-urlView-full-width-padding) + var(--urlbarView-item-inline-padding)) !important; + } +} +/*= Url View - Always show page actions ======================================*/ +@supports -moz-bool-pref("userChrome.urlbar.always_show_page_actions") { + #urlbar:not([breakout-extend="true"]) #pageActionButton { + display: block !important; + visibility: visible !important; + } +} /*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { .urlbarView-type-icon { @@ -6824,11 +7858,11 @@ display: block !important; } } -/*= Url View - Always show page actions ======================================*/ -@supports -moz-bool-pref("userChrome.urlView.always_show_page_actions") { - #urlbar:not([breakout-extend="true"]) #pageActionButton { - display: block !important; - visibility: visible !important; +/*= Url View - Item Focus Border =============================================*/ +@supports -moz-bool-pref("userChrome.urlView.focus_item_border") { + .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, + .urlbarView-row-inner[selected] { + box-shadow: 3px 0 var(--toolbar-field-focus-border-color) inset !important; } } /** Panel UI ******************************************************************/ @@ -6863,15 +7897,17 @@ } } /** Sidebar UI ****************************************************************/ -@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { - #sidebar-box { +@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") or -moz-bool-pref( + "userChrome.navbar.as_sidebar" + ) { + :root { /* Original min-width: 14em; width: 18em; max-width: 36em; */ --uc-sidebar-width: 40px; - --uc-sidebar-activate-width: 18em; + --uc-sidebar-activate-width: 18rem; --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-fullscreen-width: 4px; --uc-sidebar-shadow-size: 1px; @@ -6882,6 +7918,14 @@ --uc-autohide-sidebar-speed: 750ms; --uc-autohide-fullscreen-sidebar-speed: 1s; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + } + #sidebar-splitter { + display: none !important; + } +} +@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box { + --uc-sidebar-shadow-color: #28282f; z-index: 1 !important; position: relative !important; box-shadow: var(--uc-sidebar-shadow-position) 0px 15px -10px var(--uc-sidebar-shadow-color); @@ -6892,9 +7936,6 @@ #sidebar { display: block; } - #sidebar-splitter { - display: none !important; - } } @supports -moz-bool-pref("userChrome.sidebar.overlap") { #sidebar-box[positionend="true"] { @@ -6935,6 +7976,668 @@ } } } +/** Combined UI ***************************************************************/ +/*= Combined - At URL bar ====================================================*/ +@supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref( + "userChrome.combined.nav_button.home_button" + ) or -moz-bool-pref("userChrome.combined.urlbar.nav_button") or -moz-bool-pref( + "userChrome.combined.urlbar.home_button" + ) or -moz-bool-pref("userChrome.combined.urlbar.reload_button") { + #nav-bar { + --uc-combined-circlebutton-background: hsla(0, 100%, 100%, 0.5); + --uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background); + --uc-combined-circlebutton-active-background: var(--toolbarbutton-active-background); + --uc-combined-circlebutton-border-color: hsla(240, 5%, 5%, 0.3); + --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); + --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); + --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); + --uc-toolbarbutton-halfsize: calc(6px + var(--uc-toolbarbutton-boundary)); + --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); + } + #nav-bar[brighttext] { + --uc-combined-circlebutton-background: var(--toolbarbutton-hover-background); + --uc-combined-circlebutton-hover-background: var(--toolbarbutton-active-background); + --uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent); + } + #nav-bar-customization-target > * { + -moz-box-ordinal-group: 1; + } + #nav-bar-customization-target > #urlbar-container { + -moz-box-ordinal-group: 5; + } + #nav-bar-customization-target > #urlbar-container ~ * { + -moz-box-ordinal-group: 7; + } +} +@supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #urlbar-container { + /* var(--urlbar-margin-inline) */ + margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin, 0px)) !important; + } + #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { + padding-left: var(--uc-urlbar-combined-margin, 0px); + } + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #urlbar-container { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #urlbar-container { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-halfsize); + } + @supports -moz-bool-pref("userChrome.combined.nav_button") { + @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") { + @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #urlbar-container { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); + } + } + } + } + } + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + @supports -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target + > #forward-button[disabled="true"] + ~ #urlbar-container + > #urlbar:not([breakout][breakout-extend]) { + padding-left: calc(var(--uc-urlbar-combined-margin, 0px) - var(--urlbar-icon-padding)); + } + } + @media (prefers-reduced-motion: no-preference) { + #nav-bar-customization-target > #forward-button[disabled="true"] ~ #urlbar-container > #urlbar { + transition-property: margin-left, padding-left; + transition-duration: 0.5s; + transition-timing-function: var(--animation-easing-function); + } + } + } +} +@supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or + ( + not + ( + -moz-bool-pref("userChrome.combined.sub_button.as_normal") and -moz-bool-pref( + "userChrome.combined.nav_button" + ) + and -moz-bool-pref("userChrome.combined.urlbar.home_button") + ) + ) { + #nav-bar-customization-target > #forward-button { + --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); + z-index: 2; + position: relative; + } + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #forward-button { + padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + @supports not -moz-bool-pref("userChrome.combined.sub_button.none_background") { + @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #forward-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 0.35); + } + #nav-bar-customization-target > #forward-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #forward-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @supports not -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button[disabled="true"][disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #forward-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 0.35); + } + #nav-bar-customization-target > #forward-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #forward-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @supports not -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button[disabled="true"][disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } + } + } + } + @supports not -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button { + margin-inline-start: var(--uc-forward-button-margin) !important; + } + } + @supports -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button:not([disabled="true"]) { + margin-inline-start: var(--uc-forward-button-margin) !important; + } + } + } + #nav-bar-customization-target > #back-button { + position: relative; + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 0.35); + } + #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button[disabled="true"][disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } + } + } + @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #back-button { + z-index: 2; + } + @supports not -moz-bool-pref("userChrome.combined.sub_button.as_normal") { + #nav-bar-customization-target > #back-button { + margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; + } + @supports not -moz-bool-pref("userChrome.combined.sub_button.none_background") { + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 0.35); + } + #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button[disabled="true"][disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } + } + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + } + } + @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #back-button { + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + } + @supports -moz-bool-pref("userChrome.padding.toolbar_button") { + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + #nav-bar-customization-target > #back-button { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button { + padding-inline-end: 0 !important; + } + } + @supports -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button:not([disabled="true"]) { + padding-inline-end: 0 !important; + } + #nav-bar-customization-target > #back-button[disabled="true"] { + padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; + } + } + #nav-bar-customization-target > #back-button > menupopup { + margin-top: -1px !important; + } + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #back-button { + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + } + @supports -moz-bool-pref("userChrome.padding.toolbar_button") { + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + #nav-bar-customization-target > #back-button { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button { + padding-inline-end: 0 !important; + } + } + @supports -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button:not([disabled="true"]) { + padding-inline-end: 0 !important; + } + #nav-bar-customization-target > #back-button[disabled="true"] { + padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; + } + } + #nav-bar-customization-target > #back-button > menupopup { + margin-top: -1px !important; + } + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + } + } +} +@supports -moz-bool-pref("userChrome.combined.nav_button") { + @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") { + #nav-bar-customization-target > #home-button { + position: relative; + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + padding-inline-end: 0 !important; + } + @supports -moz-bool-pref("userChrome.padding.toolbar_button") { + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + #nav-bar-customization-target > #home-button { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + } + #nav-bar-customization-target > #home-button > menupopup { + margin-top: -1px !important; + } + #nav-bar-customization-target > #home-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + #nav-bar-customization-target > #home-button:hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 0.35); + } + #nav-bar-customization-target > #home-button:hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + } +} +@supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #back-button { + -moz-box-ordinal-group: 2; + } + #nav-bar-customization-target > #forward-button { + -moz-box-ordinal-group: 4; + } + @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target + > :first-child:is(#back-button, #forward-button, #home-button) + + :is(toolbarbutton, toolbaritem):not(#back-button, #forward-button, #home-button), + #nav-bar-customization-target + > :first-child:is(#back-button, #forward-button, #home-button) + + :is(#back-button, #forward-button, #home-button) + + :is(toolbarbutton, toolbaritem):not(#back-button, #forward-button, #home-button), + #nav-bar-customization-target + > :first-child:is(#back-button, #forward-button, #home-button) + + :is(#back-button, #forward-button, #home-button) + + :is(#back-button, #forward-button, #home-button) + + :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target + > :first-child:is(#back-button, #forward-button) + + :is(toolbarbutton, toolbaritem):not(#back-button, #forward-button), + #nav-bar-customization-target + > :first-child:is(#back-button, #forward-button) + + :is(#back-button, #forward-button) + + :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } +} +@supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #home-button { + -moz-box-ordinal-group: 3; + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #home-button:is(:first-child) + :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } + #nav-bar-customization-target > #home-button { + position: relative; + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + padding-inline-end: 0 !important; + } + @supports -moz-bool-pref("userChrome.padding.toolbar_button") { + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + #nav-bar-customization-target > #home-button { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + } + #nav-bar-customization-target > #home-button > menupopup { + margin-top: -1px !important; + } + #nav-bar-customization-target > #home-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + #nav-bar-customization-target > #home-button:hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 0.35); + } + #nav-bar-customization-target > #home-button:hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } +} +@supports -moz-bool-pref("userChrome.combined.urlbar.reload_button") { + #nav-bar-customization-target > #stop-reload-button { + -moz-box-ordinal-group: 6; + } + #urlbar { + padding-right: calc(var(--uc-toolbarbutton-size) - var(--urlbar-margin-inline) / 2); + } + #nav-bar-customization-target > #stop-reload-button { + z-index: 3; + position: relative; + --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color) !important; + margin-left: calc(-1 * (var(--uc-toolbarbutton-size) + var(--urlbar-margin-inline))); + } + #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { + width: var(--uc-urlbar-icon-size) !important; + height: var(--uc-urlbar-icon-size) !important; + padding: var(--urlbar-icon-padding) !important; + } +} +/** Others UI *****************************************************************/ +/*= Counter for Tab ==========================================================*/ +@supports -moz-bool-pref("userChrome.counter.tab") { + #tabbrowser-tabs { + counter-reset: tab-counts; + } + .tabbrowser-tab:not([hidden="true"]) { + counter-increment: tab-counts; + } + .tabbrowser-tab:not([hidden="true"])[pinned="true"] .tab-label-container::before { + content: " " counter(tab-counts); + } + .tabbrowser-tab:not([hidden="true"]):not([pinned="true"]) .tab-label-container::before { + content: counter(tab-counts) ": "; + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container { + display: grid; + align-content: safe center; + align-items: safe center; + } + @supports -moz-bool-pref("userChrome.centered.tab") { + @supports not -moz-bool-pref("userChrome.centered.tab.label") { + .tabbrowser-tab:not([hidden="true"]) .tab-label-container { + justify-content: start; + justify-items: start; + } + } + } + @supports not -moz-bool-pref("userChrome.centered.tab") { + .tabbrowser-tab:not([hidden="true"]) .tab-label-container { + justify-content: start; + justify-items: start; + } + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container::before { + display: inline-block; + grid-row: 1; + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container > .tab-text { + grid-row: 1; + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] { + width: unset !important; /* Original: 0 */ + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] > .tab-text, + .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] > .tab-secondary-label { + width: 0; + } + .tab-label, + .tab-secondary-label { + overflow: hidden; + } + @supports -moz-bool-pref("userChrome.tab.sound_with_favicons") { + @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container[labeldirection="ltr"], + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { + --uc-sound-tab-label-position-x: 2px; + } + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container[labeldirection="rtl"], + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { + --uc-sound-tab-label-position-x: -2px; + } + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label-container::before { + transform: translateX(var(--uc-sound-tab-label-position-x, 0px)); + } + } + @supports -moz-bool-pref("userChrome.hidden.tab_icon") { + @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container[labeldirection="ltr"], + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { + --uc-sound-tab-label-position-x: 2px; + } + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container[labeldirection="rtl"], + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { + --uc-sound-tab-label-position-x: -2px; + } + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label-container::before { + transform: translateX(var(--uc-sound-tab-label-position-x, 0px)); + } + } + } + .tab-label-container::beforee { + transition: transform 0.25s var(--animation-easing-function); + } + } +} +/*= Counter for Bookmark menu ================================================*/ +@supports -moz-bool-pref("userChrome.counter.bookmark_menu") { + menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { + counter-reset: bookmark-counts 0; + } + menupopup[placespopup="true"] > menu.bookmark-item::after { + display: -moz-inline-box; + content: "(" counter(bookmark-counts) ")"; + } + menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text, + menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container, + menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { + -moz-box-ordinal-group: 2; + } + menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item { + counter-increment: bookmark-counts; + } +} +@supports -moz-bool-pref("userChrome.findbar.floating_on_top") { + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + /* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly */ + #main-window > body > box { + z-index: 1; + } + findbar { + -moz-box-ordinal-group: 0; + position: relative; + height: 0 !important; + overflow: visible; + border-top: none !important; + padding: 0 !important; + background: none !important; + pointer-events: none; + z-index: 1; + margin-right: 16px; + border-right: 1px solid var(--chrome-content-separator-color); + } + findbar::before { + content: ""; + display: -moz-box; + -moz-box-flex: 200; + } + .findbar-container, + .findbar-closebutton { + border-style: solid; + border-color: var(--chrome-content-separator-color); + background: var(--uc-light-bkgnd-color, var(--toolbar-bgcolor)) !important; + pointer-events: auto; + height: 33px !important; + } + .findbar-container { + -moz-box-direction: reverse; + border-width: 0 0 1px 1px; + border-radius: var(--toolbarbutton-border-radius) 0 0 var(--toolbarbutton-border-radius) !important; + } + .findbar-container > .findbar-find-fast { + padding: var(--toolbarbutton-inner-padding) 1px; + margin: 0 !important; + } + .findbar-container > .findbar-find-status { + display: -moz-box; + overflow: hidden; + text-overflow: ellipsis; + -moz-box-flex: 1; + } + .findbar-container > hbox { + margin-inline: 5px; + } + .findbar-closebutton { + width: 30px !important; /* Original: 24px */ + margin: 0 !important; + border-width: 0 1px 1px 0px; + border-radius: 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 !important; + padding: 2px 5px 2px 3px !important; + overflow: clip; + } + .findbar-closebutton image { + padding: 4px; + border-radius: var(--toolbarbutton-border-radius); + } + .findbar-closebutton:hover > image { + background: var(--toolbarbutton-hover-background) !important; + } +} /** Fullscreen - Overlap toolbar **********************************************/ @supports -moz-bool-pref("userChrome.fullscreen.overlap") { @supports -moz-bool-pref("browser.fullscreen.autohide") { @@ -7017,9 +8720,16 @@ } } /** Auto Hide *****************************************************************/ +@supports -moz-bool-pref("userChrome.autohide.back_button") or -moz-bool-pref("userChrome.autohide.forward_button") { + :root { + --uc-toolbarbutton-hide-size: calc( + -1 * (16px + (2 * var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))) + ); + } +} @supports -moz-bool-pref("userChrome.autohide.back_button") { #back-button[disabled="true"] { - margin-left: -36px !important; + margin-left: var(--uc-toolbarbutton-hide-size) !important; opacity: 0 !important; pointer-events: none; } @@ -7035,7 +8745,7 @@ } @supports -moz-bool-pref("userChrome.autohide.forward_button") { #forward-button[disabled="true"] { - margin-left: -36px !important; + margin-left: var(--uc-toolbarbutton-hide-size) !important; opacity: 0 !important; pointer-events: none; } @@ -7132,14 +8842,27 @@ @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( "userChrome.autohide.bookmarkbar" ) - or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref("userChrome.hidden.tabbar") { + or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") or -moz-bool-pref( + "userChrome.hidden.tabbar" + ) or -moz-bool-pref("userChrome.navbar.as_sidebar") { :root { - --uc-tabbar-height: var(--tab-min-height); + --uc-tabbar-height: var(--uc-tabbar-height-default); + --uc-tabbar-height-default: var(--tab-min-height); --uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height)); - --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); + --uc-navbar-height: var(--uc-navbar-height-default); + --uc-navbar-height-default: calc( + 16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) + ); --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); - --uc-bm-height: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */ + --uc-bm-height: var(--uc-bm-height-default); + --uc-bm-height-default: calc( + 20px + (2 * var(--bookmark-block-padding, 4px)) + ); /* 20px = 16px + (2px * 2) [margin block] */ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); + --uc-titlebar-buttonbox-height: 34px; + --uc-menubar-height: 0px; + --uc-menubar-height-default: calc(1.6rem + 2px); + --uc-menubar-inner-height: calc(1.6rem - 2px); } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @@ -7163,9 +8886,47 @@ } } @supports selector(:has(a)) { + :root:not([tabsintitlebar]):has(#toolbar-menubar) { + --uc-menubar-height: var(--uc-menubar-height-default); + } + @media (-moz-gtk-csd-available) { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { + --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); + } + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { + --uc-menubar-height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); + } + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8) { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { + --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin)); + } + } + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) { + --uc-menubar-height: var(--uc-titlebar-buttonbox-height); + } + :root:not([tabsintitlebar]):has(#toolbar-menubar[autohide="true"][inactive="true"]), + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"][inactive="true"]) { + --uc-menubar-height: 0px; + } #navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) { --uc-bm-height: 0px; } + @supports -moz-bool-pref("userChrome.navbar.as_sidebar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]) #nav-bar { + --uc-bm-height: var(--uc-bm-height-default); + } + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]):not(:hover) #nav-bar { + --uc-bm-height: 0px; + } + } + } } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( @@ -7801,6 +9562,11 @@ } } } +@supports -moz-bool-pref("userChrome.hidden.titlebar_container") { + .titlebar-buttonbox-container { + display: none !important; + } +} @supports -moz-bool-pref("userChrome.hidden.sidebar_header") { @supports not -moz-bool-pref("userChrome.hidden.sidebar_header.vertical_tab_only") { #sidebar-header { @@ -7815,13 +9581,30 @@ } } @supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox") { - #identity-box[pageproxystate="valid"].notSecureText #identity-icon-label, - #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box, - #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box { - display: none; + @supports not -moz-bool-pref("userChrome.hidden.urlbar_iconbox.label_only") { + #identity-box[pageproxystate="valid"].notSecureText #identity-icon-label, + #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box, + #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box { + display: none; + } + #identity-box[pageproxystate="valid"].notSecureText #identity-icon-box { + padding-inline-end: 5px; /* Original: 8px */ + } } - #identity-box[pageproxystate="valid"].notSecureText #identity-icon-box { - padding-inline-end: 5px; /* Original: 8px */ + @supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox.label_only") { + #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box:not(:hover), + #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box:not(:hover) { + background-color: transparent !important; + } + @supports not -moz-bool-pref("userChrome.urlbar.iconbox_with_separator") { + #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box, + #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box { + padding-inline: var(--urlbar-icon-padding) !important; + } + } + #identity-box[pageproxystate="valid"] #identity-icon-label { + display: none !important; + } } } @supports -moz-bool-pref("userChrome.hidden.bookmarkbar_icon") { @@ -8208,6 +9991,9 @@ content: url("../icons/screenshot.svg"); } } + #save-page-button { + list-style-image: url("../icons/toolbarButton-download.svg") !important; + } #appMenu-settings-button { list-style-image: url("chrome://global/skin/icons/settings.svg"); } diff --git a/css/leptonContent.css b/css/leptonContent.css index 906ddea..6ad5f53 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -242,7 +242,8 @@ } } } - } /** Activity Stream - Menu Icons ********************************************/ + } + /** Activity Stream - Menu Icons ********************************************/ @supports -moz-bool-pref("userChrome.icon.context_menu") { .context-menu-list .context-menu-item button { padding-inline-start: 0 !important; @@ -458,9 +459,7 @@ } /** Error Page - Restore illustrations ****************************************/ @supports -moz-bool-pref("userContent.page.illustration") { - @-moz-document url-prefix("about:neterror"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), - url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") + @-moz-document url-prefix("about:neterror"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") { /* Illustrations Position */ #errorPageContainer, @@ -490,12 +489,7 @@ padding-inline-start: 38%; } } - @-moz-document url-prefix("about:neterror?e=connectionFailure"), - url-prefix("about:neterror?e=netInterrupt"), - url-prefix("about:neterror?e=netReset"), - url-prefix("about:neterror?e=netTimeout"), - url-prefix("about:neterror?e=netOffline"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") + @-moz-document url-prefix("about:neterror?e=connectionFailure"), url-prefix("about:neterror?e=netInterrupt"), url-prefix("about:neterror?e=netReset"), url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netOffline"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") { :root { --uc-error-llustration: url(../icons/error-connection-failure.svg); @@ -506,15 +500,12 @@ --uc-error-llustration: url(../icons/error-server-not-found.svg); } } - @-moz-document url-prefix("about:neterror?e=blockedByPolicy"), - url-prefix("about:neterror?e=deniedPortAccess"), - url-prefix("about:neterror?e=malformedURI") { + @-moz-document url-prefix("about:neterror?e=blockedByPolicy"), url-prefix("about:neterror?e=deniedPortAccess"), url-prefix("about:neterror?e=malformedURI") { :root { --uc-error-llustration: url(chrome://browser/skin/illustrations/error-malformed-url.svg); } } - @-moz-document url-prefix("about:neterror?e=clockSkewError"), - url-prefix("about:neterror?e=nssFailure") { + @-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") { :root { --uc-error-llustration: url(../icons/blue-berror.svg); } @@ -566,13 +557,7 @@ /** Fully Dark Mode ***********************************************************/ /*= Fully Dark Mode - Dark Mode Colors =======================================*/ @supports -moz-bool-pref("userContent.page.proton_color") { - @-moz-document url-prefix("about:"), - url-prefix("chrome://browser/content/places/places.xhtml"), - url-prefix("https://addons.mozilla.org"), - url-prefix("https://support.mozilla.org"), - url-prefix("https://accounts.firefox.com"), - url-prefix("view-source"), - regexp("^(((jar:)?file:///)|(chrome://)).*/$") + @-moz-document url-prefix("about:"), url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("https://addons.mozilla.org"), url-prefix("https://support.mozilla.org"), url-prefix("https://accounts.firefox.com"), url-prefix("view-source"), regexp("^(((jar:)?file:///)|(chrome://)).*/$") { /*= Default Colors - Hard Coded ==============================================*/ /* Based on chrome://global/skin/in-content/common.css */ @@ -1660,12 +1645,7 @@ /** Fully Proton Mode *********************************************************/ @supports -moz-bool-pref("userContent.page.proton") { /*= Common contents ==========================================================*/ /*= abouts' common ===========================================================*/ - @-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard"), - url-prefix("about:sync-log"), - url-prefix("about:memory"), - regexp("^(((jar:)?file:///)|(chrome://)).*/$") + @-moz-document url-prefix("about:plugins"), url-prefix("about:cache"), url-prefix("about:checkerboard"), url-prefix("about:sync-log"), url-prefix("about:memory"), regexp("^(((jar:)?file:///)|(chrome://)).*/$") { /* Base */ html, @@ -1866,16 +1846,13 @@ width: 100% !important; } } - @-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard") { + @-moz-document url-prefix("about:plugins"), url-prefix("about:cache"), url-prefix("about:checkerboard") { table { border: 1px solid var(--in-content-table-border-color) !important; border-radius: 0 !important; } } - @-moz-document url-prefix("about:cache"), - url-prefix("about:checkerboard") { + @-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") { th, td { border: 1px solid var(--in-content-table-border-color) !important; @@ -1957,8 +1934,7 @@ } } /*= Directory View ===========================================================*/ - @-moz-document url-prefix("about:sync-log"), - regexp("^(((jar:)?file:///)|(chrome://)).*/$") + @-moz-document url-prefix("about:sync-log"), regexp("^(((jar:)?file:///)|(chrome://)).*/$") { body { background-color: var(--in-content-box-background) !important; @@ -2738,9 +2714,7 @@ } /** Monospace *****************************************************************/ @supports -moz-bool-pref("userContent.page.monospace") { - @-moz-document url-prefix("about:"), - url-prefix("chrome://browser/content/places/places.xhtml"), - regexp("^(((jar:)?file:///)|(chrome://)).*/$") + @-moz-document url-prefix("about:"), url-prefix("chrome://browser/content/places/places.xhtml"), regexp("^(((jar:)?file:///)|(chrome://)).*/$") { * { font-family: -moz-fixed; @@ -2750,8 +2724,8 @@ /** Menu - Icons Layout *******************************************************/ @supports not -moz-bool-pref("userChrome.icon.disabled") { @supports -moz-bool-pref("userChrome.icon.menu") { - @-moz-document url("chrome://browser/content/places/places.xhtml"), - url("about:downloads") { + @-moz-document url("chrome://browser/content/places/places.xhtml"), url("about:downloads") + { menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]), menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) { -moz-appearance: none !important; /* Linux: menulist */ diff --git a/docs/Restrictions.md b/docs/Restrictions.md index 3a678f2..6baa6a9 100644 --- a/docs/Restrictions.md +++ b/docs/Restrictions.md @@ -10,6 +10,7 @@ * [`-moz-accent-color`](#-moz-accent-color) * [Fork Browsers](#fork-browsers) * [Add-ons](#add-ons) + * [SCSS](#scss) - [Internals](#internals) * [CSS Loading Order](#css-loading-order) * [DOM structure cannot be modified](#dom-structure-cannot-be-modified) @@ -126,6 +127,14 @@ Legacy addons can be loaded by [Auto config's feature](./Preference.md#auto-conf List of legacy addons supported by this project: - [Tab Mix Plus](https://github.com/onemen/TabMixPlus) +### SCSS + +Due to [various compatibility](#firefox-version) and [option dependency](https://github.com/black7375/Firefox-UI-Fix/wiki/Options) requirements, we are using a CSS preprocessor, [SCSS](https://sass-lang.com/). + +[`-moz-document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document) has been [deprecated in SCSS](https://sass-lang.com/documentation/breaking-changes/moz-document), and displays a lot of warnings. + +Unlike normal cases, this project works because it is [at the UA sheet level](https://bugzilla.mozilla.org/show_bug.cgi?id=1035091), and we have to [hide warnings](https://github.com/black7375/Firefox-UI-Fix/commit/300d3d9c77108520c3757a8898819d8af6a00c62) to show other critical errors. + ## Internals ### CSS Loading Order User CSS (`userChrome.css`, `userContent.css`) is usually loaded first. diff --git a/icons/panelarrow-vertical-reverse.svg b/icons/panelarrow-vertical-reverse.svg new file mode 100644 index 0000000..d274759 --- /dev/null +++ b/icons/panelarrow-vertical-reverse.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/panelarrow-vertical.svg b/icons/panelarrow-vertical.svg new file mode 100644 index 0000000..55d016c --- /dev/null +++ b/icons/panelarrow-vertical.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/icons/tab-bottom-corner-left-australis-clipped.svg b/icons/tab-bottom-corner-left-australis-clipped.svg new file mode 100644 index 0000000..6467247 --- /dev/null +++ b/icons/tab-bottom-corner-left-australis-clipped.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-left-australis.svg b/icons/tab-bottom-corner-left-australis.svg new file mode 100644 index 0000000..955e390 --- /dev/null +++ b/icons/tab-bottom-corner-left-australis.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/tab-bottom-corner-left-chrome-clipped.svg b/icons/tab-bottom-corner-left-chrome-clipped.svg new file mode 100644 index 0000000..24ae50b --- /dev/null +++ b/icons/tab-bottom-corner-left-chrome-clipped.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-left-chrome.svg b/icons/tab-bottom-corner-left-chrome.svg new file mode 100644 index 0000000..fda2f96 --- /dev/null +++ b/icons/tab-bottom-corner-left-chrome.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/tab-bottom-corner-left-chromeLegacy-clipped.svg b/icons/tab-bottom-corner-left-chromeLegacy-clipped.svg new file mode 100644 index 0000000..da5e1b8 --- /dev/null +++ b/icons/tab-bottom-corner-left-chromeLegacy-clipped.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-left-chromeLegacy.svg b/icons/tab-bottom-corner-left-chromeLegacy.svg new file mode 100644 index 0000000..5b71bd8 --- /dev/null +++ b/icons/tab-bottom-corner-left-chromeLegacy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/tab-bottom-corner-left-edge-clipped.svg b/icons/tab-bottom-corner-left-edge-clipped.svg new file mode 100644 index 0000000..e92817e --- /dev/null +++ b/icons/tab-bottom-corner-left-edge-clipped.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-left-edge.svg b/icons/tab-bottom-corner-left-edge.svg new file mode 100644 index 0000000..d24d02c --- /dev/null +++ b/icons/tab-bottom-corner-left-edge.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/tab-bottom-corner-left-wave-clipped.svg b/icons/tab-bottom-corner-left-wave-clipped.svg new file mode 100644 index 0000000..5d70865 --- /dev/null +++ b/icons/tab-bottom-corner-left-wave-clipped.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-left-wave.svg b/icons/tab-bottom-corner-left-wave.svg new file mode 100644 index 0000000..32e0c1b --- /dev/null +++ b/icons/tab-bottom-corner-left-wave.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/tab-bottom-corner-right-australis-cilpped.svg b/icons/tab-bottom-corner-right-australis-cilpped.svg new file mode 100644 index 0000000..409e3bd --- /dev/null +++ b/icons/tab-bottom-corner-right-australis-cilpped.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-right-australis.svg b/icons/tab-bottom-corner-right-australis.svg new file mode 100644 index 0000000..aef6e0e --- /dev/null +++ b/icons/tab-bottom-corner-right-australis.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/tab-bottom-corner-right-chrome-clipped.svg b/icons/tab-bottom-corner-right-chrome-clipped.svg new file mode 100644 index 0000000..96baab9 --- /dev/null +++ b/icons/tab-bottom-corner-right-chrome-clipped.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-right-chrome.svg b/icons/tab-bottom-corner-right-chrome.svg new file mode 100644 index 0000000..ace5206 --- /dev/null +++ b/icons/tab-bottom-corner-right-chrome.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/tab-bottom-corner-right-chromeLegacy-clipped.svg b/icons/tab-bottom-corner-right-chromeLegacy-clipped.svg new file mode 100644 index 0000000..1e4b049 --- /dev/null +++ b/icons/tab-bottom-corner-right-chromeLegacy-clipped.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-right-chromeLegacy.svg b/icons/tab-bottom-corner-right-chromeLegacy.svg new file mode 100644 index 0000000..9749ab7 --- /dev/null +++ b/icons/tab-bottom-corner-right-chromeLegacy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/tab-bottom-corner-right-edge-clipped.svg b/icons/tab-bottom-corner-right-edge-clipped.svg new file mode 100644 index 0000000..20bde7c --- /dev/null +++ b/icons/tab-bottom-corner-right-edge-clipped.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-right-edge.svg b/icons/tab-bottom-corner-right-edge.svg new file mode 100644 index 0000000..a9de51f --- /dev/null +++ b/icons/tab-bottom-corner-right-edge.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/tab-bottom-corner-right-wave-clipped.svg b/icons/tab-bottom-corner-right-wave-clipped.svg new file mode 100644 index 0000000..6bbb9ac --- /dev/null +++ b/icons/tab-bottom-corner-right-wave-clipped.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-right-wave.svg b/icons/tab-bottom-corner-right-wave.svg new file mode 100644 index 0000000..343b26d --- /dev/null +++ b/icons/tab-bottom-corner-right-wave.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/package.json b/package.json index 50cdabd..65ffe43 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Lepton", - "version": "5.0.0", + "version": "7.0.0", "description": "I respect proton UI and aim to improve it. ", "author": "alstjr7375 ", "license": "MPL 2.0", diff --git a/src/autohide/_back_button.scss b/src/autohide/_back_button.scss index beab781..21cc162 100644 --- a/src/autohide/_back_button.scss +++ b/src/autohide/_back_button.scss @@ -1,5 +1,5 @@ #back-button[disabled="true"] { - margin-left: -36px !important; + margin-left: var(--uc-toolbarbutton-hide-size) !important; opacity: 0 !important; pointer-events: none; } diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 1fde6d6..35ed7d7 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -3,15 +3,40 @@ --uc-autohide-toolbar-delay: 600ms; } -@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") { +@include Option( + "userChrome.autohide.tabbar", + "userChrome.autohide.navbar", + "userChrome.autohide.bookmarkbar", + "userChrome.tabbar.one_liner", + "userChrome.tabbar.on_bottom.menubar_on_top", + "userChrome.hidden.tabbar", + "userChrome.navbar.as_sidebar" +) { :root { - --uc-tabbar-height: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); + --uc-tabbar-height: var(--uc-tabbar-height-default); + --uc-tabbar-height-default: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); --uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height)); - --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); + + --uc-navbar-height: var(--uc-navbar-height-default); + --uc-navbar-height-default: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); - --uc-bm-height: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */ + + --uc-bm-height: var(--uc-bm-height-default); + --uc-bm-height-default: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); + // Mac - None exist + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/base/content/browser.css#L131 + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/linux/browser.css#L327 + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser-aero.css#L14 + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser.css#L65 + $_menubarPadding: 1px * 2; // menubar padding block 1px + $_menubarHeightDefault: 1rem + 0.3rem * 2; // text 1rem, menu padding 0.3em + --uc-titlebar-buttonbox-height: #{ 32px + $_menubarPadding }; + --uc-menubar-height: 0px; + --uc-menubar-height-default: #{ calc($_menubarHeightDefault + $_menubarPadding) }; + --uc-menubar-inner-height: #{ calc($_menubarHeightDefault - $_menubarPadding) }; + @include Option("userChrome.hidden.tabbar") { @include OneLinerNavbarContent() { --uc-tabbar-height: 0px; @@ -22,13 +47,57 @@ } } @include Has { + :root { + &:not([tabsintitlebar]):has(#toolbar-menubar) { + --uc-menubar-height: var(--uc-menubar-height-default); // text 1rem, menu padding 0.3em + } + + &[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { + @include OS($linux) { + --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); + } + @include OS($win10) { + --uc-menubar-height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); + } + @include OS($win7, $win8) { + --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin)); + } + } + &[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) { + --uc-menubar-height: var(--uc-titlebar-buttonbox-height); + } + + &:not([tabsintitlebar]), + &[tabsintitlebar] { + &:has(#toolbar-menubar[autohide="true"][inactive="true"]) { + --uc-menubar-height: 0px; + } + } + } + #navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) { --uc-bm-height: 0px; } + + @include Option("userChrome.navbar.as_sidebar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]) #nav-bar { + --uc-bm-height: var(--uc-bm-height-default); // Re-calculate to force!! + } + @include Option("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]):not(:hover) #nav-bar { + --uc-bm-height: 0px; + } + } + } } } -@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") { +@include Option( + "userChrome.autohide.tabbar", + "userChrome.autohide.navbar", + "userChrome.autohide.bookmarkbar", + "userChrome.autohide.infobar" +) { #navigator-toolbox { position: relative; &:is(:hover, :focus-within) { diff --git a/src/autohide/_forward_button.scss b/src/autohide/_forward_button.scss index 5024524..4e6e240 100644 --- a/src/autohide/_forward_button.scss +++ b/src/autohide/_forward_button.scss @@ -1,5 +1,5 @@ #forward-button[disabled="true"] { - margin-left: -36px !important; + margin-left: var(--uc-toolbarbutton-hide-size) !important; opacity: 0 !important; pointer-events: none; } diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 3864d5e..805c44e 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -1,3 +1,9 @@ +@include Option("userChrome.autohide.back_button", "userChrome.autohide.forward_button") { + :root { + --uc-toolbarbutton-hide-size: calc(-1 * (16px + (2 * var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)))); + } +} + @include Option("userChrome.autohide.back_button") { @import "back_button"; } diff --git a/src/bookmarkbar/_index.scss b/src/bookmarkbar/_index.scss new file mode 100644 index 0000000..360dee0 --- /dev/null +++ b/src/bookmarkbar/_index.scss @@ -0,0 +1,3 @@ +@include Option("userChrome.bookmarkbar.multi_row") { + @import "_multi_row"; +} diff --git a/src/bookmarkbar/_multi_row.scss b/src/bookmarkbar/_multi_row.scss new file mode 100644 index 0000000..06dbd38 --- /dev/null +++ b/src/bookmarkbar/_multi_row.scss @@ -0,0 +1,34 @@ +// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_bookmarks.css made available under Mozilla Public License v. 2.0 +// See the above repository for updates as well as full license text. + +#PersonalToolbar { + --uc-multirow-bookmark-rows: 3; + --uc-multirow-bookmark-row-margin: 2px; + max-height: none !important; +} + +#PlacesToolbar > hbox { + display: block; + width: 100vw; +} + +#PlacesToolbarItems { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + scroll-snap-type: y mandatory; + max-height: calc(var(--uc-multirow-bookmark-rows) * + (var(--uc-bm-height, calc(20px + (2 * var(--bookmark-block-padding, 4px)))) + + (2 * var(--uc-multirow-bookmark-row-margin)))) !important; +} + +// Hide the all-bookmarks button +#PlacesChevron { + display: none; +} + +// Add some spacing between rows +#PlacesToolbarItems > .bookmark-item { + scroll-snap-align: start; + margin-block: var(--uc-multirow-bookmark-row-margin) !important; +} diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss new file mode 100644 index 0000000..e237209 --- /dev/null +++ b/src/combined/_back_forward_button.scss @@ -0,0 +1,125 @@ +//-- Mixin --------------------------------------------------------------------- +@import "combined_circle_button"; + +@mixin _combined_nav_button_background($autohideOptionName) { + > .toolbarbutton-icon { + @include circle_button_background; + } + &:not([disabled], [open]):hover > .toolbarbutton-icon { + @include circle_button_background_hover; + } + &[open] > .toolbarbutton-icon, + &:not([disabled]):hover:active > .toolbarbutton-icon { + @include circle_button_background_active; + } + + &[disabled="true"] { + > .toolbarbutton-icon { + background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @include NotOption($autohideOptionName) { + &[disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } + } +} +@mixin _combined_forward_button_background() { + @include _combined_nav_button_background("userChrome.autohide.forward_button"); +} +@mixin _combined_back_button_background() { + @include _combined_nav_button_background("userChrome.autohide.back_button"); +} + +@mixin _back_button_circle_shape() { + @include circle_button_shape($backButton: true); +} + +//------------------------------------------------------------------------------ + +#nav-bar-customization-target > { + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or + (not (-moz-bool-pref("userChrome.combined.sub_button.as_normal") and + -moz-bool-pref("userChrome.combined.nav_button") and + -moz-bool-pref("userChrome.combined.urlbar.home_button") + )) { + #forward-button { + --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); + + z-index: 2; + position: relative; + + > .toolbarbutton-icon { + padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + + @include Option("userChrome.combined.urlbar.nav_button") { + padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ + } + @include NotOption("userChrome.combined.urlbar.nav_button") { + @include NotOption("userChrome.combined.sub_button.none_background") { + @include Option("userChrome.combined.urlbar.home_button") { + @include NotOption("userChrome.combined.nav_button.home_button") { + @include _combined_forward_button_background; + } + } + @include NotOption("userChrome.combined.urlbar.home_button") { + @include _combined_forward_button_background; + } + } + } + + @include NotOption("userChrome.autohide.forward_button") { + margin-inline-start: var(--uc-forward-button-margin) !important; + } + @include Option("userChrome.autohide.forward_button") { + &:not([disabled="true"]) { + margin-inline-start: var(--uc-forward-button-margin) !important; + } + } + } + } + + #back-button { + position: relative; + + @include NotOption("userChrome.combined.urlbar.home_button") { + @include NotOption("userChrome.combined.nav_button.home_button") { + @include _combined_back_button_background; + } + } + @include Option( + "userChrome.combined.nav_button.home_button", + "userChrome.combined.urlbar.home_button" + ) { + z-index: 2; + + @include NotOption("userChrome.combined.sub_button.as_normal") { + margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; + + @include NotOption("userChrome.combined.sub_button.none_background") { + @include _combined_back_button_background; + } + > .toolbarbutton-icon { + padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + } + } + + @include NotOption("userChrome.combined.nav_button.home_button") { + @include Option("userChrome.combined.urlbar.nav_button") { + @include NotOption("userChrome.combined.urlbar.home_button") { + @include _back_button_circle_shape; + } + } + @include NotOption("userChrome.combined.urlbar.nav_button") { + @include _back_button_circle_shape; + } + } + } +} diff --git a/src/combined/_combined_circle_button.scss b/src/combined/_combined_circle_button.scss new file mode 100644 index 0000000..12bd1f4 --- /dev/null +++ b/src/combined/_combined_circle_button.scss @@ -0,0 +1,62 @@ +@mixin circle_button_shape($backButton: false) { + z-index: 3 !important; + + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + + padding-block: 0 !important; + + @include Option("userChrome.padding.toolbar_button") { + @include Option("userChrome.padding.toolbar_button.compact") { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + + @if $backButton { + @include NotOption("userChrome.autohide.back_button") { + padding-inline-end: 0 !important; + } + @include Option("userChrome.autohide.back_button") { + &:not([disabled="true"]) { + padding-inline-end: 0 !important; + } + &[disabled="true"] { + padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; + } + } + } + @else { + padding-inline-end: 0 !important; + } + + > menupopup { + margin-top: -1px !important; + } + + > .toolbarbutton-icon { + @if not $backButton { + @include circle_button_background; + } + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important + } +} + +@mixin circle_button_background() { + background-color: var(--uc-combined-circlebutton-background); +} +@mixin circle_button_background_hover() { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0,0%,0%,.1); + border-color: hsla(240,5%,5%,.35); +} +@mixin circle_button_background_active() { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240,5%,5%,.40); +} diff --git a/src/combined/_home_button.scss b/src/combined/_home_button.scss new file mode 100644 index 0000000..e826c12 --- /dev/null +++ b/src/combined/_home_button.scss @@ -0,0 +1,13 @@ +@import "combined_circle_button"; + +#nav-bar-customization-target > #home-button { + position: relative; + @include circle_button_shape; + + &:hover > .toolbarbutton-icon { + @include circle_button_background_hover; + } + &:hover:active > .toolbarbutton-icon { + @include circle_button_background_active; + } +} diff --git a/src/combined/_index.scss b/src/combined/_index.scss new file mode 100644 index 0000000..216b4b5 --- /dev/null +++ b/src/combined/_index.scss @@ -0,0 +1,152 @@ +/*= Combined - At URL bar ====================================================*/ +@include Option( + "userChrome.combined.nav_button", + "userChrome.combined.nav_button.home_button", + "userChrome.combined.urlbar.nav_button", + "userChrome.combined.urlbar.home_button", + "userChrome.combined.urlbar.reload_button" +) { + // Init + #nav-bar { + // Color + --uc-combined-circlebutton-background: hsla(0,100%,100%,.5); + --uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background); + --uc-combined-circlebutton-active-background: var(--toolbarbutton-active-background); + --uc-combined-circlebutton-border-color: hsla(240,5%,5%,.3); + &[brighttext] { + // Original: Using :-moz-lwtheme + --uc-combined-circlebutton-background: var(--toolbarbutton-hover-background); + --uc-combined-circlebutton-hover-background: var(--toolbarbutton-active-background); + --uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent); + } + + // Padding & Size + --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); + --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); + --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); + --uc-toolbarbutton-halfsize: calc(6px + var(--uc-toolbarbutton-boundary)); + + --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); + } + + #nav-bar-customization-target > * { + -moz-box-ordinal-group: 1; + } + // Preserve + // `back` -> 2 + // `home` -> 3 + // `forward` -> 4 + #nav-bar-customization-target > #urlbar-container { + -moz-box-ordinal-group: 5; + } + // `reload` -> 6 + #nav-bar-customization-target > #urlbar-container ~ * { + -moz-box-ordinal-group: 7; + } +} + +@include Option("userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #urlbar-container { + /* var(--urlbar-margin-inline) */ + margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin, 0px)) !important; + + > #urlbar:not([breakout][breakout-extend]) { + padding-left: var(--uc-urlbar-combined-margin, 0px); + } + + @include Option("userChrome.combined.urlbar.nav_button") { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); + } + @include NotOption("userChrome.combined.urlbar.nav_button") { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-halfsize); + + @include Option("userChrome.combined.nav_button") { + @include Option("userChrome.combined.nav_button.home_button") { + @include Option("userChrome.combined.urlbar.home_button") { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); + } + } + } + } + } + #nav-bar-customization-target > #forward-button[disabled="true"] ~ #urlbar-container > #urlbar { + @include Option("userChrome.combined.urlbar.nav_button") { + @include Option("userChrome.autohide.forward_button") { + &:not([breakout][breakout-extend]) { + padding-left: calc(var(--uc-urlbar-combined-margin, 0px) - var(--urlbar-icon-padding)); + } + } + @include Animate { + transition-property: margin-left, padding-left; + transition-duration: 0.5s; + transition-timing-function: var(--animation-easing-function); + } + } + } +} + +@include Option("userChrome.combined.nav_button", "userChrome.combined.urlbar.nav_button") { + @import "back_forward_button"; +} +@include Option("userChrome.combined.nav_button") { + @include Option("userChrome.combined.nav_button.home_button") { + @import "home_button"; + } +} + +@include Option("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > { + #back-button { + -moz-box-ordinal-group: 2; + } + #forward-button { + -moz-box-ordinal-group: 4; + } + + $button: ":is(toolbarbutton, toolbaritem)"; + @include Option("userChrome.combined.urlbar.home_button") { + $combindButtons: "#back-button, #forward-button, #home-button"; + $target: ":is(#{$combindButtons})"; + $notTarget: "#{$button}:not(#{$combindButtons})"; + + :first-child#{$target} + { + #{$notTarget}, + #{$target} + #{$notTarget}, + #{$target} + #{$target} + #{$button} { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } + } + @include NotOption("userChrome.combined.urlbar.home_button") { + $combindButtons: "#back-button, #forward-button"; + $target: ":is(#{$combindButtons})"; + $notTarget: "#{$button}:not(#{$combindButtons})"; + + :first-child#{$target} + { + #{$notTarget}, + #{$target} + #{$button} { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } + } + } +} +@include Option("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #home-button { + -moz-box-ordinal-group: 3; + + @include NotOption("userChrome.combined.urlbar.nav_button") { + &:is(:first-child) + :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } + } + @import "home_button"; +} +@include Option("userChrome.combined.urlbar.reload_button") { + #nav-bar-customization-target > #stop-reload-button { + -moz-box-ordinal-group: 6; + } + + @import "reload_button"; +} diff --git a/src/combined/_reload_button.scss b/src/combined/_reload_button.scss new file mode 100644 index 0000000..011eae7 --- /dev/null +++ b/src/combined/_reload_button.scss @@ -0,0 +1,22 @@ +// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/reload_button_in_urlbar.css made available under Mozilla Public License v. 2.0 +// See the above repository for updates as well as full license text. +#urlbar { + padding-right: calc(var(--uc-toolbarbutton-size) - (var(--urlbar-margin-inline) / 2)); +} + +#nav-bar-customization-target > #stop-reload-button { + z-index: 3; + position: relative; + + --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color) !important; + + margin-left: calc( -1 * (var(--uc-toolbarbutton-size) + var(--urlbar-margin-inline))); +} + +#nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { + width: var(--uc-urlbar-icon-size) !important; + height: var(--uc-urlbar-icon-size) !important; + + padding: var(--urlbar-icon-padding) !important; +} diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss index c78975b..64edc40 100644 --- a/src/compatibility/_os.scss +++ b/src/compatibility/_os.scss @@ -89,8 +89,8 @@ //-- Mixin --------------------------------------------------------------------- @mixin _os_menuEmulate($bgRate, $bdRate) { - menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"], - menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"] { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover $bgRate, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover $bdRate, transparent) !important; @@ -127,12 +127,15 @@ @include Win10_NativeMenu() { menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] { - background-color: #91c9f7 !important; // color-mix(in srgb, -moz-menuhover 40%, transparent) - border-color: transparent !important; - - &[disabled="true"] { - background-color: color-mix(in srgb, currentColor 9%, transparent) !important; + menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) &, + menupopup:not([placespopup="true"]) & { + background-color: #91c9f7 !important; // color-mix(in srgb, -moz-menuhover 40%, transparent) border-color: transparent !important; + + &[disabled="true"] { + background-color: color-mix(in srgb, currentColor 9%, transparent) !important; + border-color: transparent !important; + } } } } diff --git a/src/compatibility/_theme.scss b/src/compatibility/_theme.scss index 235c123..d46bf5c 100644 --- a/src/compatibility/_theme.scss +++ b/src/compatibility/_theme.scss @@ -83,7 +83,8 @@ menu { } /*= Tab Separator Color ======================================================*/ -#TabsToolbar { +#TabsToolbar, +#nav-bar { --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent); /* 60% at v105 */ } @@ -115,8 +116,8 @@ menu { /* Navbar Border */ #navigator-toolbox:-moz-lwtheme { - --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */ - --lwt-tabs-border-color: rgba(0, 0, 0, 0.3); + --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4) */ + --lwt-tabs-border-color: rgba(0, 0, 0, 0.4); } /*= Findbar Border Color =====================================================*/ diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss index 094af08..a45a1cf 100644 --- a/src/contents/_activity_stream.scss +++ b/src/contents/_activity_stream.scss @@ -1,4 +1,4 @@ -@-moz-document url("about:home"), url("about:newtab") { +@include moz-document(url "about:home", url "about:newtab") { /** Activity Stream - Search Focus Border: like URL *************************/ @include Option("userContent.page.field_border") { /* At DarkMode, Color */ diff --git a/src/contents/_context_menu.scss b/src/contents/_context_menu.scss index 89f92ea..e219505 100644 --- a/src/contents/_context_menu.scss +++ b/src/contents/_context_menu.scss @@ -1,5 +1,7 @@ -@-moz-document url("chrome://browser/content/places/places.xhtml"), - url("about:downloads") { +@include moz-document( + url "chrome://browser/content/places/places.xhtml", + url "about:downloads" +) { @import "../icons/layout/menu_contents"; /*= Context Menu ===========================================================*/ diff --git a/src/contents/_downloads.scss b/src/contents/_downloads.scss index 8f12cce..c3dcb1c 100644 --- a/src/contents/_downloads.scss +++ b/src/contents/_downloads.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:downloads") { +@include moz-document(url-prefix "about:downloads") { @include Animate { @include Option("userChrome.decoration.download_panel") { @import "../decoration/download_panel"; diff --git a/src/contents/_error_page.scss b/src/contents/_error_page.scss index 26283c9..73a1706 100644 --- a/src/contents/_error_page.scss +++ b/src/contents/_error_page.scss @@ -1,7 +1,10 @@ -@-moz-document url-prefix("about:neterror"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), - url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") -{ +@include moz-document( + url-prefix "about:neterror", + url "about:restartrequired", + url "chrome://browser/content/aboutRestartRequired.xhtml", + url "about:sessionrestore", + url "chrome://browser/content/aboutSessionRestore.xhtml" +) { /* Illustrations Position */ #errorPageContainer, .neterror > .container, @@ -66,50 +69,53 @@ //------------------------------------------------------------------------------ -@-moz-document url-prefix("about:neterror?e=connectionFailure"), - url-prefix("about:neterror?e=netInterrupt"), - url-prefix("about:neterror?e=netReset"), - url-prefix("about:neterror?e=netTimeout"), - url-prefix("about:neterror?e=netOffline"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") -{ +@include moz-document( + url-prefix "about:neterror?e=connectionFailure", + url-prefix "about:neterror?e=netInterrupt", + url-prefix "about:neterror?e=netReset", + url-prefix "about:neterror?e=netTimeout", + url-prefix "about:neterror?e=netOffline", + url "about:restartrequired", + url "chrome://browser/content/aboutRestartRequired.xhtml" +) { @include _errorContainerImage("../icons/error-connection-failure.svg"); } -@-moz-document url-prefix("about:neterror?e=dnsNotFound") { +@include moz-document(url-prefix "about:neterror?e=dnsNotFound") { @include _errorContainerImage("../icons/error-server-not-found.svg"); } -@-moz-document url-prefix("about:neterror?e=blockedByPolicy"), - url-prefix("about:neterror?e=deniedPortAccess"), - url-prefix("about:neterror?e=malformedURI") { +@include moz-document( + url-prefix "about:neterror?e=blockedByPolicy", + url-prefix "about:neterror?e=deniedPortAccess", + url-prefix "about:neterror?e=malformedURI" +) { @include _errorContainerImage("chrome://browser/skin/illustrations/error-malformed-url.svg"); } -@-moz-document url-prefix("about:neterror?e=clockSkewError"), - url-prefix("about:neterror?e=nssFailure") { +@include moz-document( + url-prefix "about:neterror?e=clockSkewError", + url-prefix "about:neterror?e=nssFailure" +) { @include _errorContainerImage("../icons/blue-berror.svg") { background-size: 18.5em; } } -@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") -{ +@include moz-document(url "about:sessionrestore" , url "chrome://browser/content/aboutSessionRestore.xhtml") { @include _errorDescriptionImage("../icons/error-session-restore.svg"); } -@-moz-document url-prefix("about:neterror?e=fileNotFound") { +@include moz-document(url-prefix "about:neterror?e=fileNotFound") { @include _errorTitleImage("chrome://global/skin/icons/info.svg"); #text-container { padding-inline-start: 0; } } -@-moz-document url-prefix("about:tabcrashed") { +@include moz-document(url-prefix "about:tabcrashed") { @include _errorTitleImage("chrome://browser/skin/tab-crashed.svg"); } -@-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml") -{ +@include moz-document(url "about:robots", url "chrome://browser/content/aboutRobots.xhtml") { @include _errorTitleImage("chrome://browser/content/aboutRobots-icon.png"); } -@-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml") -{ +@include moz-document(url "about:welcomeBack", url "chrome://browser/content/aboutWelcomeBack.xhtml") { @include _errorTitleImage("../icons/welcome-back.svg"); } diff --git a/src/contents/_monospace.scss b/src/contents/_monospace.scss index 30a2c55..ddd32d8 100644 --- a/src/contents/_monospace.scss +++ b/src/contents/_monospace.scss @@ -1,5 +1,7 @@ -@-moz-document url-prefix("about:"), - url-prefix("chrome://browser/content/places/places.xhtml"), - regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { +@include moz-document( + url-prefix "about:", + url-prefix "chrome://browser/content/places/places.xhtml", + regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" +) { @import "../theme/monospace"; } diff --git a/src/contents/_proton_color.scss b/src/contents/_proton_color.scss index 61a7ab8..97adcaf 100644 --- a/src/contents/_proton_color.scss +++ b/src/contents/_proton_color.scss @@ -1,10 +1,12 @@ -@-moz-document url-prefix("about:"), - url-prefix("chrome://browser/content/places/places.xhtml"), - url-prefix("https://addons.mozilla.org"), - url-prefix("https://support.mozilla.org"), - url-prefix("https://accounts.firefox.com"), - url-prefix("view-source"), - regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { +@include moz-document( + url-prefix "about:", + url-prefix "chrome://browser/content/places/places.xhtml", + url-prefix "https://addons.mozilla.org", + url-prefix "https://support.mozilla.org", + url-prefix "https://accounts.firefox.com", + url-prefix "view-source", + regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" +) { @import "../theme/proton_color"; @include Option("userContent.page.proton_color.dark_blue_accent") { diff --git a/src/contents/dark_mode/_accounts_com.scss b/src/contents/dark_mode/_accounts_com.scss index 9796370..9ae0afc 100644 --- a/src/contents/dark_mode/_accounts_com.scss +++ b/src/contents/dark_mode/_accounts_com.scss @@ -1,6 +1,5 @@ /*= Accounts.com ===========================================================*/ -@-moz-document url-prefix("https://accounts.firefox.com") -{ +@include moz-document(url-prefix "https://accounts.firefox.com") { /* Basic */ body { color: var(--in-content-page-color) !important; diff --git a/src/contents/dark_mode/_addons_org.scss b/src/contents/dark_mode/_addons_org.scss index d5de91c..01ff0c9 100644 --- a/src/contents/dark_mode/_addons_org.scss +++ b/src/contents/dark_mode/_addons_org.scss @@ -1,6 +1,5 @@ /*= Addons.org =============================================================*/ -@-moz-document url-prefix("https://addons.mozilla.org") -{ +@include moz-document(url-prefix "https://addons.mozilla.org") { /* Basic */ .Page-content, .SecondaryHero, diff --git a/src/contents/dark_mode/_support_org.scss b/src/contents/dark_mode/_support_org.scss index 41c9cd4..c1bd9b0 100644 --- a/src/contents/dark_mode/_support_org.scss +++ b/src/contents/dark_mode/_support_org.scss @@ -1,6 +1,5 @@ /*= Support.org ============================================================*/ -@-moz-document url-prefix("https://support.mozilla.org") -{ +@include moz-document(url-prefix "https://support.mozilla.org") { /* Basic */ :root { --color-blue-06: var(--in-content-link-color) !important; diff --git a/src/contents/proton_contents/_about_cache.scss b/src/contents/proton_contents/_about_cache.scss index 8e31b35..b9bf04c 100644 --- a/src/contents/proton_contents/_about_cache.scss +++ b/src/contents/proton_contents/_about_cache.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:cache") { +@include moz-document(url-prefix "about:cache") { table { padding: 0 !important; } diff --git a/src/contents/proton_contents/_about_checkerboard.scss b/src/contents/proton_contents/_about_checkerboard.scss index 8d7fd20..f4eac3c 100644 --- a/src/contents/proton_contents/_about_checkerboard.scss +++ b/src/contents/proton_contents/_about_checkerboard.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:checkerboard") { +@include moz-document(url-prefix "about:checkerboard") { #canvas { border: 1px solid var(--in-content-border-color) !important; } diff --git a/src/contents/proton_contents/_about_memory.scss b/src/contents/proton_contents/_about_memory.scss index a741846..873dd0a 100644 --- a/src/contents/proton_contents/_about_memory.scss +++ b/src/contents/proton_contents/_about_memory.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:memory") { +@include moz-document(url-prefix "about:memory") { .opsRow, .section { background-color: var(--in-content-box-background) !important; diff --git a/src/contents/proton_contents/_about_plugins.scss b/src/contents/proton_contents/_about_plugins.scss index a499ab8..1a98d11 100644 --- a/src/contents/proton_contents/_about_plugins.scss +++ b/src/contents/proton_contents/_about_plugins.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:plugins") { +@include moz-document(url-prefix "about:plugins") { .notice { background: var(--in-content-box-background) !important; border: 1px solid var(--in-content-border-color) !important; diff --git a/src/contents/proton_contents/_directory_view.scss b/src/contents/proton_contents/_directory_view.scss index bbe5ba3..b8feb48 100644 --- a/src/contents/proton_contents/_directory_view.scss +++ b/src/contents/proton_contents/_directory_view.scss @@ -1,5 +1,7 @@ -@-moz-document url-prefix("about:sync-log"), - regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { +@include moz-document( + url-prefix "about:sync-log", + regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" +) { body { background-color: var(--in-content-box-background) !important; margin: 4em auto !important; /* Override to default */ diff --git a/src/contents/proton_contents/_field_border.scss b/src/contents/proton_contents/_field_border.scss index 3b60cc4..19044c0 100644 --- a/src/contents/proton_contents/_field_border.scss +++ b/src/contents/proton_contents/_field_border.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:") { +@include moz-document(url-prefix "about:") { html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover, html|textarea:hover, xul|search-textbox:hover { diff --git a/src/contents/proton_contents/_proton_commons.scss b/src/contents/proton_contents/_proton_commons.scss index 757bc58..9be371a 100644 --- a/src/contents/proton_contents/_proton_commons.scss +++ b/src/contents/proton_contents/_proton_commons.scss @@ -1,10 +1,12 @@ /*= abouts' common ===========================================================*/ -@-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard"), - url-prefix("about:sync-log"), - url-prefix("about:memory"), - regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { +@include moz-document( + url-prefix "about:plugins", + url-prefix "about:cache", + url-prefix "about:checkerboard", + url-prefix "about:sync-log", + url-prefix "about:memory", + regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" +) { /* Base */ html, body { @@ -211,16 +213,20 @@ } } -@-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard") { +@include moz-document( + url-prefix "about:plugins", + url-prefix "about:cache", + url-prefix "about:checkerboard" +) { table { border: 1px solid var(--in-content-table-border-color) !important; border-radius: 0 !important; } } -@-moz-document url-prefix("about:cache"), - url-prefix("about:checkerboard") { +@include moz-document( + url-prefix "about:cache", + url-prefix "about:checkerboard" +) { th, td { border: 1px solid var(--in-content-table-border-color) !important; diff --git a/src/contents/proton_contents/_view_source.scss b/src/contents/proton_contents/_view_source.scss index 3b6845e..564de5e 100644 --- a/src/contents/proton_contents/_view_source.scss +++ b/src/contents/proton_contents/_view_source.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("view-source") { +@include moz-document(url-prefix "view-source") { :root { background-color: var(--in-content-page-background) !important; /* Original: white */ color: var(--in-content-page-color) !important; /* Original: black */ diff --git a/src/counter/_bookmark_menu.scss b/src/counter/_bookmark_menu.scss new file mode 100644 index 0000000..62359f8 --- /dev/null +++ b/src/counter/_bookmark_menu.scss @@ -0,0 +1,17 @@ +menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { + counter-reset: bookmark-counts 0; +} +menupopup[placespopup="true"] > menu.bookmark-item::after { + display: -moz-inline-box; + content: "(" counter(bookmark-counts) ")"; +} + +menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text, +menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container, +menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { + -moz-box-ordinal-group: 2; +} + +menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item { + counter-increment: bookmark-counts; +} diff --git a/src/counter/_index.scss b/src/counter/_index.scss new file mode 100644 index 0000000..2fea34a --- /dev/null +++ b/src/counter/_index.scss @@ -0,0 +1,9 @@ +/*= Counter for Tab ==========================================================*/ +@include Option("userChrome.counter.tab") { + @import "tab"; +} + +/*= Counter for Bookmark menu ================================================*/ +@include Option("userChrome.counter.bookmark_menu") { + @import "bookmark_menu"; +} diff --git a/src/counter/_tab.scss b/src/counter/_tab.scss new file mode 100644 index 0000000..baeae33 --- /dev/null +++ b/src/counter/_tab.scss @@ -0,0 +1,100 @@ +//-- Mixin --------------------------------------------------------------------- +@mixin _tab_counter_without_centered() { + @include Option("userChrome.centered.tab") { + @include NotOption("userChrome.centered.tab.label") { + @content; + } + } + @include NotOption("userChrome.centered.tab") { + @content; + } +} + +// Copy from "../tab/sound_tab/show_with_favicons" +@mixin _hidden_tabIcon_soundTabLabel() { + @include NotOption("userChrome.hidden.tab_icon") { + @content; + } + @include Option("userChrome.hidden.tab_icon") { + @include NotOption("userChrome.hidden.tab_icon.always") { + @content; + } + } +} + +//------------------------------------------------------------------------------ + +#tabbrowser-tabs { + counter-reset: tab-counts; +} + +.tabbrowser-tab:not([hidden="true"]) { + counter-increment: tab-counts; + + // https://www.designcise.com/web/tutorial/how-to-add-space-before-or-after-an-element-using-css-pseudo-elements + &[pinned="true"] .tab-label-container::before { + content: "\00a0" counter(tab-counts); + } + &:not([pinned="true"]) .tab-label-container::before { + content: counter(tab-counts) ":\00a0"; + } + + .tab-label-container { + display: grid; + + align-content: safe center; + align-items: safe center; + + @include _tab_counter_without_centered { + justify-content: start; + justify-items: start; + } + + &::before { + display: inline-block; + grid-row: 1; + } + > .tab-text { + grid-row: 1; + } + + &[pinned] { + width: unset !important; /* Original: 0 */ + > .tab-text, + > .tab-secondary-label { + width: 0; + } + } + } +} + +// Like centered label +.tab-label, +.tab-secondary-label { + overflow: hidden; +} + +// Compatibility with sound tab +@include Option("userChrome.tab.sound_with_favicons") { + @include _hidden_tabIcon_soundTabLabel { + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + &[pinned] .tab-label-container { + &[labeldirection=ltr], + &:not([labeldirection]):-moz-locale-dir(ltr) { + --uc-sound-tab-label-position-x: 2px; + } + &[labeldirection=rtl], + &:not([labeldirection]):-moz-locale-dir(rtl) { + --uc-sound-tab-label-position-x: -2px; + } + } + .tab-label-container::before { + transform: translateX(var(--uc-sound-tab-label-position-x, 0px)); + } + } + } + + .tab-label-container::beforee { + transition: transform 0.25s var(--animation-easing-function); + } +} diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 8290d94..341206c 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -79,6 +79,15 @@ } } +@include Option("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target > #stop-reload-button .toolbarbutton-icon { + transition: background-color 2.5s var(--animation-easing-function) !important; + &:hover { + transition: background-color 1.25s var(--animation-easing-function) !important; + } + } +} + /*- Border - Other Fields --------------------------------------------------*/ #search-box, xul|search-textbox.tabsFilter, @@ -146,8 +155,7 @@ xul|search-textbox.tabsFilter, } /*- Expand - Synced Tabs ---------------------------------------------------*/ -@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") -{ +@include moz-document(url "chrome://browser/content/syncedtabs/sidebar.xhtml") { .item-tabs-list { transition: transform 0.2s ease-out, opacity 0.2s ease-out; transform: translateY(0%); @@ -168,8 +176,7 @@ xul|search-textbox.tabsFilter, } /*- Arrow - Synced Tabs ----------------------------------------------------*/ -@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") -{ +@include moz-document(url "chrome://browser/content/syncedtabs/sidebar.xhtml") { /* treechildren::-moz-tree-twisty: Can't apply */ #template-container .item.client { .item-twisty-container { diff --git a/src/decoration/_field_border.scss b/src/decoration/_field_border.scss index 2198c57..6f88223 100644 --- a/src/decoration/_field_border.scss +++ b/src/decoration/_field_border.scss @@ -4,6 +4,12 @@ --toolbar-field-border-color: var(--toolbar-field-focus-border-color); } +@include Option("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target > #stop-reload-button:hover ~ #urlbar-container #urlbar:not([focused="true"]) > #urlbar-background { + --toolbar-field-border-color: var(--toolbar-field-focus-border-color); + } +} + /*- Other Fields -----------------------------------------------------------*/ /* Sidebar */ .sidebar-panel[lwt-sidebar] #search-box:hover, diff --git a/src/decoration/_index.scss b/src/decoration/_index.scss index 711e9b2..e7f33d5 100644 --- a/src/decoration/_index.scss +++ b/src/decoration/_index.scss @@ -3,6 +3,16 @@ @import "cursor"; } +/*= Panel UI Button Separator ================================================*/ +@include Option("userChrome.decoration.panel_button_separator") { + @import "panel_button_separator"; +} + +/*= Panel UI Arrow ===========================================================*/ +@include Option("userChrome.decoration.panel_arrow") { + @import "panel_arrow"; +} + @include Animate { /*= Field Border ===========================================================*/ @include Option("userChrome.decoration.field_border") { diff --git a/src/decoration/_panel_arrow.scss b/src/decoration/_panel_arrow.scss new file mode 100644 index 0000000..ff3587b --- /dev/null +++ b/src/decoration/_panel_arrow.scss @@ -0,0 +1,22 @@ +#appMenu-popup { + background-image: url("../icons/panelarrow-vertical.svg"); + background-repeat: no-repeat; + background-position-x: right 10px; + background-position-y: top; + + -moz-context-properties: fill, stroke; + fill: var(--panel-background); + stroke: var(--panel-border-color); + + &[side="top"] { + margin-top: -8px !important; /* Original: -4px */ + padding-top: 4px; + } + &[side="bottom"] { + background-image: url("../icons/panelarrow-vertical-reverse.svg"); + background-position-y: bottom; + + margin-bottom: -8px !important; /* Original: -4px */ + padding-bottom: 4px; + } +} diff --git a/src/decoration/_panel_button_separator.scss b/src/decoration/_panel_button_separator.scss new file mode 100644 index 0000000..e236267 --- /dev/null +++ b/src/decoration/_panel_button_separator.scss @@ -0,0 +1,13 @@ +:root:not([chromehidden~="toolbar"]) #PanelUI-button { + // Original: not include at [uidensity=compact] + margin-inline-start: 3px; + padding-inline-start: 2px; + border-inline-start: 1px solid; + border-image: linear-gradient( + transparent 4px, + var(--toolbarseparator-color) 4px, + var(--toolbarseparator-color) calc(100% - 4px), + transparent calc(100% - 4px) + ); + border-image-slice: 1; +} diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 633bddf..3047a1c 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -27,6 +27,12 @@ } } +@include Option("userChrome.hidden.titlebar_container") { + .titlebar-buttonbox-container { + display: none !important; + } +} + @include Option("userChrome.hidden.sidebar_header") { @include NotOption("userChrome.hidden.sidebar_header.vertical_tab_only") { #sidebar-header { @@ -47,14 +53,32 @@ @include Option("userChrome.hidden.urlbar_iconbox") { #identity-box[pageproxystate="valid"] { - &.notSecureText #identity-icon-label, - &.chromeUI #identity-icon-box, - &.extensionPage #identity-icon-box { - display: none; - } + @include NotOption("userChrome.hidden.urlbar_iconbox.label_only") { + &.notSecureText #identity-icon-label, + &.chromeUI #identity-icon-box, + &.extensionPage #identity-icon-box { + display: none; + } - &.notSecureText #identity-icon-box { - padding-inline-end: 5px; /* Original: 8px */ + &.notSecureText #identity-icon-box { + padding-inline-end: 5px; /* Original: 8px */ + } + } + @include Option("userChrome.hidden.urlbar_iconbox.label_only") { + &.chromeUI #identity-icon-box, + &.extensionPage #identity-icon-box { + &:not(:hover) { + background-color: transparent !important; + } + + @include NotOption("userChrome.urlbar.iconbox_with_separator") { + padding-inline: var(--urlbar-icon-padding) !important; + } + } + + #identity-icon-label { + display: none !important; + } } } } diff --git a/src/icons/_panel.scss b/src/icons/_panel.scss index f4b059e..87511f5 100644 --- a/src/icons/_panel.scss +++ b/src/icons/_panel.scss @@ -100,6 +100,10 @@ content: url("../icons/screenshot.svg"); } } +#save-page-button { + // #496 #553 + list-style-image: url("../icons/toolbarButton-download.svg") !important; +} #appMenu-settings-button { list-style-image: url("chrome://global/skin/icons/settings.svg"); diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 339835a..000d72e 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -1,14 +1,16 @@ @use "utils/os" as *; @use "utils/option" as *; @use "utils/color_scheme" as *; -@use "utils/theme" as *; @use "utils/accent_color" as *; @use "utils/native_menu" as *; +@use "utils/moz_document" as *; +@use "utils/theme" as *; @use "utils/one_liner" as *; @use "utils/window_control" as *; @use "utils/has" as *; @use "utils/proton_elements" as Proton; @use "sass:selector"; +@use "sass:math"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace html "http://www.w3.org/1999/xhtml"; @@ -39,6 +41,12 @@ /** Tab UI ********************************************************************/ @import "tab/index"; +/** Nav Bar UI ****************************************************************/ +@import "navbar/index"; + +/** Bookark Bar UI ************************************************************/ +@import "bookmarkbar/index"; + /** Url View UI ***************************************************************/ @import "urlview/index"; @@ -48,6 +56,13 @@ /** Sidebar UI ****************************************************************/ @import "sidebar/index"; +/** Combined UI ***************************************************************/ +@import "combined/index"; + +/** Others UI *****************************************************************/ +@import "counter/index"; +@import "others/index"; + /** Fullscreen - Overlap toolbar **********************************************/ @import "fullscreen/index"; diff --git a/src/leptonContent.scss b/src/leptonContent.scss index 50af254..2242f48 100644 --- a/src/leptonContent.scss +++ b/src/leptonContent.scss @@ -3,6 +3,7 @@ @use "utils/color_scheme" as *; @use "utils/accent_color" as *; @use "utils/native_menu" as *; +@use "utils/moz_document" as *; @use "utils/proton_elements" as Proton; @use "sass:selector"; diff --git a/src/library/_chrome.scss b/src/library/_chrome.scss index 9679e20..e368152 100644 --- a/src/library/_chrome.scss +++ b/src/library/_chrome.scss @@ -1,7 +1,6 @@ @import "folder_icons"; -@-moz-document url("chrome://browser/content/places/places.xhtml") -{ +@include moz-document(url "chrome://browser/content/places/places.xhtml") { @include OS($linux) { @import "menubar"; } diff --git a/src/library/_contents.scss b/src/library/_contents.scss index 5987c71..22cee05 100644 --- a/src/library/_contents.scss +++ b/src/library/_contents.scss @@ -1,5 +1,4 @@ -@-moz-document url("chrome://browser/content/places/places.xhtml") -{ +@include moz-document(url "chrome://browser/content/places/places.xhtml") { /** Library - Icons Replace *************************************************/ @include Option("userChrome.icon.library") { @import "folder_icons"; diff --git a/src/navbar/_as_sidebar.scss b/src/navbar/_as_sidebar.scss new file mode 100644 index 0000000..8d813d4 --- /dev/null +++ b/src/navbar/_as_sidebar.scss @@ -0,0 +1,139 @@ +:root { + --uc-navbar-margin-block: var(--toolbarbutton-inner-padding); + --uc-urlbar-margin-top: calc(var(--uc-navbar-height) + var(--uc-navbar-margin-block)); + + --uc-urlbar-container-height: 36px; + --uc-navbar-sideblock-height: calc(var(--uc-urlbar-margin-top) + var(--uc-urlbar-container-height)); +} + +#nav-bar, +#sidebar-box, +#sidebar-header, +#sidebar { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; +} + +#nav-bar, +#wrapper-urlbar-container, +#urlbar-container { + position: absolute !important; +} + +#nav-bar-customization-target { + -moz-box-pack: justify; +} +#nav-bar { + // --toolbarbutton-outer-padding: 0px !important; + z-index: 1; + + margin-top: calc(var(--uc-tabbar-height) + var(--uc-bm-height) + var(--uc-menubar-height) + var(--uc-navbar-margin-block)); // drag space + overflow-y: visible !important; // show urlbar + + background: none !important; + box-shadow: none !important; + + -moz-window-dragging: drag; +} +@include Has { + :root:has(#sidebar-box[hidden="true"]) #nav-bar { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + opacity: 0; + visibility: hidden; // If use `collapse`, inline `--urlbar-toolbar-height` variable is calculated strangely small. + } + :root:has(#sidebar-box[positionend="true"]) #nav-bar { + right: 0; + } +} +@include Animate { + @include Option("userChrome.decoration.animate") { + @include NotOption("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-inline-start 0.25s var(--animation-easing-function), + opacity 0.25s ease-in-out, + visibility 0s linear, + margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition)!important; + will-change: margin-inline-start, opacity, visibility, margin-top; + } + :root:has(#sidebar-box[hidden="true"]) #nav-bar, + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s, 0s, 0.25s, 0s, 0s !important; + } + } + @include Option("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; + will-change: margin-top; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s !important; + } + } + } +} + +#urlbar-container { + top: var(--uc-urlbar-margin-top); + min-width: calc(var(--uc-sidebar-activate-width) - (2 * var(--toolbarbutton-inner-padding))) !important; + + margin-inline: auto !important; /* Original: var(--urlbar-margin-inline) */ + left: 50%; + transform: translateX(-50%); +} +#customizableui-special-spring1, +#customizableui-special-spring2, +#wrapper-customizableui-special-spring1, +#wrapper-customizableui-special-spring2 { + display: none !important; +} + +#sidebar-header { + margin-top: var(--uc-navbar-sideblock-height) !important; + -moz-window-dragging: drag; +} + +:root[customizing="true"] { + #wrapper-urlbar-container { + left: 50%; + } + + #browser[collapsed="true"] { + visibility: visible !important; + + #appcontent { + visibility: collapse; + } + + #sidebar-box { + position: absolute; + height: 100%; + + &[positionend="true"] { + right: 0; + } + } + } + + #customization-container { + --uc-customization-conatiner-margin: var(--uc-navbar-height-default); + @include Option("userChrome.hidden.tabbar") { + --uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default)); + } + + width: calc(100% - var(--uc-sidebar-activate-width)); + height: calc(100% - var(--uc-customization-conatiner-margin)); + } + + &:has(#sidebar-box:not([positionend="true"])) #customization-container { + margin-inline-start: var(--uc-sidebar-activate-width); + } + &:has(#sidebar-box[positionend="true"]) #customization-container { + margin-inline-end: var(--uc-sidebar-activate-width); + } + + #customization-palette-container, + #customization-panel-container { + flex-shrink: 0.5 !important; + } +} diff --git a/src/navbar/_index.scss b/src/navbar/_index.scss new file mode 100644 index 0000000..6d9b9fe --- /dev/null +++ b/src/navbar/_index.scss @@ -0,0 +1,4 @@ +/*= Nav Bar - Navbar comabine with sidebar===================================*/ +@include Option("userChrome.navbar.as_sidebar") { + @import "as_sidebar"; +} diff --git a/src/others/_findbar_floating_on_top.scss b/src/others/_findbar_floating_on_top.scss new file mode 100644 index 0000000..69a033c --- /dev/null +++ b/src/others/_findbar_floating_on_top.scss @@ -0,0 +1,79 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly */ + +#main-window > body > box { + // #navigator-toolbox-background for compatibility + z-index: 1; +} + +findbar { + -moz-box-ordinal-group: 0; + position: relative; + + height: 0 !important; + overflow: visible; + border-top: none !important; + padding: 0 !important; + background: none !important; + pointer-events: none; + z-index: 1; + + // Move findbar so it isn't over the scrollbar + // Delete if you want findbar to begin from right window edge + margin-right: 16px; + border-right: 1px solid var(--chrome-content-separator-color); + + &::before { + content:""; + display: -moz-box; + -moz-box-flex: 200; + } +} + +.findbar-container, +.findbar-closebutton { + border-style: solid; + border-color: var(--chrome-content-separator-color); + background: var(--uc-light-bkgnd-color, var(--toolbar-bgcolor)) !important; + pointer-events: auto; + height: 33px !important; +} + +.findbar-container { + -moz-box-direction: reverse; + border-width: 0 0 1px 1px; + border-radius: var(--toolbarbutton-border-radius) 0 0 var(--toolbarbutton-border-radius) !important; + + > .findbar-find-fast { + padding: var(--toolbarbutton-inner-padding) 1px; + margin: 0 !important; + } + > .findbar-find-status { + display: -moz-box; + overflow: hidden; + text-overflow: ellipsis; + -moz-box-flex: 1; + } + > hbox { + margin-inline: 5px; + } +} + +.findbar-closebutton { + width: 30px !important; /* Original: 24px */ + margin: 0 !important; + border-width: 0 1px 1px 0px; + border-radius: 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 !important; + padding: 2px 5px 2px 3px !important; + overflow: clip; + + image { + padding: 4px; + border-radius: var(--toolbarbutton-border-radius); + } + &:hover > image{ + background: var(--toolbarbutton-hover-background) !important; + } +} diff --git a/src/others/_index.scss b/src/others/_index.scss new file mode 100644 index 0000000..d968582 --- /dev/null +++ b/src/others/_index.scss @@ -0,0 +1,3 @@ +@include Option("userChrome.findbar.floating_on_top") { + @import "findbar_floating_on_top"; +} diff --git a/src/padding/_bookmarkbar.scss b/src/padding/_bookmarkbar.scss index 39e4d5b..aecac18 100644 --- a/src/padding/_bookmarkbar.scss +++ b/src/padding/_bookmarkbar.scss @@ -1,3 +1,4 @@ :root[uidensity="compact"] #PersonalToolbar toolbarbutton { margin-top: 0px !important; /* Original: 2px */ + margin-bottom: 1px !important; } diff --git a/src/padding/_index.scss b/src/padding/_index.scss index 6acdb09..542d889 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -20,6 +20,20 @@ } /*= Tool Bar - Button Padding ================================================*/ +@include Option("userChrome.padding.toolbar_button", "userChrome.tab.newtab_button_smaller") { + :root { + --uc-small-toolbarbutton-inner-padding: 6px; + --uc-toolbarbutton-inner-padding-default: 8px; + } + :root[uidensity="compact"] { + --uc-small-toolbarbutton-inner-padding: 4px; + --uc-toolbarbutton-inner-padding-default: 6px; + } + :root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { + --uc-small-toolbarbutton-inner-padding: 9px; + --uc-toolbarbutton-inner-padding-default: 9px; + } +} @include Option("userChrome.padding.toolbar_button") { @import "toolbar_button"; } @@ -30,8 +44,23 @@ } /*= URL Bar - Reduce Padding =================================================*/ -@include Option("userChrome.padding.urlbar") { - @import "urlbar"; +@include NotOption("userChrome.urlView.as_commandbar") { + @include Option("userChrome.padding.urlbar") { + @import "urlbar"; + } +} +@include Option("userChrome.padding.urlView_expanding", "userChrome.urlView.as_commandbar") { + #urlbar[breakout][breakout-extend] { + top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; + left: 0 !important; + width: 100% !important; + } + + #urlbar[breakout][breakout-extend] > #urlbar-input-container { + height: var(--urlbar-height) !important; + padding-block: 0 !important; + padding-inline: var(--urlbar-container-padding, 0px) !important; + } } @include Option("userChrome.padding.urlView_expanding") { @import "urlview_expanding"; diff --git a/src/padding/_infobar.scss b/src/padding/_infobar.scss index be1e043..81f9e10 100644 --- a/src/padding/_infobar.scss +++ b/src/padding/_infobar.scss @@ -45,7 +45,7 @@ display: block; width: 2px; position: absolute; - background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); + background-image: linear-gradient(0deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); top: 0; inset-inline-start: 0; height: 100%; diff --git a/src/padding/_tabbar_height.scss b/src/padding/_tabbar_height.scss index c899b04..8b0b6a9 100644 --- a/src/padding/_tabbar_height.scss +++ b/src/padding/_tabbar_height.scss @@ -61,14 +61,16 @@ --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; /* Prevent overflow pinned tab bottom margin */ } - :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, - #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], - #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, - #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content { - max-height: var(--tab-min-height) !important; /* Force apply height */ - } - :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { - height: var(--tab-min-height) !important; + @include NotOption("userChrome.tabbar.multi_row") { + :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox, + #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, + #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content { + max-height: var(--tab-min-height) !important; /* Force apply height */ + } + :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { + height: var(--tab-min-height) !important; + } } } diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index 222303c..5c3047c 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -95,8 +95,10 @@ padding-inline: 1px !important; } } - #TabsToolbar:not([multibar]) .tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -1px !important; + @include NotOption("userChrome.tabbar.multi_row") { + #TabsToolbar:not([multibar]) .tabbrowser-tab:not([last-visible-tab]) { + margin-inline-end: -1px !important; + } } } @include Option("userChrome.tab.photon_like_padding") { diff --git a/src/padding/_toolbar_button.scss b/src/padding/_toolbar_button.scss index 928fb05..18537f3 100644 --- a/src/padding/_toolbar_button.scss +++ b/src/padding/_toolbar_button.scss @@ -1,3 +1,9 @@ :root[uidensity="compact"] { --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */ } + +@include Option("userChrome.padding.toolbar_button.compact") { + :root { + --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding) !important; + } +} diff --git a/src/padding/_urlbar.scss b/src/padding/_urlbar.scss index b5cd2bc..d167c05 100644 --- a/src/padding/_urlbar.scss +++ b/src/padding/_urlbar.scss @@ -1,7 +1,6 @@ :root:not([uidensity="touch"]) #urlbar-container, :root:not([uidensity="touch"]) #search-container { padding-block: 3px !important; /* Original: 4px */ - margin-inline: 5px !important; /* Original: 5px */ } :root:not([uidensity="compact"]) #urlbar-container, :root:not([uidensity="compact"]) #search-container { diff --git a/src/padding/_urlview_expanding.scss b/src/padding/_urlview_expanding.scss index 0af7884..e541a24 100644 --- a/src/padding/_urlview_expanding.scss +++ b/src/padding/_urlview_expanding.scss @@ -1,15 +1,3 @@ -#urlbar[breakout][breakout-extend] { - top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; - left: 0 !important; - width: 100% !important; -} - -#urlbar[breakout][breakout-extend] > #urlbar-input-container { - height: var(--urlbar-height) !important; - padding-block: 0 !important; - padding-inline: var(--urlbar-container-padding, 0px) !important; -} - #urlbar[breakout][breakout-extend] > #urlbar-background { animation-name: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important; diff --git a/src/rounding/_square.scss b/src/rounding/_square.scss index fa92deb..9c86f15 100644 --- a/src/rounding/_square.scss +++ b/src/rounding/_square.scss @@ -5,21 +5,32 @@ } @include Option("userChrome.rounding.square_button") { :root { - --toolbarbutton-border-radius: 0 !important; /* Original: 4px */ + --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + } + + .toolbarbutton-1, + .toolbarbutton-icon, + .panel-info-button, + .searchbar-engine-one-off-item, + .urlbarView-button, + .urlbarView-tip-button, + .urlbarView-action, + toolbarbutton.bookmark-item:not(.subviewbutton), + #sidebar-switcher-target { + --toolbarbutton-border-radius: 0; /* Original: 4px */ } button, - findbar toolbarbutton { + findbar toolbarbutton, + .notification-button { border-radius: 0 !important; } } -@include Option("userChrome.rounding.square_tab", "userChrome.round.square_button") { +@include Option("userChrome.rounding.square_tab", "userChrome.rounding.square_button") { /* Fix Tab bar button radius */ - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-icon, - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-text, - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-badge-stack, + #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button), .tab-close-button { - --tab-border-radius: var(--toolbarbutton-border-radius) !important; + --tab-border-radius: var(--toolbarbutton-border-radius); } } @@ -57,12 +68,19 @@ border-radius: 0 !important; } + #urlbar-input-container, #urlbar-background, #searchbar { --toolbarbutton-border-radius: 0; } } +@include Option("userChrome.rounding.square_urlView_item") { + .urlbarView-row-inner { + --toolbarbutton-border-radius: 0; + } +} + @include Option("userChrome.rounding.square_checklabel") { .checkbox-check, xul|*.radio-check { diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss index 4fdcc19..e318acb 100644 --- a/src/sidebar/_overlap.scss +++ b/src/sidebar/_overlap.scss @@ -1,13 +1,16 @@ -@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") { - #sidebar-box { +@include Option( + "userChrome.sidebar.overlap", + "userChrome.autohide.sidebar", + "userChrome.navbar.as_sidebar" +) { + :root { /* Original min-width: 14em; width: 18em; max-width: 36em; */ - --uc-sidebar-width: 40px; - --uc-sidebar-activate-width: 18em; + --uc-sidebar-activate-width: 18rem; --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-fullscreen-width: 4px; --uc-sidebar-shadow-size: 1px; @@ -19,6 +22,16 @@ --uc-autohide-sidebar-speed: 750ms; --uc-autohide-fullscreen-sidebar-speed: 1s; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + } + + #sidebar-splitter { + display: none !important; + } +} + +@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") { + #sidebar-box { + --uc-sidebar-shadow-color: #28282F; z-index: 1 !important; position: relative !important; @@ -32,10 +45,6 @@ #sidebar { display: block; } - - #sidebar-splitter { - display: none !important; - } } @include Option("userChrome.sidebar.overlap") { diff --git a/src/tab/_connect_to_window.scss b/src/tab/_connect_to_window.scss index 4ffcfd1..bf4b9da 100644 --- a/src/tab/_connect_to_window.scss +++ b/src/tab/_connect_to_window.scss @@ -16,8 +16,10 @@ #tabbrowser-tabs { z-index: 1 !important; } -#TabsToolbar:not([multibar]) { - overflow: clip; /* Prevent toolbar area over */ +@include NotOption("userChrome.tabbar.multi_row") { + #TabsToolbar:not([multibar]) { + overflow: clip; /* Prevent toolbar area over */ + } } /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ diff --git a/src/tab/_selected_tab.scss b/src/tab/_selected_tab.scss index b3006a6..fc23332 100644 --- a/src/tab/_selected_tab.scss +++ b/src/tab/_selected_tab.scss @@ -15,11 +15,33 @@ /*= Selected Tab - Bottom Rounded Corner =====================================*/ @include Option("userChrome.tab.bottom_rounded_corner") { - @import "selected_tab/bottom_rounded_corner"; + @include NotOption("userChrome.tab.bottom_rounded_corner.wave") { + @include NotOption("userChrome.tab.bottom_rounded_corner.australis") { + @include NotOption("userChrome.tab.bottom_rounded_corner.chrome") { + @include NotOption("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + @include NotOption("userChrome.tab.bottom_rounded_corner.edge") { + @import "selected_tab/bottom_rounded_corner"; + } + } + } + } + } + @include Option( + "userChrome.tab.bottom_rounded_corner.wave", + "userChrome.tab.bottom_rounded_corner.australis", + "userChrome.tab.bottom_rounded_corner.chrome_legacy", + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + @import "selected_tab/bottom_rounded_corner_others"; + } } /*= Selected Tab - Photon like contextline ===================================*/ -@include Option("userChrome.tab.photon_like_contextline", "userChrome.tab.static_separator") { +@include Option( + "userChrome.tab.photon_like_contextline", + "userChrome.tab.static_separator", + "userChrome.tab.bar_separator") { :root[lwtheme-mozlightdark] #tabbrowser-tabs, /* Legacy: v96 */ :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { diff --git a/src/tab/_unselected_tab.scss b/src/tab/_unselected_tab.scss index ba0a587..b0e4b4d 100644 --- a/src/tab/_unselected_tab.scss +++ b/src/tab/_unselected_tab.scss @@ -1,8 +1,5 @@ /*= Unselected Tab - Dynamic Separator =======================================*/ -@include Option( - "userChrome.tab.dynamic_separator", - "userChrome.tab.dynamic_separtor" -) { +@include Option("userChrome.tab.dynamic_separator") { @import "unselected_tab/dynamic_separator"; } @@ -10,3 +7,8 @@ @include Option("userChrome.tab.static_separator") { @import "unselected_tab/static_separator"; } + +/*= Unselected Tab - Bar Separator ===========================================*/ +@include Option("userChrome.tab.bar_separator") { + @import "unselected_tab/bar_separator"; +} diff --git a/src/tab/clipped_tab/_show_close_button_at_hover.scss b/src/tab/clipped_tab/_show_close_button_at_hover.scss index 8751528..7f82d84 100644 --- a/src/tab/clipped_tab/_show_close_button_at_hover.scss +++ b/src/tab/clipped_tab/_show_close_button_at_hover.scss @@ -1,54 +1,50 @@ -#tabbrowser-tabs[closebuttons="activetab"] +@mixin _closeButtonAtHover() { + .tabbrowser-tab { + &:not([visuallyselected]) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + &:hover .tab-close-button { + visibility: visible !important; + opacity: 1; + } + + @include Option("userChrome.tab.close_button_at_hover.with_selected") { + &:not([pinned]):not(:hover) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + } + } +} + +#tabbrowser-tabs[closebuttons="activetab"] { > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]) { - display: -moz-inline-box !important; + display: -moz-inline-box !important; + } + + @include _closeButtonAtHover; } -#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - visibility: collapse !important; - opacity: 0; -} -#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { - visibility: visible !important; - opacity: 1; -} @include Option("userChrome.tab.close_button_at_hover.always") { - .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - visibility: collapse !important; - opacity: 0; - } - .tabbrowser-tab:hover .tab-close-button { - visibility: visible !important; - opacity: 1; - } + @include _closeButtonAtHover; } /* Animate */ @include Animate { /* Fade out */ - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + .tabbrowser-tab .tab-close-button { transition: opacity 0.1s var(--animation-easing-function) !important; } /* Fade in */ - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { + .tabbrowser-tab:hover .tab-close-button { transition: opacity 0.25s var(--animation-easing-function) !important; } - - @include Option("userChrome.tab.close_button_at_hover.always") { - /* Fade out */ - .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - transition: opacity 0.1s var(--animation-easing-function) !important; - } - - /* Fade in */ - .tabbrowser-tab:hover .tab-close-button { - transition: opacity 0.25s var(--animation-easing-function) !important; - } - } } /* Closed Button's icon thicker */ diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss index a989aae..34ba30c 100644 --- a/src/tab/newtab_button/_looks_like_tab.scss +++ b/src/tab/newtab_button/_looks_like_tab.scss @@ -1,35 +1,75 @@ #tabs-newtab-button { - /* Original: + @include Option("userChrome.tab.connect_to_window") { + /* Size */ + -moz-box-align: stretch !important; + padding-top: var(--tab-block-margin) !important; + } + + @include Option("userChrome.tab.bottom_rounded_corner") { + /* Original: margin: 0 0 var(--tabs-navbar-shadow-size) !important => Can't override style. Therefore, we should approach it by bypass. - */ - --tabs-navbar-shadow-size: -1px; /* Original: 1px */ - --tabs-navbar-original-shadow-size: 1px; - --tab-corner-rounding: 4px; /* Hardcoded */ + */ + --tabs-navbar-shadow-size: -1px; /* Original: 1px */ + --uc-tabs-navbar-shadow-size: 0.5px; + --uc-tab-corner-rounding: 4px; /* Hardcoded */ + --uc-newtab-bgcolor: transparent; - /* Size */ - -moz-box-align: stretch !important; - padding-top: var(--tab-block-margin) !important; + /* Corner Rounding Image */ + --uc-newtab-position: calc((var(--uc-tab-corner-rounding) / 2) * -1); + background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg); + background-repeat: no-repeat; + background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size), + right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size); + background-size: var(--uc-tab-corner-rounding); - /* Corner Rounding Image */ - --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); - background-image: url("../icons/tab-bottom-corner-left.svg"), url("../icons/tab-bottom-corner-right.svg"); - background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), - right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); - background-size: var(--tab-corner-rounding); + /* Corner Rounding Color */ + fill: var(--uc-newtab-bgcolor) !important; + -moz-context-properties: fill !important; - /* Corner Rounding Color */ - fill: transparent !important; - -moz-context-properties: fill !important; + @include Option( + "userChrome.tab.bottom_rounded_corner.wave", + "userChrome.tab.bottom_rounded_corner.australis", + "userChrome.tab.bottom_rounded_corner.chrome_legacy", + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + --uc-newtab-position: 0px; + --uc-newtab-non-corner-bgwidth: 0px; + --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); + --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); + + transform: translateX(var(--uc-tab-corner-half-height-reverse)); + padding-inline: var(--uc-tab-corner-half-height) !important; + overflow-clip-margin: var(--uc-tab-corner-half-height) !important; + + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)), + var(--uc-tab-corner-right-side-svg); + background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size), + center bottom var(--uc-tabs-navbar-shadow-size), + right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size); + background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height), + var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height), + var(--uc-tab-corner-height) var(--uc-tab-corner-height); + background-origin: padding-box; + + @include Option( + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); + } + } + } } /* Corner Rounding Color */ #tabs-newtab-button:hover { - fill: var(--toolbarbutton-hover-background) !important; + --uc-newtab-bgcolor: var(--toolbarbutton-hover-background); } #tabs-newtab-button:hover:active { - fill: var(--toolbarbutton-active-background) !important; + --uc-newtab-bgcolor: var(--toolbarbutton-active-background); } @media (-moz-windows-accent-color-in-titlebar) { @include AccentColor { @@ -49,6 +89,29 @@ transparent ) !important; /* Hardcoded for compatibility */ } + + @include Option("userChrome.tab.bottom_rounded_corner") { + @include Option( + "userChrome.tab.bottom_rounded_corner.wave", + "userChrome.tab.bottom_rounded_corner.australis", + "userChrome.tab.bottom_rounded_corner.chrome_legacy", + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient(to left, color-mix(in srgb, $accentTextColor 10%, transparent), color-mix(in srgb, $accentTextColor 10%, transparent)), + var(--uc-tab-corner-right-side-svg); + } + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient(to left, color-mix(in srgb, $accentTextColor 15%, transparent), color-mix(in srgb, $accentTextColor 15%, transparent)), + var(--uc-tab-corner-right-side-svg); + } + } + } } } @@ -57,8 +120,26 @@ border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) - calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important; + calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--uc-tabs-navbar-shadow-size)) !important; -moz-context-properties: fill, fill-opacity; fill: var(--toolbarbutton-icon-fill); fill-opacity: var(--toolbarbutton-icon-fill-opacity); + + @include Option( + "userChrome.tab.bottom_rounded_corner.wave", + "userChrome.tab.bottom_rounded_corner.australis", + "userChrome.tab.bottom_rounded_corner.chrome_legacy", + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + --tab-border-radius: 0px; + width: unset !important; + padding-inline: 0px !important; + margin-inline: calc(var(--uc-tab-corner-half-height) - #{math.div(15.5px, 2)}) !important; + + background-color: transparent !important; + // background-size: calc((var(--toolbarbutton-inner-padding) * 2 + 16px) - var(--uc-tab-corner-size)) 100%; + // background-repeat: no-repeat; + // background-position: center; + } } diff --git a/src/tab/newtab_button/_smaller_button.scss b/src/tab/newtab_button/_smaller_button.scss index 2d82a83..f49f95c 100644 --- a/src/tab/newtab_button/_smaller_button.scss +++ b/src/tab/newtab_button/_smaller_button.scss @@ -4,11 +4,5 @@ margin-left: 1px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ - --toolbarbutton-inner-padding: 6px; -} -:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: 4px; /* Photon: 6px */ -} -:root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: 9px; /* Photon: 9px */ + --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding); } diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss index 4fc717a..33c396f 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -1,86 +1,129 @@ -#tabbrowser-tabs { - --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 0px; - --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); +#TabsToolbar { + --uc-tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ + --uc-tab-corner-padding: 0px; + --uc-tab-corner-position: calc(var(--uc-tab-corner-padding) - var(--uc-tab-corner-rounding)); + + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg"); } -:root:not([customizing="true"]) tab[visuallyselected] > stack::before, -:root:not([customizing="true"]) tab[visuallyselected] > stack::after { - content: "" !important; +:root:not([customizing="true"]) { + .tabbrowser-tab { + .tab-background { + &::before, + &::after { + /* Box */ + display: block; + position: absolute; + z-index: 1; + bottom: 0; - /* Box */ - display: block !important; - position: absolute !important; - z-index: 1 !important; + /* Shape */ + width: var(--uc-tab-corner-rounding); + height: 100%; - /* Shape */ - width: var(--tab-corner-rounding) !important; - height: 100% !important; + /* Color */ + fill: transparent; + stroke: transparent; + -moz-context-properties: fill, stroke; - /* Color */ - fill: var(--toolbar-bgcolor) !important; - stroke: var( - --tab-line-color, - var(--tabs-border-color, rgba(128, 128, 142, 0.9)) - ) !important; - -moz-context-properties: fill, stroke !important; + /* Image */ + background-size: var(--uc-tab-corner-rounding); + background-repeat: no-repeat; + background-position-y: bottom; - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; -} -: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; -} + @include Option("userChrome.tab.bottom_rounded_corner.all") { + content: ""; + } + @include NotOption("userChrome.tab.color_like_toolbar") { + /* Based on tab background + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); -tab[visuallyselected] > stack::before { - left: var(--tab-corner-position) !important; - background-image: url("../icons/tab-bottom-corner-left.svg"); -} -tab[visuallyselected] > stack::after { - left: auto; - right: var(--tab-corner-position); - background-image: url("../icons/tab-bottom-corner-right.svg"); -} + defaults + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + */ + fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + } + } -@include OS($linux) { - /* Fill color for GTK */ - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after { - /* As GTK Toolbar's background-color + background-image - * --toolbar-non-lwt-bgcolor: -moz-dialog; - * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); - */ - fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; - stroke: transparent !important; + &::before { + left: var(--uc-tab-corner-position); + background-image: var(--uc-tab-corner-left-side-svg); + } + &::after { + right: var(--uc-tab-corner-position); + background-image: var(--uc-tab-corner-right-side-svg); + } + } + + &[visuallyselected] .tab-background { + &::before, + &::after { + @include NotOption("userChrome.tab.bottom_rounded_corner.all") { + content: ""; + } + + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + stroke: var( + --tab-line-color, + var(--tabs-border-color, rgba(128, 128, 142, 0.9)) + ); + } + } + &[multiselected] .tab-background { + &::before, + &::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + } + } + &:hover:not([visuallyselected], [multiselected]) .tab-background { + &::before, + &::after { + fill: color-mix(in srgb, currentColor 11%, transparent); + } + } } - :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { - stroke: transparent !important; - } -} - -@include NotOption("userChrome.tab.color_like_toolbar") { - :root:not([customizing="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]) tab[visuallyselected] > stack::after { - /* Based on tab background - background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); - - defaults - background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); - */ - fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + @include Option("userChrome.tab.multi_selected") { + .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background { + &::before, + &::after { + fill: color-mix(in srgb, currentColor 65%, transparent); + opacity: 0.3; + } + } + } + + &::is([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[visuallyselected] .tab-background:-moz-lwtheme { + &::before, + &::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color); + } + } + + @include OS($linux) { + /* Fill color for GTK */ + &:not([lwtheme="true"]) { + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background { + &::before, + &::after { + /* As GTK Toolbar's background-color + background-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog); + stroke: transparent; + opacity: 1; + } + } + #TabsToolbar[brighttext] .tabbrowser-tab[visuallyselected] .tab-background { + &::before, + &::after { + stroke: transparent; + } + } + } } } diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss new file mode 100644 index 0000000..8e46083 --- /dev/null +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -0,0 +1,227 @@ +//-- Mixin --------------------------------------------------------------------- +@function _clipPathURL($svg) { + @return url($svg + "#svgClipPath"); +} +@mixin _clipPath($svg, $position) { + $result: _clipPathURL($svg); + + @if $position == "left" { + --uc-tab-corner-left-side-svg: #{ url($svg) }; + --uc-tab-corner-left-side-clipPath: #{ $result }; + } + @else if $position == "right" { + --uc-tab-corner-right-side-svg: #{ url($svg) }; + --uc-tab-corner-right-side-clipPath: #{ $result }; + } +} +@mixin _tabCornerSVG($left, $right) { + @include _clipPath($left, "left" ); + @include _clipPath($right, "right"); +} + +@mixin _bottomRoundedCornerOtherPadding() { + padding-inline: 0 !important; + overflow-clip-margin: var(--uc-tab-corner-half-size) !important; + + .tab-background { + --tab-border-radius: 0px; + margin-inline: var(--uc-tab-corner-half-size) !important; + position: relative; + + @content; + } +} + +//------------------------------------------------------------------------------ + +#TabsToolbar { + --uc-tab-corner-height: calc(var(--tab-min-height) + 1px); + --uc-tab-corner-size: var(--uc-tab-corner-height); + --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); + --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); + + --uc-tab-corner-bgimage: none; + + @include Option("userChrome.tab.bottom_rounded_corner.wave") { + @include _tabCornerSVG( + "../icons/tab-bottom-corner-left-wave.svg", + "../icons/tab-bottom-corner-right-wave.svg" + ); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); + } + @include Option("userChrome.tab.bottom_rounded_corner.australis") { + @include _tabCornerSVG( + "../icons/tab-bottom-corner-left-australis.svg", + "../icons/tab-bottom-corner-right-australis.svg" + ); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); + } + @include Option("userChrome.tab.bottom_rounded_corner.chrome") { + @include _tabCornerSVG( + "../icons/tab-bottom-corner-left-chrome.svg", + "../icons/tab-bottom-corner-right-chrome.svg" + ); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); + + --uc-tab-corner-size: 16px; // 18px; + } + @include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + @include _tabCornerSVG( + "../icons/tab-bottom-corner-left-chromeLegacy.svg", + "../icons/tab-bottom-corner-right-chromeLegacy.svg" + ); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); + } + @include Option("userChrome.tab.bottom_rounded_corner.edge") { + @include _tabCornerSVG( + "../icons/tab-bottom-corner-left-edge.svg", + "../icons/tab-bottom-corner-right-edge.svg" + ); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); + + --uc-tab-corner-size: 14px; + } +} + +.tabbrowser-tab { + @include Option("userChrome.tab.bottom_rounded_corner.all") { + @include _bottomRoundedCornerOtherPadding; + } + @include NotOption("userChrome.tab.bottom_rounded_corner.all") { + &[visuallyselected] { + @include _bottomRoundedCornerOtherPadding { + &::before, + &::after { + content: ""; + } + } + } + } + + .tab-background { + &::before, + &::after { + /* Box */ + display: block; + position: absolute; + z-index: -1; + bottom: -1px; + + /* Shape */ + width: var(--uc-tab-corner-size); + height: var(--uc-tab-corner-height); + + /* Color */ + fill: transparent; + -moz-context-properties: fill; + + /* Image */ + // background-size: var(--tab-corner-rounding); + background-size: cover, auto auto; + background-repeat: no-repeat, no-repeat; + background-position: bottom, right top; + background-attachment: scroll, fixed; + + @include Option("userChrome.tab.bottom_rounded_corner.all") { + content: ""; + } + @include NotOption("userChrome.tab.color_like_toolbar") { + /* Based on tab background + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); + + defaults + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + */ + fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + } + } + &::before { + right: 100%; + background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage); + clip-path: var(--uc-tab-corner-left-side-clipPath); + } + &::after { + left: 100%; + background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage); + clip-path: var(--uc-tab-corner-right-side-clipPath); + } + } + + &[beforeselected-visible] .tab-background::after { + --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped); + } + &[visuallyselected] + .tabbrowser-tab .tab-background::before { + --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped); + } + // &[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { + // background-image: var(--uc-tab-corner-left-side-svg), var(--lwt-header-image, none) !important; + // } + + &:is([visuallyselected], [multiselected]) .tab-background { + --uc-tab-corner-bgimage: var(--lwt-header-image, none); + + &::before, + &::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + } + } + &:hover:not([visuallyselected], [multiselected]) .tab-background { + &::before, + &::after { + fill: color-mix(in srgb, currentColor 11%, transparent); + } + } +} +@include Option("userChrome.tab.multi_selected") { + .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background { + &::before, + &::after { + fill: var(--uc-multiselected-tab-bgcolor); + } + } +} +#tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme { + --uc-tab-corner-bgimage: none; +} + +@include OS($linux) { + /* Fill color for GTK */ + :root:not([lwtheme="true"]) .tabbrowser-tab { + @include Option("userChrome.tab.box_shadow") { + --uc-tab-shadow-color: rgba(0,0,0, 0.4); + } + &[visuallyselected] .tab-background { + background-clip: content-box; + + &::before, + &::after { + /* As GTK Toolbar's background-color + background-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + --uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor)); + fill: rgba(255, 255, 255, .075); + @include NotOption("userChrome.tab.color_like_toolbar") { + fill: rgba(255, 255, 255, .15); + } + } + } + } +} + +#tabbrowser-tabs { + &[positionpinnedtabs], + &:not([overflow]) .tabbrowser-tab[first-visible-tab], + &[overflow] .tabbrowser-tab[first-visible-unpinned-tab] { + margin-left: var(--uc-tab-corner-half-size) !important; + } +} +.tabbrowser-tab[last-visible-tab] { + margin-right: var(--uc-tab-corner-half-size) !important; +} diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 1c29fc7..864d532 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -1,36 +1,35 @@ -#TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[visuallyselected="true"]:not(:focus) - > .tab-stack - > .tab-background:-moz-lwtheme { - /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) - Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - box-shadow: 0 0 1px var(--toolbar-color) !important; -} -#TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[multiselected]:not([visuallyselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; +$ucTabBasicShadow: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); +$ucTabAdditionalShadow: drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); +$ucTabBackgroundShadowSoft: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); +$ucTabBackgroundShadowHard: drop-shadow(-1px -0.5px 0px var(--uc-tab-shadow-color, transparent)) + drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)); + +#TabsToolbar { + --uc-tab-shadow-color: var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))); + --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); } -/* 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; +#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: unset !important; + filter: $ucTabBasicShadow; } -#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; +:root:is([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([selected], [multiselected]) { + > .tab-stack + > .tab-background:-moz-lwtheme { + filter: $ucTabBackgroundShadowSoft; + } + } + + &[visuallyselected="true"]:not(:focus), + &[multiselected]:not([visuallyselected]) { + // Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) + // Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ + // Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ + --uc-tab-shadow-color: var(--toolbar-color); + } } /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border @@ -41,9 +40,9 @@ .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; + --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); + filter: $ucTabBackgroundShadowHard + $ucTabAdditionalShadow; } :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) @@ -52,6 +51,5 @@ .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; + filter: $ucTabBackgroundShadowHard; } diff --git a/src/tab/selected_tab/_multi_selected.scss b/src/tab/selected_tab/_multi_selected.scss index 12c93c4..225d5c3 100644 --- a/src/tab/selected_tab/_multi_selected.scss +++ b/src/tab/selected_tab/_multi_selected.scss @@ -1,22 +1,37 @@ - #tabbrowser-tabs:not([movingtab]) +#TabsToolbar { + --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); + + &[brighttext] { + --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); + } +} + +#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[multiselected]:not([selected]):-moz-lwtheme { - background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), - linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; -} + > .tab-background[multiselected]:not([selected]) { + /* Original: + background-attachment: scroll, scroll, fixed; + background-color: transparent; + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), + var(--lwt-header-image, none); + background-position: 0 0, 0 0, right top; + background-repeat: repeat-x, repeat-x, no-repeat; + background-size: auto 100%, auto 100%, auto auto; + */ + // background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), + // linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; -.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { - background: color-mix(in srgb, currentColor 65%, transparent); - opacity: 0.3; + background-attachment: scroll, fixed !important; + background-color: transparent !important; + background-image: linear-gradient(var(--uc-multiselected-tab-bgcolor), var(--uc-multiselected-tab-bgcolor)), + var(--lwt-header-image, none) !important; + background-position: 0 0, right top !important; + background-repeat: repeat-x, no-repeat !important; + background-size: auto 100%, auto auto !important; } -#TabsToolbar[brighttext] - .tab-background[multiselected="true"]:not([selected="true"]) - > .tab-loading-burst:not([bursting]) { - opacity: 0.15; -} - @include Option("userChrome.tab.connect_to_window") { .tab-background[multiselected=true] { diff --git a/src/tab/sound_tab/_show_with_favicons.scss b/src/tab/sound_tab/_show_with_favicons.scss index 5f49f83..1b4ac30 100644 --- a/src/tab/sound_tab/_show_with_favicons.scss +++ b/src/tab/sound_tab/_show_with_favicons.scss @@ -69,7 +69,7 @@ --uc-sound-tab-label-position-x: 4px; } &[labeldirection=rtl], - :not([labeldirection]):-moz-locale-dir(rtl) { + &:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-label-position-x: -4px; } diff --git a/src/tab/unselected_tab/_bar_separator.scss b/src/tab/unselected_tab/_bar_separator.scss new file mode 100644 index 0000000..ebd2b52 --- /dev/null +++ b/src/tab/unselected_tab/_bar_separator.scss @@ -0,0 +1,55 @@ +// Using --tab-line-color at photon_line_contextline + +.tab-stack::before { + $barWidth: 3px; + $barMargin: $barWidth + 2px; + + /* Box Model */ + content: ""; + display: block; + position: absolute; + + /* Position */ + top: 50%; + left: 0%; + transform: translateX(calc((var(--inline-tab-padding) - #{ $barMargin }) / 2)) translateY(calc(-50% + var(--tab-block-margin))); + z-index: 1; + + /* Bar shape */ + width: $barWidth; + height: 20px; + + /* Bar Color */ + background-color: var(--uc-bar-separator-color, var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255)))); + + @include Animate { + transition-property: opacity, background-color; + transition-duration: 0.2s; + transition-timing-function: var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } +} + +:root[sessionrestored] { + .tabbrowser-tab[busy] { + .tab-stack::before { + --uc-bar-separator-color: currentColor; + opacity: 0.7; + } + + &[progress] .tab-stack::before { + --uc-bar-separator-color: var(--tab-loading-fill); + opacity: 1; + } + } + #TabsToolbar[brighttext] .tabbrowser-tab[busy] { + &[progress]:not([selected=true]) .tab-stack::before { + --uc-bar-separator-color: var(--lwt-tab-loading-fill-inactive, #84c1ff); + } + } + + @include Option("userChrome.tab.unloaded") { + .tabbrowser-tab[pending] .tab-stack::before { + opacity: 0.7; + } + } +} diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index 071ceae..b55384a 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -40,7 +40,7 @@ } @include Option("userChrome.tab.newtab_button_like_tab") { - .tab-background::before, + .tab-stack::before, #tabs-newtab-button::before { @include _dynamicSeparatorShape; @@ -50,29 +50,29 @@ } @include NotOption("userChrome.tab.newtab_button_like_tab") { - .tab-background::before, + .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { @include _dynamicSeparatorShape; } - .tab-background::before { + .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } - .tabbrowser-tab[last-visible-tab] .tab-background::after { + .tabbrowser-tab[last-visible-tab] .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } -.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { +.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-stack::before { opacity: var(--tab-separator-opacity); } @include Option("userChrome.tabbar.one_liner") { @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { @include OneLinerContent { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @@ -87,29 +87,29 @@ @include NotOption("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { opacity: var(--tab-separator-opacity); } } #navigator-toolbox:not([movingtab]) .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] - .tab-background::before { + .tab-stack::before { opacity: 0 !important; } @include Option("userChrome.tab.newtab_button_like_tab") { #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) ~ .tabbrowser-tab[afterhovered] - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, /* Legacy - v103 */ @@ -122,7 +122,7 @@ @include NotOption("userChrome.tab.newtab_button_like_tab") { .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) - .tab-background::before { + .tab-stack::before { opacity: 0 !important; } @@ -136,7 +136,7 @@ /* Animate */ @include Animate { - .tab-background::before { + .tab-stack::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @include Option("userChrome.tab.newtab_button_like_tab") { @@ -147,7 +147,7 @@ @include NotOption("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } diff --git a/src/tab/unselected_tab/_static_separator.scss b/src/tab/unselected_tab/_static_separator.scss index 9de91a7..e0bafd8 100644 --- a/src/tab/unselected_tab/_static_separator.scss +++ b/src/tab/unselected_tab/_static_separator.scss @@ -2,13 +2,13 @@ --toolbarseparator-color: color-mix(in srgb, currentColor 30%, transparent); } -.tabbrowser-tab[first-visible-tab="true"] .tab-background::before, -.tab-background::after { +.tabbrowser-tab[first-visible-tab="true"] .tab-stack::before, +.tab-stack::after { content: ""; } -.tab-background::before, -.tab-background::after { +.tab-stack::before, +.tab-stack::after { /* Box Model */ display: block; position: absolute; @@ -24,13 +24,13 @@ /* Bar Color */ border-right: 1px solid var(--toolbarseparator-color); } -.tab-background::after { +.tab-stack::after { right: 0; } -.tabbrowser-tab[visuallyselected] .tab-background::before, -.tabbrowser-tab[visuallyselected] .tab-background::after, -.tabbrowser-tab[beforeselected-visible] .tab-background::after { +.tabbrowser-tab[visuallyselected] .tab-stack::before, +.tabbrowser-tab[visuallyselected] .tab-stack::after, +.tabbrowser-tab[beforeselected-visible] .tab-stack::after { @include Option("userChrome.tab.static_separator.selected_accent") { --toolbarseparator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); } @@ -41,8 +41,8 @@ /* Animate */ @include Animate { - .tab-background::before, - .tab-background::after { + .tab-stack::before, + .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } diff --git a/src/tabbar/_fill_width.scss b/src/tabbar/_fill_width.scss new file mode 100644 index 0000000..2da94c5 --- /dev/null +++ b/src/tabbar/_fill_width.scss @@ -0,0 +1,8 @@ +// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_fill_available_width.css made available under Mozilla Public License v. 2.0 +// See the above repository for updates as well as full license text. + +/* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ +.tabbrowser-tab[fadein]:not([style^="max-width"]) { + --tab-max-width: 100vw; + max-width: var(--tab-max-width) !important; +} diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 0f5909d..a6691c4 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -42,3 +42,18 @@ @include Option("userChrome.tabbar.as_titlebar") { @import "as_titlebar"; } + +/*= Tab Bar - Multi Row ======================================================*/ +@include Option("userChrome.tabbar.multi_row") { + @import "multi_row"; +} + +/*= Tab Bar - Scollmode disabled =============================================*/ +@include Option("userChrome.tabbar.unscroll") { + @import "unscroll"; +} + +/*= Tab Bar - Fill width tab =================================================*/ +@include Option("userChrome.tabbar.fill_width") { + @import "fill_width"; +} diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss index 9c78c6a..904e6ab 100644 --- a/src/tabbar/_layout.scss +++ b/src/tabbar/_layout.scss @@ -10,29 +10,33 @@ //------------------------------------------------------------------------------ -@include NotOption("userChrome.tabbar.one_liner") { - @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { - @import "layout/window_control"; - } -} -@include Option("userChrome.tabbar.one_liner") { - @include NotOption("userChrome.tabbar.one_liner.responsive") { - @include _oneLiner_windowControl() { +@include NotOption("userChrome.hidden.titlebar_container") { + @include NotOption("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { @import "layout/window_control"; } } - @include Option("userChrome.tabbar.one_liner.responsive") { - @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { - @media screen and (max-width: 1100px) { - @import "layout/window_control"; - } - } - @media screen and (min-width: 1100px) { + @include Option("userChrome.tabbar.one_liner") { + @include NotOption("userChrome.tabbar.one_liner.responsive") { @include _oneLiner_windowControl() { @import "layout/window_control"; } } + @include Option("userChrome.tabbar.one_liner.responsive") { + @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { + @media screen and (max-width: 1100px) { + @import "layout/window_control"; + } + } + @media screen and (min-width: 1100px) { + @include _oneLiner_windowControl() { + @import "layout/window_control"; + } + } + } + } + + @include NotOption("userChrome.navbar.as_sidebar") { + @import "layout/navbar_padding"; } } - -@import "layout/navbar_padding"; diff --git a/src/tabbar/_multi_row.scss b/src/tabbar/_multi_row.scss new file mode 100644 index 0000000..7fe90cf --- /dev/null +++ b/src/tabbar/_multi_row.scss @@ -0,0 +1,76 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +:root { + --uc-multirow-tabbar-rows: 3; + --uc-multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */ +} + +// Scrollbar can't be clicked but the rows can be scrolled with mouse wheel +// Uncomment the next line if you want to be able to use the scrollbar with mouse clicks +// #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } + +// Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work + +#tabbrowser-tabs { + min-height: unset !important; + padding-inline-start: 0px !important; +} + +@include moz-document(url "chrome://browser/content/browser.xhtml") { + #scrollbutton-up ~ spacer, + #scrollbutton-up, + #scrollbutton-down { + display: var(--scrollbutton-display-model, initial); + } + + scrollbox[part][orient="horizontal"] { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows)); + // scrollbar-color: currentColor transparent; + // scrollbar-width: thin; + // scroll-snap-type: y mandatory; + + // .tabbrowser-tab { + // scroll-snap-align: start; + // } + } +} + +.scrollbox-clip[orient="horizontal"], +#tabbrowser-arrowscrollbox { + overflow: -moz-hidden-unscrollable; + display: block; + --scrollbutton-display-model: none; +} + +#tabbrowser-tabs .tabbrowser-tab[pinned] { + position: static !important; + margin-inline-start: 0px !important; +} + +.tabbrowser-tab[fadein]:not([pinned]) { + flex-grow: var(--uc-multirow-tab-dynamic-width); +} + +.tabbrowser-tab > stack { + width: 100%; + height: 100%; +} + +/* remove bottom margin so it doesn't throw off row height computation */ +#tabs-newtab-button { + margin-bottom: 0 !important; +} +#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button { + display: -moz-box !important; +} + +#alltabs-button, +:root:not([customizing]) #TabsToolbar #new-tab-button, +#tabbrowser-arrowscrollbox > spacer, +.tabbrowser-tab::after { + display: none !important; +} diff --git a/src/tabbar/_on_bottom.scss b/src/tabbar/_on_bottom.scss index 0bcf567..b8095b0 100644 --- a/src/tabbar/_on_bottom.scss +++ b/src/tabbar/_on_bottom.scss @@ -60,17 +60,6 @@ See the above repository for updates as well as full license text. */ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ - :root { - /* height if native titlebar is enabled, assumes empty menubar */ - --uc-menubar-height: 20px; - --uc-menubar-padding: 1px; /* FF's menubar padding */ - --uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding))); - } - :root[tabsintitlebar] { - /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ - --uc-menubar-height: 30px; - } - /* Menubar on top patch - use with tabs_on_bottom.css */ /* Only really useful if menubar is ALWAYS visible */ :root:not([sizemode="fullscreen"]) { @@ -117,10 +106,6 @@ See the above repository for updates as well as full license text. */ --toolbarbutton-inner-padding: 3px; } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - height: var(--uc-menubar-container-height); - } :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container{ visibility: collapse !important; } diff --git a/src/tabbar/_unscroll.scss b/src/tabbar/_unscroll.scss new file mode 100644 index 0000000..f343b0f --- /dev/null +++ b/src/tabbar/_unscroll.scss @@ -0,0 +1,53 @@ +// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries +// https://bugzilla.mozilla.org/show_bug.cgi?id=1744221 + +// `layout.css.container-queries.enabled` to `true` +// `layout.css.overflow-moz-hidden-unscrollable.enabled` to `true` +// `browser.tabs.tabMinWidth` to `0` + +/* Disable scrollbox */ +spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox { + overflow: -moz-hidden-unscrollable !important; +} + +#tabbrowser-tabs[closebuttons="activetab"] { + .tabbrowser-tab:not([pinned]):not([visuallyselected]) { + /* Set minimum width below which tabs will not shrink */ + --tab-min-width: 16px; // or calc(16px + (var(--inline-tab-padding) * 2)) + + container-type: inline-size; + container-name: backgroundTab; + + @container backgroundTab (max-width: 46px) { + .tab-content { + --inline-tab-padding: 0px; + justify-self: center; + } + .tab-icon-stack > * { + margin-inline-end: 0 !important; + } + .tab-label-container, + &:hover .tab-close-button { + visibility: collapse !important; + } + } + } + + // New tab button + &[hasadjacentnewtabbutton="true"] { + #tabbrowser-arrowscrollbox-periphery { + position: absolute !important; + right: 0; + top: 50%; + transform: translateY(-50%); + + > #tabs-newtab-button { + z-index: 2 !important; + } + } + + #tabbrowser-arrowscrollbox { + padding-inline-end: calc(16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2) !important; + } + } +} diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss index 6b3279b..bcb07fc 100644 --- a/src/tabbar/layout/_window_control.scss +++ b/src/tabbar/layout/_window_control.scss @@ -8,7 +8,13 @@ See the above repository for updates as well as full license text. */ } #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + padding-top: var(--uc-titlebar-padding) !important; + + @include Option("userChrome.tabbar.on_bottom") { + @include Option("userChrome.tabbar.on_bottom.menubar_on_top") { + padding-top: calc(max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding)) !important; + } + } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, @@ -26,7 +32,7 @@ See the above repository for updates as well as full license text. */ } @include OS($win10) { - &[inactive="true"] > > .titlebar-buttonbox-container .titlebar-button { + &[inactive="true"] > .titlebar-buttonbox-container .titlebar-button { stroke: var(--toolbar-color, currentColor) !important; } } diff --git a/src/tabbar/layout/_window_control_size.scss b/src/tabbar/layout/_window_control_size.scss index 5bcb3bf..6407d1b 100644 --- a/src/tabbar/layout/_window_control_size.scss +++ b/src/tabbar/layout/_window_control_size.scss @@ -51,7 +51,7 @@ --uc-window-control-width: 138px; } @include OS($linux) { - $linuxWindowControlWidth: 84px / 3; /* 84px is default value of linux */ + $linuxWindowControlWidth: math.div(84px, 3); /* 84px is default value of linux */ @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), diff --git a/src/theme/_fully_dark.scss b/src/theme/_fully_dark.scss index f505451..585cda4 100644 --- a/src/theme/_fully_dark.scss +++ b/src/theme/_fully_dark.scss @@ -7,8 +7,7 @@ browser[type="content"] > html { } /*= Notification =============================================================*/ -@-moz-document url("chrome://global/content/alerts/alert.xhtml") -{ +@include moz-document(url "chrome://global/content/alerts/alert.xhtml") { /* Color */ :root { --menu-color: #15141a; diff --git a/src/theme/proton_chrome/_cert.scss b/src/theme/proton_chrome/_cert.scss index 6e10d2a..5d3dee8 100644 --- a/src/theme/proton_chrome/_cert.scss +++ b/src/theme/proton_chrome/_cert.scss @@ -1,6 +1,5 @@ /*= Delete Cert ==============================================================*/ -@-moz-document url("chrome://pippki/content/deletecert.xhtml") -{ +@include moz-document(url "chrome://pippki/content/deletecert.xhtml") { #certlist { border: 1px solid var(--in-content-table-border-color) !important; border-radius: 4px !important; @@ -8,8 +7,7 @@ } /*= Cert Exception Dialog ====================================================*/ -@-moz-document url("chrome://pippki/content/exceptionDialog.xhtml") -{ +@include moz-document(url "chrome://pippki/content/exceptionDialog.xhtml") { #locationTextBox { appearance: none !important; border: 1px solid var(--in-content-box-border-color) !important; diff --git a/src/theme/proton_chrome/_library_popup.scss b/src/theme/proton_chrome/_library_popup.scss index f7e2aa6..53f079d 100644 --- a/src/theme/proton_chrome/_library_popup.scss +++ b/src/theme/proton_chrome/_library_popup.scss @@ -1,6 +1,5 @@ /*= Library Popup ============================================================*/ -@-moz-document url("chrome://browser/content/places/places.xhtml") -{ +@include moz-document(url "chrome://browser/content/places/places.xhtml") { @include OS($linux) { @import "../../library/proton"; } diff --git a/src/theme/proton_chrome/_page_info.scss b/src/theme/proton_chrome/_page_info.scss index fe10741..26b5bc6 100644 --- a/src/theme/proton_chrome/_page_info.scss +++ b/src/theme/proton_chrome/_page_info.scss @@ -1,6 +1,5 @@ /*= Page Info ================================================================*/ -@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml") -{ +@include moz-document(url "chrome://browser/content/pageinfo/pageInfo.xhtml") { :root { --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important; } diff --git a/src/theme/proton_chrome/_proton_commons.scss b/src/theme/proton_chrome/_proton_commons.scss index d5688bd..e40c4b4 100644 --- a/src/theme/proton_chrome/_proton_commons.scss +++ b/src/theme/proton_chrome/_proton_commons.scss @@ -1,12 +1,13 @@ /*= Proton Commons ===========================================================*/ -@-moz-document url("chrome://global/content/commonDialog.xhtml"), - url("chrome://pippki/content/editcacert.xhtml"), - url("chrome://pippki/content/deletecert.xhtml"), - url("chrome://pippki/content/exceptionDialog.xhtml"), - url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), - url("chrome://global/content/appPicker.xhtml"), - url("chrome://browser/content/pageinfo/pageInfo.xhtml") -{ +@include moz-document( + url "chrome://global/content/commonDialog.xhtml", + url "chrome://pippki/content/editcacert.xhtml", + url "chrome://pippki/content/deletecert.xhtml", + url "chrome://pippki/content/exceptionDialog.xhtml", + url "chrome://mozapps/content/downloads/unknownContentType.xhtml", + url "chrome://global/content/appPicker.xhtml", + url "chrome://browser/content/pageinfo/pageInfo.xhtml" +) { /*- Overwrite --------------------------------------------------------------*/ @include Dark { :root { diff --git a/src/urlview/_as_launcher.scss b/src/urlview/_as_launcher.scss new file mode 100644 index 0000000..adfee8c --- /dev/null +++ b/src/urlview/_as_launcher.scss @@ -0,0 +1,137 @@ +//-- Mixin --------------------------------------------------------------------- +$_URL_ROW_INNER_PADDING: 6px; // .urlbarView-row-inner + +$_urlViewIcon: 32px; +$_urlViewTypeIcon: 18px; +$_urlViewTypeIconMargin: 2px; +$_searchBarIcon: 20px; +$_searchBarButton: 32px; +@mixin _urlViewCompact() { + $_urlViewIcon: 24px; + $_urlViewTypeIcon: 16px; + $_urlViewTypeIconMargin: 0px; + $_searchBarIcon: 18px; + $_searchBarButton: 30px; + + :root[uidensity="compact"] { + @content; + } +} +@mixin _urlViewCompactInit() { + --urlbarView-favicon-width: #{ $_urlViewIcon }; /* Original: 16px */ + --uc-urlView-typeIcon-size: #{ $_urlViewTypeIcon }; + --uc-urlView-icon-size-differ: #{ $_urlViewIcon - $_urlViewTypeIcon }; + + --uc-searchBar-icon-size: #{ $_searchBarIcon }; + --uc-searchBar-button-size: #{ $_searchBarButton }; +} + +$_urlRowPadding: 2px; //.urlbarView-row +@mixin _urlViewTouch() { + $_urlRowPadding: 11px; + + :root[uidensity="touch"] { + @content; + } +} +@mixin _urlViewTouchInit() { + --uc-urlView-row-padding: #{ $_URL_ROW_INNER_PADDING + $_urlRowPadding }; + --uc-urlView-row-bottom: #{ $_urlRowPadding }; +} + +//------------------------------------------------------------------------------ + +/* Init & Base Layout */ +.urlbarView { + @include _urlViewCompactInit; + @include _urlViewTouchInit; + + --uc-urlView-margin: calc(var(--uc-sidebar-activate-width, 18rem) + var(--toolbarbutton-inner-padding)); + + position: fixed !important; + left: 50vw; + transform: translateX(-50%); + top: 12vh !important; + width: calc(100vw - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; + + /* paddding as margin */ + @include NotOption("userChrome.urlView.full_width_padding") { + padding-inline: var(--uc-urlView-padding) !important; + } + + /* background */ + background-color: var(--toolbar-field-focus-background-color) !important; + background-clip: border-box; + border: 1px solid var(--arrowpanel-border-color) !important; + border-radius: var(--toolbarbutton-border-radius) !important; + box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13); +} +.urlbarView-body-inner { + border-top: none !important; +} + +/* Big icons */ +@include _urlViewCompact { + .urlbarView { + @include _urlViewCompactInit; + } +} +@include _urlViewTouch { + .urlbarView { + @include _urlViewTouchInit; + } +} + +.urlbarView-row { + &:not([type="tip"], [type="dynamic"]) { + position: relative; + min-height: #{ calc(var(--urlbarView-favicon-width) + var(--uc-urlView-row-padding)) } !important; + + .urlbarView-row-inner { + height: var(--urlbarView-favicon-width) !important; + } + .urlbarView-favicon { + position: absolute; + // padding-block: $_URL_ROW_INNER_PADDING; + top: 50%; + transform: translateY(-50%); + } + .urlbarView-title { + padding-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)) !important; + } + .urlbarView-type-icon { + width: var(--uc-urlView-typeIcon-size) !important; + height: var(--uc-urlView-typeIcon-size) !important; + margin-inline-start: calc(var(--uc-urlView-icon-size-differ) + var(--urlbarView-item-inline-padding)) !important; /* Original: 8px */ + bottom: var(--uc-urlView-row-bottom); + } + } + + &[dynamicType="quickactions"] { + .urlbarView-favicon-img { + width: var(--urlbarView-favicon-width) !important; /* Original: 16px */ + height: var(--urlbarView-favicon-width) !important; /* Original: 16px */ + } + .urlbarView-label { + font-size: 0.95em !important; /* Original: 11px */ + } + } +} +@include _urlViewTouch { + .urlbarView-row { + padding-block: $_URL_ROW_INNER_PADDING !important; + } + .urlbarView-row-inner { + padding-block: $_urlRowPadding !important; + } +} + +#urlbar .searchbar-engine-one-off-item { + min-width: var(--uc-searchBar-button-size) !important; /* Original: 28px */ + height: var(--uc-searchBar-button-size) !important; + + > .button-box > .button-icon { + width: var(--uc-searchBar-icon-size) !important; /* Original: 16px */ + height: var(--uc-searchBar-icon-size) !important; + } +} diff --git a/src/urlview/_focus_item_border.scss b/src/urlview/_focus_item_border.scss new file mode 100644 index 0000000..0d608ba --- /dev/null +++ b/src/urlview/_focus_item_border.scss @@ -0,0 +1,4 @@ +.urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, +.urlbarView-row-inner[selected] { + box-shadow: 3px 0 var(--toolbar-field-focus-border-color) inset !important; +} diff --git a/src/urlview/_full_width_padding.scss b/src/urlview/_full_width_padding.scss new file mode 100644 index 0000000..201ef94 --- /dev/null +++ b/src/urlview/_full_width_padding.scss @@ -0,0 +1,34 @@ +$_borderSize: 2px; + +.urlbarView { + --uc-urlView-padding-double: calc(var(--uc-urlView-padding) * 2); + --uc-urlView-full-width-padding: var(--uc-urlView-padding-double); + + @include NotOption("userChrome.urlView.as_commandbar") { + --uc-urlView-full-width-padding: var(--uc-urlView-padding); + width: 100% !important; + } +} + +#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { + border-color: transparent !important; + + &::before { + content: ""; + position: absolute; + border-top: 1px solid var(--autocomplete-popup-separator-color); + transform: translate(-50%, -1px); + left: 50%; + } +} + +#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner::before, +.urlbarView .search-one-offs { + width: calc(100% + $_borderSize - var(--uc-urlView-padding-double)) !important; +} +.urlbarView .search-one-offs { + margin-inline: var(--uc-urlView-full-width-padding) !important; +} +.urlbarView-row-inner { + padding-inline: calc(var(--uc-urlView-full-width-padding) + var(--urlbarView-item-inline-padding)) !important; +} diff --git a/src/urlview/_iconbox_as_separator.scss b/src/urlview/_iconbox_as_separator.scss new file mode 100644 index 0000000..20d09d7 --- /dev/null +++ b/src/urlview/_iconbox_as_separator.scss @@ -0,0 +1,52 @@ +#identity-box { + /* separator */ + position: relative; +} + +#identity-box[pageproxystate="valid"] { + &.notSecureText, + &.chromeUI, + &.extensionPage { + > .identity-box-button { + &:not(:hover, [open]) { + /* remove background from urlbar box */ + background-color: transparent !important; + + &::after { + opacity: 0.375; + } + } + + &::after { + /* Box Model */ + content: ""; + position: absolute; + display: block; + + /* Position */ + right: 0; + top: 50%; + transform: translateY(-50%); + + /* Bar shape */ + width: 1px; + height: 1em; + + /* Bar Color */ + opacity: 0; + background-color: currentColor; + } + } + } + + #identity-icon-label { + /* increase space between icon and text - as identity box padding */ + padding-inline-start: 8px !important; + } +} + +@include Animate { + .identity-box-button::after { + transition: opacity 0.2s var(--animation-easing-function); + } +} diff --git a/src/urlview/_index.scss b/src/urlview/_index.scss index bfb6922..64a4442 100644 --- a/src/urlview/_index.scss +++ b/src/urlview/_index.scss @@ -1,3 +1,32 @@ +/*= Url Bar - Icon box as Separator ==========================================*/ +@include Option("userChrome.urlbar.iconbox_with_separator") { + @import "iconbox_as_separator"; +} + +/*= Url View - Share Layout ==================================================*/ +@include Option("userChrome.urlView.as_commandbar", "userChrome.urlView.full_width_padding") { + .urlbarView { + --uc-urlView-padding: calc(5px + var(--urlbar-container-padding)); + + margin-inline: 0 !important; /* Original: calc(5px + var(--urlbar-container-padding)) */ + } +} + +/*= Url View - Looks like Launcher ===========================================*/ +@include Option("userChrome.urlView.as_commandbar") { + @import "as_launcher"; +} + +/*= Url View - Full Width Pddding ============================================*/ +@include Option("userChrome.urlView.full_width_padding") { + @import "full_width_padding"; +} + +/*= Url View - Always show page actions ======================================*/ +@include Option("userChrome.urlbar.always_show_page_actions") { + @import "always_show_page_actions"; +} + /*= Url View - Move icon to left =============================================*/ @include Option("userChrome.urlView.move_icon_to_left") { @import "move_icon_to_left"; @@ -8,7 +37,7 @@ @import "go_button_when_typing"; } -/*= Url View - Always show page actions ======================================*/ -@include Option("userChrome.urlView.always_show_page_actions") { - @import "always_show_page_actions"; +/*= Url View - Item Focus Border =============================================*/ +@include Option("userChrome.urlView.focus_item_border") { + @import "focus_item_border"; } diff --git a/src/utils/_moz_document.scss b/src/utils/_moz_document.scss new file mode 100644 index 0000000..002b0df --- /dev/null +++ b/src/utils/_moz_document.scss @@ -0,0 +1,10 @@ +@mixin moz-document($urlList...) { + $result: (); + @each $prefix, $urlPattern in $urlList { + $result: append($result, #{$prefix}("#{$urlPattern}"), $separator: comma); + } + + @#{-moz-document} #{$result} { + @content; + } +} diff --git a/src/utils/_option.scss b/src/utils/_option.scss index b23fac6..cab454e 100644 --- a/src/utils/_option.scss +++ b/src/utils/_option.scss @@ -1,13 +1,56 @@ -@use "each"; +@function _prefix($separator, $i) { + @if $i != 1 { + @return " " + $separator + " "; + } + @return ""; +} +@function _pref($option) { + @return "-moz-bool-pref(\"#{$option}\")"; +} +@function _not($str, $positive) { + @return if($positive, $str, "(not " + $str + ")"); +} + +@function _getOption($optionNames, $positive: true) { + $result: ""; + @for $i from 1 through length($optionNames) { + $option: nth($optionNames, $i); + $separator: if( + list-separator($optionNames) == "comma", "or", if( + list-separator($optionNames) == "space", "and", null + ) + ); + $result: $result + _prefix($separator, $i); + + @if type-of($option) == "list" { + $result: $result + "(" + _getOption($option, $positive) + ")"; + } + @else { + $result: $result + _not(_pref($option), $positive); + } + } + @return $result; +} +@function _optionWrapper($optionNames, $positive: true) { + // Test warning for top level `not` + @if length($optionNames) == 1 { + $option: nth($optionNames, 1); + @if not (type-of($option) == "list") { + $option: _pref($option); + @return if($positive, $option, "not " + $option); + } + } + @return _getOption($optionNames, $positive); +} @mixin Option($optionNames...) { - @include each.AtEach("supports", $optionNames, "-moz-bool-pref", ("separator": " or ", "quoted": true)) { + @supports #{_optionWrapper($optionNames)} { @content; } } @mixin NotOption($optionNames...) { - @include each.AtEach("supports", $optionNames, "not -moz-bool-pref", ("separator": " or ", "quoted": true)) { + @supports #{_optionWrapper($optionNames, false)} { @content; } } diff --git a/user.js b/user.js index 34d2bb2..5800df9 100644 --- a/user.js +++ b/user.js @@ -39,6 +39,7 @@ user_pref("userChrome.tab.photon_like_padding", true); // Photon user_pref("userChrome.tab.dynamic_separator", false); // Original, Proton user_pref("userChrome.tab.static_separator", true); // Photon user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option +user_pref("userChrome.tab.bar_separator", false); // Just option user_pref("userChrome.tab.newtab_button_like_tab", false); // Original user_pref("userChrome.tab.newtab_button_smaller", true); // Photon @@ -72,6 +73,8 @@ user_pref("userChrome.rounding.square_tab", true); // user_pref("userChrome.decoration.disable_panel_animate", true); // user_pref("userChrome.decoration.disable_sidebar_animate", true); +// user_pref("userChrome.decoration.panel_button_separator", true); +// user_pref("userChrome.decoration.panel_arrow", true); // user_pref("userChrome.autohide.tab", true); // user_pref("userChrome.autohide.tab.opacity", true); @@ -91,9 +94,11 @@ user_pref("userChrome.rounding.square_tab", true); // user_pref("userChrome.hidden.tab_icon.always", true); // user_pref("userChrome.hidden.tabbar", true); // user_pref("userChrome.hidden.navbar", true); +// user_pref("userChrome.hidden.titlebar_container", true); // user_pref("userChrome.hidden.sidebar_header", true); // user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true); // user_pref("userChrome.hidden.urlbar_iconbox", true); +// user_pref("userChrome.hidden.urlbar_iconbox.label_only", true); // user_pref("userChrome.hidden.bookmarkbar_icon", true); // user_pref("userChrome.hidden.bookmarkbar_label", true); // user_pref("userChrome.hidden.disabled_menu", true); @@ -103,12 +108,24 @@ user_pref("userChrome.rounding.square_tab", true); // user_pref("userChrome.centered.urlbar", true); // user_pref("userChrome.centered.bookmarkbar", true); +// user_pref("userChrome.counter.tab", true); +// user_pref("userChrome.counter.bookmark_menu", true); + +// user_pref("userChrome.combined.nav_button", true); +// user_pref("userChrome.combined.nav_button.home_button", true); +// user_pref("userChrome.combined.urlbar.nav_button", true); +// user_pref("userChrome.combined.urlbar.home_button", true); +// user_pref("userChrome.combined.urlbar.reload_button", true); +// user_pref("userChrome.combined.sub_button.none_background", true); +// user_pref("userChrome.combined.sub_button.as_normal", true); + // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panelitem", true); // user_pref("userChrome.rounding.square_menupopup", true); // user_pref("userChrome.rounding.square_menuitem", true); // user_pref("userChrome.rounding.square_field", true); +// user_pref("userChrome.rounding.square_urlView_item", true); // user_pref("userChrome.rounding.square_checklabel", true); // user_pref("userChrome.padding.first_tab", true); @@ -116,17 +133,26 @@ user_pref("userChrome.rounding.square_tab", true); // user_pref("userChrome.padding.drag_space", true); // user_pref("userChrome.padding.drag_space.maximized", true); +// user_pref("userChrome.padding.toolbar_button.compact", true); // user_pref("userChrome.padding.menu_compact", true); // user_pref("userChrome.padding.bookmark_menu.compact", true); // user_pref("userChrome.padding.urlView_expanding", true); // user_pref("userChrome.padding.urlView_result", true); // user_pref("userChrome.padding.panel_header", true); +// user_pref("userChrome.urlbar.iconbox_with_separator", true); + +// user_pref("userChrome.urlView.as_commandbar", true); +// user_pref("userChrome.urlView.full_width_padding", true); +// user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.urlView.move_icon_to_left", true); // user_pref("userChrome.urlView.go_button_when_typing", true); -// user_pref("userChrome.urlView.always_show_page_actions", true); +// user_pref("userChrome.urlView.focus_item_border", true); // user_pref("userChrome.tabbar.as_titlebar", true); +// user_pref("userChrome.tabbar.fill_width", true); +// user_pref("userChrome.tabbar.multi_row", true); +// user_pref("userChrome.tabbar.unscroll", true); // user_pref("userChrome.tabbar.on_bottom", true); // user_pref("userChrome.tabbar.on_bottom.above_bookmark", true); // Need on_bottom // user_pref("userChrome.tabbar.on_bottom.menubar_on_top", true); // Need on_bottom @@ -136,13 +162,26 @@ user_pref("userChrome.rounding.square_tab", true); // user_pref("userChrome.tabbar.one_liner.tabbar_first", true); // Need one_liner // user_pref("userChrome.tabbar.one_liner.responsive", true); // Need one_liner +// user_pref("userChrome.tab.bottom_rounded_corner.all", true); +// user_pref("userChrome.tab.bottom_rounded_corner.australis", true); +// user_pref("userChrome.tab.bottom_rounded_corner.edge", true); +// user_pref("userChrome.tab.bottom_rounded_corner.chrome", true); +// user_pref("userChrome.tab.bottom_rounded_corner.chrome_legacy", true); +// user_pref("userChrome.tab.bottom_rounded_corner.wave", true); // user_pref("userChrome.tab.always_show_tab_icon", true); // user_pref("userChrome.tab.close_button_at_pinned", true); // user_pref("userChrome.tab.close_button_at_pinned.always", true); // user_pref("userChrome.tab.close_button_at_pinned.background", true); // user_pref("userChrome.tab.close_button_at_hover.always", true); // Need close_button_at_hover +// user_pref("userChrome.tab.close_button_at_hover.with_selected", true); // Need close_button_at_hover // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label +// user_pref("userChrome.navbar.as_sidebar", true); + +// user_pref("userChrome.bookmarkbar.multi_row", true); + +// user_pref("userChrome.findbar.floating_on_top", true); + // user_pref("userChrome.panel.remove_strip", true); // user_pref("userChrome.panel.full_width_separator", true); // user_pref("userChrome.panel.full_width_padding", true);