add language selector

This commit is contained in:
geekifan
2025-04-27 18:25:23 +08:00
parent fb01f5b43d
commit e93d7e907d
4 changed files with 75 additions and 6 deletions

View File

@ -247,6 +247,76 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
}
}
} /* .sidebar-bottom */
.lang-selector-wrapper {
padding: 0.35rem;
margin: 0.15rem 0;
text-align: center;
}
/* Dropdown container */
.lang-dropdown {
position: relative;
display: inline-block;
width: auto;
min-width: 120px;
max-width: 80%;
}
/* Select input element */
.lang-select {
/* Basic styles */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
// padding: 0.5rem 2rem 0.5rem 1rem;
border: none;
/* Font and colors */
font-size: 0.95rem;
font-weight: 600;
color: var(--sidebar-muted);
background-color: var(--sidebar-bg);
/* Shape and interaction */
border-radius: var(--bs-border-radius, 0.375rem);
cursor: pointer;
transition: all 0.2s ease;
/* Add arrow icon */
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
}
/* Hover state */
.lang-select:hover {
color: var(--sidebar-active);
background-color: var(--sidebar-hover);
}
/* Focus state */
.lang-select:focus {
outline: 2px solid var(--sidebar-active);
outline-offset: 2px;
color: var(--sidebar-active);
}
/* Firefox browser support */
.lang-select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 var(--sidebar-muted);
}
/* IE browser support */
.lang-select::-ms-expand {
display: none;
}
.no-hover:hover {
background-color: var(--sidebar-bg) !important;
}
} /* #sidebar */
[#{$sidebar-display}] {