I had made it style too a wild ago, so I share :
.calendar{
z-index: 99;
position: relative;
display: none;
border-right: 1px solid #65605e;
border-left: 1px solid #65605e;
border-bottom: 1px solid #65605e;
font-size: 11px;
color: #008aff;
cursor: default;
background: #fafaed;
font-family: Arial, Helvetica,sans-serif;
}
.calendar .button {
text-align: center;
padding: 4px;
border-right: 1px solid #e7e9de;
border-left: 1px solid #e7e9de;
border-bottom: 1px solid #65605e;
border-top: 1px solid #65605e;
}
.calendar .nav{background:transparent}
.calendar thead .title{
font-weight:bold;
padding:4px;
border:0;
text-align:center;
text-transform: uppercase;
color: #65605e;
border-right: 1px solid #e7e9de;
border-left: 1px solid #e7e9de;
border-bottom: 1px solid #65605e;
border-top: 1px solid #65605e;
}
.calendar thead .name {
border:0;
padding:4px;
text-align:center;
background-color:#65605e;
color:#abc63b;
text-transform: uppercase;
border-right: 1px solid #65605e;
border-left: 1px solid #65605e;
border-bottom: 1px solid #fafaed;
border-top: 1px solid #65605e;
}
.calendar thead .weekend{
color:#52a103;
}
.calendar thead .hilite {
border-top:0;
text-decoration: underline;
color: #008aff;
border-right: 1px solid #e7e9de;
border-left: 1px solid #e7e9de;
border-bottom: 1px solid #65605e;
border-top: 1px solid #65605e;
}
.calendar thead .name.hilite {
border-top:0;
text-decoration: underline;
color: #b2f03d;
border-left: 1px solid #65605e;
border-right: 1px solid #65605e;
border-bottom: 1px solid #fafaed;
}
.calendar thead .active{
color: #b2f03d;
}
.calendar tbody .day {
width:2em;
text-align:right;
padding:4px;
font-weight: bold;
color: #65605e;
border: 1px solid #fafaed;
}
.calendar tbody .day.othermonth{
color:#aaa;
}
.calendar tbody .day.othermonth.oweekend {
color:#faa;
}
.calendar table thead .wn{
padding:4px;
color:#fff;
background-color: #65605e;
border-left: 1px solid #65605e;
border-right: 1px solid #65605e;
}
.calendar table .wn{
padding:4px;
background-color:#e7e9de;
border: 1px solid #e7e9de;
}
.calendar tbody .rowhilite td {
background:#e4e0d8;
border-right: 1px solid #e4e0d8;
border-left: 1px solid #e4e0d8;
border-bottom: 1px solid #fafaed;
border-top: 1px solid #fafaed;
}
.calendar tbody .rowhilite td.wn{
background:#d4d0c8;
border: 1px solid #d4d0c8;
}
.calendar tbody td.hilite{
padding:4px;
background-color: #65605e;
color: #fff;
text-decoration: underline;
border: 1px solid #65605e;
}
.calendar tbody td.active {
padding:4px;
border:0;
background-color: #78c0fe;
color: #65605e;
text-decoration: underline;
border: 1px solid #78c0fe;
}
.calendar tbody td.selected{
font-weight:bold;
border:0;
padding:4px;
color: #858c56;
text-decoration: underline;
}
.calendar tbody td.weekend {
color: #83897b;
}
.calendar tbody td.today {
font-weight:bold;
color: #008aff;
}
.calendar tbody .disabled {
color:#999;
}
.calendar tbody .emptycell {
visibility:hidden;
}
.calendar tbody .emptyrow{
display:none;
border-right: 1px solid #fafaed;
}
.calendar tfoot .ttip{
background: url('bouton.png');
padding:4px;
background-color:#8ba130;
text-align:right;
color: #30312c;
border-right: 1px solid #8ba130;
}
.calendar tfoot .hilite{
padding: 4px;
border:0;
}
.calendar tfoot .active{
padding: 4px;
border:0;
}
.calendar
.combo{position:absolute;display:none;width:4em;top:0;left:0;cursor:default;border-top:1px
solid #fff;border-right:1px solid #000;border-bottom:1px solid
#000;border-left:1px solid #fff;background:#ffffe3;padding:1px;z-index:100;}
.calendar .combo .label,.calendar .combo
.label-IEfix{text-align:center;padding:1px;}
.calendar .combo .label-IEfix{width:4em;}
.calendar .combo .active{background:#c4c0b8;padding:0;border-top:1px solid
#000;border-right:1px solid #fff;border-bottom:1px solid
#fff;border-left:1px solid #000;}
.calendar .combo .hilite{background:#048;color:#fea;}
.calendar td.time{border-top:1px solid #000;padding:1px
0;text-align:center;background-color:#f4f0e8;}
.calendar td.time .hour,.calendar td.time .minute,.calendar td.time
.ampm{padding:0 3px 0 4px;border:1px solid
#889;font-weight:bold;background-color:#fff;}
.calendar td.time .ampm{text-align:center;}
.calendar td.time .colon{padding:0 2px 0 3px;font-weight:bold;}
.calendar td.time
span.hilite{border-color:#000;background-color:#766;color:#fff;}
.calendar td.time
span.active{border-color:#f00;background-color:#000;color:#0f0;}
#CP_hourcont{z-index:99;padding:0;position:absolute;border:1px dashed
#666;background-color:#eee;display:none;}
#CP_minutecont{z-index:99;background-color:#ddd;padding:1px;position:absolute;width:45px;display:none;}.floatleft{float:left;}
.CP_hour{z-index:99;padding:1px;font-family:Arial,Helvetica,sans-serif;font-size:9px;white-space:nowrap;cursor:pointer;width:35px;}
.CP_minute{z-index:99;padding:1px;font-family:Arial,Helvetica,sans-serif;font-size:9px;white-space:nowrap;cursor:pointer;width:auto;}
.CP_over{background-color:#fff;z-index:99}
There is some little glitch when you change the mouth or the year with the
date tile, there is little black bars that show up...
Richard
On Wed, Sep 7, 2011 at 7:55 AM, annet <[email protected]> wrote:
>
> > Very nice style annet!
>
> Thanks.
>
> > I think we should make the headers gray and replace calendar.css in
> welcome
> > app
>
> Good idea. I didn't restyle the time-picker part though just the date-
> picker, so that probably needs some attention?
>
>
> Kind regards,
>
> Annet
