From 99306dccfcbadf77436eaaa242c19d9f994db2a7 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Tue, 27 Apr 2021 17:59:42 +0300 Subject: [PATCH] separate proton compat. into media query and make close button pos & size correct --- .../combined_favicon_and_tab_close_button.css | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/chrome/combined_favicon_and_tab_close_button.css b/chrome/combined_favicon_and_tab_close_button.css index ee656d6..606344b 100644 --- a/chrome/combined_favicon_and_tab_close_button.css +++ b/chrome/combined_favicon_and_tab_close_button.css @@ -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 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; display: -moz-box !important; position: relative; - width: calc(16px + var(--inline-tab-padding)) !important; - margin-inline: 0 calc(-16px - var(--inline-tab-padding) / 2) !important; - padding-inline: 0px !important; + margin-inline: -1px -19px !important; + padding: 0px !important; z-index: -1; visibility: hidden; } .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 ****/ /**** 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-close-button:hover, .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-close-button:hover, -.tabbrowser-tab:not([image]) .tab-label-container:hover ~ .tab-close-button{ visibility: visible; z-index: 1; } -.tabbrowser-tab:not([image]) .tab-label-container:hover ~ .tab-close-button, -.tabbrowser-tab:not([image]) .tab-close-button:hover { margin-inline-end: 0 !important; } \ No newline at end of file +.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; } \ No newline at end of file