Closed VVollmilchsau closed 5 months ago
I figure you mean that you would like the animation should be more like a linear transformation while right now the toolbox rotates around the top edge.
Linear transformation is a bit tricky because we would need more accurately know how tall the toolbox happens to be, and that changes based on what toolbars one has enabled as well as font size on your system etc.
With rotate transformation we kinda get all that for free, or at least there aren't too many things that would affect the values we need to use.
So yeah, you can totally do it if you know what transformation values work well for your scenario.
After spending a day with it, I completely understand why you use "transform: rotateX". I always had to choose between "choppy animation" or "non-hoverable area" in windowed Firefox
A "correct" solution I found was to abuse "autohide_bookmarks_toolbar.css" (show only on "#nav-bar:focus-within") to act as an invisible hover area
Like you said, this is more trial and error :P
margin-top: ... !important;
The Code:
AND
Edit: Small follow-up question I use "autohide_sidebar.css" with "--uc-sidebar-width: 1px;" Is it possible to add an invisible area to trigger hover in windowed mode? Currently I can only activate it in maximized and full screen mode [opacity + "--uc-sidebar-width: 30px;" doesn't work]
Is it possible to add an invisible area to trigger hover in windowed mode?
Maybe, I'm not sure. Currently there isn't really an invisible triggerbox even on fullscreen mode, instead the sidebar just reserves 1px thin slice of the window (and 30px in windowed mode).
Having it be invisible triggerbox while not reserving any space is really a usability problem because it would make the edge of the website unusable or potentially very annoying to use because sidebar would popup unexpectedly.
In fullscreen mode and maximized it's not really necessary (preferably excluded with :root[sizemode="normal"]) I understand your concerns about usability, but Sidebery is on the left and 30 pixels was more of an example (actually more like 5-15 pixels? I have no idea). Could you please share some insights with me since I have no idea what kind of code realizes this?
You can add this to autohide-sidebar.css to make the sidebar show on top of web-content:
#sidebar-box{
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
}
#sidebar-box:not(:hover){
opacity: 0;
transition: opacity var(--uc-autohide-transition-duration) linear var(--uc-autohide-sidebar-delay);
}
I suppose it should be pretty easy to add this as option in case someone wants to use it like that.
TY, one step closer, but everything I tried today ends with this color (#23222b on the left) and I don't know which element defines it :P https://i.imgur.com/ttpix0F.png
That rather sounds like you might be using letterboxing through privacy.resistFingerprinting.letterboxing
If you are doing that, then the empty area should be expected and the color you see is the background-color of #tabbrowser-tabpanels
Hmm, RFP "privacy.resistFingerprinting" is false and "privacy.resistFingerprinting.letterboxing" does not exist in about:config I only use FPP "privacy.fingerprintingProtection" through ETP-Strict
Also the same behavior with:
#tabbrowser-tabpanels{
background-color: transparent !important;
}
So not about letterboxing then. Sadly in that case I have no idea what that space in your screenshot is about.
Update: I disabled everything in "userChrome.css" and added your snippet to a clean "autohide_sidebar.css". And it works =) Time for me to figure out what the problem is^^
Edit: I forgot one of these...
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]
So I'm finally happy with my solution :) https://i.imgur.com/uGJN1aB.gif Keep in mind, its captured in windowed and a lot easier to trigger maximized/fullscreen
Many thanks for your help! =)
The Code:
First of all, love your customizations and have been using them for years ;)
Is it possible to make the transition more "smooth", like in Windows or "autohide_sidebar.css", without a visible opacity transition and still keep the invisible “hoverbox” for windowed mode?
Thanks in advance