You are here

bootstrap-datetimepicker.css in Bootstrap DateTime Picker 8

Same filename and directory in other branches
  1. 2.0.x css/bootstrap-datetimepicker.css
/*!
 * Datetimepicker for Bootstrap 3
 * version : 4.15.35
 * https://github.com/Eonasdan/bootstrap-datetimepicker/
 */
.bootstrap-datetimepicker-widget {
  list-style: none;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
  margin: 2px 0;
  padding: 4px;
  width: 19em;
}
@media (min-width: 768px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}
@media (min-width: 992px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}
@media (min-width: 1200px) {
  .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38em;
  }
}
.bootstrap-datetimepicker-widget.dropdown-menu:before,
.bootstrap-datetimepicker-widget.dropdown-menu:after {
  content: '';
  display: inline-block;
  position: absolute;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #cccccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  top: -7px;
  left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  top: -6px;
  left: 8px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #cccccc;
  border-top-color: rgba(0, 0, 0, 0.2);
  bottom: -7px;
  left: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  bottom: -6px;
  left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
  left: auto;
  right: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
  left: auto;
  right: 7px;
}
.bootstrap-datetimepicker-widget .list-unstyled {
  margin: 0;
}
.bootstrap-datetimepicker-widget a[data-action] {
  padding: 6px 0;
}
.bootstrap-datetimepicker-widget a[data-action]:active {
  box-shadow: none;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
  width: 54px;
  font-weight: bold;
  font-size: 1.2em;
  margin: 0;
}
.bootstrap-datetimepicker-widget button[data-action] {
  padding: 6px;
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Increment Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Increment Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Decrement Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Decrement Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Show Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Show Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Toggle AM/PM";
}
.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Clear the picker";
}
.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Set the date to today";
}
.bootstrap-datetimepicker-widget .picker-switch {
  text-align: center;
}
.bootstrap-datetimepicker-widget .picker-switch::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Toggle Date and Time Screens";
}
.bootstrap-datetimepicker-widget .picker-switch td {
  padding: 0;
  margin: 0;
  height: auto;
  width: auto;
  line-height: inherit;
}
.bootstrap-datetimepicker-widget .picker-switch td span {
  line-height: 2.5;
  height: 2.5em;
  width: 100%;
}
.bootstrap-datetimepicker-widget table {
  width: 100%;
  margin: 0;
}
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
  text-align: center;
  border-radius: 4px;
}
.bootstrap-datetimepicker-widget table th {
  height: 20px;
  line-height: 20px;
  width: 20px;
}
.bootstrap-datetimepicker-widget table th.picker-switch {
  width: 145px;
}
.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
  background: none;
  color: #777777;
  cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table th.prev::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Previous Month";
}
.bootstrap-datetimepicker-widget table th.next::after {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  content: "Next Month";
}
.bootstrap-datetimepicker-widget table thead tr:first-child th {
  cursor: pointer;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
  background: #eeeeee;
}
.bootstrap-datetimepicker-widget table td {
  height: 54px;
  line-height: 54px;
  width: 54px;
}
.bootstrap-datetimepicker-widget table td.cw {
  font-size: .8em;
  height: 20px;
  line-height: 20px;
  color: #777777;
}
.bootstrap-datetimepicker-widget table td.day {
  height: 20px;
  line-height: 20px;
  width: 20px;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
  background: #eeeeee;
  cursor: pointer;
}
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
  color: #777777;
}
.bootstrap-datetimepicker-widget table td.today {
  position: relative;
}
.bootstrap-datetimepicker-widget table td.today:before {
  content: '';
  display: inline-block;
  border: solid transparent;
  border-width: 0 0 7px 7px;
  border-bottom-color: #337ab7;
  border-top-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 4px;
  right: 4px;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #337ab7;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bootstrap-datetimepicker-widget table td.active.today:before {
  border-bottom-color: #fff;
}
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
  background: none;
  color: #777777;
  cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table td span {
  display: inline-block;
  width: 54px;
  height: 54px;
  line-height: 54px;
  margin: 2px 1.5px;
  cursor: pointer;
  border-radius: 4px;
}
.bootstrap-datetimepicker-widget table td span:hover {
  background: #eeeeee;
}
.bootstrap-datetimepicker-widget table td span.active {
  background-color: #337ab7;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bootstrap-datetimepicker-widget table td span.old {
  color: #777777;
}
.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
  background: none;
  color: #777777;
  cursor: not-allowed;
}
.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
  height: 27px;
  line-height: 27px;
}
.bootstrap-datetimepicker-widget.wider {
  width: 21em;
}
.bootstrap-datetimepicker-widget .datepicker-decades .decade {
  line-height: 1.8em !important;
}
.input-group.date .input-group-addon {
  cursor: pointer;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

File

css/bootstrap-datetimepicker.css
View source
  1. /*!
  2. * Datetimepicker for Bootstrap 3
  3. * version : 4.15.35
  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: solid transparent;
  303. border-width: 0 0 7px 7px;
  304. border-bottom-color: #337ab7;
  305. border-top-color: rgba(0, 0, 0, 0.2);
  306. position: absolute;
  307. bottom: 4px;
  308. right: 4px;
  309. }
  310. .bootstrap-datetimepicker-widget table td.active,
  311. .bootstrap-datetimepicker-widget table td.active:hover {
  312. background-color: #337ab7;
  313. color: #ffffff;
  314. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  315. }
  316. .bootstrap-datetimepicker-widget table td.active.today:before {
  317. border-bottom-color: #fff;
  318. }
  319. .bootstrap-datetimepicker-widget table td.disabled,
  320. .bootstrap-datetimepicker-widget table td.disabled:hover {
  321. background: none;
  322. color: #777777;
  323. cursor: not-allowed;
  324. }
  325. .bootstrap-datetimepicker-widget table td span {
  326. display: inline-block;
  327. width: 54px;
  328. height: 54px;
  329. line-height: 54px;
  330. margin: 2px 1.5px;
  331. cursor: pointer;
  332. border-radius: 4px;
  333. }
  334. .bootstrap-datetimepicker-widget table td span:hover {
  335. background: #eeeeee;
  336. }
  337. .bootstrap-datetimepicker-widget table td span.active {
  338. background-color: #337ab7;
  339. color: #ffffff;
  340. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  341. }
  342. .bootstrap-datetimepicker-widget table td span.old {
  343. color: #777777;
  344. }
  345. .bootstrap-datetimepicker-widget table td span.disabled,
  346. .bootstrap-datetimepicker-widget table td span.disabled:hover {
  347. background: none;
  348. color: #777777;
  349. cursor: not-allowed;
  350. }
  351. .bootstrap-datetimepicker-widget.usetwentyfour td.hour {
  352. height: 27px;
  353. line-height: 27px;
  354. }
  355. .bootstrap-datetimepicker-widget.wider {
  356. width: 21em;
  357. }
  358. .bootstrap-datetimepicker-widget .datepicker-decades .decade {
  359. line-height: 1.8em !important;
  360. }
  361. .input-group.date .input-group-addon {
  362. cursor: pointer;
  363. }
  364. .sr-only {
  365. position: absolute;
  366. width: 1px;
  367. height: 1px;
  368. margin: -1px;
  369. padding: 0;
  370. overflow: hidden;
  371. clip: rect(0, 0, 0, 0);
  372. border: 0;
  373. }