calendar.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. .calendar {
  2. border-width: 1px;
  3. border-style: solid;
  4. padding: 1px;
  5. overflow: hidden;
  6. }
  7. .calendar table {
  8. table-layout: fixed;
  9. border-collapse: separate;
  10. font-size: 14px;
  11. width: 100%;
  12. height: 100%;
  13. }
  14. .calendar table td,
  15. .calendar table th {
  16. font-size: 14px;
  17. }
  18. .calendar-noborder {
  19. border: 0;
  20. }
  21. .calendar-header {
  22. position: relative;
  23. height: 36px;
  24. }
  25. .calendar-title {
  26. text-align: center;
  27. height: 36px;
  28. line-height: 36px;
  29. }
  30. .calendar-title span {
  31. position: relative;
  32. display: inline-block;
  33. top: 0px;
  34. padding: 0 3px;
  35. height: 28px;
  36. line-height: 28px;
  37. font-size: 14px;
  38. cursor: pointer;
  39. -moz-border-radius: 5px 5px 5px 5px;
  40. -webkit-border-radius: 5px 5px 5px 5px;
  41. border-radius: 5px 5px 5px 5px;
  42. }
  43. .calendar-prevmonth,
  44. .calendar-nextmonth,
  45. .calendar-prevyear,
  46. .calendar-nextyear {
  47. position: absolute;
  48. top: 50%;
  49. margin-top: -8px;
  50. width: 16px;
  51. height: 16px;
  52. cursor: pointer;
  53. font-size: 1px;
  54. -moz-border-radius: 5px 5px 5px 5px;
  55. -webkit-border-radius: 5px 5px 5px 5px;
  56. border-radius: 5px 5px 5px 5px;
  57. }
  58. .calendar-prevmonth {
  59. left: 30px;
  60. background: url('images/calendar_arrows.png') no-repeat -16px 0;
  61. }
  62. .calendar-nextmonth {
  63. right: 30px;
  64. background: url('images/calendar_arrows.png') no-repeat -32px 0;
  65. }
  66. .calendar-prevyear {
  67. left: 10px;
  68. background: url('images/calendar_arrows.png') no-repeat 0px 0;
  69. }
  70. .calendar-nextyear {
  71. right: 10px;
  72. background: url('images/calendar_arrows.png') no-repeat -48px 0;
  73. }
  74. .calendar-body {
  75. position: relative;
  76. }
  77. .calendar-body th,
  78. .calendar-body td {
  79. text-align: center;
  80. }
  81. .calendar-day {
  82. border: 0;
  83. padding: 1px;
  84. cursor: pointer;
  85. -moz-border-radius: 5px 5px 5px 5px;
  86. -webkit-border-radius: 5px 5px 5px 5px;
  87. border-radius: 5px 5px 5px 5px;
  88. }
  89. .calendar-other-month {
  90. opacity: 0.3;
  91. filter: alpha(opacity=30);
  92. }
  93. .calendar-disabled {
  94. opacity: 0.6;
  95. filter: alpha(opacity=60);
  96. cursor: default;
  97. }
  98. .calendar-menu {
  99. position: absolute;
  100. top: 0;
  101. left: 0;
  102. width: 180px;
  103. height: 150px;
  104. padding: 5px;
  105. font-size: 14px;
  106. display: none;
  107. overflow: hidden;
  108. }
  109. .calendar-menu-year-inner {
  110. text-align: center;
  111. padding-bottom: 5px;
  112. }
  113. .calendar-menu-year {
  114. width: 80px;
  115. line-height: 26px;
  116. text-align: center;
  117. border-width: 1px;
  118. border-style: solid;
  119. outline-style: none;
  120. resize: none;
  121. margin: 0;
  122. padding: 0;
  123. font-weight: bold;
  124. font-size: 14px;
  125. -moz-border-radius: 5px 5px 5px 5px;
  126. -webkit-border-radius: 5px 5px 5px 5px;
  127. border-radius: 5px 5px 5px 5px;
  128. }
  129. .calendar-menu-prev,
  130. .calendar-menu-next {
  131. display: inline-block;
  132. width: 25px;
  133. height: 28px;
  134. vertical-align: top;
  135. cursor: pointer;
  136. -moz-border-radius: 5px 5px 5px 5px;
  137. -webkit-border-radius: 5px 5px 5px 5px;
  138. border-radius: 5px 5px 5px 5px;
  139. }
  140. .calendar-menu-prev {
  141. margin-right: 10px;
  142. background: url('images/calendar_arrows.png') no-repeat 5px center;
  143. }
  144. .calendar-menu-next {
  145. margin-left: 10px;
  146. background: url('images/calendar_arrows.png') no-repeat -44px center;
  147. }
  148. .calendar-menu-month {
  149. text-align: center;
  150. cursor: pointer;
  151. font-weight: bold;
  152. -moz-border-radius: 5px 5px 5px 5px;
  153. -webkit-border-radius: 5px 5px 5px 5px;
  154. border-radius: 5px 5px 5px 5px;
  155. }
  156. .calendar-body th,
  157. .calendar-menu-month {
  158. color: #4d4d4d;
  159. }
  160. .calendar-day {
  161. color: #000000;
  162. }
  163. .calendar-sunday {
  164. color: #CC2222;
  165. }
  166. .calendar-saturday {
  167. color: #00ee00;
  168. }
  169. .calendar-today {
  170. color: #0000ff;
  171. }
  172. .calendar-menu-year {
  173. border-color: #494437;
  174. }
  175. .calendar {
  176. border-color: #494437;
  177. }
  178. .calendar-header {
  179. background: #817865;
  180. }
  181. .calendar-body,
  182. .calendar-menu {
  183. background: #feeebd;
  184. }
  185. .calendar-body th {
  186. background: #efefef;
  187. padding: 4px 0;
  188. }
  189. .calendar-hover,
  190. .calendar-nav-hover,
  191. .calendar-menu-hover {
  192. background-color: #ffdd57;
  193. color: #000000;
  194. }
  195. .calendar-hover {
  196. border: 1px solid #a45b13;
  197. padding: 0;
  198. }
  199. .calendar-selected {
  200. background-color: #ffffff;
  201. color: #0074c7;
  202. border: 1px solid #655e4e;
  203. padding: 0;
  204. }
  205. .calendar-info {
  206. background-color: #817865;
  207. font-size: 28px;
  208. height: 70px;
  209. padding: 10px 20px;
  210. }
  211. .calendar-info .year {
  212. font-size: 16px;
  213. }