|
|
/* Unified date, month, year, range and time picker theme. */
|
|
|
.el-date-editor.el-input .el-input__inner,
|
|
|
.el-date-editor.el-input__inner,
|
|
|
.el-date-editor .el-range-input {
|
|
|
color: #dcecff !important;
|
|
|
background: #12356c !important;
|
|
|
border-color: #1b91bd !important;
|
|
|
}
|
|
|
|
|
|
.el-date-editor.el-input .el-input__inner:hover,
|
|
|
.el-date-editor.el-input .el-input__inner:focus,
|
|
|
.el-date-editor.el-input__inner:hover,
|
|
|
.el-date-editor.el-input__inner.is-active {
|
|
|
border-color: #20cbe5 !important;
|
|
|
}
|
|
|
|
|
|
.el-date-editor .el-input__icon,
|
|
|
.el-date-editor .el-range__icon,
|
|
|
.el-date-editor .el-range__close-icon,
|
|
|
.el-date-editor .el-range-separator {
|
|
|
color: #35c9e9 !important;
|
|
|
}
|
|
|
|
|
|
.el-date-editor .el-range-input::placeholder,
|
|
|
.el-date-editor.el-input .el-input__inner::placeholder {
|
|
|
color: #829bc5 !important;
|
|
|
}
|
|
|
|
|
|
/* Range inputs share one continuous surface; show the cyan frame only while active. */
|
|
|
.el-date-editor.el-range-editor {
|
|
|
background: #12356c !important;
|
|
|
border: 1px solid #6384d8 !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
.el-date-editor.el-range-editor.is-active,
|
|
|
.el-date-editor.el-range-editor:focus-within {
|
|
|
border-color: #20cbe5 !important;
|
|
|
}
|
|
|
|
|
|
.el-date-editor.el-range-editor .el-range-input,
|
|
|
.el-date-editor.el-range-editor .el-range-separator {
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel,
|
|
|
.card-date-editor,
|
|
|
.el-time-panel,
|
|
|
.el-time-range-picker {
|
|
|
color: #c8d8f2 !important;
|
|
|
border-color: #183f78 !important;
|
|
|
background: #0d2d5f !important;
|
|
|
box-shadow: 0 8px 22px rgba(2, 10, 38, 0.45) !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel__body,
|
|
|
.el-picker-panel__content,
|
|
|
.el-date-range-picker__content,
|
|
|
.el-picker-panel__sidebar,
|
|
|
.el-time-panel__content,
|
|
|
.el-time-spinner__wrapper,
|
|
|
.el-time-spinner__list {
|
|
|
color: #c8d8f2 !important;
|
|
|
background: #0d2d5f !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel__sidebar,
|
|
|
.el-date-range-picker__content.is-left,
|
|
|
.el-date-picker__header--bordered,
|
|
|
.el-date-table th,
|
|
|
.el-time-panel__footer {
|
|
|
border-color: rgba(70, 116, 176, 0.42) !important;
|
|
|
}
|
|
|
|
|
|
.el-date-picker__header-label,
|
|
|
.el-date-range-picker__header,
|
|
|
.el-picker-panel__icon-btn,
|
|
|
.el-picker-panel__shortcut,
|
|
|
.el-date-table th,
|
|
|
.el-month-table td .cell,
|
|
|
.el-year-table td .cell,
|
|
|
.el-time-spinner__item {
|
|
|
color: #c8d8f2 !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.available span,
|
|
|
.el-date-table td.available div,
|
|
|
.el-date-table td.next-month span,
|
|
|
.el-date-table td.prev-month span {
|
|
|
color: inherit;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.prev-month,
|
|
|
.el-date-table td.next-month,
|
|
|
.el-date-table td.disabled div,
|
|
|
.el-month-table td.disabled .cell,
|
|
|
.el-year-table td.disabled .cell {
|
|
|
color: #506b96 !important;
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.available:hover span,
|
|
|
.el-month-table td .cell:hover,
|
|
|
.el-year-table td .cell:hover,
|
|
|
.el-picker-panel__icon-btn:hover,
|
|
|
.el-picker-panel__shortcut:hover,
|
|
|
.el-time-spinner__item:hover:not(.disabled):not(.active) {
|
|
|
color: #54ffff !important;
|
|
|
background: rgba(39, 106, 168, 0.45) !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.in-range div,
|
|
|
.el-date-table td.in-range div:hover {
|
|
|
background: #173f78 !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.start-date div,
|
|
|
.el-date-table td.end-date div {
|
|
|
color: #ffffff !important;
|
|
|
background: #176b9e !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.today span,
|
|
|
.el-month-table td.today .cell,
|
|
|
.el-year-table td.today .cell {
|
|
|
color: #54ffff !important;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.current:not(.disabled) span,
|
|
|
.el-month-table td.current:not(.disabled) .cell,
|
|
|
.el-year-table td.current:not(.disabled) .cell {
|
|
|
color: #ffffff !important;
|
|
|
background: #1489ae !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.current:not(.disabled) span,
|
|
|
.el-date-table td.start-date span,
|
|
|
.el-date-table td.end-date span {
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.el-time-spinner__item.active:not(.disabled) {
|
|
|
color: #ffffff !important;
|
|
|
background: #176b9e !important;
|
|
|
}
|
|
|
|
|
|
.el-time-panel__btn,
|
|
|
.el-picker-panel__link-btn.el-button--text {
|
|
|
color: #54ffff !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel__footer {
|
|
|
border-color: rgba(70, 116, 176, 0.42) !important;
|
|
|
background: #0d2d5f !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel[x-placement^="bottom"] .popper__arrow::after,
|
|
|
.el-time-panel[x-placement^="bottom"] .popper__arrow::after {
|
|
|
border-bottom-color: #0d2d5f !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel[x-placement^="top"] .popper__arrow::after,
|
|
|
.el-time-panel[x-placement^="top"] .popper__arrow::after {
|
|
|
border-top-color: #0d2d5f !important;
|
|
|
}
|
|
|
|
|
|
/* Unified date picker surface and selected-date typography. */
|
|
|
.el-picker-panel,
|
|
|
.el-date-picker,
|
|
|
.el-date-range-picker,
|
|
|
.el-time-panel,
|
|
|
.el-time-range-picker,
|
|
|
.card-date-editor {
|
|
|
background: #0b2351 !important;
|
|
|
background-color: #0b2351 !important;
|
|
|
border-radius: 2px !important;
|
|
|
box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.25) !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel__body,
|
|
|
.el-picker-panel__content,
|
|
|
.el-date-range-picker__content,
|
|
|
.el-picker-panel__sidebar,
|
|
|
.el-time-panel__content,
|
|
|
.el-time-spinner__wrapper,
|
|
|
.el-time-spinner__list,
|
|
|
.el-picker-panel__footer {
|
|
|
background: #0b2351 !important;
|
|
|
background-color: #0b2351 !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.current:not(.disabled) span,
|
|
|
.el-date-table td.start-date span,
|
|
|
.el-date-table td.end-date span,
|
|
|
.el-date-table td.today span,
|
|
|
.el-month-table td.current:not(.disabled) .cell,
|
|
|
.el-year-table td.current:not(.disabled) .cell,
|
|
|
.el-time-spinner__item.active:not(.disabled) {
|
|
|
font-family: PingFangSC-Regular, "PingFang SC", sans-serif !important;
|
|
|
font-size: 12px !important;
|
|
|
color: #00ffff !important;
|
|
|
letter-spacing: -0.01px !important;
|
|
|
line-height: 20px !important;
|
|
|
text-align: center !important;
|
|
|
text-shadow: 0 0 6px rgba(2, 31, 73, 0.47) !important;
|
|
|
font-weight: 400 !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.current:not(.disabled) div,
|
|
|
.el-date-table td.start-date div,
|
|
|
.el-date-table td.end-date div {
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
|
|
|
.el-date-table td.in-range div,
|
|
|
.el-date-table td.in-range div:hover {
|
|
|
background: rgba(39, 106, 168, 0.45) !important;
|
|
|
}
|
|
|
|
|
|
/* Date tables must not inherit the application's data-table zebra/grid rules. */
|
|
|
.el-picker-panel table tbody tr:nth-child(n) > td,
|
|
|
.el-picker-panel table tbody tr:nth-child(n) > th,
|
|
|
.el-time-panel table tbody tr:nth-child(n) > td,
|
|
|
.el-time-panel table tbody tr:nth-child(n) > th {
|
|
|
background: transparent !important;
|
|
|
border: 0 !important;
|
|
|
border-color: transparent !important;
|
|
|
color: #c8d8f2 !important;
|
|
|
font-family: PingFangSC-Regular, "PingFang SC", sans-serif !important;
|
|
|
font-size: 12px !important;
|
|
|
font-weight: 400 !important;
|
|
|
line-height: 20px !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel table,
|
|
|
.el-picker-panel .el-date-table,
|
|
|
.el-picker-panel .el-month-table,
|
|
|
.el-picker-panel .el-year-table,
|
|
|
.el-time-panel table {
|
|
|
border: 0 !important;
|
|
|
border-collapse: collapse !important;
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel .el-date-table td.current:not(.disabled) span,
|
|
|
.el-picker-panel .el-date-table td.start-date span,
|
|
|
.el-picker-panel .el-date-table td.end-date span,
|
|
|
.el-picker-panel .el-date-table td.today span,
|
|
|
.el-picker-panel .el-month-table td.current:not(.disabled) .cell,
|
|
|
.el-picker-panel .el-year-table td.current:not(.disabled) .cell {
|
|
|
background: #00a6bf !important;
|
|
|
color: #00ffff !important;
|
|
|
font-family: PingFangSC-Regular, "PingFang SC", sans-serif !important;
|
|
|
font-size: 12px !important;
|
|
|
font-weight: 400 !important;
|
|
|
line-height: 20px !important;
|
|
|
text-shadow: 0 0 6px rgba(2, 31, 73, 0.47) !important;
|
|
|
}
|
|
|
|
|
|
.el-picker-panel .el-date-table td.in-range div,
|
|
|
.el-picker-panel .el-date-table td.in-range div:hover {
|
|
|
background: rgba(255, 255, 255, 0.06) !important;
|
|
|
}
|
|
|
|
|
|
/* Today is indicated by text only; do not render a filled background. */
|
|
|
.el-picker-panel .el-date-table td.today span,
|
|
|
.el-picker-panel .el-month-table td.today .cell,
|
|
|
.el-picker-panel .el-year-table td.today .cell {
|
|
|
background: transparent !important;
|
|
|
color: #00ffff !important;
|
|
|
font-family: PingFangSC-Regular, "PingFang SC", sans-serif !important;
|
|
|
font-size: 12px !important;
|
|
|
font-weight: 400 !important;
|
|
|
line-height: 20px !important;
|
|
|
text-shadow: 0 0 6px rgba(2, 31, 73, 0.47) !important;
|
|
|
}
|