From 4293efba0a31cb3e833b9fadab0f83caf8fcb11e Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Fri, 17 Jan 2020 18:17:50 +0200 Subject: [PATCH] Make #nav-bar fully transparent when not focused --- chrome/show_navbar_on_focus_only.css | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/chrome/show_navbar_on_focus_only.css b/chrome/show_navbar_on_focus_only.css index 8fea7c3..ed70a92 100644 --- a/chrome/show_navbar_on_focus_only.css +++ b/chrome/show_navbar_on_focus_only.css @@ -9,7 +9,7 @@ /* -moz-appearance: none on titlebar breaks window margins, so re-adjust that */ @media (-moz-os-version: windows-win10){ - :root[sizemode="maximized"]:not([inDOMFullscreen]){ margin-top: 8px !important; } + :root[sizemode="maximized"]:not([inDOMFullscreen]){ margin-top: 8px !important; } @media screen and (min-resolution: 1.25dppx){ :root[sizemode="maximized"]:not([inDOMFullscreen]){ margin-top: 7px !important; } @@ -23,11 +23,16 @@ } #nav-bar:not([customizing]){ - transform: rotateX(90deg); - transition: transform 67ms linear !important; - z-index: 3; + transform: rotateX(90deg); + transition: transform 67ms linear, opacity 0ms linear 67ms !important; + opacity: 0; + z-index: 3; +} +#nav-bar:focus-within{ + transform: rotateX(0deg); + opacity: 1; + transition-delay: 0ms, 0ms !important; } -#nav-bar:focus-within{ transform: rotateX(0deg) } /* This enables compatibility with autohide_bookmarks_toolbar.css */ #PersonalToolbar{ margin-top: var(--tab-min-height) !important; } \ No newline at end of file