fake-statusbars: Make the styles work with new statuspanel DOM

This commit is contained in:
MrOtherGuy 2022-09-30 16:50:25 +03:00
parent 855b1f8a95
commit 2f270ca0c0
2 changed files with 19 additions and 10 deletions

View file

@ -1,4 +1,3 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/fake_statusbar_w_bookmarksbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
@ -35,7 +34,7 @@ See the above repository for updates as well as full license text. */
#personal-toolbar-empty + toolbarspring,
#PersonalToolbar > :first-child + toolbarspring{
background-position: left 4px;
background-position: left 8px;
background-repeat: no-repeat;
background-image: -moz-element(#statuspanel);
max-width: 50vw !important; /* Modify this to let the status bar grow larger than 50% of window width */
@ -54,7 +53,11 @@ See the above repository for updates as well as full license text. */
/* Using -moz-element() causes some problems after Firefox has been running several hours such as long tab switch times. For this reason the background image is removed on hover and focused states which appears to clear the state. */
#PersonalToolbar > toolbarspring:first-of-type:hover{ background-image: none }
#statuspanel-inner > #statuspanel-label{
#statuspanel{
padding-top: 0 !important;
text-shadow: none !important;
}
#statuspanel-label{
height:3em;
min-width: 1000px;
background-color: transparent !important;
@ -68,8 +71,9 @@ See the above repository for updates as well as full license text. */
/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/
#statuspanel{ color: lightpink; z-index: -1; visibility: visible !important; opacity: 1 !important; }
#statuspanel[inactive] > #statuspanel-inner > #statuspanel-label{ visibility: hidden }
#statuspanel[inactive] #statuspanel-label{ visibility: hidden }
.browserStack > #statuspanel[inactive]::before,
#statuspanel[inactive] > #statuspanel-inner::before{ content: "Done"; color: var(--toolbar-field-color, black) !important }
#statuspanel[type="status"] { color: skyblue }
#statuspanel-inner > #statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; }
#statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; }

View file

@ -58,7 +58,7 @@ See the above repository for updates as well as full license text. */
#toolbar-menubar > .toolbarbutton-1:first-child:not(:hover) + #menubar-items:not(:hover){ visibility: collapse }
#toolbar-menubar > .titlebar-buttonbox-container + toolbarspring{
background-position: left 2px;
background-position: left 5px;
background-repeat: no-repeat;
background-image: -moz-element(#statuspanel);
max-width: none !important;
@ -68,7 +68,7 @@ See the above repository for updates as well as full license text. */
#titlebar:hover > #toolbar-menubar > .titlebar-buttonbox-container + toolbarspring{ background-image: none }
#toolbar-menubar > .titlebar-buttonbox-container + toolbarspring{ background-image: -moz-element(#statuspanel) !important; }
#statuspanel-inner > #statuspanel-label{
#statuspanel-label{
height:3em;
min-width: 1000px;
background-color: var(--lwt-frame, hsla(0,0%,100%,.8)) !important;
@ -81,11 +81,16 @@ See the above repository for updates as well as full license text. */
#statuspanel-inner{ background-color: var(--toolbar-accent-color) }
/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/
#statuspanel{ color: lightpink; z-index: -1; inset-inline: 0 auto !important; }
#statuspanel{
color: lightpink;
z-index: -1;
inset-inline: 0 auto !important;
padding-top: 0 !important;
}
#statuspanel[type="status"] { color: skyblue }
#statuspanel-inner{ margin-left: -3px; margin-top: 1px}
#statuspanel-inner > #statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important;}
#statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important;}
#customization-container,
#content-deck,
@ -95,4 +100,4 @@ See the above repository for updates as well as full license text. */
:root[inFullscreen] :is(#customization-container,#content-deck,#browser){
margin-bottom: 0px;
}
}
}