顶栏上下留白按 1.1 倍标题高度,标题、导航与页面内容间距统一。
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+13
-11
@@ -18,6 +18,10 @@
|
|||||||
--radius: 14px;
|
--radius: 14px;
|
||||||
--font: "IBM Plex Sans", "Segoe UI", sans-serif;
|
--font: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||||
--font-display: "Orbitron", "IBM Plex Sans", sans-serif;
|
--font-display: "Orbitron", "IBM Plex Sans", sans-serif;
|
||||||
|
--hub-title-size: 1.75rem;
|
||||||
|
--hub-title-lh: 1.25;
|
||||||
|
--hub-title-h: calc(var(--hub-title-size) * var(--hub-title-lh));
|
||||||
|
--hub-title-gap: calc(var(--hub-title-h) * 1.1);
|
||||||
}
|
}
|
||||||
* { box-sizing: border-box; }
|
* { box-sizing: border-box; }
|
||||||
html, body { min-height: 100%; }
|
html, body { min-height: 100%; }
|
||||||
@@ -50,14 +54,15 @@ a:hover { color: #7dd3fc; }
|
|||||||
|
|
||||||
.topbar-brand {
|
.topbar-brand {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto 12px;
|
margin: 0 auto var(--hub-title-gap);
|
||||||
|
padding-top: var(--hub-title-gap);
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
font-size: 1.75rem;
|
font-size: var(--hub-title-size);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
color: #dbe4ff;
|
color: #dbe4ff;
|
||||||
line-height: 1.25;
|
line-height: var(--hub-title-lh);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.topbar-brand:hover {
|
.topbar-brand:hover {
|
||||||
@@ -68,7 +73,7 @@ a:hover { color: #7dd3fc; }
|
|||||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px 12px;
|
gap: 10px 12px;
|
||||||
margin: 0 0 12px;
|
margin: 0 0 var(--hub-title-gap);
|
||||||
}
|
}
|
||||||
.topbar-nav {
|
.topbar-nav {
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
@@ -186,10 +191,7 @@ a:hover { color: #7dd3fc; }
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
.topbar-brand {
|
:root { --hub-title-size: 1rem; }
|
||||||
margin-bottom: 12px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.topbar-nav a {
|
.topbar-nav a {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
font-size: 0.78rem;
|
font-size: 0.78rem;
|
||||||
@@ -204,7 +206,7 @@ a:hover { color: #7dd3fc; }
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 14px clamp(6px, 1vw, 14px) 16px;
|
padding: 0 clamp(6px, 1vw, 14px) 16px;
|
||||||
}
|
}
|
||||||
/* 总览/实例与客户端一致: 铺满,带鱼屏锁 1800 */
|
/* 总览/实例与客户端一致: 铺满,带鱼屏锁 1800 */
|
||||||
body.page-dashboard .main,
|
body.page-dashboard .main,
|
||||||
@@ -212,7 +214,7 @@ body.page-instances .main {
|
|||||||
max-width: none;
|
max-width: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 14px clamp(6px, 1vw, 14px) 16px;
|
padding: 0 clamp(6px, 1vw, 14px) 16px;
|
||||||
}
|
}
|
||||||
@media (min-aspect-ratio: 21/9) {
|
@media (min-aspect-ratio: 21/9) {
|
||||||
body.page-dashboard .main,
|
body.page-dashboard .main,
|
||||||
@@ -224,7 +226,7 @@ body.page-desk .main {
|
|||||||
max-width: none;
|
max-width: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 10px 12px 14px;
|
padding: 0 12px 14px;
|
||||||
}
|
}
|
||||||
body.page-login {
|
body.page-login {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|||||||
+1
-1
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>{% block title %}加密货币|OKX 期权中控{% endblock %}</title>
|
<title>{% block title %}加密货币|OKX 期权中控{% endblock %}</title>
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=27">
|
<link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=29">
|
||||||
</head>
|
</head>
|
||||||
<body class="{% if request.path.startswith('/login') %}page-login{% elif request.path.startswith('/desk') %}page-desk{% elif request.path.startswith('/stats') %}page-stats{% elif request.path.startswith('/instances') %}page-instances{% elif request.path == '/' %}page-dashboard{% endif %}">
|
<body class="{% if request.path.startswith('/login') %}page-login{% elif request.path.startswith('/desk') %}page-desk{% elif request.path.startswith('/stats') %}page-stats{% elif request.path.startswith('/instances') %}page-instances{% elif request.path == '/' %}page-dashboard{% endif %}">
|
||||||
{% if session.get('logged_in') %}
|
{% if session.get('logged_in') %}
|
||||||
|
|||||||
Reference in New Issue
Block a user