From 8452ab0e4351a9af192591d9660edf58a7c688c4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 28 May 2021 12:00:16 +0900 Subject: [PATCH 01/63] Add: Photon like Tab Width --- userChrome.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index 9dd1ccc..be2ada5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -79,7 +79,7 @@ /* Tab - Max Size */ .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { - max-width: 240px !important; /* Original: 225px */ + max-width: 225px !important; } /* neighbouring tabs should "pinch" together */ From 58e865ee9ff44657eccfe8555102fccbc922adb8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 28 May 2021 12:02:47 +0900 Subject: [PATCH 02/63] Add: Photon like Tab Height --- userChrome.css | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/userChrome.css b/userChrome.css index be2ada5..c4d8560 100644 --- a/userChrome.css +++ b/userChrome.css @@ -96,17 +96,30 @@ --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ } - .toolbar-items, .tabbrowser-tab { - max-height: 38px; + /* Toolbar Height */ + #TabsToolbar * { + max-height: 34px !important; } - :root[uidensity=compact] .toolbar-items, .tabbrowser-tab { - max-height: 36px; + :root[uidensity=compact] #TabsToolbar * { + max-height: 30px !important; } - :root[uidensity=touch] .toolbar-items, .tabbrowser-tab { - max-height: unset; + :root[uidensity=touch] #TabsToolbar * { + max-height: 42px !important; } - :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox { + /* Top Margin */ + .tab-background, .tab-content { + margin-top: 0 !important; + } + + /* New Tab Icon - Size Fix */ + root:not([uidensity=rootuidensitytouch]) #tabs-newtab-button > .toolbarbutton-icon { + padding-top: 8px !important; + padding-bottom: 8px !important; + } + + /* Scroll Button - Size Fix */ + :root #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; } #scrollbutton-up, From d244394f067ad0f3c1558a58b511c795d4a535c6 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 28 May 2021 12:11:26 +0900 Subject: [PATCH 03/63] Add: Photon like context line --- userChrome.css | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/userChrome.css b/userChrome.css index c4d8560..214cd57 100644 --- a/userChrome.css +++ b/userChrome.css @@ -178,6 +178,36 @@ opacity: .15; } + /** Selected Tab - Color like toolbar ***************************************/ + .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 { + background-color: rgb(10, 132, 255) !important; /* Photon like color + Default: var(--tab-line-color, rgb(10, 132, 255)) + Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */ + } + + .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { + background-color: rgba(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,.2) !important; + } + + .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line { + opacity: 0 !important; + transform: scaleX(0) !important; + } + .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); */ + } + /** Selected Tab - Box Shadow ***********************************************/ #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background:-moz-lwtheme { /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) @@ -446,10 +476,6 @@ } /** Container Tab - Color line at icon's bottom *****************************/ - .tab-context-line { - display: none; - } - .tab-icon-image { box-sizing: content-box; padding: 3px 0; From db921717bdced0b2155ee0442ffabf21280f313c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 28 May 2021 12:18:37 +0900 Subject: [PATCH 04/63] Add: Photon like divide line --- userChrome.css | 53 +++++++++++++++++++------------------------------- 1 file changed, 20 insertions(+), 33 deletions(-) diff --git a/userChrome.css b/userChrome.css index 214cd57..1cb5fb7 100644 --- a/userChrome.css +++ b/userChrome.css @@ -262,43 +262,30 @@ } /** Unselected Tab - Divide line ********************************************/ - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before, - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before, - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after { - /* Box Model */ - content: ""; - display: block; - position: absolute; - top: 50%; - - /* Bar shape */ - width: 1px; - height: 20px; - overflow: hidden; - - /* Bar Color */ - opacity: var(--tab-separator-opacity); - transition: opacity .2s var(--ease-basic) !important; - background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Replace var(--toolbarseparator-color) - Hard coded for compatibility */ + .tabbrowser-tab::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before { + content: ""; + display: block; + } + .tabbrowser-tab::after, .tabbrowser-tab::before { + border-left: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important; + margin-block: 5px 4px !important; + opacity: 0.3 !important; + } + .tabbrowser-tab::before { + margin-inline-start: -1px !important; } - .tab-background::before { - transform: translateX(-2.5px) translateY(calc(-50% + 1px)) !important; - } - .tabbrowser-tab[last-visible-tab] .tab-background::after { - right: 0; - transform: translateX(2.5px) translateY(calc(-50% + 1px)) !important; + :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, .tabbrowser-tab:hover::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, .tabbrowser-tab[multiselected]::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after { + margin-top: var(--tabs-top-border-width) !important; + margin-bottom: 0 !important; } - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before, - .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) .tab-background::before, - #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { - opacity: 0 !important; - } - - /* Latest Tab & New tab margin */ - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { - margin-inline-end: 8px !important; + /* Selected - Hide */ + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, .tabbrowser-tab[visuallyselected]::after { + border-color: var(--tabs-border-color) !important; + margin-top: 0 !important; + margin-bottom: var(--tabs-navbar-shadow-size) !important; + opacity: 1 !imporant; } /** Clipped tabs - Letters cleary *******************************************/ From 2dea73ae68823b315cc98ac988684b76e800c599 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 28 May 2021 12:21:25 +0900 Subject: [PATCH 05/63] Fix: Photon like toolbar button padding --- userChrome.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/userChrome.css b/userChrome.css index 1cb5fb7..3d81f94 100644 --- a/userChrome.css +++ b/userChrome.css @@ -113,21 +113,21 @@ } /* New Tab Icon - Size Fix */ - root:not([uidensity=rootuidensitytouch]) #tabs-newtab-button > .toolbarbutton-icon { + :root:not([uidensity=rootuidensitytouch]) #tabs-newtab-button > .toolbarbutton-icon { padding-top: 8px !important; padding-bottom: 8px !important; } /* Scroll Button - Size Fix */ - :root #tabbrowser-arrowscrollbox { + #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; } #scrollbutton-up, #scrollbutton-down { /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */ /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */ - padding-top: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important; - padding-bottom: var(--scrollbtn-vertical-padding, var(--toolbarbutton-inner-padding)) !important; + padding-top: var(--scrollbtn-vertical-padding) !important; + padding-bottom: var(--scrollbtn-vertical-padding) !important; } :root[tabsintitlebar]:not([uidensity=compact]) #toolbar-menubar[autohide="true"] { From f404abd382bf9d7a6a2758cf6e6d9406ec0b3f90 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 28 May 2021 12:23:33 +0900 Subject: [PATCH 06/63] Add: Photon like Angle Tab Shape --- userChrome.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index 3d81f94..36bec17 100644 --- a/userChrome.css +++ b/userChrome.css @@ -7,7 +7,8 @@ /** Root - Reduce Padding ***************************************************/ :root { /* Tab Bar */ - --proton-tab-block-margin: 2px !important; /* Original: 4px */ + --proton-tab-block-margin: 0px !important; /* Original: 4px */ + --tab-border-radius: 0px !important; /* Original: 4px */ --inline-tab-padding: 6px !important; /* Original: 8px */ /* Panel */ From 900ec1f26cab1725daa75511655d1d0241f3a214 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 28 May 2021 14:30:25 +0900 Subject: [PATCH 07/63] Add: Photon like Panel --- userChrome.css | 39 ++++++++++++--------------------------- 1 file changed, 12 insertions(+), 27 deletions(-) diff --git a/userChrome.css b/userChrome.css index 30172b6..b97c7ef 100644 --- a/userChrome.css +++ b/userChrome.css @@ -561,6 +561,7 @@ :root { --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important; --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important; + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 2px) !important; } .subviewbutton > .toolbarbutton-text { @@ -622,9 +623,18 @@ background-image: var(--avatar-image-url) !important; } - #appMenu-new-tab-button2 { - list-style-image: url(chrome://browser/skin/new-tab.svg); + #appMenu-new-tab-button2, /* Seperate */ + #appMenu-passwords-button, /* Seperate */ + #appMenu-extensions-themes-button, + #appMenu-save-file-button2, /* Seperate */ + #appMenu-find-button2, + #appMenu-zoom-controls2, + #appMenu-more-button2, /* Seperate */ + #appMenu-help-button2, + #appMenu-quit-button2 /* Seperate */ { + padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; } + #appMenu-new-window-button2 { list-style-image: url(chrome://browser/skin/window.svg); } @@ -641,39 +651,14 @@ #appMenu-downloads-button { list-style-image: url(chrome://browser/skin/downloads/downloads.svg); } - #appMenu-passwords-button { - list-style-image: url(chrome://browser/skin/login.svg); - } - #appMenu-extensions-themes-button { - list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); - } #appMenu-print-button2 { list-style-image: url(chrome://global/skin/icons/print.svg); } - #appMenu-save-file-button2 { - list-style-image: url(chrome://browser/skin/save.svg); - } - #appMenu-find-button2 { - list-style-image: url(chrome://global/skin/icons/search-glass.svg); - } - #appMenu-zoom-controls2::before { - content: url(./icons/screenshot.svg); - } #appMenu-settings-button { list-style-image: url(chrome://global/skin/icons/settings.svg); } - #appMenu-more-button2 { - list-style-image: url(chrome://browser/skin/ion.svg); - } - #appMenu-help-button2 { - list-style-image: url(chrome://global/skin/icons/help.svg); - } - - #appMenu-quit-button2 { - list-style-image: url(chrome://browser/skin/quit.svg); - } /* Panel - Account */ #PanelUI-fxa-menu-connect-device-button .toolbarbutton-icon, From 430d05356420335836b832626d8634fac755d71f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 28 May 2021 14:53:29 +0900 Subject: [PATCH 08/63] Fix: Photon like Panel - adjust padding --- userChrome.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/userChrome.css b/userChrome.css index b97c7ef..5cbdc1b 100644 --- a/userChrome.css +++ b/userChrome.css @@ -561,7 +561,10 @@ :root { --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important; --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important; - --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 2px) !important; + + /* Blank Menu Left Padding */ + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px) !important; + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px) !important; } .subviewbutton > .toolbarbutton-text { @@ -628,11 +631,15 @@ #appMenu-extensions-themes-button, #appMenu-save-file-button2, /* Seperate */ #appMenu-find-button2, - #appMenu-zoom-controls2, #appMenu-more-button2, /* Seperate */ #appMenu-help-button2, #appMenu-quit-button2 /* Seperate */ { padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; + padding-top: var(--arrowpanel-menuitemblank-padding) !important; + padding-bottom: var(--arrowpanel-menuitemblank-padding) !important; + } + #appMenu-zoom-controls2 { + padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; } #appMenu-new-window-button2 { From 806024d47e04b6748009a4533a11b667b73317c8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 30 May 2021 13:02:13 +0900 Subject: [PATCH 09/63] Fix: Seleted Tab - Context Line margin at container tab --- userChrome.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/userChrome.css b/userChrome.css index 6a97efa..c494e14 100644 --- a/userChrome.css +++ b/userChrome.css @@ -209,6 +209,11 @@ transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */ } + /* Container Tab */ + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { + margin: unset !important; + } + /** Selected Tab - Box Shadow ***********************************************/ #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background:-moz-lwtheme { /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) From 157b7446cbac2c19d6c14508c18c0480261542ea Mon Sep 17 00:00:00 2001 From: MS_Y Date: Sun, 30 May 2021 04:44:21 +0000 Subject: [PATCH 10/63] Doc: update for photon style --- README.org | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.org b/README.org index 7e62dd2..279f82a 100644 --- a/README.org +++ b/README.org @@ -1,12 +1,14 @@ -* Lepton(old name: Proton Fix) - [[https://wiki.mozilla.org/Firefox/Proton][proton]] is firefox's new design. \\ - I want to fix some flaws. +* Lepton(old name: Proton Fix) - Photon Stlye + [[https://wiki.mozilla.org/Firefox/Proton][proton]] is firefox's new design.\\ + And [[https://design.firefox.com/photon/][Photon]] is old design(88 or earlier) + + I tried to preserve Proton's feeling while preserving Photon's strengths. /Disclaimer:/ It works *firefox 89* above!! | *Wiki* | | | | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots][Screenshots]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution][Compatibility Issues Solution]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Tips][Tips]] | - [[https://user-images.githubusercontent.com/25581533/119774062-20942280-beb1-11eb-80aa-c18dd52f18d7.png]] + [[https://user-images.githubusercontent.com/25581533/120091976-41ea4e00-c0ff-11eb-88ca-a204cfcebe72.png]] (Fixed proton design) @@ -20,13 +22,14 @@ - *Tab Design* - General: - Connect with toolbar(Buttons like tabs) + - Context Line: like Photon - Selected: - Box Shadow: Highlight the selected tab - Bottom Rounding: Natural - MultiSelected - Adjust Color: Easily recognizable. - Unselect: - - Divide Line: React to hover like chrome + - Divide Line: like Photon - Clipped: - Cleary Text: Adjusted clipped gradation - Sound: @@ -56,7 +59,7 @@ - copy files 4. Restart - If you prefer [[https://design.firefox.com/photon/][Photon]](88 or earlier), see [[https://github.com/black7375/Firefox-UI-Fix/tree/photon-style][photon-style]]. + If you prefer Proton(89 or above), see [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]]. ** WHY Proton? I think a lot has improved. From e6c1e753c6b4196095f66b81022dc7733356a080 Mon Sep 17 00:00:00 2001 From: MS_Y Date: Mon, 31 May 2021 03:19:11 +0000 Subject: [PATCH 11/63] Doc: fix typo --- README.org | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.org b/README.org index 5b71e87..9dd07c6 100644 --- a/README.org +++ b/README.org @@ -2,7 +2,7 @@ [[https://wiki.mozilla.org/Firefox/Proton][proton]] is firefox's new design.\\ And [[https://design.firefox.com/photon/][Photon]] is old design(88 or earlier) - I tried to preserve Proton's feeling while preserving Photon's strengths. + I tried to preserve Photon's feeling while preserving Proton's strengths. /Disclaimer:/ It works *firefox 89* above!! | *Wiki* | | | From 3428ec2b2caafa8c3add443a68b9304e6bbbb693 Mon Sep 17 00:00:00 2001 From: MS_Y Date: Tue, 1 Jun 2021 03:41:22 +0000 Subject: [PATCH 12/63] Doc: tab padding screenshot update --- README.org | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.org b/README.org index c606d76..ebad171 100644 --- a/README.org +++ b/README.org @@ -108,8 +108,8 @@ - :warning: Address bar 3-point menu, screenshot moves to toolbar (can't fix) ** Padding Comparisons -[[https://user-images.githubusercontent.com/25581533/120252679-c0b4c780-c274-11eb-83f4-805cb243ff7d.png]] -[[https://user-images.githubusercontent.com/25581533/120253257-6ae11f00-c276-11eb-93cf-393f9845f30b.png]] + [[https://user-images.githubusercontent.com/25581533/120262929-38412180-c28a-11eb-8680-e278403873e4.png]] + [[https://user-images.githubusercontent.com/25581533/120263320-0086a980-c28b-11eb-8b58-acde49dd80ee.png]] [[https://user-images.githubusercontent.com/25581533/118402352-1e33fc00-b659-11eb-89fc-3cb38207fe39.png]] [[https://user-images.githubusercontent.com/25581533/116781623-930d1080-aa73-11eb-8fc7-14c238b73bfe.png]] From 27629ef4950ded67313c5500cbb03f2372d27a72 Mon Sep 17 00:00:00 2001 From: Rahul Ramkumar Date: Tue, 1 Jun 2021 22:59:24 -0400 Subject: [PATCH 13/63] Fix Minor Spelling Error for !important --- userChrome.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index 72cfdd8..204a88a 100644 --- a/userChrome.css +++ b/userChrome.css @@ -291,7 +291,7 @@ border-color: var(--tabs-border-color) !important; margin-top: 0 !important; margin-bottom: var(--tabs-navbar-shadow-size) !important; - opacity: 1 !imporant; + opacity: 1 !important; } /** Clipped tabs - Letters cleary *******************************************/ From dfaab6e20db582d9b8df63bd66ce3ab6fcc5256d Mon Sep 17 00:00:00 2001 From: BlaCk_Void Date: Wed, 2 Jun 2021 23:55:59 +0900 Subject: [PATCH 14/63] Fix: Photon Tab Bar - move tabs around #29 There is a gap problem in Compact mode and Toolbar Customization, but it will be resolved in tomorrow's work. --- userChrome.css | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/userChrome.css b/userChrome.css index 204a88a..885bbe2 100644 --- a/userChrome.css +++ b/userChrome.css @@ -93,18 +93,25 @@ } /** Tab Bar - Reduce Height, Show more contents *****************************/ - :root:not([uidensity=touch]) #TabsToolbar { - --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ + #TabsToolbar { + --toolbarbutton-inner-padding: 8px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ } /* Toolbar Height */ - #TabsToolbar * { + #TabsToolbar + .toolbar-items, .tabbrowser-tab, + .titlebar-buttonbox-container { max-height: 34px !important; } - :root[uidensity=compact] #TabsToolbar * { + + :root[uidensity=compact] #TabsToolbar, + :root[uidensity=compact] .toolbar-items, .tabbrowser-tab + :root[uidensity=compact] .titlebar-buttonbox-container { max-height: 30px !important; } - :root[uidensity=touch] #TabsToolbar * { + :root[uidensity=touch] #TabsToolbar, + :root[uidensity=touch] .toolbar-items, .tabbrowser-tab + :root[uidensity=touch] .titlebar-buttonbox-container { max-height: 42px !important; } @@ -114,7 +121,7 @@ } /* New Tab Icon - Size Fix */ - :root:not([uidensity=rootuidensitytouch]) #tabs-newtab-button > .toolbarbutton-icon { + :root:not([uidensity=touch]) #tabs-newtab-button > .toolbarbutton-icon { padding-top: 8px !important; padding-bottom: 8px !important; } From 1277972a7e582d3a5fc1d695ff0023382b780b31 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 3 Jun 2021 17:19:20 +0900 Subject: [PATCH 15/63] Fix: Tab Bar - Bottom white line at selected arrowscrollbox --- userChrome.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index 885bbe2..ed8f028 100644 --- a/userChrome.css +++ b/userChrome.css @@ -112,7 +112,7 @@ :root[uidensity=touch] #TabsToolbar, :root[uidensity=touch] .toolbar-items, .tabbrowser-tab :root[uidensity=touch] .titlebar-buttonbox-container { - max-height: 42px !important; + max-height: unset !important; } /* Top Margin */ @@ -231,11 +231,12 @@ box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; } - /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ - #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + /* Overflow Tab - white bottom line fix */ + #tabbrowser-arrowscrollbox > .tabbrowser-tab { z-index: 0 !important; } + /** Selected Tab - Bottom Rounded Corner ************************************/ #tabbrowser-tabs { --tab-corner-rounding: 5px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ From 7b803e8acd4a11015cd75ab268eaf9d0a651828f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 4 Jun 2021 12:23:58 +0900 Subject: [PATCH 16/63] Fix: Tab Bar - Reduce each tab gaps #56 --- userChrome.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index ed8f028..30e778f 100644 --- a/userChrome.css +++ b/userChrome.css @@ -85,7 +85,7 @@ /* neighbouring tabs should "pinch" together */ .tabbrowser-tab { - padding-inline: 1px !important; + padding-inline: 0 !important; } .tabbrowser-tab:not([last-visible-tab]) { From 8a9cca389417a8b98941aa2b3c32777bf67c483b Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 4 Jun 2021 12:43:36 +0900 Subject: [PATCH 17/63] Fix: Tab Bar - Remove layout movement at selected #56 --- userChrome.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/userChrome.css b/userChrome.css index 21186f1..0e7528e 100644 --- a/userChrome.css +++ b/userChrome.css @@ -58,7 +58,7 @@ } #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { - margin-inline-start: 1px !important; + margin-inline-start: 0 !important; } :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox { @@ -88,10 +88,6 @@ padding-inline: 0 !important; } - .tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -.5px !important; - } - /** Tab Bar - Reduce Height, Show more contents *****************************/ #TabsToolbar { --toolbarbutton-inner-padding: 8px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ From 6d53d8bf4560e3bfec5683da5ba6b520525f7cb6 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 4 Jun 2021 16:23:23 +0900 Subject: [PATCH 18/63] Fix: Tab Bar - Button radious --- userChrome.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/userChrome.css b/userChrome.css index 0e7528e..5ae8cd0 100644 --- a/userChrome.css +++ b/userChrome.css @@ -35,6 +35,14 @@ --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */ } + /* Fix Tab bar button radious */ + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack, + .tab-close-button { + --tab-border-radius: 4px !important; + } + /** Tab Bar - Reduce Width, Show more tabs **********************************/ .titlebar-spacer[type="pre-tabs"] { width: 30px !important; /* Original: 40px */ From 9ff562ec421cafe5fcadcdcfb8c7d85bba26fdc7 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 4 Jun 2021 16:43:08 +0900 Subject: [PATCH 19/63] Fix: Tab Bar - Height setting #56 --- userChrome.css | 29 ++++++----------------------- 1 file changed, 6 insertions(+), 23 deletions(-) diff --git a/userChrome.css b/userChrome.css index 5ae8cd0..ca9ffa0 100644 --- a/userChrome.css +++ b/userChrome.css @@ -97,26 +97,15 @@ } /** Tab Bar - Reduce Height, Show more contents *****************************/ - #TabsToolbar { - --toolbarbutton-inner-padding: 8px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ - } - /* Toolbar Height */ - #TabsToolbar - .toolbar-items, .tabbrowser-tab, - .titlebar-buttonbox-container { - max-height: 34px !important; + #TabsToolbar { + --tab-min-height: 33px !important; } - - :root[uidensity=compact] #TabsToolbar, - :root[uidensity=compact] .toolbar-items, .tabbrowser-tab - :root[uidensity=compact] .titlebar-buttonbox-container { - max-height: 30px !important; + :root[uidensity=compact] #TabsToolbar { + --tab-min-height: 29px !important; } - :root[uidensity=touch] #TabsToolbar, - :root[uidensity=touch] .toolbar-items, .tabbrowser-tab - :root[uidensity=touch] .titlebar-buttonbox-container { - max-height: unset !important; + :root[uidensity=touch] #TabsToolbar { + --tab-min-height: 41px !important; } /* Top Margin */ @@ -124,12 +113,6 @@ margin-top: 0 !important; } - /* New Tab Icon - Size Fix */ - :root:not([uidensity=touch]) #tabs-newtab-button > .toolbarbutton-icon { - padding-top: 8px !important; - padding-bottom: 8px !important; - } - /* Scroll Button - Size Fix */ #tabbrowser-arrowscrollbox { --scrollbtn-vertical-padding: 3px; From aaec5b164c33ed408a0b2523b2f5f16bd93dfa5d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 4 Jun 2021 17:18:13 +0900 Subject: [PATCH 20/63] Fix: Tab Bar - Scroll Button padding --- userChrome.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index ca9ffa0..a4779d7 100644 --- a/userChrome.css +++ b/userChrome.css @@ -115,7 +115,8 @@ /* Scroll Button - Size Fix */ #tabbrowser-arrowscrollbox { - --scrollbtn-vertical-padding: 3px; + --scrollbtn-vertical-padding: 4px; + --scrollbtn-vertical-border: none; } #scrollbutton-up, #scrollbutton-down { @@ -123,6 +124,9 @@ /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */ padding-top: var(--scrollbtn-vertical-padding) !important; padding-bottom: var(--scrollbtn-vertical-padding) !important; + + border-top: var(--scrollbtn-vertical-border) !important; + border-bottom: var(--scrollbtn-vertical-border) !important; } :root[tabsintitlebar]:not([uidensity=compact]) #toolbar-menubar[autohide="true"] { From 6cf6a9c25902dc828285b63c7f49adcb45cab21e Mon Sep 17 00:00:00 2001 From: BlaCk_Void Date: Sat, 5 Jun 2021 22:55:16 +0900 Subject: [PATCH 21/63] Fix: Touch, Compact icon align #14 --- userChrome.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index a4779d7..a51408e 100644 --- a/userChrome.css +++ b/userChrome.css @@ -586,7 +586,7 @@ :root[uidensity=compact] menupopup > menuitem, menupopup > menu { padding-block: 0.25em !important; /* Original: 0.5em */ } - + /** Panel - View ************************************************************/ :root #appMenu-popup panelview { width: 25em !important; /* can modify panel width, Original: 22.5em */ @@ -599,8 +599,14 @@ --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important; /* Blank Menu Left Padding */ - --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px) !important; - --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px) !important; + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px); + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); + } + :root[uidensity=compact] { + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px); + } + :root[uidensity=touch] { + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding)); } #downloadsHistory .button-text, From cca795d21182ad338bfe7cab3cf1a89fcba69a40 Mon Sep 17 00:00:00 2001 From: BlaCk_Void Date: Sat, 5 Jun 2021 23:12:36 +0900 Subject: [PATCH 22/63] Fix: Panel - Calculate with var #14 --- userChrome.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/userChrome.css b/userChrome.css index a51408e..b3e2e4e 100644 --- a/userChrome.css +++ b/userChrome.css @@ -608,6 +608,18 @@ :root[uidensity=touch] { --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding)); } + :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) - 2px) !important; + + /* Blank Menu Left Padding */ + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding)); + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); + } #downloadsHistory .button-text, .subviewbutton > .toolbarbutton-text { From 61793e3e3a599522e9a1c533357b626cf5ba9013 Mon Sep 17 00:00:00 2001 From: BlaCk_Void Date: Sun, 6 Jun 2021 17:24:01 +0900 Subject: [PATCH 23/63] Clean: typo --- userChrome.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index b3e2e4e..f39434d 100644 --- a/userChrome.css +++ b/userChrome.css @@ -177,7 +177,7 @@ opacity: .15; } - /** Selected Tab - Color like toolbar ***************************************/ + /** Selected Tab - Photon like contextline **********************************/ .tab-context-line { display: -moz-inline-box !important; height: 2px !important; From a05b85f070a4f92b24815e195cf8ce4d6debc526 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 7 Jun 2021 11:38:28 +0900 Subject: [PATCH 24/63] Fix: Photon like tab - Remove overlap when moving https://www.reddit.com/r/firefox/comments/norrv6/lepton_themes_photon_styled/h0soxwf/ --- userChrome.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index cda10dc..8e399fd 100644 --- a/userChrome.css +++ b/userChrome.css @@ -251,7 +251,7 @@ } /* Overflow Tab - white bottom line fix */ - #tabbrowser-arrowscrollbox > .tabbrowser-tab { + #tabbrowser-tabs:not([movingtab]) #tabbrowser-arrowscrollbox > .tabbrowser-tab { z-index: 0 !important; } From b982c1859b79eb5458700e6a0ccfbe834e1248dc Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 9 Jun 2021 10:23:55 +0900 Subject: [PATCH 25/63] Fix: workflow action/checkout --- .github/workflows/release.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b0f6896..9b1fa9e 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -15,7 +15,8 @@ jobs: branch: "photon-style" steps: - uses: actions/checkout@v2 - ref: ${{ matrix.branch }} + with: + ref: ${{ matrix.branch }} - name: Release Structure run: | From edba65709ad429d3d9c9c63a084691b5a7e5b7c1 Mon Sep 17 00:00:00 2001 From: MS_Y Date: Wed, 9 Jun 2021 01:20:57 +0000 Subject: [PATCH 26/63] Doc: like photon tag --- README.org | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.org b/README.org index 6dcae8d..790b0fa 100644 --- a/README.org +++ b/README.org @@ -34,7 +34,7 @@ - *Color* - Windows system theme support - *Icons* - - Panel + - Panel: like Photon - *Padding Narrower* - Tab - Panel @@ -42,9 +42,9 @@ - Density - *Tab Design* - General: - - Connect with toolbar(Buttons like tabs) - - Context Line: like Photon + - Connect with toolbar(Buttons like tabs): like Photon - Selected: + - Context Line: like Photon - Box Shadow: Highlight the selected tab - Bottom Rounding: Natural - MultiSelected From 497135829d217aaa191b13214991cebae6450a02 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 9 Jun 2021 10:23:55 +0900 Subject: [PATCH 27/63] Fix: workflow invalid update --- .github/workflows/release.yml | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 9b1fa9e..ce5e692 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -21,9 +21,11 @@ jobs: - name: Release Structure run: | mkdir -v chrome - mv -v * chrome/ - mv -v chrome/user.js . - zip chrome user.js --out ${{ matrix.name }}.zip + + shopt -s extglob + mv -v !(chrome|user.js) chrome/ + + zip -rv ${{ matrix.name }}.zip chrome user.js - uses: softprops/action-gh-release@v1 # actions/create-release, actions/upload-release-asset is deprecated if: startsWith(github.ref, 'refs/tags/') From edc4a4683855e33c47f449633bd2ca835b675825 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 10 Jun 2021 09:29:58 +0900 Subject: [PATCH 28/63] Fix: Photon like Tab - Remove don't need code --- userChrome.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/userChrome.css b/userChrome.css index 812ed99..5b409f8 100644 --- a/userChrome.css +++ b/userChrome.css @@ -254,11 +254,6 @@ box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; } - /* Overflow Tab - white bottom line fix */ - #tabbrowser-tabs:not([movingtab]) #tabbrowser-arrowscrollbox > .tabbrowser-tab { - z-index: 0 !important; - } - /** Selected Tab - Bottom Rounded Corner ************************************/ #tabbrowser-tabs { From 1249e5d4a897838f99edd76bb09f1a3b7a839170 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 20 Jun 2021 18:53:36 +0900 Subject: [PATCH 29/63] Fix: Context Line color compatibility --- userChrome.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index d3c495d..73c5ab5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -250,6 +250,10 @@ } /** Selected Tab - Photon like contextline **********************************/ + :root[lwtheme-mozlightdark] #tabbrowser-tabs { + --tab-line-color: rgb(10, 132, 255) !important; + } + .tab-context-line { display: -moz-inline-box !important; height: 2px !important; @@ -257,9 +261,10 @@ } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { - background-color: rgb(10, 132, 255) !important; /* Photon like color - Default: var(--tab-line-color, rgb(10, 132, 255)) - Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */ + /* Photon like color + Default: var(--tab-line-color, rgb(10, 132, 255)) + Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */ + background-color: var(--tab-line-color, rgb(10, 132, 255)) !important; } .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line { From ec965c783b0a2211bf6ad1ee8e732818c66d8007 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 29 Jun 2021 11:16:41 +0900 Subject: [PATCH 30/63] Fix: Selected TAb - Box Shadow remove #99 --- userChrome.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/userChrome.css b/userChrome.css index 73c5ab5..ae3b833 100644 --- a/userChrome.css +++ b/userChrome.css @@ -289,17 +289,6 @@ margin: unset !important; } - /** Selected Tab - Box Shadow ***********************************************/ - #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; - } - - /** Selected Tab - Bottom Rounded Corner ************************************/ #tabbrowser-tabs { --tab-corner-rounding: 5px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ From fbe07cd0bf515d54dd7f42a682da392d1ab9885f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 29 Jun 2021 11:30:34 +0900 Subject: [PATCH 31/63] Add: Photon like Unselected Tab - Pre-tabs spacer --- userChrome.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/userChrome.css b/userChrome.css index ae3b833..8e60300 100644 --- a/userChrome.css +++ b/userChrome.css @@ -328,6 +328,11 @@ } /** Unselected Tab - Divide line ********************************************/ + .titlebar-spacer[type="pre-tabs"] { + border-inline-end: 1px solid var(--lwt-background-tab-separator-color, currentColor); + opacity: 0.3; + } + .tabbrowser-tab::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before { content: ""; display: block; From 96b9a1ac4ced930184c1b3fc5cdf2ddf06cd77cb Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 29 Jun 2021 12:12:55 +0900 Subject: [PATCH 32/63] Fix: Photon like Unselected Tab - First tab's divide line make like other tabs --- userChrome.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/userChrome.css b/userChrome.css index 8e60300..2753894 100644 --- a/userChrome.css +++ b/userChrome.css @@ -328,11 +328,7 @@ } /** Unselected Tab - Divide line ********************************************/ - .titlebar-spacer[type="pre-tabs"] { - border-inline-end: 1px solid var(--lwt-background-tab-separator-color, currentColor); - opacity: 0.3; - } - + .tabbrowser-tab[first-visible-tab]::before, .tabbrowser-tab::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before { content: ""; display: block; @@ -345,13 +341,18 @@ .tabbrowser-tab::before { margin-inline-start: -1px !important; } + .tabbrowser-tab[first-visible-tab]::before { + border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important; + } + .tabbrowser-tab[first-visible-tab]::before, :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, .tabbrowser-tab:hover::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, .tabbrowser-tab[multiselected]::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after { margin-top: var(--tabs-top-border-width) !important; margin-bottom: 0 !important; } /* Selected - Hide */ + .tabbrowser-tab[first-visible-tab][visuallyselected]::before, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, .tabbrowser-tab[visuallyselected]::after { border-color: var(--tabs-border-color) !important; margin-top: 0 !important; From 795f2912cc8009e9e9aff2e65c09ddb281f0e4ac Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 29 Jun 2021 12:17:17 +0900 Subject: [PATCH 33/63] Clean: Photon like Unselected Tab - Divide line --- userChrome.css | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/userChrome.css b/userChrome.css index 2753894..440caee 100644 --- a/userChrome.css +++ b/userChrome.css @@ -329,12 +329,15 @@ /** Unselected Tab - Divide line ********************************************/ .tabbrowser-tab[first-visible-tab]::before, - .tabbrowser-tab::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before { + .tabbrowser-tab::after, + #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before { content: ""; display: block; } - .tabbrowser-tab::after, .tabbrowser-tab::before { - border-left: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important; + .tabbrowser-tab::before, + .tabbrowser-tab::after { + --tab-divide-line: 1px solid var(--lwt-background-tab-separator-color, currentColor); + border-left: var(--tab-divide-line) !important; margin-block: 5px 4px !important; opacity: 0.3 !important; } @@ -342,18 +345,24 @@ margin-inline-start: -1px !important; } .tabbrowser-tab[first-visible-tab]::before { - border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important; + border-right: var(--tab-divide-line) !important; } .tabbrowser-tab[first-visible-tab]::before, - :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, .tabbrowser-tab:hover::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, .tabbrowser-tab[multiselected]::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after { + :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, + .tabbrowser-tab:hover::after, + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, + .tabbrowser-tab[multiselected]::after, + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after { margin-top: var(--tabs-top-border-width) !important; margin-bottom: 0 !important; } /* Selected - Hide */ .tabbrowser-tab[first-visible-tab][visuallyselected]::before, - #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, .tabbrowser-tab[visuallyselected]::after { + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, + #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, + .tabbrowser-tab[visuallyselected]::after { border-color: var(--tabs-border-color) !important; margin-top: 0 !important; margin-bottom: var(--tabs-navbar-shadow-size) !important; From 396ac750ccd353a447802ebc88f87bd60b54d86b Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 29 Jun 2021 13:40:09 +0900 Subject: [PATCH 34/63] Add: Photon style New tab button - Smaller button --- userChrome.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/userChrome.css b/userChrome.css index 440caee..e56fd44 100644 --- a/userChrome.css +++ b/userChrome.css @@ -369,6 +369,20 @@ opacity: 1 !important; } + /** New tab button - Smaller button *****************************************/ + #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 */ + } + /** Clipped tabs - Letters cleary *******************************************/ #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) { padding-inline-start: 8px !important; From 22dc8b8f7bf00508120c6f8a86ae7d8b06de505a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 30 Jun 2021 13:35:32 +0900 Subject: [PATCH 35/63] Fix: `LEPTON` branch info --- LEPTON | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LEPTON b/LEPTON index 1e76b9c..5a9e5a4 100644 --- a/LEPTON +++ b/LEPTON @@ -1 +1 @@ -Branch=master +Branch=photon-style From 2903e46f18de2fd8f6e9288c693c4747e8558bdf Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 2 Jul 2021 14:50:00 +0900 Subject: [PATCH 36/63] Add: Proton Style - Unnecessary codes from Lepton --- userChrome.css | 120 ------------------------------------------------- 1 file changed, 120 deletions(-) diff --git a/userChrome.css b/userChrome.css index 547e561..043fffb 100644 --- a/userChrome.css +++ b/userChrome.css @@ -69,8 +69,6 @@ /** Root - Reduce Padding ***************************************************/ :root { /* Tab Bar */ - --proton-tab-block-margin: 2px !important; /* Original: 4px */ - --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ --inline-tab-padding: 6px !important; /* Original: 8px */ /* Panel */ @@ -207,34 +205,7 @@ background-position-y: bottom calc(.5px + var(--tabs-navbar-shadow-size)) !important; } - /** Tab Bar - Connect to window *********************************************/ - .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; - } - /** Selected Tab - Color like toolbar ***************************************/ - :root:not(:-moz-lwtheme) { - /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ - --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ - } -#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; - } - /* Multi Selected Color */ #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)), @@ -250,60 +221,6 @@ opacity: .15; } - /** Selected Tab - Box Shadow ***********************************************/ - #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; - } - - /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ - #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { - z-index: 0 !important; - } - - /** Selected Tab - Bottom Rounded Corner ************************************/ - #tabbrowser-tabs { - --tab-corner-rounding: 4px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 1px; - } - - :root[lwtheme="true"] tab[visuallyselected] > stack::before, - :root[lwtheme="true"] tab[visuallyselected] > stack::after { - /* Box */ - content: "" !important; - 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(--tabs-border-color, transparent) !important; - -moz-context-properties: fill, stroke !important; - - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; - } - - :root[lwtheme="true"] tab[visuallyselected] > stack::before { - left: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)) !important; - background-image: url(./icons/tab-bottom-corner-left.svg); - } - :root[lwtheme="true"] tab[visuallyselected] > stack::after { - left: auto; - right: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); - background-image: url(./icons/tab-bottom-corner-right.svg); - } - /** Unselected Tab - Divide line ********************************************/ #tabbrowser-arrowscrollbox { position: absolute; @@ -344,43 +261,6 @@ } /* New tab button - Looks like tab ******************************************/ - #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; - - /* Size */ - -moz-box-align: stretch !important; - padding-top: var(--tab-block-margin) !important; - } - - #tabs-newtab-button > .toolbarbutton-icon { - border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ - } - - /* Coner Rounding */ - #tabs-newtab-button:hover { - /* Color */ - fill: color-mix(in srgb, currentColor 17%, transparent) !important; /* Replace var(--toolbarbutton-hover-background) - Hard coded for compatibility */ - -moz-context-properties: fill !important; - - /* Corner 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); - } - - #tabs-newtab-button .toolbarbutton-icon { - 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); - } /** Clipped tabs - Letters cleary *******************************************/ #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) { From 412f1fd87eb5b76a0f7968d9ff8c45711d41f839 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 2 Jul 2021 14:55:29 +0900 Subject: [PATCH 37/63] Add: Proton Style - Adjust lepton codes --- userChrome.css | 53 ++++++++++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 23 deletions(-) diff --git a/userChrome.css b/userChrome.css index 043fffb..03036f0 100644 --- a/userChrome.css +++ b/userChrome.css @@ -159,14 +159,11 @@ --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ } - .toolbar-items, .tabbrowser-tab { - max-height: 38px; + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 38px !important; } - :root[uidensity=compact] .toolbar-items, .tabbrowser-tab { - max-height: 36px; - } - :root[uidensity=touch] .toolbar-items, .tabbrowser-tab { - max-height: unset; + :root[uidensity=compact] #TabsToolbar { + --tab-min-height: 36px !important; } /* Scroll Button - Size Fix */ @@ -205,8 +202,7 @@ background-position-y: bottom calc(.5px + var(--tabs-navbar-shadow-size)) !important; } - /** Selected Tab - Color like toolbar ***************************************/ - /* Multi Selected Color */ + /** Multi Selected Color - More Contrast ************************************/ #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)), @@ -222,20 +218,14 @@ } /** Unselected Tab - Divide line ********************************************/ - #tabbrowser-arrowscrollbox { - position: absolute; - } - + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before, .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before, - #tabs-newtab-button:not(:hover)::before { + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after { /* Box Model */ content: ""; - display: block; + display: block; position: absolute; - - /* Position */ - top: 50%; - transform: translateX(-2.5px) translateY(calc(-50% + 1px)); + top: 50%; /* Bar shape */ width: 1px; @@ -244,12 +234,19 @@ /* Bar Color */ opacity: var(--tab-separator-opacity); - transition: opacity .2s var(--ease-basic); - background-color: color-mix(in srgb, currentColor 20%, transparent); /* Replace var(--toolbarseparator-color) - Hard coded for compatibility */ + transition: opacity .2s var(--ease-basic) !important; + background-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* Replace var(--toolbarseparator-color) - Hard coded for compatibility */ + } + + .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:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before, - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + #tabs-newtab-button::before, .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) .tab-background::before, #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { opacity: 0 !important; @@ -260,7 +257,17 @@ margin-inline-end: 1px !important; } - /* New tab button - Looks like tab ******************************************/ + /* New tab button - Smaller button ******************************************/ + :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; + } /** Clipped tabs - Letters cleary *******************************************/ #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) { From d87609093831c71d61300baa96eebde6741c5c4d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 14 Jul 2021 15:02:39 +0900 Subject: [PATCH 38/63] Add: System Default Theme - GTK tab line color at photon style #120 --- userChrome.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/userChrome.css b/userChrome.css index fcda657..1e632ca 100644 --- a/userChrome.css +++ b/userChrome.css @@ -542,6 +542,11 @@ :root[lwtheme-mozlightdark] #tabbrowser-tabs { --tab-line-color: rgb(10, 132, 255) !important; } + @media (-moz-gtk-csd-available) { + :root[lwtheme-mozlightdark]:not(:-moz-lwtheme) #tabbrowser-tabs { + --tab-line-color: Highlight !important; /* -moz-accent-color */ + } + } .tab-context-line { display: -moz-inline-box !important; From c75ed1e422a81d9589aa6df8b22fb027960ab79d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 29 Jul 2021 10:33:41 +0900 Subject: [PATCH 39/63] Fix: LEPTON file info --- LEPTON | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LEPTON b/LEPTON index 4a109d0..1984390 100644 --- a/LEPTON +++ b/LEPTON @@ -1,2 +1,2 @@ [Info] -Branch=master +Branch=proton-style From dfca40924a915aedd7fd9edb76dbdba37f4cc2d8 Mon Sep 17 00:00:00 2001 From: MS_Y Date: Thu, 5 Aug 2021 07:21:14 +0000 Subject: [PATCH 40/63] Doc: README for proton-style --- README.org | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/README.org b/README.org index ebc4d1c..d4523ca 100644 --- a/README.org +++ b/README.org @@ -27,7 +27,7 @@ | *Wiki* | | | | | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Installation-Guide][Installation Guide]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Screenshots][Screenshots]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Compatibility-Issues-Solution][Compatibility Issues Solution]] | [[https://github.com/black7375/Firefox-UI-Fix/wiki/Tips][Tips]] | - [[https://user-images.githubusercontent.com/25581533/119774062-20942280-beb1-11eb-80aa-c18dd52f18d7.png]] + [[https://user-images.githubusercontent.com/25581533/127980993-5c532856-0c1c-4548-b310-9495df246d16.png]] (Lepton's design :arrow_up:) @@ -48,11 +48,6 @@ - Density - Others... - *Tab Design* - - General: - - Connect with toolbar(Buttons like tabs) - - Selected: - - Box Shadow: Highlight the selected tab - - Bottom Rounding: Natural - MultiSelected - Adjust Color: Easily recognizable. - Unselect: @@ -65,8 +60,6 @@ - Show Favicon: Always show favicon - Container Tab: - Highlight line position: Displayed under favicon. - - *Button Design* - - New tab: Looks like tab - *Activity Stream Design* - Search Bar: - Focused Shadow: Same as the accent color @@ -109,9 +102,8 @@ 4. Restart Firefox - Click the =Clear startup cache...= at the top of =about:support= - If you prefer Photon, see [[https://github.com/black7375/Firefox-UI-Fix/tree/photon-style][Lepton's photon-style]].\\ - If you prefer Proton, see [[https://github.com/black7375/Firefox-UI-Fix/tree/proton-style][Lepton's proton-style]]. - + If you prefer Connected Tab, see [[https://github.com/black7375/Firefox-UI-Fix][Original Lepton]].\\ + If you prefer Photon, see [[https://github.com/black7375/Firefox-UI-Fix/tree/photon-style][Lepton's photon-style]]. ** WHY Proton? I think a lot has improved. From f3cefbc21e1927311e2a168b876af30a77674b9a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 13 Aug 2021 15:00:32 +0900 Subject: [PATCH 41/63] Fix: Tab Bar for photon style - height to fixed size #154 --- userChrome.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/userChrome.css b/userChrome.css index c0ca41e..c6d72d9 100644 --- a/userChrome.css +++ b/userChrome.css @@ -503,6 +503,7 @@ /* Toolbar Height */ #TabsToolbar { --tab-min-height: 33px !important; + --toolbarbutton-inner-padding: unset !important; } :root[uidensity=compact] #TabsToolbar { --tab-min-height: 29px !important; @@ -510,6 +511,11 @@ :root[uidensity=touch] #TabsToolbar { --tab-min-height: 41px !important; } + #tabbrowser-tabs, + #tabbrowser-arrowscrollbox, + #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + min-height: var(--tab-min-height) !important; + } /* Top Margin */ .tab-background, .tab-content { From 97809ec5f520e6a434c99f6f7b7c6a651f87350e Mon Sep 17 00:00:00 2001 From: BlaCk_Void Date: Mon, 16 Aug 2021 16:10:47 +0900 Subject: [PATCH 42/63] Fix: Selected Tab for photon - Remove side's background color border #141 --- userChrome.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/userChrome.css b/userChrome.css index c6d72d9..615f4e7 100644 --- a/userChrome.css +++ b/userChrome.css @@ -805,6 +805,15 @@ 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,.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; From 2be081cd0fd0872c92a130fffb383673f33f75ae Mon Sep 17 00:00:00 2001 From: MS_Y Date: Thu, 19 Aug 2021 12:24:43 +0000 Subject: [PATCH 43/63] Fix: Selected Tab for photon style - Pinned tab's margin bottom #177 --- userChrome.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index f2edb39..7009404 100644 --- a/userChrome.css +++ b/userChrome.css @@ -968,7 +968,7 @@ .tabbrowser-tab[visuallyselected]::after { border-color: var(--tabs-border-color) !important; margin-top: 0 !important; - margin-bottom: var(--tabs-navbar-shadow-size) !important; + margin-bottom: 0 !important; opacity: 1 !important; } From f6b2656e53b4e1d68f082ca84e5337674d9319a8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 20 Aug 2021 10:12:43 +0900 Subject: [PATCH 44/63] Fix: Remove Bottom Rounded Corner at photon-style #184 --- userChrome.css | 43 ------------------------------------------- 1 file changed, 43 deletions(-) diff --git a/userChrome.css b/userChrome.css index 7009404..e932d40 100644 --- a/userChrome.css +++ b/userChrome.css @@ -887,49 +887,6 @@ margin: unset !important; } - /** Selected Tab - Bottom Rounded Corner ************************************/ - #tabbrowser-tabs { - --tab-corner-rounding: 4px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 1px; - } - - :root:not([customizing="true"])[gtktiledwindow="true"][lwtheme="true"] tab[visuallyselected] > stack::before, - :root:not([customizing="true"]):not([gtktiledwindow="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"])[gtktiledwindow="true"][lwtheme="true"] tab[visuallyselected] > stack::after, - :root:not([customizing="true"]):not([gtktiledwindow="true"]) tab[visuallyselected] > stack::after { - /* Box */ - content: "" !important; - 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(--tabs-border-color, transparent) !important; - -moz-context-properties: fill, stroke !important; - - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; - } - - :root[gtktiledwindow="true"][lwtheme="true"] tab[visuallyselected] > stack::before, - :root:not([gtktiledwindow="true"]) tab[visuallyselected] > stack::before { - left: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)) !important; - background-image: url(./icons/tab-bottom-corner-left.svg); - } - :root[gtktiledwindow="true"][lwtheme="true"] tab[visuallyselected] > stack::after, - :root:not([gtktiledwindow="true"]) tab[visuallyselected] > stack::after { - left: auto; - right: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); - background-image: url(./icons/tab-bottom-corner-right.svg); - } - /** Unselected Tab - Divide line ********************************************/ .tabbrowser-tab[first-visible-tab]::before, .tabbrowser-tab::after, From c509bb37a22190381ba5364730d65323dae2428c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 25 Aug 2021 16:36:31 +0900 Subject: [PATCH 45/63] Fix: photon style conflict #192 --- userChrome.css | 59 -------------------------------------------------- 1 file changed, 59 deletions(-) diff --git a/userChrome.css b/userChrome.css index ccdde24..a8c9694 100644 --- a/userChrome.css +++ b/userChrome.css @@ -884,7 +884,6 @@ border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; } -<<<<<<< HEAD .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { /* Photon like color Default: var(--tab-line-color, rgb(10, 132, 255)) @@ -907,64 +906,6 @@ } .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); */ -======= - /** Selected Tab - Bottom Rounded Corner ************************************/ - #tabbrowser-tabs { - --tab-corner-rounding: 4px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 1px; - --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 { - /* 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(--tabs-border-color, transparent) !important; - -moz-context-properties: fill, stroke !important; - - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; - } - - tab[visuallyselected] > stack::before { - left: var(--tab-corner-position) !important; - background-image: url(./icons/tab-bottom-corner-left.svg); - } - tab[visuallyselected] > stack::after { - left: auto; - right: var(--tab-corner-position); - background-image: url(./icons/tab-bottom-corner-right.svg); - } - - @media (-moz-gtk-csd-available) { - /* Don't enabled at GTK */ - :root:not([customizing="true"])[lwtheme="true"] tab[visuallyselected] > stack::before, - :root:not([customizing="true"])[lwtheme="true"] tab[visuallyselected] > stack::after { - content: "" !important; - } - } - @media not all and (-moz-gtk-csd-available) { - :root:not([customizing="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]) tab[visuallyselected] > stack::after { - content: "" !important; - } - } - - /** Unselected Tab - Divide line ********************************************/ - #tabbrowser-arrowscrollbox { - position: absolute; ->>>>>>> master } /* Remove side's background color border */ From 55f4a3a87b480ca2315e3ca9bac20b07f60ec201 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 27 Aug 2021 14:51:10 +0900 Subject: [PATCH 46/63] Fix: Photon like contextline - prevent identity color flashing #124 --- userChrome.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/userChrome.css b/userChrome.css index a8c9694..83f4092 100644 --- a/userChrome.css +++ b/userChrome.css @@ -900,6 +900,12 @@ background-color: rgba(255,255,255,.2) !important; } + /* Prevent identitiy color flashing */ + .tabbrowser-tab[usercontextid] .tab-context-line { + --identity-icon-color: none; + } + + /* Animation */ .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line { opacity: 0 !important; transform: scaleX(0) !important; From 7b39b306fd17ef6261198908db4069f0fc2297e4 Mon Sep 17 00:00:00 2001 From: BlaCk_Void Date: Sat, 28 Aug 2021 18:04:03 +0900 Subject: [PATCH 47/63] Fix: Photon Stlye's Unselected tab - Remove first visible tab's left border #195 --- userChrome.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index 83f4092..970fd4e 100644 --- a/userChrome.css +++ b/userChrome.css @@ -945,9 +945,6 @@ .tabbrowser-tab::before { margin-inline-start: -1px !important; } - .tabbrowser-tab[first-visible-tab]::before { - border-right: var(--tab-divide-line) !important; - } .tabbrowser-tab[first-visible-tab]::before, :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, From 04f0cf96cc897d98c1207d5260001f01c70e5076 Mon Sep 17 00:00:00 2001 From: MS_Y Date: Mon, 27 Sep 2021 23:52:33 +0000 Subject: [PATCH 48/63] Fix: Proton style - Reduce Tab min height --- userChrome.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/userChrome.css b/userChrome.css index c402088..eba9e92 100644 --- a/userChrome.css +++ b/userChrome.css @@ -764,10 +764,10 @@ } :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 38px !important; + --tab-min-height: 36px !important; /* 38px -> 36px */ } :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 36px !important; + --tab-min-height: 29px !important; /* 36px -> 29px */ } /* Scroll Button - Size Fix */ From 084d534c89ab5f583ba89ef6aa4929ac8c44ee59 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 4 Nov 2021 08:28:23 +0000 Subject: [PATCH 49/63] Revert "Fix: Remove Tab Border - At nightly 96 #259" This reverts commit 5d9c20be6a72e052c20caddb34e2b5431ca25916. --- userChrome.css | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/userChrome.css b/userChrome.css index 87ccb60..0b32c7b 100644 --- a/userChrome.css +++ b/userChrome.css @@ -47,25 +47,6 @@ --lwt-toolbarbutton-icon-fill-attention: var(--button-primary-bgcolor, rgb(0, 120, 215)); } - /*= Remove Tab Border ======================================================*/ - /* Light Theme */ - #TabsToolbar:not([brighttext]) - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background { - border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ - } - - /* Dark Theme */ - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ - } - /*= Light Weight Theme =====================================================*/ /* Header Image */ :root[lwtheme-image] { From ebe2e089ab8f302bd0afbf020cae5379554bc1ca Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 16 Nov 2021 09:34:19 +0900 Subject: [PATCH 50/63] Fix: Animate - Reduced motion at photon-style #268 --- userChrome.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/userChrome.css b/userChrome.css index 57e21d6..7f588e5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -3208,8 +3208,10 @@ opacity: 0 !important; transform: scaleX(0) !important; } - .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); */ + @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 */ From 893cd241ff2fa601008577fd4a78b04aaebc18a2 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 16 Nov 2021 13:21:34 +0900 Subject: [PATCH 51/63] Fix: System Default Theme - `proton-style`'s seleected tab --- userChrome.css | 33 ++++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/userChrome.css b/userChrome.css index bd8e351..edd2fc7 100644 --- a/userChrome.css +++ b/userChrome.css @@ -440,6 +440,18 @@ --panel-separator-color: var(--win-border-color) !important; } + /*- Proton Tab Selected --------------------------------------------------*/ + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor)); + } + :root:not(:-moz-lwtheme) { + --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important; + } + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important; + } + /*- Menu -----------------------------------------------------------------*/ html#main-window menupopup:not(:-moz-lwtheme) { --menu-color: var(--win-text-color) !important; @@ -711,6 +723,18 @@ } } + /*- Proton Tab Selected --------------------------------------------------*/ + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog); + } + :root:not(:-moz-lwtheme) { + --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important; + } + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important; + } + /*- Toolbar --------------------------------------------------------------*/ :root:not(:-moz-lwtheme) #navigator-toolbox, :root[lwt-default-theme-in-dark-mode] #navigator-toolbox { @@ -768,15 +792,6 @@ } /* Hard Coded */ - :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] - #tabbrowser-tabs:not([movingtab]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab - > .tab-stack - > .tab-background[selected="true"] { - background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; - } - :root:not(:-moz-lwtheme) #tabs-newtab-button:hover, :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before, :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after, From e6df58fb93cce4422c35c4e4c656f378024ef679 Mon Sep 17 00:00:00 2001 From: andmagdo <62532857+andmagdo@users.noreply.github.com> Date: Fri, 17 Dec 2021 14:19:19 -0600 Subject: [PATCH 52/63] Fix: SUMO and AMO darkmode fixes (#295) * Another SUMO Fix, now with dialog menu * AMO Fixes (only the /developers/ pages) * AMO fixes --- userContent.css | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/userContent.css b/userContent.css index def0389..f093f73 100644 --- a/userContent.css +++ b/userContent.css @@ -634,6 +634,23 @@ .blogpost-nav-arrow-right .cls-1 { stroke: var(--in-content-text-color) !important; } + + /* /developers/ */ + .DevHub-Navigation { + background: var(--in-content-page-background) !important + } + .DevHub-Navigation.scheme-light ul li a { + color: var(--in-content-page-color) !important; + } + .DevHub-content-copy h2, + .content p { + color: var(--in-content-page-color) !important; + } + .DevHub-callout-box { + background: var(--in-content-box-background) !important; + color: var(--in-content-page-color) !important; + } + } /*= Support.org ============================================================*/ @@ -735,6 +752,13 @@ color: var(--in-content-page-color) !important; background: var(--in-content-page-background) !important; } + .mzp-c-menu-list-list, .mzp-c-menu-list-list:hover { + color: var(--in-content-page-color) !important; + background: var(--in-content-box-background) !important; + } + .mzp-c-menu-list-item :focus, .mzp-c-menu-list-item :hover { + background: var(--in-content-button-background-hover) !important; + } /* Fill */ .sumo-nav--logo, @@ -786,6 +810,9 @@ box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12), 0 8px 12px 1px rgba(82, 82, 94, 0.04) !important; } + .mzp-c-modal-close .mzp-c-modal-button-close{ + filter: invert(0.5); + } } /*= Accounts.com ===========================================================*/ @@ -867,6 +894,11 @@ .hover\:bg-grey-100:hover { background: var(--in-content-button-background-hover) !important; } + .text-blue-500 .cta-neutral, + .text-blue-500 .bg-grey-50, + .text-blue-500 .hover\:bg-grey-100 { + background: var(--in-content-button-background) !important; + } .hover\:bg-grey-200:hover { background: var(--in-content-button-background-active) !important; } @@ -882,6 +914,9 @@ .tooltip::before { background: var(--in-content-danger-button-background) !important; } + .flex .flex-wrap { + background: var(--in-content-page-background) + } /* Fill */ .dismiss, From 17062613adf2b21c3397f12ba84bd8309b858c93 Mon Sep 17 00:00:00 2001 From: black7375 Date: Fri, 17 Dec 2021 20:19:46 +0000 Subject: [PATCH 53/63] Clean: Prettified Code! --- userContent.css | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/userContent.css b/userContent.css index f093f73..4d4db8a 100644 --- a/userContent.css +++ b/userContent.css @@ -634,10 +634,10 @@ .blogpost-nav-arrow-right .cls-1 { stroke: var(--in-content-text-color) !important; } - + /* /developers/ */ .DevHub-Navigation { - background: var(--in-content-page-background) !important + background: var(--in-content-page-background) !important; } .DevHub-Navigation.scheme-light ul li a { color: var(--in-content-page-color) !important; @@ -650,7 +650,6 @@ background: var(--in-content-box-background) !important; color: var(--in-content-page-color) !important; } - } /*= Support.org ============================================================*/ @@ -752,11 +751,13 @@ color: var(--in-content-page-color) !important; background: var(--in-content-page-background) !important; } - .mzp-c-menu-list-list, .mzp-c-menu-list-list:hover { + .mzp-c-menu-list-list, + .mzp-c-menu-list-list:hover { color: var(--in-content-page-color) !important; background: var(--in-content-box-background) !important; } - .mzp-c-menu-list-item :focus, .mzp-c-menu-list-item :hover { + .mzp-c-menu-list-item :focus, + .mzp-c-menu-list-item :hover { background: var(--in-content-button-background-hover) !important; } @@ -810,8 +811,8 @@ box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12), 0 8px 12px 1px rgba(82, 82, 94, 0.04) !important; } - .mzp-c-modal-close .mzp-c-modal-button-close{ - filter: invert(0.5); + .mzp-c-modal-close .mzp-c-modal-button-close { + filter: invert(0.5); } } @@ -915,7 +916,7 @@ background: var(--in-content-danger-button-background) !important; } .flex .flex-wrap { - background: var(--in-content-page-background) + background: var(--in-content-page-background); } /* Fill */ From 89f6bede6ece0caec061ea36d0a13b302dfc807c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 18 Dec 2021 21:01:17 +0900 Subject: [PATCH 54/63] Clean: usercontents --- userContent.css | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/userContent.css b/userContent.css index 4d4db8a..8ddbb3d 100644 --- a/userContent.css +++ b/userContent.css @@ -639,9 +639,7 @@ .DevHub-Navigation { background: var(--in-content-page-background) !important; } - .DevHub-Navigation.scheme-light ul li a { - color: var(--in-content-page-color) !important; - } + .DevHub-Navigation.scheme-light ul li a, .DevHub-content-copy h2, .content p { color: var(--in-content-page-color) !important; @@ -756,8 +754,8 @@ color: var(--in-content-page-color) !important; background: var(--in-content-box-background) !important; } - .mzp-c-menu-list-item :focus, - .mzp-c-menu-list-item :hover { + .mzp-c-menu-list-item:focus, + .mzp-c-menu-list-item:hover { background: var(--in-content-button-background-hover) !important; } @@ -777,7 +775,8 @@ .search-button { filter: invert(95%) !important; } - button.markup-toolbar-button { + button.markup-toolbar-button, + .mzp-c-modal-close .mzp-c-modal-button-close { /*using 0.5 because in middle*/ filter: invert(0.5) !important; } @@ -811,9 +810,6 @@ box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12), 0 8px 12px 1px rgba(82, 82, 94, 0.04) !important; } - .mzp-c-modal-close .mzp-c-modal-button-close { - filter: invert(0.5); - } } /*= Accounts.com ===========================================================*/ @@ -871,6 +867,9 @@ } /* Background */ + .flex .flex-wrap { + background: var(--in-content-page-background); + } .password-row .show-password-label { background-color: unset !important; } @@ -915,9 +914,6 @@ .tooltip::before { background: var(--in-content-danger-button-background) !important; } - .flex .flex-wrap { - background: var(--in-content-page-background); - } /* Fill */ .dismiss, From f2bc6b5b862ac61dad5494607c727d304b1eea39 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 18 Dec 2021 21:01:31 +0900 Subject: [PATCH 55/63] Add: New contributor @andmagdo #292 --- CREDITS | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CREDITS b/CREDITS index 529b09e..2c8e96d 100644 --- a/CREDITS +++ b/CREDITS @@ -119,6 +119,9 @@ N: Ajith-stark E: ajith.kum.12342@gmail.com W: https://github.com/Ajith-stark +N: Andmagdo +W: https://github.com/andmagdo + N: badprogramshere W: https://github.com/badprogramshere From 0cf4af2846656d1d477a84b8bc455ce9ff3f688d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 18 Dec 2021 21:09:36 +0900 Subject: [PATCH 56/63] Fix: compile for scss Ref https://github.com/black7375/Firefox-UI-Fix/commit/dcb1e6f5ece92730aec17ef992e14a212d9ee503 --- userChrome.css | 10 +++++++--- userContent.css | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/userChrome.css b/userChrome.css index bc1093d..f2feb11 100644 --- a/userChrome.css +++ b/userChrome.css @@ -6,8 +6,12 @@ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } -@media not all and ((-moz-os-version: windows-win7) or (-moz-os-version: windows-win8) or (-moz-gtk-csd-available)) { - /* Level 4 */ +@media (-moz-os-version: windows-win10) { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox { + background-color: var(--lwt-accent-color) !important; + } +} +@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } @@ -2059,7 +2063,7 @@ browser[type="content"] > html { --organizer-pane-field-border-color: ThreeDShadow; } - @media not (prefers-contrast) { + @media not all and (prefers-contrast) { :root { --organizer-color: var(--in-content-page-color); --organizer-deemphasized-color: var(--in-content-deemphasized-text); diff --git a/userContent.css b/userContent.css index 8ddbb3d..2fb1f2e 100644 --- a/userContent.css +++ b/userContent.css @@ -1807,7 +1807,7 @@ --organizer-pane-field-border-color: ThreeDShadow; } - @media not (prefers-contrast) { + @media not all and (prefers-contrast) { :root { --organizer-color: var(--in-content-page-color); --organizer-deemphasized-color: var(--in-content-deemphasized-text); From a4d7f5b4ad70934605c5802cb98bb7c0377c55c7 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 18 Dec 2021 21:12:40 +0900 Subject: [PATCH 57/63] Fix: for SASS compile Ref https://github.com/black7375/Firefox-UI-Fix/commit/dcb1e6f5ece92730aec17ef992e14a212d9ee503 --- userChrome.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index af1abf3..ed92ad8 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1056,7 +1056,7 @@ html#main-window menupopup { :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), /* Legacy */ :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), /* Legacy */ :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), -:root:is[[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { +:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; --arrowpanel-background: var( --toolbar-bgcolor, From 13acf49ac8ea21e0ad480ab24c051de29266d8ab Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 23 Dec 2021 13:41:31 +0900 Subject: [PATCH 58/63] Add: Option - Original --- user.js | 6 ++++- userChrome.css | 59 ++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 53 insertions(+), 12 deletions(-) diff --git a/user.js b/user.js index e526e39..706f186 100644 --- a/user.js +++ b/user.js @@ -1,4 +1,4 @@ -// ** Theme Related Options **************************************************** +// ** Theme Default Options **************************************************** // userchrome.css usercontent.css activate user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); @@ -26,6 +26,10 @@ user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar" // Browser Theme Based Scheme - Will be activate 95 Above // user_pref("layout.css.prefers-color-scheme.content-override", 3); +// ** Theme Related Options **************************************************** +user_pref("userChrome.tab.original", true); // Original +user_pref("userChrome.tab.connect_to_window", true); // Original, Photon + // ** Useful Options *********************************************************** // Integrated calculator at urlbar user_pref("browser.urlbar.suggest.calculator", true); diff --git a/userChrome.css b/userChrome.css index ed92ad8..71518f3 100644 --- a/userChrome.css +++ b/userChrome.css @@ -55,6 +55,8 @@ } /*= Remove Tab Border ========================================================*/ +@supports -moz-bool-pref("userChrome.tab.connect_to_window") { + /* TARGET: original, photon */ /* Light Theme */ #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) @@ -72,6 +74,7 @@ > .tab-background:-moz-lwtheme { border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ } +} /*= Light Weight Theme =======================================================*/ /* Header Image */ @@ -819,6 +822,7 @@ } /* Hard Coded */ + @supports -moz-bool-pref("userChrome.tab.connect_to_window") { :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -833,6 +837,7 @@ > .tab-background[selected="true"] { background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; } + } :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before, :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after, @@ -2702,10 +2707,14 @@ menuitem.openintabs-menuitem, /** Reduce Padding ************************************************************/ /*= Root - Reduce Padding ====================================================*/ +@supports -moz-bool-pref("userChrome.tab.original") { :root { /* Tab Bar */ --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */ --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ +} +} +:root { --inline-tab-padding: 6px !important; /* Original: 8px */ /* Panel */ @@ -2825,6 +2834,7 @@ menuitem.openintabs-menuitem, --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ } +@supports -moz-bool-pref("userChrome.tab.original") { .toolbar-items, .tabbrowser-tab { --tabbar-max-height: 38px; @@ -2838,6 +2848,7 @@ menuitem.openintabs-menuitem, :root[uidensity="touch"] .tabbrowser-tab { --tabbar-max-height: 45px; } +} /* Scroll Button - Size Fix */ :root #tabbrowser-arrowscrollbox { @@ -3127,6 +3138,7 @@ menupopup > menu { } /** Tab Bar - 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; margin-bottom: 0px !important; @@ -3148,8 +3160,10 @@ menupopup > menu { #tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) { overflow: hidden; } +} /** Selected Tab - Color like toolbar *****************************************/ +@supports -moz-bool-pref("userChrome.tab.connect_to_window") { :root:not(:-moz-lwtheme) { /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ @@ -3164,8 +3178,9 @@ menupopup > menu { background-image: linear-gradient(transparent, transparent), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; } +} -/* Multi Selected Color */ +/** Multi Selected Color - More Contrast **************************************/ #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -3186,6 +3201,7 @@ menupopup > menu { } /** Selected Tab - Box Shadow *************************************************/ +@supports -moz-bool-pref("userChrome.tab.original") { #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected="true"]:not(:focus) @@ -3207,8 +3223,10 @@ menupopup > menu { #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; } +} /** Selected Tab - Bottom Rounded Corner **************************************/ +@supports -moz-bool-pref("userChrome.tab.original") { #tabbrowser-tabs { --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ --tab-corner-padding: 0px; @@ -3270,12 +3288,16 @@ tab[visuallyselected] > stack::after { stroke: transparent !important; } } +} /** Unselected Tab - Divide line **********************************************/ +@supports -moz-bool-pref("userChrome.tab.original") { #tabbrowser-arrowscrollbox { position: absolute; } +} +@supports -moz-bool-pref("userChrome.tab.original") { .tab-background::before, #tabs-newtab-button::before { /* Box Model */ @@ -3295,12 +3317,27 @@ tab[visuallyselected] > stack::after { opacity: 0; background-color: var(--toolbarseparator-color); } +} -.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before, +.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { + opacity: var(--tab-separator-opacity); +} +@supports -moz-bool-pref("userChrome.tab.original") { #tabs-newtab-button:not(:hover, [open])::before { 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; +} +@supports -moz-bool-pref("userChrome.tab.original") { #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab @@ -3311,23 +3348,21 @@ tab[visuallyselected] > stack::after { .tab-background::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) - ~ #tabs-newtab-button::before, -#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 { + ~ #tabs-newtab-button::before { opacity: 0 !important; } +} /* Animate */ @media (prefers-reduced-motion: no-preference) { - .tab-background::before, + .tab-background::before { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } + @supports -moz-bool-pref("userChrome.tab.original") { #tabs-newtab-button::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } + } } /* Latest Tab & New tab margin */ @@ -3336,6 +3371,7 @@ tab[visuallyselected] > stack::after { } /* New tab button - Looks like tab ********************************************/ +@supports -moz-bool-pref("userChrome.tab.original") { #tabs-newtab-button { /* Original: margin: 0 0 var(--tabs-navbar-shadow-size) !important @@ -3398,6 +3434,7 @@ tab[visuallyselected] > stack::after { fill: var(--toolbarbutton-icon-fill); fill-opacity: var(--toolbarbutton-icon-fill-opacity); } +} /* Unloaded Tab - Contents Opacity ********************************************/ #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content { From a4d980ecd7d6ee8fcd5a89001dffabda0efe928f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 23 Dec 2021 13:46:23 +0900 Subject: [PATCH 59/63] Clean: Option - Original Indent --- userChrome.css | 458 +++++++++++++++++++++++++------------------------ 1 file changed, 232 insertions(+), 226 deletions(-) diff --git a/userChrome.css b/userChrome.css index 71518f3..41966b5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -57,23 +57,23 @@ /*= Remove Tab Border ========================================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { /* TARGET: original, photon */ -/* Light Theme */ -#TabsToolbar:not([brighttext]) - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background { - border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ -} + /* Light Theme */ + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ + } -/* Dark Theme */ -#TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ -} + /* Dark Theme */ + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ + } } /*= Light Weight Theme =======================================================*/ @@ -823,7 +823,7 @@ /* Hard Coded */ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { - :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -835,8 +835,8 @@ > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"] { - background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; - } + background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + } } :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before, @@ -2708,11 +2708,11 @@ menuitem.openintabs-menuitem, /** Reduce Padding ************************************************************/ /*= Root - Reduce Padding ====================================================*/ @supports -moz-bool-pref("userChrome.tab.original") { -:root { - /* Tab Bar */ - --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */ - --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ -} + :root { + /* Tab Bar */ + --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */ + --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ + } } :root { --inline-tab-padding: 6px !important; /* Original: 8px */ @@ -2835,19 +2835,19 @@ menuitem.openintabs-menuitem, } @supports -moz-bool-pref("userChrome.tab.original") { -.toolbar-items, -.tabbrowser-tab { - --tabbar-max-height: 38px; - max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar)); -} -:root[uidensity="compact"] .toolbar-items, -:root[uidensity="compact"] .tabbrowser-tab { - --tabbar-max-height: 36px; -} -:root[uidensity="touch"] .toolbar-items, -:root[uidensity="touch"] .tabbrowser-tab { - --tabbar-max-height: 45px; -} + .toolbar-items, + .tabbrowser-tab { + --tabbar-max-height: 38px; + max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar)); + } + :root[uidensity="compact"] .toolbar-items, + :root[uidensity="compact"] .tabbrowser-tab { + --tabbar-max-height: 36px; + } + :root[uidensity="touch"] .toolbar-items, + :root[uidensity="touch"] .tabbrowser-tab { + --tabbar-max-height: 45px; + } } /* Scroll Button - Size Fix */ @@ -3139,45 +3139,45 @@ menupopup > menu { /** Tab Bar - 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; - margin-bottom: 0px !important; -} + .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-content { + margin-top: var(--tab-block-margin); + } -.tab-stack { - margin-top: 0px !important; - margin-bottom: 0px !important; -} + .tab-stack { + margin-top: 0px !important; + margin-bottom: 0px !important; + } -/* Remove line at Toolbar's top */ -#tabbrowser-tabs { - z-index: 1 !important; -} -#tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) { - overflow: hidden; -} + /* Remove line at Toolbar's top */ + #tabbrowser-tabs { + z-index: 1 !important; + } + #tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) { + overflow: hidden; + } } /** Selected Tab - Color like toolbar *****************************************/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { -:root:not(:-moz-lwtheme) { - /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ - --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ -} -#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) + :root:not(:-moz-lwtheme) { + /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ + --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ + } + #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; -} + background-image: linear-gradient(transparent, transparent), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; + } } /** Multi Selected Color - More Contrast **************************************/ @@ -3202,130 +3202,136 @@ menupopup > menu { /** Selected Tab - Box Shadow *************************************************/ @supports -moz-bool-pref("userChrome.tab.original") { -#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)) + #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; -} + 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; + } -/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ -#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { - z-index: 0 !important; -} + /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ + #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + z-index: 0 !important; + } } /** Selected Tab - Bottom Rounded Corner **************************************/ @supports -moz-bool-pref("userChrome.tab.original") { -#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)); -} + #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; + :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; + /* Box */ + display: block !important; + position: absolute !important; + z-index: 1 !important; - /* Shape */ - width: var(--tab-corner-rounding) !important; - height: 100% !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; + /* 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"]) #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; -} + /* Image */ + background-size: var(--tab-corner-rounding); + background-repeat: no-repeat; + background-position-y: bottom; + } + :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; + } -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"); -} + tab[visuallyselected] > stack::before { + left: var(--tab-corner-position) !important; + background-image: url("./icons/tab-bottom-corner-left.svg"); + } + tab[visuallyselected] > stack::after { + left: auto; + right: var(--tab-corner-position); + background-image: url("./icons/tab-bottom-corner-right.svg"); + } -@media (-moz-gtk-csd-available) { - /* Fill color for GTK */ - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after { - /* As GTK Toolbar's background-color + backround-image + @media (-moz-gtk-csd-available) { + /* Fill color for GTK */ + :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before, + :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after { + /* As GTK Toolbar's background-color + 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; + 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; + } } - :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; - } -} } /** Unselected Tab - Divide line **********************************************/ @supports -moz-bool-pref("userChrome.tab.original") { -#tabbrowser-arrowscrollbox { - position: absolute; -} + #tabbrowser-arrowscrollbox { + position: absolute; + } } @supports -moz-bool-pref("userChrome.tab.original") { -.tab-background::before, -#tabs-newtab-button::before { - /* Box Model */ - content: ""; - display: block; - position: absolute; + .tab-background::before, + #tabs-newtab-button::before { + /* Box Model */ + content: ""; + display: block; + position: absolute; - /* Position */ - top: 50%; - transform: translateX(-2.5px) translateY(calc(-50% + 1px)); + /* Position */ + top: 50%; + transform: translateX(-2.5px) translateY(calc(-50% + 1px)); - /* Bar shape */ - width: 1px; - height: 20px; + /* Bar shape */ + width: 1px; + height: 20px; - /* Bar Color */ - opacity: 0; - background-color: var(--toolbarseparator-color); -} + /* Bar Color */ + opacity: 0; + background-color: var(--toolbarseparator-color); + } } .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { opacity: var(--tab-separator-opacity); } @supports -moz-bool-pref("userChrome.tab.original") { -#tabs-newtab-button:not(:hover, [open])::before { - opacity: var(--tab-separator-opacity); -} + #tabs-newtab-button:not(:hover, [open])::before { + opacity: var(--tab-separator-opacity); + } } #navigator-toolbox:not([movingtab]) @@ -3338,19 +3344,19 @@ tab[visuallyselected] > stack::after { opacity: 0 !important; } @supports -moz-bool-pref("userChrome.tab.original") { -#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 { - opacity: 0 !important; -} + #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 { + opacity: 0 !important; + } } /* Animate */ @@ -3359,9 +3365,9 @@ tab[visuallyselected] > stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @supports -moz-bool-pref("userChrome.tab.original") { - #tabs-newtab-button::before { - transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ - } + #tabs-newtab-button::before { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } } } @@ -3372,68 +3378,68 @@ tab[visuallyselected] > stack::after { /* New tab button - Looks like tab ********************************************/ @supports -moz-bool-pref("userChrome.tab.original") { -#tabs-newtab-button { - /* Original: + #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 */ + --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; + /* 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 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 */ - 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) { - :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, - -moz-accent-color-foreground 10%, - transparent - ) !important; /* Hardcorded for compatibility */ + #tabs-newtab-button:hover { + fill: var(--toolbarbutton-hover-background) !important; } - :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, - -moz-accent-color-foreground 15%, - transparent - ) !important; /* Hardcorded for compatibility */ + #tabs-newtab-button:hover:active { + fill: var(--toolbarbutton-active-background) !important; + } + @media (-moz-windows-accent-color-in-titlebar) { + :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, + -moz-accent-color-foreground 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, + -moz-accent-color-foreground 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) */ + /* '+'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); -} + 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); + } } /* Unloaded Tab - Contents Opacity ********************************************/ From 432bbc8cca2358f3cc5cd44cb183bc8d07d1a71c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 24 Dec 2021 09:14:58 +0900 Subject: [PATCH 60/63] Clean: Option - Proton Indent --- userChrome.css | 66 +++++++++++++++++++++++++------------------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/userChrome.css b/userChrome.css index 40e1cf3..75c33b7 100644 --- a/userChrome.css +++ b/userChrome.css @@ -2873,12 +2873,12 @@ menuitem.openintabs-menuitem, } } @supports -moz-bool-pref("userChrome.tab.proton") { -:root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px !important; /* 38px -> 36px */ -} -:root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px !important; /* 36px -> 29px */ -} + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 36px !important; /* 38px -> 36px */ + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px !important; /* 36px -> 29px */ + } } /* Scroll Button - Size Fix */ @@ -3378,13 +3378,13 @@ menupopup > menu { } @supports -moz-bool-pref("userChrome.tab.proton") { -.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; -} + .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 { @@ -3396,12 +3396,12 @@ menupopup > menu { } } @supports -moz-bool-pref("userChrome.tab.proton") { -#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); -} + #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]) @@ -3430,8 +3430,8 @@ menupopup > menu { } @supports -moz-bool-pref("userChrome.tab.proton") { .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) - + .tabbrowser-tab:not([visuallyselected]) - .tab-background::before { + + .tabbrowser-tab:not([visuallyselected]) + .tab-background::before { opacity: 0 !important; } } @@ -3447,9 +3447,9 @@ menupopup > menu { } } @supports -moz-bool-pref("userChrome.tab.proton") { - #tabbrowser-arrowscrollbox:not([overflowing]) - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + #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) */ } } @@ -3528,16 +3528,16 @@ menupopup > menu { /* New tab button - Smaller button ********************************************/ @supports -moz-bool-pref("userChrome.tab.proton") { -:root:not([uidensity="touch"]) #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 1px); -} + :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; -} + :root:not([uidensity="compact"]) #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 2px; + } + :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { + margin-left: 1px; + } } /* Unloaded Tab - Contents Opacity ********************************************/ From 87f3f28cfb2d34bcfee9fb451c77e450e5074445 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 24 Dec 2021 14:59:33 +0900 Subject: [PATCH 61/63] Clean: comment lines --- userChrome.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/userChrome.css b/userChrome.css index 75c33b7..4d41c23 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1033,7 +1033,7 @@ } } -/*== Menu color =============================================================*/ +/*== Menu Color =============================================================*/ html#main-window menupopup { /* is same as toolbar color https://github.com/mozilla/gecko-dev/blob/master/toolkit/themes/windows/global/global.css#L17-L67 */ --menu-color: var(--arrowpanel-color, var(--in-content-page-color)) !important; @@ -2157,7 +2157,7 @@ browser[type="content"] > html { } } - /*- Toolbar & Menus ----------------------------------------------------*/ + /*- Toolbar & Menus ------------------------------------------------------*/ #placesToolbar { appearance: none !important; background-color: var(--organizer-toolbar-background) !important; @@ -3983,7 +3983,7 @@ menupopup > menu { list-style-image: url("./icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */ } -/*= Menubar - Icons ===========================================*/ +/*= Menubar - Icons ==========================================================*/ @-moz-document url("chrome://browser/content/places/places.xhtml") { @media (-moz-gtk-csd-available) { From e92996c3edbcf9af0c75cb2deac42662349e73bf Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 24 Dec 2021 15:05:01 +0900 Subject: [PATCH 62/63] Fix: Proton tab option --- userChrome.css | 40 ++++++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/userChrome.css b/userChrome.css index 4d41c23..9085141 100644 --- a/userChrome.css +++ b/userChrome.css @@ -487,15 +487,17 @@ } /*- Proton Tab Selected ----------------------------------------------------*/ - :root:not(:-moz-lwtheme), - :root[lwt-default-theme-in-dark-mode] { - --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor)); - } - :root:not(:-moz-lwtheme) { - --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important; - } - :root[lwt-default-theme-in-dark-mode] { - --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important; + @supports -moz-bool-pref("userChrome.tab.proton") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor)); + } + :root:not(:-moz-lwtheme) { + --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important; + } + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important; + } } /*- Menu -------------------------------------------------------------------*/ @@ -778,15 +780,17 @@ } /*- Proton Tab Selected ----------------------------------------------------*/ - :root:not(:-moz-lwtheme), - :root[lwt-default-theme-in-dark-mode] { - --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog); - } - :root:not(:-moz-lwtheme) { - --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important; - } - :root[lwt-default-theme-in-dark-mode] { - --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important; + @supports -moz-bool-pref("userChrome.tab.proton") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --mac-proton-tab-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 20%, -moz-dialog); + } + :root:not(:-moz-lwtheme) { + --tab-selected-color: var(--mac-proton-tab-selected-bgcolor) !important; + } + :root[lwt-default-theme-in-dark-mode] { + --lwt-selected-tab-background-color: var(--mac-proton-tab-selected-bgcolor) !important; + } } /*- Toolbar ----------------------------------------------------------------*/ From 4e4a59c58497c93fa649778ef4b7c29d5df7917e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 25 Dec 2021 20:39:57 +0900 Subject: [PATCH 63/63] Clean: Option - Photon style indent --- userChrome.css | 454 ++++++++++++++++++++++++------------------------- 1 file changed, 227 insertions(+), 227 deletions(-) diff --git a/userChrome.css b/userChrome.css index 1000177..3ec021b 100644 --- a/userChrome.css +++ b/userChrome.css @@ -2778,12 +2778,12 @@ menuitem.openintabs-menuitem, /* Fix Tab bar button radious */ @supports -moz-bool-pref("userChrome.tab.photon") { -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, -#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack, -.tab-close-button { - --tab-border-radius: 4px !important; -} + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, + #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack, + .tab-close-button { + --tab-border-radius: 4px !important; + } } /*= Tab Bar - Reduce Width, Show more tabs ===================================*/ @@ -2820,18 +2820,18 @@ menuitem.openintabs-menuitem, } @supports -moz-bool-pref("userChrome.tab.shareProton") { -#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab[first-visible-unpinned-tab] { - margin-inline-start: 1px !important; -} + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[first-visible-unpinned-tab] { + margin-inline-start: 1px !important; + } } @supports -moz-bool-pref("userChrome.tab.photon") { -#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab[first-visible-unpinned-tab] { - margin-inline-start: 0 !important; -} + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[first-visible-unpinned-tab] { + margin-inline-start: 0 !important; + } } :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox { @@ -2854,14 +2854,14 @@ menuitem.openintabs-menuitem, /* Tab - Max Size */ @supports -moz-bool-pref("userChrome.tab.shareProton") { -:root { - --tab-max-width: 240px; -} + :root { + --tab-max-width: 240px; + } } @supports -moz-bool-pref("userChrome.tab.photon") { -:root { - --tab-max-width: 225px; -} + :root { + --tab-max-width: 225px; + } } .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ @@ -2869,17 +2869,17 @@ menuitem.openintabs-menuitem, /* neighbouring tabs should "pinch" together */ @supports -moz-bool-pref("userChrome.tab.shareProton") { -.tabbrowser-tab { - padding-inline: 1px !important; -} -.tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -0.5px !important; -} + .tabbrowser-tab { + padding-inline: 1px !important; + } + .tabbrowser-tab:not([last-visible-tab]) { + margin-inline-end: -0.5px !important; + } } @supports -moz-bool-pref("userChrome.tab.photon") { -.tabbrowser-tab { - padding-inline: 0 !important; -} + .tabbrowser-tab { + padding-inline: 0 !important; + } } /*= Tab Bar - Reduce Height, Show more contents ==============================*/ @@ -2897,40 +2897,40 @@ menuitem.openintabs-menuitem, /* Toolbar Height */ @supports -moz-bool-pref("userChrome.tab.shareProton") { -:root:not([uidensity="touch"]) #TabsToolbar { - --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ -} + :root:not([uidensity="touch"]) #TabsToolbar { + --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ + } -:root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px !important; /* 38px -> 36px */ -} -:root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px !important; /* 36px -> 29px */ -} + :root:not([uidensity]) #TabsToolbar { + --tab-min-height: 36px !important; /* 38px -> 36px */ + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px !important; /* 36px -> 29px */ + } } @supports -moz-bool-pref("userChrome.tab.photon") { -#TabsToolbar { - --tab-min-height: 33px !important; - --toolbarbutton-inner-padding: unset !important; -} -:root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px !important; -} -:root[uidensity="touch"] #TabsToolbar { - --tab-min-height: 41px !important; -} -#tabbrowser-tabs, -#tabbrowser-arrowscrollbox, -#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { - min-height: var(--tab-min-height) !important; -} + #TabsToolbar { + --tab-min-height: 33px !important; + --toolbarbutton-inner-padding: unset !important; + } + :root[uidensity="compact"] #TabsToolbar { + --tab-min-height: 29px !important; + } + :root[uidensity="touch"] #TabsToolbar { + --tab-min-height: 41px !important; + } + #tabbrowser-tabs, + #tabbrowser-arrowscrollbox, + #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + min-height: var(--tab-min-height) !important; + } -/* Top Margin */ -.tab-background, -.tab-content { - margin-top: 0 !important; -} + /* Top Margin */ + .tab-background, + .tab-content { + margin-top: 0 !important; + } } @supports -moz-bool-pref("userChrome.tab.original") { @@ -3405,83 +3405,83 @@ menupopup > menu { /** Selected Tab - Photon like contextline ************************************/ @supports -moz-bool-pref("userChrome.tab.photon") { -:root[lwtheme-mozlightdark] #tabbrowser-tabs { - --tab-line-color: rgb(10, 132, 255) !important; -} -@media (-moz-gtk-csd-available) { - :root[lwtheme-mozlightdark]:not(:-moz-lwtheme) #tabbrowser-tabs { - --tab-line-color: Highlight !important; /* -moz-accent-color */ + :root[lwtheme-mozlightdark] #tabbrowser-tabs { + --tab-line-color: rgb(10, 132, 255) !important; + } + @media (-moz-gtk-csd-available) { + :root[lwtheme-mozlightdark]: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; -} + .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 + .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) */ - background-color: var(--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); */ + background-color: var(--tab-line-color, rgb(10, 132, 255)) !important; } -} -/* 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) */ -} + .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; + } -/* Container Tab */ -.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line { - margin: unset !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; + } } /** Unselected Tab - Dynamic Separator ****************************************/ @@ -3545,9 +3545,9 @@ menupopup > menu { } @supports -moz-bool-pref("userChrome.tab.shareProton") { -.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { - opacity: var(--tab-separator-opacity); -} + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { + opacity: var(--tab-separator-opacity); + } } @supports -moz-bool-pref("userChrome.tab.original") { #tabs-newtab-button:not(:hover, [open])::before { @@ -3564,15 +3564,15 @@ menupopup > menu { } @supports -moz-bool-pref("userChrome.tab.shareProton") { -#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; -} + #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; + } } @supports -moz-bool-pref("userChrome.tab.original") { #navigator-toolbox:not([movingtab]) @@ -3600,9 +3600,9 @@ menupopup > menu { /* Animate */ @media (prefers-reduced-motion: no-preference) { @supports -moz-bool-pref("userChrome.tab.shareProton") { - .tab-background::before { - transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ - } + .tab-background::before { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } } @supports -moz-bool-pref("userChrome.tab.original") { #tabs-newtab-button::before { @@ -3620,50 +3620,50 @@ menupopup > menu { /* Latest Tab & New tab margin */ @supports -moz-bool-pref("userChrome.tab.shareProton") { -#tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { - margin-inline-end: 1px !important; -} + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[last-visible-tab] { + margin-inline-end: 1px !important; + } } /** Unselected Tab - Static Separator *****************************************/ @supports -moz-bool-pref("userChrome.tab.photon") { -.tabbrowser-tab[first-visible-tab]::before, -.tabbrowser-tab::after, -#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before { - content: ""; - display: block; -} -.tabbrowser-tab::before, -.tabbrowser-tab::after { - --tab-divide-line: 1px solid var(--lwt-background-tab-separator-color, currentColor); - border-left: var(--tab-divide-line) !important; - margin-block: 5px 4px !important; - opacity: 0.3 !important; -} -.tabbrowser-tab::before { - margin-inline-start: -1px !important; -} + .tabbrowser-tab[first-visible-tab]::before, + .tabbrowser-tab::after, + #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before { + content: ""; + display: block; + } + .tabbrowser-tab::before, + .tabbrowser-tab::after { + --tab-divide-line: 1px solid var(--lwt-background-tab-separator-color, currentColor); + border-left: var(--tab-divide-line) !important; + margin-block: 5px 4px !important; + opacity: 0.3 !important; + } + .tabbrowser-tab::before { + margin-inline-start: -1px !important; + } -.tabbrowser-tab[first-visible-tab]::before, -:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, -.tabbrowser-tab:hover::after, -#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, -.tabbrowser-tab[multiselected]::after, -#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after { - margin-top: var(--tabs-top-border-width) !important; - margin-bottom: 0 !important; -} + .tabbrowser-tab[first-visible-tab]::before, + :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, + .tabbrowser-tab:hover::after, + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, + .tabbrowser-tab[multiselected]::after, + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after { + margin-top: var(--tabs-top-border-width) !important; + margin-bottom: 0 !important; + } -/* Selected - Hide */ -.tabbrowser-tab[first-visible-tab][visuallyselected]::before, -#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, -#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, -.tabbrowser-tab[visuallyselected]::after { - border-color: var(--tabs-border-color) !important; - margin-top: 0 !important; - margin-bottom: 0 !important; - opacity: 1 !important; -} + /* Selected - Hide */ + .tabbrowser-tab[first-visible-tab][visuallyselected]::before, + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, + #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, + .tabbrowser-tab[visuallyselected]::after { + border-color: var(--tabs-border-color) !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + opacity: 1 !important; + } } /* New tab button - Looks like tab ********************************************/ @@ -3734,18 +3734,18 @@ menupopup > menu { /** New tab button - Smaller button *******************************************/ @supports -moz-bool-pref("userChrome.tab.photon") { -#tabs-newtab-button > .toolbarbutton-icon { - margin-left: 1px; + #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 */ -} + /* 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 */ + } } /* New tab button - Smaller button ********************************************/ @@ -3985,9 +3985,9 @@ menupopup > menu { /** Container Tab - Color line at icon's bottom *******************************/ @supports -moz-bool-pref("userChrome.tab.shareProton") { -.tab-context-line { - display: none; -} + .tab-context-line { + display: none; + } } .tab-content:not([titlechanged])::before { @@ -4266,31 +4266,31 @@ menupopup > menu { } @supports -moz-bool-pref("userChrome.panel.photon") { -:root { - /* Blank Menu Left Padding */ - --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px); - --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); -} -:root[uidensity="compact"] { - --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px); -} -:root[uidensity="touch"] { - --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding)); -} -:root { - /* Global */ - --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2); + :root { + /* Blank Menu Left Padding */ + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px); + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); + } + :root[uidensity="compact"] { + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px); + } + :root[uidensity="touch"] { + --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding)); + } + :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) - 2px) !important; + /* General Panel */ + --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important; + --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important; - /* Blank Menu Left Padding */ - --arrowpanel-menuimageblank-padding-horizontal: calc( - var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding) - ); - --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); -} + /* Blank Menu Left Padding */ + --arrowpanel-menuimageblank-padding-horizontal: calc( + var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding) + ); + --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px); + } } #downloadsHistory .button-text, @@ -4391,7 +4391,7 @@ menupopup > menu { } } @supports -moz-bool-pref("userChrome.panel.photon") { -#appMenu-new-tab-button2, /* Seperate */ + #appMenu-new-tab-button2, /* Seperate */ #appMenu-passwords-button, /* Seperate */ #appMenu-extensions-themes-button, #appMenu-save-file-button2, /* Seperate */ @@ -4399,13 +4399,13 @@ menupopup > menu { #appMenu-more-button2, /* Seperate */ #appMenu-help-button2, #appMenu-quit-button2 /* Seperate */ { - padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; - padding-top: var(--arrowpanel-menuitemblank-padding) !important; - padding-bottom: var(--arrowpanel-menuitemblank-padding) !important; -} -#appMenu-zoom-controls2 { - padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; -} + padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; + padding-top: var(--arrowpanel-menuitemblank-padding) !important; + padding-bottom: var(--arrowpanel-menuitemblank-padding) !important; + } + #appMenu-zoom-controls2 { + padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important; + } } #appMenu-new-window-button2 {