diff --git a/home/profiles/firefox/userChrome.css b/home/profiles/firefox/userChrome.css index 49fa8230..44e5368e 100644 --- a/home/profiles/firefox/userChrome.css +++ b/home/profiles/firefox/userChrome.css @@ -8,13 +8,29 @@ /*** NAV BAR ***/ /* Hide urlbar */ #nav-bar { - position: relative !important; - z-index: 2 !important; - height: 2px !important; - min-height: 2px !important; - margin-bottom: -2px !important; - opacity: 0 !important; - border: none !important; + /* customize this value. */ + --navbar-margin: -55px; + + margin-top: var(--navbar-margin); + margin-bottom: 0; + z-index: -100; + transition: all 0.3s ease !important; + opacity: 0; +} + +#navigator-toolbox:focus-within > #nav-bar, +#navigator-toolbox:hover > #nav-bar +{ + margin-top: 0; + margin-bottom: var(--navbar-margin); + z-index: 100; + opacity: 1; +} + +#main-window[chromehidden*="toolbar"] { + visibility: collapse; + height: -55px !important; + min-height: -55px !important; } /* But unfocus it when we invoke it with ctrl+L */ @@ -53,26 +69,25 @@ .tabbrowser-tab[visuallyselected="true"] { visibility: collapse; } - -/* Credits to https://github.com/MrOtherGuy for hthe following snippet*/ - /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ -/* Show sidebar only when the cursor is over it */ +/* Show sidebar only when the cursor is over it */ /* The border controlling sidebar width will be removed so you'll need to modify these values to change width */ #sidebar-box{ - --uc-sidebar-width: 44px; /* Only thing I (gale) changed */ + --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; + --browser-area-z-index-sidebar: 3; 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; + z-index: var(--browser-area-z-index-sidebar,3); } - #sidebar-box[positionend]{ direction: rtl } #sidebar-box[positionend] > *{ direction: ltr } @@ -83,33 +98,47 @@ See the above repository for updates as well as full license text. */ #sidebar-splitter{ display: none } -#sidebar-header{ overflow: hidden; /*color: var(--chrome-color, inherit) !important*/} +#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 115ms linear var(--uc-autohide-sidebar-delay) !important; + 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{ min-width: var(--uc-sidebar-hover-width) !important; transition-delay: 0ms !important } +#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;*/ + 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; + 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;*/ + background-color: inherit !important; border-inline: 1px solid rgb(80,80,80); border-inline-width: 0px 1px; } @@ -121,5 +150,11 @@ See the above repository for updates as well as full license text. */ /* 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; } +#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; +} +