国内流行的内容管理系统(CMS)多端全媒体解决方案 https://www.dedebiz.com
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

239 lines
5.5KB

  1. /* The main calendar widget. DIV containing a table. */
  2. div.calendar { position: relative; }
  3. .calendar, .calendar table {
  4. border: 1px solid #CDE4B3;
  5. font-size: 11px;
  6. color: #000;
  7. cursor: default;
  8. background: #F9FCF1;
  9. font-family: tahoma,verdana,sans-serif;
  10. }
  11. .calendar table{border: 1px solid #fff;}
  12. /* Header part -- contains navigation buttons and day names. */
  13. .calendar table thead td{background:#E7F6D5; color:#97C069; border-bottom:1px solid #fff; border-right:none; height:16px; width:18px}
  14. .calendar table thead tr.headrow td{ background:#EDF9E0}
  15. .headrow{border-top:1px solid #CDE4B3}
  16. .calendar table thead td.button div div{
  17. background-image: url(../../images/question-balloon.png);
  18. background-repeat: no-repeat; text-indent:-100px; overflow:hidden
  19. }
  20. .headrow .button { /* "<<", "<", ">", ">>" buttons have this class */
  21. text-align: center; /* They are the navigation buttons */
  22. border-right:1px solid #FFF; padding:0
  23. }
  24. .headrow .button div,.calendar table .wn div{border-right:1px solid #CDE4B3; height:23px; line-height:23px}
  25. .calendar .nav {
  26. }
  27. .calendar thead .title { /* This holds the current "month, year" */
  28. font-weight: bold; /* Pressing it will take you to the current date */
  29. text-align: center;
  30. padding: 2px;
  31. color:#6b9936; width:auto
  32. }
  33. .calendar thead tr { /* Row <TR> containing navigation buttons */
  34. background: #007ED1;
  35. color: #fff;
  36. }
  37. .calendar thead .daynames { /* Row <TR> containing the day names */
  38. background: #EDF9E0;
  39. }
  40. .calendar thead .name { /* Cells <TD> containing the day names */
  41. border-bottom: 1px solid #CDE4B3;
  42. padding: 2px;
  43. text-align: center;
  44. color: #000;
  45. }
  46. .calendar thead .weekend { /* How a weekend day name shows in header */
  47. color: #a66;
  48. }
  49. .calendar thead .hilite { /* How do the buttons in header appear when hover */
  50. background-color: #E7F6D5;
  51. color: #6b9936;
  52. }
  53. /* The body part -- contains all the days in month. */
  54. .calendar tbody .day { /* Cells <TD> containing month days dates */
  55. width: 2em;
  56. color: #456;
  57. text-align: right;
  58. padding: 2px 4px 2px 2px;
  59. }
  60. .calendar tbody .day div{ padding-right:5px}
  61. .calendar tbody .day.othermonth {
  62. font-size: 80%;
  63. color: #bbb;
  64. }
  65. .calendar tbody .day.othermonth.oweekend {
  66. color: #fbb;
  67. }
  68. .calendar table .wn {
  69. border-right: 1px solid #fff;
  70. background: #EDF9E0; padding:0
  71. }
  72. .calendar tbody .rowhilite td {
  73. background: #def;
  74. }
  75. .calendar tbody .rowhilite td.wn {
  76. background: #F9FCF1;
  77. }
  78. .calendar tbody td.hilite { /* Hovered cells <TD> */
  79. background: #93b9e2;
  80. padding: 1px 3px 1px 1px;
  81. color:#fff
  82. }
  83. .calendar tbody td.active { /* Active (pressed) cells <TD> */
  84. background: #cde;
  85. padding: 2px 2px 0px 2px;
  86. }
  87. .calendar tbody td.selected { /* Cell showing today date */
  88. font-weight: bold;
  89. padding: 1px 3px 1px 1px;
  90. background: #ff7200;
  91. color: #fff;
  92. }
  93. .calendar tbody td.weekend { /* Cells showing weekend days */
  94. color: #a66;
  95. }
  96. .calendar tbody td.today { /* Cell showing selected date */
  97. font-weight: bold;
  98. color: #D50000;
  99. }
  100. .calendar tbody .disabled { color: #999; }
  101. .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  102. visibility: hidden;
  103. }
  104. .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  105. display: none;
  106. }
  107. /* The footer part -- status bar and "Close" button */
  108. .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  109. text-align: center;
  110. background: #206A9B;
  111. color: #fff;
  112. }
  113. .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  114. background: #EDF9E0;
  115. color: #6b9936;
  116. border-top: 1px solid #CDE4B3;
  117. padding: 1px; height:24px
  118. }
  119. .calendar tfoot .hilite { /* Hover style for buttons in footer */
  120. background: #B8DAF0;
  121. border: 1px solid #178AEB;
  122. color: #000;
  123. padding: 1px;
  124. }
  125. .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  126. background: #006AA9;
  127. padding: 2px 0px 0px 2px;
  128. }
  129. /* Combo boxes (menus that display months/years for direct selection) */
  130. .calendar .combo {
  131. position: absolute;
  132. display: none;
  133. top: 0px;
  134. left: 0px;
  135. width: 4em;
  136. cursor: default;
  137. border: 1px solid #655;
  138. background: #def;
  139. color: #000;
  140. font-size: 90%;
  141. z-index: 9999999999999999999999999999;
  142. }
  143. .calendar .combo .label,
  144. .calendar .combo .label-IEfix {
  145. text-align: center;
  146. padding: 1px;
  147. }
  148. .calendar .combo .label-IEfix {
  149. width: 4em;
  150. }
  151. .calendar .combo .hilite {
  152. background: #34ABFA;
  153. border-top: 1px solid #46a;
  154. border-bottom: 1px solid #46a;
  155. font-weight: bold;
  156. }
  157. .calendar .combo .active {
  158. border-top: 1px solid #46a;
  159. border-bottom: 1px solid #46a;
  160. background: #F9FCF1;
  161. font-weight: bold;
  162. }
  163. .calendar td.time {
  164. border-top: 1px solid #CDE4B3;
  165. padding: 1px 0px;
  166. text-align: center;
  167. background-color: #EDF2E3;
  168. height:24px
  169. }
  170. .calendar td.time .hour,
  171. .calendar td.time .minute,
  172. .calendar td.time .ampm {
  173. padding: 0px 3px 0px 4px;
  174. border: 1px solid #889;
  175. font-weight: bold;
  176. background-color: #F9FCF1;
  177. }
  178. .calendar td.time .ampm {
  179. text-align: center;
  180. }
  181. .calendar td.time .colon {
  182. padding: 0px 2px 0px 3px;
  183. font-weight: bold;
  184. }
  185. .calendar td.time span.hilite {
  186. border-color: #000;
  187. background-color: #267DB7;
  188. color: #fff;
  189. }
  190. .calendar td.time span.active {
  191. border-color: red;
  192. background-color: #000;
  193. color: #A5FF00;
  194. }
  195. .calendar thead .active div{ /* Active (pressed) buttons in header */
  196. background: #bdd2e8;
  197. }