firefox: fix navbar css
add delay to when navbar collapses
This commit is contained in:
parent
1c29de52d3
commit
35af389158
1 changed files with 131 additions and 113 deletions
|
|
@ -7,139 +7,140 @@
|
|||
in
|
||||
#css
|
||||
''
|
||||
:root {
|
||||
:root {
|
||||
|
||||
--clr-menu: #${color.layout.menu};
|
||||
--clr-fg: #${color.typography.text};
|
||||
--clr-secondary: #${color.secondary.base};
|
||||
--clr-menu: #${color.layout.menu};
|
||||
--clr-fg: #${color.typography.text};
|
||||
--clr-secondary: #${color.secondary.base};
|
||||
|
||||
|
||||
--border: 1px solid var(--clr-fg);
|
||||
--border-active: 1px solid var(--clr-fg);
|
||||
--border-inactive: 1px solid var(--clr-secondary);
|
||||
--border: 1px solid var(--clr-fg);
|
||||
--border-active: 1px solid var(--clr-fg);
|
||||
--border-inactive: 1px solid var(--clr-secondary);
|
||||
|
||||
--font-base: ${fonts.monospace.family};
|
||||
--font-base: ${fonts.monospace.family};
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
font-family: ${fonts.monospace.family};
|
||||
}
|
||||
#nav-bar {
|
||||
border: var(--border) !important;
|
||||
background-color: var(--clr-menu) !important;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
#urlbar {
|
||||
text-align: center;
|
||||
}
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
font-family: ${fonts.monospace.family};
|
||||
}
|
||||
#nav-bar {
|
||||
border: var(--border) !important;
|
||||
background-color: var(--clr-menu) !important;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
#urlbar {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.browser-toolbar {
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
.browser-toolbar {
|
||||
padding-bottom: 1px !important;
|
||||
}
|
||||
|
||||
#urlbar-background {
|
||||
background-color: transparent !important;
|
||||
border: unset !important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
#urlbar-background {
|
||||
background-color: transparent !important;
|
||||
border: unset !important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
|
||||
#urlbar-container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
#urlbar-container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.urlbarView {
|
||||
text-align: start;
|
||||
border: var(--border) !important;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
background-color: var(--clr-menu);
|
||||
}
|
||||
.urlbarView {
|
||||
text-align: start;
|
||||
border: var(--border) !important;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
background-color: var(--clr-menu);
|
||||
}
|
||||
|
||||
.urlbar-input-container {
|
||||
margin: 0px !important;
|
||||
}
|
||||
.urlbar-input-container {
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
#identity-icon {
|
||||
color: red !important;
|
||||
}
|
||||
#identity-icon {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
#forward-button,
|
||||
#stop-button,
|
||||
#star-button-box,
|
||||
#translations-button,
|
||||
#reload-button,
|
||||
#identity-box,
|
||||
#tracking-protection-icon-container,
|
||||
#save-to-pocket-button,
|
||||
.urlbar-page-action,
|
||||
.urlbar-go-button,
|
||||
/* firefox account button */
|
||||
#fxa-toolbar-menu-button,
|
||||
/* hamburger menu icon */
|
||||
#PanelUI-button,
|
||||
#PersonalToolbar
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
#forward-button,
|
||||
#stop-button,
|
||||
#star-button-box,
|
||||
#translations-button,
|
||||
#reload-button,
|
||||
#identity-box,
|
||||
#tracking-protection-icon-container,
|
||||
#save-to-pocket-button,
|
||||
.urlbar-page-action,
|
||||
.urlbar-go-button,
|
||||
/* firefox account button */
|
||||
#fxa-toolbar-menu-button,
|
||||
/* hamburger menu icon */
|
||||
#PanelUI-button,
|
||||
#PersonalToolbar
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.titlebar-buttonbox-container,
|
||||
.tab-close-button,
|
||||
.titlebar-spacer,
|
||||
#tabs-newtab-button,
|
||||
#alltabs-button,
|
||||
#firefox-view-button,
|
||||
#new-tab-button {
|
||||
display: none;
|
||||
}
|
||||
.titlebar-buttonbox-container,
|
||||
.tab-close-button,
|
||||
.titlebar-spacer,
|
||||
#tabs-newtab-button,
|
||||
#alltabs-button,
|
||||
#firefox-view-button,
|
||||
#new-tab-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#tabbrowser-tabs {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
#tabbrowser-tabs {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
margin-inline: 0px !important;
|
||||
border: unset !important;
|
||||
border-bottom: var(--border-inactive) !important;
|
||||
}
|
||||
margin-inline: 0px !important;
|
||||
border: unset !important;
|
||||
border-bottom: var(--border-inactive) !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
padding: 3px !important;
|
||||
padding-left: 3px !important;
|
||||
--tab-label-mask-size: unset !important;
|
||||
}
|
||||
.tabbrowser-tab {
|
||||
padding: 3px !important;
|
||||
padding-left: 3px !important;
|
||||
--tab-label-mask-size: unset !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[pinned] {
|
||||
padding: 3px !important;
|
||||
}
|
||||
.tabbrowser-tab[pinned] {
|
||||
padding: 3px !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
|
||||
margin-inline-start: 0px !important;
|
||||
}
|
||||
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
|
||||
margin-inline-start: 0px !important;
|
||||
}
|
||||
|
||||
.tab-stack {
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
.tab-background {
|
||||
border-radius: 0px;
|
||||
border: var(--border-inactive);
|
||||
}
|
||||
.tab-background[selected] {
|
||||
border: var(--border-active);
|
||||
}
|
||||
.tab-stack {
|
||||
margin-inline: 0 !important;
|
||||
}
|
||||
.tab-background {
|
||||
border-radius: 0px;
|
||||
border: var(--border-inactive);
|
||||
}
|
||||
.tab-background[selected] {
|
||||
border: var(--border-active);
|
||||
}
|
||||
|
||||
#TabsToolbar {
|
||||
padding-left: 0px !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#TabsToolbar {
|
||||
padding-left: 0px !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/8957a709e3abb7242fa89339c684f8027e66774c/chrome/autohide_main_toolbar.css#L46 */
|
||||
|
||||
root{
|
||||
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/8957a709e3abb7242fa89339c684f8027e66774c/chrome/autohide_main_toolbar.css#L46 */
|
||||
:root{
|
||||
--uc-navbar-transform: -40px;
|
||||
--uc-autohide-toolbar-delay: 1s;
|
||||
--uc-autohide-toolbar-duration: 100ms;
|
||||
}
|
||||
:root[uidensity="compact"]{ --uc-navbar-transform: -34px }
|
||||
|
||||
|
|
@ -154,8 +155,9 @@ in
|
|||
|
||||
#nav-bar:not([customizing]){
|
||||
opacity: 0;
|
||||
transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay) !important;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
}
|
||||
#titlebar{ position: relative; z-index: 3 }
|
||||
|
||||
|
|
@ -166,34 +168,48 @@ in
|
|||
#tabbrowser-tabbox{
|
||||
z-index: auto !important;
|
||||
}
|
||||
/* Show when toolbox is focused, like when urlbar has received focus */
|
||||
#navigator-toolbox:focus-within > .browser-toolbar{
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
/* Show when toolbox is hovered */
|
||||
#titlebar:hover ~ .browser-toolbar,
|
||||
.browser-titlebar:hover ~ :is(#nav-bar,#PersonalToolbar),
|
||||
#nav-bar:hover,
|
||||
#nav-bar:hover + #PersonalToolbar{
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
|
||||
transition-delay: 0s !important;
|
||||
}
|
||||
:root[sessionrestored] #urlbar[popover]{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay);
|
||||
transform: translateY(var(--uc-navbar-transform));
|
||||
}
|
||||
#mainPopupSet:has(> [role="group"][panelopen]) ~ toolbox #urlbar[popover],
|
||||
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#tab-preview-panel)) ~ toolbox #urlbar[popover],
|
||||
.browser-titlebar:is(:hover,:focus-within) ~ #nav-bar #urlbar[popover],
|
||||
#nav-bar:is(:hover,:focus-within) #urlbar[popover],
|
||||
#urlbar-container > #urlbar[popover]:is([focused],[open]){
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transition-delay: 0ms;
|
||||
transform: translateY(0);
|
||||
}
|
||||
#mainPopupSet:has(> [role="group"][panelopen]) ~ #navigator-toolbox > .browser-toolbar{
|
||||
#urlbar-container > #urlbar[popover]:is([focused],[open]){
|
||||
transition-duration: 100ms; /* Faster when focused */
|
||||
}
|
||||
/* This ruleset is separate, because not having :has support breaks other selectors as well */
|
||||
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#tab-preview-panel)) ~ #navigator-toolbox > .browser-toolbar{
|
||||
transition-delay: 33ms !important;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
/* If tabs are in sidebar then nav-bar doesn't normally have its own background - so we nee to add it back */
|
||||
#nav-bar.browser-titlebar{
|
||||
background: inherit;
|
||||
}
|
||||
|
|
@ -201,8 +217,10 @@ in
|
|||
background-position-y: -28px; /* best guess, could vary */
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
/* Bookmarks toolbar needs so extra rules */
|
||||
#PersonalToolbar{ transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay) !important; position: relative; z-index: 1 }
|
||||
|
||||
/* Move up the content view */
|
||||
:root[sessionrestored]:not([inFullscreen],[chromehidden~="toolbar"]) > body > #browser{ margin-top: var(--uc-navbar-transform); }
|
||||
|
||||
|
||||
''
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue