metallic.css 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. /*
  2. Zebra_DatePicker: a lightweight jQuery date picker plugin
  3. Metalic Theme
  4. copyright (c) 2011 - 2013 Stefan Gabos
  5. http://stefangabos.ro/jquery/zebra-datepicker/
  6. */
  7. .Zebra_DatePicker *,
  8. .Zebra_DatePicker *:after,
  9. .Zebra_DatePicker *:before { -moz-box-sizing: content-box !important; -webkit-box-sizing: content-box !important; box-sizing: content-box !important }
  10. .Zebra_DatePicker { position: absolute; background: #373737; border: 3px solid #373737; display: none; z-index: 100; font-family: Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; font-size: 13px }
  11. .Zebra_DatePicker * { margin: 0; padding: 0; color: #666; background: transparent; border: none }
  12. /* = GLOBALS
  13. ----------------------------------------------------------------------------------------------------------------------*/
  14. .Zebra_DatePicker table { border-collapse: collapse; border-spacing: 0 }
  15. .Zebra_DatePicker td,
  16. .Zebra_DatePicker th { text-align: center; padding: 5px 0 }
  17. .Zebra_DatePicker td { cursor: pointer }
  18. .Zebra_DatePicker .dp_daypicker,
  19. .Zebra_DatePicker .dp_monthpicker,
  20. .Zebra_DatePicker .dp_yearpicker { margin-top: 3px }
  21. .Zebra_DatePicker .dp_daypicker td,
  22. .Zebra_DatePicker .dp_daypicker th,
  23. .Zebra_DatePicker .dp_monthpicker td,
  24. .Zebra_DatePicker .dp_yearpicker td { width: 30px; border: 1px solid #BBB; background: #DEDEDE url('metallic/default-date.png') repeat-x top; color: #666 }
  25. .Zebra_DatePicker,
  26. .Zebra_DatePicker .dp_header .dp_hover,
  27. .Zebra_DatePicker .dp_footer .dp_hover { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px }
  28. /* = HEADER
  29. ----------------------------------------------------------------------------------------------------------------------*/
  30. .Zebra_DatePicker .dp_header td { color: #E0E0E0 }
  31. .Zebra_DatePicker .dp_header .dp_previous,
  32. .Zebra_DatePicker .dp_header .dp_next { width: 30px }
  33. .Zebra_DatePicker .dp_header .dp_caption { font-weight: bold }
  34. .Zebra_DatePicker .dp_header .dp_hover { background: #67AABB; color: #FFF }
  35. .Zebra_DatePicker .dp_header .dp_blocked { color: #888; cursor: default }
  36. /* = DATEPICKER
  37. ----------------------------------------------------------------------------------------------------------------------*/
  38. .Zebra_DatePicker td.dp_week_number,
  39. .Zebra_DatePicker .dp_daypicker th { background: #F1F1F1; font-size: 9px; padding-top: 7px }
  40. .Zebra_DatePicker td.dp_weekend_disabled,
  41. .Zebra_DatePicker td.dp_not_in_month,
  42. .Zebra_DatePicker td.dp_not_in_month_selectable { background: #ECECEC url('metallic/disabled-date.png'); color: #CCC; cursor: default }
  43. .Zebra_DatePicker td.dp_not_in_month_selectable { cursor: pointer }
  44. .Zebra_DatePicker td.dp_weekend { background: #DEDEDE url('metallic/default-date.png') repeat-x top; color: #666 }
  45. .Zebra_DatePicker td.dp_selected { background: #E26262; color: #E0E0E0 !important }
  46. /* = MONTHPICKER
  47. ----------------------------------------------------------------------------------------------------------------------*/
  48. .Zebra_DatePicker .dp_monthpicker td { width: 33% }
  49. /* = YEARPICKER
  50. ----------------------------------------------------------------------------------------------------------------------*/
  51. .Zebra_DatePicker .dp_yearpicker td { width: 33% }
  52. /* = FOOTER
  53. ----------------------------------------------------------------------------------------------------------------------*/
  54. .Zebra_DatePicker .dp_footer { margin-top: 3px }
  55. .Zebra_DatePicker .dp_footer .dp_hover { background: #67AABB; color: #FFF }
  56. /* = SELECT CURRENT DAY
  57. ----------------------------------------------------------------------------------------------------------------------*/
  58. .Zebra_DatePicker .dp_today { color: #E0E0E0; padding: 3px }
  59. /* = CLEAR DATE
  60. ----------------------------------------------------------------------------------------------------------------------*/
  61. .Zebra_DatePicker .dp_clear { color: #E0E0E0; padding: 3px }
  62. /* = SOME MORE GLOBALS (MUST BE LAST IN ORDER TO OVERWRITE PRESIOUS PROPERTIES)
  63. ----------------------------------------------------------------------------------------------------------------------*/
  64. .Zebra_DatePicker td.dp_current { color: #E26261 }
  65. .Zebra_DatePicker td.dp_disabled_current { color: #E38585 }
  66. .Zebra_DatePicker td.dp_hover { background: #67AABB url('metallic/selected-date.png') repeat-x top; color: #FFF }
  67. .Zebra_DatePicker td.dp_disabled { background: #ECECEC url('metallic/disabled-date.png') repeat-x top; color: #DDD; cursor: default }
  68. /* = ICON
  69. ----------------------------------------------------------------------------------------------------------------------*/
  70. button.Zebra_DatePicker_Icon { display: block; position: absolute; width: 16px; height: 16px; background: url('calendar.png') no-repeat left top; text-indent: -9000px; border: none; cursor: pointer; padding: 0; line-height: 0; vertical-align: top }
  71. button.Zebra_DatePicker_Icon_Disabled { background-image: url('calendar-disabled.png') }
  72. /* don't set vertical margins! */
  73. button.Zebra_DatePicker_Icon { margin: 0 0 0 3px }
  74. button.Zebra_DatePicker_Icon_Inside { margin: 0 3px 0 0 }