qcg/static/qcg/datetimepicker/bootstrap-datetimepicker.css

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