Description
Bug can be easily seen by just going to any audio playing tab while having this theme installed on Floorp.
Configuration
- Floorp Version: 11.27.0
- OS: Windows 11
- Tweaks enabled:
None
*
Fix:
Temporary fix is to take advantage of the already imported custom.css that bmFtZQ has added (if not there just make it in the same folder as userchrome.css), and paste the following code to align the audio/mute button correctly:
/* Custom mute button styling for tabs /
#tabbrowser-tabs .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not([crashed]) {
position: absolute !important;
top: 8px !important; / Keep vertical position /
left: -8px !important; / Keep horizontal position /
transform: none !important; / Override transforms /
background-color: #4A4A4A !important; / Dark grey/steel color /
border-radius: var(--toolbarbutton-border-radius, 4px) !important; / Match theme’s radius /
width: 18px !important; / Larger to cover favicon /
height: 18px !important; / Larger to cover favicon /
padding: 0 !important; / Match tabbar.css /
z-index: 1000 !important; / Ensure visibility /
}
#tabbrowser-tabs .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not([crashed]):hover {
background-color: #6A6A6A !important; / Lighter steel grey on hover */
}
Description
Bug can be easily seen by just going to any audio playing tab while having this theme installed on Floorp.
Configuration
None
*
Fix:
Temporary fix is to take advantage of the already imported custom.css that bmFtZQ has added (if not there just make it in the same folder as userchrome.css), and paste the following code to align the audio/mute button correctly:
/* Custom mute button styling for tabs /
#tabbrowser-tabs .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not([crashed]) {
position: absolute !important;
top: 8px !important; / Keep vertical position /
left: -8px !important; / Keep horizontal position /
transform: none !important; / Override transforms /
background-color: #4A4A4A !important; / Dark grey/steel color /
border-radius: var(--toolbarbutton-border-radius, 4px) !important; / Match theme’s radius /
width: 18px !important; / Larger to cover favicon /
height: 18px !important; / Larger to cover favicon /
padding: 0 !important; / Match tabbar.css /
z-index: 1000 !important; / Ensure visibility /
}
#tabbrowser-tabs .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not([crashed]):hover {
background-color: #6A6A6A !important; / Lighter steel grey on hover */
}