From 5fe20efb1b4cd7843c45464d1f63d41777b98ea8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 30 Apr 2021 09:27:24 +0900 Subject: [PATCH 1/4] Revert "Fix: remove bottom corner rounding" This reverts commit 796c8c1f4573ded949624bafce82e07bf134c5ae. --- userChrome.css | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/userChrome.css b/userChrome.css index e256967..ed7cc49 100644 --- a/userChrome.css +++ b/userChrome.css @@ -49,6 +49,43 @@ box-shadow: 0 0 1px var(--toolbar-color) !important; } + /* Selected Tab - Bottom Rounded Corner */ + tab { + --tab-corner-rounding: 8px; + --animation-speed: 0.15s; + } + + /* Bottom corner rounding for tabs, Remove this section if your tab bottom corners look bad */ + tab[visuallyselected] .tab-background::before, + tab[visuallyselected] .tab-background::after { + content: "" !important; + display: inline !important; + position: absolute !important; + width: var(--tab-corner-rounding) !important; + height: var(--tab-corner-rounding) !important; + bottom: -1px !important; + pointer-events: none !important; + background-color: transparent !important; + transition: var(--animation-speed) !important; + } + + tab[visuallyselected] .tab-background::before { + border-bottom-right-radius: var(--tab-corner-rounding) !important; + transform: translateX(calc(-1 * var(--tab-corner-rounding))) !important; + box-shadow: 0 1px 1px -1px var(--toolbar-color), /* <- Selected Box Shadow */ + 4px 4px 0px 4px var(--toolbar-bgcolor) !important; + transition: var(--animation-speed) !important; + } + + tab[visuallyselected] .tab-background::after { + border-bottom-left-radius: var(--tab-corner-rounding) !important; + right: 0px !important; + transform: translateX(calc(var(--tab-corner-rounding) + 1px)) !important; + box-shadow: -1px 0 0 -1px var(--toolbar-color), /* <- Selected Box Shadow */ + -4px 4px 0px 4px var(--toolbar-bgcolor) !important; + transition: var(--animation-speed) !important; + } + /* Unselected Tab - Divide line */ .tab-content::before, .tab-content::after { From f101f85aff30cf84536b56d4c65d77cc1463c1ea Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 30 Apr 2021 09:28:15 +0900 Subject: [PATCH 2/4] Clean: comment --- userChrome.css | 1 - 1 file changed, 1 deletion(-) diff --git a/userChrome.css b/userChrome.css index ed7cc49..9a52d1e 100644 --- a/userChrome.css +++ b/userChrome.css @@ -55,7 +55,6 @@ --animation-speed: 0.15s; } - /* Bottom corner rounding for tabs, Remove this section if your tab bottom corners look bad */ tab[visuallyselected] .tab-background::before, tab[visuallyselected] .tab-background::after { content: "" !important; From 5523c3731d0ce37aca07c9ce93afd0661baecb8d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 20 May 2021 14:20:12 +0900 Subject: [PATCH 3/4] Fix: Selected Tab - Bottom Rounded Corner's Adjsut Values --- userChrome.css | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/userChrome.css b/userChrome.css index 9a52d1e..505db7c 100644 --- a/userChrome.css +++ b/userChrome.css @@ -51,8 +51,7 @@ /* Selected Tab - Bottom Rounded Corner */ tab { - --tab-corner-rounding: 8px; - --animation-speed: 0.15s; + --tab-corner-rounding: 9px; } tab[visuallyselected] .tab-background::before, @@ -60,29 +59,29 @@ content: "" !important; display: inline !important; position: absolute !important; - width: var(--tab-corner-rounding) !important; - height: var(--tab-corner-rounding) !important; bottom: -1px !important; pointer-events: none !important; background-color: transparent !important; - transition: var(--animation-speed) !important; + transition: 0.15s !important; + z-index: -1 !important;; } tab[visuallyselected] .tab-background::before { border-bottom-right-radius: var(--tab-corner-rounding) !important; - transform: translateX(calc(-1 * var(--tab-corner-rounding))) !important; - box-shadow: 0 1px 1px -1px var(--toolbar-color), /* <- Selected Box Shadow */ - 4px 4px 0px 4px var(--toolbar-bgcolor) !important; - transition: var(--animation-speed) !important; + width: 11px !important; + height: 5px; + left: 0px; + transform: translateX(calc(-1 * var(--tab-corner-rounding) - 3px)) !important; + box-shadow: 4px 4px 0px 3.5px var(--toolbar-bgcolor) !important; } tab[visuallyselected] .tab-background::after { border-bottom-left-radius: var(--tab-corner-rounding) !important; + width: 9px !important; + height: 7px !important; right: 0px !important; - transform: translateX(calc(var(--tab-corner-rounding) + 1px)) !important; - box-shadow: -1px 0 0 -1px var(--toolbar-color), /* <- Selected Box Shadow */ - -4px 4px 0px 4px var(--toolbar-bgcolor) !important; - transition: var(--animation-speed) !important; + transform: translateX(var(--tab-corner-rounding)) !important; + box-shadow: -4px 4px 0px 4px var(--toolbar-bgcolor) !important; } /* Unselected Tab - Divide line */ From 21c1f15d5b1518ab6804cf8f62419e781ad4e523 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 20 May 2021 15:06:55 +0900 Subject: [PATCH 4/4] Fix: Selected Tab - Bottom Round Corner update again --- userChrome.css | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/userChrome.css b/userChrome.css index 505db7c..c6e43fc 100644 --- a/userChrome.css +++ b/userChrome.css @@ -60,25 +60,22 @@ display: inline !important; position: absolute !important; bottom: -1px !important; + width: 9px !important; + height: 7px !important; pointer-events: none !important; background-color: transparent !important; transition: 0.15s !important; - z-index: -1 !important;; } tab[visuallyselected] .tab-background::before { border-bottom-right-radius: var(--tab-corner-rounding) !important; - width: 11px !important; - height: 5px; - left: 0px; - transform: translateX(calc(-1 * var(--tab-corner-rounding) - 3px)) !important; - box-shadow: 4px 4px 0px 3.5px var(--toolbar-bgcolor) !important; + left: 0px !important;; + transform: translateX(calc(-1 * var(--tab-corner-rounding))) !important; + box-shadow: 4px 4px 0px 4px var(--toolbar-bgcolor) !important; } tab[visuallyselected] .tab-background::after { border-bottom-left-radius: var(--tab-corner-rounding) !important; - width: 9px !important; - height: 7px !important; right: 0px !important; transform: translateX(var(--tab-corner-rounding)) !important; box-shadow: -4px 4px 0px 4px var(--toolbar-bgcolor) !important;