autohide_sidebar.css - there’s a misunderstanding in some of the code

[rediffusion]

I’m interested in two parts of the code. How it works, how it looks? Can you show me the screenshot?

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
  background-color: inherit !important;
  border-inline: 1px solid rgb(80,80,80);
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > *{
  border-inline-width: 10px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{
  margin-inline: 0px !important;
  border-left-style: solid !important; 
}

---

With Sincere Appreciation!

[MrOtherGuy]

First part makes sidebar area inherit background color from the sidebar box (which is normally the area Firefox adds background-color to) which is necessary because the sidebar is wider than the box when hovered. It also adds a border to visually separate it from web-content because the normal splitter can't be shown (as it is non-functional with autohiding mechanism).

The second part moves statuspanel to the side so that it wont cover sidebar content when it is being shown.

The easiest way for you to see what those do is to simply try the style and compare what happens if you remove those bits.

[rediffusion]

@MrOtherGuy Even after a few manipulations, I can't get what this code doing.

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{
  margin-inline: 1px !important;
  border-left-style: solid !important; 
}

[MrOtherGuy]

I really can't put it any more clearly than what it says right in the snippet you pasted. Though I see my previous comment is wrong in that the statuspanel is the one getting covered by sidebar while my comment implies the opposite.

[rediffusion]

@MrOtherGuy Are you talking about this status panel?

Screenshot


[MrOtherGuy]

Yes

[rediffusion]

@MrOtherGuy Sorry ma men, but even now I can't understand the purpose. When does that help you?

[MrOtherGuy]

Exactly in the case mentioned in the comment:

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

Why are you concerned about this?

[rediffusion]

Why are you concerned about this?

I find your GitHub page and I'm interested to learn every hack step by step. How the status panel can go to another side it's always in the same place.

[MrOtherGuy]

Alright. But no, the statuspanel should not always be in the same place, it should move to the right side (if your sidebar is normally on left side) when sidebar is hovered. Say you open bookmarks sidebar, then Firefox should show statuspanel when you hover some bookmark in the sidebar. But with that style Firefox should move the statuspanel to the right side because the sidebar would cover it if it would be on the left as normal.

If it doesn't move to the right side then that is something I should fix if possible, but it does seem to work as intended on Firefox 112 - at least on Windows(10).

[rediffusion]

@MrOtherGuy

Huh... I got you! Anyway, I don't like autohide at all. I like when the Sidebar is always penned. Also, I prefer to place the Sidebar on the right side.

but it does seem to work as intended on Firefox 112 - at least on Windows(10).

It's working fine 😉

Go get ’em, tiger❗

[MrOtherGuy]

Anyway, I don't like autohide at all. I like when the Sidebar is always penned. Also, I prefer to place the Sidebar on the right side.

Neither do I (my use for sidebar is very situational in the first place) but apparently some folks like it that way.

Anyhow, I'll close this since there isn't any issue here.