bootstrap-datetimepicker-build.css 8.0 KB

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