Files
dashboards/src/components/PersianDateInput.module.css
T

62 lines
1.3 KiB
CSS

.container {
width: 100%;
display: block;
position: relative;
z-index: 5;
}
.calendar,
.calendar :global(.rmdp-wrapper),
.calendar :global(.rmdp-calendar) {
font-family: var(--font-ui);
}
.calendar :global(.rmdp-wrapper) {
z-index: 200 !important;
background: var(--dropdown-bg);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border: 1px solid var(--glass-border);
box-shadow:
0 18px 44px rgba(143, 65, 12, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.input {
width: 100%;
height: var(--field-height);
padding: 0 12px;
border-radius: var(--radius-sm);
border: 1px solid rgba(143, 65, 12, 0.14);
background: rgba(255, 250, 250, 0.88);
color: var(--text-primary);
font-family: inherit;
font-size: 0.92rem;
font-weight: 400;
font-variant-numeric: tabular-nums;
text-align: center;
direction: ltr;
outline: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
transition:
border-color 0.2s,
box-shadow 0.2s;
cursor: pointer;
}
.input::placeholder {
color: var(--text-muted);
}
.input:focus {
border-color: var(--brown);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 0 0 3px rgba(var(--primary-rgb) / 0.12);
}
.input:disabled {
opacity: 0.72;
cursor: not-allowed;
}