persian-datepicker.min.css 11 KB

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