From fe39d0f72e1032e653b7335ac352b38f129ebce1 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Mon, 31 Dec 2018 16:04:32 +0200 Subject: [PATCH] Add option to handle no-favicon scenario --- .../combined_favicon_and_tab_close_button.css | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/chrome/combined_favicon_and_tab_close_button.css b/chrome/combined_favicon_and_tab_close_button.css index c730f14..9cfce31 100644 --- a/chrome/combined_favicon_and_tab_close_button.css +++ b/chrome/combined_favicon_and_tab_close_button.css @@ -8,6 +8,33 @@ z-index: -1; visibility: hidden; } + .tab-close-button:hover{ background-color: var(--lwt-accent-color); } + .tabbrowser-tab[selected] .tab-close-button:hover{ background-color: var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor)); } -.tab-icon-image:hover ~ .tab-close-button, .tab-close-button:hover{ visibility: visible; z-index: 1 } \ No newline at end of file + +/**** 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-image:hover ~ .tab-close-button, .tab-close-button:hover{ visibility: visible; z-index: 1 } +*/ + +/*** Option 2 - No icon - always show close-button ***/ + +/* +.tab-icon-image:hover ~ .tab-close-button, +.tab-close-button:hover, +.tab-icon-image:not([src]) ~ .tab-close-button{ visibility: visible; z-index: 1 } +.tab-icon-image:not([src]) ~ .tab-close-button{ margin-right:0px !important; } +*/ + +/*** Option 3 - No icon - show close-button when cursor is over the tab text ***/ + +.tab-icon-image:hover ~ .tab-close-button, +.tab-close-button:hover, +.tab-icon-image:not([src]) ~ .tab-label-container:hover ~ .tab-close-button{ visibility: visible; z-index: 1 } +.tab-icon-image:not([src]) ~ .tab-label-container:hover ~ .tab-close-button, +.tab-icon-image:not([src]) ~ .tab-close-button:hover {margin-right: 0px !important; } \ No newline at end of file