separate proton compat. into media query and make close button pos & size correct

This commit is contained in:
MrOtherGuy 2021-04-27 17:59:42 +03:00
parent 06db30e311
commit 99306dccfc

View file

@ -1,3 +1,4 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/combined_favicon_and_tab_close_button.css made available under Mozilla Public License v. 2.0 /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/combined_favicon_and_tab_close_button.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */ See the above repository for updates as well as full license text. */
@ -7,16 +8,24 @@ See the above repository for updates as well as full license text. */
-moz-box-ordinal-group: 0; -moz-box-ordinal-group: 0;
display: -moz-box !important; display: -moz-box !important;
position: relative; position: relative;
width: calc(16px + var(--inline-tab-padding)) !important; margin-inline: -1px -19px !important;
margin-inline: 0 calc(-16px - var(--inline-tab-padding) / 2) !important; padding: 0px !important;
padding-inline: 0px !important;
z-index: -1; z-index: -1;
visibility: hidden; visibility: hidden;
} }
.tabbrowser-tab[pinned] .tab-close-button{ display: none !important; } .tabbrowser-tab[pinned] .tab-close-button{ display: none !important; }
.tab-close-button:hover{ background-color: var(--lwt-selected-tab-background-color) !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))
}
.tabbrowser-tab[selected] .tab-close-button:hover{ background-color: var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor)); } @media (-moz-proton){
.tab-close-button{
margin-inline: -4px calc(-16px - var(--inline-tab-padding) / 2) !important;
padding: 7px !important;
width: calc(16px + var(--inline-tab-padding)) !important;
}
}
/**** ONLY USE ONE OF THE FOLLOWING ****/ /**** ONLY USE ONE OF THE FOLLOWING ****/
/**** These select the behavior of a scenario where the page has no favicon ****/ /**** These select the behavior of a scenario where the page has no favicon ****/
@ -33,13 +42,12 @@ See the above repository for updates as well as full license text. */
.tab-icon-stack:hover ~ .tab-close-button, .tab-icon-stack:hover ~ .tab-close-button,
.tab-close-button:hover, .tab-close-button:hover,
.tabbrowser-tab:not([image]) .tab-close-button{ visibility: visible; z-index: 1 } .tabbrowser-tab:not([image]) .tab-close-button{ visibility: visible; z-index: 1 }
.tabbrowser-tab:not([image]) .tab-close-button{ margin-right:0px !important; } .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 text ***/ /*** Option 3 - No icon - show close-button when cursor is over the tab ***/
.tab-icon-stack:hover ~ .tab-close-button, .tab-icon-stack:hover ~ .tab-close-button,
.tab-close-button:hover, .tab-close-button:hover,
.tabbrowser-tab:not([image]) .tab-label-container:hover ~ .tab-close-button{ visibility: visible; z-index: 1; } .tabbrowser-tab:not([image]):hover .tab-close-button{ visibility: visible; z-index: 1; }
.tabbrowser-tab:not([image]) .tab-label-container:hover ~ .tab-close-button, .tabbrowser-tab:not([image]):hover .tab-close-button{ margin-inline-end: 0 !important; }
.tabbrowser-tab:not([image]) .tab-close-button:hover { margin-inline-end: 0 !important; }