diff --git a/module/webui/scripts/language.js b/module/webui/scripts/language.js
index 4c586ca..2904aa5 100644
--- a/module/webui/scripts/language.js
+++ b/module/webui/scripts/language.js
@@ -93,8 +93,10 @@ export function setupLanguageMenu() {
}
});
function openLanguageMenu() {
- languageMenu.classList.add("show");
languageOverlay.style.display = 'flex';
+ setTimeout(() => {
+ languageMenu.classList.add("show");
+ }, 10);
}
function closeLanguageMenu() {
languageMenu.classList.remove("show");
diff --git a/module/webui/scripts/update.js b/module/webui/scripts/update.js
index 232ca6d..e2eb953 100644
--- a/module/webui/scripts/update.js
+++ b/module/webui/scripts/update.js
@@ -60,8 +60,8 @@ function setupUpdateMenu() {
.filter(line => line.trim() !== '')
.map(line => line.startsWith('- ') ? line.slice(2) : line);
const formattedChangelog = `
-
${lines[0]}
- ${lines.slice(1).map(line => `${line}`).join('')}
+ ${lines[0]}
+ ${lines.slice(1).map(line => `${line}`).join('')}
`;
releaseNotes.innerHTML = formattedChangelog;
openUpdateMenu();
diff --git a/module/webui/styles/header.css b/module/webui/styles/header.css
index 313a689..d2b9c8f 100644
--- a/module/webui/styles/header.css
+++ b/module/webui/styles/header.css
@@ -61,7 +61,6 @@
.language-menu {
display: flex;
- padding: 3px 10px;
flex-direction: column;
position: absolute;
right: 0;
@@ -70,23 +69,22 @@
z-index: 1800;
border: 1px solid #ccc;
border-radius: 8px;
+ box-sizing: border-box;
opacity: 0;
- visibility: hidden;
max-height: calc(100vh - 50px);
overflow-y: auto;
- transform: translateY(-10px);
+ transform: translateY(-30px) scale(0);
+ transform-origin: top right;
transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.language-menu.show {
- display: block;
opacity: 1;
- visibility: visible;
- transform: translateY(0);
+ transform: translateY(0) scale(1);
}
.language-option {
- padding: 8px 5px;
+ padding: 8px 10px;
text-align: left;
color: #333;
background-color: white;
@@ -94,14 +92,31 @@
font-size: 16px;
width: 100%;
white-space: nowrap;
- border-bottom: 1px solid #ccc;
position: relative;
overflow: hidden;
user-select: none;
}
+.language-option::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 10px;
+ width: calc(100% - 20px);
+ height: 1px;
+ background-color: #ccc;
+}
+
+.language-option:last-child::after {
+ content: none;
+}
+
+.language-option:first-child {
+ padding-top: 10px;
+}
+
.language-option:last-child {
- border-bottom: none;
+ padding-bottom: 10px;
}
.language-overlay {
@@ -228,7 +243,7 @@
border: 1px solid #6E6E6E;
}
- .language-option {
- border-bottom: 1px solid #6E6E6E;
+ .language-option::after {
+ background-color: #6E6E6E;
}
}
\ No newline at end of file
diff --git a/module/webui/styles/search_menu.css b/module/webui/styles/search_menu.css
index 08038b7..db29331 100644
--- a/module/webui/styles/search_menu.css
+++ b/module/webui/styles/search_menu.css
@@ -98,9 +98,9 @@
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ box-sizing: border-box;
display: flex;
position: absolute;
- padding: 5px 12px;
top: 110%;
right: 0;
z-index: 1200;
@@ -131,17 +131,33 @@
}
.menu-options li {
- cursor: default;
- padding: 12px 4px;
+ padding: 12px 15px;
text-align: left;
background-color: white;
- border-bottom: 1px solid #ccc;
position: relative;
overflow: hidden;
}
+.menu-options li::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 15px;
+ width: calc(100% - 30px);
+ height: 1px;
+ background-color: #ccc;
+}
+
+.menu-options li:last-child::after {
+ content: none;
+}
+
+.menu-options li:first-child {
+ padding-top: 16px;
+}
+
.menu-options li:last-child {
- border-bottom: none;
+ padding-bottom: 16px;
}
.menu-overlay {
@@ -181,6 +197,9 @@
.menu-options li {
background-color: #343434;
- border-bottom: 1px solid #6E6E6E;
+ }
+
+ .menu-options li::after {
+ background-color: #6E6E6E
}
}
\ No newline at end of file