edit filter time

This commit is contained in:
2026-06-02 22:17:47 +03:30
parent 300575930f
commit 41d1036300
7 changed files with 844 additions and 250 deletions
+145 -16
View File
@@ -56,11 +56,11 @@
--shadow-soft: 0 8px 32px rgba(15, 23, 42, 0.08);
--radius-lg: 1.25rem;
--radius-xl: 1.5rem;
--glass-panel-bg: rgba(255, 255, 255, 0.08);
--glass-panel-border: rgba(255, 255, 255, 0.35);
--glass-panel-inset: rgba(255, 255, 255, 0.45);
--glass-tint: 14%;
--glass-fallback: color-mix(in srgb, var(--primary-color) 72%, rgba(255, 255, 255, 0.9));
--glass-panel-bg: color-mix(in srgb, var(--primary-color) 58%, rgba(255, 255, 255, 0.32));
--glass-panel-border: color-mix(in srgb, var(--primary-color) 38%, rgba(255, 255, 255, 0.55));
--glass-panel-inset: rgba(255, 255, 255, 0.38);
--glass-tint: 44%;
--glass-fallback: color-mix(in srgb, var(--primary-color) 82%, rgba(255, 255, 255, 0.78));
--text-primary: #0f172a;
--text-secondary: #334155;
--text-muted: #64748b;
@@ -86,12 +86,12 @@
--modal-border: rgba(255, 255, 255, 0.6);
--modal-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
--row-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
--glass-btn-bg: rgba(255, 255, 255, 0.18);
--glass-btn-border: rgba(255, 255, 255, 0.28);
--glass-btn-hover: rgba(255, 255, 255, 0.28);
--header-label-bg: rgba(255, 255, 255, 0.16);
--header-label-border: rgba(255, 255, 255, 0.24);
--header-label-hover: rgba(255, 255, 255, 0.28);
--glass-btn-bg: rgba(255, 255, 255, 0.3);
--glass-btn-border: rgba(255, 255, 255, 0.46);
--glass-btn-hover: rgba(255, 255, 255, 0.44);
--header-label-bg: rgba(255, 255, 255, 0.28);
--header-label-border: rgba(255, 255, 255, 0.42);
--header-label-hover: rgba(255, 255, 255, 0.44);
}
[data-theme="dark"] {
@@ -193,6 +193,32 @@
inset 0 1px 0 var(--glass-panel-inset);
}
:root:not([data-theme="dark"]) .glass-header,
:root:not([data-theme="dark"]) .glass-footer-wrap {
box-shadow:
0 8px 28px color-mix(in srgb, var(--primary-color) 28%, rgba(15, 23, 42, 0.14)),
inset 0 1px 0 var(--glass-panel-inset);
}
:root:not([data-theme="dark"]) .glass-footer-wrap {
box-shadow:
0 -8px 28px color-mix(in srgb, var(--primary-color) 28%, rgba(15, 23, 42, 0.14)),
inset 0 1px 0 var(--glass-panel-inset);
}
:root:not([data-theme="dark"]) .glass-header .headerItems,
:root:not([data-theme="dark"]) .glass-footer button {
text-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}
:root:not([data-theme="dark"]) .fab-btn {
box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-color) 58%, transparent);
}
:root:not([data-theme="dark"]) .fab-btn:hover {
box-shadow: 0 14px 32px color-mix(in srgb, var(--primary-color) 68%, transparent);
}
.glass-header::before {
content: '';
position: absolute;
@@ -698,6 +724,66 @@
font-weight: 800;
}
.ui-form-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ui-form-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
width: 100%;
}
.ui-form-field label {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
text-align: right;
}
.ui-form-field textarea.ui-input {
min-height: 5.5rem;
resize: vertical;
}
.ui-form-actions {
display: flex;
justify-content: center;
padding-top: 0.25rem;
}
.ui-input-wrap {
position: relative;
width: 100%;
}
.ui-input-wrap .ui-input {
padding-left: 2.25rem;
}
.ui-input-clear {
position: absolute;
left: 0.5rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.ui-input-clear:hover {
color: #ef4444;
}
.ui-modal-backdrop {
position: fixed;
inset: 0;
@@ -1291,19 +1377,62 @@
[data-theme="dark"] .datepicker-navigator {
background-color: var(--surface-card) !important;
color: var(--text-primary) !important;
border-color: var(--border-input) !important;
}
[data-theme="dark"] .datepicker-day-view .table-days td span,
[data-theme="dark"] .datepicker-month-view .month-item,
[data-theme="dark"] .datepicker-year-view .year-item {
[data-theme="dark"] .datepicker-plot-area .datepicker-navigator .pwt-btn-next,
[data-theme="dark"] .datepicker-plot-area .datepicker-navigator .pwt-btn-switch,
[data-theme="dark"] .datepicker-plot-area .datepicker-navigator .pwt-btn-prev {
background-color: var(--surface-input) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .datepicker-day-view .table-days td.disabled span,
[data-theme="dark"] .datepicker-day-view .table-days td.off span {
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td span,
[data-theme="dark"] .datepicker-plot-area .datepicker-month-view .month-item,
[data-theme="dark"] .datepicker-plot-area .datepicker-year-view .year-item {
background-color: var(--surface-input) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td.disabled span,
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td span.other-month,
[data-theme="dark"] .datepicker-plot-area .datepicker-year-view .year-item-disable,
[data-theme="dark"] .datepicker-plot-area .datepicker-month-view .month-item-disable {
background-color: var(--surface-tabs) !important;
color: var(--text-faint) !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td.today span {
background-color: var(--primary-color) !important;
color: #fff !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td.selected span,
[data-theme="dark"] .datepicker-plot-area .datepicker-month-view .month-item.selected,
[data-theme="dark"] .datepicker-plot-area .datepicker-year-view .year-item.selected {
background-color: #2563eb !important;
color: #fff !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td span:hover,
[data-theme="dark"] .datepicker-plot-area .datepicker-month-view .month-item:hover,
[data-theme="dark"] .datepicker-plot-area .datepicker-year-view .year-item:hover {
background-color: var(--surface-tab-hover) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .datepicker-plot-area .toolbox .pwt-btn-submit,
[data-theme="dark"] .datepicker-plot-area .toolbox .pwt-btn-calendar,
[data-theme="dark"] .datepicker-plot-area .toolbox .pwt-btn-today {
background-color: var(--surface-input) !important;
color: var(--text-primary) !important;
border-color: var(--border-input) !important;
}