availability_calendar.base.css in Availability Calendars 7.3
/*
* Styling your calendar:
* - This file contains some basic calendar styling.
* - Visit admin/config/content/availability-calendar/styling to define some more styling.
* - Finally resort to your theme style sheets to define any requested styling.
*
* A calendar is rendered as follows:
* div#cal-{cid}.cal
* div.cal-viewport ? optional when the viewport functionality is enabled
* div.cal-viewport-inner ? optional
* div#cal-{cid}-{year}-{month}.cal-month * repeated for each month
* table
* caption contains month name
* thead
* tr
* th.cal-weekno-header ? optional, if weeknotes are enabled, contains 'Nr.'
* th * repeated 7 times, containing short names of the days
* tbody
* tr[.cal-empty] * repeated 6 times, class cal-empty only if row does not contain day cells (can only be the last or last 2 rows)
* th ? optional, only rendered if week notes are enabled, contains the week note
* td.{state} * repeated 7 times, representing a day in the month, class defines state(s) of that day
* div ? optional only with no split days, contains day number
* span ? optional only with split days
* span contains day number
*
* The key is rendered as follows:
* @todo
*/
.cal-month {
float: left; /* LTR */
margin: 0 6px 6px;
}
/* - Some themes set the width to 100% and browsers will honor that above the
* width of individual columns when using fixed table-layout.
* - IE7 will always honor that, even without fixed table-layout.
* So we use both and assure that each column gets its width in the first row.
*/
.cal table {
table-layout: fixed;
width: auto;
}
.cal table, .cal th, .cal td {
margin: 0;
padding: 0;
}
.cal caption {
margin: 6px 6px 0;
padding: 0;
border-bottom: 1px solid #555;
}
/*
* Settings to get day number and coloring according to state for split days.
* - border-width will be defined in the generated css.
* - border-color will be overruled based on the defined availability states.
*/
.cal td > span {
display: block;
position: relative; /* Allows to position inner span w.r.t this span. */
border-style: solid;
border-color: transparent;
}
.cal td > span > span {
position: absolute;
z-index: 1;
}
/* Allows to highlight a border on hovering (without disturbing the lay-out). */
.cal td > div, .cal td > span > span {
border: 1px solid transparent;
}
/*
* Special statuses:
* cal-other: cells from another month (at the start of end of a calendar month).
* cal-pastdate: cell for days in the past.
* cal-today: cell for the current day.
* cal-selectable: cells that are selectable.
* cal-selected: cell that has been selected.
* cal-empty: cell (with colspan=7) for an empty 6th week.
*/
/* these selectors need to be stronger than those for the availability states. */
.cal th,
.cal .cal-other, .cal .cal-other > div, .cal .cal-other > span,
.cal .cal-pastdate, .cal .cal-pastdate div, .cal .cal-pastdate > span {
background-color: transparent;
border-color: transparent;
}
.cal td > span {
border-color: transparent;
}
.cal-other {
color: #aaa;
}
.cal-today {
font-weight: bolder;
}
.cal-selected {
font-weight: bolder;
font-size: larger;
}
.cal .cal-selected > div, .cal .calselected > span > span {
border-color: #555;
}
.cal-selectable {
cursor: pointer;
}
/* Table cells and spans cannot get :focus, so no need to define that pseudo class. */
.cal-selectable:hover > div, .cal-selectable:hover > span > span {
border-color: #555;
}
/*
* Key
*/
.keystatus {
padding-left: 2px; /* LTR */
}
.cal td.keystatus div {
width: auto;
}
/*
* View calendar through a viewport, also see availability_calendar.view.js.
*/
.cal-viewport {
position: relative;
overflow: hidden;
}
.cal-viewport-inner {
position: relative;
top: 0;
left: 0; /* LTR */
overflow: visible;
}
.cal-backward, .cal-forward {
cursor: pointer;
}
.cal-backward[disabled], .cal-forward[disabled] {
cursor: inherit;
pointer-events: none;
}
File
availability_calendar.base.css
View source
- /*
- * Styling your calendar:
- * - This file contains some basic calendar styling.
- * - Visit admin/config/content/availability-calendar/styling to define some more styling.
- * - Finally resort to your theme style sheets to define any requested styling.
- *
- * A calendar is rendered as follows:
- * div#cal-{cid}.cal
- * div.cal-viewport ? optional when the viewport functionality is enabled
- * div.cal-viewport-inner ? optional
- * div#cal-{cid}-{year}-{month}.cal-month * repeated for each month
- * table
- * caption contains month name
- * thead
- * tr
- * th.cal-weekno-header ? optional, if weeknotes are enabled, contains 'Nr.'
- * th * repeated 7 times, containing short names of the days
- * tbody
- * tr[.cal-empty] * repeated 6 times, class cal-empty only if row does not contain day cells (can only be the last or last 2 rows)
- * th ? optional, only rendered if week notes are enabled, contains the week note
- * td.{state} * repeated 7 times, representing a day in the month, class defines state(s) of that day
- * div ? optional only with no split days, contains day number
- * span ? optional only with split days
- * span contains day number
- *
- * The key is rendered as follows:
- * @todo
- */
- .cal-month {
- float: left; /* LTR */
- margin: 0 6px 6px;
- }
-
- /* - Some themes set the width to 100% and browsers will honor that above the
- * width of individual columns when using fixed table-layout.
- * - IE7 will always honor that, even without fixed table-layout.
- * So we use both and assure that each column gets its width in the first row.
- */
- .cal table {
- table-layout: fixed;
- width: auto;
- }
-
- .cal table, .cal th, .cal td {
- margin: 0;
- padding: 0;
- }
-
- .cal caption {
- margin: 6px 6px 0;
- padding: 0;
- border-bottom: 1px solid #555;
- }
-
- /*
- * Settings to get day number and coloring according to state for split days.
- * - border-width will be defined in the generated css.
- * - border-color will be overruled based on the defined availability states.
- */
- .cal td > span {
- display: block;
- position: relative; /* Allows to position inner span w.r.t this span. */
- border-style: solid;
- border-color: transparent;
- }
-
- .cal td > span > span {
- position: absolute;
- z-index: 1;
- }
-
- /* Allows to highlight a border on hovering (without disturbing the lay-out). */
- .cal td > div, .cal td > span > span {
- border: 1px solid transparent;
- }
-
-
- /*
- * Special statuses:
- * cal-other: cells from another month (at the start of end of a calendar month).
- * cal-pastdate: cell for days in the past.
- * cal-today: cell for the current day.
- * cal-selectable: cells that are selectable.
- * cal-selected: cell that has been selected.
- * cal-empty: cell (with colspan=7) for an empty 6th week.
- */
-
- /* these selectors need to be stronger than those for the availability states. */
- .cal th,
- .cal .cal-other, .cal .cal-other > div, .cal .cal-other > span,
- .cal .cal-pastdate, .cal .cal-pastdate div, .cal .cal-pastdate > span {
- background-color: transparent;
- border-color: transparent;
- }
-
- .cal td > span {
- border-color: transparent;
- }
-
- .cal-other {
- color: #aaa;
- }
-
- .cal-today {
- font-weight: bolder;
- }
-
- .cal-selected {
- font-weight: bolder;
- font-size: larger;
- }
-
- .cal .cal-selected > div, .cal .calselected > span > span {
- border-color: #555;
- }
-
- .cal-selectable {
- cursor: pointer;
- }
-
- /* Table cells and spans cannot get :focus, so no need to define that pseudo class. */
- .cal-selectable:hover > div, .cal-selectable:hover > span > span {
- border-color: #555;
- }
-
- /*
- * Key
- */
- .keystatus {
- padding-left: 2px; /* LTR */
- }
-
- .cal td.keystatus div {
- width: auto;
- }
-
- /*
- * View calendar through a viewport, also see availability_calendar.view.js.
- */
- .cal-viewport {
- position: relative;
- overflow: hidden;
- }
-
- .cal-viewport-inner {
- position: relative;
- top: 0;
- left: 0; /* LTR */
- overflow: visible;
- }
-
- .cal-backward, .cal-forward {
- cursor: pointer;
- }
-
- .cal-backward[disabled], .cal-forward[disabled] {
- cursor: inherit;
- pointer-events: none;
- }