hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix backdrop blur of dropdowns (fixes #91)

Browse Source
This commit is contained in:
daudix
2024-09-30 06:21:52 +03:00
parent 76fa622170
commit 830e48c198
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Recolor list bullets in GitHub-style alerts. - Recolor list bullets in GitHub-style alerts.
### Fixed
- Fix backdrop blur of dropdowns and search container in Chrome (#77 and #91).
## [5.3.0](https://codeberg.org/daudix/duckquill/compare/v5.2.0...v5.3.0) ## [5.3.0](https://codeberg.org/daudix/duckquill/compare/v5.2.0...v5.3.0)
### Added ### Added

19
sass/_nav.scss
View File

@ -1,19 +1,27 @@
#site-nav { #site-nav {
-webkit-backdrop-filter: var(--blur);
position: sticky; position: sticky;
z-index: 999; z-index: 999;
backdrop-filter: var(--blur);
margin: 1rem auto; margin: 1rem auto;
inset-block-start: 1rem; inset-block-start: 1rem;
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: 1.625rem; border-radius: 1.625rem;
background-color: var(--nav-bg);
max-width: 90%; max-width: 90%;
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
position: static; position: static;
} }
&::before {
-webkit-backdrop-filter: var(--blur);
position: absolute;
z-index: -1;
backdrop-filter: var(--blur);
inset: 0;
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: 1.625rem;
background-color: var(--nav-bg);
content: '';
}
nav { nav {
padding: 0.5rem; padding: 0.5rem;
@ -314,8 +322,7 @@
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border: none; border: none;
border-radius: 999px; border-radius: 999px;
background-image: none; background: var(--fg-muted-1);
background-color: var(--fg-muted-1);
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
width: 100%; width: 100%;
color: inherit; color: inherit;