style(next): fix broken backdrop blur when scrolling dropdowns

This commit is contained in:
Adorian Doran 2025-02-04 22:24:56 +02:00
parent 7514e2348c
commit bc82cdbd01
3 changed files with 13 additions and 2 deletions

View File

@ -27,7 +27,7 @@ const TPL = `
<span class="editability-active-desc">${t("editability_select.auto")}</span> <span class="editability-active-desc">${t("editability_select.auto")}</span>
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<div class="editability-dropdown dropdown-menu dropdown-menu-right"> <div class="editability-dropdown dropdown-menu dropdown-menu-right tn-dropdown-list">
<a class="dropdown-item" href="#" data-editability="auto"> <a class="dropdown-item" href="#" data-editability="auto">
<span class="check">&check;</span> <span class="check">&check;</span>
${t("editability_select.auto")} ${t("editability_select.auto")}

View File

@ -40,7 +40,7 @@ const TPL = `
<span class="note-type-desc"></span> <span class="note-type-desc"></span>
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<div class="note-type-dropdown dropdown-menu dropdown-menu-left"></div> <div class="note-type-dropdown dropdown-menu dropdown-menu-left tn-dropdown-list"></div>
</div> </div>
`; `;

View File

@ -951,6 +951,9 @@ body.mobile .note-title {
/* /*
* Menus * Menus
*
* Note: apply the "tn-dropdown-list" class for scrollable dropdown menus. Submenus are not
* supported when this class is used.
*/ */
.dropdown-menu { .dropdown-menu {
@ -982,6 +985,14 @@ body.desktop .dropdown-menu::before {
z-index: -1; z-index: -1;
} }
body.desktop .dropdown-menu.tn-dropdown-list {
backdrop-filter: var(--dropdown-backdrop-filter);
}
body.desktop .dropdown-menu.tn-dropdown-list::before {
display: none;
}
body.desktop .dropdown-submenu .dropdown-menu::before { body.desktop .dropdown-submenu .dropdown-menu::before {
content: unset; content: unset;
} }