Skip to content

Commit 8ce8352

Browse files
wehoswehos
committed
style: Update CSS for a unified transparent, borderless window design across multiple components
- Changed background to transparent and removed box shadows for a cleaner look. - Adjusted container margins and max-width for full-width layout. - Standardized header styles to support draggable title bars and added close button functionality. - Ensured consistent styling for modal and container elements across various pages.
1 parent bd95e27 commit 8ce8352

7 files changed

Lines changed: 162 additions & 46 deletions

‎static/css/api_key_settings.css‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,21 @@ body {
2929
height: 100%;
3030
margin: 0;
3131
padding: 0;
32-
background: #f7f8fa;
32+
background: transparent;
3333
color: #222;
3434
font-family: 'Segoe UI', Arial, sans-serif;
3535
}
3636

3737
.container {
38-
max-width: 800px;
39-
margin: 40px auto 0 auto;
38+
max-width: 100%;
39+
margin: 0;
4040
background: #fff;
41-
border-radius: 24px; /* 增加圆角 */
42-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
41+
border-radius: 0; /* 无边框窗口不需要圆角 */
42+
box-shadow: none;
4343
padding: 0;
4444
overflow: hidden;
4545
position: relative;
46+
min-height: 100vh;
4647
}
4748

4849
.container-header {
@@ -51,7 +52,13 @@ padding: 18px 24px;
5152
display: flex;
5253
justify-content: space-between;
5354
align-items: center;
54-
border-radius: 20px 20px 0 0;
55+
border-radius: 0;
56+
-webkit-app-region: drag; /* 允许通过标题栏拖动窗口 */
57+
}
58+
59+
/* 标题栏内的可交互元素需要禁用拖动 */
60+
.container-header .close-btn {
61+
-webkit-app-region: no-drag;
5562
}
5663

5764
.container-header h2 {

‎static/css/chara_manager.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,25 @@ body {
55
height: 100%;
66
margin: 0;
77
padding: 0;
8-
background: rgba(0, 0, 0, 0.4);
9-
backdrop-filter: blur(4px);
8+
background: transparent;
109
color: #333;
1110
font-family: 'Segoe UI', Arial, sans-serif;
1211
position: relative;
1312
overflow: auto; /* 允许 body 滚动 */
1413
}
1514

16-
/* 主容器 - 浮动模态窗口样式 */
15+
/* 主容器 - 无边框窗口样式 */
1716
.container {
18-
max-width: 920px;
19-
margin: 24px auto;
17+
max-width: 100%;
18+
margin: 0;
2019
background: #fff;
21-
border-radius: 20px;
22-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
20+
border-radius: 0;
21+
box-shadow: none;
2322
padding: 0;
2423
padding-bottom: 24px; /* 底部留出空间 */
2524
overflow: visible; /* 让内容自然扩展 */
2625
position: relative;
26+
min-height: 100vh;
2727
}
2828

2929
/* 标题栏 */
@@ -33,7 +33,13 @@ padding: 18px 24px;
3333
display: flex;
3434
justify-content: space-between;
3535
align-items: center;
36-
border-radius: 20px 20px 0 0;
36+
border-radius: 0;
37+
-webkit-app-region: drag; /* 允许通过标题栏拖动窗口 */
38+
}
39+
40+
/* 标题栏内的可交互元素需要禁用拖动 */
41+
.container-header .close-btn {
42+
-webkit-app-region: no-drag;
3743
}
3844

3945
.container-header h2 {

‎static/css/memory_browser.css‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,21 @@ body {
55
height: 100%;
66
margin: 0;
77
padding: 0;
8-
background: #e3f4ff;
8+
background: transparent;
99
color: #222;
1010
font-family: 'Segoe UI', Arial, sans-serif;
1111
}
1212

1313
.container {
14-
max-width: 900px;
15-
margin: 40px auto 0 auto;
14+
max-width: 100%;
15+
margin: 0;
1616
background: #e3f4ff;
17-
border-radius: 20px;
18-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
17+
border-radius: 0;
18+
box-shadow: none;
1919
padding: 0;
2020
overflow: hidden;
2121
position: relative;
22+
min-height: 100vh;
2223
}
2324

2425
.container-header {
@@ -27,8 +28,14 @@ body {
2728
display: flex;
2829
justify-content: space-between;
2930
align-items: center;
30-
border-radius: 20px 20px 0 0;
31+
border-radius: 0;
3132
position: relative;
33+
-webkit-app-region: drag; /* 允许通过标题栏拖动窗口 */
34+
}
35+
36+
/* 标题栏内的可交互元素需要禁用拖动 */
37+
.container-header .close-page-btn {
38+
-webkit-app-region: no-drag;
3239
}
3340

3441
.close-page-btn {

‎static/css/steam_workshop_manager.css‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,64 @@ html, body {
44
min-height: 100vh;
55
margin: 0;
66
padding: 0;
7-
background: #eee;
7+
background: transparent;
88
color: #222;
99
font-family: 'Segoe UI', Arial, sans-serif;
1010
overflow-x: hidden;
1111
}
1212

13+
/* 页面标题栏 - 支持窗口拖动 */
14+
.page-title-bar {
15+
background: #fff;
16+
border-radius: 0; /* 无边框窗口不需要圆角 */
17+
padding: 15px 20px;
18+
display: flex;
19+
justify-content: space-between;
20+
align-items: center;
21+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
22+
-webkit-app-region: drag; /* 允许通过标题栏拖动窗口 */
23+
}
24+
25+
.page-title-bar h1 {
26+
margin: 0;
27+
font-size: 24px;
28+
font-weight: 600;
29+
color: #333;
30+
border: none;
31+
padding: 0;
32+
}
33+
34+
.page-title-bar .close-btn {
35+
background: transparent;
36+
border: none;
37+
cursor: pointer;
38+
padding: 4px;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
transition: transform 0.2s ease, opacity 0.2s ease;
43+
opacity: 0.9;
44+
-webkit-app-region: no-drag; /* 关闭按钮不参与拖动 */
45+
}
46+
47+
.page-title-bar .close-btn:hover {
48+
opacity: 0.7;
49+
transform: scale(1.1);
50+
}
51+
52+
.page-title-bar .close-btn img {
53+
width: 32px;
54+
height: 32px;
55+
object-fit: contain;
56+
display: block;
57+
}
58+
1359
/* 布局容器 */
1460
.layout-container {
1561
display: flex;
1662
gap: 20px;
17-
max-width: 1400px;
18-
margin: 20px auto;
63+
max-width: 100%;
64+
margin: 0;
1965
padding: 0 20px;
2066
}
2167

‎static/css/voice_clone.css‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,21 @@ body {
55
height: 100%;
66
margin: 0;
77
padding: 0;
8-
background: #e3f4ff;
8+
background: transparent;
99
color: #222;
1010
font-family: 'Segoe UI', Arial, sans-serif;
1111
}
1212

1313
.container {
14-
max-width: 800px;
15-
margin: 40px auto 0 auto;
14+
max-width: 100%;
15+
margin: 0;
1616
background: #e3f4ff;
17-
border-radius: 20px;
18-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
17+
border-radius: 0;
18+
box-shadow: none;
1919
padding: 0;
2020
overflow: hidden;
2121
position: relative;
22+
min-height: 100vh;
2223
}
2324

2425
.container-header {
@@ -27,8 +28,14 @@ body {
2728
display: flex;
2829
justify-content: space-between;
2930
align-items: center;
30-
border-radius: 20px 20px 0 0;
31+
border-radius: 0;
3132
position: relative;
33+
-webkit-app-region: drag; /* 允许通过标题栏拖动窗口 */
34+
}
35+
36+
/* 标题栏内的可交互元素需要禁用拖动 */
37+
.container-header .close-page-btn {
38+
-webkit-app-region: no-drag;
3239
}
3340

3441
.close-page-btn {

‎templates/live2d_emotion_manager.html‎

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,25 +39,63 @@
3939

4040
body {
4141
font-family: 'Source Han Sans CN', 'Noto Sans SC', '微软雅黑', 'Segoe UI', Arial, sans-serif;
42-
background: var(--color-n-light);
42+
background: transparent;
4343
color: var(--color-text-dark);
44-
padding: var(--spacing-xl);
44+
padding: 0;
45+
margin: 0;
4546
min-height: 100vh;
4647
}
4748

4849
.container {
49-
max-width: 900px;
50-
margin: 40px auto;
50+
max-width: 100%;
51+
margin: 0;
5152
background: white;
52-
border-radius: var(--radius-card);
53-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
53+
border-radius: 0;
54+
box-shadow: none;
5455
overflow: hidden;
56+
min-height: 100vh;
5557
}
5658

5759
.header {
5860
background: var(--color-n-main);
5961
padding: 24px;
60-
border-radius: var(--radius-card) var(--radius-card) 0 0;
62+
border-radius: 0;
63+
display: flex;
64+
justify-content: space-between;
65+
align-items: flex-start;
66+
-webkit-app-region: drag;
67+
}
68+
69+
.header-content {
70+
flex: 1;
71+
}
72+
73+
.close-btn {
74+
background: transparent;
75+
border: none;
76+
cursor: pointer;
77+
padding: 4px;
78+
display: flex;
79+
align-items: center;
80+
justify-content: center;
81+
transition: transform 0.2s ease, opacity 0.2s ease;
82+
opacity: 0.9;
83+
-webkit-app-region: no-drag;
84+
}
85+
86+
.close-btn:hover {
87+
transform: scale(1.1);
88+
opacity: 1;
89+
}
90+
91+
.close-btn:active {
92+
transform: scale(0.95);
93+
}
94+
95+
.close-btn img {
96+
width: 32px;
97+
height: 32px;
98+
object-fit: contain;
6199
}
62100

63101
.header h1 {
@@ -438,8 +476,13 @@
438476
<body>
439477
<div class="container">
440478
<div class="header">
441-
<h1 data-text="Live2D 情感映射管理器">Live2D 情感映射管理器</h1>
442-
<p>配置不同情绪下的动作和表情</p>
479+
<div class="header-content">
480+
<h1 data-text="Live2D 情感映射管理器">Live2D 情感映射管理器</h1>
481+
<p>配置不同情绪下的动作和表情</p>
482+
</div>
483+
<button class="close-btn" onclick="window.close(); window.history.back();" title="关闭">
484+
<img src="/static/icons/close_button.png" alt="关闭">
485+
</button>
443486
</div>
444487

445488
<div class="container-content">

‎templates/steam_workshop_manager.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313
</head>
1414

1515
<body>
16-
<!-- 页面标题栏 -->
17-
<div style="max-width: 1400px; margin: 20px auto 0; padding: 0 20px;">
18-
<div style="background: #fff; border-radius: 12px 12px 0 0; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
19-
<h1 style="margin: 0; font-size: 24px; font-weight: 600; color: #333;" data-i18n="steam.workshopManager">Steam 创意工坊管理</h1>
20-
<button onclick="window.history.back()" style="background: transparent; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, opacity 0.2s ease; opacity: 0.9;" data-i18n-title="common.close">
21-
<img src="/static/icons/close_button.png" data-i18n-alt="common.close" style="width: 32px; height: 32px; object-fit: contain; display: block;">
22-
</button>
23-
</div>
16+
<!-- 页面标题栏 - 支持拖动窗口 -->
17+
<div class="page-title-bar">
18+
<h1 data-i18n="steam.workshopManager">Steam 创意工坊管理</h1>
19+
<button class="close-btn" onclick="window.close(); window.history.back();" title="关闭" style="width: 36px; height: 36px; background: #ff5f57; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-app-region: no-drag;">
20+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
21+
<path d="M12 4L4 12M4 4L12 12" stroke="white" stroke-width="2" stroke-linecap="round"/>
22+
</svg>
23+
</button>
2424
</div>
2525

2626
<!-- 侧边栏 -->

0 commit comments

Comments
 (0)