style(web): 统一后台图标与全局视觉
This commit is contained in:
Zhou Weidong committed
1 parent
5c087f4db9
commit
97fbeda508
67 files changed
+737
-744
No files matched your search
+48
-112
@@ -1,5 +1,18 @@
|
||||
:root {
|
||||
font-family: Arial, 'Noto Sans SC', sans-serif;
|
||||
--font-display: 'Manrope', 'Noto Sans SC', sans-serif;
|
||||
--font-body: 'DM Sans', 'Noto Sans SC', sans-serif;
|
||||
--app-radius-sm: 4px;
|
||||
--app-radius-md: 6px;
|
||||
--app-radius-lg: 12px;
|
||||
--app-brand: #c4322a;
|
||||
--app-brand-pressed: #8e221c;
|
||||
--app-brand-soft: #ff8a72;
|
||||
--app-primary-strong: color-mix(in srgb, var(--el-color-primary) 72%, #000 28%);
|
||||
--brand-mark-size: 38px;
|
||||
--brand-mark-radius: var(--app-radius-lg);
|
||||
--el-border-radius-base: var(--app-radius-md);
|
||||
--el-border-radius-small: var(--app-radius-sm);
|
||||
font-family: var(--font-body);
|
||||
color: var(--el-text-color-primary);
|
||||
background: var(--el-bg-color-page);
|
||||
--el-color-primary: #409eff;
|
||||
@@ -17,83 +30,6 @@ body {
|
||||
background: var(--el-bg-color-page);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.sidebar {
|
||||
background: #fff;
|
||||
border-right-color: #e7e9ec;
|
||||
padding-top: 22px;
|
||||
}
|
||||
.brand {
|
||||
padding-bottom: 23px;
|
||||
}
|
||||
.brand-mark {
|
||||
background: #409eff;
|
||||
border-radius: 7px;
|
||||
transform: none;
|
||||
}
|
||||
.brand b {
|
||||
font:
|
||||
700 16px Arial,
|
||||
sans-serif;
|
||||
letter-spacing: -0.4px;
|
||||
color: #29313b;
|
||||
}
|
||||
.brand small {
|
||||
letter-spacing: 0.9px;
|
||||
}
|
||||
.workspace {
|
||||
border-radius: 5px;
|
||||
border-color: #e5e7eb;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.workspace-avatar,
|
||||
.profile-avatar,
|
||||
.top-avatar {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.nav-label {
|
||||
color: #9298a1;
|
||||
font-size: 10px;
|
||||
}
|
||||
.side-menu .el-menu-item {
|
||||
border-radius: 5px;
|
||||
color: #616873;
|
||||
}
|
||||
.side-menu .el-menu-item:hover {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
.side-menu .el-menu-item.is-active {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
.menu-count {
|
||||
background: #eef1f4;
|
||||
color: #747d88;
|
||||
}
|
||||
.help-card {
|
||||
background: #f7f8fa;
|
||||
border-color: #eceef0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.help-icon {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.help-card a {
|
||||
color: #409eff;
|
||||
}
|
||||
.topbar {
|
||||
background: #fff;
|
||||
}
|
||||
.environment {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.page-content {
|
||||
padding-top: 30px;
|
||||
}
|
||||
.eyebrow {
|
||||
letter-spacing: 0.7px;
|
||||
color: #9298a1;
|
||||
@@ -110,14 +46,14 @@ body {
|
||||
color: #818791;
|
||||
}
|
||||
.primary-button {
|
||||
background: #409eff !important;
|
||||
border-color: #409eff !important;
|
||||
border-radius: 5px !important;
|
||||
background: var(--el-color-primary) !important;
|
||||
border-color: var(--el-color-primary) !important;
|
||||
border-radius: var(--app-radius-sm) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.primary-button:hover {
|
||||
background: #79bbff !important;
|
||||
border-color: #79bbff !important;
|
||||
background: var(--el-color-primary-light-3) !important;
|
||||
border-color: var(--el-color-primary-light-3) !important;
|
||||
}
|
||||
.stats-grid {
|
||||
gap: 12px;
|
||||
@@ -125,7 +61,7 @@ body {
|
||||
.stat-card,
|
||||
.panel {
|
||||
border-color: #e6e8eb;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--app-radius-md);
|
||||
box-shadow: none;
|
||||
}
|
||||
.stat-card {
|
||||
@@ -136,12 +72,12 @@ body {
|
||||
color: #727983;
|
||||
}
|
||||
.stat-icon {
|
||||
border-radius: 5px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
background: #ecf5ff !important;
|
||||
color: #409eff !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
.stat-value {
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: var(--font-display);
|
||||
color: #303640;
|
||||
}
|
||||
.stat-foot .positive {
|
||||
@@ -164,15 +100,15 @@ body {
|
||||
fill: #d9ecff;
|
||||
}
|
||||
.chart-svg path:last-of-type {
|
||||
stroke: #409eff;
|
||||
stroke: var(--el-color-primary);
|
||||
}
|
||||
.view-all,
|
||||
.row-action {
|
||||
color: #409eff !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
.review-art {
|
||||
background: #f1f3f5 !important;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
font-size: 0;
|
||||
}
|
||||
.review-art:after {
|
||||
@@ -183,12 +119,12 @@ body {
|
||||
.review-row .el-tag,
|
||||
.drama-table .el-tag,
|
||||
.episode-row .el-tag {
|
||||
border-radius: 4px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
background: #f0f2f4 !important;
|
||||
color: #606b78 !important;
|
||||
}
|
||||
.drama-cover {
|
||||
border-radius: 4px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
background: #eceff2 !important;
|
||||
@@ -220,16 +156,16 @@ body {
|
||||
}
|
||||
.library-toolbar .el-tabs__item.is-active,
|
||||
.cover-toolbar .el-tabs__item.is-active {
|
||||
color: #409eff;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.library-toolbar .el-tabs__active-bar,
|
||||
.cover-toolbar .el-tabs__active-bar {
|
||||
background: #409eff;
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
.toolbar-filters .el-input__wrapper,
|
||||
.toolbar-filters .el-select__wrapper,
|
||||
.drama-select .el-input__wrapper {
|
||||
border-radius: 5px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
}
|
||||
.episode-panel {
|
||||
padding-left: 20px;
|
||||
@@ -237,10 +173,10 @@ body {
|
||||
}
|
||||
.episode-row {
|
||||
border-color: #e7e9ec;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
}
|
||||
.episode-thumb {
|
||||
border-radius: 4px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
background: #e9ecef;
|
||||
color: #7d8792;
|
||||
}
|
||||
@@ -256,7 +192,7 @@ body {
|
||||
.cover-card,
|
||||
.add-cover {
|
||||
border-color: #e6e8eb;
|
||||
border-radius: 5px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
}
|
||||
.poster-art {
|
||||
background: #e9ecef !important;
|
||||
@@ -296,12 +232,12 @@ body {
|
||||
color: #656d77;
|
||||
}
|
||||
.add-cover > span {
|
||||
border-radius: 5px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
background: #edf0f3;
|
||||
color: #68798d;
|
||||
}
|
||||
.role-card {
|
||||
border-radius: 5px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
border-color: #e7e9ec;
|
||||
}
|
||||
.role-active {
|
||||
@@ -309,48 +245,48 @@ body {
|
||||
background: #ecf5ff;
|
||||
}
|
||||
.role-icon {
|
||||
border-radius: 5px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
background: #ecf5ff !important;
|
||||
color: #409eff !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
.role-badge {
|
||||
border-radius: 4px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
background: #eef1f4;
|
||||
color: #65758a;
|
||||
}
|
||||
.permission-group h3 .el-icon {
|
||||
color: #409eff;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.permission-group .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background: #409eff;
|
||||
border-color: #409eff;
|
||||
background: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
.permission-note {
|
||||
background: #f6f7f8;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
}
|
||||
.el-dialog {
|
||||
border-radius: 6px !important;
|
||||
border-radius: var(--app-radius-md) !important;
|
||||
}
|
||||
.el-dialog__header,
|
||||
.el-dialog__footer {
|
||||
border-color: #e8eaed;
|
||||
}
|
||||
.upload-area .el-upload-dragger {
|
||||
border-radius: 5px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
background: #fafbfc;
|
||||
}
|
||||
.upload-icon,
|
||||
.upload-area .el-upload__text em {
|
||||
color: #409eff;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.el-tabs__item,
|
||||
.el-input__inner,
|
||||
.el-select__placeholder {
|
||||
font-family: Arial, 'Noto Sans SC', sans-serif;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
.el-tag.status-badge {
|
||||
border-radius: 4px;
|
||||
border-radius: var(--app-radius-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
.el-tag.status-badge.is-online {
|
||||
|
||||
Reference in new issue
Block a user