Tabsbar: Fix icon overlay behavior when sharing

This commit is contained in:
Rafael Mardojai CM 2022-05-17 22:22:15 -05:00
parent b38aaaf27f
commit c3b7b86995
1 changed files with 27 additions and 16 deletions

View File

@ -195,13 +195,11 @@ tab[selected]:-moz-window-inactive {
} }
/* Hide favicon when mute icon is present */ /* Hide favicon when mute icon is present */
.tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked], [crashed]) .tab-icon-image { .tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked], [crashed]) .tab-icon-image:not([sharing]),
.tabbrowser-tab:not([pinned]):is([soundplaying], [muted], [activemedia-blocked], [crashed])[selected] .tab-icon-image {
display: none; display: none;
} }
/* Always show the muted icon when poresent */
#tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon] {
opacity: 1 !important;
}
/* Hide secondary label about muting */ /* Hide secondary label about muting */
.tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked], [crashed]) .tab-secondary-label { .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked], [crashed]) .tab-secondary-label {
display: none; display: none;
@ -219,19 +217,39 @@ tab[selected]:-moz-window-inactive {
} }
:root:not(:-moz-window-inactive) .tab-icon-overlay:hover, :root:not(:-moz-window-inactive) .tab-icon-overlay:hover,
:root:not(:-moz-window-inactive) .tab-close-button:hover { :root:not(:-moz-window-inactive) .tab-close-button:hover {
background-image: var(--gnome-tabbar-close-hover); background: var(--gnome-tabbar-close-hover) !important;
} }
.tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked]) image { .tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked]) image {
margin: auto !important; margin: auto !important;
} }
/* Icon overlay smaller if pinned */ /* Always show the muted icon when poresent */
.tabbrowser-tab[pinned] .tab-icon-overlay { #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon] {
opacity: 1 !important;
}
/* Icon overlay smaller */
.tab-icon-overlay[pinned], .tab-icon-overlay:not([indicator-replaces-favicon="true"], [selected]) {
width: 12px !important; width: 12px !important;
height: 12px !important; height: 12px !important;
padding: 2px !important; padding: 2px !important;
} }
/* Icon overlay small style */
.tab-icon-overlay:is([pinned], [sharing]):not([crashed]) {
stroke: unset !important;
}
.tab-icon-overlay:is([pinned], [sharing]):not([crashed], [selected]) {
background: rgba(255, 255, 255, 0.5) !important;
}
.tab-icon-overlay:is([pinned], [sharing]):not([crashed], [selected]):hover {
background: rgba(255, 255, 255, 0.8) !important;
}
/* Fix icon overlay posisition when sharing */
.tab-icon-overlay:not([crashed], [pinned]):is([sharing])[selected] {
top: 0 !important;
inset-inline-end: 0 !important;
}
/* Close tab button */ /* Close tab button */
:root { :root {
@ -365,14 +383,7 @@ tab[selected]:-moz-window-inactive {
display: none !important; display: none !important;
} }
/* Pinned tab sound indicator */ /* Pinned tab size */
.tab-icon-overlay:is([pinned], [sharing]):not([crashed]) {
background: rgba(255, 255, 255, 0.5) !important;
stroke: unset !important;
}
.tab-icon-overlay:is([pinned], [sharing]):not([crashed]):hover {
background: rgba(255, 255, 255, 0.8) !important;
}
.tabbrowser-tab[pinned] { .tabbrowser-tab[pinned] {
max-width: 37px !important; max-width: 37px !important;
} }