react-anpicker/dist/styles.css

a react date picker for supporting persian dates

.anpicker{display:inline-block;--hover: rgb(243, 245, 249);--border: rgb(224, 227, 235);--bg: rgb(255, 255, 255);--disabledBg: rgb(240, 243, 250);--text: rgb(50, 62, 84);--textBtn: rgb(255, 255, 255);--blue: rgb(41, 98, 255);--blueHover: rgb(36, 86, 224);--btnSize: 30px;--fs: 0.75rem;position:relative;color:var(--text);font-size:var(--fs)}.anpicker input{direction:ltr;text-align:left}.dark .anpicker{--text: rgb(209, 212, 220);--hover: rgb(47, 50, 65);--border: rgb(67, 70, 81);--bg: rgb(19, 23, 34);--disabledBg: rgb(42, 46, 57)}.anpicker-popup{--hover: rgb(243, 245, 249);--border: rgb(224, 227, 235);--bg: rgb(255, 255, 255);--disabledBg: rgb(240, 243, 250);--text: rgb(50, 62, 84);--textBtn: rgb(255, 255, 255);--blue: rgb(41, 98, 255);--blueHover: rgb(36, 86, 224);--btnSize: 30px;--fs: 0.75rem;position:relative;color:var(--text);font-size:.75rem;display:flex;position:fixed;visibility:hidden;left:0;top:0;background-color:var(--bg);box-shadow:0px 2px 10px rgba(0,0,0,.2);border-radius:6px;z-index:999;overflow:hidden;left:0;height:fit-content}.anpicker-popup table{border-collapse:collapse;width:100%}.anpicker-popup table td{text-align:center}.anpicker-popup .main{display:flex;flex-direction:column;gap:4px;min-width:234px;padding:0 10px}.anpicker-popup .main .selector-heading{display:flex;justify-content:space-between;height:34px}.anpicker-popup .main .selector-heading svg path{stroke:var(--text)}.anpicker-popup .main .selector-heading .monthes,.anpicker-popup .main .selector-heading .years{display:flex;align-items:center;gap:5px}.anpicker-popup .main .selector-heading .monthes a,.anpicker-popup .main .selector-heading .years a{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;border-radius:6px;width:var(--btnSize);height:var(--btnSize);color:var(--text)}.anpicker-popup .main .selector-heading .monthes a.prev:hover,.anpicker-popup .main .selector-heading .monthes a.next:hover,.anpicker-popup .main .selector-heading .years a.prev:hover,.anpicker-popup .main .selector-heading .years a.next:hover{background-color:var(--hover)}.anpicker-popup .main .days .week{background-color:var(--disabledBg);font-size:var(--fs);border-radius:6px}.anpicker-popup .main .days .week th span{width:34px;height:30px;display:inline-flex;justify-content:center;align-items:center}.anpicker-popup .main .days .day{position:relative}.anpicker-popup .main .days .day button{width:var(--btnSize);height:var(--btnSize);font-family:inherit}.anpicker-popup .main .days .day.current:not(.selected){color:var(--blue)}.anpicker-popup .main .days .day.current:not(.selected) button{color:var(--blue)}.anpicker-popup .main .days .day.current:not(.selected):after{content:"";position:absolute;bottom:0;left:5px;height:2px;background-color:var(--blue);width:calc(100% - 10px)}.anpicker-popup .main .days .day:not(.selected):not(.current):hover button{background-color:var(--hover)}.anpicker-popup .main .years td:not(.selected) button,.anpicker-popup .main .monthes td:not(.selected) button{margin:5px 0;font-family:inherit}.anpicker-popup .main .years td:not(.selected):hover button,.anpicker-popup .main .monthes td:not(.selected):hover button{background-color:var(--hover)}.anpicker-popup .main .selected button{background-color:var(--blue);color:var(--textBtn)}.anpicker-popup .main .btn-td{color:var(--text);background-color:rgba(0,0,0,0);border:none;outline:none;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding:5px;border-radius:6px;min-width:var(--btnSize);height:var(--btnSize);font-family:inherit}.anpicker-popup .main .today-button{background:rgba(0,0,0,0);outline:none;border:none;border-top:solid 1px var(--border);height:34px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;color:var(--text)}.anpicker-popup .main .today-button:hover{color:var(--blueHover)}.anpicker-popup .main .today-button:active{color:var(--blueActive)}.anpicker-popup .sidebar{display:flex;flex-direction:column;justify-content:space-between;background-color:var(--blue);width:150px;padding:10px}.anpicker-popup .sidebar .weekday{background-color:var(--blueHover);color:var(--textBtn);padding:3px 10px;border-radius:6px;text-align:center;line-height:22px}.anpicker-popup .sidebar .month-wrapper,.anpicker-popup .sidebar .year-wrapper{display:flex;flex-direction:column;align-items:center;color:var(--textBtn)}.anpicker-popup .sidebar .month-wrapper .day-of-month{font-weight:700;font-size:36px;line-height:46px}.anpicker-popup .sidebar .month-wrapper .month-name{font-weight:700;font-size:13px;line-height:22px}.anpicker-popup .sidebar .year-wrapper .year{font-weight:700;font-size:13px;line-height:22px}.anpicker-popup .sidebar .year-wrapper .locale{font-size:12px;line-height:21px}@media(max-width: 576px){.anpicker-popup .sidebar{display:none}}.dark .anpicker-popup{--text: rgb(209, 212, 220);--hover: rgb(47, 50, 65);--border: rgb(67, 70, 81);--bg: rgb(19, 23, 34);--disabledBg: rgb(42, 46, 57)}