calendar-tas.css 5.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. /* The main calendar widget. DIV containing a table. */
  2. div.calendar { position: relative; }
  3. .calendar, .calendar table {
  4. border: 1px solid #655;
  5. font-size: 11px;
  6. color: #000;
  7. cursor: default;
  8. background: #ffd;
  9. font-family: tahoma,verdana,sans-serif;
  10. filter:
  11. progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#DDDCCC,EndColorStr=#FFFFFF);
  12. }
  13. /* Header part -- contains navigation buttons and day names. */
  14. .calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  15. text-align: center; /* They are the navigation buttons */
  16. padding: 2px; /* Make the buttons seem like they're pressing */
  17. color:#363636;
  18. }
  19. .calendar .nav {
  20. background: #edc url(menuarrow.gif) no-repeat 100% 100%;
  21. }
  22. .calendar thead .title { /* This holds the current "month, year" */
  23. font-weight: bold; /* Pressing it will take you to the current date */
  24. text-align: center;
  25. background: #654;
  26. color: #363636;
  27. padding: 2px;
  28. filter:
  29. progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#dddccc);
  30. }
  31. .calendar thead .headrow { /* Row <TR> containing navigation buttons */
  32. /*background: #3B86A0;*/
  33. color: #363636;
  34. font-weight: bold;
  35. filter:
  36. progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#3b86a0);
  37. }
  38. .calendar thead .name { /* Cells <TD> containing the day names */
  39. border-bottom: 1px solid #655;
  40. padding: 2px;
  41. text-align: center;
  42. color: #363636;
  43. filter:
  44. progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#DDDCCC,EndColorStr=#FFFFFF);
  45. }
  46. .calendar thead .weekend { /* How a weekend day name shows in header */
  47. color: #f00;
  48. }
  49. .calendar thead .hilite { /* How do the buttons in header appear when hover */
  50. background-color: #ffcc86;
  51. color: #000;
  52. border: 1px solid #b59345;
  53. padding: 1px;
  54. }
  55. .calendar thead .active { /* Active (pressed) buttons in header */
  56. background-color: #c77;
  57. padding: 2px 0px 0px 2px;
  58. }
  59. .calendar thead .daynames { /* Row <TR> containing the day names */
  60. background: #fed;
  61. }
  62. /* The body part -- contains all the days in month. */
  63. .calendar tbody .day { /* Cells <TD> containing month days dates */
  64. width: 2em;
  65. text-align: right;
  66. padding: 2px 4px 2px 2px;
  67. }
  68. .calendar tbody .day.othermonth {
  69. font-size: 80%;
  70. color: #aaa;
  71. }
  72. .calendar tbody .day.othermonth.oweekend {
  73. color: #faa;
  74. }
  75. .calendar table .wn {
  76. padding: 2px 3px 2px 2px;
  77. border-right: 1px solid #000;
  78. background: #fed;
  79. }
  80. .calendar tbody .rowhilite td {
  81. background: #ddf;
  82. }
  83. .calendar tbody .rowhilite td.wn {
  84. background: #efe;
  85. }
  86. .calendar tbody td.hilite { /* Hovered cells <TD> */
  87. background: #ffe;
  88. padding: 1px 3px 1px 1px;
  89. border: 1px solid #bbb;
  90. }
  91. .calendar tbody td.active { /* Active (pressed) cells <TD> */
  92. background: #ddc;
  93. padding: 2px 2px 0px 2px;
  94. }
  95. .calendar tbody td.selected { /* Cell showing today date */
  96. font-weight: bold;
  97. border: 1px solid #000;
  98. padding: 1px 3px 1px 1px;
  99. background: #fea;
  100. }
  101. .calendar tbody td.weekend { /* Cells showing weekend days */
  102. color: #f00;
  103. }
  104. .calendar tbody td.today { font-weight: bold; }
  105. .calendar tbody .disabled { color: #999; }
  106. .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  107. visibility: hidden;
  108. }
  109. .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  110. display: none;
  111. }
  112. /* The footer part -- status bar and "Close" button */
  113. .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  114. text-align: center;
  115. background: #988;
  116. color: #000;
  117. }
  118. .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  119. border-top: 1px solid #655;
  120. background: #dcb;
  121. color: #363636;
  122. font-weight: bold;
  123. filter:
  124. progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFF,EndColorStr=#DDDCCC);
  125. }
  126. .calendar tfoot .hilite { /* Hover style for buttons in footer */
  127. background: #faa;
  128. border: 1px solid #f40;
  129. padding: 1px;
  130. }
  131. .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  132. background: #c77;
  133. padding: 2px 0px 0px 2px;
  134. }
  135. /* Combo boxes (menus that display months/years for direct selection) */
  136. .combo {
  137. position: absolute;
  138. display: none;
  139. top: 0px;
  140. left: 0px;
  141. width: 4em;
  142. cursor: default;
  143. border: 1px solid #655;
  144. background: #ffe;
  145. color: #000;
  146. font-size: smaller;
  147. z-index: 100;
  148. }
  149. .combo .label,
  150. .combo .label-IEfix {
  151. text-align: center;
  152. padding: 1px;
  153. }
  154. .combo .label-IEfix {
  155. width: 4em;
  156. }
  157. .combo .hilite {
  158. background: #fc8;
  159. }
  160. .combo .active {
  161. border-top: 1px solid #a64;
  162. border-bottom: 1px solid #a64;
  163. background: #fee;
  164. font-weight: bold;
  165. }
  166. .calendar td.time {
  167. border-top: 1px solid #a88;
  168. padding: 1px 0px;
  169. text-align: center;
  170. background-color: #fed;
  171. }
  172. .calendar td.time .hour,
  173. .calendar td.time .minute,
  174. .calendar td.time .ampm {
  175. padding: 0px 3px 0px 4px;
  176. border: 1px solid #988;
  177. font-weight: bold;
  178. background-color: #fff;
  179. }
  180. .calendar td.time .ampm {
  181. text-align: center;
  182. }
  183. .calendar td.time .colon {
  184. padding: 0px 2px 0px 3px;
  185. font-weight: bold;
  186. }
  187. .calendar td.time span.hilite {
  188. border-color: #000;
  189. background-color: #866;
  190. color: #fff;
  191. }
  192. .calendar td.time span.active {
  193. border-color: #f00;
  194. background-color: #000;
  195. color: #0f0;
  196. }