Optimize Dark Theme & Ultra Dark (#1889)

---------

Co-authored-by: MHSanaei <ho3ein.sanaei@gmail.com>
Co-authored-by: Alireza Ahmadi <alireza7@gmail.com>
This commit is contained in:
Tara Rostami
2024-02-28 14:35:01 +03:30
committed by GitHub
parent 806b57f959
commit 836ee29b78
18 changed files with 322 additions and 215 deletions
+16 -16
View File
@@ -206,15 +206,15 @@ jdp-container .jdp-day-name {
}
jdp-container .jdp-day-name.today,
jdp-container .jdp-day.today {
border-color: #008771;
color: #008771;
border-color: var(--color-primary-100);
color: var(--color-primary-100);
font-weight: 700;
}
.dark jdp-container .jdp-day-name.selected,
.dark jdp-container .jdp-day.selected,
jdp-container .jdp-day-name.selected,
jdp-container .jdp-day.selected {
background-color: #008771 !important;
background-color: var(--color-primary-100) !important;
color: #fff !important;
opacity: 1 !important;
}
@@ -267,7 +267,7 @@ jdp-container .jdp-btn-empty,
jdp-container .jdp-btn-today {
background: #00877000;
border-radius: 5px;
color: #008771;
color: var(--color-primary-100);
cursor: pointer;
display: inline-block;
font-size: 90%;
@@ -369,26 +369,26 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
}
.dark jdp-container .jdp-days {
border-color: #32353b;
border-color: var(--dark-color-surface-400);
}
.dark jdp-overlay {
background-color: #181f2c;
}
.dark jdp-container {
background: #000000;
background: var(--dark-color-background);
border-color: #2c3950;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
color: #fff;
}
.dark jdp-container .jdp-icon-minus,
.dark jdp-container .jdp-icon-plus {
outline-color: #32353b;
outline-color: var(--dark-color-surface-600);
}
.dark jdp-container .jdp-icon-minus:hover,
.dark jdp-container .jdp-icon-plus:hover {
background-color: #32353b;
background-color: var(--dark-color-surface-600);
}
.dark jdp-container .jdp-months,
@@ -405,27 +405,27 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
.dark jdp-container .jdp-year,
.dark jdp-container .jdp-year input,
.dark jdp-container .jdp-year select {
background: #000000;
color: rgba(255, 255, 255, 0.85);
background: var(--dark-color-background);
color: var(--dark-color-text-primary);
}
.dark jdp-container .jdp-day,
.dark jdp-container .jdp-day-name {
border: 1px solid transparent;
color: rgba(255, 255, 255, 0.85);
color: var(--dark-color-text-primary);
}
.dark jdp-container .jdp-day-name.today,
.dark jdp-container .jdp-day.today {
border-color: #008771;
border-color: var(--color-primary-100);
}
.dark jdp-container .jdp-day.disabled-day {
opacity: 0.15;
}
.dark jdp-container .jdp-day:not(.disabled-day):hover {
background-color: #32353b;
background-color: var(--dark-color-surface-600);
color: #fff;
}
.dark jdp-container .jdp-footer {
border-color: #32353b;
border-color: var(--dark-color-surface-400);
}
.dark jdp-container .jdp-btn-close,
.dark jdp-container .jdp-btn-empty,
@@ -446,10 +446,10 @@ jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
}
.dark jdp-container .jdp-time-container .jdp-time select:hover {
background-color: #32353b;
background-color: var(--dark-color-surface-600);
color: #fff;
}
.dark jdp-container .jdp-time-container .jdp-time select {
border: 1px solid #32353b;
border: 1px solid var(--dark-color-surface-600);
}