滑动条内置,整个大卡片不动
Browse files- public/index.html +1 -1
- public/style.css +33 -7
public/index.html
CHANGED
|
@@ -17,7 +17,7 @@
|
|
| 17 |
</script>
|
| 18 |
<style>
|
| 19 |
.logged-in #loginForm { display: none !important; }
|
| 20 |
-
.logged-in #mainContent { display:
|
| 21 |
</style>
|
| 22 |
</head>
|
| 23 |
<body>
|
|
|
|
| 17 |
</script>
|
| 18 |
<style>
|
| 19 |
.logged-in #loginForm { display: none !important; }
|
| 20 |
+
.logged-in #mainContent { display: flex !important; }
|
| 21 |
</style>
|
| 22 |
</head>
|
| 23 |
<body>
|
public/style.css
CHANGED
|
@@ -92,7 +92,8 @@ body {
|
|
| 92 |
background: var(--bg);
|
| 93 |
color: var(--text);
|
| 94 |
line-height: 1.5;
|
| 95 |
-
|
|
|
|
| 96 |
font-size: 1rem;
|
| 97 |
/* 字体渲染优化 */
|
| 98 |
-webkit-font-smoothing: antialiased;
|
|
@@ -115,7 +116,8 @@ code, pre, .mono, .token-display {
|
|
| 115 |
max-width: 1400px;
|
| 116 |
margin: 0 auto;
|
| 117 |
padding: 0.5rem;
|
| 118 |
-
|
|
|
|
| 119 |
display: flex;
|
| 120 |
justify-content: center;
|
| 121 |
align-items: flex-start;
|
|
@@ -218,10 +220,11 @@ button.loading::after {
|
|
| 218 |
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
| 219 |
width: 100%;
|
| 220 |
max-width: 1400px;
|
| 221 |
-
|
| 222 |
display: flex;
|
| 223 |
flex-direction: column;
|
| 224 |
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
|
| 225 |
}
|
| 226 |
@media (prefers-color-scheme: dark) {
|
| 227 |
.main-content {
|
|
@@ -281,7 +284,24 @@ button.loading::after {
|
|
| 281 |
.content {
|
| 282 |
padding: 1rem;
|
| 283 |
flex: 1;
|
| 284 |
-
overflow:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 285 |
}
|
| 286 |
|
| 287 |
/* 顶部栏 - 统计+操作 */
|
|
@@ -294,6 +314,7 @@ button.loading::after {
|
|
| 294 |
border-radius: 0.75rem;
|
| 295 |
margin-bottom: 1rem;
|
| 296 |
border: 1.5px solid var(--border);
|
|
|
|
| 297 |
}
|
| 298 |
@media (prefers-color-scheme: dark) {
|
| 299 |
.top-bar {
|
|
@@ -360,6 +381,11 @@ button.loading::after {
|
|
| 360 |
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
| 361 |
gap: 0.75rem;
|
| 362 |
align-items: start;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 363 |
}
|
| 364 |
.token-card {
|
| 365 |
background: rgba(255, 255, 255, 0.6);
|
|
@@ -1222,7 +1248,7 @@ input:checked + .slider:before {
|
|
| 1222 |
font-size: 0.7rem;
|
| 1223 |
}
|
| 1224 |
|
| 1225 |
-
.hidden { display: none; }
|
| 1226 |
|
| 1227 |
/* 敏感信息模糊 */
|
| 1228 |
.sensitive-info.blurred {
|
|
@@ -1233,10 +1259,10 @@ input:checked + .slider:before {
|
|
| 1233 |
|
| 1234 |
/* 响应式 */
|
| 1235 |
@media (max-width: 768px) {
|
| 1236 |
-
.container { padding: 0;
|
| 1237 |
.login-form { margin: auto 0.5rem; padding: 1.5rem; }
|
| 1238 |
.login-form h2 { font-size: 1.25rem; }
|
| 1239 |
-
.main-content {
|
| 1240 |
.header {
|
| 1241 |
padding: 0.5rem 0.75rem;
|
| 1242 |
flex-wrap: nowrap;
|
|
|
|
| 92 |
background: var(--bg);
|
| 93 |
color: var(--text);
|
| 94 |
line-height: 1.5;
|
| 95 |
+
height: 100vh;
|
| 96 |
+
overflow: hidden;
|
| 97 |
font-size: 1rem;
|
| 98 |
/* 字体渲染优化 */
|
| 99 |
-webkit-font-smoothing: antialiased;
|
|
|
|
| 116 |
max-width: 1400px;
|
| 117 |
margin: 0 auto;
|
| 118 |
padding: 0.5rem;
|
| 119 |
+
height: 100vh;
|
| 120 |
+
overflow: hidden;
|
| 121 |
display: flex;
|
| 122 |
justify-content: center;
|
| 123 |
align-items: flex-start;
|
|
|
|
| 220 |
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
| 221 |
width: 100%;
|
| 222 |
max-width: 1400px;
|
| 223 |
+
height: calc(100vh - 1rem);
|
| 224 |
display: flex;
|
| 225 |
flex-direction: column;
|
| 226 |
border: 1px solid rgba(255, 255, 255, 0.5);
|
| 227 |
+
overflow: hidden;
|
| 228 |
}
|
| 229 |
@media (prefers-color-scheme: dark) {
|
| 230 |
.main-content {
|
|
|
|
| 284 |
.content {
|
| 285 |
padding: 1rem;
|
| 286 |
flex: 1;
|
| 287 |
+
overflow: hidden;
|
| 288 |
+
display: flex;
|
| 289 |
+
flex-direction: column;
|
| 290 |
+
}
|
| 291 |
+
|
| 292 |
+
#tokensPage {
|
| 293 |
+
display: flex;
|
| 294 |
+
flex-direction: column;
|
| 295 |
+
flex: 1;
|
| 296 |
+
min-height: 0;
|
| 297 |
+
overflow: hidden;
|
| 298 |
+
}
|
| 299 |
+
|
| 300 |
+
#settingsPage {
|
| 301 |
+
flex: 1;
|
| 302 |
+
min-height: 0;
|
| 303 |
+
overflow-y: auto;
|
| 304 |
+
padding-right: 4px;
|
| 305 |
}
|
| 306 |
|
| 307 |
/* 顶部栏 - 统计+操作 */
|
|
|
|
| 314 |
border-radius: 0.75rem;
|
| 315 |
margin-bottom: 1rem;
|
| 316 |
border: 1.5px solid var(--border);
|
| 317 |
+
flex-shrink: 0;
|
| 318 |
}
|
| 319 |
@media (prefers-color-scheme: dark) {
|
| 320 |
.top-bar {
|
|
|
|
| 381 |
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
| 382 |
gap: 0.75rem;
|
| 383 |
align-items: start;
|
| 384 |
+
flex: 1;
|
| 385 |
+
overflow-y: auto;
|
| 386 |
+
padding-right: 4px;
|
| 387 |
+
padding-bottom: 0.5rem;
|
| 388 |
+
min-height: 0;
|
| 389 |
}
|
| 390 |
.token-card {
|
| 391 |
background: rgba(255, 255, 255, 0.6);
|
|
|
|
| 1248 |
font-size: 0.7rem;
|
| 1249 |
}
|
| 1250 |
|
| 1251 |
+
.hidden { display: none !important; }
|
| 1252 |
|
| 1253 |
/* 敏感信息模糊 */
|
| 1254 |
.sensitive-info.blurred {
|
|
|
|
| 1259 |
|
| 1260 |
/* 响应式 */
|
| 1261 |
@media (max-width: 768px) {
|
| 1262 |
+
.container { padding: 0; height: 100vh; align-items: stretch; }
|
| 1263 |
.login-form { margin: auto 0.5rem; padding: 1.5rem; }
|
| 1264 |
.login-form h2 { font-size: 1.25rem; }
|
| 1265 |
+
.main-content { height: 100vh; border-radius: 0; margin: 0; }
|
| 1266 |
.header {
|
| 1267 |
padding: 0.5rem 0.75rem;
|
| 1268 |
flex-wrap: nowrap;
|