Fix: admin theme emoji alignment (#6459)

* Fix: admin theme dropdown emoji alignment

* Sprites
This commit is contained in:
Joep Duin
2025-11-14 18:46:31 +01:00
committed by GitHub
parent 2ee40d6105
commit b519832086
3 changed files with 62 additions and 6 deletions

View File

@@ -58,3 +58,20 @@ img {
.abbr-badge {
cursor: help;
}
.theme-icon,
.theme-icon-active {
display: inline-flex;
flex: 0 0 1.75em;
justify-content: center;
}
.theme-icon svg,
.theme-icon-active svg {
width: 1.25em;
height: 1.25em;
min-width: 1.25em;
min-height: 1.25em;
display: block;
overflow: visible;
}

View File

@@ -106,7 +106,11 @@ const showActiveTheme = (theme, focus = false) => {
const themeSwitcherText = document.querySelector("#bd-theme-text");
const activeThemeIcon = document.querySelector(".theme-icon-active use");
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
const svgOfActiveBtn = btnToActive.querySelector("span use").textContent;
if (!btnToActive) {
return;
}
const btnIconUse = btnToActive ? btnToActive.querySelector("[data-theme-icon-use]") : null;
const iconHref = btnIconUse ? btnIconUse.getAttribute("href") || btnIconUse.getAttribute("xlink:href") : null;
document.querySelectorAll("[data-bs-theme-value]").forEach(element => {
element.classList.remove("active");
@@ -115,7 +119,12 @@ const showActiveTheme = (theme, focus = false) => {
btnToActive.classList.add("active");
btnToActive.setAttribute("aria-pressed", "true");
activeThemeIcon.textContent = svgOfActiveBtn;
if (iconHref && activeThemeIcon) {
activeThemeIcon.setAttribute("href", iconHref);
activeThemeIcon.setAttribute("xlink:href", iconHref);
}
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);