diff --git a/CREDITS b/CREDITS index 55fbb22..fe8b8b5 100644 --- a/CREDITS +++ b/CREDITS @@ -176,6 +176,11 @@ W: https://github.com/coekuss/quietfox C: Copyright (c) 2019 coekuss L: MIT +N: RainFox +W: https://github.com/1280px/rainfox +C: Copyright (c) 2020 1280px +L: MIT + N: ShadowFox W: https://github.com/overdodactyl/ShadowFox C: Copyright (c) 2017 overdodactyl diff --git a/README.org b/README.org index 31f36c0..1380fc8 100644 --- a/README.org +++ b/README.org @@ -66,6 +66,10 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u - Menu - Density - Others... + - *Tabbar Layouts* + - Tabs on Bottom + - One Liner + - Vertical Tab Support - *Tab Design* - General: - Connect with toolbar(Buttons like tabs) @@ -104,6 +108,7 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u - Overlap mode - *Others* - Animations + - Hidden & Auto Hide - Activate calculator at address bar - Mouse pointer for each context diff --git a/__tests__/one_liner.test.scss b/__tests__/one_liner.test.scss new file mode 100644 index 0000000..e59f49d --- /dev/null +++ b/__tests__/one_liner.test.scss @@ -0,0 +1,118 @@ +@use 'true' as *; +@use "example" as *; +@use "../src/utils/one_liner"; + +@include test-module("One Liner [mix]") { + @include test("content") { + @include assert { + @include output { + @include one_liner.OneLinerContent { + @include example; + } + } + @include expect { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @include example; + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @include example; + } + } + } + } + } + + @include test("explicitly") { + @include assert { + @include output { + @include one_liner.OneLiner { + @include example; + } + } + @include expect { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @include example; + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @include example; + } + } + } + } + } + } +} + +@include test-module("One Liner for Responsive [mix]") { + @include test("Tabs on bottom") { + @include assert { + @include output { + @include one_liner.OneLinerOnBottom { + @include example; + } + } + @include expect { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @include example; + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @include example; + } + } + } + } + } + } + + @include test("Tab bar") { + @include assert { + @include output { + @include one_liner.OneLinerTabbar { + @include example; + } + } + @include expect { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @include example; + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @include example; + } + @supports -moz-bool-pref("userChrome.autohide.tabbar") { + @include example; + } + } + } + } + } + + @include test("Nav Bar") { + @include assert { + @include output { + @include one_liner.OneLinerNavbar { + @include example; + } + } + @include expect { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @include example; + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @include example; + } + } + } + } + } + } + } +} diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e6710dd..06f3a6c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -355,7 +355,8 @@ box-shadow: none !important; } } -/** System Default Theme ******************************************************/ +/** Theme *********************************************************************/ +/*= System Default Theme =====================================================*/ @supports -moz-bool-pref("userChrome.theme.system_default") { /*= Common - URL Bar focus color =============================================*/ @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) { @@ -1044,12 +1045,7 @@ } } } -/** Fully Theme Mode **********************************************************/ -/* Default Themes - https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json - https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json - https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json - */ +/*= Fully Theme Mode =========================================================*/ @supports -moz-bool-pref("userChrome.theme.proton_color") { /*= Default Colors - Hard Coded ==============================================*/ /* Based on chrome://global/skin/in-content/common.css */ @@ -1491,7 +1487,7 @@ /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */ } } -/* Fully Dark Mode ************************************************************/ +/*= Fully Dark Mode ==========================================================*/ @supports -moz-bool-pref("userChrome.theme.fully_dark") { /*= Remove White Flash =======================================================*/ #tabbrowser-tabbox, @@ -1571,7 +1567,7 @@ } } } -/* Proton Theme Mode **********************************************************/ +/*= Proton Theme Mode ========================================================*/ @supports -moz-bool-pref("userChrome.theme.proton_chrome") { /*= Proton Commons ===========================================================*/ @-moz-document url("chrome://global/content/commonDialog.xhtml"), @@ -2771,6 +2767,12 @@ } } } +/*= Monospace ================================================================*/ +@supports -moz-bool-pref("userChrome.theme.monospace") { + * { + font-family: -moz-fixed; + } +} /** Decoration ****************************************************************/ /*= Cursor Types =============================================================*/ @supports -moz-bool-pref("userChrome.decoration.cursor") { @@ -2982,6 +2984,7 @@ /* Animation */ transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; + will-change: margin-inline-start, opacity, visibility; } #sidebar-box[hidden="true"] { display: -moz-box !important; @@ -3110,6 +3113,7 @@ } @supports -moz-bool-pref("userChrome.rounding.square_menupopup") { xul|menupopup { + --panel-border-radius: 0px !important; border-radius: 0 !important; } } @@ -3176,14 +3180,19 @@ } @supports -moz-bool-pref("userChrome.padding.tabbar_width") { /* Titlebar Space */ - .titlebar-spacer[type="pre-tabs"] { - width: 30px !important; + :root { + --uc-title-pre-spacer: 30px; + /* Original: 40px */ + --uc-title-post-spacer: 25px; /* Original: 40px */ } + .titlebar-spacer[type="pre-tabs"] { + width: var(--uc-title-pre-spacer) !important; + } + .titlebar-spacer[type="post-tabs"] { - width: 25px !important; - /* Original: 40px */ + width: var(--uc-title-post-spacer) !important; } /* Tabbar Buttons */ @@ -3249,6 +3258,21 @@ --tab-max-width: 225px; } } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + :root { + --tab-max-width: 180px; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + :root { + --tab-max-width: 180px; + } + } + } + } + .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ @@ -3347,29 +3371,25 @@ @supports -moz-bool-pref("userChrome.padding.tabbar_height") { /* Toolbar Height */ @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px; + :root:not([uidensity]) { + --tab-min-height: 36px !important; } - - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 32px; + :root[uidensity="compact"] { + --tab-min-height: 32px !important; } - - :root[uidensity="touch"] #TabsToolbar { - --tab-min-height: 41px; + :root[uidensity="touch"] { + --tab-min-height: 41px !important; } } @supports -moz-bool-pref("userChrome.tab.photon_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 32px; + :root:not([uidensity]) { + --tab-min-height: 32px !important; } - - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px; + :root[uidensity="compact"] { + --tab-min-height: 29px !important; } - - :root[uidensity="touch"] #TabsToolbar { - --tab-min-height: 41px; + :root[uidensity="touch"] { + --tab-min-height: 41px !important; } /* Top Margin */ @@ -3380,13 +3400,12 @@ } @supports not -moz-bool-pref("userChrome.tab.lepton_like_padding") { @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px; + :root:not([uidensity]) { + --tab-min-height: 36px !important; /* 38px -> 36px */ } - - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px; + :root[uidensity="compact"] { + --tab-min-height: 29px !important; /* 36px -> 29px */ } } @@ -3518,46 +3537,47 @@ } } /*= Info Bar - Reduce Padding ================================================*/ +@supports -moz-bool-pref("userChrome.padding.infobar") or -moz-bool-pref("userChrome.autohide.infobar") { + #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { + margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin, 8px)) !important; + } +} @supports -moz-bool-pref("userChrome.padding.infobar") { :root:not([uidensity]) #tab-notification-deck { - --infobar-message-margin: 0 4px 3px; - } - - :root[uidensity="compact"] #tab-notification-deck { - --infobar-message-margin: 0 4px 2px; - } - - #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { - margin: var(--infobar-message-margin, 0 4px 4px) !important; - } - - :root:not([uidensity]) notification-message[message-bar-type="infobar"] { + --infobar-message-vertical-margin: 3px; --infobar-vertical-margin: 7px; --infobar-button-vertical-margin: 3px; } - :root[uidensity="compact"] notification-message[message-bar-type="infobar"] { + :root[uidensity="compact"] #tab-notification-deck { + --infobar-message-vertical-margin: 2px; --infobar-vertical-margin: 6px; --infobar-button-vertical-margin: 2px; } + :root[uidensity="touch"] #tab-notification-deck { + --infobar-message-vertical-margin: 4px; + --infobar-vertical-margin: 8px; + --infobar-button-vertical-margin: 4px; + } + .infobar > .icon { - margin-block: var(--infobar-vertical-margin, 8px) !important; + margin-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ } .notification-message { - padding-block: var(--infobar-vertical-margin, 8px) !important; + padding-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ } .notification-button-container > .notification-button { - margin-block: var(--infobar-button-vertical-margin, 4px) !important; + margin-block: var(--infobar-button-vertical-margin) !important; /* Original: 4px */ } .notification-close { - margin: var(--infobar-button-vertical-margin, 4px) 8px !important; + margin: var(--infobar-button-vertical-margin) 8px !important; /* Original: 4px 8px */ } @@ -3830,7 +3850,7 @@ } /** Tab Bar UI ****************************************************************/ /*= Tabs on Bottom ===========================================================*/ -@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.fullscreen.overlap") { +@supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.fullscreen.overlap") { /* Don't use display: flex at not fullscreen!! side effect #372 */ :root[sizemode="fullscreen"] #navigator-toolbox { display: flex !important; @@ -3851,132 +3871,536 @@ -moz-appearance: none !important; } } -@supports -moz-bool-pref("userChrome.tab.on_bottom") { - /* 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. */ - /*= Tabbar - Move to bottom ==================================================*/ - #titlebar { - order: 2; - /* When userChrome.fullscreen.overlap */ - -moz-box-ordinal-group: 2; - --tabs-navbar-shadow-size: 0px; - } +@supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + /* 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. */ + /*= Tabbar - Move to bottom ==================================================*/ + #titlebar { + order: 2; + /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + --tabs-navbar-shadow-size: 0px; + } - #tab-notification-deck { - order: 2; - /* When userChrome.fullscreen.overlap */ - -moz-box-ordinal-group: 2; - } - - #TabsToolbar .titlebar-spacer { - display: none; - } - - @supports -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { - #PersonalToolbar { + #tab-notification-deck { order: 2; /* When userChrome.fullscreen.overlap */ -moz-box-ordinal-group: 2; } + + #TabsToolbar .titlebar-spacer { + display: none; + } + + #TabsToolbar-customization-target > .toolbarbutton-1:last-child { + padding-inline-end: var(--toolbar-start-end-padding, 8px); + } + + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { + #PersonalToolbar { + order: 2; + /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + } + } + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { + @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { + #navigator-toolbox { + border-bottom-color: var(--toolbar-bgcolor) !important; + /* Original: 1px solid var(--chrome-content-separator-color); */ + } + } + } + } + /*= Tabbar - Hidden at singgle tab ===========================================*/ + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.hidden_single_tab") { + #tabbrowser-tabs .tabbrowser-tab:only-of-type { + display: none !important; + } + + #tabbrowser-tabs, + #tabbrowser-tabs arrowscrollbox { + height: auto !important; + min-height: auto !important; + } + + @media (prefers-reduced-motion: no-preference) { + #tabbrowser-tabs { + transition: height 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } + } + /*= Menubar - Always on top ==================================================*/ + @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"]) { + --uc-window-control-width: 0px !important; + } + + /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ + :root:not([sizemode="fullscreen"]) #nav-bar { + border-inline-width: 0; + } + + #navigator-toolbox { + -moz-window-dragging: drag; + } + + :root[sizemode="fullscreen"] #navigator-toolbox { + padding-top: 0px !important; + } + + #toolbar-menubar { + position: fixed; + display: flex; + top: var(--uc-titlebar-padding); + height: var(--uc-menubar-height); + width: 100%; + overflow: hidden; + } + + :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { + height: var(--uc-menubar-height) !important; + /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ + } + + #toolbar-menubar > .titlebar-buttonbox-container { + height: 100%; + order: 100; + } + + #toolbar-menubar > [flex] { + flex-grow: 100; + } + + #toolbar-menubar > spacer[flex] { + order: 99; + flex-grow: 1; + min-width: var(--uc-window-drag-space-post); + } + + #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 + > .titlebar-buttonbox-container { + visibility: collapse !important; + } + + :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + .titlebar-buttonbox-container { + visibility: visible; + } + } } - @supports not -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { - @supports -moz-bool-pref("userChrome.tab.connect_to_window") { - @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { - #navigator-toolbox { - border-bottom-color: var(--toolbar-bgcolor) !important; - /* Original: 1px solid var(--chrome-content-separator-color); */ + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + /* 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. */ + /*= Tabbar - Move to bottom ==================================================*/ + #titlebar { + order: 2; + /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + --tabs-navbar-shadow-size: 0px; + } + + #tab-notification-deck { + order: 2; + /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + } + + #TabsToolbar .titlebar-spacer { + display: none; + } + + #TabsToolbar-customization-target > .toolbarbutton-1:last-child { + padding-inline-end: var(--toolbar-start-end-padding, 8px); + } + + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { + #PersonalToolbar { + order: 2; + /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + } + } + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { + @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { + #navigator-toolbox { + border-bottom-color: var(--toolbar-bgcolor) !important; + /* Original: 1px solid var(--chrome-content-separator-color); */ + } + } + } + } + /*= Tabbar - Hidden at singgle tab ===========================================*/ + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.hidden_single_tab") { + #tabbrowser-tabs .tabbrowser-tab:only-of-type { + display: none !important; + } + + #tabbrowser-tabs, + #tabbrowser-tabs arrowscrollbox { + height: auto !important; + min-height: auto !important; + } + + @media screen and (max-width: 1100px) and (prefers-reduced-motion: no-preference) { + #tabbrowser-tabs { + transition: height 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } + } + /*= Menubar - Always on top ==================================================*/ + @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"]) { + --uc-window-control-width: 0px !important; + } + + /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ + :root:not([sizemode="fullscreen"]) #nav-bar { + border-inline-width: 0; + } + + #navigator-toolbox { + -moz-window-dragging: drag; + } + + :root[sizemode="fullscreen"] #navigator-toolbox { + padding-top: 0px !important; + } + + #toolbar-menubar { + position: fixed; + display: flex; + top: var(--uc-titlebar-padding); + height: var(--uc-menubar-height); + width: 100%; + overflow: hidden; + } + + :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { + height: var(--uc-menubar-height) !important; + /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ + } + + #toolbar-menubar > .titlebar-buttonbox-container { + height: 100%; + order: 100; + } + + #toolbar-menubar > [flex] { + flex-grow: 100; + } + + #toolbar-menubar > spacer[flex] { + order: 99; + flex-grow: 1; + min-width: var(--uc-window-drag-space-post); + } + + #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 + > .titlebar-buttonbox-container { + visibility: collapse !important; + } + + :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + .titlebar-buttonbox-container { + visibility: visible; + } } } } } - /*= Windows Control - Move to toolbar ========================================*/ - :root { - --uc-titlebar-padding: 0px; - } - - @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; - } - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: var(--uc-titlebar-padding); - right: 0; - height: 40px; - } - - /* where window controls are on left */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { +} +/*= Tab Bar - Oneliner =======================================================*/ +@supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { :root { - --uc-titlebar-padding: 0px !important; + --uc-navbar-width-origin: 40vw; + --uc-navbar-width: var(--uc-navbar-width-origin); + --uc-tabbar-width: calc(100vw - var(--uc-navbar-width)); + --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px)); + } + @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { + :root { + --uc-navbar-width-origin: 50vw; + --uc-navbar-width: 24em; + } } - .titlebar-buttonbox-container { - left: 0; - right: unset !important; + #nav-bar { + --uc-navbar-double-block: calc(2 * var(--uc-navbar-block, 0px)); + height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important; + margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important; + margin-bottom: var(--uc-navbar-block, 0px) !important; + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); + } + + #titlebar { + transform: translateY(var(--uc-navbar-block, 0px)); + } + + #TabsToolbar > .titlebar-buttonbox-container { + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); + } + + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + :root { + --uc-navbar-gap: 10px; + --uc-navbar-block: 1.5px; + } + :root[uidensity="compact"] { + --uc-navbar-block: 1px; + } + :root[uidensity="touch"] { + --uc-navbar-block: 3px; + } + + #nav-bar { + --toolbarbutton-inner-padding: 6px; + /* Original: 8px */ + border-radius: var(--tab-border-radius, 4px); + } + + #nav-bar, + #nav-bar-customization-target { + -moz-box-align: center; + } + + #urlbar[breakout] { + top: 0px !important; + /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */ + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; + } + + #nav-bar { + --lwt-tabs-border-color: transparent; + background-color: unset !important; + background-image: unset !important; + } + } + #urlbar-container { + min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; + } + + #PersonalToolbar { + position: relative; + z-index: -1; + } + + toolbarspring.chromeclass-toolbar-additional { + display: none !important; + } + + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-start: var(--uc-navbar-margin) !important; + } + + #nav-bar { + margin-inline-end: var(--uc-tabbar-width) !important; + } + + .titlebar-spacer[type="pre-tabs"] { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-navbar-margin) !important; + } + + #nav-bar { + margin-inline-start: var(--uc-tabbar-width) !important; + } + + .titlebar-spacer[type="post-tabs"] { + display: none !important; + } } } - #navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; - } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + :root { + --uc-navbar-width-origin: 40vw; + --uc-navbar-width: var(--uc-navbar-width-origin); + --uc-tabbar-width: calc(100vw - var(--uc-navbar-width)); + --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px)); + } + @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { + :root { + --uc-navbar-width-origin: 50vw; + --uc-navbar-width: 24em; + } + } - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; - } + #nav-bar { + --uc-navbar-double-block: calc(2 * var(--uc-navbar-block, 0px)); + height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important; + margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important; + margin-bottom: var(--uc-navbar-block, 0px) !important; + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); + } - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - } + #titlebar { + transform: translateY(var(--uc-navbar-block, 0px)); + } - .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; + #TabsToolbar > .titlebar-buttonbox-container { + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); + } + + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + :root { + --uc-navbar-gap: 10px; + --uc-navbar-block: 1.5px; + } + :root[uidensity="compact"] { + --uc-navbar-block: 1px; + } + :root[uidensity="touch"] { + --uc-navbar-block: 3px; + } + + #nav-bar { + --toolbarbutton-inner-padding: 6px; + /* Original: 8px */ + border-radius: var(--tab-border-radius, 4px); + } + + #nav-bar, + #nav-bar-customization-target { + -moz-box-align: center; + } + + #urlbar[breakout] { + top: 0px !important; + /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */ + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; + } + + #nav-bar { + --lwt-tabs-border-color: transparent; + background-color: unset !important; + background-image: unset !important; + } + } + #urlbar-container { + min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; + } + + #PersonalToolbar { + position: relative; + z-index: -1; + } + + toolbarspring.chromeclass-toolbar-additional { + display: none !important; + } + + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-start: var(--uc-navbar-margin) !important; + } + + #nav-bar { + margin-inline-end: var(--uc-tabbar-width) !important; + } + + .titlebar-spacer[type="pre-tabs"] { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-navbar-margin) !important; + } + + #nav-bar { + margin-inline-start: var(--uc-tabbar-width) !important; + } + + .titlebar-spacer[type="post-tabs"] { + display: none !important; + } + } } } - - /* At Full Screen */ - :root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; - } - - :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; - } - - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - visibility: hidden; - } - } - /* At Activated Menubar */ - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } - - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; - } - - /*= Navbar - Padding for window controls =====================================*/ - /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ +} +/*= Tab Bar - Shared Layout ==================================================*/ +@supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref( + "userChrome.hidden.tabbar" + ) + or -moz-bool-pref("userChrome.tabbar.as_titlebar") { :root { --uc-window-control-width: 0px; /* Same as .titlebar-buttonbox-container - Space reserved for window controls */ @@ -3984,28 +4408,15 @@ /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */ --uc-window-drag-space-post: 0px; /* Same as .titlebar-spacer[type="post-tabs"] */ + --uc-widow-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); } :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 84px; /* 84px is default value of linux */ - --uc-window-drag-space-pre: 30px; - --uc-window-drag-space-post: 25px; + --uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); + --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); } - - :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { - --uc-window-drag-space-pre: 0px; - /* Remove pre space */ - } - - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-style: solid !important; - border-inline-color: var(--toolbar-bgcolor); - } - - /* Windows */ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7), (-moz-os-version: windows-win8), @@ -4019,16 +4430,789 @@ --uc-window-control-width: 138px; } } - /* Use this pref to check Mac OS where window controls are on left */ - /* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */ @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 72px; } + } - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { - border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-end-width: var(--uc-window-drag-space-pre); + :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; + /* Remove pre space */ + } +} +@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. */ + :root { + --uc-titlebar-padding: 0px; + } + + @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; + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right: 0; + height: 40px; + z-index: 1; + } + + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } + + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; + } + + @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; + } + } + .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; + } + } + + /* At Full Screen */ + :root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; + } + + :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; + } + + @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. */ + :root { + --uc-titlebar-padding: 0px; + } + + @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; + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right: 0; + height: 40px; + z-index: 1; + } + + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } + + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; + } + + @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; + } + } + .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; + } + } + + /* At Full Screen */ + :root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; + } + + :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; + } + + @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 -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. */ + :root { + --uc-titlebar-padding: 0px; + } + + @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; + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right: 0; + height: 40px; + z-index: 1; + } + + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } + + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; + } + + @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 Full Screen */ + + /* 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) { + .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; + } + } + } + @media screen and (max-width: 1100px) { + :root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; + } + } + @media screen and (max-width: 1100px) { + :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; + } + } + @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.tabbar_first") { + @media screen and (min-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. */ + :root { + --uc-titlebar-padding: 0px; + } + + @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; + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right: 0; + height: 40px; + z-index: 1; + } + + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } + + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; + } + + @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 Full Screen */ + + /* At Activated Menubar */ + } + @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; + } + } + @media screen and (min-width: 1100px) { + .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; + } + } + } + @media screen and (min-width: 1100px) { + :root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; + } + } + @media screen and (min-width: 1100px) { + :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; + } + } + @media screen and (min-width: 1100px) { + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } + } + } + @media screen and (min-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 (min-width: 1100px) { + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + } + @media screen and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; + } + } + } + } + } + } + /*= Navbar - Padding for window controls =====================================*/ + /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ + @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") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; + } + @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { + /* Don't need window control */ + --uc-widow-control-space: 0px; + } + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need window control */ + --uc-widow-control-space: 0px; + } + } + } + } + @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") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; + /* Don't need window control */ + --uc-widow-control-space: 0px; + } + } + } + @media screen and (min-width: 1100px) { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; + } + @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { + /* Don't need window control */ + --uc-widow-control-space: 0px; + } + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need window control */ + --uc-widow-control-space: 0px; + } + } + } + } + } + } + #nav-bar { + border-inline-style: solid !important; + border-inline-color: transparent; + } + @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-widow-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-widow-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-widow-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-widow-control-space) !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-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-widow-control-space) !important; + } + } + } + } + } + } + + /* Use this pref to check Mac OS where window controls are on left */ + /* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: var(--uc-widow-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") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: var(--uc-widow-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) { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: var(--uc-widow-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") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + margin-inline-end: var(--uc-widow-control-space, 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") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + margin-inline-end: var(--uc-widow-control-space, 0px) !important; + } + } + } + } + } } :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, @@ -4036,96 +5220,97 @@ right: unset; } } - /*= Menubar - Always on top ==================================================*/ - @supports -moz-bool-pref("userChrome.tab.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))); +} +/*= Tab Bar - Show only current tab ==========================================*/ +@supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:not([tabsintitlebar="true"]) #tabbrowser-tabs, + #scrollbutton-up, + #scrollbutton-down, + .titlebar-spacer[type="pre-tabs"], + spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), + .tabbrowser-tab:not([selected="true"]), + .tabbrowser-tab[selected="true"] .tab-background, + .tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after), + .tabbrowser-tab[selected="true"] .tab-close-button, + #tabs-newtab-button { + display: none !important; + } + + .tabbrowser-tab[selected="true"] { + -moz-window-dragging: drag; + --tab-max-width: 100vw; + min-width: calc(var(--uc-tabbar-width, 100vw) - var(--uc-widow-control-space)) !important; + max-width: var(--tab-max-width) !important; + margin-inline-start: calc(var(--tab-shadow-max-size) * -1) !important; + } + .tabbrowser-tab[selected="true"][pinned="true"] { + -moz-box-flex: 100; + max-width: var(--tab-max-width) !important; + } + .tabbrowser-tab[selected="true"] .tab-label-container { + margin-inline: 0 !important; + } + + .tab-content { + margin-inline: auto; + width: 100%; + } + + /* Pinned */ + #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { + position: relative !important; + } + + #tabbrowser-tabs { + --tab-overflow-pinned-tabs-width: 0 !important; + padding-inline: 0 !important; + /* Original: var(--tab-overflow-pinned-tabs-width) 0; */ + } + + .tab-throbber[pinned], + .tab-icon-pending[pinned], + .tab-icon-image[pinned], + .tab-sharing-icon-overlay[pinned], + .tab-icon-overlay[pinned] { + margin-inline-end: 5.5px; + } + + .tab-label-container[pinned] { + width: unset !important; + } + + /* Padding */ + @supports not -moz-bool-pref("userChrome.centered.tab") { + #tabbrowser-arrowscrollbox { + margin-inline: 2px !important; } - :root[tabsintitlebar] { - /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ - --uc-menubar-height: 30px; + :root[sizemode="normal"] #tabbrowser-arrowscrollbox { + margin-inline: 6px !important; } + } + @supports -moz-bool-pref("userChrome.centered.tab") { + @supports -moz-bool-pref("userChrome.centered.tab.label") { + #tabbrowser-arrowscrollbox { + margin-inline: 2px !important; + } - /* Menubar on top patch - use with tabs_on_bottom.css */ - /* Only really useful if menubar is ALWAYS visible */ - :root:not([sizemode="fullscreen"]) { - --uc-window-control-width: 0px !important; + :root[sizemode="normal"] #tabbrowser-arrowscrollbox { + margin-inline: 6px !important; + } } - - /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ - :root:not([sizemode="fullscreen"]) #nav-bar { - border-inline-width: 0; - } - - #navigator-toolbox { - -moz-window-dragging: drag; - padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding)) !important; - } - - :root[sizemode="fullscreen"] #navigator-toolbox { - padding-top: 0px !important; - } - - #toolbar-menubar { - position: fixed; - display: flex; - top: var(--uc-titlebar-padding); - height: var(--uc-menubar-height); - width: 100%; - overflow: hidden; - } - - :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { - height: var(--uc-menubar-height) !important; - /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ - } - - #toolbar-menubar > .titlebar-buttonbox-container { - height: 100%; - order: 100; - } - - #toolbar-menubar > [flex] { - flex-grow: 100; - } - - #toolbar-menubar > spacer[flex] { - order: 99; - flex-grow: 1; - min-width: var(--uc-window-drag-space-post); - } - - #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 - > .titlebar-buttonbox-container { - visibility: collapse !important; - } - - :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - .titlebar-buttonbox-container { - visibility: visible; + } + @supports -moz-bool-pref("browser.tabs.tabmanager.enabled") { + :root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button, + :root:not([tabsintitlebar="true"]) + #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) + ~ #new-tab-button { + display: -moz-box !important; } } } -/*= Tab Bar - Connect to window ==============================================*/ +/** Tab UI ****************************************************************/ +/*= Tab - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { .tab-background { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important; @@ -4533,6 +5718,24 @@ 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 { + opacity: var(--tab-separator-opacity); + transform: translateX(-1.5px) translateY(calc(-50% + 1px)); + } + } + @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 { + opacity: var(--tab-separator-opacity); + transform: translateX(-1.5px) translateY(calc(-50% + 1px)); + } + } + } + } + } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabs-newtab-button:not(:hover, [open])::before { opacity: var(--tab-separator-opacity); @@ -4920,36 +6123,20 @@ } /** Clipped tabs - Show close button at pinned tab ****************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - #tabbrowser-tabs { - --uc-close-button-size: 24px; - --uc-close-button-padding: 6px; - --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2); - } + @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { + #tabbrowser-tabs { + --uc-close-button-size: 24px; + --uc-close-button-padding: 6px; + --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2); + } - #tabbrowser-tabs[closebuttons="activetab"] { - --uc-close-button-size: 20px; - --uc-close-button-padding: 4px; - } + #tabbrowser-tabs[closebuttons="activetab"] { + --uc-close-button-size: 20px; + --uc-close-button-padding: 4px; + } - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; - /* Looks like hover */ - width: var(--uc-close-button-size) !important; - height: var(--uc-close-button-size) !important; - padding: var(--uc-close-button-padding) !important; - margin-inline: var(--uc-close-button-margin) !important; - } - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; - } - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image { - display: none !important; - } - @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) + .tab-close-button { display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ @@ -4958,39 +6145,58 @@ padding: var(--uc-close-button-padding) !important; margin-inline: var(--uc-close-button-margin) !important; } - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } - .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image { display: none !important; } - } - @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; - /* Looks like hover */ - width: var(--uc-close-button-size) !important; - height: var(--uc-close-button-size) !important; - padding: var(--uc-close-button-padding) !important; - margin-inline: var(--uc-close-button-margin) !important; + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; + } + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + display: none !important; + } } - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; + } + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { + display: none !important; + } } - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { - display: none !important; - } - } - #tabbrowser-tabs[closebuttons="activetab"] - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) - .tab-close-button { - margin-inline-end: var(--uc-close-button-margin) !important; + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) + .tab-close-button { + margin-inline-end: var(--uc-close-button-margin) !important; + } } } /** Clipped tabs - Always show tab icon ***************************************/ @@ -5002,8 +6208,10 @@ /*= Sound Tab ================================================================*/ /*= Sound Tab - Hide Label ===================================================*/ @supports -moz-bool-pref("userChrome.tab.sound_hide_label") { - .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { - display: none !important; + @supports not -moz-bool-pref("userChrome.tab.sound_show_label") { + .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { + display: none !important; + } } } /*= Sound Tab - Show Label ===================================================*/ @@ -5043,10 +6251,20 @@ opacity: 1 !important; } - .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { - transform: translateX(4px); + /* Label */ + @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { + transform: translateX(4px); + } + } + @supports -moz-bool-pref("userChrome.hidden.tab_icon") { + @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(4px); + } + } } - /* Animate */ @media (prefers-reduced-motion: no-preference) { .tab-icon-overlay:not([crashed]), @@ -5060,21 +6278,39 @@ } /* None exist favicon - Size bigger */ @supports not -moz-bool-pref("userChrome.tab.always_show_tab_icon") { - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { - transform: translateX(-0.5px) translateY(-1px); - inset-inline-end: 0 !important; - margin-inline-end: 0 !important; - padding: 0 !important; + @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { + .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { + transform: translateX(-0.5px) translateY(-1px); + inset-inline-end: 0 !important; + margin-inline-end: 0 !important; + padding: 0 !important; + } + .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { + opacity: 0 !important; + /* Favicon hidden */ + } + .tabbrowser-tab:not([image]):not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(3px); + } } - - .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { - opacity: 0 !important; - /* Favicon hidden */ - } - - .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) - .tab-label { - transform: translateX(3px); + @supports -moz-bool-pref("userChrome.hidden.tab_icon") { + @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab .tab-icon-overlay:not([pinned], [sharing], [crashed]) { + transform: translateX(-0.5px) translateY(-1px); + inset-inline-end: 0 !important; + margin-inline-end: 0 !important; + padding: 0 !important; + } + .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { + opacity: 0 !important; + /* Favicon hidden */ + } + .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(3px); + } + } } } /* Busy - Show */ @@ -5159,113 +6395,115 @@ } /*= Container Tab - Color line at icon's bottom ==============================*/ @supports -moz-bool-pref("userChrome.tab.container") { - @supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") { - .tab-context-line { - display: none; + @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { + @supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") { + .tab-context-line { + display: none; + } + } + .tabbrowser-tab { + --container-position-y: 11px; } - } - .tabbrowser-tab { - --container-position-y: 11px; - } - :root[uidensity="compact"] .tabbrowser-tab { - --container-position-y: 10px; - } + :root[uidensity="compact"] .tabbrowser-tab { + --container-position-y: 10px; + } - :root[uidensity="touch"] .tabbrowser-tab { - --container-position-y: 12px; - } + :root[uidensity="touch"] .tabbrowser-tab { + --container-position-y: 12px; + } - .tab-content:not([titlechanged])::before { - /* Box Model */ - content: ""; - display: block; - position: absolute !important; - transform: translate(9px, var(--container-position-y)) !important; - /* Shape */ - border-bottom: 2px solid var(--identity-icon-color); - width: 25%; - opacity: 0.75; - } - - .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); - opacity: 1; - } - - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 33px); - } - - /* Animate */ - @media (prefers-reduced-motion: no-preference) { .tab-content:not([titlechanged])::before { - transition: 0.15s var(--animation-easing-function) !important; - transition-property: width, opacity; + /* Box Model */ + content: ""; + display: block; + position: absolute !important; + transform: translate(9px, var(--container-position-y)) !important; + /* Shape */ + border-bottom: 2px solid var(--identity-icon-color); + width: 25%; + opacity: 0.75; } - } - /* Pinned Tab */ - .tabbrowser-tab[pinned] .tab-content::before { - transform: translateY(var(--container-position-y)) !important; - width: 16px; - } - @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { - opacity: 0; + .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 30px); + opacity: 1; } - } - /* Pinned Tab - Titlechanged Indicator override */ - .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { - /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ - --dotted-identity-image: radial-gradient( - circle, - var(--identity-icon-color), - var(--identity-icon-color) 2px, - transparent 2px - ); - background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; - background-position-x: 32%, 50%, 70% !important; - } - :root[uidensity="compact"] - .tabbrowser-tab:is([image], [pinned])[usercontextid] - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - :root[uidensity="compact"] - .tabbrowser-tab[usercontextid] - > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { - /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ - background-position-x: 30%, 50%, 70% !important; - } + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 33px); + } - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { - /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ - background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important; - } + /* Animate */ + @media (prefers-reduced-motion: no-preference) { + .tab-content:not([titlechanged])::before { + transition: 0.15s var(--animation-easing-function) !important; + transition-property: width, opacity; + } + } + /* Pinned Tab */ + .tabbrowser-tab[pinned] .tab-content::before { + transform: translateY(var(--container-position-y)) !important; + width: 16px; + } - /* Pinned Tab - Titlechanged & soundplaying */ - .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) - > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { - background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important; - } + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + opacity: 0; + } + } + /* Pinned Tab - Titlechanged Indicator override */ + .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ + --dotted-identity-image: radial-gradient( + circle, + var(--identity-icon-color), + var(--identity-icon-color) 2px, + transparent 2px + ); + background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; + background-position-x: 32%, 50%, 70% !important; + } - :root[uidensity="compact"] + :root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned])[usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + :root[uidensity="compact"] + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ + background-position-x: 30%, 50%, 70% !important; + } + + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important; + } + + /* Pinned Tab - Titlechanged & soundplaying */ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - :root[uidensity="compact"] + > .tab-stack + > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) - > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { - background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important; + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important; + } + + :root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + :root[uidensity="compact"] + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important; + } } } /*= Crashed Tab - Don't show Favicons ========================================*/ @@ -5274,46 +6512,13 @@ display: none !important; } } -/*= Tab Label - Make to Center ===============================================*/ -@supports -moz-bool-pref("userChrome.tab.centered_label") { - /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ - .tab-label-container { - display: grid; - justify-content: safe center; - align-items: safe center; - } - - .tab-label, - .tab-secondary-label { - overflow: hidden; - } - - .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), - .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { - margin-inline-end: 5px; - } - - @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") { - #tabbrowser-tabs[closebuttons="activetab"] - .tabbrowser-tab:not(:hover, [pinned]) - .tab-label-container:not([textoverflow]) { - margin-inline-end: 1px; - } - - #tabbrowser-tabs[closebuttons="activetab"] - .tabbrowser-tab:not([selected]):not(:hover, [pinned]) - .tab-label-container:not([textoverflow]) { - margin-inline-end: 19px; - } - } -} /** Url View UI ***************************************************************/ /*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { .urlbarView-type-icon { min-width: 16px !important; height: 16px !important; - margin-bottom: 0 !important; + margin-block: 0 !important; margin-inline-start: 0 !important; } @@ -5329,8 +6534,9 @@ } /*= Url View - Always show page actions ======================================*/ @supports -moz-bool-pref("userChrome.urlView.always_show_page_actions") { - #pageActionButton { + #urlbar:not([breakout-extend="true"]) #pageActionButton { display: block !important; + visibility: visible !important; } } /** Panel UI ******************************************************************/ @@ -5364,6 +6570,70 @@ --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important; } } +/** Sidebar UI ****************************************************************/ +@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box { + /* Original + min-width: 14em; + width: 18em; + max-width: 36em; + */ + --uc-sidebar-width: 40px; + --uc-sidebar-activate-width: 18em; + --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); + --uc-sidebar-fullscreen-width: 4px; + --uc-sidebar-shadow-color: #28282f; + --uc-autohide-sidebar-delay: 600ms; + /* Wait 0.6s before hiding sidebar */ + z-index: 1 !important; + position: relative !important; + box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); + } + #sidebar-box[positionend="true"] { + box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color); + } + + #sidebar { + display: block; + } + + #sidebar-splitter { + display: none !important; + } +} +@supports -moz-bool-pref("userChrome.sidebar.overlap") { + #sidebar-box[positionend="true"] { + direction: rtl; + } + + #sidebar-header { + background-color: var(--sidebar-background-color) !important; + color: var(--sidebar-text-color) !important; + overflow: hidden; + } + + @supports not -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box, + #sidebar { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } + + #sidebar-box { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + will-change: padding-inline; + } + #sidebar-box:not([hidden="true"]) { + padding-inline-start: var(--uc-sidebar-activate-width); + } + @media (prefers-reduced-motion: no-preference) { + #sidebar-box { + transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear !important; + } + } + } +} /** Fullscreen - Overlap toolbar **********************************************/ @supports -moz-bool-pref("userChrome.fullscreen.overlap") { @supports -moz-bool-pref("browser.fullscreen.autohide") { @@ -5394,6 +6664,884 @@ /* Makes the bookmarks toolbar visible if enabled */ } } +/** Centered ******************************************************************/ +/*= Centered - Tab ===========================================================*/ +@supports -moz-bool-pref("userChrome.centered.tab") { + .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), + .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { + margin-inline-end: 5px; + } + + @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not(:hover, [pinned]) + .tab-label-container:not([textoverflow]) { + margin-inline-end: 1px; + } + + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not([selected]):not(:hover, [pinned]) + .tab-label-container + label { + padding-inline-end: 18px; + } + } + @supports not -moz-bool-pref("userChrome.centered.tab.label") { + .tab-icon-stack { + -moz-box-flex: 1; + justify-content: end; + } + } + @supports -moz-bool-pref("userChrome.centered.tab.label") { + /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ + .tab-label-container { + display: grid; + justify-content: safe center; + align-items: safe center; + } + + .tab-label, + .tab-secondary-label { + overflow: hidden; + } + + .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), + .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { + margin-inline-end: 5px; + } + } +} +/*= Centered - URL Bar =======================================================*/ +@supports -moz-bool-pref("userChrome.centered.urlbar") { + #urlbar:not([focused]) #urlbar-input, + #urlbar:not([focused]) .urlbar-input { + text-align: center !important; + } +} +/*= Centered - Bookmark Bar ==================================================*/ +@supports -moz-bool-pref("userChrome.centered.bookmarkbar") { + #PlacesToolbarItems { + display: flex !important; + justify-content: safe center !important; + } +} +/** Auto Hide *****************************************************************/ +@supports -moz-bool-pref("userChrome.autohide.back_button") { + #back-button[disabled="true"] { + margin-left: -36px !important; + opacity: 0 !important; + pointer-events: none; + } + + @media (prefers-reduced-motion: no-preference) { + #back-button { + transition-property: background-color, opacity, margin-left !important; + } + + #back-button[disabled="true"] { + transition: background-color 1s var(--animation-easing-function), opacity 1s var(--animation-easing-function), + margin-left 0.5s ease !important; + } + } +} +@supports -moz-bool-pref("userChrome.autohide.forward_button") { + #forward-button[disabled="true"] { + margin-left: -36px !important; + opacity: 0 !important; + pointer-events: none; + } + + @media (prefers-reduced-motion: no-preference) { + #forward-button { + transition-property: background-color, opacity, margin-left !important; + } + + #forward-button[disabled="true"] { + transition: background-color 1s var(--animation-easing-function), opacity 1s var(--animation-easing-function), + margin-left 0.5s ease !important; + } + } +} +@supports -moz-bool-pref("userChrome.autohide.page_action") { + #page-action-buttons > .urlbar-page-action { + margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)); + opacity: 0; + } + + #urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, + .urlbar-page-action[open], + .urlbar-page-action[open] ~ .urlbar-page-action { + margin-inline-end: 0px !important; + opacity: 1; + } + + @media (prefers-reduced-motion: no-preference) { + #page-action-buttons > .urlbar-page-action { + transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, + opacity 1.5s var(--animation-easing-function) 600ms !important; + } + @supports -moz-bool-pref("userChrome.decoration.animate") { + #page-action-buttons > .urlbar-page-action { + transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, + opacity 1.5s var(--animation-easing-function) 600ms, background-color 2.5s var(--animation-easing-function) !important; + } + } + + #urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, + .urlbar-page-action[open], + .urlbar-page-action[open] ~ .urlbar-page-action { + transition-delay: 0s !important; + } + } +} +@supports -moz-bool-pref("userChrome.autohide.tab") { + @supports not -moz-bool-pref("userChrome.autohide.tab.opacity") { + @supports not -moz-bool-pref("userChrome.autohide.tab.blur") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + margin-bottom: -64px; + } + } + } + @supports -moz-bool-pref("userChrome.autohide.tab.opacity") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + opacity: 0%; + } + } + @supports -moz-bool-pref("userChrome.autohide.tab.blur") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + filter: blur(8px); + } + } + @media (prefers-reduced-motion: no-preference) { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + transition-timing-function: var(--animation-easing-function); + transition-duration: 0.2s; + transition-delay: 600ms; + } + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]):is(:hover, :focus-within) { + transition-delay: 0s; + } + @supports not -moz-bool-pref("userChrome.autohide.tab.opacity") { + @supports not -moz-bool-pref("userChrome.autohide.tab.blur") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + transition-property: margin-bottom; + } + } + } + @supports -moz-bool-pref("userChrome.autohide.tab.opacity") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + transition-property: opacity; + } + } + @supports -moz-bool-pref("userChrome.autohide.tab.blur") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + transition-property: filter; + } + } + } +} +@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") { + :root { + --uc-tabbar-height: 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-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-hide-height: calc(-1 * var(--uc-bm-height)); + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + :root { + --uc-tabbar-height: 0px; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + :root { + --uc-tabbar-height: 0px; + } + } + } + } + } + @supports -moz-bool-pref("userChrome.hidden.navbar") { + :root { + --uc-navbar-height: 0px; + } + } +} +@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.autohide.infobar") { + :root { + --uc-autohide-toolbar-delay: 600ms; + } + + #navigator-toolbox { + position: relative; + z-index: 2; + } + + #navigator-toolbox:not(:hover) { + animation: 1s keepfront; + } + + @keyframes keepfront { + from { + z-index: 3; + } + to { + z-index: 3; + } + } + #sidebar-box:is(:hover, :focus-within) { + position: relative; + z-index: 2 !important; + } + + @supports -moz-bool-pref("userChrome.autohide.toolbar_overlap") { + #navigator-toolbox { + --uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0)); + margin-bottom: var(--uc-toolbar-hide-height) !important; + } + @media (prefers-reduced-motion: no-preference) { + @supports -moz-bool-pref("userChrome.decoration.animate") { + #navigator-toolbox { + transition: margin-top 1s ease, + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + #navigator-toolbox:is(:hover, :focus-within) { + transition-delay: 0s !important; + } + #navigator-toolbox[inFullscreen="true"] { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } + @supports not -moz-bool-pref("userChrome.decoration.animate") { + #navigator-toolbox { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + #navigator-toolbox:is(:hover, :focus-within) { + transition-delay: 0s !important; + } + } + } + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: var(--uc-tabbar-height); + } + @supports not -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); + } + } + } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); + } + } + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); + } + } + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + } + } + } + } + } + @supports not -moz-bool-pref("userChrome.autohide.tabbar") { + @supports not -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: var(--uc-bm-height); + } + } + } + @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: var(--uc-navbar-height); + } + } + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: var(--uc-navbar-height); + } + } + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:is(:hover, :focus-within) { + --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + } + } + } + } + } + } +} +@supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-tabbar-hide-height); + will-change: margin-bottom; + } + + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { + #TabsToolbar:not([customizing]) { + opacity: 0; + will-change: opacity; + } + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { + opacity: 0; + will-change: opacity; + } + } + + #navigator-toolbox:is(:hover, :focus-within) > #titlebar { + margin-bottom: 0px; + } + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { + opacity: 1; + } + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { + opacity: 1; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-tabbar-hide-height); + will-change: margin-bottom; + } + + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { + #TabsToolbar:not([customizing]) { + opacity: 0; + will-change: opacity; + } + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { + opacity: 0; + will-change: opacity; + } + } + + #navigator-toolbox:is(:hover, :focus-within) > #titlebar { + margin-bottom: 0px; + } + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { + opacity: 1; + } + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { + opacity: 1; + } + } + } + @supports -moz-bool-pref("userChrome.autohide.tabbar") { + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-tabbar-hide-height); + will-change: margin-bottom; + } + + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { + #TabsToolbar:not([customizing]) { + opacity: 0; + will-change: opacity; + } + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { + opacity: 0; + will-change: opacity; + } + } + + #navigator-toolbox:is(:hover, :focus-within) > #titlebar { + margin-bottom: 0px; + } + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { + opacity: 1; + } + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { + opacity: 1; + } + } + } + } + @media (prefers-reduced-motion: no-preference) { + #titlebar:not([customizing]) { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + background-color 1s var(--animation-easing-function) !important; + } + + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { + #TabsToolbar:not([customizing]) { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + } + } + + #navigator-toolbox:is(:hover, :focus-within) { + transition-delay: 0s !important; + } + #navigator-toolbox:is(:hover, :focus-within) > #titlebar:not([customizing]) { + transition-delay: 0s !important; + } + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]) { + transition-delay: 0s !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) + #TabsToolbar:not([customizing]) + > *:not(.titlebar-buttonbox-container) { + transition-delay: 0s !important; + } + } + } + } + @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar:not([customizing]) { + margin-bottom: var(--uc-navbar-hide-height); + opacity: 0; + will-change: margin-bottom, opacity; + } + + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; + opacity: 1; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + #nav-bar:not([customizing]) { + margin-bottom: var(--uc-navbar-hide-height); + opacity: 0; + will-change: margin-bottom, opacity; + } + + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; + opacity: 1; + } + } + } + } + } + @media (prefers-reduced-motion: no-preference) { + #nav-bar:not([customizing]) { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { + #nav-bar:not([customizing]) { + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + } + + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + transition-delay: 0s !important; + } + } + } +} +@supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #PersonalToolbar:not([customizing]) { + margin-bottom: var(--uc-bm-hide-height); + opacity: 0; + will-change: margin-bottom, opacity; + } + @supports -moz-bool-pref("userChrome.autohide.toolbar_overlap") { + #PersonalToolbar:not([customizing])[collapsed="true"] { + visibility: visible !important; + max-height: unset !important; + } + } + + #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { + margin-bottom: 0; + opacity: 1; + } + + @media (prefers-reduced-motion: no-preference) { + #PersonalToolbar:not([customizing]) { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), min-height 170ms ease-out, + max-height 170ms ease-out, var(--ext-theme-background-transition) !important; + } + + #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { + transition-delay: 0s !important; + } + } +} +@supports -moz-bool-pref("userChrome.autohide.infobar") { + #tab-notification-deck:not([customizing]) > .notificationbox-stack { + --infobar-height: calc( + 25px + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px) + ); + } + + #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + --infobar-message-margin: 0 4px calc(-1 * var(--infobar-height)); + opacity: 0; + will-change: margin-bottom, opacity; + } + + #navigator-toolbox:is(:hover, :focus-within) + #tab-notification-deck:not([customizing]) + > .notificationbox-stack[slot="selected"] + > notification-message { + --infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px); + opacity: 1; + } + + @supports -moz-bool-pref("userChrome.autohide.toolbar_overlap") { + #tab-notification-deck:not([customizing]) { + height: 0; + } + } + @media (prefers-reduced-motion: no-preference) { + #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + + #navigator-toolbox:is(:hover, :focus-within) + #tab-notification-deck:not([customizing]) + > .notificationbox-stack[slot="selected"] + > notification-message { + transition-delay: 0s !important; + } + } +} +@supports -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box { + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + } + + :root[inFullscreen="true"] #sidebar-box { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } + + @supports -moz-bool-pref("userChrome.sidebar.overlap") { + #sidebar { + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + will-change: min-width, max-width; + } + + #sidebar-box:is(:hover, :focus-within) > #sidebar { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } + + :root[inFullscreen="true"] #sidebar-box { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + padding-inline-start: var(--uc-sidebar-fullscreen-width); + will-change: padding-inline-start; + } + :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { + padding-inline-start: var(--uc-sidebar-activate-width); + } + :root[inFullscreen="true"] #sidebar-box #sidebar-header, + :root[inFullscreen="true"] #sidebar-box #sidebar { + min-width: calc(var(--uc-sidebar-activate-width)) !important; + max-width: calc(var(--uc-sidebar-activate-width)) !important; + will-change: unset; + } + + @media (prefers-reduced-motion: no-preference) { + #sidebar { + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + + #sidebar-box:is(:hover, :focus-within) > #sidebar { + transition-delay: 0ms !important; + } + + :root[inFullscreen="true"] #sidebar-box { + transition: padding-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { + transition-delay: 0ms !important; + } + } + } + @supports not -moz-bool-pref("userChrome.sidebar.overlap") { + #sidebar-box { + --uc-sidebar-fullscreen-margin: calc( + var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse) + ); + overflow: hidden; + will-change: min-width, max-width; + } + #sidebar-box:is(:hover, :focus-within) { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } + + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]) { + margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; + will-change: margin-inline-start; + } + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):is(:hover, :focus-within) { + margin-inline-start: 0 !important; + } + :root[inFullscreen="true"] #sidebar-box[positionend="true"] { + margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; + will-change: margin-inline-end; + } + :root[inFullscreen="true"] #sidebar-box[positionend="true"]:is(:hover, :focus-within) { + margin-inline-end: 0 !important; + } + + @media (prefers-reduced-motion: no-preference) { + #sidebar-box { + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + #sidebar-box:is(:hover, :focus-within) { + transition-delay: 0ms !important; + } + + :root[inFullscreen="true"] #sidebar-box { + transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + :root[inFullscreen="true"] #sidebar-box[positionend="true"] { + transition-property: margin-inline-end !important; + } + :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { + transition-delay: 0ms !important; + } + } + } +} +@supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { + #nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { + -moz-box-ordinal-group: 0; + min-width: calc( + var(--uc-navbar-width, 100vw) - + (2 * var(--urlbar-margin-inline) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px)) + ) !important; + } + + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { + --uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin)); + } + } + @media (prefers-reduced-motion: no-preference) { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + #nav-bar { + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { + transition-delay: 0s !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (prefers-reduced-motion: no-preference) and (min-width: 1100px) { + #nav-bar { + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { + transition-delay: 0s !important; + } + } + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #urlbar-container { + transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { + transition-delay: 0s !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (prefers-reduced-motion: no-preference) and (max-width: 1100px) { + #urlbar-container { + transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { + transition-delay: 0s !important; + } + } + } + } + } +} +/** Hidden ********************************************************************/ +@supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #TabsToolbar { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.hidden.navbar") { + #nav-bar { + visibility: collapse; + /* display: none is not work */ + } + } +} +@supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #TabsToolbar { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.hidden.navbar") { + #nav-bar { + visibility: collapse; + /* display: none is not work */ + } + } + } + } +} +@supports -moz-bool-pref("userChrome.hidden.tab_icon") { + @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab:not([pinned="true"]) .tab-icon-image { + display: none; + } + } + @supports -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab:not([pinned="true"]) .tab-icon-stack { + display: none; + } + } +} +@supports -moz-bool-pref("userChrome.hidden.sidebar_header") { + @supports not -moz-bool-pref("userChrome.hidden.sidebar_header.vertical_tab_only") { + #sidebar-header { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.hidden.sidebar_header.vertical_tab_only") { + #sidebar-box:is([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"], [sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"]) + #sidebar-header { + display: none !important; + } + } +} +@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; + } + #identity-box[pageproxystate="valid"].notSecureText #identity-icon-box { + padding-inline-end: 5px; + /* Original: 8px */ + } +} +@supports -moz-bool-pref("userChrome.hidden.bookmarkbar_icon") { + #PlacesToolbarItems .bookmark-item > .toolbarbutton-icon { + display: none; + } +} +@supports -moz-bool-pref("userChrome.hidden.bookmarkbar_label") { + #PlacesToolbarItems .bookmark-item > .toolbarbutton-text { + visibility: collapse; + /* display: none is not work */ + } +} + +@supports -moz-bool-pref("userChrome.hidden.disabled_menu") { + menu[disabled="true"], + menuitem:not(#context-back, #context-forward)[disabled="true"] { + display: none !important; + } + + @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { + #context-back[disabled="true"], + #context-forward[disabled="true"] { + display: none !important; + } + } +} +/** Icons *********************************************************************/ /** Library - Icons Replace ***************************************************/ @supports -moz-bool-pref("userChrome.icon.library") { /*= Standard Folder - More Visible ===========================================*/ @@ -6538,50 +8686,91 @@ @supports -moz-bool-pref("userChrome.icon.context_menu") { /** Context Menu - Icons ******************************************************/ /*= tabContextMenu ===========================================================*/ - #context_openANewTab { + #context_openANewTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_newTab, + #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition, + #sidebartabs_asamuzak_jp-menuitem-_newTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } + #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInWindow { + --menuitem-image: url("chrome://browser/skin/window.svg"); + } + + #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInPrivateWindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); + } + #context_reloadTab, - #context_reloadSelectedTabs { + #context_reloadSelectedTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_reloadTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:reloadTree, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab, + #sidebartabs_asamuzak_jp-menuitem-_reloadTab, + #sidebartabs_asamuzak_jp-menuitem-_reloadAllTabs { --menuitem-image: url("../icons/reload.svg"); } #context_toggleMuteTab, - #context_toggleMuteSelectedTabs { + #context_toggleMuteSelectedTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-mute, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab, + #sidebartabs_asamuzak_jp-menuitem-_muteTab { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); } #context_toggleMuteTab[muted], - #context_toggleMuteSelectedTabs[muted] { + #context_toggleMuteSelectedTabs[muted], + #treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-unmute, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab[label="Unmute Tab"], + #sidebartabs_asamuzak_jp-menuitem-_muteTab[label="Unmute Tab"] { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); } #context_pinTab, - #context_pinSelectedTabs { + #context_pinSelectedTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_pinTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab, + #sidebartabs_asamuzak_jp-menuitem-_pinTab { --menuitem-image: url("../icons/pin-tab.svg"); } #context_unpinTab, - #context_unpinSelectedTabs { + #context_unpinSelectedTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_unpinTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab[label="Unpin Tab"], + #sidebartabs_asamuzak_jp-menuitem-_pinTab[label="Unpin Tab"] { --menuitem-image: url("../icons/unpin-tab.svg"); } #context_duplicateTab, - #context_duplicateTabs { + #context_duplicateTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_duplicateTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab, + #sidebartabs_asamuzak_jp-menuitem-_dupeTab { --menuitem-image: url("../icons/notebook-subsection.svg"); } #context_bookmarkTab, - #context_bookmarkSelectedTabs { + #context_bookmarkSelectedTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_bookmarkSelected, + #treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:bookmarkTree, + #sidebartabs_asamuzak_jp-menuitem-_bookmarkTab, + #sidebartabs_asamuzak_jp-menuitem-_bookmarkAllTabs { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } - #context_moveTabOptions { + #context_moveTabOptions, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_moveTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab, + #sidebartabs_asamuzak_jp-menuitem-_moveTab { --menuitem-image: url("../icons/arrow-swap.svg"); } - #context_sendTabToDevice { + #context_sendTabToDevice, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice { --menuitem-image: url("../icons/send-to-device.svg"); } @@ -6597,19 +8786,34 @@ --menuitem-image: url("../icons/share.svg"); } } - #context_reopenInContainer { + #context_reopenInContainer, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab, + #sidebartabs_asamuzak_jp-menuitem-_openNewTabInContainer, + #sidebartabs_asamuzak_jp-menuitem-_reopenTabInContainer { --menuitem-image: url("../icons/container-openin-16.svg"); } - #context_selectAllTabs { + #context_selectAllTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_selectAllTabs, + #sidebartabs_asamuzak_jp-menuitem-_selectAllTabs { --menuitem-image: url("../icons/tab-multiple.svg"); } - #context_closeTab { + #context_closeTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:closeTree, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab, + #sidebartabs_asamuzak_jp-menuitem-_closeTab { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } - #context_undoCloseTab { + #context_undoCloseTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_undoCloseTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab, + #sidebartabs_asamuzak_jp-menuitem-_undoCloseTab { --menuitem-image: url("../icons/undo.svg"); } @@ -7400,6 +9604,10 @@ .sync-menuitem.sendtab-target:not([clientType]) { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } + + #treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice\:manage { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } } @supports -moz-bool-pref("userChrome.icon.global_menubar") { /*= main-menubar =============================================================*/ @@ -7831,7 +10039,7 @@ } } } -/*= Waterfox =================================================================*/ +/** Waterfox ******************************************************************/ @supports -moz-bool-pref("userChrome.icon.panel") { #appMenu-restart-button { list-style-image: url("../icons/refresh-cw.svg") !important; @@ -7870,7 +10078,7 @@ background-color: var(--button-active-bgcolor); } } -/*= Tor Browser ==============================================================*/ +/** Tor Browser ***************************************************************/ @supports -moz-bool-pref("userChrome.icon.panel") { #appMenuNewIdentity { list-style-image: url("chrome://browser/skin/new_identity.svg"); diff --git a/css/leptonContent.css b/css/leptonContent.css index 209a379..10cf40b 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -2988,6 +2988,17 @@ } } } +/** 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://)).*/$") + { + * { + font-family: -moz-fixed; + } + } +} /** Menu - Icons Layout *******************************************************/ @supports -moz-bool-pref("userChrome.icon.menu") { @-moz-document url("chrome://browser/content/places/places.xhtml"), diff --git a/install.ps1 b/install.ps1 index c16e449..af21842 100644 --- a/install.ps1 +++ b/install.ps1 @@ -390,6 +390,7 @@ $firefoxProfileDirPaths = @( "${HOME}\AppData\Roaming\Mozilla\Firefox", "${HOME}\AppData\Roaming\Waterfox", "${HOME}\AppData\Roaming\librewolf", + "${HOME}\AppData\Roaming\Ghostery Browser", "${HOME}\Desktop\Tor Browser\Browser\TorBrowser\Data\Browser" ) diff --git a/install.sh b/install.sh index ad9823f..994d470 100755 --- a/install.sh +++ b/install.sh @@ -338,6 +338,7 @@ firefoxProfileDirPaths=( "${HOME}/.mozilla/firefox" "${HOME}/.waterfox" "${HOME}/.librewolf" + "${HOME}/.ghostery browser" "${HOME}/.pulse-browser" "${HOME}/.firedragon" "${HOME}/.local/opt/tor-browser/app/Browser/TorBrowser/Data/Browser" @@ -346,6 +347,7 @@ firefoxProfileDirPaths=( "${HOME}/Library/Application Support/Firefox" "${HOME}/Library/Application Support/Waterfox" "${HOME}/Library/Application Support/libreWolf" + "${HOME}/Library/Application Support/Ghostery Browser" "${HOME}/Library/Application Support/pulse-browser" "${HOME}/Library/Application Support/TorBrowser/Browser" ) diff --git a/src/autohide/_back_button.scss b/src/autohide/_back_button.scss new file mode 100644 index 0000000..beab781 --- /dev/null +++ b/src/autohide/_back_button.scss @@ -0,0 +1,16 @@ +#back-button[disabled="true"] { + margin-left: -36px !important; + opacity: 0 !important; + pointer-events: none; +} + +@include Animate { + #back-button { + transition-property: background-color, opacity, margin-left !important; + } + #back-button[disabled="true"] { + transition: background-color 1s var(--animation-easing-function), + opacity 1s var(--animation-easing-function), + margin-left 0.5s ease !important; + } +} diff --git a/src/autohide/_bookmarkbar.scss b/src/autohide/_bookmarkbar.scss new file mode 100644 index 0000000..af0f9e4 --- /dev/null +++ b/src/autohide/_bookmarkbar.scss @@ -0,0 +1,30 @@ +// Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css +#PersonalToolbar:not([customizing]) { + margin-bottom: var(--uc-bm-hide-height); + opacity: 0; + will-change: margin-bottom, opacity; + + @include Option("userChrome.autohide.toolbar_overlap") { + &[collapsed="true"] { + visibility: visible !important; + max-height: unset !important; + } + } +} + +#navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { + margin-bottom: 0; + opacity: 1; +} + +@include Animate { + #PersonalToolbar:not([customizing]) { + // --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67); + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important; + } + #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { + transition-delay: 0s !important; + } +} diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss new file mode 100644 index 0000000..8347e8a --- /dev/null +++ b/src/autohide/_common.scss @@ -0,0 +1,50 @@ +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner") { + :root { + --uc-tabbar-height: 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-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-hide-height: calc(-1 * var(--uc-bm-height)); + + @include Option("userChrome.hidden.tabbar") { + @include OneLinerNavbarContent() { + --uc-tabbar-height: 0px; + } + } + @include Option("userChrome.hidden.navbar") { + --uc-navbar-height: 0px; + } + } +} + +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") { + :root { + --uc-autohide-toolbar-delay: 600ms; + } + + #navigator-toolbox { + position: relative; + z-index: 2; + } + #navigator-toolbox:not(:hover) { + animation: 1s keepfront; + } + @keyframes keepfront { + from { + z-index: 3; + } + to { + z-index: 3; + } + } + + #sidebar-box:is(:hover, :focus-within) { + position: relative; + z-index: 2 !important; + } + + @include Option("userChrome.autohide.toolbar_overlap") { + @import "toolbar_overlap"; + } +} diff --git a/src/autohide/_fill_urlbar.scss b/src/autohide/_fill_urlbar.scss new file mode 100644 index 0000000..6101b6b --- /dev/null +++ b/src/autohide/_fill_urlbar.scss @@ -0,0 +1,31 @@ +#nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { + -moz-box-ordinal-group: 0; + min-width: calc(var(--uc-navbar-width, 100vw) - ((2 * var(--urlbar-margin-inline)) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px))) !important; +} + +@include Option("userChrome.tabbar.one_liner") { + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { + --uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin)); + } +} + +@include Animate { + @include OneLiner { + #nav-bar { + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { + transition-delay: 0s !important; + } + } + + @include OneLinerNavbarContent { + #urlbar-container { + transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { + transition-delay: 0s !important; + } + } +} diff --git a/src/autohide/_forward_button.scss b/src/autohide/_forward_button.scss new file mode 100644 index 0000000..5024524 --- /dev/null +++ b/src/autohide/_forward_button.scss @@ -0,0 +1,16 @@ +#forward-button[disabled="true"] { + margin-left: -36px !important; + opacity: 0 !important; + pointer-events: none; +} + +@include Animate { + #forward-button { + transition-property: background-color, opacity, margin-left !important; + } + #forward-button[disabled="true"] { + transition: background-color 1s var(--animation-easing-function), + opacity 1s var(--animation-easing-function), + margin-left 0.5s ease !important; + } +} diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss new file mode 100644 index 0000000..3864d5e --- /dev/null +++ b/src/autohide/_index.scss @@ -0,0 +1,35 @@ +@include Option("userChrome.autohide.back_button") { + @import "back_button"; +} +@include Option("userChrome.autohide.forward_button") { + @import "forward_button"; +} +@include Option("userChrome.autohide.page_action") { + @import "page_action"; +} + +@include Option("userChrome.autohide.tab") { + @import "tab"; +} + +@import "common"; +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { + @include Option("userChrome.autohide.tabbar", "userChrome.tabbar.one_liner") { + @import "tabbar"; + } + @include Option("userChrome.autohide.navbar", "userChrome.tabbar.one_liner") { + @import "navbar"; + } +} +@include Option("userChrome.autohide.bookmarkbar") { + @import "bookmarkbar"; +} +@include Option("userChrome.autohide.infobar") { + @import "infobar"; +} + +@import "sidebar"; + +@include Option("userChrome.autohide.fill_urlbar") { + @import "fill_urlbar"; +} diff --git a/src/autohide/_infobar.scss b/src/autohide/_infobar.scss new file mode 100644 index 0000000..39c9fb8 --- /dev/null +++ b/src/autohide/_infobar.scss @@ -0,0 +1,32 @@ +#tab-notification-deck:not([customizing]) > .notificationbox-stack { + $infobarFixedHeight: 13px + ((1px + 5px) * 2); // button height + (button border + [button.small-button padding]) * 2 + // fiexedHeight + (button margin * 2) + messagebar margin + --infobar-height: calc(#{ $infobarFixedHeight } + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px)); +} +#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + --infobar-message-margin: 0 4px calc(-1 * var(--infobar-height)); + opacity: 0; + will-change: margin-bottom, opacity; +} + +#navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + --infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px); + opacity: 1; +} + +@include Option("userChrome.autohide.toolbar_overlap") { + #tab-notification-deck:not([customizing]) { + height: 0; + } +} + +@include Animate { + #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + #navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + transition-delay: 0s !important; + } +} diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss new file mode 100644 index 0000000..43a1102 --- /dev/null +++ b/src/autohide/_navbar.scss @@ -0,0 +1,29 @@ +@include OneLinerNavbar { + #nav-bar:not([customizing]) { + margin-bottom: var(--uc-navbar-hide-height); + opacity: 0; + will-change: margin-bottom, opacity; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; + opacity: 1; + } +} + +@include Animate { + #nav-bar:not([customizing]) { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + + @include Option("userChrome.autohide.fill_urlbar") { + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + transition-delay: 0s !important; + } +} diff --git a/src/autohide/_page_action.scss b/src/autohide/_page_action.scss new file mode 100644 index 0000000..7ccd65c --- /dev/null +++ b/src/autohide/_page_action.scss @@ -0,0 +1,29 @@ +#page-action-buttons > .urlbar-page-action { + margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding) ); + opacity: 0; +} + +#urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, +.urlbar-page-action[open], +.urlbar-page-action[open] ~ .urlbar-page-action { + margin-inline-end: 0px !important; + opacity: 1; +} + +@include Animate { + #page-action-buttons > .urlbar-page-action { + transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, + opacity 1.5s var(--animation-easing-function) 600ms !important; + + @include Option("userChrome.decoration.animate") { + transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, + opacity 1.5s var(--animation-easing-function) 600ms, + background-color 2.5s var(--animation-easing-function) !important; + } + } + #urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, + .urlbar-page-action[open], + .urlbar-page-action[open] ~ .urlbar-page-action{ + transition-delay: 0s !important; + } +} diff --git a/src/autohide/_sidebar.scss b/src/autohide/_sidebar.scss new file mode 100644 index 0000000..ba58cd8 --- /dev/null +++ b/src/autohide/_sidebar.scss @@ -0,0 +1,20 @@ +// Refer variable `src/sidebar/overlap` + +@include Option("userChrome.autohide.sidebar") { + #sidebar-box { + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + } + + :root[inFullscreen="true"] #sidebar-box { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } + + @include Option("userChrome.sidebar.overlap") { + @import "sidebar/overlap"; + } + @include NotOption("userChrome.sidebar.overlap") { + @import "sidebar/static"; + } +} diff --git a/src/autohide/_tab.scss b/src/autohide/_tab.scss new file mode 100644 index 0000000..3a000c5 --- /dev/null +++ b/src/autohide/_tab.scss @@ -0,0 +1,34 @@ +.tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + @include NotOption("userChrome.autohide.tab.opacity") { + @include NotOption("userChrome.autohide.tab.blur") { + margin-bottom: -64px; + } + } + @include Option("userChrome.autohide.tab.opacity") { + opacity: 0%; + } + @include Option("userChrome.autohide.tab.blur") { + filter: blur(8px); + } + + @include Animate { + transition-timing-function: var(--animation-easing-function); + transition-duration: 0.2s; + transition-delay: 600ms; + &:is(:hover, :focus-within) { + transition-delay: 0s; + } + + @include NotOption("userChrome.autohide.tab.opacity") { + @include NotOption("userChrome.autohide.tab.blur") { + transition-property: margin-bottom; + } + } + @include Option("userChrome.autohide.tab.opacity") { + transition-property: opacity; + } + @include Option("userChrome.autohide.tab.blur") { + transition-property: filter; + } + } +} diff --git a/src/autohide/_tabbar.scss b/src/autohide/_tabbar.scss new file mode 100644 index 0000000..5781a34 --- /dev/null +++ b/src/autohide/_tabbar.scss @@ -0,0 +1,64 @@ +//-- Mixin --------------------------------------------------------------------- +@mixin _autohide_tabbar() { + @include NotOption("userChrome.tabbar.on_bottom") { + @content; + } + @include Option("userChrome.tabbar.on_bottom") { + > *:not(.titlebar-buttonbox-container) { + @content; + } + } +} + +//------------------------------------------------------------------------------ + +@include OneLinerTabbar { + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-tabbar-hide-height); + will-change: margin-bottom; + } + #TabsToolbar:not([customizing]) { + @include _autohide_tabbar { + opacity: 0; + will-change: opacity; + } + } + + #navigator-toolbox:is(:hover, :focus-within) { + > #titlebar { + margin-bottom: 0px; + } + #TabsToolbar { + @include _autohide_tabbar { + opacity: 1; + } + } + } +} + +@include Animate { + #titlebar:not([customizing]) { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + background-color 1s var(--animation-easing-function) !important; + } + + #TabsToolbar:not([customizing]) { + @include _autohide_tabbar { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + } + } + + #navigator-toolbox:is(:hover, :focus-within) { + transition-delay: 0s !important; + + > #titlebar:not([customizing]) { + transition-delay: 0s !important; + } + + #TabsToolbar:not([customizing]) { + @include _autohide_tabbar { + transition-delay: 0s !important; + } + } + } +} diff --git a/src/autohide/_toolbar_overlap.scss b/src/autohide/_toolbar_overlap.scss new file mode 100644 index 0000000..be1ea04 --- /dev/null +++ b/src/autohide/_toolbar_overlap.scss @@ -0,0 +1,68 @@ +#navigator-toolbox { + --uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0)); + margin-bottom: var(--uc-toolbar-hide-height) !important; + + @include Animate { + @include Option("userChrome.decoration.animate") { + transition: margin-top 1s ease, + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + + &:is(:hover, :focus-within) { + transition-delay: 0s !important; + } + + &[inFullscreen="true"] { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } + @include NotOption("userChrome.decoration.animate") { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + + &:is(:hover, :focus-within) { + transition-delay: 0s !important; + } + } + } + + &:is(:hover, :focus-within) { + @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { + @include Option("userChrome.autohide.tabbar", "userChrome.tabbar.one_liner") { + --uc-toolbar-height: var(--uc-tabbar-height); + + @include NotOption("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); + } + } + + @include OneLinerNavbar { + @include NotOption("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); + } + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + } + @include NotOption("userChrome.autohide.tabbar") { + @include NotOption("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: var(--uc-bm-height); + } + } + + @include Option("userChrome.autohide.navbar", "userChrome.tabbar.one_liner") { + @include OneLinerNavbar { + @include NotOption("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: var(--uc-navbar-height); + } + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + } + } +} diff --git a/src/autohide/sidebar/_overlap.scss b/src/autohide/sidebar/_overlap.scss new file mode 100644 index 0000000..c282701 --- /dev/null +++ b/src/autohide/sidebar/_overlap.scss @@ -0,0 +1,47 @@ +#sidebar { + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + + will-change: min-width, max-width; +} + +#sidebar-box:is(:hover, :focus-within) > #sidebar { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; +} + +:root[inFullscreen="true"] #sidebar-box { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + padding-inline-start: var(--uc-sidebar-fullscreen-width); + will-change: padding-inline-start; + + &:is(:hover, :focus-within) { + padding-inline-start: var(--uc-sidebar-activate-width); + } + + #sidebar-header, + #sidebar { + min-width: calc(var(--uc-sidebar-activate-width)) !important; + max-width: calc(var(--uc-sidebar-activate-width)) !important; + + will-change: unset; + } +} + +@include Animate { + #sidebar { + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + + #sidebar-box:is(:hover, :focus-within) > #sidebar { + transition-delay: 0ms !important; + } + + :root[inFullscreen="true"] #sidebar-box { + transition: padding-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + + &:is(:hover, :focus-within) { + transition-delay: 0ms !important; + } + } +} diff --git a/src/autohide/sidebar/_static.scss b/src/autohide/sidebar/_static.scss new file mode 100644 index 0000000..c1756c2 --- /dev/null +++ b/src/autohide/sidebar/_static.scss @@ -0,0 +1,52 @@ +#sidebar-box { + --uc-sidebar-fullscreen-margin: calc(var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse)); + overflow: hidden; + + will-change: min-width, max-width; + &:is(:hover, :focus-within) { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } +} + +:root[inFullscreen="true"] #sidebar-box { + &:not([positionend="true"]) { + margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; + will-change: margin-inline-start; + + &:is(:hover, :focus-within) { + margin-inline-start: 0 !important; + } + } + + &[positionend="true"] { + margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; + will-change: margin-inline-end; + + &:is(:hover, :focus-within) { + margin-inline-end: 0 !important; + } + } +} + + +@include Animate { + #sidebar-box { + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + + &:is(:hover, :focus-within) { + transition-delay: 0ms !important; + } + } + + :root[inFullscreen="true"] #sidebar-box { + transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + + &[positionend="true"] { + transition-property: margin-inline-end !important; + } + &:is(:hover, :focus-within) { + transition-delay: 0ms !important; + } + } +} diff --git a/src/centered/_bookmarkbar.scss b/src/centered/_bookmarkbar.scss new file mode 100644 index 0000000..816d2d2 --- /dev/null +++ b/src/centered/_bookmarkbar.scss @@ -0,0 +1,4 @@ +#PlacesToolbarItems { + display: flex !important; + justify-content: safe center !important; +} diff --git a/src/centered/_index.scss b/src/centered/_index.scss new file mode 100644 index 0000000..9a5b244 --- /dev/null +++ b/src/centered/_index.scss @@ -0,0 +1,12 @@ +/*= Centered - Tab ===========================================================*/ +@import "tab"; + +/*= Centered - URL Bar =======================================================*/ +@include Option("userChrome.centered.urlbar") { + @import "urlbar"; +} + +/*= Centered - Bookmark Bar ==================================================*/ +@include Option("userChrome.centered.bookmarkbar") { + @import "bookmarkbar"; +} diff --git a/src/centered/_tab.scss b/src/centered/_tab.scss new file mode 100644 index 0000000..bfc038e --- /dev/null +++ b/src/centered/_tab.scss @@ -0,0 +1,10 @@ +@include Option("userChrome.centered.tab") { + @import "tab/layout"; + + @include NotOption("userChrome.centered.tab.label") { + @import "tab/content"; + } + @include Option("userChrome.centered.tab.label") { + @import "tab/label"; + } +} diff --git a/src/centered/_urlbar.scss b/src/centered/_urlbar.scss new file mode 100644 index 0000000..5d8cfc1 --- /dev/null +++ b/src/centered/_urlbar.scss @@ -0,0 +1,9 @@ +// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_centered_text.css made available under Mozilla Public License v. 2.0 +// See the above repository for updates as well as full license text. + +#urlbar:not([focused]) { + #urlbar-input, + .urlbar-input { + text-align: center !important; + } +} diff --git a/src/centered/tab/_content.scss b/src/centered/tab/_content.scss new file mode 100644 index 0000000..1549e6e --- /dev/null +++ b/src/centered/tab/_content.scss @@ -0,0 +1,4 @@ +.tab-icon-stack { + -moz-box-flex: 1; + justify-content: end; +} diff --git a/src/centered/tab/_label.scss b/src/centered/tab/_label.scss new file mode 100644 index 0000000..b5b25d0 --- /dev/null +++ b/src/centered/tab/_label.scss @@ -0,0 +1,15 @@ +/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ +.tab-label-container { + display: grid; + justify-content: safe center; + align-items: safe center; +} +.tab-label, +.tab-secondary-label { + overflow: hidden; +} + +.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), +.tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { + margin-inline-end: 5px; +} diff --git a/src/tabbar/_centered_label.scss b/src/centered/tab/_layout.scss similarity index 56% rename from src/tabbar/_centered_label.scss rename to src/centered/tab/_layout.scss index c7ebae4..a26f220 100644 --- a/src/tabbar/_centered_label.scss +++ b/src/centered/tab/_layout.scss @@ -1,14 +1,3 @@ -/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ -.tab-label-container { - display: grid; - justify-content: safe center; - align-items: safe center; -} -.tab-label, -.tab-secondary-label { - overflow: hidden; -} - .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 5px; @@ -18,7 +7,7 @@ #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 1px; } - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { - margin-inline-end: 19px; + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container label { + padding-inline-end: 18px; } } diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss index 324e4ac..acc839e 100644 --- a/src/contents/_activity_stream.scss +++ b/src/contents/_activity_stream.scss @@ -29,7 +29,7 @@ /** Activity Stream - Menu Icons ********************************************/ @include Option("userChrome.icon.context_menu") { - @import "../icons/layout_activity_stream"; + @import "../icons/layout/activity_stream"; @import "../icons/activity_stream"; } diff --git a/src/contents/_context_menu.scss b/src/contents/_context_menu.scss index 63b5e16..89f92ea 100644 --- a/src/contents/_context_menu.scss +++ b/src/contents/_context_menu.scss @@ -1,6 +1,6 @@ @-moz-document url("chrome://browser/content/places/places.xhtml"), url("about:downloads") { - @import "../icons/layout_menu_contents"; + @import "../icons/layout/menu_contents"; /*= Context Menu ===========================================================*/ @include Option("userChrome.icon.context_menu") { diff --git a/src/contents/_monospace.scss b/src/contents/_monospace.scss new file mode 100644 index 0000000..30a2c55 --- /dev/null +++ b/src/contents/_monospace.scss @@ -0,0 +1,5 @@ +@-moz-document url-prefix("about:"), + url-prefix("chrome://browser/content/places/places.xhtml"), + regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { + @import "../theme/monospace"; +} diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 25997a7..6b969fe 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -104,6 +104,7 @@ xul|search-textbox.tabsFilter, /* Animation */ transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; + will-change: margin-inline-start, opacity, visibility; &[hidden="true"] { display: -moz-box !important; diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss new file mode 100644 index 0000000..8b38239 --- /dev/null +++ b/src/hidden/_index.scss @@ -0,0 +1,91 @@ +@include OneLinerNavbarContent() { + @include Option("userChrome.hidden.tabbar") { + #TabsToolbar { + display: none !important; + } + } + + @include Option("userChrome.hidden.navbar") { + #nav-bar { + visibility: collapse; /* display: none is not work */ + } + } +} + +@include Option("userChrome.hidden.tab_icon") { + .tabbrowser-tab:not([pinned="true"]) { + @include NotOption("userChrome.hidden.tab_icon.always") { + .tab-icon-image { + display: none; + } + } + @include Option("userChrome.hidden.tab_icon.always") { + .tab-icon-stack { + display: none; + } + } + } +} + +@include Option("userChrome.hidden.sidebar_header") { + @include NotOption("userChrome.hidden.sidebar_header.vertical_tab_only") { + #sidebar-header { + display: none !important; + } + } + + @include Option("userChrome.hidden.sidebar_header.vertical_tab_only") { + #sidebar-box:is( + [sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], + [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"], + [sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"] + ) #sidebar-header { + display: none !important; + } + } +} + +@include Option("userChrome.hidden.urlbar_iconbox") { + #identity-box[pageproxystate="valid"] { + &.notSecureText #identity-icon-label, + &.chromeUI #identity-icon-box, + &.extensionPage #identity-icon-box { + display: none; + } + + &.notSecureText #identity-icon-box { + padding-inline-end: 5px; /* Original: 8px */ + } + } +} + +#PlacesToolbarItems .bookmark-item { + @include Option("userChrome.hidden.bookmarkbar_icon") { + > .toolbarbutton-icon { + display: none; + } + } + @include Option("userChrome.hidden.bookmarkbar_label") { + > .toolbarbutton-text { + visibility: collapse; /* display: none is not work */ + } + } +} + +@include Option("userChrome.hidden.disabled_menu") { + menu, + menuitem:not(#context-back, #context-forward) { + &[disabled="true"] { + display: none !important; + } + } + + @include NativeMenu { + #context-back, + #context-forward { + &[disabled="true"] { + display: none !important; + } + } + } +} diff --git a/src/icons/_index.scss b/src/icons/_index.scss new file mode 100644 index 0000000..90c2e29 --- /dev/null +++ b/src/icons/_index.scss @@ -0,0 +1,33 @@ +/** Library - Icons Replace ***************************************************/ +@include Option("userChrome.icon.library") { + @import "../library/chrome"; +} + +/** Panel - Icons *************************************************************/ +@include Option("userChrome.icon.panel") { + @import "layout/panel"; + @import "panel"; +} + +/** Menu - Icons Layout *******************************************************/ +@include Option("userChrome.icon.menu") { + @import "layout/menu"; + @import "layout/bookmark_menu"; + + @include Option("userChrome.icon.context_menu") { + @import "context_menu"; + } + @include Option("userChrome.icon.global_menubar") { + @import "global_menubar"; + } + @include Option("userChrome.icon.global_menu") { + @import "global_menu"; + } +} + +/** Libray Menu ***************************************************************/ +@include Option("userChrome.icon.library") { + @include Option("userChrome.icon.menu") { + @import "library"; + } +} diff --git a/src/icons/context_menu/_others.scss b/src/icons/context_menu/_others.scss index 2f55da5..453f405 100644 --- a/src/icons/context_menu/_others.scss +++ b/src/icons/context_menu/_others.scss @@ -204,3 +204,6 @@ menuitem.searchbar-clear-history { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } } +#treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice\:manage { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} diff --git a/src/icons/context_menu/_tab_toolbar.scss b/src/icons/context_menu/_tab_toolbar.scss index b82fe30..2a38cb3 100644 --- a/src/icons/context_menu/_tab_toolbar.scss +++ b/src/icons/context_menu/_tab_toolbar.scss @@ -1,43 +1,86 @@ /*= tabContextMenu ===========================================================*/ -#context_openANewTab { +#context_openANewTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_newTab, +#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition, +#sidebartabs_asamuzak_jp-menuitem-_newTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } +#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInWindow { + --menuitem-image: url("chrome://browser/skin/window.svg"); +} +#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInPrivateWindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); +} #context_reloadTab, -#context_reloadSelectedTabs { +#context_reloadSelectedTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_reloadTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:reloadTree, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab, +#sidebartabs_asamuzak_jp-menuitem-_reloadTab, +#sidebartabs_asamuzak_jp-menuitem-_reloadAllTabs { --menuitem-image: url("../icons/reload.svg"); } #context_toggleMuteTab, -#context_toggleMuteSelectedTabs { +#context_toggleMuteSelectedTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-mute, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab, +#sidebartabs_asamuzak_jp-menuitem-_muteTab { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); } #context_toggleMuteTab[muted], -#context_toggleMuteSelectedTabs[muted] { +#context_toggleMuteSelectedTabs[muted], +#treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-unmute, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab[label="Unmute Tab"], +#sidebartabs_asamuzak_jp-menuitem-_muteTab[label="Unmute Tab"] { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); } #context_pinTab, -#context_pinSelectedTabs { +#context_pinSelectedTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_pinTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab, +#sidebartabs_asamuzak_jp-menuitem-_pinTab { --menuitem-image: url("../icons/pin-tab.svg"); } #context_unpinTab, -#context_unpinSelectedTabs { +#context_unpinSelectedTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_unpinTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab[label="Unpin Tab"], +#sidebartabs_asamuzak_jp-menuitem-_pinTab[label="Unpin Tab"] { --menuitem-image: url("../icons/unpin-tab.svg"); } #context_duplicateTab, -#context_duplicateTabs { +#context_duplicateTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_duplicateTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab, +#sidebartabs_asamuzak_jp-menuitem-_dupeTab { --menuitem-image: url("../icons/notebook-subsection.svg"); } +#tabcenter-reborn_ariasuni-menuitem-_contextMenuUnloadTab { +} #context_bookmarkTab, -#context_bookmarkSelectedTabs { +#context_bookmarkSelectedTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_bookmarkSelected, +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:bookmarkTree, +#sidebartabs_asamuzak_jp-menuitem-_bookmarkTab, +#sidebartabs_asamuzak_jp-menuitem-_bookmarkAllTabs { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } -#context_moveTabOptions { +#context_moveTabOptions, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_moveTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab, +#sidebartabs_asamuzak_jp-menuitem-_moveTab { --menuitem-image: url("../icons/arrow-swap.svg"); } -#context_sendTabToDevice { +#context_sendTabToDevice, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice { --menuitem-image: url("../icons/send-to-device.svg"); } +#treestyletab_piro_sakura_ne_jp-menuitem-_context_topLevel_sendTreeToDevice { +} #context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */ #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item { @@ -50,22 +93,52 @@ --menuitem-image: url("../icons/share.svg"); } } -#context_reopenInContainer { +#context_reopenInContainer, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab, +#sidebartabs_asamuzak_jp-menuitem-_openNewTabInContainer, +#sidebartabs_asamuzak_jp-menuitem-_reopenTabInContainer { --menuitem-image: url("../icons/container-openin-16.svg"); } -#context_selectAllTabs { +#sidebartabs_asamuzak_jp-menuitem-_reloadAllTabs { +} +#context_selectAllTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_selectAllTabs, +#sidebartabs_asamuzak_jp-menuitem-_selectAllTabs { --menuitem-image: url("../icons/tab-multiple.svg"); } -#context_closeTab { +#sidebartabs_asamuzak_jp-menuitem-_tabGroup { +} + +#context_closeTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:closeTree, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab, +#sidebartabs_asamuzak_jp-menuitem-_closeTab { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } +#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTabs, +#sidebartabs_asamuzak_jp-menuitem-_closeMultipleTabs { +} #context_closeTabOptions { } -#context_undoCloseTab { +#context_undoCloseTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_undoCloseTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab, +#sidebartabs_asamuzak_jp-menuitem-_undoCloseTab { --menuitem-image: url("../icons/undo.svg"); } +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:collapseTreeRecursively, +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:collapseAll, +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:expandTreeRecursively { +} +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:expandAll { +} + /*= new-tab-button-popup =====================================================*/ #new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"], .new-tab-popup > menuitem[command="Browser:NewUserContextTab"] { diff --git a/src/icons/_layout_activity_stream.scss b/src/icons/layout/_activity_stream.scss similarity index 100% rename from src/icons/_layout_activity_stream.scss rename to src/icons/layout/_activity_stream.scss diff --git a/src/icons/_layout_bookmark_menu.scss b/src/icons/layout/_bookmark_menu.scss similarity index 100% rename from src/icons/_layout_bookmark_menu.scss rename to src/icons/layout/_bookmark_menu.scss diff --git a/src/icons/_layout_menu.scss b/src/icons/layout/_menu.scss similarity index 98% rename from src/icons/_layout_menu.scss rename to src/icons/layout/_menu.scss index 7493b61..93aac39 100644 --- a/src/icons/_layout_menu.scss +++ b/src/icons/layout/_menu.scss @@ -1,4 +1,4 @@ -@import "./layout_menu_common"; +@import "./menu_common"; //-- Mixin --------------------------------------------------------------------- // Components diff --git a/src/icons/_layout_menu_common.scss b/src/icons/layout/_menu_common.scss similarity index 100% rename from src/icons/_layout_menu_common.scss rename to src/icons/layout/_menu_common.scss diff --git a/src/icons/_layout_menu_contents.scss b/src/icons/layout/_menu_contents.scss similarity index 98% rename from src/icons/_layout_menu_contents.scss rename to src/icons/layout/_menu_contents.scss index 4c383a0..e10008d 100644 --- a/src/icons/_layout_menu_contents.scss +++ b/src/icons/layout/_menu_contents.scss @@ -1,4 +1,4 @@ -@import "../icons/layout_menu_common"; +@import "./menu_common"; //-- Mixin --------------------------------------------------------------------- $_placesPopupSet: "menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)"; diff --git a/src/icons/_layout_panel.scss b/src/icons/layout/_panel.scss similarity index 100% rename from src/icons/_layout_panel.scss rename to src/icons/layout/_panel.scss diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 4744153..762566e 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -4,6 +4,7 @@ @use "utils/theme" as *; @use "utils/accent_color" as *; @use "utils/native_menu" as *; +@use "utils/one_liner" as *; @use "utils/proton_elements" as Proton; @use "sass:selector"; @@ -18,37 +19,8 @@ /** Compatibility Fixes *******************************************************/ @import "compatibility/index"; -/** System Default Theme ******************************************************/ -@include Option("userChrome.theme.system_default") { - @import "theme/system_default_theme"; -} - -/** Fully Theme Mode **********************************************************/ -/* Default Themes - https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json - https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json - https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json - */ - -@include Option("userChrome.theme.proton_color") { - @import "theme/proton_color"; - @include Option("userChrome.theme.proton_color.dark_blue_accent") { - @import "theme/dark_blue_accent"; - } -} -@include Option("userChrome.theme.fully_color") { - @import "theme/fully_color"; -} - -/* Fully Dark Mode ************************************************************/ -@include Option("userChrome.theme.fully_dark") { - @import "theme/fully_dark"; -} - -/* Proton Theme Mode **********************************************************/ -@include Option("userChrome.theme.proton_chrome") { - @import "theme/proton_chrome"; -} +/** Theme *********************************************************************/ +@import "theme/index"; /** Decoration ****************************************************************/ @import "decoration/index"; @@ -62,54 +34,38 @@ /** Tab Bar UI ****************************************************************/ @import "tabbar/index"; +/** Tab UI ****************************************************************/ +@import "tab/index"; + /** Url View UI ***************************************************************/ @import "urlview/index"; /** Panel UI ******************************************************************/ @import "panel/index"; +/** Sidebar UI ****************************************************************/ +@import "sidebar/index"; + /** Fullscreen - Overlap toolbar **********************************************/ @import "fullscreen/index"; -/** Library - Icons Replace ***************************************************/ -@include Option("userChrome.icon.library") { - @import "library/chrome"; -} +/** Centered ******************************************************************/ +@import "centered/index"; -/** Panel - Icons *************************************************************/ -@include Option("userChrome.icon.panel") { - @import "icons/layout_panel"; - @import "icons/panel"; -} +/** Auto Hide *****************************************************************/ +@import "autohide/index"; -/** Menu - Icons Layout *******************************************************/ -@include Option("userChrome.icon.menu") { - @import "icons/layout_menu"; - @import "icons/layout_bookmark_menu"; +/** Hidden ********************************************************************/ +@import "hidden/index"; - @include Option("userChrome.icon.context_menu") { - @import "icons/context_menu"; - } - @include Option("userChrome.icon.global_menubar") { - @import "icons/global_menubar"; - } - @include Option("userChrome.icon.global_menu") { - @import "icons/global_menu"; - } -} +/** Icons *********************************************************************/ +@import "icons/index"; -/** Libray Menu ***************************************************************/ -@include Option("userChrome.icon.library") { - @include Option("userChrome.icon.menu") { - @import "icons/library"; - } -} - -/*= Waterfox =================================================================*/ +/** Waterfox ******************************************************************/ @import "icons/waterfox"; @include Option("userChrome.theme.fully_color") { @import "theme/waterfox"; } -/*= Tor Browser ==============================================================*/ +/** Tor Browser ***************************************************************/ @import "icons/tor_browser"; diff --git a/src/leptonContent.scss b/src/leptonContent.scss index 1fcf8e2..01e47c2 100644 --- a/src/leptonContent.scss +++ b/src/leptonContent.scss @@ -34,6 +34,11 @@ @import "contents/proton_contents"; } +/** Monospace *****************************************************************/ +@include Option("userContent.page.monospace") { + @import "contents/monospace"; +} + /** Menu - Icons Layout *******************************************************/ @include Option("userChrome.icon.menu") { @import "contents/context_menu"; diff --git a/src/padding/_bookmark_bar.scss b/src/padding/_bookmarkbar.scss similarity index 100% rename from src/padding/_bookmark_bar.scss rename to src/padding/_bookmarkbar.scss diff --git a/src/padding/_index.scss b/src/padding/_index.scss index b4872dc..6acdb09 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -26,12 +26,12 @@ /*= Nav Bar - Reduce Width ===================================================*/ @include Option("userChrome.padding.navbar_width") { - @import "nav_bar"; + @import "navbar"; } /*= URL Bar - Reduce Padding =================================================*/ @include Option("userChrome.padding.urlbar") { - @import "url_bar"; + @import "urlbar"; } @include Option("userChrome.padding.urlView_expanding") { @import "urlview_expanding"; @@ -42,12 +42,17 @@ /*= BookMark Bar - Reduce Height =============================================*/ @include Option("userChrome.padding.bookmarkbar") { - @import "bookmark_bar"; + @import "bookmarkbar"; } /*= Info Bar - Reduce Padding ================================================*/ +@include Option("userChrome.padding.infobar", "userChrome.autohide.infobar") { + #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { + margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin, 8px)) !important; + } +} @include Option("userChrome.padding.infobar") { - @import "info_bar"; + @import "infobar"; } /*= Menu - Reduce Padding ====================================================*/ diff --git a/src/padding/_info_bar.scss b/src/padding/_infobar.scss similarity index 52% rename from src/padding/_info_bar.scss rename to src/padding/_infobar.scss index 409550c..9697bc6 100644 --- a/src/padding/_info_bar.scss +++ b/src/padding/_infobar.scss @@ -1,32 +1,42 @@ :root:not([uidensity]) #tab-notification-deck { - --infobar-message-margin: 0 4px 3px; -} -:root[uidensity="compact"] #tab-notification-deck { - --infobar-message-margin: 0 4px 2px; -} -#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { - margin: var(--infobar-message-margin, 0 4px 4px) !important; -} + --infobar-message-vertical-margin: 3px; -:root:not([uidensity]) notification-message[message-bar-type="infobar"] { --infobar-vertical-margin: 7px; --infobar-button-vertical-margin: 3px; } -:root[uidensity="compact"] notification-message[message-bar-type="infobar"] { +:root[uidensity="compact"] #tab-notification-deck { + --infobar-message-vertical-margin: 2px; + --infobar-vertical-margin: 6px; --infobar-button-vertical-margin: 2px; } +:root[uidensity="touch"] #tab-notification-deck { + --infobar-message-vertical-margin: 4px; + + --infobar-vertical-margin: 8px; + --infobar-button-vertical-margin: 4px; +} + +:root:not([uidensity]) #tab-notification-deck, +:root:not([uidensity]) notification-message[message-bar-type="infobar"] { +} +:root[uidensity="compact"] #tab-notification-deck, +:root[uidensity="compact"] notification-message[message-bar-type="infobar"] { +} +:root[uidensity="touch"] #tab-notification-deck, +:root[uidensity="touch"] notification-message[message-bar-type="infobar"] { +} .infobar > .icon { - margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ + margin-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ } .notification-message { - padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ + padding-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ } .notification-button-container > .notification-button { - margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */ + margin-block: var(--infobar-button-vertical-margin) !important; /* Original: 4px */ } .notification-close { - margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */ + margin: var(--infobar-button-vertical-margin) 8px !important; /* Original: 4px 8px */ } /* Hard coded for compatibility - Disappearing phenomenon */ diff --git a/src/padding/_nav_bar.scss b/src/padding/_navbar.scss similarity index 100% rename from src/padding/_nav_bar.scss rename to src/padding/_navbar.scss diff --git a/src/padding/_tabbar_height.scss b/src/padding/_tabbar_height.scss index 71fc4be..02456f7 100644 --- a/src/padding/_tabbar_height.scss +++ b/src/padding/_tabbar_height.scss @@ -1,24 +1,28 @@ /* Toolbar Height */ @include Option("userChrome.tab.lepton_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px; - } - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 32px; - } - :root[uidensity="touch"] #TabsToolbar { - --tab-min-height: 41px; + :root { + &:not([uidensity]) { + --tab-min-height: 36px !important; + } + &[uidensity="compact"] { + --tab-min-height: 32px !important; + } + &[uidensity="touch"] { + --tab-min-height: 41px !important; + } } } @include Option("userChrome.tab.photon_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 32px; - } - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px; - } - :root[uidensity="touch"] #TabsToolbar { - --tab-min-height: 41px; + :root { + &:not([uidensity]) { + --tab-min-height: 32px !important; + } + &[uidensity="compact"] { + --tab-min-height: 29px !important; + } + &[uidensity="touch"] { + --tab-min-height: 41px !important; + } } /* Top Margin */ @@ -29,11 +33,13 @@ } @include NotOption("userChrome.tab.lepton_like_padding") { @include NotOption("userChrome.tab.photon_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px; /* 38px -> 36px */ - } - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px; /* 36px -> 29px */ + :root { + &:not([uidensity]) { + --tab-min-height: 36px !important; /* 38px -> 36px */ + } + &[uidensity="compact"] { + --tab-min-height: 29px !important; /* 36px -> 29px */ + } } } } diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index 809d0c6..12e0ec8 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -1,9 +1,13 @@ /* Titlebar Space */ +:root { + --uc-title-pre-spacer: 30px; /* Original: 40px */ + --uc-title-post-spacer: 25px; /* Original: 40px */ +} .titlebar-spacer[type="pre-tabs"] { - width: 30px !important; /* Original: 40px */ + width: var(--uc-title-pre-spacer) !important; } .titlebar-spacer[type="post-tabs"] { - width: 25px !important; /* Original: 40px */ + width: var(--uc-title-post-spacer) !important; } /* Tabbar Buttons */ @@ -55,15 +59,16 @@ } /* Tab - Max Size */ -@include NotOption("userChrome.tab.photon_like_padding") { - :root { +:root { + @include NotOption("userChrome.tab.photon_like_padding") { --tab-max-width: 240px; } -} -@include Option("userChrome.tab.photon_like_padding") { - :root { + @include Option("userChrome.tab.photon_like_padding") { --tab-max-width: 225px; } + @include OneLiner { + --tab-max-width: 180px; + } } .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ diff --git a/src/padding/_url_bar.scss b/src/padding/_urlbar.scss similarity index 100% rename from src/padding/_url_bar.scss rename to src/padding/_urlbar.scss diff --git a/src/rounding/_square.scss b/src/rounding/_square.scss index 5ca97b2..10d9ab7 100644 --- a/src/rounding/_square.scss +++ b/src/rounding/_square.scss @@ -35,6 +35,7 @@ @include Option("userChrome.rounding.square_menupopup") { xul|menupopup { + --panel-border-radius: 0px !important; border-radius: 0 !important; } } diff --git a/src/sidebar/_index.scss b/src/sidebar/_index.scss new file mode 100644 index 0000000..adf19ab --- /dev/null +++ b/src/sidebar/_index.scss @@ -0,0 +1 @@ +@import "overlap"; diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss new file mode 100644 index 0000000..f877334 --- /dev/null +++ b/src/sidebar/_overlap.scss @@ -0,0 +1,66 @@ +@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") { + #sidebar-box { + /* Original + min-width: 14em; + width: 18em; + max-width: 36em; + */ + + --uc-sidebar-width: 40px; + --uc-sidebar-activate-width: 18em; + --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); + --uc-sidebar-fullscreen-width: 4px; + --uc-sidebar-shadow-color: #28282F; + --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + + z-index: 1 !important; + position: relative !important; + + box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); + &[positionend="true"] { + box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color); + } + } + + #sidebar { + display: block; + } + + #sidebar-splitter { + display: none !important; + } +} + +@include Option("userChrome.sidebar.overlap") { + #sidebar-box[positionend="true"] { + direction: rtl; + } + + #sidebar-header { + background-color: var(--sidebar-background-color) !important; + color: var(--sidebar-text-color) !important; + overflow: hidden; + } + + @include NotOption("userChrome.autohide.sidebar") { + #sidebar-box, + #sidebar { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } + + #sidebar-box { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + will-change: padding-inline; + + &:not([hidden="true"]) { + padding-inline-start: var(--uc-sidebar-activate-width); + } + + @include Animate { + transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear !important; + } + } + } +} diff --git a/src/tabbar/_clipped_tab.scss b/src/tab/_clipped_tab.scss similarity index 86% rename from src/tabbar/_clipped_tab.scss rename to src/tab/_clipped_tab.scss index 8b237a8..b08982f 100644 --- a/src/tabbar/_clipped_tab.scss +++ b/src/tab/_clipped_tab.scss @@ -10,7 +10,9 @@ /** Clipped tabs - Show close button at pinned tab ****************************/ @include Option("userChrome.tab.close_button_at_pinned") { - @import "clipped_tab/pinned_close_button"; + @include NotOption("userChrome.tabbar.as_titlebar") { + @import "clipped_tab/pinned_close_button"; + } } /** Clipped tabs - Always show tab icon ***************************************/ diff --git a/src/tabbar/_connect_to_window.scss b/src/tab/_connect_to_window.scss similarity index 100% rename from src/tabbar/_connect_to_window.scss rename to src/tab/_connect_to_window.scss diff --git a/src/tabbar/_container_tab.scss b/src/tab/_container_tab.scss similarity index 100% rename from src/tabbar/_container_tab.scss rename to src/tab/_container_tab.scss diff --git a/src/tabbar/_crashed_tab.scss b/src/tab/_crashed_tab.scss similarity index 100% rename from src/tabbar/_crashed_tab.scss rename to src/tab/_crashed_tab.scss diff --git a/src/tab/_index.scss b/src/tab/_index.scss new file mode 100644 index 0000000..ec088a5 --- /dev/null +++ b/src/tab/_index.scss @@ -0,0 +1,41 @@ +/*= Tab - Connect to window ==============================================*/ +@include Option("userChrome.tab.connect_to_window") { + @import "connect_to_window"; +} + +/*= Selected Tab =============================================================*/ +@import "selected_tab"; + +/*= Unselected Tab - Divide line =============================================*/ +@import "unselected_tab"; + +/*= New tab button ============================================================*/ +@import "newtab_button"; + +/*= Unloaded Tab - Contents Opacity ===========================================*/ +@include Option("userChrome.tab.unloaded") { + @import "unload_tab"; +} + +/*= Clipped tabs =============================================================*/ +@import "clipped_tab"; + +/*= Sound Tab ================================================================*/ +@import "sound_tab"; + +/*= PictureInPicture Tab - Show PIP Icon =====================================*/ +@include Option("userChrome.tab.pip") { + @import "picture_in_picture_tab"; +} + +/*= Container Tab - Color line at icon's bottom ==============================*/ +@include Option("userChrome.tab.container") { + @include NotOption("userChrome.tabbar.as_titlebar") { + @import "container_tab"; + } +} + +/*= Crashed Tab - Don't show Favicons ========================================*/ +@include Option("userChrome.tab.crashed") { + @import "crashed_tab"; +} diff --git a/src/tabbar/_newtab_button.scss b/src/tab/_newtab_button.scss similarity index 100% rename from src/tabbar/_newtab_button.scss rename to src/tab/_newtab_button.scss diff --git a/src/tabbar/_picture_in_picture_tab.scss b/src/tab/_picture_in_picture_tab.scss similarity index 100% rename from src/tabbar/_picture_in_picture_tab.scss rename to src/tab/_picture_in_picture_tab.scss diff --git a/src/tabbar/_selected_tab.scss b/src/tab/_selected_tab.scss similarity index 100% rename from src/tabbar/_selected_tab.scss rename to src/tab/_selected_tab.scss diff --git a/src/tabbar/_sound_tab.scss b/src/tab/_sound_tab.scss similarity index 83% rename from src/tabbar/_sound_tab.scss rename to src/tab/_sound_tab.scss index 23ca831..6adad7b 100644 --- a/src/tabbar/_sound_tab.scss +++ b/src/tab/_sound_tab.scss @@ -1,6 +1,8 @@ /*= Sound Tab - Hide Label ===================================================*/ @include Option("userChrome.tab.sound_hide_label") { - @import "sound_tab/hide_label"; + @include NotOption("userChrome.tab.sound_show_label") { + @import "sound_tab/hide_label"; + } } /*= Sound Tab - Show Label ===================================================*/ diff --git a/src/tabbar/_unload_tab.scss b/src/tab/_unload_tab.scss similarity index 100% rename from src/tabbar/_unload_tab.scss rename to src/tab/_unload_tab.scss diff --git a/src/tabbar/_unselected_tab.scss b/src/tab/_unselected_tab.scss similarity index 100% rename from src/tabbar/_unselected_tab.scss rename to src/tab/_unselected_tab.scss diff --git a/src/tabbar/clipped_tab/_always_show_tab_icon.scss b/src/tab/clipped_tab/_always_show_tab_icon.scss similarity index 100% rename from src/tabbar/clipped_tab/_always_show_tab_icon.scss rename to src/tab/clipped_tab/_always_show_tab_icon.scss diff --git a/src/tabbar/clipped_tab/_letters_cleary.scss b/src/tab/clipped_tab/_letters_cleary.scss similarity index 100% rename from src/tabbar/clipped_tab/_letters_cleary.scss rename to src/tab/clipped_tab/_letters_cleary.scss diff --git a/src/tabbar/clipped_tab/_pinned_close_button.scss b/src/tab/clipped_tab/_pinned_close_button.scss similarity index 100% rename from src/tabbar/clipped_tab/_pinned_close_button.scss rename to src/tab/clipped_tab/_pinned_close_button.scss diff --git a/src/tabbar/clipped_tab/_show_close_button_at_hover.scss b/src/tab/clipped_tab/_show_close_button_at_hover.scss similarity index 100% rename from src/tabbar/clipped_tab/_show_close_button_at_hover.scss rename to src/tab/clipped_tab/_show_close_button_at_hover.scss diff --git a/src/tabbar/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss similarity index 100% rename from src/tabbar/newtab_button/_looks_like_tab.scss rename to src/tab/newtab_button/_looks_like_tab.scss diff --git a/src/tabbar/newtab_button/_proton_like_button.scss b/src/tab/newtab_button/_proton_like_button.scss similarity index 100% rename from src/tabbar/newtab_button/_proton_like_button.scss rename to src/tab/newtab_button/_proton_like_button.scss diff --git a/src/tabbar/newtab_button/_smaller_button.scss b/src/tab/newtab_button/_smaller_button.scss similarity index 100% rename from src/tabbar/newtab_button/_smaller_button.scss rename to src/tab/newtab_button/_smaller_button.scss diff --git a/src/tabbar/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss similarity index 100% rename from src/tabbar/selected_tab/_bottom_rounded_corner.scss rename to src/tab/selected_tab/_bottom_rounded_corner.scss diff --git a/src/tabbar/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss similarity index 100% rename from src/tabbar/selected_tab/_box_shadow.scss rename to src/tab/selected_tab/_box_shadow.scss diff --git a/src/tabbar/selected_tab/_color_like_toolbar.scss b/src/tab/selected_tab/_color_like_toolbar.scss similarity index 100% rename from src/tabbar/selected_tab/_color_like_toolbar.scss rename to src/tab/selected_tab/_color_like_toolbar.scss diff --git a/src/tabbar/selected_tab/_multi_selected.scss b/src/tab/selected_tab/_multi_selected.scss similarity index 100% rename from src/tabbar/selected_tab/_multi_selected.scss rename to src/tab/selected_tab/_multi_selected.scss diff --git a/src/tabbar/selected_tab/_photon_like_contextline.scss b/src/tab/selected_tab/_photon_like_contextline.scss similarity index 100% rename from src/tabbar/selected_tab/_photon_like_contextline.scss rename to src/tab/selected_tab/_photon_like_contextline.scss diff --git a/src/tabbar/sound_tab/_hide_label.scss b/src/tab/sound_tab/_hide_label.scss similarity index 100% rename from src/tabbar/sound_tab/_hide_label.scss rename to src/tab/sound_tab/_hide_label.scss diff --git a/src/tabbar/sound_tab/_show_label.scss b/src/tab/sound_tab/_show_label.scss similarity index 100% rename from src/tabbar/sound_tab/_show_label.scss rename to src/tab/sound_tab/_show_label.scss diff --git a/src/tabbar/sound_tab/_show_with_favicons.scss b/src/tab/sound_tab/_show_with_favicons.scss similarity index 61% rename from src/tabbar/sound_tab/_show_with_favicons.scss rename to src/tab/sound_tab/_show_with_favicons.scss index bfbb565..8427e96 100644 --- a/src/tabbar/sound_tab/_show_with_favicons.scss +++ b/src/tab/sound_tab/_show_with_favicons.scss @@ -1,3 +1,30 @@ +//-- Mixin --------------------------------------------------------------------- +@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; + } + } +} + +@mixin _hidden_tabIcon_soundTabIcon() { + @include NotOption("userChrome.hidden.tab_icon") { + &:not([image]) { + @content; + } + } + @include Option("userChrome.hidden.tab_icon") { + @include NotOption("userChrome.hidden.tab_icon.always") { + @content; + } + } +} + +//------------------------------------------------------------------------------ + /* Makes the favicons always visible (also on hover) */ .tab-icon-image:not([pinned]) { opacity: 1 !important; @@ -26,8 +53,12 @@ fill-opacity: 0.8 !important; opacity: 1 !important; } -.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { - transform: translateX(4px); + +/* Label */ +@include _hidden_tabIcon_soundTabLabel { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { + transform: translateX(4px); + } } /* Animate */ @@ -44,18 +75,22 @@ /* None exist favicon - Size bigger */ @include NotOption("userChrome.tab.always_show_tab_icon") { - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { - transform: translateX(-0.5px) translateY(-1px); - inset-inline-end: 0 !important; - margin-inline-end: 0 !important; - padding: 0 !important; - } - .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { - opacity: 0 !important; /* Favicon hidden */ - } - .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) - .tab-label { - transform: translateX(3px); + .tabbrowser-tab { + @include _hidden_tabIcon_soundTabIcon { + .tab-icon-overlay:not([pinned], [sharing], [crashed]) { + transform: translateX(-0.5px) translateY(-1px); + inset-inline-end: 0 !important; + margin-inline-end: 0 !important; + padding: 0 !important; + } + &:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { + opacity: 0 !important; /* Favicon hidden */ + } + &:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(3px); + } + } } } diff --git a/src/tabbar/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss similarity index 91% rename from src/tabbar/unselected_tab/_dynamic_separator.scss rename to src/tab/unselected_tab/_dynamic_separator.scss index 2ba2299..e997567 100644 --- a/src/tabbar/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -57,6 +57,16 @@ .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::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 { + opacity: var(--tab-separator-opacity); + transform: translateX(-1.5px) translateY(calc(-50% + 1px)); + } + } + } +} @include Option("userChrome.tab.newtab_button_like_tab") { #tabs-newtab-button:not(:hover, [open])::before { opacity: var(--tab-separator-opacity); diff --git a/src/tabbar/unselected_tab/_static_separator.scss b/src/tab/unselected_tab/_static_separator.scss similarity index 100% rename from src/tabbar/unselected_tab/_static_separator.scss rename to src/tab/unselected_tab/_static_separator.scss diff --git a/src/tabbar/_as_titlebar.scss b/src/tabbar/_as_titlebar.scss new file mode 100644 index 0000000..2bdacab --- /dev/null +++ b/src/tabbar/_as_titlebar.scss @@ -0,0 +1,87 @@ +//-- Mixin --------------------------------------------------------------------- +@mixin _asTitlebar_preSpacer() { + @include NotOption("userChrome.centered.tab") { + @content; + } + @include Option("userChrome.centered.tab") { + @include Option("userChrome.centered.tab.label") { + @content; + } + } +} + +//------------------------------------------------------------------------------ + +:root:not([tabsintitlebar="true"]) #tabbrowser-tabs, /* Show only */ +#scrollbutton-up, /* Defaults */ +#scrollbutton-down, +.titlebar-spacer[type="pre-tabs"], +spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), +.tabbrowser-tab:not([selected="true"]), +.tabbrowser-tab[selected="true"] .tab-background, +.tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after), +.tabbrowser-tab[selected="true"] .tab-close-button, +#tabs-newtab-button { + display: none !important; +} + +.tabbrowser-tab[selected="true"] { + -moz-window-dragging: drag; + --tab-max-width: 100vw; + min-width: calc(var(--uc-tabbar-width, 100vw) - var(--uc-widow-control-space)) !important; + max-width: var(--tab-max-width) !important; + + margin-inline-start: calc(var(--tab-shadow-max-size) * -1) !important; + // padding-inline-start: calc(var(--tab-shadow-max-size) + 1px) !important; + + &[pinned="true"] { + -moz-box-flex: 100; + max-width: var(--tab-max-width) !important; + } + .tab-label-container { + margin-inline: 0 !important; + } +} +.tab-content { + margin-inline: auto; + width: 100%; +} + +/* Pinned */ +#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { + position: relative !important; +} +#tabbrowser-tabs { + --tab-overflow-pinned-tabs-width: 0 !important; + padding-inline: 0 !important; /* Original: var(--tab-overflow-pinned-tabs-width) 0; */ +} +.tab-throbber, +.tab-icon-pending, +.tab-icon-image, +.tab-sharing-icon-overlay, +.tab-icon-overlay { + &[pinned] { + margin-inline-end: 5.5px; + } +} +.tab-label-container[pinned] { + width: unset !important; +} + +/* Padding */ +@include _asTitlebar_preSpacer { + #tabbrowser-arrowscrollbox { + margin-inline: 2px !important; + } + :root[sizemode="normal"] #tabbrowser-arrowscrollbox { + margin-inline: 6px !important; + } +} + + +@include Option("browser.tabs.tabmanager.enabled") { + :root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button, + :root:not([tabsintitlebar="true"]) #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button { + display: -moz-box !important; + } +} diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 4b18055..0f5909d 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -1,5 +1,5 @@ /*= Tabs on Bottom ===========================================================*/ -@include Option("userChrome.tab.on_bottom", "userChrome.fullscreen.overlap") { +@include Option("userChrome.tabbar.on_bottom", "userChrome.fullscreen.overlap") { /* Don't use display: flex at not fullscreen!! side effect #372 */ :root[sizemode="fullscreen"] #navigator-toolbox { display: flex !important; /* Needed for content to take up entire height, compatibility with tabs on bottom */ @@ -19,51 +19,26 @@ } } -@include Option("userChrome.tab.on_bottom") { - @import "tabs_on_bottom"; +@include Option("userChrome.tabbar.on_bottom") { + @include OneLinerOnBottom { + @import "on_bottom"; + } } -/*= Tab Bar - Connect to window ==============================================*/ -@include Option("userChrome.tab.connect_to_window") { - @import "connect_to_window"; +/*= Tab Bar - Oneliner =======================================================*/ +@include OneLiner { + @import "one_liner"; } -/*= Selected Tab =============================================================*/ -@import "selected_tab"; - -/*= Unselected Tab - Divide line =============================================*/ -@import "unselected_tab"; - -/*= New tab button ============================================================*/ -@import "newtab_button"; - -/*= Unloaded Tab - Contents Opacity ===========================================*/ -@include Option("userChrome.tab.unloaded") { - @import "unload_tab"; +/*= Tab Bar - Shared Layout ==================================================*/ +@include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar", "userChrome.tabbar.as_titlebar") { + @import "layout/window_control_size"; +} +@include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") { + @import "layout"; } -/*= Clipped tabs =============================================================*/ -@import "clipped_tab"; - -/*= Sound Tab ================================================================*/ -@import "sound_tab"; - -/*= PictureInPicture Tab - Show PIP Icon =====================================*/ -@include Option("userChrome.tab.pip") { - @import "picture_in_picture_tab"; -} - -/*= Container Tab - Color line at icon's bottom ==============================*/ -@include Option("userChrome.tab.container") { - @import "container_tab"; -} - -/*= Crashed Tab - Don't show Favicons ========================================*/ -@include Option("userChrome.tab.crashed") { - @import "crashed_tab"; -} - -/*= Tab Label - Make to Center ===============================================*/ -@include Option("userChrome.tab.centered_label") { - @import "centered_label"; +/*= Tab Bar - Show only current tab ==========================================*/ +@include Option("userChrome.tabbar.as_titlebar") { + @import "as_titlebar"; } diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss new file mode 100644 index 0000000..b6fed2c --- /dev/null +++ b/src/tabbar/_layout.scss @@ -0,0 +1,26 @@ +@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 Option("userChrome.tabbar.one_liner.tabbar_first") { + @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"; + } + } + @include Option("userChrome.tabbar.one_liner.tabbar_first") { + @media screen and (min-width: 1100px) { + @import "layout/window_control"; + } + } + } +} + +@import "layout/navbar_padding"; diff --git a/src/tabbar/_on_bottom.scss b/src/tabbar/_on_bottom.scss new file mode 100644 index 0000000..6011748 --- /dev/null +++ b/src/tabbar/_on_bottom.scss @@ -0,0 +1,130 @@ +/* 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. */ + +/*= Tabbar - Move to bottom ==================================================*/ +#titlebar { + order: 2; /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + --tabs-navbar-shadow-size: 0px; +} +#tab-notification-deck { + order: 2; /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; +} + +#TabsToolbar .titlebar-spacer { + display: none; +} + +#TabsToolbar-customization-target > .toolbarbutton-1:last-child { + padding-inline-end: var(--toolbar-start-end-padding, 8px); +} + +@include Option("userChrome.tabbar.on_bottom.above_bookmark") { + #PersonalToolbar { + order: 2; /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + } +} +@include NotOption("userChrome.tabbar.on_bottom.above_bookmark") { + @include Option("userChrome.tab.connect_to_window") { + @include Option("userChrome.tab.color_like_toolbar") { + #navigator-toolbox { + border-bottom-color: var(--toolbar-bgcolor) !important; /* Original: 1px solid var(--chrome-content-separator-color); */ + } + } + } +} + +/*= Tabbar - Hidden at singgle tab ===========================================*/ +@include Option("userChrome.tabbar.on_bottom.hidden_single_tab") { + #tabbrowser-tabs .tabbrowser-tab:only-of-type { + display: none !important; + } + + #tabbrowser-tabs, + #tabbrowser-tabs arrowscrollbox { + height: auto !important; + min-height: auto !important; + } + + @include Animate { + #tabbrowser-tabs { + transition: height 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } +} + +/*= Menubar - Always on top ==================================================*/ +@include Option("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"]) { + --uc-window-control-width: 0px !important; + } + /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ + :root:not([sizemode="fullscreen"]) #nav-bar { + border-inline-width: 0; + } + + #navigator-toolbox{ + -moz-window-dragging: drag; + } + :root[sizemode="fullscreen"] #navigator-toolbox { + padding-top: 0px !important; + } + #toolbar-menubar { + position: fixed; + display: flex; + top: var(--uc-titlebar-padding); + height: var(--uc-menubar-height); + width: 100%; + overflow: hidden; + } + :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { + height: var(--uc-menubar-height) !important; /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ + } + + #toolbar-menubar > .titlebar-buttonbox-container { + height: 100%; + order: 100; + } + + #toolbar-menubar > [flex] { + flex-grow: 100; + } + #toolbar-menubar > spacer[flex] { + order: 99; + flex-grow: 1; + min-width: var(--uc-window-drag-space-post); + } + + #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 > .titlebar-buttonbox-container{ + visibility: collapse !important; + } + :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: visible; + } +} diff --git a/src/tabbar/_one_liner.scss b/src/tabbar/_one_liner.scss new file mode 100644 index 0000000..2824363 --- /dev/null +++ b/src/tabbar/_one_liner.scss @@ -0,0 +1,104 @@ +:root { + --uc-navbar-width-origin: 40vw; + --uc-navbar-width: var(--uc-navbar-width-origin); + --uc-tabbar-width: calc(100vw - var(--uc-navbar-width)); + + --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px)); + + @include Option("userChrome.autohide.fill_urlbar") { + --uc-navbar-width-origin: 50vw; + --uc-navbar-width: 24em; + } +} + +#nav-bar { + --uc-navbar-double-block: calc(2 * var(--uc-navbar-block, 0px)); + height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important; + margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important; + margin-bottom: var(--uc-navbar-block, 0px) !important; + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); +} + +#titlebar { + transform: translateY(var(--uc-navbar-block, 0px)); +} +#TabsToolbar > .titlebar-buttonbox-container { + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); +} + +@include NotOption("userChrome.tabbar.one_liner.combine_navbar") { + :root { + --uc-navbar-gap: 10px; + --uc-navbar-block: 1.5px; // var(--tab-block-margin) or var(--tabs-navbar-shadow-size) + + &[uidensity="compact"] { + --uc-navbar-block: 1px; + } + &[uidensity="touch"] { + --uc-navbar-block: 3px; + } + } + + #nav-bar { + --toolbarbutton-inner-padding: 6px; /* Original: 8px */ + border-radius: var(--tab-border-radius, 4px); + } + + #nav-bar, + #nav-bar-customization-target { + -moz-box-align: center; + } + + #urlbar[breakout] { + top: 0px !important; /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */ + } +} + +@include Option("userChrome.tabbar.one_liner.combine_navbar") { + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; + } + + #nav-bar { + --lwt-tabs-border-color: transparent; // box-shadow + background-color: unset !important; // var(--toolbar-bgcolor) + background-image: unset !important; // var(--toolbar-bgimage) + } +} + +#urlbar-container { + min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; // Original: calc(350px + 24px + 2 * var(--toolbarbutton-inner-padding)) +} + +#PersonalToolbar { + // for URL Bar + position: relative; + z-index: -1; +} + +toolbarspring.chromeclass-toolbar-additional { + display: none !important; +} + +@include NotOption("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-start: var(--uc-navbar-margin) !important; + } + #nav-bar { + margin-inline-end: var(--uc-tabbar-width) !important; + } + .titlebar-spacer[type="pre-tabs"] { + display: none !important; + } +} +@include Option("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-navbar-margin) !important; + } + #nav-bar { + margin-inline-start: var(--uc-tabbar-width) !important; + } + .titlebar-spacer[type="post-tabs"] { + display: none !important; + } +} diff --git a/src/tabbar/_tabs_on_bottom.scss b/src/tabbar/_tabs_on_bottom.scss deleted file mode 100644 index f197f8a..0000000 --- a/src/tabbar/_tabs_on_bottom.scss +++ /dev/null @@ -1,237 +0,0 @@ -/* 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. */ - -/*= Tabbar - Move to bottom ==================================================*/ -#titlebar{ - order: 2; /* When userChrome.fullscreen.overlap */ - -moz-box-ordinal-group: 2; - --tabs-navbar-shadow-size: 0px; -} -#tab-notification-deck { - order: 2; /* When userChrome.fullscreen.overlap */ - -moz-box-ordinal-group: 2; -} - -#TabsToolbar .titlebar-spacer { - display: none; -} - -@include Option("userChrome.tab.on_bottom.above_bookmark") { - #PersonalToolbar { - order: 2; /* When userChrome.fullscreen.overlap */ - -moz-box-ordinal-group: 2; - } -} -@include NotOption("userChrome.tab.on_bottom.above_bookmark") { - @include Option("userChrome.tab.connect_to_window") { - @include Option("userChrome.tab.color_like_toolbar") { - #navigator-toolbox { - border-bottom-color: var(--toolbar-bgcolor) !important; /* Original: 1px solid var(--chrome-content-separator-color); */ - } - } - } -} - -/*= Windows Control - Move to toolbar ========================================*/ -:root { - --uc-titlebar-padding: 0px; -} - -@include OS($win) { - :root[sizemode="maximized"][tabsintitlebar]{ - --uc-titlebar-padding: 8px; - } -} - -#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, -#TabsToolbar > .titlebar-buttonbox-container{ - position: fixed; - display: block; - top: var(--uc-titlebar-padding); - right:0; - height: 40px; -} - -/* where window controls are on left */ -@include OS($mac) { - :root{ - --uc-titlebar-padding: 0px !important; - } - .titlebar-buttonbox-container{ - left:0; - right: unset !important; - } -} - -#navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; -} - -:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; -} - -#toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; -} - -.titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - @include OS($mac) { - margin-block: 10px; - } -} - -/* At Full Screen */ -:root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; -} -:root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; -} - -@include Option("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - visibility: hidden; - } -} - -/* At Activated Menubar */ -:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { - display: block !important; -} -:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; -} - -/*= Navbar - Padding for window controls =====================================*/ -/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ -:root { - --uc-window-control-width: 0px; /* Same as .titlebar-buttonbox-container - Space reserved for window controls */ - --uc-window-drag-space-pre: 0px; /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */ - --uc-window-drag-space-post: 0px; /* Same as .titlebar-spacer[type="post-tabs"] */ -} -:root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 84px; /* 84px is default value of linux */ - --uc-window-drag-space-pre: 30px; - --uc-window-drag-space-post: 25px; -} -:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { - --uc-window-drag-space-pre: 0px; /* Remove pre space */ -} - -#nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - - border-inline-style: solid !important; - border-inline-color: var(--toolbar-bgcolor); -} - -/* Windows */ -@include OS($win7, $win8) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 105px; - } -} - -@include OS($win10) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 138px; - } -} - -/* Use this pref to check Mac OS where window controls are on left */ -/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */ -@include OS($mac) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 72px; - } - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { - border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; - } -} - -/*= Menubar - Always on top ==================================================*/ -@include Option("userChrome.tab.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"]) { - --uc-window-control-width: 0px !important; - } - /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ - :root:not([sizemode="fullscreen"]) #nav-bar { - border-inline-width: 0; - } - - #navigator-toolbox{ - -moz-window-dragging: drag; - padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding)) !important; - } - :root[sizemode="fullscreen"] #navigator-toolbox { - padding-top: 0px !important; - } - #toolbar-menubar { - position: fixed; - display: flex; - top: var(--uc-titlebar-padding); - height: var(--uc-menubar-height); - width: 100%; - overflow: hidden; - } - :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { - height: var(--uc-menubar-height) !important; /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ - } - - #toolbar-menubar > .titlebar-buttonbox-container { - height: 100%; - order: 100; - } - - #toolbar-menubar > [flex] { - flex-grow: 100; - } - #toolbar-menubar > spacer[flex] { - order: 99; - flex-grow: 1; - min-width: var(--uc-window-drag-space-post); - } - - #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 > .titlebar-buttonbox-container{ - visibility: collapse !important; - } - :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: visible; - } -} diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss new file mode 100644 index 0000000..41f22b5 --- /dev/null +++ b/src/tabbar/layout/_navbar_padding.scss @@ -0,0 +1,128 @@ +/*= Navbar - Padding for window controls =====================================*/ +/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ + +//-- Mixin --------------------------------------------------------------------- +@mixin _remove_spacer_pre() { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; +} + +@mixin _remove_spacer_post() { + /* Don't need window control */ + --uc-widow-control-space: 0px; +} + +@mixin _remove_spacer_oneLiner() { + @include Option("userChrome.tabbar.one_liner.tabbar_first") { + @include _remove_spacer_pre; + @include Option("userChrome.tabbar.as_titlebar") { + #tabbrowser-tabs { + @include _remove_spacer_post; + } + } + } + @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { + @include NotOption("userChrome.tabbar.as_titlebar") { + @include _remove_spacer_post; + } + } +} + +@mixin _oneLiner_navBar_borderPadding() { + @include NotOption("userChrome.tabbar.one_liner") { + @content; + } + @include Option("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.one_liner.combine_navbar") { + @content; + } + @include NotOption("userChrome.tabbar.one_liner.combine_navbar") { + @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { + @media screen and (max-width: 1100px) { + @content; + } + } + } + } +} + +@mixin _oneLiner_navBar_marginGap() { + @include NotOption("userChrome.tabbar.one_liner.combine_navbar") { + @include NotOption("userChrome.tabbar.one_liner.responsive") { + @content; + } + @include Option("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @content; + } + } + } +} + +//------------------------------------------------------------------------------ + +@include Option("userChrome.tabbar.one_liner") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + @include NotOption("userChrome.tabbar.one_liner.responsive") { + @include _remove_spacer_oneLiner; + } + @include Option("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @include NotOption("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { + @include _remove_spacer_pre; + @include _remove_spacer_post; + } + } + @media screen and (min-width: 1100px) { + @include _remove_spacer_oneLiner; + } + } + } +} + +#nav-bar { + border-inline-style: solid !important; + border-inline-color: transparent; + + @include _oneLiner_navBar_borderPadding { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-widow-control-space); + } + + @include Option("userChrome.tabbar.one_liner") { + @include _oneLiner_navBar_marginGap { + @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + @include Option("userChrome.tabbar.one_liner.tabbar_first") { + margin-inline-end: var(--uc-widow-control-space) !important; + } + } + } +} + +/* Use this pref to check Mac OS where window controls are on left */ +/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */ +@include OS($mac) { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + @include _oneLiner_navBar_borderPadding { + border-inline-start-width: var(--uc-widow-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + + @include Option("userChrome.tabbar.one_liner") { + @include _oneLiner_navBar_marginGap { + @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { + margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important; + } + @include Option("userChrome.tabbar.one_liner.tabbar_first") { + margin-inline-end: var(--uc-widow-control-space, 0px) !important; + } + } + } + } + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; + } +} diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss new file mode 100644 index 0000000..eef3fc9 --- /dev/null +++ b/src/tabbar/layout/_window_control.scss @@ -0,0 +1,121 @@ +/*= 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. */ +:root { + --uc-titlebar-padding: 0px; +} + +@include OS($win) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; + } +} + +#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, +#TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right:0; + height: 40px; + z-index: 1; +} + +/* where window controls are on left */ +@include OS($mac) { + :root{ + --uc-titlebar-padding: 0px !important; + } + .titlebar-buttonbox-container{ + left:0; + right: unset !important; + } +} + +#navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; +} + +:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; +} + +#toolbar-menubar[inactive] > .titlebar-buttonbox-container { + @include NotOption("userChrome.hidden.tabbar") { + opacity: 0; + visibility: collapse; + } + @include Option("userChrome.hidden.tabbar") { + opacity: 1; + visibility: visible; + + @include Option("userChrome.autohide.navbar") { + opacity: 0; + visibility: collapse; + } + } +} +#navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { + @include Option("userChrome.hidden.tabbar") { + @include Option("userChrome.autohide.navbar") { + opacity: 1; + visibility: visible; + } + } +} +@include Animate { + #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; + } +} + +.titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + @include OS($mac) { + margin-block: 10px; + } +} + +/* At Full Screen */ +:root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; +} +:root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; +} + +@include Option("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } +} +@include Option("userChrome.hidden.tabbar") { + :root[inFullscreen]:not([macOSNativeFullscreen]) { + #toolbar-menubar { + visibility: visible !important; + min-height: 0 !important; + max-height: 0 !important; + } + #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; +} +:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + @include NotOption("userChrome.hidden.tabbar") { + visibility: hidden; + } +} diff --git a/src/tabbar/layout/_window_control_size.scss b/src/tabbar/layout/_window_control_size.scss new file mode 100644 index 0000000..c3bb050 --- /dev/null +++ b/src/tabbar/layout/_window_control_size.scss @@ -0,0 +1,27 @@ +:root { + --uc-window-control-width: 0px; /* Same as .titlebar-buttonbox-container - Space reserved for window controls */ + --uc-window-drag-space-pre: 0px; /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */ + --uc-window-drag-space-post: 0px; /* Same as .titlebar-spacer[type="post-tabs"] */ + + --uc-widow-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); +} + +:root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-width: 84px; /* 84px is default value of linux */ + --uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); // 30px + --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); // 25px + + @include OS($win7, $win8) { + --uc-window-control-width: 105px; + } + @include OS($win10) { + --uc-window-control-width: 138px; + } + @include OS($mac) { + --uc-window-control-width: 72px; + } +} + +:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; /* Remove pre space */ +} diff --git a/src/theme/_index.scss b/src/theme/_index.scss new file mode 100644 index 0000000..36f344e --- /dev/null +++ b/src/theme/_index.scss @@ -0,0 +1,35 @@ +/*= System Default Theme =====================================================*/ +@include Option("userChrome.theme.system_default") { + @import "system_default_theme"; +} + +/*= Fully Theme Mode =========================================================*/ +// Default Themes +// https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json +// https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json +// https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json + +@include Option("userChrome.theme.proton_color") { + @import "proton_color"; + @include Option("userChrome.theme.proton_color.dark_blue_accent") { + @import "dark_blue_accent"; + } +} +@include Option("userChrome.theme.fully_color") { + @import "fully_color"; +} + +/*= Fully Dark Mode ==========================================================*/ +@include Option("userChrome.theme.fully_dark") { + @import "fully_dark"; +} + +/*= Proton Theme Mode ========================================================*/ +@include Option("userChrome.theme.proton_chrome") { + @import "proton_chrome"; +} + +/*= Monospace ================================================================*/ +@include Option("userChrome.theme.monospace") { + @import "monospace"; +} diff --git a/src/theme/_monospace.scss b/src/theme/_monospace.scss new file mode 100644 index 0000000..690a2c0 --- /dev/null +++ b/src/theme/_monospace.scss @@ -0,0 +1,3 @@ +* { + font-family: -moz-fixed; +} diff --git a/src/urlview/_always_show_page_actions.scss b/src/urlview/_always_show_page_actions.scss index 11ba6c6..d489f80 100644 --- a/src/urlview/_always_show_page_actions.scss +++ b/src/urlview/_always_show_page_actions.scss @@ -1,3 +1,4 @@ -#pageActionButton { +#urlbar:not([breakout-extend="true"]) #pageActionButton { display: block !important; + visibility: visible !important; } diff --git a/src/urlview/_move_icon_to_left.scss b/src/urlview/_move_icon_to_left.scss index 27ddfb3..bbb4353 100644 --- a/src/urlview/_move_icon_to_left.scss +++ b/src/urlview/_move_icon_to_left.scss @@ -1,7 +1,7 @@ .urlbarView-type-icon { min-width: 16px !important; height: 16px !important; - margin-bottom: 0 !important; + margin-block: 0 !important; margin-inline-start: 0 !important; } diff --git a/src/utils/_one_liner.scss b/src/utils/_one_liner.scss new file mode 100644 index 0000000..55dab40 --- /dev/null +++ b/src/utils/_one_liner.scss @@ -0,0 +1,68 @@ +@use "option" as *; + +@mixin OneLinerContent() { + @include NotOption("userChrome.tabbar.one_liner.responsive") { + @content; + } + @include Option("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @content; + } + } +} + +@mixin OneLiner() { + @include Option("userChrome.tabbar.one_liner") { + @include OneLinerContent { + @content; + } + } +} + +@mixin OneLinerOnBottom() { + @include NotOption("userChrome.tabbar.one_liner") { + @content; + } + @include Option("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @content; + } + } + } +} + +@mixin OneLinerTabbar() { + @include NotOption("userChrome.tabbar.one_liner.responsive") { + @content; + } + @include Option("userChrome.tabbar.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @content; + } + @include Option("userChrome.autohide.tabbar") { + @content; + } + } +} + +@mixin OneLinerNavbarContent() { + @include NotOption("userChrome.tabbar.one_liner") { + @content; + } + @include Option("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @content; + } + } + } +} + +@mixin OneLinerNavbar() { + @include Option("userChrome.autohide.navbar") { + @include OneLinerNavbarContent() { + @content; + } + } +} diff --git a/user.js b/user.js index 67a9599..beb5043 100644 --- a/user.js +++ b/user.js @@ -68,10 +68,40 @@ user_pref("userChrome.rounding.square_tab", false); // == Theme Custom Settings ==================================================== // -- User Chrome -------------------------------------------------------------- +// user_pref("userChrome.theme.proton_color.dark_blue_accent", true); +// user_pref("userChrome.theme.monospace", true); + // user_pref("userChrome.decoration.disable_panel_animate", true); // user_pref("userChrome.decoration.disable_sidebar_animate", true); -// user_pref("userChrome.theme.proton_color.dark_blue_accent", true); +// user_pref("userChrome.autohide.tab", true); +// user_pref("userChrome.autohide.tab.opacity", true); +// user_pref("userChrome.autohide.tab.blur", true); +// user_pref("userChrome.autohide.tabbar", true); +// user_pref("userChrome.autohide.navbar", true); +// user_pref("userChrome.autohide.bookmarkbar", true); +// user_pref("userChrome.autohide.sidebar", true); +// user_pref("userChrome.autohide.fill_urlbar", true); +// user_pref("userChrome.autohide.back_button", true); +// user_pref("userChrome.autohide.forward_button", true); +// user_pref("userChrome.autohide.page_action", true); +// user_pref("userChrome.autohide.toolbar_overlap", true); + +// user_pref("userChrome.hidden.tab_icon", 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.sidebar_header", true); +// user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true); +// user_pref("userChrome.hidden.urlbar_iconbox", true); +// user_pref("userChrome.hidden.bookmarkbar_icon", true); +// user_pref("userChrome.hidden.bookmarkbar_label", true); +// user_pref("userChrome.hidden.disabled_menu", true); + +// user_pref("userChrome.centered.tab", true); +// user_pref("userChrome.centered.tab.label", true); +// user_pref("userChrome.centered.urlbar", true); +// user_pref("userChrome.centered.bookmarkbar", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); @@ -95,21 +125,29 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.urlView.go_button_when_typing", true); // user_pref("userChrome.urlView.always_show_page_actions", true); -// user_pref("userChrome.tab.on_bottom", true); -// user_pref("userChrome.tab.on_bottom.above_bookmark", true); // Need on_bottom -// user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom +// user_pref("userChrome.tabbar.as_titlebar", 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 +// user_pref("userChrome.tabbar.on_bottom.hidden_single_tab", true); // Need on_bottom +// user_pref("userChrome.tabbar.one_liner", true); +// user_pref("userChrome.tabbar.one_liner.combine_navbar", true); // Need one_liner +// 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.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.sound_show_label", true); // Need remove sound_hide_label -// user_pref("userChrome.tab.centered_label", true); // user_pref("userChrome.panel.remove_strip", true); // user_pref("userChrome.panel.full_width_separator", true); // user_pref("userChrome.panel.full_width_padding", true); +// user_pref("userChrome.sidebar.overlap", true); + // user_pref("userChrome.icon.account_image_to_right", true); // user_pref("userChrome.icon.account_label_to_right", true); // user_pref("userChrome.icon.menu.full", true); @@ -120,6 +158,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userContent.page.proton_color.dark_blue_accent", true); // user_pref("userContent.page.proton_color.system_accent", true); +// user_pref("userContent.page.monospace", true); // == Theme Default Settings =================================================== // -- User Chrome --------------------------------------------------------------