admin777/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Add styles only on mobile

Browse Source
This commit is contained in:
Seefs 2025-12-09 10:46:16 +08:00
parent 063597c191
commit 1ebbf5171f
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/layout/SiderBar.jsx
View File

@ -377,7 +377,6 @@ const SiderBar = ({ onNavigate = () => {} }) => {
className='sidebar-container' className='sidebar-container'
style={{ style={{
width: 'var(--sidebar-current-width)', width: 'var(--sidebar-current-width)',
background: 'var(--semi-color-bg-1)',
}} }}
> >
<SkeletonWrapper <SkeletonWrapper

25
web/src/index.css
View File

@ -108,14 +108,13 @@ code {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: width 0.3s ease; transition: width 0.3s ease;
background: var(--semi-color-bg-1); background: var(--semi-color-bg-0);
border-right: 1px solid var(--semi-color-border);
} }
.sidebar-nav { .sidebar-nav {
flex: 1; flex: 1;
width: 100%; width: 100%;
background: var(--semi-color-bg-1); background: var(--semi-color-bg-0);
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
border-right: none; border-right: none;
@ -193,11 +192,11 @@ code {
padding: 12px; padding: 12px;
margin-top: auto; margin-top: auto;
cursor: pointer; cursor: pointer;
background-color: var(--semi-color-bg-1); background-color: var(--semi-color-bg-0);
position: sticky; position: sticky;
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1); box-shadow: 0 -10px 10px -5px var(--semi-color-bg-0);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
border-top: 1px solid rgba(var(--semi-grey-0), 0.08); border-top: 1px solid rgba(var(--semi-grey-0), 0.08);
} }
@ -223,6 +222,22 @@ code {
padding-top: 12px; padding-top: 12px;
} }
@media (max-width: 767px) {
.sidebar-container {
background: var(--semi-color-bg-1);
border-right: 1px solid var(--semi-color-border);
}
.sidebar-nav {
background: var(--semi-color-bg-1);
}
.sidebar-collapse-button {
background-color: var(--semi-color-bg-1);
box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1);
}
}
/* ==================== 聊天界面样式 ==================== */ /* ==================== 聊天界面样式 ==================== */
.semi-chat { .semi-chat {
padding-top: 0 !important; padding-top: 0 !important;