acrylic url bar + bookmarks bar auto hide

userChrome.css

:root {
    --depth-1: 0 4px 12px rgba(0, 0, 0, .03), 0 1px 4px rgba(0, 0, 0, .009);
    --depth-2: 0 8px 18px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .025);
    --con-primary: rgba(255, 255, 255, 1);
    --con-primary-b: rgba(24, 26, 27, 1);
}

@supports (backdrop-filter: blur(20px)) {
    :root {
        --filter-glass: blur(20px) saturate(180%);
        --con-primary: rgba(255, 255, 255, .7);
        --con-primary2: rgba(255, 255, 255, .5);
        --con-primary-b: rgba(24, 26, 27, .5);
        --con-primary-b-2: rgba(24, 26, 27, .2);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --filter-glass: blur(20px) saturate(180%);
        --con-primary: rgba(71, 71, 73, .5);
        --con-primary-b: rgba(24, 26, 27, .5);
        --con-primary-b-2: rgba(24, 26, 27, .2);
    }
}

#urlbar-background {
    /* background-image: url(./noise-512x512.png) !important; */
    background-image: url(./image/noise-512x512.png) !important;
    background: var(--con-primary) !important;
    /* backdrop-filter: var(--filter-glass)!important; */
    box-shadow: var(--depth-1) !important;
}
.urlbarView.megabar {
    margin-inline: 0px !important;
    width: 100% !important;
    margin-bottom: 1px;
    box-shadow: var(--depth-2) !important;
}
.urlbarView.megabar #urlbar-results {
    backdrop-filter: var(--filter-glass)!important;
    /* box-shadow: var(--depth-2) !important; */
    padding-left: 3px !important;
    padding-right: 3.5px !important;
    padding-top: 3px !important;
}
/* 
    书签栏
*/
#PersonalToolbar {
    background-image: url(./image/noise-512x512.png) !important;
	background: var(--con-primary) !important;
	backdrop-filter: blur(10px) !important;
    box-shadow: var(--depth-2) !important;
}

#PersonalToolbar{
    --uc-bm-height: 22px; /* Might need to adjust if the toolbar has other buttons */
    --uc-bm-padding: 6px; /* Vertical padding to be applied to bookmarks */
}

:root[uidensity="compact"] #PersonalToolbar{ --uc-bm-padding: 1px }
:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }


  #PersonalToolbar:not([customizing]){
    margin-bottom: calc(2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
    transform: rotateX(90deg);
    transform-origin: top;
    transition: transform 135ms linear 600ms !important;
    z-index: 1;
  
  }
  #PlacesToolbarItems > .bookmark-item{ padding-block: var(--uc-bm-padding) !important; }
  
  
  /* SELECT ONE BOOKMARKS TOOLBAR BEHAVIOR */
  
  /* ONE | Show when urlbar is focused 
       #nav-bar:focus-within + #PersonalToolbar{ 
       transition-delay: 100ms !important; 
       transform: rotateX(0); 
   } */
  
  /* TWO | Show when cursor is over the toolbar area 
  My Personal Choice
  */
  #navigator-toolbox:hover > #PersonalToolbar{
    transition-delay: 100ms !important;
    transform: rotateX(0);
  }