matmoul / firefox-gui-chrome-css Goto Github PK
View Code? Open in Web Editor NEWPersonal chrome css for firefox
License: Mozilla Public License 2.0
Personal chrome css for firefox
License: Mozilla Public License 2.0
Firefox has changed how fullscreen is handled in CSS, because fullscreen videos now have a white bar permanently stuck at the bottom of the screen - which is unchanged from non-fullscreen mode.
I was able to fix this issue by changing:
window[inFullscreen=
To this:
html[inFullscreen=
(i.e. Replace "window" by "html".)
By the way, I find it looks better when using this in #statuspanel :
left: 3px !important;/*I changed from 0px*/
bottom: 2px !important;/*I changed from 0px*/
One more thing, I dislike never seeing links while in full-screen, so I commented-out this at the end:
/*html[inFullscreen="true"] #statuspanel {
display:none !important;
}*/
And added this at this after it:
html[inFullscreen="true"] #statuspanel-label {
border: 1px solid #505050 !important;
padding-left: 2px !important;
padding-bottom: 6px !important;
background: white !important;
}
Hi there!
I used your code and made some modifications for my needs. Perhaps you would like to use them as well:
#main-window[sizemode="maximized"] #browser-bottombox { height: 20px; border-top: solid 1px #505050; }
#main-window[sizemode="maximized"] .browserContainer>statuspanel { left: 4px !important; bottom: 0px; transition-duration: 0s !important; transition-delay: 0s !important; }
#main-window[sizemode="maximized"] .browserContainer>statuspanel>.statuspanel-inner>.statuspanel-label { margin-left: 0px !important; border: none !important; padding: 0 2px 0 0 !important; }
window[inFullscreen="true"] #browser-bottombox { display:none !important; }
window[inFullscreen="true"] .browserContainer>statuspanel[type="overLink"] .statuspanel-label { display:none !important; }
Since FF 108 (or possibly earlier) this no-longer works at all (the status text now pops-up like in Chrome).
Since FireFox 109 this has stopped working, as the status bar itself is gone (i.e. no white background), with the text instead appearing directly over the website (and so can be very hard to read).
This is because FireFox 109 has removed the "browser-bottombox" HTML element:
https://hg.mozilla.org/mozilla-central/rev/49cefc94b9bd58a75eb124083733caf3f90e28da
After some trial & error, I have been able to kludge the "a11y-announcement" element as a replacement for "browser-bottombox". This may break some FireFox accessibility functionality, but I don't see any other solution. Here is my fix:
:root:not([inFullscreen]) #a11y-announcement {
/* Kludge to make "a11y-announcement" a replacement for the removed "browser-bottombox" element */
display: block !important;
/* Also give it the right colour - and Mozilla says "opaque for layers optimization" (although this may not apply) */
background-color: var(--toolbar-bgcolor) !important;
}
#browser-bottombox,
#a11y-announcement {
height: 20px;
border-top: solid 1px #505050;
}
#statuspanel {
position: fixed !important;
height: 20px !important;
width: 100% !important;
left: 0px !important;
bottom: 0px !important;
padding: 0px !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
transition-property: none !important;
}
#statuspanel-label {
color: var(--toolbar-color) !important;
background: transparent !important;
border: none !important;
}
html[inFullscreen="true"] #browser-bottombox,
html[inFullscreen="true"] #a11y-announcement {
display:none !important;
}
html[inFullscreen="true"] #statuspanel {
display:none !important;
}
By the way, I dislike that the status bar is completely invisible when a website is full-screen, so I fixed it to show as the old pop-up box instead, by replacing this:
html[inFullscreen="true"] #statuspanel {
display:none !important;
}
With this:
html[inFullscreen="true"] #statuspanel-label {
/* Make status text visible - as a pop-up box */
border: 1px solid #505050 !important;
padding-left: 2px !important;
padding-bottom: 6px !important;
background: var(--toolbar-bgcolor) !important;
}
Hello,
Is there a way to put icons of AddOns in the bar?
And you can show a Done after loading?
Best regards
Jens
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.