okooooooo/grok2api
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 统一各页粘性导航条按钮尺寸，隔离移动端专属样式，补充缺失CSS

Browse Source
This commit is contained in:
XianYuDaXian committed 2026-03-14 09:16:07 +08:00
1 parent 0d60e8148d
commit cbaa4197b9
6 files changed
+332 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/static/public/css/imagine.css
+42
View File
@@ -1492,3 +1492,45 @@ html[data-theme='dark'] .im-settings-sheet {
display: flex !important;
}
}
/* ============================
Imagine Sticky Bar 样式分离修正
（暗色主题和 Bottom Sheet 内规则严格在移动端生效）
============================ */
@media (max-width: 900px) {
/* Bottom Sheet 内参数 */
.im-settings-sheet .settings-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
}
.im-settings-sheet .settings-block {
grid-column: 1 !important;
grid-row: auto !important;
}
.im-settings-sheet .settings-row {
grid-template-columns: 1fr 1fr;
}
/* 暗色主题（移动端，sticky bar 可见时） */
html[data-theme='dark'] .im-sticky-bar {
background: #111821 !important;
border-top-color: #2b3440 !important;
}
html[data-theme='dark'] .im-icon-btn {
background: #1a2330 !important;
border-color: #3b4654 !important;
color: #c9d6e5 !important;
}
html[data-theme='dark'] .im-icon-btn:active {
background: #243244 !important;
}
html[data-theme='dark'] .im-settings-sheet {
background: #111821 !important;
color: #e2e8f0 !important;
}
}
app/static/public/css/imagine_workbench.css
+104
View File
@@ -957,3 +957,107 @@ html[data-theme='dark'] .history-prompt {
cursor: not-allowed;
}
}
/* ============================
图片工作台 移动端 Sticky Bar（<=900px）
PC 端默认隐藏
============================ */
.wb-sticky-bar {
display: none !important;
}
@media (max-width: 900px) {
body {
padding-bottom: 72px !important;
}
.wb-sticky-bar {
display: flex !important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 200;
background: #fff;
border-top: 1px solid var(--border);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.07);
padding: 10px 16px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.wb-sticky-bar-inner {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.wb-icon-group {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
}
/* 图标按钮：与 im-icon-btn 规范对齐（40px） */
.wb-icon-btn {
width: 40px;
height: 40px;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
color: var(--fg);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .15s ease;
padding: 0;
}
.wb-icon-btn:active {
background: var(--accents-1);
}
.wb-icon-btn--danger {
color: #ef4444;
border-color: #fecaca;
}
.wb-icon-btn--danger:active {
background: #fef2f2;
}
/* 主按钮：与 im-main-btn 规范对齐（40px / 14px / 600） */
.wb-submit-btn {
height: 40px !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 10px !important;
padding: 0 18px !important;
min-width: 96px !important;
flex-shrink: 0;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: center;
}
/* 暗色主题 */
html[data-theme='dark'] .wb-sticky-bar {
background: #111821;
border-top-color: #2b3440;
}
html[data-theme='dark'] .wb-icon-btn {
background: #1a2330;
border-color: #3b4654;
color: #c9d6e5;
}
html[data-theme='dark'] .wb-icon-btn:active {
background: #243244;
}
}
app/static/public/css/nsfw.css
+63
View File
@@ -1168,3 +1168,66 @@ html[data-theme='dark'] .nsfw-settings-sheet {
margin-left: 0 !important;
}
}
/* ============================
NSFW Sticky Bar 最终规范（与 imagine 对齐：40px / 14px / 600）
============================ */
@media (max-width: 900px) {
/* 统一图标按钮尺寸 */
.nsfw-icon-btn {
width: 40px !important;
height: 40px !important;
border-radius: 10px !important;
}
/* 统一主按钮：高度/字体与 imagine .im-main-btn 保持一致 */
.nsfw-main-btn {
height: 40px !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 10px !important;
padding: 0 16px !important;
min-width: 90px !important;
margin-left: 0 !important;
}
/* nsfw-image-actions / nsfw-video-actions gap 统一 */
.nsfw-image-actions,
.nsfw-video-actions {
gap: 8px !important;
}
/* 行最小高度与 imagine 一致 */
.nsfw-sticky-row {
min-height: 52px !important;
padding: 6px 0 !important;
gap: 8px !important;
}
/* 行内 padding 保持对称 */
.nsfw-sticky-bar {
padding: 4px 14px !important;
padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
}
/* 暗色主题（移动端，sticky bar 可见时） */
html[data-theme='dark'] .nsfw-sticky-bar {
background: #111821 !important;
border-top-color: #2b3440 !important;
}
html[data-theme='dark'] .nsfw-icon-btn {
background: #1a2330 !important;
border-color: #3b4654 !important;
color: #c9d6e5 !important;
}
html[data-theme='dark'] .nsfw-icon-btn:active {
background: #243244 !important;
}
html[data-theme='dark'] .nsfw-settings-sheet {
background: #111821 !important;
color: #e2e8f0 !important;
}
}
app/static/public/css/video.css
+121
View File
@@ -2242,3 +2242,124 @@ html[data-theme='dark'] .cache-video-item-meta {
top: auto;
}
}
/* ============================
视频工作台 移动端 Action Bar（<=900px）
PC 端默认隐藏
============================ */
.mobile-action-bar,
.mobile-settings-overlay {
display: none !important;
}
@media (max-width: 900px) {
body {
padding-bottom: 72px !important;
}
.mobile-action-bar {
display: flex !important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 200;
background: #fff;
border-top: 1px solid var(--border);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.07);
padding: 10px 16px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.mobile-action-bar-inner {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
/* 齿轮设置按钮：40px 统一规范 */
.mobile-settings-btn {
width: 40px;
height: 40px;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
color: var(--fg);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .15s ease;
padding: 0;
}
.mobile-settings-btn:active {
background: var(--accents-1);
}
.mobile-action-ops {
flex: 1;
display: flex;
justify-content: flex-end;
position: relative;
overflow: hidden;
min-height: 40px;
}
.mobile-action-slot {
display: none;
align-items: center;
gap: 6px;
}
.mobile-action-slot--active {
display: flex;
}
/* 主按钮：40px / 14px / 600 统一规范 */
.mobile-action-btn {
height: 40px !important;
font-size: 14px !important;
font-weight: 600 !important;
border-radius: 10px !important;
padding: 0 18px !important;
min-width: 96px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
justify-content: center !important;
}
/* Settings Bottom Sheet */
.mobile-settings-overlay {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.38);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
display: none !important;
}
.mobile-settings-overlay.active {
display: block !important;
}
/* 暗色主题 */
html[data-theme='dark'] .mobile-action-bar {
background: #111821;
border-top-color: #2b3440;
}
html[data-theme='dark'] .mobile-settings-btn {
background: #1a2330;
border-color: #3b4654;
color: #c9d6e5;
}
html[data-theme='dark'] .mobile-settings-btn:active {
background: #243244;
}
}
app/static/public/pages/imagine_workbench.html
+1 -1
View File
@@ -19,7 +19,7 @@
<script src="/static/common/js/theme.js?v=0.1.0"></script>
<link href="/static/common/css/common.css?v=0.3.7" rel="stylesheet">
<link href="/static/common/css/toast.css" rel="stylesheet">
<link href="/static/public/css/imagine_workbench.css?v=0.2.3" rel="stylesheet">
<link href="/static/public/css/imagine_workbench.css?v=0.2.4" rel="stylesheet">
</head>
<body class="public-page min-h-screen flex flex-col" style="background-color: var(--bg);">
app/static/public/pages/video.html
+1 -1
View File
@@ -19,7 +19,7 @@
<link href="/static/vendor/geist/geist-mono.css" rel="stylesheet">
<script src="/static/common/js/theme.js?v=0.1.0"></script>
<link href="/static/common/css/common.css?v=0.3.7" rel="stylesheet">
<link href="/static/public/css/video.css?v=0.4.21" rel="stylesheet">
<link href="/static/public/css/video.css?v=0.4.22" rel="stylesheet">
<link href="/static/common/css/toast.css" rel="stylesheet">
</head>