bxztApp/packages/screen/src/views/RiskWarning/component/date-picker-theme.scss

/* ========================================
   el-date-picker 自定义主题样式
   背景色: #122C45
   文字色: #FFFFFF
   主题色/选中背景色: #289DFF
   ======================================== */

/* 防止样式被覆盖，提高优先级 */
.custom-date-picker {
  z-index: 10000 !important;
  /* 弹出框整体背景色 */
  background-color: #122C45 !important;
  /* 弹出框边框（主题色） */
  border: 1px solid #289DFF !important;
  /* 可选：阴影效果 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3) !important;
}

.el-date-editor .el-range-input {
  color: #289DFF !important;
}

/* ========== 1. 顶部栏（年月切换区域） ========== */
.custom-date-picker .el-date-picker__header,
.custom-date-picker .el-picker-panel__header {
  background-color: #122C45 !important;
  border-bottom: 1px solid rgba(40, 157, 255, 0.3) !important;
}

.custom-date-picker .el-date-picker__header-label,
.custom-date-picker .el-picker-panel__header-label {
  color: #FFFFFF !important;
}

.custom-date-picker .el-picker-panel__icon-btn {
  color: #FFFFFF !important;
}

.custom-date-picker .el-picker-panel__icon-btn:hover {
  color: #289DFF !important;
}

/* 年份/月份快速选择面板 */
.custom-date-picker .el-year-table td .el-year-table__cell__text,
.custom-date-picker .el-month-table td .el-month-table__cell__text {
  color: #FFFFFF !important;
  background-color: transparent !important;
}

.custom-date-picker .el-year-table td .el-year-table__cell__text:hover,
.custom-date-picker .el-month-table td .el-month-table__cell__text:hover {
  color: #289DFF !important;
  background-color: rgba(40, 157, 255, 0.2) !important;
}

.custom-date-picker .el-year-table td.current .el-year-table__cell__text,
.custom-date-picker .el-month-table td.current .el-month-table__cell__text {
  background-color: #289DFF !important;
  color: #FFFFFF !important;
}

/* ========== 2. 星期栏 ========== */
.custom-date-picker .el-date-table th,
.custom-date-picker .el-date-table__header th {
  color: #289DFF !important;
  background-color: #122C45 !important;
  border-bottom: 1px solid rgba(40, 157, 255, 0.3) !important;
}

/* ========== 3. 日期单元格（默认状态） ========== */
.custom-date-picker .el-date-table td .el-date-table-cell__text {
  color: #FFFFFF !important;
  background-color: transparent !important;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.custom-date-picker .el-date-table td .el-date-table-cell__text:hover {
  color: #289DFF !important;
  background-color: rgba(40, 157, 255, 0.2) !important;
}

/* ========== 4. 选中状态（核心样式） ========== */
.custom-date-picker .el-date-table td.current .el-date-table-cell__text {
  background-color: #289DFF !important;
  color: #FFFFFF !important;
}

/* ========== 5. 今天按钮样式 ========== */
.custom-date-picker .el-date-table td.today .el-date-table-cell__text {
  color: #289DFF !important;
  font-weight: bold;
  position: relative;
}

.custom-date-picker .el-date-table td.today.current .el-date-table-cell__text {
  color: #FFFFFF !important;
}

/* ========== 6. 其他月份日期（灰色显示） ========== */
.custom-date-picker .el-date-table td.next-month .el-date-table-cell__text,
.custom-date-picker .el-date-table td.prev-month .el-date-table-cell__text {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* ========== 7. 禁用日期样式 ========== */
.custom-date-picker .el-date-table td.disabled .el-date-table-cell__text {
  color: rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  cursor: not-allowed;
}

/* ========== 8. 底部按钮区域 ========== */
.custom-date-picker .el-picker-panel__footer {
  background-color: #122C45 !important;
  border-top: 1px solid rgba(40, 157, 255, 0.3) !important;
}

.custom-date-picker .el-button--text {
  color: #289DFF !important;
  background-color: transparent !important;
}

.custom-date-picker .el-button--text:hover {
  color: #66ccff !important;
  background-color: transparent !important;
}

.custom-date-picker .el-button--primary {
  background-color: #289DFF !important;
  border-color: #289DFF !important;
}

.custom-date-picker .el-button--primary:hover {
  background-color: #1a7acc !important;
  border-color: #1a7acc !important;
}

/* ========== 9. 小三角箭头 ========== */
/* Element Plus 版本 */
.custom-date-picker .el-popper__arrow::before {
  background-color: #122C45 !important;
  border: 1px solid #289DFF !important;
}

/* Element UI 版本 */
.custom-date-picker .popper__arrow {
  border-bottom-color: #122C45 !important;
}

.custom-date-picker .popper__arrow::after {
  border-bottom-color: #122C45 !important;
}

/* ========== 10. 范围选择器样式 ========== */
/* 范围选择器整体背景 */
.custom-date-picker.el-picker-panel--date-range {
  background-color: #122C45 !important;
}

/* 范围选择左右面板 */
.custom-date-picker .el-date-range-picker__content {
  background-color: #152D47 !important;
}

/* 范围选择头部 */
.custom-date-picker .el-date-range-picker__header {
  color: #FFFFFF !important;
  background-color: #122C45 !important;
}

/* 范围选择 - 起始日期 */
.custom-date-picker .el-date-table td.start-date .el-date-table-cell__text,
.custom-date-picker .el-date-table td.end-date .el-date-table-cell__text {
  background-color: #289DFF !important;
  color: #FFFFFF !important;
  border-radius: 4px;
}
.el-date-table td.in-range .el-date-table-cell{
  background-color: #27374A !important;
  border-radius: 0;
}
/* 范围选择 - 中间区间 */
.custom-date-picker .el-date-table td.in-range .el-date-table-cell__text {
  background-color: #3E91BC !important;
  color: #FFFFFF !important;
  border-radius: 0;
}

/* 范围选择 - 区间悬停效果 */
.custom-date-picker .el-date-table td.in-range .el-date-table-cell__text:hover {
  background-color: rgba(40, 157, 255, 0.4) !important;
}

/* ========== 11. 滚动条样式 ========== */
.custom-date-picker .el-scrollbar__bar {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.custom-date-picker .el-scrollbar__thumb {
  background-color: #289DFF !important;
}

/* ========== 12. 时间选择器样式（如有） ========== */
.custom-date-picker .el-time-spinner__item {
  color: #FFFFFF !important;
  background-color: #122C45 !important;
}

.custom-date-picker .el-time-spinner__item:hover {
  background-color: rgba(40, 157, 255, 0.2) !important;
}

.custom-date-picker .el-time-spinner__item.active {
  background-color: #289DFF !important;
  color: #FFFFFF !important;
}

/* ========== 13. 快捷选项样式 ========== */
.custom-date-picker .el-picker-panel__shortcut {
  color: #FFFFFF !important;
  background-color: #122C45 !important;
}

.custom-date-picker .el-picker-panel__shortcut:hover {
  background-color: rgba(40, 157, 255, 0.2) !important;
  color: #289DFF !important;
}

.el-range__icon {
  color: #289DFF !important;
}