You are here

Home » API reference » Calendar 5

calendar.css in Calendar 5

Same filename and directory in other branches
  1. 5.2 calendar.css
  2. 6.2 calendar.css
  3. 7 calendar.css
  4. 7.2 calendar.css
/*  calendar calendar table styles  */

.calendar-calendar table {
  border: 1px solid #999;
  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%;
  }
.mini .calendar-calendar .month-view table {
  border:none;
  padding:0;
  margin:1%;
  width:98%;
  }

.calendar-calendar tr {
  padding: 0;
  margin: 0;
  background: white;
}
.calendar-calendar th {
  color: #fff;
  background: #ccc;
  text-align: center;
  padding:3px;
  margin:0;
}
.calendar-calendar td {
  width: 13%; /* 14% is about 1/7 of total table width */
  min-width: 13%;
  border: 1px solid #999;
  color: #777;
  text-align: right;
  vertical-align: top;
  margin: 0;
  padding:0;
}
.calendar-calendar td.week {
  width:1%;
  }

/* 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;
}
.calendar-nav-wrapper {
  width:100%;
  clear:both;
  position:relative;
  }

.calendar-nav-wrapper .nav-title {
  width:48%;
  text-align:center;
}
.calendar-calendar .prev {
  text-align: left;
  width:25%;
  }
.calendar-calendar .next {
  text-align: right;
  width:25%;
  }

.calendar-calendar th a {
  font-weight: bold;
  color: #fff;
}
.calendar-calendar td a {
  color: #222244;
  font-weight: bold;
  text-decoration: none;
}
.calendar-calendar td a:hover {
  text-decoration: underline;
}
.calendar-calendar td.sat, .calendar-calendar td.sun {
  background: #eee;
}
.calendar-calendar td.selected {
  background: #99f;
}
.calendar-calendar td.today {
  background: #f99;
}
.calendar-calendar td.year, .calendar-calendar td.month {
  text-align: center;
  border-width: 1px 0px;
}

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

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

/*  calendar node times for the body */
.calendar-nodeapi div {
  color: #000;
  padding: 0.5em 1em 0 0;
}
.calendar-nodeapi div label { color: #999; }

/*  individual node container  */
.calendar-calendar div.calendar {
  background-color: #fff;
  border: solid 1px #555;
  text-align: left;
  margin: 0.25em 0 0.5em 0.25em;
}
.calendar-calendar div.title {
  font-size:.8em;
  text-align:center;
}
.calendar-calendar .monthview .title {
  clear:both;
  text-align:left;
}
.calendar-calendar .dayview .title {
  clear:both;
  text-align:left;
}
.calendar-calendar div.title a {
  color: #000;
}
.calendar-calendar div.title a:hover {
  color: #c00;
}
.calendar-calendar .content {
  clear:both;
  margin: 5px;
  padding: 3px;
  padding-left: 5px;
}
.calendar-calendar div.type {
  margin-left: 5px;
  font-size: 0.8em;
}
.calendar-calendar div.type a {
  color: #00c;
}
.calendar-calendar div.type a:hover {
  color: #c00;
}
.calendar-calendar div.links {
  padding-left: 3px;
}
.calendar-calendar div.links a {
  color: #00c;
}
.calendar-calendar div.links a:hover {
  color: #c00;
}
.calendar-calendar .start {
  clear:both;
  font-style: normal;
  color: #555;
  margin: 2px 0 2px 0;
  padding-left: 3px;
  font-size: 0.8em;
}
.calendar-calendar .end {
  clear:both;
  font-style: normal;
  color: #555;
  margin: 2px 0 2px 0;
  padding-left: 3px;
  font-size: 0.8em;
}
.calendar-calendar .ongoing {
  clear:both;
  font-style: normal;
  color: #555;
  margin: 2px 0 2px 0;
  padding-left: 9px;
  font-size: 0.8em;
}
.calendar-calendar .week {
  clear:both;
  font-style: normal;
  color: #555;
  margin: 2px 0 2px 0;
  font-size: 0.8em;
}
.calendar-calendar .week a {
  font-weight:normal;
}
.calendar-calendar div.info {
  visibility: hidden;
  height: 0px;
  overflow:hidden;
  padding-left: 3px;
}

/*  individual node view styles  */
.calendar-calendar div.monthview .title {
  font-size: 0.8em;
}
.calendar-calendar div.dayview {
  width: auto;
}
.calendar-calendar div.tableview {
  width: auto;
}
.calendar-calendar div.tableview .links {
}
.container-inline .day input {
  width: auto;
  display: inline;
}

/*  multi-day calendar top stripes  */
.calendar .stripe {
  height: 5px;
  line-height:5px;
  font-size:5px;
  visibility:hidden;
}
.calendar .stripe-1 {
  background-color: #FF6;
  height: 5px;
  width: 100%;
}
.calendar .stripe-2 {
  background-color: #F66;
  height: 5px;
  width: 100%;
}
.calendar .stripe-3 {
  background-color: #668CFF;
  height: 5px;
  width: 100%;
}
.calendar .stripe-4 {
  background-color: #FFB366;
  height: 5px;
  width: 100%;
}
.calendar .stripe-5 {
  background-color: #85FF66;
  height: 5px;
  width: 100%;
}
.calendar .stripe-6 {
  background-color: #A666FF;
  height: 5px;
  width: 100%;
}
.calendar .stripe-7 {
  background-color: #FFE066;
  height: 5px;
  width: 100%;
}
.calendar .stripe-8 {
  background-color: #66FFFF;
  height: 5px;
  width: 100%;
}
.calendar .stripe-9 {
  background-color: #FF66D9;
  height: 5px;
  width: 100%;
}
.calendar .stripe-10 {
  background-color: #DDD;
  height: 5px;
  width: 100%;
}

#block-calendar-1 .item-list ul li a {
  margin-top: 8px;
}

span.calendar-timeleft {
  padding-bottom: 3px;
  text-align: right;
  width: auto;
  display: block;
}
span.calendar-nodetype {
  padding: 0px 0px 0px 5px;
  display: block;
  width: auto;
  text-align: right;
  float: right;
}
.ical-link {
  text-align: right;
}
.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;
  }
.mini-day-off {
  padding:0px;
}
.mini-day-on {
  padding:0px;
  background-color:#ffc
}
table .mini-day-on a {
  text-decoration:underline;
  }
.calendar-calendar .mini .title {
  font-size:.8em;
  }
.mini .calendar-calendar .week {
  font-size:.7em;
  }
div.mini-row {
  width:100%;
  clear:left;
}
div.mini {
  width:33%;
  float:left;
  }
div.mini table {
  margin:1%;
  }
.legend {
  width:100%;
  }
table th.legend {
  background-color:#ccc;
  }
.legend td {
  text-align:left;
  }

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

File

calendar.css
View source 
  1. /*  calendar calendar table styles  */

  2. 

  3. .calendar-calendar table {

  4.   border: 1px solid #999;

  5.   border-collapse: collapse;

  6.   border-spacing: 0;

  7.   margin:0 auto;

  8.   padding:0;

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

  10. }

  11. .calendar-calendar .month-view table {

  12.   border:none;

  13.   padding:0;

  14.   margin:0;

  15.   width:100%;

  16.   }

  17. .mini .calendar-calendar .month-view table {

  18.   border:none;

  19.   padding:0;

  20.   margin:1%;

  21.   width:98%;

  22.   }

  23. 

  24. .calendar-calendar tr {

  25.   padding: 0;

  26.   margin: 0;

  27.   background: white;

  28. }

  29. .calendar-calendar th {

  30.   color: #fff;

  31.   background: #ccc;

  32.   text-align: center;

  33.   padding:3px;

  34.   margin:0;

  35. }

  36. .calendar-calendar td {

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

  38.   min-width: 13%;

  39.   border: 1px solid #999;

  40.   color: #777;

  41.   text-align: right;

  42.   vertical-align: top;

  43.   margin: 0;

  44.   padding:0;

  45. }

  46. .calendar-calendar td.week {

  47.   width:1%;

  48.   }

  49. 

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

  51. .calendar-calendar .inner {

  52.   min-height:5em;

  53.   height:auto !important;

  54.   height:5em;

  55.   padding:0;

  56.   margin:0;

  57. }

  58. .calendar-calendar .inner div {

  59.   padding:0;

  60.   margin:0;

  61. }

  62. .calendar-nav-wrapper {

  63.   width:100%;

  64.   clear:both;

  65.   position:relative;

  66.   }

  67. 

  68. .calendar-nav-wrapper .nav-title {

  69.   width:48%;

  70.   text-align:center;

  71. }

  72. .calendar-calendar .prev {

  73.   text-align: left;

  74.   width:25%;

  75.   }

  76. .calendar-calendar .next {

  77.   text-align: right;

  78.   width:25%;

  79.   }

  80. 

  81. .calendar-calendar th a {

  82.   font-weight: bold;

  83.   color: #fff;

  84. }

  85. .calendar-calendar td a {

  86.   color: #222244;

  87.   font-weight: bold;

  88.   text-decoration: none;

  89. }

  90. .calendar-calendar td a:hover {

  91.   text-decoration: underline;

  92. }

  93. .calendar-calendar td.sat, .calendar-calendar td.sun {

  94.   background: #eee;

  95. }

  96. .calendar-calendar td.selected {

  97.   background: #99f;

  98. }

  99. .calendar-calendar td.today {

  100.   background: #f99;

  101. }

  102. .calendar-calendar td.year, .calendar-calendar td.month {

  103.   text-align: center;

  104.   border-width: 1px 0px;

  105. }

  106. 

  107. /*  days of the week header cells */

  108. .calendar-calendar td.days {

  109.   color: #ccc;

  110.   background: #224;

  111.   text-align: center;

  112.   border: 1px solid #999;

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

  114.   padding:1px;

  115.   margin:0;

  116. }

  117. 

  118. /*  floating day number div  */

  119. .calendar-calendar div.day {

  120.   float: right;

  121.   text-align: center;

  122.   border: 1px solid gray;

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

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

  125.   margin: 0;

  126.   background: #f3f3f3;

  127. }

  128. 

  129. /*  calendar node times for the body */

  130. .calendar-nodeapi div {

  131.   color: #000;

  132.   padding: 0.5em 1em 0 0;

  133. }

  134. .calendar-nodeapi div label { color: #999; }

  135. 

  136. /*  individual node container  */

  137. .calendar-calendar div.calendar {

  138.   background-color: #fff;

  139.   border: solid 1px #555;

  140.   text-align: left;

  141.   margin: 0.25em 0 0.5em 0.25em;

  142. }

  143. .calendar-calendar div.title {

  144.   font-size:.8em;

  145.   text-align:center;

  146. }

  147. .calendar-calendar .monthview .title {

  148.   clear:both;

  149.   text-align:left;

  150. }

  151. .calendar-calendar .dayview .title {

  152.   clear:both;

  153.   text-align:left;

  154. }

  155. .calendar-calendar div.title a {

  156.   color: #000;

  157. }

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

  159.   color: #c00;

  160. }

  161. .calendar-calendar .content {

  162.   clear:both;

  163.   margin: 5px;

  164.   padding: 3px;

  165.   padding-left: 5px;

  166. }

  167. .calendar-calendar div.type {

  168.   margin-left: 5px;

  169.   font-size: 0.8em;

  170. }

  171. .calendar-calendar div.type a {

  172.   color: #00c;

  173. }

  174. .calendar-calendar div.type a:hover {

  175.   color: #c00;

  176. }

  177. .calendar-calendar div.links {

  178.   padding-left: 3px;

  179. }

  180. .calendar-calendar div.links a {

  181.   color: #00c;

  182. }

  183. .calendar-calendar div.links a:hover {

  184.   color: #c00;

  185. }

  186. .calendar-calendar .start {

  187.   clear:both;

  188.   font-style: normal;

  189.   color: #555;

  190.   margin: 2px 0 2px 0;

  191.   padding-left: 3px;

  192.   font-size: 0.8em;

  193. }

  194. .calendar-calendar .end {

  195.   clear:both;

  196.   font-style: normal;

  197.   color: #555;

  198.   margin: 2px 0 2px 0;

  199.   padding-left: 3px;

  200.   font-size: 0.8em;

  201. }

  202. .calendar-calendar .ongoing {

  203.   clear:both;

  204.   font-style: normal;

  205.   color: #555;

  206.   margin: 2px 0 2px 0;

  207.   padding-left: 9px;

  208.   font-size: 0.8em;

  209. }

  210. .calendar-calendar .week {

  211.   clear:both;

  212.   font-style: normal;

  213.   color: #555;

  214.   margin: 2px 0 2px 0;

  215.   font-size: 0.8em;

  216. }

  217. .calendar-calendar .week a {

  218.   font-weight:normal;

  219. }

  220. .calendar-calendar div.info {

  221.   visibility: hidden;

  222.   height: 0px;

  223.   overflow:hidden;

  224.   padding-left: 3px;

  225. }

  226. 

  227. /*  individual node view styles  */

  228. .calendar-calendar div.monthview .title {

  229.   font-size: 0.8em;

  230. }

  231. .calendar-calendar div.dayview {

  232.   width: auto;

  233. }

  234. .calendar-calendar div.tableview {

  235.   width: auto;

  236. }

  237. .calendar-calendar div.tableview .links {

  238. }

  239. .container-inline .day input {

  240.   width: auto;

  241.   display: inline;

  242. }

  243. 

  244. /*  multi-day calendar top stripes  */

  245. .calendar .stripe {

  246.   height: 5px;

  247.   line-height:5px;

  248.   font-size:5px;

  249.   visibility:hidden;

  250. }

  251. .calendar .stripe-1 {

  252.   background-color: #FF6;

  253.   height: 5px;

  254.   width: 100%;

  255. }

  256. .calendar .stripe-2 {

  257.   background-color: #F66;

  258.   height: 5px;

  259.   width: 100%;

  260. }

  261. .calendar .stripe-3 {

  262.   background-color: #668CFF;

  263.   height: 5px;

  264.   width: 100%;

  265. }

  266. .calendar .stripe-4 {

  267.   background-color: #FFB366;

  268.   height: 5px;

  269.   width: 100%;

  270. }

  271. .calendar .stripe-5 {

  272.   background-color: #85FF66;

  273.   height: 5px;

  274.   width: 100%;

  275. }

  276. .calendar .stripe-6 {

  277.   background-color: #A666FF;

  278.   height: 5px;

  279.   width: 100%;

  280. }

  281. .calendar .stripe-7 {

  282.   background-color: #FFE066;

  283.   height: 5px;

  284.   width: 100%;

  285. }

  286. .calendar .stripe-8 {

  287.   background-color: #66FFFF;

  288.   height: 5px;

  289.   width: 100%;

  290. }

  291. .calendar .stripe-9 {

  292.   background-color: #FF66D9;

  293.   height: 5px;

  294.   width: 100%;

  295. }

  296. .calendar .stripe-10 {

  297.   background-color: #DDD;

  298.   height: 5px;

  299.   width: 100%;

  300. }

  301. 

  302. #block-calendar-1 .item-list ul li a {

  303.   margin-top: 8px;

  304. }

  305. 

  306. span.calendar-timeleft {

  307.   padding-bottom: 3px;

  308.   text-align: right;

  309.   width: auto;

  310.   display: block;

  311. }

  312. span.calendar-nodetype {

  313.   padding: 0px 0px 0px 5px;

  314.   display: block;

  315.   width: auto;

  316.   text-align: right;

  317.   float: right;

  318. }

  319. .ical-link {

  320.   text-align: right;

  321. }

  322. .calendar div.form-item {

  323.   white-space: normal;

  324. }

  325. 

  326. table td.mini, table th.mini, table.mini td.week {

  327.   padding:0 1px 0 0;

  328.   margin:0;

  329.   }

  330. table td.mini a {

  331.   font-weight:normal;

  332.   }

  333. .mini-day-off {

  334.   padding:0px;

  335. }

  336. .mini-day-on {

  337.   padding:0px;

  338.   background-color:#ffc

  339. }

  340. table .mini-day-on a {

  341.   text-decoration:underline;

  342.   }

  343. .calendar-calendar .mini .title {

  344.   font-size:.8em;

  345.   }

  346. .mini .calendar-calendar .week {

  347.   font-size:.7em;

  348.   }

  349. div.mini-row {

  350.   width:100%;

  351.   clear:left;

  352. }

  353. div.mini {

  354.   width:33%;

  355.   float:left;

  356.   }

  357. div.mini table {

  358.   margin:1%;

  359.   }

  360. .legend {

  361.   width:100%;

  362.   }

  363. table th.legend {

  364.   background-color:#ccc;

  365.   }

  366. .legend td {

  367.   text-align:left;

  368.   }

  369. 

  370. .calendar-empty {

  371.   font-size:1px;

  372.   line-height:1px;

  373.   }