Animated Search Modal with Blurred Background

[elringus]

Demo: https://naninovel.github.io/guide

vid.1.mp4

To achieve the same effect just add following to the CSS:

:root {
    --nav-c-bg: rgba(255, 255, 255, 0.5);
}

.dark {
    --nav-c-bg: rgba(30, 30, 32, 0.5);
}

.DocSearch-Container {
    background-color: transparent !important;
    transition: background-color .2s ease;
}

.DocSearch--active .DocSearch-Container {
    background-color: var(--nav-c-bg) !important;
}

.DocSearch-Modal {
    opacity: 0;
    transform: translateY(-15%) scale(0.95);
    transition: opacity, transform .2s ease;
}

.DocSearch--active .DocSearch-Modal {
    opacity: 1;
    transform: scale(1);
}

.DocSearch-Container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: backdrop-filter .2s ease;
    backdrop-filter: blur(5px) opacity(0);
}

.DocSearch--active .DocSearch-Container::after {
    backdrop-filter: blur(5px) opacity(1);
}


/* Only in case you want to prevent page from "jumping" when starting search. */
/* Be aware, that this will make page scrollable while search modal is visible. */
@media (min-width: 769px) {
    .DocSearch--active {
        overflow: unset !important;
    }
}

The unfortunate thing though is that the search div gets destroyed imminently (probably on the aloglia js snippet side, as I wasn't able to find the behavior on vitepress side) after exiting or selecting search result, so it's not possible to apply exit animation. If anyone have any idea on how the div removal can be delayed w/o modifying the aloglia js snippet please share.

[alephpi]

cool! markup