ooks/ooknet
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

firefox: fix navbar css

Browse source 
add delay to when navbar collapses
This commit is contained in:
ooks-io 2025-01-09 21:57:59 +11:00
parent 1c29de52d3
commit 35af389158
1 changed files with 131 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

244
modules/home/workstation/browser/firefox/theme/ooksfox.nix
View file

@ -7,139 +7,140 @@
in in
#css #css
'' ''
:root { :root {
--clr-menu: #${color.layout.menu}; --clr-menu: #${color.layout.menu};
--clr-fg: #${color.typography.text}; --clr-fg: #${color.typography.text};
--clr-secondary: #${color.secondary.base}; --clr-secondary: #${color.secondary.base};
--border: 1px solid var(--clr-fg); --border: 1px solid var(--clr-fg);
--border-active: 1px solid var(--clr-fg); --border-active: 1px solid var(--clr-fg);
--border-inactive: 1px solid var(--clr-secondary); --border-inactive: 1px solid var(--clr-secondary);
--font-base: ${fonts.monospace.family}; --font-base: ${fonts.monospace.family};
} }
* { * {
border-radius: 0 !important; border-radius: 0 !important;
font-family: ${fonts.monospace.family}; font-family: ${fonts.monospace.family};
} }
#nav-bar { #nav-bar {
border: var(--border) !important; border: var(--border) !important;
background-color: var(--clr-menu) !important; background-color: var(--clr-menu) !important;
margin-top: 0px !important; margin-top: 0px !important;
} }
#urlbar { #urlbar {
text-align: center; text-align: center;
} }
.browser-toolbar { .browser-toolbar {
padding-bottom: 1px !important; padding-bottom: 1px !important;
} }
#urlbar-background { #urlbar-background {
background-color: transparent !important; background-color: transparent !important;
border: unset !important; border: unset !important;
box-shadow: unset !important; box-shadow: unset !important;
} }
#urlbar-container { #urlbar-container {
padding: 0 !important; padding: 0 !important;
} }
.urlbarView { .urlbarView {
text-align: start; text-align: start;
border: var(--border) !important; border: var(--border) !important;
margin: 0; margin: 0;
padding: 0 !important; padding: 0 !important;
background-color: var(--clr-menu); background-color: var(--clr-menu);
} }
.urlbar-input-container { .urlbar-input-container {
margin: 0px !important; margin: 0px !important;
} }
#identity-icon { #identity-icon {
color: red !important; color: red !important;
} }
#forward-button, #forward-button,
#stop-button, #stop-button,
#star-button-box, #star-button-box,
#translations-button, #translations-button,
#reload-button, #reload-button,
#identity-box, #identity-box,
#tracking-protection-icon-container, #tracking-protection-icon-container,
#save-to-pocket-button, #save-to-pocket-button,
.urlbar-page-action, .urlbar-page-action,
.urlbar-go-button, .urlbar-go-button,
/* firefox account button */ /* firefox account button */
#fxa-toolbar-menu-button, #fxa-toolbar-menu-button,
/* hamburger menu icon */ /* hamburger menu icon */
#PanelUI-button, #PanelUI-button,
#PersonalToolbar #PersonalToolbar
{ {
display: none; display: none;
} }
.titlebar-buttonbox-container, .titlebar-buttonbox-container,
.tab-close-button, .tab-close-button,
.titlebar-spacer, .titlebar-spacer,
#tabs-newtab-button, #tabs-newtab-button,
#alltabs-button, #alltabs-button,
#firefox-view-button, #firefox-view-button,
#new-tab-button { #new-tab-button {
display: none; display: none;
} }
#tabbrowser-tabs { #tabbrowser-tabs {
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
margin-inline: 0px !important; margin-inline: 0px !important;
border: unset !important; border: unset !important;
border-bottom: var(--border-inactive) !important; border-bottom: var(--border-inactive) !important;
} }
.tabbrowser-tab { .tabbrowser-tab {
padding: 3px !important; padding: 3px !important;
padding-left: 3px !important; padding-left: 3px !important;
--tab-label-mask-size: unset !important; --tab-label-mask-size: unset !important;
} }
.tabbrowser-tab[pinned] { .tabbrowser-tab[pinned] {
padding: 3px !important; padding: 3px !important;
} }
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
margin-inline-start: 0px !important; margin-inline-start: 0px !important;
} }
.tab-stack { .tab-stack {
margin-inline: 0 !important; margin-inline: 0 !important;
} }
.tab-background { .tab-background {
border-radius: 0px; border-radius: 0px;
border: var(--border-inactive); border: var(--border-inactive);
} }
.tab-background[selected] { .tab-background[selected] {
border: var(--border-active); border: var(--border-active);
} }
#TabsToolbar { #TabsToolbar {
padding-left: 0px !important; padding-left: 0px !important;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/8957a709e3abb7242fa89339c684f8027e66774c/chrome/autohide_main_toolbar.css#L46 */ /* https://github.com/MrOtherGuy/firefox-csshacks/blob/8957a709e3abb7242fa89339c684f8027e66774c/chrome/autohide_main_toolbar.css#L46 */
:root{
root{
--uc-navbar-transform: -40px; --uc-navbar-transform: -40px;
--uc-autohide-toolbar-delay: 1s;
--uc-autohide-toolbar-duration: 100ms;
} }
:root[uidensity="compact"]{ --uc-navbar-transform: -34px } :root[uidensity="compact"]{ --uc-navbar-transform: -34px }
@ -154,8 +155,9 @@ in
#nav-bar:not([customizing]){ #nav-bar:not([customizing]){
opacity: 0; 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; position: relative;
z-index: 2; z-index: 1;
} }
#titlebar{ position: relative; z-index: 3 } #titlebar{ position: relative; z-index: 3 }
@ -166,34 +168,48 @@ in
#tabbrowser-tabbox{ #tabbrowser-tabbox{
z-index: auto !important; z-index: auto !important;
} }
/* Show when toolbox is focused, like when urlbar has received focus */
#navigator-toolbox:focus-within > .browser-toolbar{ #navigator-toolbox:focus-within > .browser-toolbar{
transform: translateY(0); transform: translateY(0);
opacity: 1; 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, #titlebar:hover ~ .browser-toolbar,
.browser-titlebar:hover ~ :is(#nav-bar,#PersonalToolbar), .browser-titlebar:hover ~ :is(#nav-bar,#PersonalToolbar),
#nav-bar:hover, #nav-bar:hover,
#nav-bar:hover + #PersonalToolbar{ #nav-bar:hover + #PersonalToolbar{
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
transition-delay: 0s !important;
} }
:root[sessionrestored] #urlbar[popover]{ :root[sessionrestored] #urlbar[popover]{
opacity: 0; opacity: 0;
pointer-events: none; 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)); 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], .browser-titlebar:is(:hover,:focus-within) ~ #nav-bar #urlbar[popover],
#nav-bar:is(:hover,:focus-within) #urlbar[popover], #nav-bar:is(:hover,:focus-within) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused],[open]){ #urlbar-container > #urlbar[popover]:is([focused],[open]){
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
transition-delay: 0ms;
transform: translateY(0); 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); transform: translateY(0);
opacity: 1; 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{ #nav-bar.browser-titlebar{
background: inherit; background: inherit;
} }
@ -201,8 +217,10 @@ in
background-position-y: -28px; /* best guess, could vary */ background-position-y: -28px; /* best guess, could vary */
border-top: none !important; 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 */ /* Move up the content view */
:root[sessionrestored]:not([inFullscreen],[chromehidden~="toolbar"]) > body > #browser{ margin-top: var(--uc-navbar-transform); } :root[sessionrestored]:not([inFullscreen],[chromehidden~="toolbar"]) > body > #browser{ margin-top: var(--uc-navbar-transform); }
'' ''