359 lines
8.4 KiB
CSS
359 lines
8.4 KiB
CSS
:root {
|
|
--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: #c4322a;
|
|
--el-color-primary-light-3: #d3615b;
|
|
--el-color-primary-light-5: #e19995;
|
|
--el-color-primary-light-7: #f0c2c0;
|
|
--el-color-primary-light-8: #f5d9d8;
|
|
--el-color-primary-light-9: #faeeed;
|
|
--el-color-primary-dark-2: #9d2822;
|
|
--purple: var(--el-color-primary);
|
|
--muted: #909399;
|
|
--line: #e4e7ed;
|
|
}
|
|
body {
|
|
background: var(--el-bg-color-page);
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
.el-button--primary {
|
|
--el-button-bg-color: var(--el-color-primary);
|
|
--el-button-border-color: var(--el-color-primary);
|
|
--el-button-hover-bg-color: var(--el-color-primary-dark-2);
|
|
--el-button-hover-border-color: var(--el-color-primary-dark-2);
|
|
--el-button-active-bg-color: var(--el-color-primary-dark-2);
|
|
--el-button-active-border-color: var(--el-color-primary-dark-2);
|
|
}
|
|
.el-button--danger {
|
|
--el-button-text-color: #fff;
|
|
--el-button-bg-color: var(--el-color-danger);
|
|
--el-button-border-color: var(--el-color-danger);
|
|
--el-button-hover-bg-color: var(--el-color-danger-dark-2);
|
|
--el-button-hover-border-color: var(--el-color-danger-dark-2);
|
|
color: #fff !important;
|
|
background: var(--el-color-danger) !important;
|
|
border-color: var(--el-color-danger) !important;
|
|
}
|
|
.el-button--danger:hover {
|
|
background: var(--el-color-danger-dark-2) !important;
|
|
border-color: var(--el-color-danger-dark-2) !important;
|
|
}
|
|
.el-message-box__btns .el-button--danger {
|
|
color: #fff !important;
|
|
background: var(--el-color-danger) !important;
|
|
border-color: var(--el-color-danger) !important;
|
|
}
|
|
.eyebrow {
|
|
letter-spacing: 0.7px;
|
|
color: #9298a1;
|
|
}
|
|
.page-heading h1 {
|
|
font:
|
|
600 23px Arial,
|
|
'Noto Sans SC',
|
|
sans-serif;
|
|
letter-spacing: 0;
|
|
color: #2f343c;
|
|
}
|
|
.page-heading p {
|
|
color: #818791;
|
|
}
|
|
.primary-button {
|
|
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: var(--el-color-primary-dark-2) !important;
|
|
border-color: var(--el-color-primary-dark-2) !important;
|
|
}
|
|
.stats-grid {
|
|
gap: 12px;
|
|
}
|
|
.stat-card,
|
|
.panel {
|
|
border-color: #e6e8eb;
|
|
border-radius: var(--app-radius-md);
|
|
box-shadow: none;
|
|
}
|
|
.stat-card {
|
|
min-height: 116px;
|
|
padding: 14px 16px;
|
|
}
|
|
.stat-top {
|
|
color: #727983;
|
|
}
|
|
.stat-icon {
|
|
border-radius: var(--app-radius-sm);
|
|
background: var(--el-color-primary-light-9) !important;
|
|
color: var(--el-color-primary) !important;
|
|
}
|
|
.stat-value {
|
|
font-family: var(--font-display);
|
|
color: #303640;
|
|
}
|
|
.stat-foot .positive {
|
|
color: #4d866a;
|
|
background: #eff5f1;
|
|
}
|
|
.sparkline {
|
|
opacity: 0.42;
|
|
}
|
|
.positive {
|
|
color: #4d866a;
|
|
background: #eff5f1;
|
|
}
|
|
.review-count,
|
|
.muted-count {
|
|
background: #eef1f4;
|
|
color: #61738a;
|
|
}
|
|
.chart-svg path:first-of-type {
|
|
fill: var(--el-color-primary-light-8);
|
|
}
|
|
.chart-svg path:last-of-type {
|
|
stroke: var(--el-color-primary);
|
|
}
|
|
.view-all,
|
|
.row-action {
|
|
color: var(--el-color-primary) !important;
|
|
}
|
|
.review-art {
|
|
background: #f1f3f5 !important;
|
|
border-radius: var(--app-radius-sm);
|
|
font-size: 0;
|
|
}
|
|
.review-art:after {
|
|
content: '—';
|
|
font-size: 14px;
|
|
color: #818a95;
|
|
}
|
|
.review-row .el-tag,
|
|
.drama-table .el-tag,
|
|
.episode-row .el-tag {
|
|
border-radius: var(--app-radius-sm);
|
|
background: #f0f2f4 !important;
|
|
color: #606b78 !important;
|
|
}
|
|
.drama-cover {
|
|
border-radius: var(--app-radius-sm);
|
|
box-shadow: none;
|
|
font-size: 14px;
|
|
background: #eceff2 !important;
|
|
}
|
|
.drama-cover.rose,
|
|
.drama-cover.purple,
|
|
.drama-cover.peach,
|
|
.drama-cover.blue,
|
|
.drama-cover.gold {
|
|
background: #eceff2 !important;
|
|
}
|
|
.drama-table th {
|
|
background: #f7f8fa;
|
|
color: #7d848e;
|
|
}
|
|
.drama-table td {
|
|
color: #656c76;
|
|
}
|
|
.drama-cell b {
|
|
color: #343a43;
|
|
}
|
|
.library-panel {
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
}
|
|
.library-toolbar .el-tabs__item,
|
|
.cover-toolbar .el-tabs__item {
|
|
font-size: 11px;
|
|
}
|
|
.library-toolbar .el-tabs__item.is-active,
|
|
.cover-toolbar .el-tabs__item.is-active {
|
|
color: var(--el-color-primary);
|
|
}
|
|
.library-toolbar .el-tabs__active-bar,
|
|
.cover-toolbar .el-tabs__active-bar {
|
|
background: var(--el-color-primary);
|
|
}
|
|
.toolbar-filters .el-input__wrapper,
|
|
.toolbar-filters .el-select__wrapper,
|
|
.drama-select .el-input__wrapper {
|
|
border-radius: var(--app-radius-sm);
|
|
}
|
|
.episode-panel {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
.episode-row {
|
|
border-color: #e7e9ec;
|
|
border-radius: var(--app-radius-sm);
|
|
}
|
|
.episode-thumb {
|
|
border-radius: var(--app-radius-sm);
|
|
background: #e9ecef;
|
|
color: #7d8792;
|
|
}
|
|
.episode-thumb .el-icon {
|
|
color: #606a75;
|
|
}
|
|
.episode-actions .el-button {
|
|
color: #767e88;
|
|
}
|
|
.cover-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
|
|
}
|
|
.cover-card,
|
|
.add-cover {
|
|
border-color: #e6e8eb;
|
|
border-radius: var(--app-radius-sm);
|
|
}
|
|
.poster-art {
|
|
background: #e9ecef !important;
|
|
filter: grayscale(0.72);
|
|
}
|
|
.poster-art.rose,
|
|
.poster-art.purple,
|
|
.poster-art.peach,
|
|
.poster-art.blue,
|
|
.poster-art.gold {
|
|
background: #e9ecef !important;
|
|
}
|
|
.poster-glow,
|
|
.poster-stamp {
|
|
display: none;
|
|
}
|
|
.poster-emoji {
|
|
font-size: 48px;
|
|
filter: grayscale(1);
|
|
opacity: 0.55;
|
|
}
|
|
.poster-copy {
|
|
text-shadow: none;
|
|
color: #303640;
|
|
}
|
|
.poster-copy small,
|
|
.poster-copy span {
|
|
color: #606873;
|
|
opacity: 1;
|
|
}
|
|
.cover-card-info b {
|
|
color: #383e46;
|
|
}
|
|
.add-cover {
|
|
min-height: 276px;
|
|
background: #fafbfc;
|
|
color: #656d77;
|
|
}
|
|
.add-cover > span {
|
|
border-radius: var(--app-radius-sm);
|
|
background: #edf0f3;
|
|
color: #68798d;
|
|
}
|
|
.role-card {
|
|
border-radius: var(--app-radius-sm);
|
|
border-color: #e7e9ec;
|
|
}
|
|
.role-active {
|
|
border-color: var(--el-color-primary-light-5);
|
|
background: var(--el-color-primary-light-9);
|
|
}
|
|
.role-icon {
|
|
border-radius: var(--app-radius-sm);
|
|
background: var(--el-color-primary-light-9) !important;
|
|
color: var(--el-color-primary) !important;
|
|
}
|
|
.role-badge {
|
|
border-radius: var(--app-radius-sm);
|
|
background: #eef1f4;
|
|
color: #65758a;
|
|
}
|
|
.permission-group h3 .el-icon {
|
|
color: var(--el-color-primary);
|
|
}
|
|
.permission-group .el-checkbox__input.is-checked .el-checkbox__inner {
|
|
background: var(--el-color-primary);
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
.permission-note {
|
|
background: #f6f7f8;
|
|
border-radius: var(--app-radius-sm);
|
|
}
|
|
.el-dialog {
|
|
border-radius: var(--app-radius-md) !important;
|
|
}
|
|
.el-dialog__header,
|
|
.el-dialog__footer {
|
|
border-color: #e8eaed;
|
|
}
|
|
.upload-area .el-upload-dragger {
|
|
border-radius: var(--app-radius-sm);
|
|
background: #fafbfc;
|
|
}
|
|
.upload-icon,
|
|
.upload-area .el-upload__text em {
|
|
color: var(--el-color-primary);
|
|
}
|
|
.el-tabs__item,
|
|
.el-input__inner,
|
|
.el-select__placeholder {
|
|
font-family: var(--font-body);
|
|
}
|
|
.el-tag.status-badge {
|
|
border-radius: var(--app-radius-sm);
|
|
font-weight: 500;
|
|
}
|
|
.el-tag.status-badge.is-online {
|
|
--el-tag-bg-color: #e8f8ef;
|
|
--el-tag-border-color: #b7ebc9;
|
|
--el-tag-text-color: #178a4a;
|
|
background: #e8f8ef !important;
|
|
border-color: #b7ebc9 !important;
|
|
color: #178a4a !important;
|
|
}
|
|
.el-tag.status-badge.is-reviewing {
|
|
--el-tag-bg-color: #fff4e5;
|
|
--el-tag-border-color: #f8d7a8;
|
|
--el-tag-text-color: #d97706;
|
|
background: #fff4e5 !important;
|
|
border-color: #f8d7a8 !important;
|
|
color: #d97706 !important;
|
|
}
|
|
.el-tag.status-badge.is-draft {
|
|
--el-tag-bg-color: #f2f3f5;
|
|
--el-tag-border-color: #e0e2e6;
|
|
--el-tag-text-color: #6b7280;
|
|
background: #f2f3f5 !important;
|
|
border-color: #e0e2e6 !important;
|
|
color: #6b7280 !important;
|
|
}
|
|
.el-tag.status-badge.is-pending {
|
|
--el-tag-bg-color: var(--el-color-primary-light-9);
|
|
--el-tag-border-color: var(--el-color-primary-light-7);
|
|
--el-tag-text-color: var(--el-color-primary);
|
|
background: var(--el-color-primary-light-9) !important;
|
|
border-color: var(--el-color-primary-light-7) !important;
|
|
color: var(--el-color-primary) !important;
|
|
}
|
|
.el-tag.status-badge.is-offline {
|
|
--el-tag-bg-color: #fdecec;
|
|
--el-tag-border-color: #f8c9c9;
|
|
--el-tag-text-color: #d45656;
|
|
background: #fdecec !important;
|
|
border-color: #f8c9c9 !important;
|
|
color: #d45656 !important;
|
|
}
|