lanyuanxiaoyao/Alfred
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: antd 主题改造 — 启用 cssVar、纯黑白 colorPrimary、统一 sidebar/滚动条/按钮样式

Browse Source
This commit is contained in:
兰缘小妖
2026-06-05 16:01:54 +08:00
parent db40d04dc5
commit 85abc2a515
10 changed files with 88 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/web/styles.css
View File

@@ -81,10 +81,22 @@ body {
min-height: 60vh;
}
.ant-layout-sider {
border-right: none;
}
.ant-layout-sider-trigger {
border-right: 1px solid var(--ant-color-border-secondary);
}
.ant-menu {
height: 100%;
}
.app-sidebar-list {
display: flex;
flex-direction: column;
border-right: 1px solid var(--ant-color-border-secondary);
border: 1px solid var(--ant-color-border-secondary);
border-radius: var(--ant-border-radius-lg);
background: var(--ant-color-bg-container);
}
@@ -118,11 +130,16 @@ body {
}
.app-sidebar-list-item--selected {
background: var(--ant-color-primary-bg);
background: var(--ant-color-primary);
color: var(--ant-color-text-light-solid);
}
.app-sidebar-list-item--selected .ant-typography {
color: var(--ant-color-text-light-solid);
}
.app-sidebar-list-item--selected:hover {
background: var(--ant-color-primary-bg);
background: var(--ant-color-primary);
}
.app-sidebar-item-actions {
@@ -267,17 +284,19 @@ body {
background: var(--ant-color-bg-container);
}
.card-extra-actions .btn-dimmed {
.card-extra-actions .btn-dimmed,
.code-block-header .ant-btn.btn-dimmed {
color: var(--ant-color-text-quaternary);
}
.card-extra-actions .btn-dimmed:hover {
.card-extra-actions .btn-dimmed:hover,
.code-block-header .ant-btn.btn-dimmed:hover {
color: var(--ant-color-text-secondary);
}
.chat-scroll-bottom-btn {
position: absolute;
bottom: 115px;
bottom: 140px;
left: 50%;
transform: translateX(-50%);
display: flex;
@@ -297,23 +316,9 @@ body {
--os-padding-axis: 2px;
--os-track-border-radius: 10px;
--os-handle-border-radius: 10px;
--os-handle-bg: rgba(0, 0, 0, 0.15);
--os-handle-bg-hover: rgba(0, 0, 0, 0.25);
--os-handle-bg-active: rgba(0, 0, 0, 0.35);
--os-handle-min-size: 33px;
--os-handle-max-size: none;
--os-handle-interactive-area-offset: 4px;
}
.os-theme-custom-dark {
--os-size: 8px;
--os-padding-perpendicular: 2px;
--os-padding-axis: 2px;
--os-track-border-radius: 10px;
--os-handle-border-radius: 10px;
--os-handle-bg: rgba(255, 255, 255, 0.15);
--os-handle-bg-hover: rgba(255, 255, 255, 0.25);
--os-handle-bg-active: rgba(255, 255, 255, 0.35);
--os-handle-bg: var(--ant-color-border-secondary);
--os-handle-bg-hover: var(--ant-color-text-quaternary);
--os-handle-bg-active: var(--ant-color-text-tertiary);
--os-handle-min-size: 33px;
--os-handle-max-size: none;
--os-handle-interactive-area-offset: 4px;
@@ -339,28 +344,6 @@ body {
width: 100%;
}
/* Inbox material list items */
.material-list-item {
border: none;
margin: var(--ant-margin-xxs) var(--ant-margin-xxs);
padding: var(--ant-padding-xs) var(--ant-padding-sm);
border-radius: var(--ant-border-radius-lg);
cursor: pointer;
transition: background 0.15s ease;
}
.material-list-item:hover {
background: var(--ant-color-bg-text-hover);
}
.material-list-item--selected {
background: var(--ant-color-primary-bg);
}
.material-list-item--selected:hover {
background: var(--ant-color-primary-bg);
}
.material-item-right {
position: relative;
display: inline-flex;
@@ -385,11 +368,11 @@ body {
opacity: 0;
}
.material-list-item:hover .material-item-tag {
.app-sidebar-list-item:hover .material-item-tag {
opacity: 0;
}
.material-list-item:hover .material-item-actions {
.app-sidebar-list-item:hover .material-item-actions {
opacity: 1;
}