make the style work, and scope it to browser.xhtml
This commit is contained in:
MrOtherGuy
parent
1de4217f45
commit
6f791f1a98
1 changed files with 78 additions and 57 deletions
|
|
@ -3,76 +3,97 @@ See the above repository for updates as well as full license text. */
|
|||
|
||||
/* Creates a statusbar by using menubar */
|
||||
/* Since it's really the menubar this won't work if you also want the menubar on top of the screen */
|
||||
|
||||
/* Ho */
|
||||
/* The setup requires few things:
|
||||
|
||||
1. Put the preferences button to the LEFT of the menubar items
|
||||
2. Put a single toolbarspring next to the menubar items on RIGHT side
|
||||
3. Move your "statusbar"-addons to menubar
|
||||
3. Move your "statusbar" - buttons to menubar
|
||||
4. Make menubar permanently enabled
|
||||
|
||||
Move your "statusbar" elements to menubar
|
||||
|
||||
|
||||
*/
|
||||
|
||||
#titlebar{
|
||||
position: fixed;
|
||||
display: block;
|
||||
bottom: 0px;
|
||||
height: var(--tab-min-height);
|
||||
width: 100vw;
|
||||
}
|
||||
#navigator-toolbox{ margin-top: var(--tab-min-height) }
|
||||
/* Themes that use background images will not show properly with this style */
|
||||
|
||||
#TabsToolbar{
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0px;
|
||||
width: 100vw;
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
@-moz-document url("chrome://browser/content/browser.xhtml"){
|
||||
|
||||
/* Uncomment the next block to hide the settings button from the fake statusbar */
|
||||
/*
|
||||
#toolbar-menubar > #preferences-button{
|
||||
margin-inline-end: -30px !important;
|
||||
visibility: visible;
|
||||
}*/
|
||||
|
||||
:root{ --uc-fake-titlebar-padding: 0px }
|
||||
@media (-moz-os-version: windows-win7),(-moz-os-version: windows-win10){
|
||||
:root[sizemode="maximized"][tabsintitlebar]{ --uc-fake-titlebar-padding: 8px }
|
||||
}
|
||||
#navigator-toolbox{
|
||||
margin-top: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px) + var(--uc-fake-titlebar-padding))
|
||||
}
|
||||
|
||||
#TabsToolbar > .toolbar-items{ width: calc(100vw - 120px) }
|
||||
#TabsToolbar > .titlebar-buttonbox-container{
|
||||
display: block !important;
|
||||
float: right !important;
|
||||
}
|
||||
#titlebar,
|
||||
#toolbar-menubar,
|
||||
#TabsToolbar{
|
||||
position: fixed;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
background-color: var(--lwt-accent-color);
|
||||
}
|
||||
|
||||
#toolbar-menubar{ width: 100% }
|
||||
#toolbar-menubar > .titlebar-buttonbox-container,#toolbar-menubar > spacer{ display: none !important; }
|
||||
#TabsToolbar{
|
||||
padding-left: 30px !important;
|
||||
top: var(--uc-fake-titlebar-padding,0px);
|
||||
}
|
||||
|
||||
#toolbar-menubar > .toolbarbutton-1:first-child:not(:hover) + #menubar-items:not(:hover){ visibility: collapse }
|
||||
#toolbar-menubar,
|
||||
#titlebar{
|
||||
bottom: 0;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
#toolbar-menubar > .titlebar-buttonbox-container + toolbarspring{
|
||||
background-position: left 2px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -moz-element(#statuspanel);
|
||||
max-width: none !important;
|
||||
}
|
||||
/* 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. */
|
||||
#titlebar:hover > #toolbar-menubar > .titlebar-buttonbox-container + toolbarspring{ background-image: none }
|
||||
#toolbar-menubar > .titlebar-buttonbox-container + toolbarspring{ background-image: -moz-element(#statuspanel) !important; }
|
||||
#TabsToolbar > .toolbar-items{ width: calc(100vw - 120px) }
|
||||
:root:not([inFullscreen]) #TabsToolbar > .titlebar-buttonbox-container{ display: flex !important }
|
||||
|
||||
#statuspanel-inner > #statuspanel-label{
|
||||
height:3em;
|
||||
min-width: 1000px;
|
||||
background-color: var(--lwt-accent-color, hsla(0,0%,100%,.8)) !important;
|
||||
border: none !important;
|
||||
font-size: inherit;
|
||||
color: inherit !important;
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
/* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */
|
||||
#statuspanel-inner{ background-color: var(--toolbar-accent-color) }
|
||||
/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/
|
||||
#toolbar-menubar > .titlebar-buttonbox-container,
|
||||
#toolbar-menubar > spacer{ display: none !important; }
|
||||
|
||||
#statuspanel{ color: lightpink; z-index: -1; }
|
||||
#statuspanel[type="status"] { color: skyblue }
|
||||
#toolbar-menubar > .toolbarbutton-1:first-child:not(:hover) + #menubar-items:not(:hover){ visibility: collapse }
|
||||
|
||||
#statuspanel-inner{ margin-left: -3px; margin-top: 1px}
|
||||
#statuspanel-inner > #statuspanel-label[value^="https"]{ color: var(--lwt-toolbar-field-color, black) !important;}
|
||||
#toolbar-menubar > .titlebar-buttonbox-container + toolbarspring{
|
||||
background-position: left 2px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -moz-element(#statuspanel);
|
||||
max-width: none !important;
|
||||
flex-grow: 1;
|
||||
}
|
||||
/* 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. */
|
||||
#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{
|
||||
height:3em;
|
||||
min-width: 1000px;
|
||||
background-color: var(--lwt-accent-color, hsla(0,0%,100%,.8)) !important;
|
||||
border: none !important;
|
||||
font-size: inherit;
|
||||
color: inherit !important;
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
/* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */
|
||||
#statuspanel-inner{ background-color: var(--toolbar-accent-color) }
|
||||
/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/
|
||||
|
||||
:root:not([inDOMFullscreen]) #content-deck,
|
||||
:root:not([inDOMFullscreen]) #browser{ margin-bottom: var(--tab-min-height) }
|
||||
#statuspanel{ color: lightpink; z-index: -1; inset-inline: 0 auto !important; }
|
||||
#statuspanel[type="status"] { color: skyblue }
|
||||
|
||||
#statuspanel-inner{ margin-left: -3px; margin-top: 1px}
|
||||
#statuspanel-inner > #statuspanel-label[value^="https"]{ color: var(--lwt-toolbar-field-color, black) !important;}
|
||||
|
||||
#customization-container,
|
||||
#content-deck,
|
||||
#browser{ margin-bottom: var(--tab-min-height) }
|
||||
|
||||
:root[inDOMFullscreen] :is(#customization-container,#content-deck,#browser),
|
||||
:root[inFullscreen] :is(#customization-container,#content-deck,#browser){
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue