fliegerjohn/mobile-config-firefox
1
0
Fork 1
mirror of https://codeberg.org/claui/mobile-config-firefox.git synced 2025-11-04 04:25:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

fake_statusbar: fix and improve layout

Browse source 
browser-bottombox doesn't exist anymore so create space using
body::after instead. This patch additionally fixes various alignment
issues with elements in the statusbar.
This commit is contained in:
MrOtherGuy 2022-12-30 16:44:02 +02:00
parent 2c6bca9fd7
commit b434a2d9f5
1 changed files with 33 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

51
chrome/fake_statusbar_w_bookmarksbar.css
View file

@ -10,31 +10,32 @@ See the above repository for updates as well as full license text. */
/* Toolbar buttons/items will be aligned to the right edge of the loading bar. If you wish to align them to the right edge, then add another flex-space after the first one */ /* Toolbar buttons/items will be aligned to the right edge of the loading bar. If you wish to align them to the right edge, then add another flex-space after the first one */
:root:not([inFullscreen]) > body{ --uc-browser-base-padding: calc(2 * var(--toolbarbutton-inner-padding) + 16px) } :root:not([inFullscreen]) > body{
--uc-browser-base-padding: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
--uc-statusbar-text-vertical-position: 5px;
}
:root[uidensity="compact"]:not([inFullscreen]) > body{
--uc-statusbar-text-vertical-position: 3px;
}
:root:not([inFullscreen]) > body::after{
content: "";
display: -moz-box;
margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important;
}
#PersonalToolbar{ #PersonalToolbar{
position: fixed; position: fixed;
display: flex; display: flex;
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
} border-top: 1px solid var(--chrome-content-separator-color);
:root:not([inFullscreen]) #browser-bottombox{
margin-bottom: calc(5px + var(--uc-browser-base-padding)) !important;
}
#PersonalToolbar > toolbarbutton{ padding: 0 var(--toolbarbutton-outer-padding) !important; }
#PersonalToolbar > toolbarbutton > .toolbarbutton-icon,
#PersonalToolbar > toolbarbutton > .toolbarbutton-badge-stack{
width: var(--uc-browser-base-padding,0px) !important;
height: var(--uc-browser-base-padding,0px) !important;
padding: var(--toolbarbutton-inner-padding) !important;
} }
#personal-toolbar-empty + toolbarspring, #personal-toolbar-empty + toolbarspring,
#PersonalToolbar > :first-child + toolbarspring{ #PersonalToolbar > :first-child + toolbarspring{
background-position: left 8px; background-position: left var(--uc-statusbar-text-vertical-position);
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: -moz-element(#statuspanel); background-image: -moz-element(#statuspanel);
max-width: 50vw !important; /* Modify this to let the status bar grow larger than 50% of window width */ max-width: 50vw !important; /* Modify this to let the status bar grow larger than 50% of window width */
@ -43,6 +44,7 @@ See the above repository for updates as well as full license text. */
} }
#personal-toolbar-empty{ visibility: hidden; } #personal-toolbar-empty{ visibility: hidden; }
#PersonalToolbar .toolbarbutton-1{ -moz-box-align: center !important; }
#PersonalToolbar > toolbarspring{ #PersonalToolbar > toolbarspring{
flex-grow: 1; flex-grow: 1;
@ -64,16 +66,29 @@ See the above repository for updates as well as full license text. */
border: none !important; border: none !important;
font-size: inherit; font-size: inherit;
color: inherit !important; color: inherit !important;
margin-right: 0px !important; margin-inline: 0px !important;
padding-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 */ /* 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-accent-color) }
/*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/ /*#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }*/
#statuspanel{ color: lightpink; z-index: -1; visibility: visible !important; opacity: 1 !important; } #statuspanel{
color: lightpink; /* color used to indicate insecure http:// links */
z-index: -1;
visibility: visible !important;
opacity: 1 !important;
}
#statuspanel[inactive] #statuspanel-label{ visibility: hidden } #statuspanel[inactive] #statuspanel-label{ visibility: hidden }
.browserStack > #statuspanel[inactive]::before, .browserStack > #statuspanel[inactive]::before,
#statuspanel[inactive] > #statuspanel-inner::before{ content: "Done"; color: var(--toolbar-field-color, black) !important } #statuspanel[inactive] > #statuspanel-inner::before{
content: "Done";
display: -moz-box;
margin-top: 2px;
color: var(--toolbar-field-color, black) !important;
}
#statuspanel[type="status"] { color: skyblue } #statuspanel[type="status"] { color: skyblue }
#statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; } #statuspanel-label[value^="https"]{ color: var(--toolbar-field-color, black) !important; }