diff --git a/assets/styles/layout/_responsive.scss b/assets/styles/layout/_responsive.scss index 1e245b0cb..901154ab9 100644 --- a/assets/styles/layout/_responsive.scss +++ b/assets/styles/layout/_responsive.scss @@ -29,10 +29,6 @@ margin-right: 0; } - #docsearch { - margin-right: .5rem; - } - .DocSearch-Button { width: 2rem; height: 2rem; @@ -76,9 +72,11 @@ z-index: 1102; height: 100%; transform: translateX(-100%); - background-color: var(--surface-overlay); + background-color: var(--mobile-menu-bg); + backdrop-filter: blur(20px); width: 300px; opacity: 0; + box-shadow: 0px 0px 50px 5px rgba(16, 185, 129, .2); nav { padding: 1rem 1rem; diff --git a/assets/styles/layout/landing/_dark.scss b/assets/styles/layout/landing/_dark.scss index 7a25ad83a..55930df9e 100644 --- a/assets/styles/layout/landing/_dark.scss +++ b/assets/styles/layout/landing/_dark.scss @@ -1,6 +1,7 @@ .layout-dark { --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png); --topbar-border: var(--surface-border); + --mobile-menu-bg: rgba(0,0,0,.3); --home-highlight-color:#10b981; --home-highlight-darker-color:#059669; --home-highlight-fore-color:#ffffff; diff --git a/assets/styles/layout/landing/_light.scss b/assets/styles/layout/landing/_light.scss index fea70b953..0315351a2 100644 --- a/assets/styles/layout/landing/_light.scss +++ b/assets/styles/layout/landing/_light.scss @@ -1,6 +1,7 @@ .layout-light { --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png); --topbar-border: rgba(0,0,0,.05); + --mobile-menu-bg: var(--surface-overlay); --home-highlight-color:#10b981; --home-highlight-darker-color:#059669; --home-highlight-fore-color:#ffffff;