From b150722bd592d6ea5c344c626a45c45b7fa86862 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 22 May 2021 21:11:40 +0900 Subject: [PATCH 1/8] Fix: Sound Tab - Busy Compatibility --- userChrome.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/userChrome.css b/userChrome.css index 288faa7..fa9e0d3 100644 --- a/userChrome.css +++ b/userChrome.css @@ -233,6 +233,22 @@ padding: 2px 0 !important; } + /* Busy - Show */ + .tab-throbber[busy], .tab-icon-pending[busy] { + opacity: 1 !important; + } + + /* Busy - Overlay Position */ + .tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { + transform: translateX(-.5px) translateY(-2.5px); + } + .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed])[busy] { + top: -3.5px !important; + inset-inline-end: -9px !important; + margin-inline-end: 9.5px !important; + padding: 1.5px !important; + } + /* Hover */ .tab-icon-overlay:not([crashed])[soundplaying]:hover, .tab-icon-overlay:not([crashed])[muted]:hover, From fb8667e51258fee689822406928cb3452cd973f9 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 22 May 2021 21:13:47 +0900 Subject: [PATCH 2/8] Fix: Tab - Max Size at touch mode --- userChrome.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/userChrome.css b/userChrome.css index fa9e0d3..9b81cfd 100644 --- a/userChrome.css +++ b/userChrome.css @@ -72,8 +72,8 @@ } /* Tab - Max Size */ - :root:not([uidensity=touch]) .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { - max-width: 240px !important; + .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { + max-width: 240px !important; /* Original: 225px */ } /* neighbouring tabs should "pinch" together */ From 4a1a796c61bf12eb81d02b6a4452f00066312931 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 22 May 2021 21:19:23 +0900 Subject: [PATCH 3/8] Add: Pinned Tab - Replace Favicon to Close Button at Selected --- userChrome.css | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/userChrome.css b/userChrome.css index 9b81cfd..694fd85 100644 --- a/userChrome.css +++ b/userChrome.css @@ -269,6 +269,51 @@ padding: 0 !important; } + /** Pinned Tab - Replace Favicon to Close Button at Selected ****************/ + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + display: -moz-box; + -moz-box-ordinal-group: 0 !important; + transform: translateX(-1px); + + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + padding: 7px !important; + } + + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content { + padding-inline: 7.5px !important; /* Original: 10px */ + } + .tabbrowser-tab[pinned][visuallyselected][busy] .tab-content { + padding-inline-end: 9.5px !important; + } + + .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + display: none; + } + + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + width: 8.5px; + } + + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content { + padding-inline-end: 0px !important; + } + + /* Sound Tab - Don't move overlay */ + .tabbrowser-tab[pinned][busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { + transform: translateX(.5px) translateY(-2px); + } + + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-overlay { + transform: translateX(-9px) translateY(-2px); + left: 0 !important; + } + + .tabbrowser-tab[pinned][busy] .tab-content { + padding-inline: 10.5px !important; /* Assume the icon size is 17px */ + } + /** Container Tab - Color line at icon's bottom *****************************/ .tab-context-line { display: none; From 866701d98679e57e83c310f7f98940cb5a1321e8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 22 May 2021 22:10:33 +0900 Subject: [PATCH 4/8] Fix: Pinned Tab - make important --- userChrome.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/userChrome.css b/userChrome.css index 694fd85..0061d41 100644 --- a/userChrome.css +++ b/userChrome.css @@ -271,7 +271,7 @@ /** Pinned Tab - Replace Favicon to Close Button at Selected ****************/ .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { - display: -moz-box; + display: -moz-box !important; -moz-box-ordinal-group: 0 !important; transform: translateX(-1px); @@ -289,11 +289,11 @@ } .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { - display: none; + display: none !important; } .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { - width: 8.5px; + width: 8.5px !important; } .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content { @@ -302,11 +302,11 @@ /* Sound Tab - Don't move overlay */ .tabbrowser-tab[pinned][busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { - transform: translateX(.5px) translateY(-2px); + transform: translateX(.5px) translateY(-2px) !important; } .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-overlay { - transform: translateX(-9px) translateY(-2px); + transform: translateX(-9px) translateY(-2px) !important; left: 0 !important; } From 4515313b5508a05a7a40e6a1b9d65b5cffc227b1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 22 May 2021 23:44:36 +0900 Subject: [PATCH 5/8] Add: Container Tab - Pinned tab compatibility --- userChrome.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/userChrome.css b/userChrome.css index 0061d41..b0db272 100644 --- a/userChrome.css +++ b/userChrome.css @@ -326,8 +326,9 @@ border-bottom: 2px solid var(--identity-icon-color); } - /* None exist favicon */ - .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-content::before { + /* None exist favicon & Pinned to select */ + .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-content::before, + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):not(:hover) .tab-content::before { /* Box Model */ content: ''; display: block; @@ -339,6 +340,12 @@ border-bottom: 2px solid var(--identity-icon-color); width: 16px; } + .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-content::before { + transform: translateY(10px) !important; /* None exist favicon */ + } + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):not(:hover) .tab-content::before { + transform: translateX(2.5px) translateY(10px) !important; /* Pinned to select */ + } /* None exist favicon - With Sound */ .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { From 8f8ebba09303a43ef0a4f21f71fc04f0f9db1c57 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 23 May 2021 13:11:26 +0900 Subject: [PATCH 6/8] Clean: Pinned tab --- userChrome.css | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/userChrome.css b/userChrome.css index b0db272..040091c 100644 --- a/userChrome.css +++ b/userChrome.css @@ -280,26 +280,30 @@ height: 24px !important; padding: 7px !important; } - - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content { - padding-inline: 7.5px !important; /* Original: 10px */ - } - .tabbrowser-tab[pinned][visuallyselected][busy] .tab-content { - padding-inline-end: 9.5px !important; - } - .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { display: none !important; } + /* Left Padding - Assume the icon size is 17px */ + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content { + padding-inline: 7.5px !important; /* Original: 10px */ + } + + /* Right Padding - Assume the icon size is 17px */ .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { width: 8.5px !important; } - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content { padding-inline-end: 0px !important; } + .tabbrowser-tab[pinned][visuallyselected][busy] .tab-content { + padding-inline-end: 9.5px !important; + } + .tabbrowser-tab[pinned][busy] .tab-content { + padding-inline: 10.5px !important; + } + /* Sound Tab - Don't move overlay */ .tabbrowser-tab[pinned][busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { transform: translateX(.5px) translateY(-2px) !important; @@ -310,10 +314,6 @@ left: 0 !important; } - .tabbrowser-tab[pinned][busy] .tab-content { - padding-inline: 10.5px !important; /* Assume the icon size is 17px */ - } - /** Container Tab - Color line at icon's bottom *****************************/ .tab-context-line { display: none; From 7e4a16dcd3170f02ff58ca4dcafbbecc7b7e966c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 23 May 2021 15:09:46 +0900 Subject: [PATCH 7/8] Fix: Tab bar - Pinned tab titlechanged indicator position --- userChrome.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/userChrome.css b/userChrome.css index 040091c..b336310 100644 --- a/userChrome.css +++ b/userChrome.css @@ -111,6 +111,18 @@ height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px); /* Compact: 28px, Normal: 33px, Touch: 38px */ } + /* Pinned Tab - Titlechanged Indicator position fix */ + :root:not([uidensity=touch]) .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), + :root:not([uidensity=touch]) .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position: center bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important; + } + :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), + :root[uidensity=compact] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position: center 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; From a0c3caee3149aaa5015bf2614fc9f02b9deb1e7a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 23 May 2021 17:04:21 +0900 Subject: [PATCH 8/8] Add: Container Tab - Titlechanged Indicator override at pinned --- userChrome.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/userChrome.css b/userChrome.css index b336310..4eee208 100644 --- a/userChrome.css +++ b/userChrome.css @@ -374,6 +374,12 @@ border-bottom: none; } + /* Pinned Tab - Titlechanged Indicator override */ + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]) .tab-icon-image, + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) .tab-icon-image { + border-bottom: 4px dotted var(--identity-icon-color) !important; + } + /** URL Bar - Reduce Padding ************************************************/ :root:not([uidensity=touch]) #urlbar-container, #search-container { padding-block: 2px; /* Original: 4px */