11/* 下载页面专用样式 */
22
3- /* 字体定义 */
4- @font-face {
5- font-family : '江城斜黑体' ;
6- src : url ('https://fs-im-kefu.7moor-fs1.com/ly/4d2c3f00-7d4c-11e5-af15-41bf63ae4ea0/0cdb77540e2da3e9/江城斜黑体 900W (1).woff2' ) format ('woff2' );
7- font-weight : 900 ;
8- font-style : normal;
9- font-display : swap;
3+ /* 页面布局样式 */
4+ html , body {
5+ margin : 0 ;
6+ padding : 0 ;
7+ height : 100% ;
108}
119
12- : root {
13- --preview-primary : # f1c40f ;
14- --preview-secondary : # f39c12 ;
15- --glass-dark : rgba (16 , 24 , 39 , 0.9 );
16- --glass-light : rgba (255 , 255 , 255 , 0.15 );
10+ body {
11+ display : flex;
12+ flex-direction : column;
13+ min-height : 100vh ;
1714}
15+
16+ /* 主内容区域样式 */
1817.download-container {
1918 margin-top : 100px ;
2019 padding : 2rem ;
2120 flex : 1 ;
2221 display : flex;
2322 flex-direction : column;
2423 align-items : center;
25- gap : 3rem ;
2624}
27- .version-card {
28- background : var (--glass-bg );
29- backdrop-filter : var (--glass-blur-strong );
30- border : 1px solid var (--glass-border );
25+
26+ /* 警告提示样式 */
27+ .warning-container {
28+ background : rgba (241 , 196 , 15 , 0.15 );
29+ border : 1px solid # f1c40f ;
3130 border-radius : 1rem ;
3231 padding : 2rem ;
3332 width : 100% ;
3433 max-width : 800px ;
35- transition : var ( --transition ) ;
36- box-shadow : 0 8 px 32 px rgba (0 , 0 , 0 , 0.3 );
34+ text-align : center ;
35+ box-shadow : 0 4 px 20 px rgba (241 , 196 , 15 , 0.1 );
3736 position : relative;
3837}
3938
40- .version-card ::before {
41- content : '' ;
39+ .warning-container ::before {
40+ content : '⚠️' ;
41+ font-size : 3rem ;
4242 position : absolute;
43- top : 0 ;
44- left : 0 ;
45- right : 0 ;
46- bottom : 0 ;
47- background : linear-gradient (180deg , rgba (255 , 255 , 255 , 0.02 ) 0% , rgba (255 , 255 , 255 , 0.05 ) 100% );
48- pointer-events : none;
49- border-radius : 1rem ;
50- }
51-
52- .version-card : hover {
53- transform : translateY (-5px );
54- box-shadow : var (--shadow-lg );
55- }
56-
57- /* 移除默认边框颜色 */
58- .version-card : first-child {
59- border-color : transparent;
43+ top : -30px ;
44+ left : 50% ;
45+ transform : translateX (-50% );
46+ background : var (--background );
47+ padding : 0.5rem ;
48+ border-radius : 50% ;
6049}
6150
62- .version-card : first-child : hover {
63- border-color : var (--preview-primary );
64- box-shadow : 0 4px 12px rgba (241 , 196 , 15 , 0.2 );
51+ .warning-title {
52+ font-size : 1.5rem ;
53+ font-weight : 700 ;
54+ color : # f1c40f ;
55+ margin-bottom : 1rem ;
6556}
6657
67- .version-card : last-child {
68- border-color : transparent;
58+ .warning-text {
59+ color : rgba (255 , 255 , 255 , 0.8 );
60+ margin-bottom : 1.5rem ;
61+ font-size : 1.1rem ;
62+ line-height : 1.6 ;
6963}
7064
71- .version-card : last-child : hover {
72- border-color : var (--primary );
73- box-shadow : 0 4px 12px rgba (33 , 150 , 243 , 0.2 );
74- }
75- .version-header {
76- display : flex;
77- justify-content : space-between;
78- align-items : flex-start;
79- margin-bottom : 1rem ;
80- padding-bottom : 1rem ;
81- border-bottom : 1px solid rgba (255 , 255 , 255 , 0.1 );
82- }
83- .version-name {
84- font-family : '江城斜黑体' , 'Inter' , 'SF Pro Display' , -apple-system, BlinkMacSystemFont, 'Segoe UI' , Roboto, sans-serif;
85- font-size : 1.5rem ;
86- font-weight : 900 ;
87- color : var (--primary );
88- }
89- .version-date {
90- color : rgba (255 , 255 , 255 , 0.6 );
91- }
92- .version-tag {
93- display : inline-block;
94- padding : 0.25rem 0.75rem ;
95- border-radius : 1rem ;
96- font-size : 0.875rem ;
97- margin-top : 0.5rem ;
98- }
99- .version-tag .stable {
100- background : rgba (33 , 150 , 243 , 0.2 );
101- color : # 2196F3 ;
102- border : 1px solid rgba (33 , 150 , 243 , 0.3 );
103- }
104- .version-tag .preview {
105- background : rgba (241 , 196 , 15 , 0.2 );
106- color : var (--preview-primary );
107- border : 1px solid rgba (241 , 196 , 15 , 0.3 );
108- }
109- .download-btn {
65+ /* GitHub按钮样式 */
66+ .github-releases-btn {
11067 display : inline-flex;
11168 align-items : center;
11269 gap : 0.5rem ;
113- background : var ( --primary ) ;
70+ background : # 2196F3 ;
11471 color : white;
11572 padding : 0.75rem 1.5rem ;
11673 border-radius : 0.75rem ;
11774 text-decoration : none;
118- transition : var (--transition );
75+ font-weight : 600 ;
76+ transition : all 0.3s ease;
77+ font-size : 1rem ;
11978}
120- .download-btn : hover {
79+
80+ .github-releases-btn : hover {
12181 transform : translateY (-2px );
122- background : var (--secondary );
123- box-shadow : 0 4px 12px rgba (33 , 150 , 243 , 0.3 );
124- }
125- .preview-btn {
126- background : var (--preview-primary ) !important ;
127- }
128- .preview-btn : hover {
129- background : var (--preview-secondary ) !important ;
130- box-shadow : 0 4px 12px rgba (241 , 196 , 15 , 0.3 ) !important ;
131- }
132- .changelog {
133- margin-top : 1rem ;
134- color : rgba (255 , 255 , 255 , 0.8 );
135- }
136- .changelog ul {
137- list-style : none;
138- margin-top : 0.5rem ;
139- }
140- .changelog li {
141- margin : 0.5rem 0 ;
142- padding-left : 1.5rem ;
143- position : relative;
144- }
145- .changelog li ::before {
146- content : "•" ;
147- color : var (--primary );
148- position : absolute;
149- left : 0 ;
82+ background : # 1976D2 ;
83+ box-shadow : 0 4px 12px rgba (33 , 150 , 243 , 0.4 );
15084}
15185
86+ /* 页脚样式 */
87+ .main-footer {
88+ margin-top : auto;
89+ }
15290
91+ /* 响应式设计 */
15392@media (max-width : 768px ) {
154- .navbar {
93+ .download-container {
94+ margin-top : 80px ;
15595 padding : 1rem ;
15696 }
157- .navbar h1 {
158- font-size : 1.4rem ;
97+
98+ .warning-container {
99+ padding : 1.5rem 1rem ;
159100 }
160- .logo-hover {
161- width : 36px ;
162- height : 36px ;
101+
102+ .warning-container ::before {
103+ font-size : 2rem ;
104+ top : -20px ;
163105 }
164- .version-card {
165- padding : 1.5rem ;
106+
107+ .warning-title {
108+ font-size : 1.3rem ;
109+ }
110+
111+ .warning-text {
112+ font-size : 1rem ;
166113 }
167- }
168- [data-theme = "light" ] {
169- background : var (--gradient-light );
170- color : # 1e293b ;
171- }
172- [data-theme = "light" ] .navbar {
173- background : rgba (255 , 255 , 255 , 0.9 );
174- border-color : rgba (0 , 0 , 0 , 0.1 );
175- box-shadow : 0 4px 12px rgba (0 , 0 , 0 , 0.05 );
176- }
177-
178- [data-theme = "light" ] .version-card {
179- background : rgba (255 , 255 , 255 , 0.9 );
180- box-shadow : 0 4px 12px rgba (0 , 0 , 0 , 0.05 );
181- }
182- [data-theme = "light" ] .github-btn {
183- background : rgba (0 , 0 , 0 , 0.05 );
184- color : # 1e293b ;
185- border-color : rgba (0 , 0 , 0 , 0.1 );
186- }
187- [data-theme = "light" ] .github-btn : hover {
188- background : rgba (0 , 0 , 0 , 0.1 );
189- }
190- [data-theme = "light" ] .version-date ,
191- [data-theme = "light" ] .changelog {
192- color : # 475569 ;
193114}
194115
195- /* 更新日志图片样式 */
196- . changelog-image {
197- margin : 1 rem 0 ;
198- border-radius : 0.5 rem ;
199- overflow : hidden ;
116+ /* 亮色主题适配 */
117+ [ data-theme = "light" ] . warning-container {
118+ background : rgba ( 241 , 196 , 15 , 0.1 ) ;
119+ border-color : rgba ( 241 , 196 , 15 , 0.3 ) ;
120+ box-shadow : 0 4 px 20 px rgba ( 241 , 196 , 15 , 0.05 ) ;
200121}
201122
202- .changelog-image img {
203- width : 100% ;
204- height : auto;
205- display : block;
206- transition : transform 0.3s ease;
123+ [data-theme = "light" ] .warning-container ::before {
124+ background : white;
207125}
208126
209- . changelog-image img : hover {
210- transform : scale ( 1.02 ) ;
127+ [ data-theme = "light" ] . warning-title {
128+ color : # e6b400 ;
211129}
212130
213- [data-theme = "light" ] .changelog-image {
214- box-shadow : 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.1 ) ;
131+ [data-theme = "light" ] .warning-text {
132+ color : # 475569 ;
215133}
0 commit comments