From 98621a80e561508d605317b32bd867ba0a6d26fb Mon Sep 17 00:00:00 2001 From: RealStickman Date: Mon, 29 Aug 2022 19:20:12 +0200 Subject: [PATCH] Update to lepton 6.0.0 --- .../firefox/default-release/chrome/CREDITS | 11 + .../firefox/default-release/chrome/LEPTON | 2 +- .../firefox/default-release/chrome/README.org | 5 + .../chrome/__tests__/one_liner.test.scss | 118 + .../chrome/css/leptonChrome.css | 3177 ++++++++++++++--- .../chrome/css/leptonContent.css | 14 + .../default-release/chrome/install.ps1 | 1 + .../chrome/src/autohide/_back_button.scss | 16 + .../chrome/src/autohide/_bookmarkbar.scss | 30 + .../chrome/src/autohide/_common.scss | 50 + .../chrome/src/autohide/_fill_urlbar.scss | 31 + .../chrome/src/autohide/_forward_button.scss | 16 + .../chrome/src/autohide/_index.scss | 35 + .../chrome/src/autohide/_infobar.scss | 32 + .../chrome/src/autohide/_navbar.scss | 29 + .../chrome/src/autohide/_page_action.scss | 29 + .../chrome/src/autohide/_sidebar.scss | 20 + .../chrome/src/autohide/_tab.scss | 34 + .../chrome/src/autohide/_tabbar.scss | 64 + .../chrome/src/autohide/_toolbar_overlap.scss | 68 + .../chrome/src/autohide/sidebar/_overlap.scss | 47 + .../chrome/src/autohide/sidebar/_static.scss | 52 + .../chrome/src/centered/_bookmarkbar.scss | 4 + .../chrome/src/centered/_index.scss | 12 + .../chrome/src/centered/_tab.scss | 10 + .../chrome/src/centered/_urlbar.scss | 9 + .../chrome/src/centered/tab/_content.scss | 4 + .../chrome/src/centered/tab/_label.scss | 15 + .../chrome/src/centered/tab/_layout.scss | 13 + .../chrome/src/compatibility/_theme.scss | 5 + .../chrome/src/contents/_activity_stream.scss | 2 +- .../chrome/src/contents/_context_menu.scss | 2 +- .../chrome/src/contents/_monospace.scss | 5 + .../chrome/src/decoration/_animate.scss | 1 + .../src/decoration/_download_panel.scss | 3 + .../chrome/src/hidden/_index.scss | 91 + .../chrome/src/icons/_index.scss | 33 + .../chrome/src/icons/_panel.scss | 3 +- .../src/icons/context_menu/_others.scss | 3 + .../src/icons/context_menu/_tab_toolbar.scss | 101 +- .../src/icons/layout/_activity_stream.scss | 16 + .../src/icons/layout/_bookmark_menu.scss | 118 + .../chrome/src/icons/layout/_menu.scss | 126 + .../chrome/src/icons/layout/_menu_common.scss | 140 + .../src/icons/layout/_menu_contents.scss | 90 + .../chrome/src/icons/layout/_panel.scss | 101 + .../chrome/src/leptonChrome.scss | 82 +- .../chrome/src/leptonContent.scss | 5 + .../chrome/src/padding/_bookmarkbar.scss | 3 + .../chrome/src/padding/_index.scss | 13 +- .../chrome/src/padding/_infobar.scss | 54 + .../chrome/src/padding/_navbar.scss | 4 + .../chrome/src/padding/_tabbar_height.scss | 48 +- .../chrome/src/padding/_tabbar_width.scss | 21 +- .../chrome/src/padding/_urlbar.scss | 24 + .../chrome/src/rounding/_square.scss | 1 + .../chrome/src/sidebar/_index.scss | 1 + .../chrome/src/sidebar/_overlap.scss | 66 + .../chrome/src/tab/_clipped_tab.scss | 21 + .../chrome/src/tab/_connect_to_window.scss | 26 + .../chrome/src/tab/_container_tab.scss | 105 + .../chrome/src/tab/_crashed_tab.scss | 3 + .../chrome/src/tab/_index.scss | 41 + .../chrome/src/tab/_newtab_button.scss | 14 + .../src/tab/_picture_in_picture_tab.scss | 36 + .../chrome/src/tab/_selected_tab.scss | 24 + .../chrome/src/tab/_sound_tab.scss | 16 + .../chrome/src/tab/_unload_tab.scss | 3 + .../chrome/src/tab/_unselected_tab.scss | 9 + .../clipped_tab/_always_show_tab_icon.scss | 3 + .../src/tab/clipped_tab/_letters_cleary.scss | 35 + .../tab/clipped_tab/_pinned_close_button.scss | 57 + .../_show_close_button_at_hover.scss | 80 + .../tab/newtab_button/_looks_like_tab.scss | 64 + .../newtab_button/_proton_like_button.scss | 10 + .../tab/newtab_button/_smaller_button.scss | 12 + .../selected_tab/_bottom_rounded_corner.scss | 86 + .../src/tab/selected_tab/_box_shadow.scss | 57 + .../tab/selected_tab/_color_like_toolbar.scss | 15 + .../src/tab/selected_tab/_multi_selected.scss | 37 + .../_photon_like_contextline.scss | 81 + .../chrome/src/tab/sound_tab/_hide_label.scss | 3 + .../chrome/src/tab/sound_tab/_show_label.scss | 3 + .../tab/sound_tab/_show_with_favicons.scss | 131 + .../unselected_tab/_dynamic_separator.scss | 141 + .../tab/unselected_tab/_static_separator.scss | 46 + .../chrome/src/tabbar/_as_titlebar.scss | 87 + .../chrome/src/tabbar/_index.scss | 59 +- .../chrome/src/tabbar/_layout.scss | 26 + .../chrome/src/tabbar/_on_bottom.scss | 130 + .../chrome/src/tabbar/_one_liner.scss | 104 + .../src/tabbar/layout/_navbar_padding.scss | 128 + .../src/tabbar/layout/_window_control.scss | 121 + .../tabbar/layout/_window_control_size.scss | 27 + .../chrome/src/theme/_index.scss | 35 + .../chrome/src/theme/_monospace.scss | 3 + .../urlview/_always_show_page_actions.scss | 3 +- .../src/urlview/_move_icon_to_left.scss | 2 +- .../chrome/src/utils/_one_liner.scss | 68 + .../.mozilla/firefox/default-release/user.js | 49 +- 100 files changed, 6469 insertions(+), 642 deletions(-) create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/__tests__/one_liner.test.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_back_button.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_bookmarkbar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_common.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_fill_urlbar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_forward_button.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_index.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_infobar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_navbar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_page_action.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_sidebar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_tabbar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_toolbar_overlap.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/sidebar/_overlap.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/autohide/sidebar/_static.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/centered/_bookmarkbar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/centered/_index.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/centered/_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/centered/_urlbar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_content.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_label.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_layout.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/contents/_monospace.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/hidden/_index.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/icons/_index.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_activity_stream.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_bookmark_menu.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu_common.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu_contents.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_panel.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/padding/_bookmarkbar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/padding/_infobar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/padding/_navbar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/padding/_urlbar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/sidebar/_index.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/sidebar/_overlap.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_clipped_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_connect_to_window.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_container_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_crashed_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_index.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_newtab_button.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_picture_in_picture_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_selected_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_sound_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_unload_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/_unselected_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_always_show_tab_icon.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_letters_cleary.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_pinned_close_button.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_show_close_button_at_hover.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_looks_like_tab.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_proton_like_button.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_smaller_button.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_bottom_rounded_corner.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_box_shadow.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_color_like_toolbar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_multi_selected.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_photon_like_contextline.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_hide_label.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_show_label.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_show_with_favicons.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/unselected_tab/_dynamic_separator.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tab/unselected_tab/_static_separator.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_as_titlebar.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_layout.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_on_bottom.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_one_liner.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/layout/_navbar_padding.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/layout/_window_control.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/layout/_window_control_size.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/theme/_index.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/theme/_monospace.scss create mode 100644 arch-config/.mozilla/firefox/default-release/chrome/src/utils/_one_liner.scss diff --git a/arch-config/.mozilla/firefox/default-release/chrome/CREDITS b/arch-config/.mozilla/firefox/default-release/chrome/CREDITS index a2cc6366..fe8b8b5b 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/CREDITS +++ b/arch-config/.mozilla/firefox/default-release/chrome/CREDITS @@ -74,6 +74,9 @@ W: https://www.mamen.at N: MarNicGit W: https://github.com/MarNicGit +N: Oondanomala +W: https://github.com/Oondanomala + N: ph3b3 E: phoebeleong8@gmail.com W: https://phoebe-leong.github.io/ @@ -102,6 +105,9 @@ N: Tatsuyuki Ishi E: ishitatsuyuki@gmail.com W: https://github.com/ishitatsuyuki +N: thunderstone135 +W: https://github.com/thunderstone135 + ---------- Reference Projects & Resources @@ -170,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/arch-config/.mozilla/firefox/default-release/chrome/LEPTON b/arch-config/.mozilla/firefox/default-release/chrome/LEPTON index 1ed9c7ac..a6cc0cb3 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/LEPTON +++ b/arch-config/.mozilla/firefox/default-release/chrome/LEPTON @@ -1,3 +1,3 @@ [Info] -Ver=v5.3.0 +Ver=v6.0.0 Branch=photon-style diff --git a/arch-config/.mozilla/firefox/default-release/chrome/README.org b/arch-config/.mozilla/firefox/default-release/chrome/README.org index bcc64233..197f3c10 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/README.org +++ b/arch-config/.mozilla/firefox/default-release/chrome/README.org @@ -68,6 +68,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): like Photon @@ -106,6 +110,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/arch-config/.mozilla/firefox/default-release/chrome/__tests__/one_liner.test.scss b/arch-config/.mozilla/firefox/default-release/chrome/__tests__/one_liner.test.scss new file mode 100644 index 00000000..e59f49da --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/__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/arch-config/.mozilla/firefox/default-release/chrome/css/leptonChrome.css b/arch-config/.mozilla/firefox/default-release/chrome/css/leptonChrome.css index 90a20748..06f3a6ca 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/css/leptonChrome.css +++ b/arch-config/.mozilla/firefox/default-release/chrome/css/leptonChrome.css @@ -133,6 +133,12 @@ /* Legacy: v96 */ --lwt-tabs-border-color: rgba(0, 0, 0, 0.3); } + + /*= Findbar Border Color =====================================================*/ + html|input.findbar-textbox { + border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; + /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */ + } } /*= OS - Compatibility =======================================================*/ @supports -moz-bool-pref("userChrome.compatibility.os") { @@ -349,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) { @@ -1038,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 */ @@ -1485,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, @@ -1565,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"), @@ -2765,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") { @@ -2858,6 +2866,9 @@ text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); } + #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget:hover { + text-decoration: none; + } #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon { filter: grayscale(100%) !important; } @@ -2973,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; @@ -3101,6 +3113,7 @@ } @supports -moz-bool-pref("userChrome.rounding.square_menupopup") { xul|menupopup { + --panel-border-radius: 0px !important; border-radius: 0 !important; } } @@ -3167,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 */ @@ -3240,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 */ @@ -3253,7 +3286,7 @@ } } .tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -0.5px !important; + margin-inline-end: -1px !important; } } @supports -moz-bool-pref("userChrome.tab.photon_like_padding") { @@ -3338,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 */ @@ -3371,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 */ } } @@ -3509,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 */ } @@ -3821,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; @@ -3842,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 */ @@ -3975,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), @@ -4010,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, @@ -4027,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; @@ -4524,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); @@ -4614,7 +5826,7 @@ position: absolute; /* Position */ top: 50%; - transform: translateY(calc(-50% + 1px)) !important; + transform: translateY(-50%) !important; /* Bar shape */ width: 0px; height: 100%; @@ -4632,6 +5844,7 @@ .tabbrowser-tab[visuallyselected] .tab-background::after, .tabbrowser-tab[beforeselected-visible] .tab-background::after { --lwt-background-tab-separator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); + opacity: 1; } } @supports not -moz-bool-pref("userChrome.tab.static_separator.selected_accent") { @@ -4910,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 */ @@ -4948,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 ***************************************/ @@ -4992,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 ===================================================*/ @@ -5033,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]), @@ -5050,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 */ @@ -5149,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 ========================================*/ @@ -5264,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; } @@ -5319,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 ******************************************************************/ @@ -5354,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") { @@ -5384,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 ===========================================*/ @@ -5954,7 +8112,8 @@ list-style-image: url("chrome://browser/skin/window.svg"); } - #appMenuRestoreSession { + #appMenuRestoreSession, + #appMenu-restoreSession { list-style-image: url("../icons/restore-session.svg"); } @@ -6527,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"); } @@ -6586,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"); } @@ -7389,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 =============================================================*/ @@ -7820,7 +10039,7 @@ } } } -/*= Waterfox =================================================================*/ +/** Waterfox ******************************************************************/ @supports -moz-bool-pref("userChrome.icon.panel") { #appMenu-restart-button { list-style-image: url("../icons/refresh-cw.svg") !important; @@ -7859,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/arch-config/.mozilla/firefox/default-release/chrome/css/leptonContent.css b/arch-config/.mozilla/firefox/default-release/chrome/css/leptonContent.css index be42adbe..10cf40b5 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/css/leptonContent.css +++ b/arch-config/.mozilla/firefox/default-release/chrome/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"), @@ -3396,6 +3407,9 @@ text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); } + #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTarget:hover { + text-decoration: none; + } #downloadsListBox .download-state:not([exists], [state="0"]) .downloadTypeIcon { filter: grayscale(100%) !important; } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/install.ps1 b/arch-config/.mozilla/firefox/default-release/chrome/install.ps1 index c16e4496..af21842a 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/install.ps1 +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_back_button.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_back_button.scss new file mode 100644 index 00000000..beab7818 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_bookmarkbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_bookmarkbar.scss new file mode 100644 index 00000000..af0f9e47 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_common.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_common.scss new file mode 100644 index 00000000..8347e8a9 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_fill_urlbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_fill_urlbar.scss new file mode 100644 index 00000000..6101b6be --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_forward_button.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_forward_button.scss new file mode 100644 index 00000000..50245249 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_index.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_index.scss new file mode 100644 index 00000000..3864d5e8 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_infobar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_infobar.scss new file mode 100644 index 00000000..39c9fb82 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_navbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_navbar.scss new file mode 100644 index 00000000..43a11026 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_page_action.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_page_action.scss new file mode 100644 index 00000000..7ccd65c1 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_sidebar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_sidebar.scss new file mode 100644 index 00000000..ba58cd8a --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_tab.scss new file mode 100644 index 00000000..3a000c5d --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_tabbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_tabbar.scss new file mode 100644 index 00000000..5781a34d --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_toolbar_overlap.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/_toolbar_overlap.scss new file mode 100644 index 00000000..be1ea04e --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/sidebar/_overlap.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/sidebar/_overlap.scss new file mode 100644 index 00000000..c2827019 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/sidebar/_static.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/autohide/sidebar/_static.scss new file mode 100644 index 00000000..c1756c25 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/centered/_bookmarkbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/centered/_bookmarkbar.scss new file mode 100644 index 00000000..816d2d2d --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/centered/_bookmarkbar.scss @@ -0,0 +1,4 @@ +#PlacesToolbarItems { + display: flex !important; + justify-content: safe center !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/centered/_index.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/centered/_index.scss new file mode 100644 index 00000000..9a5b244c --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/centered/_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/centered/_tab.scss new file mode 100644 index 00000000..bfc038ea --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/centered/_urlbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/centered/_urlbar.scss new file mode 100644 index 00000000..5d8cfc17 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_content.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_content.scss new file mode 100644 index 00000000..1549e6ee --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_content.scss @@ -0,0 +1,4 @@ +.tab-icon-stack { + -moz-box-flex: 1; + justify-content: end; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_label.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_label.scss new file mode 100644 index 00000000..b5b25d0c --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_layout.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_layout.scss new file mode 100644 index 00000000..a26f2207 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/centered/tab/_layout.scss @@ -0,0 +1,13 @@ +.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), +.tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { + margin-inline-end: 5px; +} + +@include Option("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; + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_theme.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_theme.scss index e30c33f2..d426e155 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_theme.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/compatibility/_theme.scss @@ -112,3 +112,8 @@ menu { --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */ --lwt-tabs-border-color: rgba(0, 0, 0, 0.3); } + +/*= Findbar Border Color =====================================================*/ +html|input.findbar-textbox { + border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */ +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_activity_stream.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_activity_stream.scss index 324e4acb..acc839e3 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_activity_stream.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_context_menu.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_context_menu.scss index 63b5e164..89f92ea8 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_context_menu.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_monospace.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/contents/_monospace.scss new file mode 100644 index 00000000..30a2c559 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_animate.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_animate.scss index 25997a70..6b969fe2 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_animate.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_download_panel.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_download_panel.scss index 1139ee9c..ed6250e0 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_download_panel.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/decoration/_download_panel.scss @@ -11,6 +11,9 @@ .downloadTarget { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 65%, transparent); + &:hover { + text-decoration: none; + } } .downloadTypeIcon { filter: grayscale(100%) !important; diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/hidden/_index.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/hidden/_index.scss new file mode 100644 index 00000000..8b38239b --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_index.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_index.scss new file mode 100644 index 00000000..90c2e29b --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_panel.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_panel.scss index 7420f7cf..134724bc 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_panel.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/_panel.scss @@ -238,7 +238,8 @@ panelMenuBookmarkThisPage[starred] { #appMenuRecentlyClosedWindows { list-style-image: url("chrome://browser/skin/window.svg"); } -#appMenuRestoreSession { +#appMenuRestoreSession, /* Legacy - v103 */ +#appMenu-restoreSession { list-style-image: url("../icons/restore-session.svg"); } #appMenuClearRecentHistory { diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_others.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_others.scss index 2f55da56..453f4052 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_others.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_tab_toolbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_tab_toolbar.scss index b82fe302..2a38cb34 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/context_menu/_tab_toolbar.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_activity_stream.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_activity_stream.scss new file mode 100644 index 00000000..fb5fcae0 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_activity_stream.scss @@ -0,0 +1,16 @@ +.context-menu-list .context-menu-item button { + padding-inline-start: 0 !important; +} + +.context-menu-list .context-menu-item button span { + padding-inline-start: 24px; /* 16p + (4px * 2) */ + + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + + /* Layout */ + background-size: 16px; + background-repeat: no-repeat; + background-image: var(--menuitem-image); + background-position: left 4px center; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_bookmark_menu.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_bookmark_menu.scss new file mode 100644 index 00000000..5b555286 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_bookmark_menu.scss @@ -0,0 +1,118 @@ +/*= Bookmark Menu - Layout ===================================================*/ +/* #goPopup(Legacy of historyMenuPoup), #historyMenuPopup, #bookmarksMenuPopup: looks like global menu + * #BMB_bookmarksPopup: looks like arrow panel + */ + +/* Empty Menu */ +menupopup menupopup[emptyplacesresult] .menu-text, +#PersonalToolbar menupopup[emptyplacesresult] .menu-text { + margin-inline-start: 0 !important; +} + +/* Bookmark Popup - As Arrow Panel */ +#BMB_bookmarksPopup, +#PersonalToolbar { + --context-menu-background-padding: var(--arrowpanel-menuitem-padding-inline); +} + +//-- Mixin --------------------------------------------------------------------- +// Items +$_bookmarkMenuitem: "menuitem:not(.menuitem-iconic, [disabled=\"true\"])"; +$_bookmarkMenu: "menu:not(.menu-iconic)"; + +// Components +$_bookmarkPopup: "menupopup:is(#BMB_bookmarksPopup)"; +$_bookmarkToolbar: "#PersonalToolbar menupopup[placespopup=\"true\"]"; + +$_bookmarkPopupMenus: selector.nest( + $_bookmarkPopup, + "#{$_bookmarkMenuitem}, #{$_bookmarkMenu}" +); +$_bookmarkToolbarMenus: selector.nest( + $_bookmarkToolbar, + "#{$_bookmarkMenuitem}, #{$_bookmarkMenu}" +); + +@mixin _layoutBookmarkMenu() { + #{$_bookmarkPopupMenus}, + #{$_bookmarkToolbarMenus} { + @content; + } +} +@mixin _layoutBookmarkPopup() { + #{$_bookmarkPopupMenus} { + @content; + } +} +@mixin _layoutBookmarkToolbar() { + #{$_bookmarkToolbarMenus} { + @content; + } +} + +//------------------------------------------------------------------------------ + +/* Windows 7, 8 */ +@include OS($win7, $win8) { + /* Global Menu */ + menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item { + padding-inline-start: 0 !important; + } + + /* Bookmark Popup - None icon menu */ + #BMB_bookmarksPopup, + #PersonalToolbar { + --arrowpanel-menuicon-padding: 9px; + } + @include _layoutBookmarkMenu() { + margin-inline: var(--arrowpanel-menuitem-padding-inline) !important; + background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; + } + @include _layoutBookmarkPopup() { + padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important; + } + @include _layoutBookmarkToolbar() { + padding-inline-start: var(--arrowpanel-menuicon-padding) !important; + } +} + +/* Windows */ +@include OS($win10) { + /* Bookmark Popup - None icon menu */ + @include _layoutBookmarkMenu() { + margin-inline: var(--arrowpanel-menuitem-padding-inline) !important; + padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important; + background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important; + } +} + +/* Linux */ +@include OS($linux) { + /* Global Menu */ + menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) .bookmark-item { + padding-inline-start: var(--context-menu-background-padding) !important; + } + + /* Bookmark Popup - Iconic menu */ + #BMB_bookmarksPopup .menu-iconic-text, + #PersonalToolbar menupopup[placespopup="true"] .bookmark-item .menu-iconic-text { + padding-inline-start: 1px !important; + } + /* Bookmark Popup - None icon menu */ + @include _layoutBookmarkMenu() { + padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important; + } +} + +@include OS($mac) { + /* Bookmark Popup - As Arrow Panel */ + #PersonalToolbar menupopup menuitem, + #PersonalToolbar menupopup menu { + padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)) !important; + } + + /* Bookmark Popup - None icon menu */ + @include _layoutBookmarkPopup() { + padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important; + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu.scss new file mode 100644 index 00000000..93aac39e --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu.scss @@ -0,0 +1,126 @@ +@import "./menu_common"; + +//-- Mixin --------------------------------------------------------------------- +// Components +$_layoutCommonMenus: ( + $_iconMenuPopupMenus, + $_libraryMenuitem, + $_libraryMenu, + $_sendTabMenuitem, + $_otherIconMenu +); +@mixin _layoutInitIconMenus() { + #{$_globalMenus}, + #{$_nestedPopupIconMenus}, + #{$_layoutCommonMenus} { + @content; + } +} +@mixin _layoutInitPaddingMenus() { + #{selector.nest($_nestedPopupPadding, "menuitem:not(.menuitem-iconic), menu:not(.menu-iconic)")}, + #{$_nestedPopupPaddingMenus}, + #{$_layoutCommonMenus} { + @content; + } +} +@mixin _layoutIconMenus() { + #{$_nestedPopupPaddingMenus}, + #{$_layoutCommonMenus} { + @content; + } +} + +//------------------------------------------------------------------------------ + +#{$_initialMenus}, +#{$_globalMenus} { + @include _initial_menus; +} + +/* Icon */ +@include _layoutInitIconMenus { + @include _layout_icon_menus; +} + +/* For native context menus */ +#{$_nestedPopupIconMenus} { + @include _layout_icon_native_menus; +} + +/* Padding */ +@include _layout_root_padding; +@include _layoutInitPaddingMenus { + @include _layout_init_padding; +} + +/* Menubar */ +@include Option("userChrome.icon.global_menubar") { + #{$_globalMenus} { + background-position: left var(--context-menu-background-padding-default) center !important; + padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important; + padding-inline-end: 3px; + + &:first-child { + background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important; + padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important; + } + > menupopup { + --menuitem-image: none; /* Prevent Image Inheritance */ + } + @include NotOption("userChrome.padding.global_menubar") { + padding-block: 2px !important; + } + } +} + +/* Padding - Windows */ +@include _layout_root_win7_8; +@include OS($win7, $win8) { + @include _layoutIconMenus { + @include _layout_init_win7_8(); + } +} +@include OS($win10) { + @include _layout_root_win10; + + @include _layoutIconMenus { + @include _layout_init_win10; + } +} + +/* Padding - Linux */ +@include OS($linux) { + @include _layout_root_linux; + + #{$_globalMenus} > .menubar-text { + @include _layout_init_linux; + } +} + +/* Padding - Mac */ +@include OS($mac) { + @include _layout_root_mac; + + /* context menu width */ + #{$_nestedPopupPaddingMenus}, + #blockedPopupDontShowMessage { + @include _layout_init_mac_width; + } + + /* text position */ + #{selector.nest($_nestedPopupPadding, "menuitem > .menu-text, menu > .menu-text")} { + @include _layout_init_mac_text; + } + + /* Checkbox menuitem, None iconic menu */ + #{selector.nest($_nestedPopupPadding, "menuitem[checked=\"true\"], menu:not(.menu-iconic)")} { + @include _layout_init_mac_others; + } + + /* Global Menu */ + @include Option("userChrome.icon.global_menu.mac") { + #{selector.nest($_iconMenuPopup, "menuitem:not(.menuitem-iconic, .bookmark-item), menu:not(.menu-iconic)")} { + list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; + } + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu_common.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu_common.scss new file mode 100644 index 00000000..5ed72463 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu_common.scss @@ -0,0 +1,140 @@ +//-- Variables ----------------------------------------------------------------- +// Items +// .menu-iconic, .menuitem-iconic: Alreay exist, not target. +// .in-menulist: Not a range because it is a select menu of web content. +// [checked="true"]: There should be a check mark instead of an icon. +$_iconNoneCommon: ".in-menulist, [checked=\"true\"]"; +$_iconMenuitem: "menuitem:not(.menuitem-iconic, .bookmark-item, #{$_iconNoneCommon})"; +$_iconMenu: "menu:not(.menu-iconic, #{$_iconNoneCommon})"; + +// Components +$_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) > menupopup >"; +$_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) > menupopup >"; +$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup)"; + +$_nestedPopupIconMenus: selector.nest( + $_nestedPopupIcon, + "#{$_iconMenuitem}, #{$_iconMenu}" +); +$_nestedPopupPaddingMenus: selector.nest( + $_nestedPopupPadding, + "#{$_iconMenuitem}, #{$_iconMenu}" +); +$_iconMenuPopupMenus: selector.nest( + $_iconMenuPopup, + "#{$_iconMenuitem}, #{$_iconMenu}" +); + +$_globalMenus: "#main-menubar > menu"; +$_libraryMenuitem: "menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > #{$_iconMenuitem}"; +$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > #{$_iconMenu}"; +$_sendTabMenuitem: "menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem"; +$_otherIconMenu: ".openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar"; + +//-- Mixin --------------------------------------------------------------------- +// Init Menu +$_initialMenus: selector.append( + "menupopup menuitem, menupopup menu", + ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])" +); +@mixin _initial_menus() { + -moz-appearance: none !important; /* Linux: menulist */ +} + +// Icon +@mixin _layout_icon_menus() { + /* Color */ + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + + /* Layout */ + background-size: 16px !important; + background-repeat: no-repeat !important; + background-image: var(--menuitem-image); +} + +@mixin _layout_icon_native_menus() { + @include NativeMenu { + list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; + } +} + +// Padding +@mixin _layout_root_padding() { + :root { + --context-menu-background-padding-default: 5px; + --context-menu-background-padding: var(--context-menu-background-padding-default); + } +} +@mixin _layout_init_padding() { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: var(--context-menu-background-padding) !important; +} + +@mixin _layout_root_win7_8() { + @include OS($win7) { + :root { + --context-menu-background-padding-default: 2px; + } + } + @include OS($win8) { + :root { + --context-menu-background-padding-default: 3px; + } + } +} +@mixin _layout_init_win7_8() { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: 0 !important; +} + +@mixin _layout_root_win10() { + :root { + --context-menu-background-padding: 1em; + --context-menu-text-padding: 24px; /* 16px + 8px */ + --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding)); + } +} +@mixin _layout_init_win10() { + padding-inline-start: var(--menu-background-padding-default) !important; + margin-left: 0 !important; +} + +@mixin _layout_root_linux() { + :root { + --context-menu-background-padding-default: 6px; + } +} +@mixin _layout_init_linux() { + padding-inline-start: 3px; +} + +@mixin _layout_root_mac() { + :root { + --context-menu-background-padding-default: 10px; + --context-menu-mac-padding: 21px; + } +} +@mixin _layout_init_mac_width() { + padding-inline-end: var(--context-menu-background-padding) !important; +} +@mixin _layout_init_mac_text() { + padding-inline-start: var(--context-menu-mac-padding) !important; +} +@mixin _layout_init_mac_others() { + padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; +} + +// Checkbox +// @include OS($win) { +// /* Checkbox */ +// :root { +// --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px); +// } +// :not(menu, #ContentSelectDropdown, #context-navigation) +// > menupopup +// > menuitem[type="checkbox"]:not([checked="true"]) +// > .menu-iconic-left { +// padding-inline-start: var(--context-menu-text-padding); +// } +// } diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu_contents.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu_contents.scss new file mode 100644 index 00000000..e10008d1 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_menu_contents.scss @@ -0,0 +1,90 @@ +@import "./menu_common"; + +//-- Mixin --------------------------------------------------------------------- +$_placesPopupSet: "menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)"; +$_placesPopupSetMenus: selector.nest( + $_placesPopupSet, + "#{$_iconMenuitem}, #{$_iconMenu}" +); + +@mixin _library_contextMenu { + #{$_placesPopupSetMenus}, + #{$_libraryMenuitem}, + #{$_libraryMenu} { + @content; + } +} + +//------------------------------------------------------------------------------ + +#{$_initialMenus} { + @include _initial_menus; +} + +@include _library_contextMenu { + @include _layout_icon_menus; +} + +/* For native context menus */ +#{$_nestedPopupIconMenus} { + @include _layout_icon_native_menus; +} + +/* Padding */ +@include _layout_root_padding; +@include _library_contextMenu { + @include _layout_init_padding; +} + +/* Padding - Windows */ +@include _layout_root_win7_8; +@include OS($win7, $win8) { + @include _library_contextMenu { + @include _layout_init_win7_8(); + } +} +@include OS($win10) { + @include _layout_root_win10; + + @include _library_contextMenu { + @include _layout_init_win10; + } +} + +/* Padding - Linux */ +@include OS($linux) { + @include _layout_root_linux; + + /* Contextmenu Checkbox Unset */ + #{$_placesPopupSet} menuitem[type="checkbox"] { + margin-inline: 0 !important; + > .menu-iconic-left > .menu-iconic-icon { + margin-inline-end: 0 !important; + } + &:not([checked="true"]) > .menu-iconic-left > .menu-iconic-icon { + border: none !important; + background-color: unset !important; + } + } +} + +/* Padding - Mac */ +@include OS($mac) { + @include _layout_root_mac; + + /* context menu width */ + #{$_placesPopupSetMenus} { + @include _layout_init_mac_width; + + > .menu-text { + /* text position */ + @include _layout_init_mac_text; + } + } + + /* Checkbox menuitem, None iconic menu */ + #{$_placesPopupSet} menuitem[checked="true"], + #{$_placesPopupSet} menu:not(.menu-iconic) { + @include _layout_init_mac_others; + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_panel.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_panel.scss new file mode 100644 index 00000000..546fd639 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/icons/layout/_panel.scss @@ -0,0 +1,101 @@ +/*= Padding ==================================================================*/ +:root { + --arrowpanel-menuicon-padding: 8px; + --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + var(var(--arrowpanel-menuitem-padding-inline))) !important; + --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important; + --arrowpanel-menuimageblank-padding-block: calc(var(--arrowpanel-menuitem-padding-block) - 2px) !important; +} +.subviewbutton > .toolbarbutton-icon { + width: 16px; +} + +@include Option("userChrome.icon.panel_photon", "userChrome.icon.panel_sparse") { + :root { + /* Global */ + --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2); + + /* General Panel */ + --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important; + --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important; + + /* Blank Menu Left Padding */ + --arrowpanel-menuimageblank-padding-horizontal: calc( + var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding-inline) + ); + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding-block) + 1px); + } +} + +#downloadsHistory .button-text, +.subviewbutton > .toolbarbutton-text { + padding-inline-start: var(--arrowpanel-menuicon-padding) !important; +} +.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { + padding-inline-start: 0 !important; +} +#panelMenu_bookmarksMenu .subviewbutton[disabled="true"] .toolbarbutton-text, +#appMenu_historyMenu .subviewbutton[disabled="true"] .toolbarbutton-text { + padding-inline-start: var(--arrowpanel-menublank-padding) !important; +} +#appMenu-proton-update-banner .toolbarbutton-text { + margin-inline-start: 0 !important; +} + +#appMenu-multiView .subviewbutton::before, +#appMenu-proton-update-banner::before { + display: -moz-inline-box; + margin-inline-end: var(--arrowpanel-menuicon-padding); + width: 16px; + height: 16px; +} +#appMenu-proton-update-banner { + margin-bottom: 2px !important; +} +#appMenu-proton-update-banner::before { + margin-inline-start: var(--arrowpanel-menuitem-padding-inline) !important; +} +#appMenu-fxa-status2, +#appMenu-zoom-controls2, /* Legacy v104 */ +#appMenu-zoom-controls { + align-items: center; + padding-top: var(--arrowpanel-menuimageblank-padding-block) !important; + padding-bottom: var(--arrowpanel-menuimageblank-padding-block) !important; +} +#appMenu-zoom-controls2::before, /* Legacy v104 */ +#appMenu-zoom-controls::before { + margin-inline-end: 0 !important; +} +#appMenu-zoomReduce-button2, +#appMenu-zoomReset-button2, +#appMenu-zoomEnlarge-button2, +#appMenu-fullscreen-button2 { + --arrowpanel-menuitem-padding-block: 0px; +} + +.subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text { + margin-left: 16px !important; +} + +/* Icons Color */ +#appMenu-multiView .subviewbutton::before, +#appMenu-proton-update-banner::before, +#downloadsHistory .button-icon, +.subviewbutton > image { + fill: currentColor !important; + fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important; + -moz-context-properties: fill !important; +} +#appMenu-zoomReduce-button2 > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon { + stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace)) !important; + -moz-context-properties: fill, stroke !important; +} +#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon, +#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover) > .toolbarbutton-icon { + stroke: var(--button-hover-bgcolor) !important; +} + +.subviewbutton[disabled="true"] > image { + /* Ghost icons when disabled */ + opacity: 0.4; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/leptonChrome.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/leptonChrome.scss index 47441534..762566e3 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/leptonChrome.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/leptonContent.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/leptonContent.scss index 1fcf8e23..01e47c29 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/leptonContent.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_bookmarkbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_bookmarkbar.scss new file mode 100644 index 00000000..aee9f5e8 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_bookmarkbar.scss @@ -0,0 +1,3 @@ +:root[uidensity="compact"] #PersonalToolbar toolbarbutton { + margin-top: 0px; /* Original: 2px */ +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_index.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_index.scss index b4872dc9..6acdb098 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_index.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_infobar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_infobar.scss new file mode 100644 index 00000000..9697bc68 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_infobar.scss @@ -0,0 +1,54 @@ +:root:not([uidensity]) #tab-notification-deck { + --infobar-message-vertical-margin: 3px; + + --infobar-vertical-margin: 7px; + --infobar-button-vertical-margin: 3px; +} +: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) !important; /* Original: 8px */ +} +.notification-message { + padding-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ +} +.notification-button-container > .notification-button { + margin-block: var(--infobar-button-vertical-margin) !important; /* Original: 4px */ +} +.notification-close { + margin: var(--infobar-button-vertical-margin) 8px !important; /* Original: 4px 8px */ +} + +/* Hard coded for compatibility - Disappearing phenomenon */ +.container.infobar::before { + content: ""; + display: block; + width: 2px; + position: absolute; + background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); + top: 0; + inset-inline-start: 0; + height: 100%; + border-start-start-radius: 4px; + border-end-start-radius: 4px; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_navbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_navbar.scss new file mode 100644 index 00000000..fb95e5ab --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_navbar.scss @@ -0,0 +1,4 @@ +#nav-bar:not([customizing]) toolbarspring { + min-width: 1px !important; + max-width: 100px !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_tabbar_height.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_tabbar_height.scss index 71fc4bef..02456f7c 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_tabbar_height.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_tabbar_width.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_tabbar_width.scss index 52b2b7ec..12e0ec8a 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_tabbar_width.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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 */ @@ -77,7 +82,7 @@ } } .tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -0.5px !important; + margin-inline-end: -1px !important; } } @include Option("userChrome.tab.photon_like_padding") { diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_urlbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_urlbar.scss new file mode 100644 index 00000000..b5cd2bc3 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/padding/_urlbar.scss @@ -0,0 +1,24 @@ +:root:not([uidensity="touch"]) #urlbar-container, +:root:not([uidensity="touch"]) #search-container { + padding-block: 3px !important; /* Original: 4px */ + margin-inline: 5px !important; /* Original: 5px */ +} +:root:not([uidensity="compact"]) #urlbar-container, +:root:not([uidensity="compact"]) #search-container { + padding-block: 2px !important; +} + +/* spread menu */ +:root:not([uidensity]) .urlbarView-row { + padding-block: 1px !important; /* Original: 2px */ +} +:root[uidensity="compact"] .urlbarView-row { + padding-block: 0px !important; +} + +:root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { + padding-block: 8px !important; /* Original: 10px */ +} +:root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) { + padding-block: 2px !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/rounding/_square.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/rounding/_square.scss index 5ca97b2c..10d9ab70 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/rounding/_square.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/sidebar/_index.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/sidebar/_index.scss new file mode 100644 index 00000000..adf19ab6 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/sidebar/_index.scss @@ -0,0 +1 @@ +@import "overlap"; diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/sidebar/_overlap.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/sidebar/_overlap.scss new file mode 100644 index 00000000..f877334e --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_clipped_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_clipped_tab.scss new file mode 100644 index 00000000..b08982fe --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_clipped_tab.scss @@ -0,0 +1,21 @@ +/** Clipped tabs - Letters cleary *********************************************/ +@include Option("userChrome.tab.letters_cleary") { + @import "clipped_tab/letters_cleary"; +} + +/** Clipped tabs - Show close button at hover *********************************/ +@include Option("userChrome.tab.close_button_at_hover") { + @import "clipped_tab/show_close_button_at_hover"; +} + +/** Clipped tabs - Show close button at pinned tab ****************************/ +@include Option("userChrome.tab.close_button_at_pinned") { + @include NotOption("userChrome.tabbar.as_titlebar") { + @import "clipped_tab/pinned_close_button"; + } +} + +/** Clipped tabs - Always show tab icon ***************************************/ +@include Option("userChrome.tab.always_show_tab_icon") { + @import "clipped_tab/always_show_tab_icon"; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_connect_to_window.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_connect_to_window.scss new file mode 100644 index 00000000..e163495c --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_connect_to_window.scss @@ -0,0 +1,26 @@ +.tab-background { + border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important; + margin-bottom: 0px !important; +} + +.tab-content { + margin-top: var(--tab-block-margin); +} + +.tab-stack { + margin-top: 0px !important; + margin-bottom: 0px !important; +} + +/* Remove line at Toolbar's top */ +#tabbrowser-tabs { + z-index: 1 !important; +} +#TabsToolbar { + overflow: hidden; /* Prevent toolbar area over */ +} + +/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ +#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + z-index: 0 !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_container_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_container_tab.scss new file mode 100644 index 00000000..b3a966dd --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_container_tab.scss @@ -0,0 +1,105 @@ +@include NotOption("userChrome.tab.photon_like_contextline") { + .tab-context-line { + display: none; + } +} + +.tabbrowser-tab { + --container-position-y: 11px; +} +:root[uidensity="compact"] .tabbrowser-tab { + --container-position-y: 10px; +} +: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 */ +@include Animate { + .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; +} +@include Option("userChrome.tab.close_button_at_pinned") { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + opacity: 0; + } + // Don't hide at userChrome.tab.close_button_at_pinned.background +} + +/* 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-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"]), +.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; +} +: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; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_crashed_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_crashed_tab.scss new file mode 100644 index 00000000..5640f5e4 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_crashed_tab.scss @@ -0,0 +1,3 @@ +.tab-icon-image[crashed] { + display: none !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_index.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_index.scss new file mode 100644 index 00000000..ec088a5d --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_newtab_button.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_newtab_button.scss new file mode 100644 index 00000000..b6970ea9 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_newtab_button.scss @@ -0,0 +1,14 @@ +/*= New tab button - Looks like tab ==========================================*/ +@include Option("userChrome.tab.newtab_button_like_tab") { + @import "newtab_button/looks_like_tab"; +} + +/*= New tab button - Smaller button ==========================================*/ +@include Option("userChrome.tab.newtab_button_smaller") { + @import "newtab_button/smaller_button"; +} + +/*= New tab button - Proton like button ======================================*/ +@include Option("userChrome.tab.newtab_button_proton") { + @import "newtab_button/proton_like_button"; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_picture_in_picture_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_picture_in_picture_tab.scss new file mode 100644 index 00000000..9ae0581c --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_picture_in_picture_tab.scss @@ -0,0 +1,36 @@ +#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after, +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[pictureinpicture]:not([pinned], :hover) .tab-content::after { + content: ""; +} +.tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after { + /* Shape */ + display: -moz-inline-box !important; + width: 14px; + height: 14px; + background-size: 14px; + -moz-box-ordinal-group: 1 !important; + + /* Color */ + fill: currentColor; + opacity: 0.8; + -moz-context-properties: fill; + + /* Icon */ + background-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); +} +.tabbrowser-tab[pictureinpicture]:not([pinned])[selected] .tab-content::after { + opacity: 0.95; +} + +/* Close Button's position */ +.tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { + -moz-box-ordinal-group: 2 !important; +} +#tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button { + margin-left: 7px !important; +} +#tabbrowser-tabs:not([closebuttons="activetab"]) + .tabbrowser-tab[pictureinpicture]:not([pinned]):hover + .tab-close-button { + margin-left: 2px !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_selected_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_selected_tab.scss new file mode 100644 index 00000000..8ef7dd80 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_selected_tab.scss @@ -0,0 +1,24 @@ +/*= Selected Tab - Color like toolbar ========================================*/ +@include Option("userChrome.tab.color_like_toolbar") { + @import "selected_tab/color_like_toolbar"; +} + +/*= Multi Selected Color - More Contrast =====================================*/ +@include Option("userChrome.tab.multi_selected") { + @import "selected_tab/multi_selected"; +} + +/*= Selected Tab - Box Shadow ================================================*/ +@include Option("userChrome.tab.box_shadow") { + @import "selected_tab/box_shadow"; +} + +/*= Selected Tab - Bottom Rounded Corner =====================================*/ +@include Option("userChrome.tab.bottom_rounded_corner") { + @import "selected_tab/bottom_rounded_corner"; +} + +/*= Selected Tab - Photon like contextline ===================================*/ +@include Option("userChrome.tab.photon_like_contextline") { + @import "selected_tab/photon_like_contextline"; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_sound_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_sound_tab.scss new file mode 100644 index 00000000..6adad7b9 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_sound_tab.scss @@ -0,0 +1,16 @@ +/*= Sound Tab - Hide Label ===================================================*/ +@include Option("userChrome.tab.sound_hide_label") { + @include NotOption("userChrome.tab.sound_show_label") { + @import "sound_tab/hide_label"; + } +} + +/*= Sound Tab - Show Label ===================================================*/ +@include Option("userChrome.tab.sound_show_label") { + @import "sound_tab/show_label"; +} + +/*= Sound Tab - Show with Favicons ===========================================*/ +@include Option("userChrome.tab.sound_with_favicons") { + @import "sound_tab/show_with_favicons"; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_unload_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_unload_tab.scss new file mode 100644 index 00000000..8b918f20 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_unload_tab.scss @@ -0,0 +1,3 @@ +#tabbrowser-tabs .tabbrowser-tab[pending] .tab-content { + opacity: 0.7; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_unselected_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_unselected_tab.scss new file mode 100644 index 00000000..df326bbc --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/_unselected_tab.scss @@ -0,0 +1,9 @@ +/*= Unselected Tab - Dynamic Separator =======================================*/ +@include Option("userChrome.tab.dynamic_separtor") { + @import "unselected_tab/dynamic_separator"; +} + +/*= Unselected Tab - Static Separator ========================================*/ +@include Option("userChrome.tab.static_separator") { + @import "unselected_tab/static_separator"; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_always_show_tab_icon.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_always_show_tab_icon.scss new file mode 100644 index 00000000..3fb4c291 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_always_show_tab_icon.scss @@ -0,0 +1,3 @@ +.tab-icon-image:not([src], [pinned], [crashed], [busy]) { + display: -moz-inline-box !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_letters_cleary.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_letters_cleary.scss new file mode 100644 index 00000000..8b9f8997 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_letters_cleary.scss @@ -0,0 +1,35 @@ +#tabbrowser-tabs[closebuttons="activetab"] { + --inline-tab-padding: 7px !important; /* Original: 8px */ +} +#tabbrowser-tabs[overflow="true"] { + --inline-tab-padding: 6px !important; /* Original: 8px */ +} + +.tab-content[pinned] { + --inline-tab-padding: 10px; /* Prevent overflow pinned tab's divide line not aligned */ + padding-inline: var(--inline-tab-padding) !important; +} +:root[uidensity="compact"] .tab-content[pinned] { + --inline-tab-padding: 8px; +} + +// mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size)); +.tabbrowser-tab { + .tab-label-container { + --tab-label-mask-size: 1.8em; /* Original: 2em */ + } +} + +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab { + .tab-label-container { + --tab-label-mask-size: 30%; + } + &:is([visuallyselected="true"], [multiselected="true"]) .tab-label-container { + --tab-label-mask-size: 25%; + } +} + +.tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover .tab-label-container, +#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true],[labelendaligned]):hover .tab-label-container { + --tab-label-mask-size: 0.9em; /* Original: 1em */ +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_pinned_close_button.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_pinned_close_button.scss new file mode 100644 index 00000000..7f498522 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_pinned_close_button.scss @@ -0,0 +1,57 @@ +#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; +} + +//-- Mixin --------------------------------------------------------------------- +@mixin pinnedCloseButtonShow($prefix: "") { + #{$prefix}: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; + } +} +@mixin pinnedIconStackLayout($prefix: "") { + #{$prefix}:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } +} +@mixin pinnedIconHide($prefix: "") { + #{$prefix} .tab-icon-image { + display: none !important; + } +} + +//------------------------------------------------------------------------------ + +.tabbrowser-tab[pinned] { + @include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover"); + @include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover"); + @include pinnedIconHide("&[visuallyselected]:not([style*='transform: translateX']):hover"); + + @include Option("userChrome.tab.close_button_at_pinned.always") { + @include pinnedCloseButtonShow("&[visuallyselected]"); + @include pinnedIconStackLayout("&[visuallyselected]"); + @include pinnedIconHide("&[visuallyselected]"); + } + @include Option("userChrome.tab.close_button_at_pinned.background") { + @include pinnedCloseButtonShow("&:not([style*='transform: translateX']):hover"); + @include pinnedIconStackLayout("&:not([style*='transform: translateX']):hover"); + @include pinnedIconHide("&:not([style*='transform: translateX']):hover"); + } +} +#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; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_show_close_button_at_hover.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_show_close_button_at_hover.scss new file mode 100644 index 00000000..87515280 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/clipped_tab/_show_close_button_at_hover.scss @@ -0,0 +1,80 @@ +#tabbrowser-tabs[closebuttons="activetab"] + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab:not([pinned]) + > .tab-stack + > .tab-content + > .tab-close-button:not([selected="true"]) { + display: -moz-inline-box !important; +} + +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + visibility: collapse !important; + opacity: 0; +} +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { + visibility: visible !important; + opacity: 1; +} +@include Option("userChrome.tab.close_button_at_hover.always") { + .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + .tabbrowser-tab:hover .tab-close-button { + visibility: visible !important; + opacity: 1; + } +} + +/* Animate */ +@include Animate { + /* Fade out */ + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + transition: opacity 0.1s var(--animation-easing-function) !important; + } + + /* Fade in */ + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { + transition: opacity 0.25s var(--animation-easing-function) !important; + } + + @include Option("userChrome.tab.close_button_at_hover.always") { + /* Fade out */ + .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + transition: opacity 0.1s var(--animation-easing-function) !important; + } + + /* Fade in */ + .tabbrowser-tab:hover .tab-close-button { + transition: opacity 0.25s var(--animation-easing-function) !important; + } + } +} + +/* Closed Button's icon thicker */ +.tabbrowser-tab .tab-content > .close-icon { + list-style-image: url("../icons/dismiss-filled.svg") !important; +} + +/* Closed Button's icon larger */ +.tab-close-button { + padding: 6px !important; /* Original: 7px */ +} +.tabbrowser-tab:not(:hover, [pinned]) > .tab-stack > .tab-content > .tab-close-button { + padding-inline-start: 1px !important; /* Original: 0px */ + width: 19px !important; /* Original: 17px */ +} + +/* Closed Button's padding reduce */ +#tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button { + margin-inline-end: calc( + (var(--inline-tab-padding) / -2) + 2px + ) !important; /* Original: calc(var(--inline-tab-padding) / -2)*/ + padding: 4px !important; /* Original: 7px */ + width: 20px !important; /* Original: 24px */ + height: 20px !important; /* Original: 24px */ +} +#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button { + padding-inline-start: 3px !important; /* Original: 0px */ + width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_looks_like_tab.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_looks_like_tab.scss new file mode 100644 index 00000000..bdda2a6d --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_looks_like_tab.scss @@ -0,0 +1,64 @@ +#tabs-newtab-button { + /* Original: + margin: 0 0 var(--tabs-navbar-shadow-size) !important + => Can't ovrride style. Therefore, we should approach it by bypass. + */ + --tabs-navbar-shadow-size: -1px; /* Original: 1px */ + --tabs-navbar-original-shadow-size: 1px; + --tab-corner-rounding: 4px; /* Hardcorded */ + + /* Size */ + -moz-box-align: stretch !important; + padding-top: var(--tab-block-margin) !important; + + /* Corner Rounding Image */ + --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); + background-image: url("../icons/tab-bottom-corner-left.svg"), url("../icons/tab-bottom-corner-right.svg"); + background-repeat: no-repeat; + background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), + right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); + background-size: var(--tab-corner-rounding); + + /* Corner Rounding Color */ + fill: transparent !important; + -moz-context-properties: fill !important; +} + +/* Corner Rounding Color */ +#tabs-newtab-button:hover { + fill: var(--toolbarbutton-hover-background) !important; +} +#tabs-newtab-button:hover:active { + fill: var(--toolbarbutton-active-background) !important; +} +@media (-moz-windows-accent-color-in-titlebar) { + @include AccentColor { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + fill: color-mix( + in srgb, + $accentTextColor 10%, + transparent + ) !important; /* Hardcorded for compatibility */ + } + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { + fill: color-mix( + in srgb, + $accentTextColor 15%, + transparent + ) !important; /* Hardcorded for compatibility */ + } + } +} + +/* '+'Icon */ +#tabs-newtab-button .toolbarbutton-icon { + border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ + + padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) + calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important; + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); + fill-opacity: var(--toolbarbutton-icon-fill-opacity); +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_proton_like_button.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_proton_like_button.scss new file mode 100644 index 00000000..3fd1017e --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_proton_like_button.scss @@ -0,0 +1,10 @@ +:root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon { + --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px); +} + +:root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 2px; +} +:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 1px; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_smaller_button.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_smaller_button.scss new file mode 100644 index 00000000..e9923730 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/newtab_button/_smaller_button.scss @@ -0,0 +1,12 @@ +#tabs-newtab-button > .toolbarbutton-icon { + margin-left: 1px; + + /* Origianl: calc((var(--tab-min-height) - 16px) / 2) = 10px */ + --toolbarbutton-inner-padding: 6px; +} +:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + --toolbarbutton-inner-padding: 4px; /* Photon: 6px */ +} +:root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { + --toolbarbutton-inner-padding: 9px; /* Photon: 9px */ +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_bottom_rounded_corner.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_bottom_rounded_corner.scss new file mode 100644 index 00000000..ff0bec3f --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -0,0 +1,86 @@ +#tabbrowser-tabs { + --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ + --tab-corner-padding: 0px; + --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); +} + +:root:not([customizing="true"]) tab[visuallyselected] > stack::before, +:root:not([customizing="true"]) tab[visuallyselected] > stack::after { + content: "" !important; + + /* Box */ + display: block !important; + position: absolute !important; + z-index: 1 !important; + + /* Shape */ + width: var(--tab-corner-rounding) !important; + height: 100% !important; + + /* Color */ + fill: var(--toolbar-bgcolor) !important; + stroke: var( + --tab-line-color, + var(--tabs-border-color, rgba(128, 128, 142, 0.9)) + ) !important; + -moz-context-properties: fill, stroke !important; + + /* Image */ + background-size: var(--tab-corner-rounding); + background-repeat: no-repeat; + background-position-y: bottom; +} +:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + tab[visuallyselected] + > stack:-moz-lwtheme::before, +:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + tab[visuallyselected] + > stack:-moz-lwtheme::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color) !important; +} + +tab[visuallyselected] > stack::before { + left: var(--tab-corner-position) !important; + background-image: url("../icons/tab-bottom-corner-left.svg"); +} +tab[visuallyselected] > stack::after { + left: auto; + right: var(--tab-corner-position); + background-image: url("../icons/tab-bottom-corner-right.svg"); +} + +@include OS($linux) { + /* Fill color for GTK */ + :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before, + :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after { + /* As GTK Toolbar's background-color + backround-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + stroke: transparent !important; + } + :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, + :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { + stroke: transparent !important; + } +} + +@include NotOption("userChrome.tab.color_like_toolbar") { + :root:not([customizing="true"]) tab[visuallyselected] > stack::before, + :root:not([customizing="true"]) tab[visuallyselected] > stack::after { + /* Based on tab background + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); + + defaults + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + */ + fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_box_shadow.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_box_shadow.scss new file mode 100644 index 00000000..00d28d21 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_box_shadow.scss @@ -0,0 +1,57 @@ +#TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[visuallyselected="true"]:not(:focus) + > .tab-stack + > .tab-background:-moz-lwtheme { + /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) + Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ + box-shadow: 0 0 1px var(--toolbar-color) !important; +} +#TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[multiselected]:not([visuallyselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; +} + +/* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ +#TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))), + 0 0 4px rgba(128, 128, 142, 0.5) !important; +} + +#TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important; +} + +/* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border + around the tab to help themes that are dependent on tab_line to show the selected tab. */ +:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]) + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + box-shadow: 0 0 0 1px + var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))), + 0 0 4px rgba(128, 128, 142, 0.5) !important; +} + +:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + box-shadow: 0 0 0 1px + var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_color_like_toolbar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_color_like_toolbar.scss new file mode 100644 index 00000000..24950254 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_color_like_toolbar.scss @@ -0,0 +1,15 @@ +:root:not(:-moz-lwtheme) { + /* Fix for windows's system default theme. Using --toolbar-bgcolor, --toolbar-bgimage fallback */ + --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ + --tab-selected-bgimage: unset !important; /* Above FF v101 */ +} +#tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"]:-moz-lwtheme { + /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) + */ + background-image: linear-gradient(transparent, transparent), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_multi_selected.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_multi_selected.scss new file mode 100644 index 00000000..12c93c4d --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_multi_selected.scss @@ -0,0 +1,37 @@ + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[multiselected]:not([selected]):-moz-lwtheme { + background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; +} + +.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { + background: color-mix(in srgb, currentColor 65%, transparent); + opacity: 0.3; +} +#TabsToolbar[brighttext] + .tab-background[multiselected="true"]:not([selected="true"]) + > .tab-loading-burst:not([bursting]) { + opacity: 0.15; +} + + +@include Option("userChrome.tab.connect_to_window") { + .tab-background[multiselected=true] { + outline: none !important; + } +} +@include NotOption("userChrome.tab.connect_to_window") { + /* Backport from FF 99 */ + .tab-background[multiselected=true] { + outline: 1px solid color-mix(in srgb, var(--focus-outline-color, currentColor) 40%, transparent); + outline-offset: -1px; + } + + .tab-background[multiselected=true][selected=true] { + outline-width: 2px; + outline-offset: -2px; + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_photon_like_contextline.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_photon_like_contextline.scss new file mode 100644 index 00000000..68639969 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/selected_tab/_photon_like_contextline.scss @@ -0,0 +1,81 @@ +:root[lwtheme-mozlightdark] #tabbrowser-tabs, /* Legacy: v96 */ +:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], +:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + --tab-line-color: rgb(10, 132, 255) !important; +} +@media (-moz-gtk-csd-available) { + :root:not(:-moz-lwtheme) #tabbrowser-tabs { + --tab-line-color: Highlight !important; /* -moz-accent-color */ + } +} + +.tab-context-line { + display: -moz-inline-box !important; + height: 2px !important; + border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; +} + +.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { + /* Photon like color + Default: var(--tab-line-color, rgb(10, 132, 255)) + Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) + + FF v96+ replace by var(--lwt-tab-line-color) */ + background-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))) !important; +} + +.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { + background-color: rgba(0, 0, 0, 0.2) !important; + opacity: 1 !important; + transform: none !important; +} +#TabsToolbar[brighttext] + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) + > .tab-stack + > .tab-background + > .tab-context-line { + background-color: rgba(255, 255, 255, 0.2) !important; +} + +/* Prevent identitiy color flashing */ +.tabbrowser-tab[usercontextid] .tab-context-line { + --identity-icon-color: none; +} +:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, +:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color) !important; +} + +/* Animation */ +.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line { + opacity: 0 !important; + transform: scaleX(0) !important; +} +@media (prefers-reduced-motion: no-preference) { + .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line { + transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */ + } +} + +/* Remove side's background color border */ +#TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + --tabs-border-color: rgba(0, 0, 0, 0.3) !important; + box-shadow: 0 0 1px var(--tabs-border-color) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) */ +} +#TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ +} + +/* Container Tab */ +.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { + margin: unset !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_hide_label.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_hide_label.scss new file mode 100644 index 00000000..528c84fd --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_hide_label.scss @@ -0,0 +1,3 @@ +.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { + display: none !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_show_label.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_show_label.scss new file mode 100644 index 00000000..e2880207 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_show_label.scss @@ -0,0 +1,3 @@ +.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ + display: -moz-box !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_show_with_favicons.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_show_with_favicons.scss new file mode 100644 index 00000000..8427e965 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/sound_tab/_show_with_favicons.scss @@ -0,0 +1,131 @@ +//-- 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; +} + +/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ +.tab-icon-overlay:not([crashed]), +.tab-icon-overlay[pinned][crashed][selected] { + /* Position */ + top: 0 !important; + inset-inline-end: -9px !important; + z-index: 1 !important; + transform: translateX(-0.5px) translateY(-6px); + + /* Shape */ + padding: 1.5px !important; + border-radius: 10px !important; + width: 17px !important; + height: 17px !important; +} +.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + /* Color */ + color: currentColor !important; + stroke: transparent !important; + background: transparent !important; + fill-opacity: 0.8 !important; + opacity: 1 !important; +} + +/* Label */ +@include _hidden_tabIcon_soundTabLabel { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { + transform: translateX(4px); + } +} + +/* Animate */ +@include Animate { + .tab-icon-overlay:not([crashed]), + .tab-icon-overlay[pinned][crashed][selected] { + transition: 0.1s var(--animation-easing-function); + } + + .tab-label-container > .tab-label { + transition: transform 0.25s var(--animation-easing-function); + } +} + +/* None exist favicon - Size bigger */ +@include NotOption("userChrome.tab.always_show_tab_icon") { + .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); + } + } + } +} + +/* Busy - Show */ +.tab-throbber[busy], +.tab-icon-pending[busy] { + opacity: 1 !important; +} + +/* Busy - Overlay Position */ +.tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { + transform: translateX(-0.5px) translateY(-6px); +} +.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed])[busy] { + inset-inline-end: -9px !important; + margin-inline-end: 9.5px !important; + padding: 1.5px !important; +} + +/* Hover */ +.tab-icon-overlay:not([crashed])[soundplaying]:hover, +.tab-icon-overlay:not([crashed])[muted]:hover, +.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { + color: var(--toolbar-bgcolor, white) !important; + stroke: var(--lwt-tab-text, var(--toolbar-color)) !important; + background-color: var(--lwt-tab-text, var(--toolbar-color)) !important; + fill-opacity: 0.95 !important; +} + +#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[soundplaying]:hover, +#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[muted]:hover, +#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { + color: var(--toolbar-bgcolor, black) !important; +} + +.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):hover { + padding: 0 !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/unselected_tab/_dynamic_separator.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/unselected_tab/_dynamic_separator.scss new file mode 100644 index 00000000..e9975670 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/unselected_tab/_dynamic_separator.scss @@ -0,0 +1,141 @@ +//-- Mixin --------------------------------------------------------------------- +@mixin _dynamicSeparatorShape() { + /* Box Model */ + content: ""; + display: block; + position: absolute; + + /* Position */ + top: 50%; + + /* Bar shape */ + width: 1px; + height: 20px; + + /* Bar Color */ + opacity: 0; + background-color: var(--toolbarseparator-color); + + @include Option("userChrome.compatibility.dynamic_separator") { + background-color: var(--tabs-border-color); + } +} + +//------------------------------------------------------------------------------ + +@include Option("userChrome.tab.newtab_button_like_tab") { + #tabbrowser-arrowscrollbox { + position: absolute; + } + + .tab-background::before, + #tabs-newtab-button::before { + @include _dynamicSeparatorShape; + + /* More position */ + transform: translateX(-2.5px) translateY(calc(-50% + 1px)); + } +} + +@include NotOption("userChrome.tab.newtab_button_like_tab") { + .tab-background::before, + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { + @include _dynamicSeparatorShape; + } + + .tab-background::before { + transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important; + } + .tabbrowser-tab[last-visible-tab] .tab-background::after { + right: 0; + transform: translateX(1.5px) translateY(calc(-50% + 1px)) !important; + } +} + +.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); + } +} +@include NotOption("userChrome.tab.newtab_button_like_tab") { + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before, + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { + opacity: var(--tab-separator-opacity); + } +} + +#navigator-toolbox:not([movingtab]) + .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) + .tab-background::before, +#navigator-toolbox:not([movingtab]) + #tabbrowser-arrowscrollbox[overflowing] + tab.tabbrowser-tab[first-visible-unpinned-tab] + .tab-background::before { + opacity: 0 !important; +} +@include Option("userChrome.tab.newtab_button_like_tab") { + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + + .tabbrowser-tab + .tab-background::before, + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + ~ .tabbrowser-tab[afterhovered] + .tab-background::before, + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) + ~ #tabs-newtab-button::before, /* Legacy - v103 */ + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) + ~ #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button::before { + opacity: 0 !important; + } +} +@include NotOption("userChrome.tab.newtab_button_like_tab") { + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + + .tabbrowser-tab:not([visuallyselected]) + .tab-background::before { + opacity: 0 !important; + } +} + +/* Animate */ +@include Animate { + .tab-background::before { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + @include Option("userChrome.tab.newtab_button_like_tab") { + #tabs-newtab-button::before { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + } + @include NotOption("userChrome.tab.newtab_button_like_tab") { + #tabbrowser-arrowscrollbox:not([overflowing]) + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] + .tab-background::after { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + } +} + +/* Latest Tab & New tab margin */ +#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { + margin-inline-end: 1px !important; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tab/unselected_tab/_static_separator.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/unselected_tab/_static_separator.scss new file mode 100644 index 00000000..2e7e6256 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/tab/unselected_tab/_static_separator.scss @@ -0,0 +1,46 @@ +.tabbrowser-tab[first-visible-tab="true"] .tab-background::before, +.tab-background::after { + content: ""; +} + +.tab-background::before, +.tab-background::after { + /* Box Model */ + display: block; + position: absolute; + + /* Position */ + top: 50%; + transform: translateY(-50%) !important; + + /* Bar shape */ + width: 0px; + height: 100%; + + /* Bar Color */ + opacity: 0.3; + border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important; +} +.tab-background::after { + right: 0; +} + +.tabbrowser-tab[visuallyselected] .tab-background::before, +.tabbrowser-tab[visuallyselected] .tab-background::after, +.tabbrowser-tab[beforeselected-visible] .tab-background::after { + @include Option("userChrome.tab.static_separator.selected_accent") { + --lwt-background-tab-separator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); + opacity: 1; + } + @include NotOption("userChrome.tab.static_separator.selected_accent") { + opacity: 0; + } +} + +/* Animate */ +@include Animate { + .tab-background::before, + .tab-background::after { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_as_titlebar.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_as_titlebar.scss new file mode 100644 index 00000000..2bdacab2 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_index.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_index.scss index 4b180550..0f5909d2 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_index.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_layout.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_layout.scss new file mode 100644 index 00000000..b6fed2cd --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_on_bottom.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_on_bottom.scss new file mode 100644 index 00000000..60117486 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_one_liner.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/_one_liner.scss new file mode 100644 index 00000000..2824363c --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/layout/_navbar_padding.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/layout/_navbar_padding.scss new file mode 100644 index 00000000..41f22b51 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/layout/_window_control.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/layout/_window_control.scss new file mode 100644 index 00000000..eef3fc90 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/layout/_window_control_size.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/tabbar/layout/_window_control_size.scss new file mode 100644 index 00000000..c3bb0509 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_index.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_index.scss new file mode 100644 index 00000000..36f344e0 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_monospace.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_monospace.scss new file mode 100644 index 00000000..690a2c0b --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/src/theme/_monospace.scss @@ -0,0 +1,3 @@ +* { + font-family: -moz-fixed; +} diff --git a/arch-config/.mozilla/firefox/default-release/chrome/src/urlview/_always_show_page_actions.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/urlview/_always_show_page_actions.scss index 11ba6c6b..d489f800 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/urlview/_always_show_page_actions.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/urlview/_move_icon_to_left.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/urlview/_move_icon_to_left.scss index 27ddfb3c..bbb4353f 100644 --- a/arch-config/.mozilla/firefox/default-release/chrome/src/urlview/_move_icon_to_left.scss +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/chrome/src/utils/_one_liner.scss b/arch-config/.mozilla/firefox/default-release/chrome/src/utils/_one_liner.scss new file mode 100644 index 00000000..55dab408 --- /dev/null +++ b/arch-config/.mozilla/firefox/default-release/chrome/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/arch-config/.mozilla/firefox/default-release/user.js b/arch-config/.mozilla/firefox/default-release/user.js index 0a1b3cc6..bf2fda48 100644 --- a/arch-config/.mozilla/firefox/default-release/user.js +++ b/arch-config/.mozilla/firefox/default-release/user.js @@ -68,10 +68,40 @@ user_pref("userChrome.rounding.square_tab", true); // == 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", true); // 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", true); // 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 --------------------------------------------------------------