alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

Enhance modal styles and add scrollbar width calculation for improved layout

Browse Source
This commit is contained in:
Will Miao
2025-02-17 23:23:20 +08:00
parent 02e901ac2e
commit 425ba1fd36
2 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/css/components/modal.css
View File

@@ -9,11 +9,16 @@
background: rgba(0, 0, 0, 0.8);
z-index: var(--z-modal);
overflow-y: auto; /* 允许模态窗口内容滚动 */
-webkit-overflow-scrolling: touch; /* 为iOS设备提供平滑滚动 */
}
/* 当模态窗口打开时，禁止body滚动 */
body.modal-open {
overflow: hidden;
height: 100vh;
position: fixed;
width: 100%;
padding-right: var(--scrollbar-width, 0px); /* 补偿滚动条消失导致的页面偏移 */
}
.modal-content {
@@ -25,6 +30,7 @@ body.modal-open {
padding: var(--space-3);
border: 1px solid var(--lora-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transform: translateZ(0); /* 创建新的堆叠上下文 */
}
/* Delete Modal specific styles */

12
templates/loras.html
View File

@@ -32,6 +32,18 @@
<!-- 添加资源加载策略 -->
<link rel="preconnect" href="https://civitai.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<script>
// 计算滚动条宽度并设置CSS变量
document.addEventListener('DOMContentLoaded', () => {
const scrollDiv = document.createElement('div');
scrollDiv.style.cssText = 'width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px;';
document.body.appendChild(scrollDiv);
const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
document.documentElement.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
});
</script>
</head>
<body>
<div class="corner-controls">