Last active
July 25, 2024 05:29
-
-
Save t1m0t/034c568c000fb06c4fbb538cc6567a2e to your computer and use it in GitHub Desktop.
Firefox custom css for auto hide of top bar and side bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* tab bar auto hide */ | |
@-moz-document url(chrome://browser/content/browser.xul), | |
url(chrome://browser/content/browser.xhtml) { | |
/* show tabs toolbar when navigator-toolbox gets hovered */ | |
#main-window:not([customizing]) #navigator-toolbox:hover #TabsToolbar { | |
visibility: visible !important; | |
opacity: 1 !important; | |
margin-bottom: 0px; | |
transition: visibility 0.1s linear, opacity 0.1s linear, margin-bottom 0.1s linear; | |
} | |
/* hide tabs toolbar when unfocused */ | |
#main-window:not([customizing]) #TabsToolbar:not(:hover) { | |
visibility: collapse !important; | |
opacity: 0 !important; | |
margin-bottom: -40px; | |
transition: visibility 0.1s linear, opacity 0.1s linear, margin-bottom 0.1s linear; | |
} | |
#personal-bookmarks{ | |
padding-left: 40px; | |
} | |
#sidebar-box{ | |
--uc-sidebar-width: 40px; | |
--uc-sidebar-hover-width: 210px; | |
--uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ | |
--uc-autohide-transition-duration: 115ms; | |
--uc-autohide-transition-type: linear; | |
position: relative; | |
min-width: var(--uc-sidebar-width) !important; | |
width: var(--uc-sidebar-width) !important; | |
max-width: var(--uc-sidebar-width) !important; | |
z-index:1; | |
} | |
#sidebar-box[positionend]{ direction: rtl } | |
#sidebar-box[positionend] > *{ direction: ltr } | |
#sidebar-box[positionend]:-moz-locale-dir(rtl){ direction: ltr } | |
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ direction: rtl } | |
#main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 1px; } | |
#sidebar-splitter{ display: none } | |
#sidebar-header{ | |
overflow: hidden; | |
color: var(--chrome-color, inherit) !important; | |
padding-inline: 0 !important; | |
} | |
#sidebar-header::before, | |
#sidebar-header::after{ | |
content: ""; | |
display: flex; | |
padding-left: 8px; | |
} | |
#sidebar-header, | |
#sidebar{ | |
transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important; | |
min-width: var(--uc-sidebar-width) !important; | |
will-change: min-width; | |
} | |
#sidebar-box:hover > #sidebar-header, | |
#sidebar-box:hover > #sidebar{ | |
min-width: var(--uc-sidebar-hover-width) !important; | |
transition-delay: 0ms !important; | |
} | |
.sidebar-panel{ | |
background-color: transparent !important; | |
color: var(--newtab-text-primary-color) !important; | |
} | |
.sidebar-panel #search-box{ | |
-moz-appearance: none !important; | |
background-color: rgba(249,249,250,0.1) !important; | |
color: inherit !important; | |
} | |
/* Add sidebar divider and give it background */ | |
#sidebar, | |
#sidebar-header{ | |
background-color: inherit !important; | |
border-inline: 1px solid rgb(80,80,80); | |
border-inline-width: 0px 1px; | |
} | |
#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl), | |
#sidebar-box[positionend] > *{ | |
border-inline-width: 1px 0px; | |
} | |
/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */ | |
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{ | |
inset-inline: auto 0px !important; | |
} | |
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{ | |
margin-inline: 0px !important; | |
border-left-style: solid !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Don't forget to set
about:config
>toolkit.legacyUserProfileCustomizations.stylesheets
totrue
in firefox