You are here

Home » API reference » Calendar 5.2

calendar.css in Calendar 5.2

Same filename and directory in other branches
  1. 5 calendar.css
  2. 6.2 calendar.css
  3. 7 calendar.css
  4. 7.2 calendar.css
/* @group calendar */
.calendar-calendar tr.odd, .calendar-calendar tr.even {
  background-color:#fff;
}
.calendar-calendar table {
  border-collapse: collapse;
  border-spacing: 0;
  margin:0 auto;
  padding:0;
  width: 100%; /* Setting at 100% causes problem in Internet Explorer. */
}
.calendar-calendar .month-view table {
  border:none;
  padding:0;
  margin:0;
  width:100%;
}

  /* IE needs a little help to get the side by side tables to the right size */
.calendar-calendar .year-view td {
  width:32%;
  padding:1px;
  border:none;
}

.calendar-calendar .year-view td table td {
  width:13%;
  padding:0;
}

.calendar-calendar tr {
  padding: 0;
  margin: 0;
  background-color: white;
}
.calendar-calendar th {
  color: #fff;
  background-color: #ccc;
  text-align: center;
  margin:0;
}
.calendar-calendar th a {
  font-weight: bold;
  color: #fff;
  background-color: #ccc;
}
.calendar-calendar td {
  width: 13%; /* 14% is about 1/7 of total table width */
  min-width: 13%;
  border: 1px solid #ccc;
  color: #777;
  text-align: right;
  vertical-align: top;
  margin: 0;
  padding:0;
}
/* simplify the mini calendar by removing borders */
.calendar-calendar .mini {
  border:none;
 }

/* format for the week number in the first cell */
.calendar-calendar td.week {
  width:1%;
  min-width:1%;
  }
.calendar-calendar .week {
  clear:both;
  font-style: normal;
  color: #555;
  font-size: 0.8em;
}
.calendar-calendar .week a {
  font-weight:normal;
}

/* IE6 does not support min-height, using Min-Height fast hack from http://www.dustindiaz.com/min-height-fast-hack */
.calendar-calendar .inner {
  min-height:5em;
  height:auto !important;
  height:5em;
  padding:0;
  margin:0;
}
.calendar-calendar .inner div {
  padding:0;
  margin:0;
}
/* Make sure paragraphs buried in calendar cells use padding, not margins, for separation so the background color doesn't come through. */
.calendar-calendar .inner p {
  padding:0 0 .8em 0;
  margin:0;
}
.calendar-calendar td a {
  font-weight: bold;
  text-decoration: none;
}
.calendar-calendar td a:hover {
  text-decoration: underline;
}
.calendar-calendar td.year, 
.calendar-calendar td.month {
  text-align: center;
}

/* format days of the week header cells */
.calendar-calendar th.days {
  color: #ccc;
  background-color: #224;
  text-align: center;
  padding:1px;
  margin:0;
 }

/*  floating day number div  */
.calendar-calendar div.day {
  float: right;
  text-align: center;
  padding: 0.125em 0.25em 0 0.25em;
  margin: 0;
  background-color: #f3f3f3;
  border: 1px solid gray;
  border-width: 0 0 1px 1px;
  clear:both;
  width:1em;
}

/*  individual node container  */
.calendar-calendar div.calendar {
  background-color: #fff;
  border: solid 1px #ddd;
  text-align: left;
  padding:0;
  width: 96%;
  float:right; /* needed to keep IE from hiding the floating day number */
  clear:both;
}
/* No floating of day view content because there is no floating day number */
.calendar-calendar .day-view div.calendar {
  float:none;
  width:98%;
  margin:1% 1% 0 1%;
}

.calendar-calendar div.title {
  font-size:.8em;
  text-align:center;
}

.calendar-calendar div.title a {
  color: #000;
}
.calendar-calendar div.title a:hover {
  color: #c00;
}
.calendar-calendar .content {
  clear:both;
  padding: 3px;
  padding-left: 5px;
}
.calendar div.form-item {
  white-space: normal;
}

table td.mini, 
table th.mini, 
table.mini td.week {
  padding:0 1px 0 0;
  margin:0;
  }
table td.mini a {
  font-weight:normal;
  }
.calendar-calendar .mini-day-off {
  padding:0px;
}
.calendar-calendar .mini-day-on {
  padding:0px;
}
table .mini-day-on a {
  text-decoration:underline;
}
.calendar-calendar .mini .title {
  font-size:.8em;
}
.mini .calendar-calendar .week {
  font-size:.7em;
}
.mini-row {
  width:100%;
  border:none;
}
.mini{
  width:32%;
  vertical-align:top;
  }

/* formatting for the legend stripe and block */
.calendar-calendar .stripe {
  height: 5px;
  width: auto;
  font-size:1px !important;
  line-height:1px !important;
}
.calendar-calendar .day-view .stripe {
  width:100%;
}
table.calendar-legend {
  background-color:#ccc;
  width:100%;
  margin:0;
  padding:0;
}
table.calendar-legend tr.odd .stripe,
table.calendar-legend tr.even .stripe {
  height:12px !important;
  font-size:9px !important;
  line-height:10px !important;
}
.calendar-legend td {
  text-align:left;
}

.calendar-empty {
  font-size:1px;
  line-height:1px;
}

/* the popup date selector for jumping to a new date */
.calendar-date-select {
  text-align:right;
  float:right;
  width:25%;
}
.calendar-date-select div, 
.calendar-date-select input, 
.calendar-date-select label {
  text-align:right;
  padding:0;
  margin:0;
  float:right;
}
.calendar-date-select .description {
  float:none;
}
.calendar-label {
  font-weight:bold;
  display:block;
  clear:both;
}

/* The inner 'node' displayed in the full month view */
.calendar-calendar td .inner div,
.calendar-calendar td .inner div a {
  background-color:#fff;
  color:#000;
}

.calendar-calendar div.date-nav {
  background-color:#ccc;
  color:#777;
  padding:0.2em;
  width:auto;
  border:1px solid #ccc;
}
.calendar-calendar div.date-nav a, 
.calendar-calendar div.date-nav h3 {
  color:#777;
  text-align:center;
}
.calendar-calendar th.days {
  background-color:#eee;
  color:#777;
  font-weight:bold;
  border:1px solid #ccc;
}
.calendar-calendar tr.even td.empty,
.calendar-calendar tr.odd td.empty {
  background:#ccc;
  border-color:#ccc;
}
.calendar-calendar table.mini td.empty {
  background:#fff;
  border-color:#fff;
}
.calendar-calendar td div.day {
  border:1px solid #ccc;
  border-top:none;
  border-right:none;
  margin-bottom:2px;
}
.calendar-calendar td .inner div,
.calendar-calendar td .inner div a {
  background:#eee;
}
/* Set small font size for all items in calendar div, themes can override this. */
/* Use x-small instead of em to avoid multiplying effect in nested items. */
.calendar-calendar div.calendar {
  border:none;
  font-size:x-small;
}
.calendar-calendar td .inner div.calendar div,
.calendar-calendar td .inner div.calendar div a {
  border:none;
  background:#ffc;
  padding:0 2px;
}
.calendar-calendar td .inner div.calendar div.calendar-more,
.calendar-calendar td .inner div.calendar div.calendar-more a {
  background:#fff;
  text-align:right;
}

.calendar-calendar td .inner div a,
.calendar-calendar td span.date-display-single,
.calendar-calendar td span.date-display-start,
.calendar-calendar td span.date-display-end,
.calendar-calendar td span.date-display-separator {
  color:#444;
  font-weight:normal;
}
.calendar-calendar td span.date-display-single,
.calendar-calendar td span.date-display-start,
.calendar-calendar td span.date-display-end,
.calendar-calendar td span.date-display-separator {
  font-weight:bold;
}
.calendar-calendar td .inner div.day a {
  color:#4b85ac;
}
.calendar-calendar tr.odd td.today,
.calendar-calendar tr.even td.today {
  background-color:#C3D6E4;
}
.calendar-calendar td .inner div.calendar div div.view-data-node-data-field-date-field-date-value {
  border-bottom:1px solid #ccc;
}

File

calendar.css
View source 
  1. /* @group calendar */

  2. .calendar-calendar tr.odd, .calendar-calendar tr.even {

  3.   background-color:#fff;

  4. }

  5. .calendar-calendar table {

  6.   border-collapse: collapse;

  7.   border-spacing: 0;

  8.   margin:0 auto;

  9.   padding:0;

  10.   width: 100%; /* Setting at 100% causes problem in Internet Explorer. */

  11. }

  12. .calendar-calendar .month-view table {

  13.   border:none;

  14.   padding:0;

  15.   margin:0;

  16.   width:100%;

  17. }

  18. 

  19.   /* IE needs a little help to get the side by side tables to the right size */

  20. .calendar-calendar .year-view td {

  21.   width:32%;

  22.   padding:1px;

  23.   border:none;

  24. }

  25. 

  26. .calendar-calendar .year-view td table td {

  27.   width:13%;

  28.   padding:0;

  29. }

  30. 

  31. .calendar-calendar tr {

  32.   padding: 0;

  33.   margin: 0;

  34.   background-color: white;

  35. }

  36. .calendar-calendar th {

  37.   color: #fff;

  38.   background-color: #ccc;

  39.   text-align: center;

  40.   margin:0;

  41. }

  42. .calendar-calendar th a {

  43.   font-weight: bold;

  44.   color: #fff;

  45.   background-color: #ccc;

  46. }

  47. .calendar-calendar td {

  48.   width: 13%; /* 14% is about 1/7 of total table width */

  49.   min-width: 13%;

  50.   border: 1px solid #ccc;

  51.   color: #777;

  52.   text-align: right;

  53.   vertical-align: top;

  54.   margin: 0;

  55.   padding:0;

  56. }

  57. /* simplify the mini calendar by removing borders */

  58. .calendar-calendar .mini {

  59.   border:none;

  60.  }

  61. 

  62. /* format for the week number in the first cell */

  63. .calendar-calendar td.week {

  64.   width:1%;

  65.   min-width:1%;

  66.   }

  67. .calendar-calendar .week {

  68.   clear:both;

  69.   font-style: normal;

  70.   color: #555;

  71.   font-size: 0.8em;

  72. }

  73. .calendar-calendar .week a {

  74.   font-weight:normal;

  75. }

  76. 

  77. /* IE6 does not support min-height, using Min-Height fast hack from http://www.dustindiaz.com/min-height-fast-hack */

  78. .calendar-calendar .inner {

  79.   min-height:5em;

  80.   height:auto !important;

  81.   height:5em;

  82.   padding:0;

  83.   margin:0;

  84. }

  85. .calendar-calendar .inner div {

  86.   padding:0;

  87.   margin:0;

  88. }

  89. /* Make sure paragraphs buried in calendar cells use padding, not margins, for separation so the background color doesn't come through. */

  90. .calendar-calendar .inner p {

  91.   padding:0 0 .8em 0;

  92.   margin:0;

  93. }

  94. .calendar-calendar td a {

  95.   font-weight: bold;

  96.   text-decoration: none;

  97. }

  98. .calendar-calendar td a:hover {

  99.   text-decoration: underline;

  100. }

  101. .calendar-calendar td.year, 

  102. .calendar-calendar td.month {

  103.   text-align: center;

  104. }

  105. 

  106. /* format days of the week header cells */

  107. .calendar-calendar th.days {

  108.   color: #ccc;

  109.   background-color: #224;

  110.   text-align: center;

  111.   padding:1px;

  112.   margin:0;

  113.  }

  114. 

  115. /*  floating day number div  */

  116. .calendar-calendar div.day {

  117.   float: right;

  118.   text-align: center;

  119.   padding: 0.125em 0.25em 0 0.25em;

  120.   margin: 0;

  121.   background-color: #f3f3f3;

  122.   border: 1px solid gray;

  123.   border-width: 0 0 1px 1px;

  124.   clear:both;

  125.   width:1em;

  126. }

  127. 

  128. /*  individual node container  */

  129. .calendar-calendar div.calendar {

  130.   background-color: #fff;

  131.   border: solid 1px #ddd;

  132.   text-align: left;

  133.   padding:0;

  134.   width: 96%;

  135.   float:right; /* needed to keep IE from hiding the floating day number */

  136.   clear:both;

  137. }

  138. /* No floating of day view content because there is no floating day number */

  139. .calendar-calendar .day-view div.calendar {

  140.   float:none;

  141.   width:98%;

  142.   margin:1% 1% 0 1%;

  143. }

  144. 

  145. .calendar-calendar div.title {

  146.   font-size:.8em;

  147.   text-align:center;

  148. }

  149. 

  150. .calendar-calendar div.title a {

  151.   color: #000;

  152. }

  153. .calendar-calendar div.title a:hover {

  154.   color: #c00;

  155. }

  156. .calendar-calendar .content {

  157.   clear:both;

  158.   padding: 3px;

  159.   padding-left: 5px;

  160. }

  161. .calendar div.form-item {

  162.   white-space: normal;

  163. }

  164. 

  165. table td.mini, 

  166. table th.mini, 

  167. table.mini td.week {

  168.   padding:0 1px 0 0;

  169.   margin:0;

  170.   }

  171. table td.mini a {

  172.   font-weight:normal;

  173.   }

  174. .calendar-calendar .mini-day-off {

  175.   padding:0px;

  176. }

  177. .calendar-calendar .mini-day-on {

  178.   padding:0px;

  179. }

  180. table .mini-day-on a {

  181.   text-decoration:underline;

  182. }

  183. .calendar-calendar .mini .title {

  184.   font-size:.8em;

  185. }

  186. .mini .calendar-calendar .week {

  187.   font-size:.7em;

  188. }

  189. .mini-row {

  190.   width:100%;

  191.   border:none;

  192. }

  193. .mini{

  194.   width:32%;

  195.   vertical-align:top;

  196.   }

  197. 

  198. /* formatting for the legend stripe and block */

  199. .calendar-calendar .stripe {

  200.   height: 5px;

  201.   width: auto;

  202.   font-size:1px !important;

  203.   line-height:1px !important;

  204. }

  205. .calendar-calendar .day-view .stripe {

  206.   width:100%;

  207. }

  208. table.calendar-legend {

  209.   background-color:#ccc;

  210.   width:100%;

  211.   margin:0;

  212.   padding:0;

  213. }

  214. table.calendar-legend tr.odd .stripe,

  215. table.calendar-legend tr.even .stripe {

  216.   height:12px !important;

  217.   font-size:9px !important;

  218.   line-height:10px !important;

  219. }

  220. .calendar-legend td {

  221.   text-align:left;

  222. }

  223. 

  224. .calendar-empty {

  225.   font-size:1px;

  226.   line-height:1px;

  227. }

  228. 

  229. /* the popup date selector for jumping to a new date */

  230. .calendar-date-select {

  231.   text-align:right;

  232.   float:right;

  233.   width:25%;

  234. }

  235. .calendar-date-select div, 

  236. .calendar-date-select input, 

  237. .calendar-date-select label {

  238.   text-align:right;

  239.   padding:0;

  240.   margin:0;

  241.   float:right;

  242. }

  243. .calendar-date-select .description {

  244.   float:none;

  245. }

  246. .calendar-label {

  247.   font-weight:bold;

  248.   display:block;

  249.   clear:both;

  250. }

  251. 

  252. /* The inner 'node' displayed in the full month view */

  253. .calendar-calendar td .inner div,

  254. .calendar-calendar td .inner div a {

  255.   background-color:#fff;

  256.   color:#000;

  257. }

  258. 

  259. .calendar-calendar div.date-nav {

  260.   background-color:#ccc;

  261.   color:#777;

  262.   padding:0.2em;

  263.   width:auto;

  264.   border:1px solid #ccc;

  265. }

  266. .calendar-calendar div.date-nav a, 

  267. .calendar-calendar div.date-nav h3 {

  268.   color:#777;

  269.   text-align:center;

  270. }

  271. .calendar-calendar th.days {

  272.   background-color:#eee;

  273.   color:#777;

  274.   font-weight:bold;

  275.   border:1px solid #ccc;

  276. }

  277. .calendar-calendar tr.even td.empty,

  278. .calendar-calendar tr.odd td.empty {

  279.   background:#ccc;

  280.   border-color:#ccc;

  281. }

  282. .calendar-calendar table.mini td.empty {

  283.   background:#fff;

  284.   border-color:#fff;

  285. }

  286. .calendar-calendar td div.day {

  287.   border:1px solid #ccc;

  288.   border-top:none;

  289.   border-right:none;

  290.   margin-bottom:2px;

  291. }

  292. .calendar-calendar td .inner div,

  293. .calendar-calendar td .inner div a {

  294.   background:#eee;

  295. }

  296. /* Set small font size for all items in calendar div, themes can override this. */

  297. /* Use x-small instead of em to avoid multiplying effect in nested items. */

  298. .calendar-calendar div.calendar {

  299.   border:none;

  300.   font-size:x-small;

  301. }

  302. .calendar-calendar td .inner div.calendar div,

  303. .calendar-calendar td .inner div.calendar div a {

  304.   border:none;

  305.   background:#ffc;

  306.   padding:0 2px;

  307. }

  308. .calendar-calendar td .inner div.calendar div.calendar-more,

  309. .calendar-calendar td .inner div.calendar div.calendar-more a {

  310.   background:#fff;

  311.   text-align:right;

  312. }

  313. 

  314. .calendar-calendar td .inner div a,

  315. .calendar-calendar td span.date-display-single,

  316. .calendar-calendar td span.date-display-start,

  317. .calendar-calendar td span.date-display-end,

  318. .calendar-calendar td span.date-display-separator {

  319.   color:#444;

  320.   font-weight:normal;

  321. }

  322. .calendar-calendar td span.date-display-single,

  323. .calendar-calendar td span.date-display-start,

  324. .calendar-calendar td span.date-display-end,

  325. .calendar-calendar td span.date-display-separator {

  326.   font-weight:bold;

  327. }

  328. .calendar-calendar td .inner div.day a {

  329.   color:#4b85ac;

  330. }

  331. .calendar-calendar tr.odd td.today,

  332. .calendar-calendar tr.even td.today {

  333.   background-color:#C3D6E4;

  334. }

  335. .calendar-calendar td .inner div.calendar div div.view-data-node-data-field-date-field-date-value {

  336.   border-bottom:1px solid #ccc;

  337. }