diff --git a/userChrome.css b/userChrome.css index 89d6976..fe0184c 100644 --- a/userChrome.css +++ b/userChrome.css @@ -78,8 +78,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 */ @@ -121,6 +121,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; @@ -281,6 +293,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, @@ -301,6 +329,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 !important; + -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] .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; + } + + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-overlay { + transform: translateX(-9px) translateY(-2px) !important; + left: 0 !important; + } + /** Container Tab - Color line at icon's bottom *****************************/ .tab-context-line { display: none; @@ -313,8 +386,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; @@ -326,6 +400,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]) { @@ -342,6 +422,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 */