persian-datepicker.min.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. jdp-overlay {
  2. height: 0;
  3. width: 0;
  4. }
  5. jdp-container {
  6. -moz-animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) jdpOpenAnimation;
  7. -webkit-animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) jdpOpenAnimation;
  8. animation: 0.3s cubic-bezier(0.23, 1, 0.32, 1) jdpOpenAnimation;
  9. background: #fff;
  10. border-radius: 1rem;
  11. box-shadow: 0 2px 8px rgba(0,0,0,.15);
  12. direction: rtl;
  13. display: none;
  14. width: 280px;
  15. overflow: hidden;
  16. padding: 0.5rem 0;
  17. position: absolute;
  18. -ms-touch-action: manipulation;
  19. touch-action: manipulation;
  20. -moz-user-select: none;
  21. -webkit-user-select: none;
  22. -ms-user-select: none;
  23. user-select: none;
  24. transform-origin: bottom;
  25. }
  26. jdp-container,
  27. jdp-container *,
  28. jdp-container :after,
  29. jdp-container :before {
  30. -moz-box-sizing: border-box;
  31. -webkit-box-sizing: border-box;
  32. box-sizing: border-box;
  33. }
  34. jdp-container .jdp-icon-minus,
  35. jdp-container .jdp-icon-plus {
  36. border: 1px solid rgb(232 244 242);
  37. border-radius: 6px;
  38. cursor: pointer;
  39. display: flex;
  40. flex: none;
  41. overflow: hidden;
  42. text-align: center;
  43. text-decoration: none;
  44. vertical-align: middle;
  45. transition: all 0.2s;
  46. width: 24px;
  47. height: 24px;
  48. align-items: center;
  49. justify-content: center;
  50. }
  51. jdp-container .jdp-icon-minus:hover,
  52. jdp-container .jdp-icon-plus:hover {
  53. background-color: rgb(232 244 242);
  54. }
  55. jdp-container .jdp-icon-minus svg,
  56. jdp-container .jdp-icon-plus svg {
  57. height: 1.5rem;
  58. padding: 0.25rem;
  59. vertical-align: middle;
  60. width: 1.5rem;
  61. }
  62. jdp-container .jdp-icon-minus.not-in-range,
  63. jdp-container .jdp-icon-plus.not-in-range {
  64. cursor: not-allowed;
  65. }
  66. jdp-container .jdp-icon-minus.not-in-range svg,
  67. jdp-container .jdp-icon-plus.not-in-range svg {
  68. opacity: 0.3;
  69. }
  70. jdp-container .jdp-months,
  71. jdp-container .jdp-years {
  72. fill: rgba(0, 0, 0, 0.9);
  73. color: rgba(0, 0, 0, 0.9);
  74. display: -webkit-inline-box;
  75. display: -webkit-flex;
  76. display: -ms-inline-flexbox;
  77. display: inline-flex;
  78. font-size: 120%;
  79. margin: 0 2.5%;
  80. }
  81. jdp-container .jdp-months {
  82. width: 40%;
  83. margin-right: 1rem;
  84. }
  85. jdp-container .jdp-years {
  86. width: 40%;
  87. margin: 0.5rem 1.2rem 0.8rem 0;
  88. }
  89. jdp-container .jdp-month,
  90. jdp-container .jdp-month input,
  91. jdp-container .jdp-month select,
  92. jdp-container .jdp-time,
  93. jdp-container .jdp-time input,
  94. jdp-container .jdp-time select,
  95. jdp-container .jdp-year,
  96. jdp-container .jdp-year input,
  97. jdp-container .jdp-year select {
  98. background: #fff;
  99. border: none;
  100. border-radius: 0;
  101. color: inherit;
  102. display: inline-block;
  103. font-family: inherit;
  104. font-size: inherit;
  105. font-weight: 300;
  106. height: auto;
  107. line-height: inherit;
  108. margin: 0;
  109. outline: 0;
  110. padding: 0;
  111. text-align: center;
  112. vertical-align: initial;
  113. width: 100%;
  114. font-feature-settings: "ss01";
  115. }
  116. jdp-container .jdp-month input:active,
  117. jdp-container .jdp-month input:focus,
  118. jdp-container .jdp-month select:active,
  119. jdp-container .jdp-month select:focus,
  120. jdp-container .jdp-month:active,
  121. jdp-container .jdp-month:focus,
  122. jdp-container .jdp-time input:active,
  123. jdp-container .jdp-time input:focus,
  124. jdp-container .jdp-time select:active,
  125. jdp-container .jdp-time select:focus,
  126. jdp-container .jdp-time:active,
  127. jdp-container .jdp-time:focus,
  128. jdp-container .jdp-year input:active,
  129. jdp-container .jdp-year input:focus,
  130. jdp-container .jdp-year select:active,
  131. jdp-container .jdp-year select:focus,
  132. jdp-container .jdp-year:active,
  133. jdp-container .jdp-year:focus {
  134. outline: 0;
  135. }
  136. jdp-container .jdp-month input option,
  137. jdp-container .jdp-month option,
  138. jdp-container .jdp-month select option,
  139. jdp-container .jdp-time input option,
  140. jdp-container .jdp-time option,
  141. jdp-container .jdp-time select option,
  142. jdp-container .jdp-year input option,
  143. jdp-container .jdp-year option,
  144. jdp-container .jdp-year select option {
  145. font-size: 95%;
  146. min-height: 1.3rem;
  147. outline: 0;
  148. padding: 0;
  149. }
  150. jdp-container .jdp-month input,
  151. jdp-container .jdp-time input,
  152. jdp-container .jdp-year input {
  153. -webkit-appearance: none;
  154. -moz-appearance: textfield;
  155. cursor: text;
  156. }
  157. jdp-container .jdp-month input::-webkit-inner-spin-button,
  158. jdp-container .jdp-month input::-webkit-outer-spin-button,
  159. jdp-container .jdp-time input::-webkit-inner-spin-button,
  160. jdp-container .jdp-time input::-webkit-outer-spin-button,
  161. jdp-container .jdp-year input::-webkit-inner-spin-button,
  162. jdp-container .jdp-year input::-webkit-outer-spin-button {
  163. -webkit-appearance: none;
  164. }
  165. jdp-container .jdp-month select,
  166. jdp-container .jdp-time select,
  167. jdp-container .jdp-year select {
  168. -webkit-appearance: none;
  169. -moz-appearance: none;
  170. cursor: pointer;
  171. appearance: none;
  172. position: relative;
  173. }
  174. jdp-container .jdp-days {
  175. -ms-flex-pack: justify;
  176. display: inline-block;
  177. display: -ms-flexbox;
  178. display: flex;
  179. flex-wrap: wrap;
  180. -ms-flex-wrap: wrap;
  181. justify-content: space-around;
  182. outline: 0;
  183. padding: 8px 12px;
  184. text-align: left;
  185. width: 100%;
  186. border-top: 1px solid #e8e8e8;
  187. }
  188. jdp-container .jdp-day,
  189. jdp-container .jdp-day-name {
  190. background: 0 0;
  191. border: 1px solid transparent;
  192. color: rgba(0,0,0,.65);
  193. display: block;
  194. font-weight: 400;
  195. height: 24px;
  196. justify-content: center;
  197. line-height: 22px;
  198. margin: 2px 6px;
  199. position: relative;
  200. text-align: center;
  201. width: 24px;
  202. font-feature-settings: "ss01";
  203. }
  204. jdp-container .jdp-day-name.today,
  205. jdp-container .jdp-day.today {
  206. border-color: #008771;
  207. color: #008771;
  208. font-weight: 700;
  209. }
  210. .dark jdp-container .jdp-day-name.selected,
  211. .dark jdp-container .jdp-day.selected,
  212. jdp-container .jdp-day-name.selected,
  213. jdp-container .jdp-day.selected {
  214. background-color: #008771 !important;
  215. color: #fff !important;
  216. opacity: 1 !important;
  217. }
  218. .dark jdp-container .jdp-day-name.holly-day,
  219. .dark jdp-container .jdp-day-name.last-week,
  220. .dark jdp-container .jdp-day.holly-day,
  221. .dark jdp-container .jdp-day.last-week,
  222. jdp-container .jdp-day-name.holly-day,
  223. jdp-container .jdp-day-name.last-week,
  224. jdp-container .jdp-day.holly-day,
  225. jdp-container .jdp-day.last-week {
  226. color: #f44336;
  227. }
  228. .dark jdp-container .jdp-day.not-in-month,
  229. jdp-container .jdp-day.not-in-month {
  230. opacity: 0.4;
  231. }
  232. jdp-container .jdp-day.disabled-day {
  233. cursor: not-allowed;
  234. opacity: 0.15;
  235. }
  236. jdp-container .jdp-day:not(.disabled-day) {
  237. border-radius: 6px;
  238. cursor: pointer;
  239. transition: 0.1s linear;
  240. }
  241. jdp-container .jdp-day:not(.disabled-day):hover {
  242. background: rgb(232 244 242);
  243. }
  244. jdp-container .jdp-day-name {
  245. background-color: rgb(0 0 0 / 0%);
  246. border-radius: 6px;
  247. cursor: default;
  248. }
  249. jdp-container .jdp-footer {
  250. -ms-flex-pack: justify;
  251. display: inline-block;
  252. display: -ms-flexbox;
  253. display: flex;
  254. flex-wrap: nowrap;
  255. -ms-flex-wrap: nowrap;
  256. justify-content: space-between;
  257. outline: 0;
  258. padding: 6px 12px 0;
  259. width: 100%;
  260. border-top: 1px solid #e8e8e8;
  261. }
  262. jdp-container .jdp-btn-close,
  263. jdp-container .jdp-btn-empty,
  264. jdp-container .jdp-btn-today {
  265. background: #00877000;
  266. border-radius: 5px;
  267. color: #008771;
  268. cursor: pointer;
  269. display: inline-block;
  270. font-size: 90%;
  271. font-weight: 400;
  272. padding: 0.3em 0.6em;
  273. text-align: center;
  274. }
  275. jdp-container .jdp-btn-close.disabled-btn,
  276. jdp-container .jdp-btn-empty.disabled-btn,
  277. jdp-container .jdp-btn-today.disabled-btn {
  278. cursor: not-allowed;
  279. opacity: 0.2;
  280. }
  281. jdp-container .jdp-time-container {
  282. display: flex;
  283. padding: 6px 12px 12px 12px;
  284. }
  285. jdp-container .jdp-time-container .jdp-time {
  286. flex: auto;
  287. margin: 0 0.5rem;
  288. position: relative;
  289. }
  290. jdp-container .jdp-time-container .jdp-time select {
  291. border: 1px solid rgb(232 244 242);
  292. border-radius: 6px;
  293. appearance: none;
  294. transition: all 0.2s;
  295. }
  296. jdp-container .jdp-time-container .jdp-time select:hover {
  297. background-color: rgb(232 244 242);
  298. }
  299. jdp-container .jdp-time-container .jdp-time:after {
  300. content: ":";
  301. font-size: 1.5rem;
  302. height: 100%;
  303. position: absolute;
  304. right: -0.7rem;
  305. transform: translateY(-50%);
  306. }
  307. jdp-container .jdp-time-container .jdp-time:first-child:after {
  308. display: none;
  309. }
  310. jdp-container .jdp-time-container.jdp-only-time .jdp-time select {
  311. font-size: 1.5rem;
  312. padding: 0.8rem 1rem 0.8rem 7px;
  313. }
  314. jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
  315. font-size: 2.3rem;
  316. position: absolute;
  317. right: -0.8rem;
  318. }
  319. @-webkit-keyframes jdpOpenAnimation {
  320. 0% {
  321. transform: scaleY(.8);
  322. transform-origin: 0% 0%;
  323. opacity: 0
  324. }
  325. to {
  326. transform: scaleY(1);
  327. transform-origin: 0% 0%;
  328. opacity: 1
  329. }
  330. }
  331. @keyframes jdpOpenAnimation {
  332. 0% {
  333. transform: scaleY(.8);
  334. transform-origin: 0% 0%;
  335. opacity: 0
  336. }
  337. to {
  338. transform: scaleY(1);
  339. transform-origin: 0% 0%;
  340. opacity: 1
  341. }
  342. }
  343. @-webkit-keyframes jdpOpenAnimationMobile {
  344. 0% {
  345. bottom: -10%;
  346. opacity: 0;
  347. }
  348. to {
  349. bottom: 0;
  350. opacity: 1;
  351. }
  352. }
  353. @keyframes jdpOpenAnimationMobile {
  354. 0% {
  355. margin-bottom: -20%;
  356. opacity: 0;
  357. }
  358. to {
  359. margin-bottom: 0;
  360. opacity: 1;
  361. }
  362. }
  363. .dark jdp-container .jdp-days {
  364. border-color: #313f5a;
  365. }
  366. .dark jdp-overlay {
  367. background-color: #181f2c;
  368. }
  369. .dark jdp-container {
  370. background: #101828;
  371. border-color: #2c3950;
  372. box-shadow: 0 2px 8px rgba(0,0,0,.15);
  373. color: #fff;
  374. }
  375. .dark jdp-container .jdp-icon-minus,
  376. .dark jdp-container .jdp-icon-plus {
  377. border-color: #313f5a;
  378. }
  379. .dark jdp-container .jdp-icon-minus:hover,
  380. .dark jdp-container .jdp-icon-plus:hover {
  381. background-color: #313f5a;
  382. }
  383. .dark jdp-container .jdp-months,
  384. .dark jdp-container .jdp-years {
  385. fill: rgba(255, 255, 255, 0.9);
  386. color: rgba(255, 255, 255, 0.9);
  387. }
  388. .dark jdp-container .jdp-month,
  389. .dark jdp-container .jdp-month input,
  390. .dark jdp-container .jdp-month select,
  391. .dark jdp-container .jdp-time,
  392. .dark jdp-container .jdp-time input,
  393. .dark jdp-container .jdp-time select,
  394. .dark jdp-container .jdp-year,
  395. .dark jdp-container .jdp-year input,
  396. .dark jdp-container .jdp-year select {
  397. background: #101828;
  398. color: rgb(255 255 255 / 65%);
  399. }
  400. .dark jdp-container .jdp-day,
  401. .dark jdp-container .jdp-day-name {
  402. border: 1px solid transparent;
  403. color: rgba(255, 255, 255, 0.65);
  404. }
  405. .dark jdp-container .jdp-day-name.today,
  406. .dark jdp-container .jdp-day.today {
  407. border-color: #008771;
  408. }
  409. .dark jdp-container .jdp-day.disabled-day {
  410. opacity: 0.15;
  411. }
  412. .dark jdp-container .jdp-day:not(.disabled-day):hover {
  413. background-color: #313f5a;
  414. color: #fff;
  415. }
  416. .dark jdp-container .jdp-footer {
  417. border-color: #313f5a;
  418. }
  419. .dark jdp-container .jdp-btn-close,
  420. .dark jdp-container .jdp-btn-empty,
  421. .dark jdp-container .jdp-btn-today {
  422. color: rgb(255 255 255 / 65%);
  423. }
  424. .dark jdp-container .jdp-btn-close:hover,
  425. .dark jdp-container .jdp-btn-empty:hover,
  426. .dark jdp-container .jdp-btn-today:hover {
  427. color: rgb(255, 255, 255);
  428. }
  429. .dark jdp-container .jdp-btn-close.disabled-btn,
  430. .dark jdp-container .jdp-btn-empty.disabled-btn,
  431. .dark jdp-container .jdp-btn-today.disabled-btn {
  432. opacity: 0.2;
  433. }
  434. .dark jdp-container .jdp-time-container .jdp-time select:hover {
  435. background-color: #313f5a;
  436. color: #fff;
  437. }
  438. .dark jdp-container .jdp-time-container .jdp-time select {
  439. border: 1px solid rgb(49 63 90);
  440. }