You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

366 lines
9.0 KiB

  1. /*!
  2. * Datetimepicker for Bootstrap 3
  3. * ! version : 4.7.14
  4. * https://github.com/Eonasdan/bootstrap-datetimepicker/
  5. */
  6. .bootstrap-datetimepicker-widget {
  7. list-style: none;
  8. }
  9. .bootstrap-datetimepicker-widget.dropdown-menu {
  10. margin: 2px 0;
  11. padding: 4px;
  12. width: 19em;
  13. }
  14. @media (min-width: 768px) {
  15. .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
  16. width: 38em;
  17. }
  18. }
  19. @media (min-width: 992px) {
  20. .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
  21. width: 38em;
  22. }
  23. }
  24. @media (min-width: 1200px) {
  25. .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
  26. width: 38em;
  27. }
  28. }
  29. .bootstrap-datetimepicker-widget.dropdown-menu:before,
  30. .bootstrap-datetimepicker-widget.dropdown-menu:after {
  31. content: '';
  32. display: inline-block;
  33. position: absolute;
  34. }
  35. .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
  36. border-left: 7px solid transparent;
  37. border-right: 7px solid transparent;
  38. border-bottom: 7px solid #cccccc;
  39. border-bottom-color: rgba(0, 0, 0, 0.2);
  40. top: -7px;
  41. left: 7px;
  42. }
  43. .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
  44. border-left: 6px solid transparent;
  45. border-right: 6px solid transparent;
  46. border-bottom: 6px solid white;
  47. top: -6px;
  48. left: 8px;
  49. }
  50. .bootstrap-datetimepicker-widget.dropdown-menu.top:before {
  51. border-left: 7px solid transparent;
  52. border-right: 7px solid transparent;
  53. border-top: 7px solid #cccccc;
  54. border-top-color: rgba(0, 0, 0, 0.2);
  55. bottom: -7px;
  56. left: 6px;
  57. }
  58. .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
  59. border-left: 6px solid transparent;
  60. border-right: 6px solid transparent;
  61. border-top: 6px solid white;
  62. bottom: -6px;
  63. left: 7px;
  64. }
  65. .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
  66. left: auto;
  67. right: 6px;
  68. }
  69. .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
  70. left: auto;
  71. right: 7px;
  72. }
  73. .bootstrap-datetimepicker-widget .list-unstyled {
  74. margin: 0;
  75. }
  76. .bootstrap-datetimepicker-widget a[data-action] {
  77. padding: 6px 0;
  78. }
  79. .bootstrap-datetimepicker-widget a[data-action]:active {
  80. box-shadow: none;
  81. }
  82. .bootstrap-datetimepicker-widget .timepicker-hour,
  83. .bootstrap-datetimepicker-widget .timepicker-minute,
  84. .bootstrap-datetimepicker-widget .timepicker-second {
  85. width: 54px;
  86. font-weight: bold;
  87. font-size: 1.2em;
  88. margin: 0;
  89. }
  90. .bootstrap-datetimepicker-widget button[data-action] {
  91. padding: 6px;
  92. }
  93. .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
  94. position: absolute;
  95. width: 1px;
  96. height: 1px;
  97. margin: -1px;
  98. padding: 0;
  99. overflow: hidden;
  100. clip: rect(0, 0, 0, 0);
  101. border: 0;
  102. content: "Increment Hours";
  103. }
  104. .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
  105. position: absolute;
  106. width: 1px;
  107. height: 1px;
  108. margin: -1px;
  109. padding: 0;
  110. overflow: hidden;
  111. clip: rect(0, 0, 0, 0);
  112. border: 0;
  113. content: "Increment Minutes";
  114. }
  115. .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
  116. position: absolute;
  117. width: 1px;
  118. height: 1px;
  119. margin: -1px;
  120. padding: 0;
  121. overflow: hidden;
  122. clip: rect(0, 0, 0, 0);
  123. border: 0;
  124. content: "Decrement Hours";
  125. }
  126. .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
  127. position: absolute;
  128. width: 1px;
  129. height: 1px;
  130. margin: -1px;
  131. padding: 0;
  132. overflow: hidden;
  133. clip: rect(0, 0, 0, 0);
  134. border: 0;
  135. content: "Decrement Minutes";
  136. }
  137. .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
  138. position: absolute;
  139. width: 1px;
  140. height: 1px;
  141. margin: -1px;
  142. padding: 0;
  143. overflow: hidden;
  144. clip: rect(0, 0, 0, 0);
  145. border: 0;
  146. content: "Show Hours";
  147. }
  148. .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
  149. position: absolute;
  150. width: 1px;
  151. height: 1px;
  152. margin: -1px;
  153. padding: 0;
  154. overflow: hidden;
  155. clip: rect(0, 0, 0, 0);
  156. border: 0;
  157. content: "Show Minutes";
  158. }
  159. .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
  160. position: absolute;
  161. width: 1px;
  162. height: 1px;
  163. margin: -1px;
  164. padding: 0;
  165. overflow: hidden;
  166. clip: rect(0, 0, 0, 0);
  167. border: 0;
  168. content: "Toggle AM/PM";
  169. }
  170. .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
  171. position: absolute;
  172. width: 1px;
  173. height: 1px;
  174. margin: -1px;
  175. padding: 0;
  176. overflow: hidden;
  177. clip: rect(0, 0, 0, 0);
  178. border: 0;
  179. content: "Clear the picker";
  180. }
  181. .bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
  182. position: absolute;
  183. width: 1px;
  184. height: 1px;
  185. margin: -1px;
  186. padding: 0;
  187. overflow: hidden;
  188. clip: rect(0, 0, 0, 0);
  189. border: 0;
  190. content: "Set the date to today";
  191. }
  192. .bootstrap-datetimepicker-widget .picker-switch {
  193. text-align: center;
  194. }
  195. .bootstrap-datetimepicker-widget .picker-switch::after {
  196. position: absolute;
  197. width: 1px;
  198. height: 1px;
  199. margin: -1px;
  200. padding: 0;
  201. overflow: hidden;
  202. clip: rect(0, 0, 0, 0);
  203. border: 0;
  204. content: "Toggle Date and Time Screens";
  205. }
  206. .bootstrap-datetimepicker-widget .picker-switch td {
  207. padding: 0;
  208. margin: 0;
  209. height: auto;
  210. width: auto;
  211. line-height: inherit;
  212. }
  213. .bootstrap-datetimepicker-widget .picker-switch td span {
  214. line-height: 2.5;
  215. height: 2.5em;
  216. width: 100%;
  217. }
  218. .bootstrap-datetimepicker-widget table {
  219. width: 100%;
  220. margin: 0;
  221. }
  222. .bootstrap-datetimepicker-widget table td,
  223. .bootstrap-datetimepicker-widget table th {
  224. text-align: center;
  225. border-radius: 4px;
  226. }
  227. .bootstrap-datetimepicker-widget table th {
  228. height: 20px;
  229. line-height: 20px;
  230. width: 20px;
  231. }
  232. .bootstrap-datetimepicker-widget table th.picker-switch {
  233. width: 145px;
  234. }
  235. .bootstrap-datetimepicker-widget table th.disabled,
  236. .bootstrap-datetimepicker-widget table th.disabled:hover {
  237. background: none;
  238. color: #777777;
  239. cursor: not-allowed;
  240. }
  241. .bootstrap-datetimepicker-widget table th.prev::after {
  242. position: absolute;
  243. width: 1px;
  244. height: 1px;
  245. margin: -1px;
  246. padding: 0;
  247. overflow: hidden;
  248. clip: rect(0, 0, 0, 0);
  249. border: 0;
  250. content: "Previous Month";
  251. }
  252. .bootstrap-datetimepicker-widget table th.next::after {
  253. position: absolute;
  254. width: 1px;
  255. height: 1px;
  256. margin: -1px;
  257. padding: 0;
  258. overflow: hidden;
  259. clip: rect(0, 0, 0, 0);
  260. border: 0;
  261. content: "Next Month";
  262. }
  263. .bootstrap-datetimepicker-widget table thead tr:first-child th {
  264. cursor: pointer;
  265. }
  266. .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
  267. background: #eeeeee;
  268. }
  269. .bootstrap-datetimepicker-widget table td {
  270. height: 54px;
  271. line-height: 54px;
  272. width: 54px;
  273. }
  274. .bootstrap-datetimepicker-widget table td.cw {
  275. font-size: .8em;
  276. height: 20px;
  277. line-height: 20px;
  278. color: #777777;
  279. }
  280. .bootstrap-datetimepicker-widget table td.day {
  281. height: 20px;
  282. line-height: 20px;
  283. width: 20px;
  284. }
  285. .bootstrap-datetimepicker-widget table td.day:hover,
  286. .bootstrap-datetimepicker-widget table td.hour:hover,
  287. .bootstrap-datetimepicker-widget table td.minute:hover,
  288. .bootstrap-datetimepicker-widget table td.second:hover {
  289. background: #eeeeee;
  290. cursor: pointer;
  291. }
  292. .bootstrap-datetimepicker-widget table td.old,
  293. .bootstrap-datetimepicker-widget table td.new {
  294. color: #777777;
  295. }
  296. .bootstrap-datetimepicker-widget table td.today {
  297. position: relative;
  298. }
  299. .bootstrap-datetimepicker-widget table td.today:before {
  300. content: '';
  301. display: inline-block;
  302. border: 0 0 7px 7px solid transparent;
  303. border-bottom-color: #337ab7;
  304. border-top-color: rgba(0, 0, 0, 0.2);
  305. position: absolute;
  306. bottom: 4px;
  307. right: 4px;
  308. }
  309. .bootstrap-datetimepicker-widget table td.active,
  310. .bootstrap-datetimepicker-widget table td.active:hover {
  311. background-color: #337ab7;
  312. color: #ffffff;
  313. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  314. }
  315. .bootstrap-datetimepicker-widget table td.active.today:before {
  316. border-bottom-color: #fff;
  317. }
  318. .bootstrap-datetimepicker-widget table td.disabled,
  319. .bootstrap-datetimepicker-widget table td.disabled:hover {
  320. background: none;
  321. color: #777777;
  322. cursor: not-allowed;
  323. }
  324. .bootstrap-datetimepicker-widget table td span {
  325. display: inline-block;
  326. width: 54px;
  327. height: 54px;
  328. line-height: 54px;
  329. margin: 2px 1.5px;
  330. cursor: pointer;
  331. border-radius: 4px;
  332. }
  333. .bootstrap-datetimepicker-widget table td span:hover {
  334. background: #eeeeee;
  335. }
  336. .bootstrap-datetimepicker-widget table td span.active {
  337. background-color: #337ab7;
  338. color: #ffffff;
  339. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  340. }
  341. .bootstrap-datetimepicker-widget table td span.old {
  342. color: #777777;
  343. }
  344. .bootstrap-datetimepicker-widget table td span.disabled,
  345. .bootstrap-datetimepicker-widget table td span.disabled:hover {
  346. background: none;
  347. color: #777777;
  348. cursor: not-allowed;
  349. }
  350. .bootstrap-datetimepicker-widget.usetwentyfour td.hour {
  351. height: 27px;
  352. line-height: 27px;
  353. }
  354. .input-group.date .input-group-addon {
  355. cursor: pointer;
  356. }
  357. .sr-only {
  358. position: absolute;
  359. width: 1px;
  360. height: 1px;
  361. margin: -1px;
  362. padding: 0;
  363. overflow: hidden;
  364. clip: rect(0, 0, 0, 0);
  365. border: 0;
  366. }