[Request/Submission] centered_topleft_statuspanel.css

[megamorphg]

Use case: having the status panel immediately under the URL bar, in the same font and size in order for easy URL comparison. I thought this use case would be common for every web surfer, especially nowadays with click jacking and what not.

Currently you have centered_top_statuspanel.css but I don't find this useful for the above use case for comparing URLs in one glance.

Request: CSS to anchor the status panel to top-left with left text-align immediately under URL bar. Sometimes people have the URL bar pushed more to the right due to icons to left of URL bar so also need a way to easily move the status panel's anchor point or have a left margin.

Based on assistance from others, I have this montrosity created which almost works perfectly; it just jumps around a bit:

#statuspanel {
  top: 0 !important;
  padding-block: 0 2em !important;
  font-size: 1.3em !important;
  opacity: 0.8 !important;
  left: 3%  !important;
  right: 0% !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
  /* margin-left: 145px !important; */
  /* margin-right: 0px !important; */
  text-align: left !important;
}

#statuspanel-label { 
  padding-top: 3px !important;  
  padding-bottom: 2px !important;  
  padding-left: 16px !important;  
  padding-right: 16px !important;  
  background-color:hsla(210,25%,13%,1)!important;   
  border-radius: 1px !important;  
  color: #D6D6D9 !important;  
  text-shadow: black 1px 1px 1px !important;  
  font-weight: normal !important;  
  font-size: 14px !important;  
  border-color: black !important;  
  border-width: 1px !important;    
  border-bottom:dotted 0.25em rgba(108,146,174, 0.7)!important;   
  max-width: 1000px !important;  
  min-width: 800px !important;
}

I was wondering if you could think of any way to perfect it so it doesn't jump around (it moves around when moving the mouse over some links but at least stays on the left side unlike what we worked on in #205). Also if you have any thoughts on making it more parsimonious and then feel free to add it to the library.

[MrOtherGuy]

Should be easy enough, though much of a same effect, at least in comparison sense I think, can be achieved with status_inside_urlbar.css

[MrOtherGuy]

You could also modify that centered veraion by deleting that inset-inline rule as well as both margin-left rules. Then I believe it should behave like the normal statuspanel, just on top instead of bottom.

[megamorphg]

Following seemed to work for me including the "margin-left" which I used to align under my URL bar... but the number of buttons in the URL bar vary causing the margins to be off... I'll have to study your status inside URL bar to see how you made it always render at the right position.

#statuspanel {
  bottom: 99% !important;
  left: 0% !important;
}

#statuspanel-label {
  height: 22px;
  text-align: left !important;
  margin-left: 80px !important;
  color: #D6D6D9 !important;
  font-size: 14px !important;
  /* font-weight: 700 !important; */
  opacity: 0.8 !important;
  /* background-color: #464648 !important;   */
  /* padding-left: 8px !important; */
  /* max-width: 900px !important; */
  /* min-width: 400px !important; */
}

[MrOtherGuy]

status_inside_urlbar.css isn't so much about positioning, it makes urlbar use the image of statuspanel as background-image. And as such, it doesn't do any positioning - except to render the real statuspanel behind everything else.

[megamorphg]

Ah.. sounds like this is impossible with CSS then. Well this half-complete version should be sufficient for those wanting to easily compare origin and destination URLs. Thanks!