calendar.css
237 lines
| 4.9 KiB
| text/css
|
LassoCssLexer
Jean-Philippe Lang
|
r27 | /* The main calendar widget. DIV containing a table. */ | ||
|
Jean-Philippe Lang
|
r736 | img.calendar-trigger { | ||
| cursor: pointer; | ||||
| vertical-align: middle; | ||||
| margin-left: 4px; | ||||
| } | ||||
|
Jean-Philippe Lang
|
r8726 | div.calendar { position: relative; z-index: 60;} | ||
|
Jean-Philippe Lang
|
r27 | |||
Eric Davis
|
r3836 | div.calendar, div.calendar table { | ||
|
Jean-Philippe Lang
|
r27 | border: 1px solid #556; | ||
| font-size: 11px; | ||||
| color: #000; | ||||
| cursor: default; | ||||
|
Jean-Philippe Lang
|
r29 | background: #fafbfc; | ||
|
Jean-Philippe Lang
|
r27 | font-family: tahoma,verdana,sans-serif; | ||
| } | ||||
| /* Header part -- contains navigation buttons and day names. */ | ||||
|
Eric Davis
|
r3836 | div.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */ | ||
|
Jean-Philippe Lang
|
r27 | text-align: center; /* They are the navigation buttons */ | ||
| padding: 2px; /* Make the buttons seem like they're pressing */ | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar .nav { | ||
|
Jean-Philippe Lang
|
r148 | background: #467aa7; | ||
|
Jean-Philippe Lang
|
r27 | } | ||
|
Eric Davis
|
r3836 | div.calendar thead .title { /* This holds the current "month, year" */ | ||
|
Jean-Philippe Lang
|
r27 | font-weight: bold; /* Pressing it will take you to the current date */ | ||
| text-align: center; | ||||
| background: #fff; | ||||
| color: #000; | ||||
| padding: 2px; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar thead .headrow { /* Row <TR> containing navigation buttons */ | ||
|
Jean-Philippe Lang
|
r29 | background: #467aa7; | ||
|
Jean-Philippe Lang
|
r27 | color: #fff; | ||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar thead .daynames { /* Row <TR> containing the day names */ | ||
|
Jean-Philippe Lang
|
r27 | background: #bdf; | ||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar thead .name { /* Cells <TD> containing the day names */ | ||
|
Jean-Philippe Lang
|
r27 | border-bottom: 1px solid #556; | ||
| padding: 2px; | ||||
| text-align: center; | ||||
| color: #000; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar thead .weekend { /* How a weekend day name shows in header */ | ||
|
Jean-Philippe Lang
|
r27 | color: #a66; | ||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar thead .hilite { /* How do the buttons in header appear when hover */ | ||
|
Jean-Philippe Lang
|
r29 | background-color: #80b0da; | ||
|
Jean-Philippe Lang
|
r27 | color: #000; | ||
| padding: 1px; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar thead .active { /* Active (pressed) buttons in header */ | ||
|
Jean-Philippe Lang
|
r27 | background-color: #77c; | ||
| padding: 2px 0px 0px 2px; | ||||
| } | ||||
| /* The body part -- contains all the days in month. */ | ||||
|
Eric Davis
|
r3836 | div.calendar tbody .day { /* Cells <TD> containing month days dates */ | ||
|
Jean-Philippe Lang
|
r27 | width: 2em; | ||
| color: #456; | ||||
| text-align: right; | ||||
| padding: 2px 4px 2px 2px; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tbody .day.othermonth { | ||
|
Jean-Philippe Lang
|
r27 | font-size: 80%; | ||
| color: #bbb; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tbody .day.othermonth.oweekend { | ||
|
Jean-Philippe Lang
|
r27 | color: #fbb; | ||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar table .wn { | ||
|
Jean-Philippe Lang
|
r27 | padding: 2px 3px 2px 2px; | ||
| border-right: 1px solid #000; | ||||
| background: #bdf; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tbody .rowhilite td { | ||
|
Jean-Philippe Lang
|
r27 | background: #def; | ||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tbody .rowhilite td.wn { | ||
|
Jean-Philippe Lang
|
r29 | background: #80b0da; | ||
|
Jean-Philippe Lang
|
r27 | } | ||
|
Eric Davis
|
r3836 | div.calendar tbody td.hilite { /* Hovered cells <TD> */ | ||
|
Jean-Philippe Lang
|
r29 | background: #80b0da; | ||
|
Jean-Philippe Lang
|
r27 | padding: 1px 3px 1px 1px; | ||
| border: 1px solid #bbb; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tbody td.active { /* Active (pressed) cells <TD> */ | ||
|
Jean-Philippe Lang
|
r27 | background: #cde; | ||
| padding: 2px 2px 0px 2px; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tbody td.selected { /* Cell showing today date */ | ||
|
Jean-Philippe Lang
|
r27 | font-weight: bold; | ||
| border: 1px solid #000; | ||||
| padding: 1px 3px 1px 1px; | ||||
| background: #fff; | ||||
| color: #000; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tbody td.weekend { /* Cells showing weekend days */ | ||
|
Jean-Philippe Lang
|
r27 | color: #a66; | ||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tbody td.today { /* Cell showing selected date */ | ||
|
Jean-Philippe Lang
|
r27 | font-weight: bold; | ||
| color: #f00; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tbody .disabled { color: #999; } | ||
|
Jean-Philippe Lang
|
r27 | |||
|
Eric Davis
|
r3836 | div.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */ | ||
|
Jean-Philippe Lang
|
r27 | visibility: hidden; | ||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */ | ||
|
Jean-Philippe Lang
|
r27 | display: none; | ||
| } | ||||
| /* The footer part -- status bar and "Close" button */ | ||||
|
Eric Davis
|
r3836 | div.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */ | ||
|
Jean-Philippe Lang
|
r27 | text-align: center; | ||
| background: #556; | ||||
| color: #fff; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */ | ||
|
Jean-Philippe Lang
|
r27 | background: #fff; | ||
| color: #445; | ||||
| border-top: 1px solid #556; | ||||
| padding: 1px; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tfoot .hilite { /* Hover style for buttons in footer */ | ||
|
Jean-Philippe Lang
|
r27 | background: #aaf; | ||
| border: 1px solid #04f; | ||||
| color: #000; | ||||
| padding: 1px; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar tfoot .active { /* Active (pressed) style for buttons in footer */ | ||
|
Jean-Philippe Lang
|
r27 | background: #77c; | ||
| padding: 2px 0px 0px 2px; | ||||
| } | ||||
| /* Combo boxes (menus that display months/years for direct selection) */ | ||||
|
Eric Davis
|
r3836 | div.calendar .combo { | ||
|
Jean-Philippe Lang
|
r27 | position: absolute; | ||
| display: none; | ||||
| top: 0px; | ||||
| left: 0px; | ||||
| width: 4em; | ||||
| cursor: default; | ||||
| border: 1px solid #655; | ||||
| background: #def; | ||||
| color: #000; | ||||
| font-size: 90%; | ||||
| z-index: 100; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar .combo .label, | ||
| div.calendar .combo .label-IEfix { | ||||
|
Jean-Philippe Lang
|
r27 | text-align: center; | ||
| padding: 1px; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar .combo .label-IEfix { | ||
|
Jean-Philippe Lang
|
r27 | width: 4em; | ||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar .combo .hilite { | ||
|
Jean-Philippe Lang
|
r27 | background: #acf; | ||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar .combo .active { | ||
|
Jean-Philippe Lang
|
r27 | border-top: 1px solid #46a; | ||
| border-bottom: 1px solid #46a; | ||||
| background: #eef; | ||||
| font-weight: bold; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar td.time { | ||
|
Jean-Philippe Lang
|
r27 | border-top: 1px solid #000; | ||
| padding: 1px 0px; | ||||
| text-align: center; | ||||
| background-color: #f4f0e8; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar td.time .hour, | ||
| div.calendar td.time .minute, | ||||
| div.calendar td.time .ampm { | ||||
|
Jean-Philippe Lang
|
r27 | padding: 0px 3px 0px 4px; | ||
| border: 1px solid #889; | ||||
| font-weight: bold; | ||||
| background-color: #fff; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar td.time .ampm { | ||
|
Jean-Philippe Lang
|
r27 | text-align: center; | ||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar td.time .colon { | ||
|
Jean-Philippe Lang
|
r27 | padding: 0px 2px 0px 3px; | ||
| font-weight: bold; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar td.time span.hilite { | ||
|
Jean-Philippe Lang
|
r27 | border-color: #000; | ||
| background-color: #667; | ||||
| color: #fff; | ||||
| } | ||||
|
Eric Davis
|
r3836 | div.calendar td.time span.active { | ||
|
Jean-Philippe Lang
|
r27 | border-color: #f00; | ||
| background-color: #000; | ||||
| color: #0f0; | ||||
| } | ||||