Add: Sound Tab - Hover Behavior like sound pinned tab

cc @Godiesc 's commpactmodefirefoxcss
This commit is contained in:
alstjr7375 2021-05-17 14:42:35 +09:00
parent f55b824916
commit a722cfcb0a

View file

@ -193,24 +193,49 @@
/** Sound Tab - Show with Favicons ******************************************/
/* Makes the favicons always visible (also on hover) */
#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay), #toolbar-menubar:not(:hover) + #TabsToolbar:not(:hover) #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-icon-image[src] ~ .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]),
:is(#toolbar-menubar:hover + #TabsToolbar, #TabsToolbar:hover) .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay)
{
opacity: 1 !important;
.tab-icon-image:not([pinned]){
opacity: 1 !important
}
/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tab-icon-overlay:not([crashed]) {
/* Position */
top: -4.5px !important;
inset-inline-end: -9px !important;
z-index: 1 !important;
/* Shape */
padding: 1.5px !important;
border-radius: 10px !important;
/* Color */
stroke: var(--tab-icon-overlay-stroke, white) !important;
color: var(--tab-icon-overlay-fill, black) !important;
fill-opacity: 0.7 !important;
background: transparent !important;
}
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed]) {
stroke: var(--tab-icon-overlay-stroke, black) !important;
color: var(--tab-icon-overlay-fill, white) !important;
}
.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
opacity: 1 !important;
margin-right: 10px !important;
}
/* Hover */
.tab-icon-overlay:not([crashed])[soundplaying]:hover,
.tab-icon-overlay:not([crashed])[muted]:hover,
.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
background-color: var(--tab-icon-overlay-stroke, white) !important;
fill-opacity: 0.95 !important;
}
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[muted]:hover,
#TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
background-color: var(--tab-icon-overlay-stroke, black) !important;
}
/** URL Bar - Reduce Padding ************************************************/
:root:not([uidensity=touch]) #urlbar-container, #search-container {
padding-block: 2px; /* Original: 4px */