Refactor: 优化配置编辑器模态框样式与结构

- 调整模态框 CSS (`app/static/css/config_editor.css`):
    - 将 `position` 改回 `fixed` 以确保其相对于视口定位。
    - 移除 `overflow: auto`,因为模态框内容通常不需要滚动条。
    - 移除 `backdrop-filter: blur(5px)` 以简化背景效果。
    - 添加 `align-items: center` 和 `justify-content: center` 以在 flex 容器中更好地居中模态框。
- 调整模态框 HTML (`app/templates/config_editor.html`):
    - 将 `apiKeyModal` 和 `resetConfirmModal` 两个模态框的 HTML 结构从主配置表单容器中移出,放置到 `</body>` 标签之前。这有助于改善 DOM 结构,并可能解决潜在的层叠或定位问题。

这些更改旨在改进配置编辑器页面上模态框的显示效果、定位方式和 DOM 结构。
This commit is contained in:
snaily
2025-04-05 23:14:37 +08:00
parent 5fc59a00d0
commit d0cc48ad63
2 changed files with 32 additions and 30 deletions

View File

@@ -616,15 +616,17 @@ input:checked + .toggle-slider:before {
/* Modal Styles */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
position: fixed; /* Change back to fixed */
z-index: 1001; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
/* overflow: auto; Removed */
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
backdrop-filter: blur(5px);
/* backdrop-filter: blur(5px); Removed */
align-items: center;
justify-content: center;
}
.modal.show {