优化前端代码架构 - 提取CSS变量和工具类
主要改进： - 新增 variables.css 统一管理所有主题相关的CSS变量 - 新增 utilities.css 提供可复用的工具类组件 - 重构所有Vue组件，移除重复的CSS代码 - 统一使用CSS变量实现一致的粉色主题(#FF6B9D) - 改进代码组织结构，提升可维护性 - 优化样式继承和复用机制 修改文件： - 新增：frontend/src/styles/variables.css, utilities.css - 重构：App.vue, 所有视图组件和组件文件 - 更新：style.css, element-plus.css 技术亮点： - 模块化CSS架构，使用@import导入 - 统一的颜色、间距、阴影、过渡效果变量 - 卡片、按钮、布局等通用工具类 - 响应式设计支持
This commit is contained in:
祀梦
@@ -1,177 +1,160 @@
|
||||
/* Element Plus 全局样式覆盖 - 强制去除所有黑色边框 */
|
||||
|
||||
/* 输入框 */
|
||||
.el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #FFE4EC inset !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--border) inset !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper:hover,
|
||||
.el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
||||
}
|
||||
|
||||
/* 下拉选择框 */
|
||||
.el-select__wrapper {
|
||||
box-shadow: 0 0 0 1px #FFE4EC inset !important;
|
||||
}
|
||||
|
||||
.el-select__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--border) inset !important;
|
||||
}
|
||||
|
||||
.el-select__wrapper:hover,
|
||||
.el-select__wrapper.is-focused {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
||||
}
|
||||
|
||||
.el-select__placeholder {
|
||||
color: #999999 !important;
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.el-select__caret {
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item {
|
||||
color: #333333 !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.is-selected {
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 数字输入框 */
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
background: #FFF9FB !important;
|
||||
color: #999999 !important;
|
||||
border: 1px solid #FFE4EC !important;
|
||||
background: var(--bg-light) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-input-number__decrease:hover,
|
||||
.el-input-number__increase:hover {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: #FF6B9D !important;
|
||||
border-color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-input-number__decrease.is-disabled,
|
||||
.el-input-number__increase.is-disabled {
|
||||
color: #cccccc !important;
|
||||
border-color: #FFE4EC !important;
|
||||
color: #ccc !important;
|
||||
border-color: var(--border) !important;
|
||||
}
|
||||
|
||||
.el-input-number__wrapper {
|
||||
box-shadow: 0 0 0 1px #FFE4EC inset !important;
|
||||
}
|
||||
|
||||
.el-input-number__wrapper:hover {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--border) inset !important;
|
||||
}
|
||||
|
||||
.el-input-number__wrapper:hover,
|
||||
.el-input-number__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
||||
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.el-button {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%) !important;
|
||||
border-color: #FF6B9D !important;
|
||||
background: var(--gradient-primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.el-button--primary:hover {
|
||||
background: linear-gradient(135deg, #FF5A8F 0%, #FF7FA7 100%) !important;
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.el-button--success {
|
||||
background: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%) !important;
|
||||
border-color: #00D4FF !important;
|
||||
background: var(--gradient-cyan) !important;
|
||||
border-color: var(--cyan) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.el-button--success:hover {
|
||||
background: linear-gradient(135deg, #00C4F0 0%, #00D4E8 100%) !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.el-button--warning {
|
||||
background: linear-gradient(135deg, #FFB800 0%, #FFD000 100%) !important;
|
||||
border-color: #FFB800 !important;
|
||||
background: var(--gradient-yellow) !important;
|
||||
border-color: var(--yellow) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.el-button--warning:hover {
|
||||
background: linear-gradient(135deg, #FFA700 0%, #FFC000 100%) !important;
|
||||
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.el-button--danger {
|
||||
background: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%) !important;
|
||||
border-color: #FF6B6B !important;
|
||||
background: var(--gradient-danger) !important;
|
||||
border-color: var(--danger) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.el-button--danger:hover {
|
||||
background: linear-gradient(135deg, #FF5A5A 0%, #FF7A7A 100%) !important;
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.el-card {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.08) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
border-bottom: 1px solid #FFE4EC !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
background: var(--bg-card) !important;
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
.el-table {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
background: #FFF9FB !important;
|
||||
color: #333333 !important;
|
||||
border-bottom: 1px solid #FFE4EC !important;
|
||||
background: var(--bg-light) !important;
|
||||
color: var(--text-primary) !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-table td.el-table__cell {
|
||||
border-bottom: 1px solid #FFE4EC !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-table__border-left {
|
||||
border-left: 1px solid #FFE4EC !important;
|
||||
border-left: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-table__border-right {
|
||||
border-right: 1px solid #FFE4EC !important;
|
||||
border-right: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-table tr:hover > td {
|
||||
@@ -179,22 +162,21 @@
|
||||
}
|
||||
|
||||
.el-table__body tr.current-row > td.el-table__cell {
|
||||
background: #FFE4EC !important;
|
||||
background: var(--border) !important;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
.el-checkbox__inner {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.el-checkbox__inner:hover {
|
||||
border-color: #FF6B9D !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background: #FF6B9D !important;
|
||||
border-color: #FF6B9D !important;
|
||||
background: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-disabled .el-checkbox__inner {
|
||||
@@ -202,79 +184,71 @@
|
||||
border-color: #e4e7ed !important;
|
||||
}
|
||||
|
||||
/* 分页器 */
|
||||
.el-pagination button {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
background: #FFF9FB !important;
|
||||
color: #999999 !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
background: var(--bg-light) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.el-pagination button:hover {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-pagination li.is-active {
|
||||
background: #FF6B9D !important;
|
||||
background: var(--primary) !important;
|
||||
color: white !important;
|
||||
border-color: #FF6B9D !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
background: #FFF9FB !important;
|
||||
color: #999999 !important;
|
||||
border: 1px solid #FFE4EC !important;
|
||||
background: var(--bg-light) !important;
|
||||
color: var(--text-secondary) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-pager li:hover {
|
||||
color: #FF6B9D !important;
|
||||
}
|
||||
|
||||
/* Tag */
|
||||
.el-tag {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-tag--primary {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
border-color: rgba(255, 107, 157, 0.3) !important;
|
||||
}
|
||||
|
||||
.el-tag--success {
|
||||
background: rgba(0, 212, 255, 0.1) !important;
|
||||
color: #00D4FF !important;
|
||||
color: var(--cyan) !important;
|
||||
border-color: rgba(0, 212, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
.el-tag--warning {
|
||||
background: rgba(255, 184, 0, 0.1) !important;
|
||||
color: #FFB800 !important;
|
||||
color: var(--yellow) !important;
|
||||
border-color: rgba(255, 184, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.el-tag--danger {
|
||||
background: rgba(255, 107, 107, 0.1) !important;
|
||||
color: #FF6B6B !important;
|
||||
color: var(--danger) !important;
|
||||
border-color: rgba(255, 107, 107, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Rate 评分 */
|
||||
.el-rate__icon {
|
||||
color: #FFE4EC !important;
|
||||
color: var(--border) !important;
|
||||
}
|
||||
|
||||
.el-rate__icon.hover {
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Dialog 对话框 */
|
||||
.el-dialog {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #FFE4EC !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
@@ -282,96 +256,111 @@
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
border-top: 1px solid #FFE4EC !important;
|
||||
border-top: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
/* Dropdown 下拉菜单 */
|
||||
.el-dropdown-menu {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
color: #333333 !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item:hover {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Scrollbar 滚动条 */
|
||||
.el-scrollbar__wrap::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap::-webkit-scrollbar-thumb {
|
||||
background: #FFE4EC;
|
||||
border-radius: 3px;
|
||||
background: var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.el-scrollbar__wrap::-webkit-scrollbar-thumb:hover {
|
||||
background: #FF6B9D;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* Form 表单 */
|
||||
.el-form-item__label {
|
||||
color: #666666 !important;
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
.el-form-item__error {
|
||||
color: #FF6B6B !important;
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
/* Message 消息提示 */
|
||||
.el-message {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
}
|
||||
|
||||
.el-message--success {
|
||||
background: rgba(0, 212, 255, 0.1) !important;
|
||||
border-color: rgba(0, 212, 255, 0.3) !important;
|
||||
color: #00D4FF !important;
|
||||
color: var(--cyan) !important;
|
||||
}
|
||||
|
||||
.el-message--error {
|
||||
background: rgba(255, 107, 107, 0.1) !important;
|
||||
border-color: rgba(255, 107, 107, 0.3) !important;
|
||||
color: #FF6B6B !important;
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
.el-message--warning {
|
||||
background: rgba(255, 184, 0, 0.1) !important;
|
||||
border-color: rgba(255, 184, 0, 0.3) !important;
|
||||
color: #FFB800 !important;
|
||||
color: var(--yellow) !important;
|
||||
}
|
||||
|
||||
.el-message--info {
|
||||
background: rgba(255, 107, 157, 0.1) !important;
|
||||
border-color: rgba(255, 107, 157, 0.3) !important;
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* MessageBox 弹窗 */
|
||||
.el-message-box {
|
||||
border: 1px solid #FFE4EC !important;
|
||||
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
}
|
||||
|
||||
.el-message-box__header {
|
||||
border-bottom: 1px solid #FFE4EC !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-message-box__title {
|
||||
color: #FF6B9D !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-message-box__content {
|
||||
color: #333333 !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.el-message-box__btns {
|
||||
border-top: 1px solid #FFE4EC !important;
|
||||
border-top: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.el-alert--success {
|
||||
background-color: rgba(0, 255, 136, 0.1) !important;
|
||||
border-color: var(--green) !important;
|
||||
}
|
||||
|
||||
.el-alert--info {
|
||||
background-color: rgba(255, 107, 157, 0.1) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.el-alert--warning {
|
||||
background-color: rgba(255, 184, 0, 0.1) !important;
|
||||
border-color: var(--yellow) !important;
|
||||
}
|
||||
|
||||
.el-alert--error {
|
||||
background-color: rgba(255, 51, 102, 0.1) !important;
|
||||
border-color: var(--danger) !important;
|
||||
}
|
||||
|
||||
190
frontend/src/styles/utilities.css
Normal file
190
frontend/src/styles/utilities.css
Normal file
@@ -0,0 +1,190 @@
|
||||
.card-base {
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition-hover);
|
||||
}
|
||||
|
||||
.card-base:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.btn-base {
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
transition: var(--transition-base);
|
||||
border: 1px solid var(--border);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-primary);
|
||||
border-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: var(--gradient-cyan);
|
||||
border-color: var(--cyan);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: var(--gradient-yellow);
|
||||
border-color: var(--yellow);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--gradient-danger);
|
||||
border-color: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
background: var(--bg-page);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stat-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.text-cyan {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.bg-gradient-primary {
|
||||
background: var(--gradient-primary);
|
||||
}
|
||||
|
||||
.bg-gradient-cyan {
|
||||
background: var(--gradient-cyan);
|
||||
}
|
||||
|
||||
.border-pink {
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
43
frontend/src/styles/variables.css
Normal file
43
frontend/src/styles/variables.css
Normal file
@@ -0,0 +1,43 @@
|
||||
:root {
|
||||
--primary: #FF6B9D;
|
||||
--primary-light: #FF8FB3;
|
||||
--primary-dark: #FF5A8F;
|
||||
|
||||
--cyan: #00D4FF;
|
||||
--cyan-light: #00E5FF;
|
||||
--cyan-dark: #00B8E0;
|
||||
|
||||
--green: #34D399;
|
||||
--yellow: #FFB800;
|
||||
--danger: #FF6B6B;
|
||||
--purple: #A855F7;
|
||||
|
||||
--bg-page: #FAFAFA;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-light: #FFF9FB;
|
||||
|
||||
--text-primary: #333333;
|
||||
--text-secondary: #999999;
|
||||
--text-muted: #666666;
|
||||
|
||||
--border: #FFE4EC;
|
||||
--border-light: #FFD6E3;
|
||||
|
||||
--gradient-primary: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%);
|
||||
--gradient-cyan: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%);
|
||||
--gradient-yellow: linear-gradient(135deg, #FFB800 0%, #FFD000 100%);
|
||||
--gradient-danger: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%);
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-2xl: 20px;
|
||||
|
||||
--shadow-sm: 0 2px 8px rgba(255, 107, 157, 0.08);
|
||||
--shadow-md: 0 4px 12px rgba(255, 107, 157, 0.15);
|
||||
--shadow-lg: 0 8px 20px rgba(255, 107, 157, 0.2);
|
||||
|
||||
--transition-base: all 0.3s ease;
|
||||
--transition-hover: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
Reference in New Issue
Block a user