shalu-agent-workflow/apps/web/src/style.css

:root {
	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	font-weight: 400;

	color-scheme: light dark;

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	--el-color-primary: #ff6b6b;
}

/* 浅色主题（默认） */
:root {
	--bg-page: #ffffff;
	--bg-base: #ffffff;
	--bg-container: #f5f7fa;
	--bg-overlay: #ffffff;
	--text-primary: #303133;
	--text-secondary: #606266;
	--text-tertiary: #909399;
	--text-placeholder: #adb3b8;
	--text-disabled: #c0c4c8;
	--text-strong: #000000;
	--card-bg-selected: linear-gradient(135deg, #ffe6e6 0%, #ffd6d6 100%);
	--card-bg-unselected: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
	--border-light: #ebeef5;
	--border-base: #dcdfe6;
	--border-dark: #ccc;

	/* Element Plus 全局背景和文字 */
	--el-bg-color: #ffffff;
	--el-text-color-primary: #303133;
	--el-text-color-regular: #606266;
	--el-text-color-secondary: #909399;
	--el-text-color-placeholder: #adb3b8;
	--el-text-color-disabled: #c0c4c8;
	--el-border-color: #dcdfe6;
	--el-border-color-light: #ebeef5;
	--el-border-color-lighter: #f5f7fa;
	--el-border-color-extra-light: #fafafa;
	--el-fill-color-blank: #ffffff;
	--el-fill-color-white: #ffffff;
	--el-fill-color: #f0f2f5;
	--el-fill-color-light: #f5f7fa;
	--el-fill-color-lighter: #fafafa;
	--el-fill-color-extra-light: #fafbfc;
}

/* 暗黑主题 */
:root.dark {
	--bg-page: #0a0a0a;
	--bg-base: #141414;
	--bg-container: #1f1f1f;
	--bg-overlay: #262626;
	--text-primary: #efefef;
	--text-secondary: #b3b3b3;
	--text-tertiary: #909399;
	--text-placeholder: #757575;
	--text-disabled: #6c6c6c;
	--text-strong: #ffffff;
	--card-bg-selected: linear-gradient(135deg, #4a2a2a 0%, #3a1f1f 100%);
	--card-bg-unselected: linear-gradient(135deg, #2a2a2a 0%, #141414 100%);
	--border-light: #414141;
	--border-base: #434343;
	--border-dark: #595959;

	/* Element Plus 暗黑背景和文字 */
	--el-bg-color: #141414;
	--el-text-color-primary: #efefef;
	--el-text-color-regular: #b3b3b3;
	--el-text-color-secondary: #909399;
	--el-text-color-placeholder: #757575;
	--el-text-color-disabled: #6c6c6c;
	--el-border-color: #434343;
	--el-border-color-light: #414141;
	--el-border-color-lighter: #373737;
	--el-border-color-extra-light: #262626;
	--el-fill-color-blank: #1f1f1f;
	--el-fill-color-white: #1f1f1f;
	--el-fill-color: #262626;
	--el-fill-color-light: #2a2a2a;
	--el-fill-color-lighter: #2e2e2e;
	--el-fill-color-extra-light: #323232;
}

a {
	font-weight: 500;
	color: var(--el-color-primary);
	text-decoration: inherit;
}
a:hover {
	color: var(--el-color-primary);
}

body {
	margin: 0;
	padding: 0;
	min-width: 320px;
	height: 100%;
	background-color: var(--bg-page);
	color: var(--text-primary);
	transition:
		background-color 0.3s,
		color 0.3s;
}

h1 {
	font-size: 3.2em;
	line-height: 1.1;
}

button {
	border-radius: 8px;
	border: 1px solid transparent;
	padding: 0.6em 1.2em;
	font-size: 1em;
	font-weight: 500;
	font-family: inherit;
	background-color: var(--bg-container);
	color: var(--text-primary);
	cursor: pointer;
	transition: all 0.25s;
}
button:hover {
	border-color: var(--el-color-primary);
	background-color: var(--bg-base);
}
button:focus,
button:focus-visible {
	outline: 4px auto -webkit-focus-ring-color;
}

.card {
	padding: 2em;
}

#app {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

@media (prefers-color-scheme: light) {
	:root {
		color: #213547;
		background-color: #ffffff;
	}
	a:hover {
		color: var(--el-color-primary);
	}
	button {
		background-color: #f9f9f9;
	}
}

/* Dialog 全局样式 */
.el-dialog {
	overflow: hidden;
	border-top-left-radius: 4px !important;
	border-top-right-radius: 4px !important;
	padding: 0 !important;
}
.el-dialog__body {
	padding: calc(var(--el-dialog-padding-primary)) var(--el-dialog-padding-primary);
	background-color: var(--bg-base);
	color: var(--text-primary);
}

.el-dialog__header {
	border-bottom: 1px solid var(--border-base) !important;
	margin-right: 0 !important;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	padding: 0px 13px !important;
	line-height: 53px;
	height: 50px;
	color: var(--text-primary) !important;
	font-weight: bold;
	font-size: 14px;
	background-color: var(--bg-base) !important;
}

.el-dialog__headerbtn {
	height: 50px !important;
	width: 50px !important;
	top: 0 !important;
}

.el-dialog__footer {
	padding: var(--el-dialog-padding-primary) !important;
	/* padding-top: 0 !important; */
	text-align: right;
	box-sizing: border-box;
	background-color: var(--bg-base);
	border-top: 1px solid var(--border-light);
}

.el-dialog__headerbtn .el-dialog__close {
	color: var(--text-primary) !important;
}

.el-dialog__title {
	color: var(--text-primary);
}

/* Element Plus 所有组件的全局样式覆盖 */
.el-input,
.el-input__wrapper,
.el-input__inner {
	background-color: var(--bg-base);
	border-color: var(--border-base);
	color: var(--text-primary);
}

.el-input__inner::placeholder {
	color: var(--text-placeholder);
}

.el-textarea__inner {
	background-color: var(--bg-base);
	border-color: var(--border-base);
	color: var(--text-primary);
}

.el-select-dropdown {
	background-color: var(--bg-container);
	border-color: var(--border-base);
}

.el-option {
	color: var(--text-primary);
}

.el-option:hover {
	background-color: var(--bg-base);
}

.el-option.selected {
	background-color: var(--bg-base);
	color: var(--el-color-primary);
}

.el-popper {
	background-color: var(--bg-container);
	border-color: var(--border-base);
	color: var(--text-primary);
}

.el-table {
	background-color: var(--bg-base);
	color: var(--text-primary);
}

.el-table__header th {
	background-color: var(--bg-container);
	border-color: var(--border-base);
	color: var(--text-primary);
}

.el-table__body tr {
	background-color: var(--bg-base);
	border-color: var(--border-base);
}

.el-table__body tr:hover > td {
	background-color: var(--bg-overlay);
}

.el-card {
	background-color: var(--bg-base);
	border-color: var(--border-light);
	color: var(--text-primary);
}

.el-card__header {
	background-color: var(--bg-base);
	border-color: var(--border-light);
	color: var(--text-primary);
}

.el-container {
	background-color: var(--bg-page);
}

.el-main {
	background-color: var(--bg-page);
	color: var(--text-primary);
}

.el-aside {
	background-color: var(--bg-base);
}

.el-header {
	background-color: var(--bg-base);
	border-color: var(--border-light);
	color: var(--text-primary);
}

.el-footer {
	background-color: var(--bg-base);
	border-color: var(--border-light);
	color: var(--text-primary);
}

.el-menu {
	background-color: var(--bg-base);
	border-color: var(--border-light);
	color: var(--text-primary);
}

.el-menu-item,
.el-sub-menu__title {
	color: var(--text-secondary);
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
	color: var(--text-primary);
	background-color: var(--bg-container) !important;
}

.el-menu-item.is-active {
	background-color: var(--bg-container) !important;
	color: var(--el-color-primary) !important;
	border-right-color: var(--el-color-primary);
}

.el-button {
	border-color: var(--border-base);
	color: var(--text-primary);
}

.el-button:hover {
	background-color: var(--bg-container);
	border-color: var(--border-base);
	color: var(--text-primary);
}

.el-tag {
	background-color: var(--bg-container);
	border-color: var(--border-light);
	color: var(--text-primary);
}

.el-pagination .btn {
	background-color: var(--bg-base);
	color: var(--text-primary);
	border-color: var(--border-light);
}

.el-pagination .btn:hover {
	color: var(--el-color-primary);
}

.el-tooltip__popper {
	background-color: var(--bg-container);
	border-color: var(--border-base);
	color: var(--text-primary);
}

.el-drawer {
	background-color: var(--bg-base);
	color: var(--text-primary);
}

/* 全局通用样式类 - 供所有组件使用 */
/* 白色/基础背景的元素 */
[style*='background: #fff'],
[style*='background:#fff'],
[style*='background-color: #fff'],
[style*='background-color:#fff'],
[style*='background: white'],
.panel,
.card-container,
.content-wrapper {
	background-color: var(--bg-base) !important;
}

/* 浅灰背景的元素 */
[style*='background: #f'],
[style*='background:#f'],
.container-light,
.section-light {
	background-color: var(--bg-container) !important;
}

/* 深色文字 */
[style*='color: #333'],
[style*='color:#333'],
[style*='color: #222'],
[style*='color: #1f2937'],
[style*='color: #111827'],
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.heading,
.text-primary {
	color: var(--text-primary) !important;
}

/* 次要文字 */
[style*='color: #666'],
[style*='color:#666'],
[style*='color: #6b7280'],
.description,
.subtitle,
.text-secondary {
	color: var(--text-secondary) !important;
}

/* 三级文字 */
[style*='color: #999'],
[style*='color:#999'],
[style*='color: #888'],
.text-muted,
.text-tertiary {
	color: var(--text-tertiary) !important;
}

/* 边框 */
[style*='border: 1px solid #f0'],
[style*='border-bottom: 1px solid #f'],
[style*='border-top: 1px solid #f'] {
	border-color: var(--border-light) !important;
}

/* 卡片和面板通用样式 */
.stat-card,
.action-card,
.content-panel,
.workflow-card,
.panel-header,
.welcome-banner {
	background-color: var(--bg-base) !important;
	border-color: var(--border-light) !important;
	color: var(--text-primary) !important;
}

.stat-card:hover,
.action-card:hover,
.workflow-card:hover {
	background-color: var(--bg-container) !important;
}

/* 阴影效果 - 根据主题调整透明度 */
:root {
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
	--shadow-lg: 2px 4px 12px rgba(0, 0, 0, 0.18);
}

:root.dark {
	--shadow-sm: 0 2px 8px rgba(255, 255, 255, 0.25);
	--shadow-md: 0 4px 16px rgba(255, 255, 255, 0.35);
	--shadow-lg: 2px 4px 12px rgba(255, 255, 255, 0.4);
}

/* NProgress 主题色 */
#nprogress .bar {
	background: var(--el-color-primary) !important;
}

#nprogress .peg {
	box-shadow:
		0 0 10px var(--el-color-primary),
		0 0 5px var(--el-color-primary) !important;
}

#nprogress .spinner-icon {
	border-top-color: var(--el-color-primary) !important;
	border-left-color: var(--el-color-primary) !important;
}