Rewrite combined_favicon_and_tab_close_button.css
This rewrites the style to achieve compatibility with inline_tab_audio_icons.css. compatibility only requires few small non-affecting extra rules in inline_tab_audio_icons. This patch also makes combined_favicon_and_tab_close_button work with themes where tab background is not full opaque which is a nice bonus :)
This commit is contained in:
parent
74d5d67e71
commit
b9e140dbbd
2 changed files with 19 additions and 32 deletions
|
@ -3,43 +3,25 @@ See the above repository for updates as well as full license text. */
|
|||
|
||||
/* Show tab close button when cursor is over the tab icon */
|
||||
|
||||
/* inline_tab_audio_icons.css is recommended because otherwise you cannot mute the tab using the mute button */
|
||||
|
||||
.tab-content{
|
||||
pointer-events: none
|
||||
}
|
||||
.tab-icon-image:not([busy]){ display: block !important; }
|
||||
:where(.tab-content:hover) .tab-icon-image,
|
||||
:where(.tab-content:hover) > .tab-icon-stack{
|
||||
visibility: hidden;
|
||||
}
|
||||
.tab-close-button{
|
||||
-moz-box-ordinal-group: 0;
|
||||
display: -moz-box !important;
|
||||
position: relative;
|
||||
margin-inline: -4px -20px !important;
|
||||
padding-inline-start: 7px !important;
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
width: unset !important;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.tab-close-button:hover{ opacity: 1 }
|
||||
.tabbrowser-tab[pinned] .tab-close-button{ display: none !important; }
|
||||
.tabbrowser-tab:hover .tab-close-button{
|
||||
background-color: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
|
||||
background-image: linear-gradient(var(--toolbarbutton-hover-background),var(--toolbarbutton-hover-background))
|
||||
}
|
||||
|
||||
/**** ONLY USE ONE OF THE FOLLOWING ****/
|
||||
/**** These select the behavior of a scenario where the page has no favicon ****/
|
||||
|
||||
/*** Option 1 - no favicon - no close-button ***/
|
||||
|
||||
/*
|
||||
.tab-icon-stack:hover ~ .tab-close-button, .tab-close-button:hover{ visibility: visible; z-index: 1 }
|
||||
*/
|
||||
|
||||
/*** Option 2 - No icon - always show close-button ***/
|
||||
|
||||
/*
|
||||
.tab-icon-stack:hover ~ .tab-close-button,
|
||||
.tab-close-button:hover,
|
||||
.tabbrowser-tab:not([image]) .tab-close-button{ visibility: visible; z-index: 1 }
|
||||
.tabbrowser-tab:not([image]) .tab-close-button{ margin-inline-end: 0 !important; }
|
||||
*/
|
||||
|
||||
/*** Option 3 - No icon - show close-button when cursor is over the tab ***/
|
||||
|
||||
.tab-icon-stack:hover ~ .tab-close-button,
|
||||
.tab-close-button:hover,
|
||||
.tabbrowser-tab:not([image]):hover .tab-close-button{ visibility: visible; z-index: 1; }
|
||||
.tabbrowser-tab:not([image]):hover .tab-close-button{ margin-inline-end: 0 !important; }
|
||||
|
|
|
@ -21,3 +21,8 @@ See the above repository for updates as well as full license text. */
|
|||
|
||||
/* show the secondary label when video is in PiP */
|
||||
.tab-secondary-label[pictureinpicture]{ display: -moz-box }
|
||||
|
||||
/* These exist for compatibility with combined_favicon_and_tab_close_button.css */
|
||||
.tab-icon-overlay{ pointer-events: auto }
|
||||
.tab-content > .tab-icon-stack,
|
||||
.tab-icon-stack:hover > .tab-icon-image{ visibility: visible }
|
||||
|
|
Loading…
Reference in a new issue