mirror of
https://codeberg.org/claui/mobile-config-firefox.git
synced 2024-11-09 19:30:15 +00:00
0ff12e01fe
Flexbox model will replace old xul box as the default display model so this patch adds support for that in a whole bunch of styles. A lot of style rules are marked as "Fx < 112 compatibility" rules and those can be removed when 112 hits release.
117 lines
4.3 KiB
CSS
117 lines
4.3 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/status_inside_urlbar.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* STATUSPANEL INSIDE URLBAR */
|
|
|
|
/* This style replaces the urlbar url with statuspanel text when needed.
|
|
The _v2 variant replaces the whole contents of the urlbar, including all icons. */
|
|
|
|
/**************
|
|
IMPORTANT WARNING
|
|
Using this style can lead to long tab switch times (and probably other problems). Everything may be fine when Firefox starts but situation gets gradually worse, although pretty slowly.
|
|
Relevant information: https://bugzilla.mozilla.org/show_bug.cgi?id=1496065
|
|
As a workaround, the -moz-element background image is removed somewhat often which seems work at first glance. But there might still be some related issues on really long sessions. Just be aware.
|
|
**************/
|
|
|
|
.urlbar-input-box{
|
|
display: grid;
|
|
position: relative;
|
|
}
|
|
|
|
.urlbar-input-box > *{
|
|
grid-area: 1 / 1;
|
|
z-index: 0;
|
|
}
|
|
|
|
.urlbar-input-box::after{
|
|
z-index: 2;
|
|
content: "";
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events:none;
|
|
background-position: left 3px;
|
|
background-repeat: no-repeat;
|
|
background-image: -moz-element(#statuspanel);
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
/* So here's the thing. This essentially disables the right click context-menu on urlbar textbox in Firefox 72. This is unfortunate but necessary due to grid layout - try disabling the rule and see what happens */
|
|
.urlbar-input-box > menupopup{ display: 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. */
|
|
|
|
/* Hide the status ovelay when urlbar is hovered */
|
|
#urlbar:hover .urlbar-input-box::after,
|
|
#urlbar[focused] .urlbar-input-box::after{
|
|
visibility: hidden;
|
|
/* Remove the image to get rid of -moz-element() related problems */
|
|
background-image: none !important
|
|
}
|
|
|
|
:root[uidensity="compact"] #urlbar .urlbar-input-box::after{ background-position-y: 0px }
|
|
:root[uidensity="touch"] #urlbar .urlbar-input-box::after{ background-position-y: 4px }
|
|
|
|
#statuspanel-label{
|
|
height:3em;
|
|
min-width: 1000px;
|
|
background-color: var(--toolbar-field-background-color, #f0f0f4) !important;
|
|
border: none !important;
|
|
font-size: 1.15em;
|
|
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{ background-color: var(--toolbar-bgcolor) }
|
|
|
|
#statuspanel{
|
|
color: var(--toolbar-field-color, black);
|
|
z-index: -1;
|
|
max-width: 100% !important;
|
|
padding-top: 0 !important;
|
|
}
|
|
#statuspanel[type="status"] { color: Highlight }
|
|
|
|
/* You will need to adjust these probably as they depend on OS, text size etc. */
|
|
#statuspanel-inner{
|
|
margin-left: -1px;
|
|
}
|
|
#statuspanel > #statuspanel-label{
|
|
padding-left: 3px !important;
|
|
}
|
|
#statuspanel-label{
|
|
margin-left: -3px !important;
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
/* This creates opaque layer to be shown in front of "hidden" real statuspanel */
|
|
.browserStack{
|
|
background-color: var(--tabpanel-background-color);
|
|
}
|
|
|
|
/* OPTIONAL FEATURES */
|
|
/* Uncomment to enable */
|
|
|
|
/*
|
|
Don't show common values to save space (useful for oneliner)
|
|
If you change the font size of the label then you'll have to modify these too
|
|
non-https links get a slight red hue
|
|
*/
|
|
|
|
/*
|
|
#statuspanel-label[value^="http:"]{ margin-left: -3.7ch !important; }
|
|
#statuspanel-label[value^="https:"]{ margin-left: -6.5ch !important; }
|
|
#statuspanel-label[value^="www"]{ margin-left: -4.9ch !important; }
|
|
#statuspanel-label[value^="http://www"]{ margin-left: -9.7ch !important; }
|
|
#statuspanel-label[value^="https://www"]{ margin-left: -10.9ch !important; }
|
|
*/
|
|
|
|
/* Center the statuspanel text. This might be useful with centered urlbar text */
|
|
/*
|
|
#statuspanel-label{
|
|
text-align: center;
|
|
-moz-box-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.urlbar-input-box::after{ background-position-x: center !important; }
|
|
*/
|