I just make it better and grayed it :
.calendar{
z-index: 99;
position: relative;
display: none;
border-right: 1px solid #808080;
border-left: 1px solid #808080;
border-bottom: 1px solid #808080;
font-size: 11px;
color: #9A9A9A;
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 #808080;
border-top: 1px solid #808080;
}
.calendar .nav{background:transparent}
.calendar thead .title{
font-weight:bold;
/*padding:4px;*/
border:0;
text-align:center;
text-transform: uppercase;
color: #808080;
border-right: 1px solid #e7e9de;
border-left: 1px solid #e7e9de;
border-bottom: 1px solid #808080;
border-top: 1px solid #808080;
}
.calendar thead .name {
border:0;
/*padding:4px;*/
text-align:center;
background-color:#656565;
color:#A6A6A6;
text-transform: uppercase;
border-right: 1px solid #656565;
border-left: 1px solid #656565;
border-bottom: 1px solid #fafaed;
border-top: 1px solid #656565;
}
.calendar thead .weekend{
color:#8E8E8E;
}
.calendar thead .hilite {
border-top:0;
/*text-decoration: underline;*/
color: #9A9A9A;
/*border-right: 1px solid #e7e9de;
border-left: 1px solid #e7e9de;*/
border-bottom: 1px solid #808080;
border-top: 1px solid #808080;
}
.calendar thead .name.hilite {
border-top:0;
/*text-decoration: underline;*/
color: #D8D8D8;
/*border-left: 1px solid #808080;
border-right: 1px solid #808080;*/
/*border-bottom: 1px solid #fafaed;*/
}
.calendar thead .active{
color: #D8D8D8;
}
.calendar tbody .day {
width:2em;
text-align:right;
/*padding:4px;*/
font-weight: bold;
color: #808080;
/*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: #656565;
/*border-left: 1px solid #656565;
border-right: 1px solid #656565;*/
}
.calendar table .wn{
/*padding:4px;*/
background-color:#e7e9de;
/*border-bottom: 1px solid #e7e9de;*/
}
.calendar tbody .rowhilite td {
background:#e4e0d8;
/*border-right: 1px solid #e4e0d8;
border-left: 1px solid #e4e0d8;*/
/*border-bottom: 1px solid #e4e0d8;
border-top: 1px solid #e4e0d8;*/
}
.calendar tbody .rowhilite td.wn{
background:#d4d0c8;
/*border: 1px solid #d4d0c8;*/
}
.calendar tbody td.weekend {
color: #83897b;
}
.calendar tbody td.hilite{
/*padding:4px;*/
background-color: #808080;
color: #fff;
/*text-decoration: underline;*/
/*border: 1px solid #808080;*/
}
.calendar tbody td.active {
/*padding:4px;*/
border:0;
background-color: #C2C2C2;
color: #808080;
/*text-decoration: underline;
border: 1px solid #C2C2C2;*/
}
.calendar tbody td.selected{
font-weight:bold;
border: 0;
/*padding:4px;*/
color: #57B3FF;
/*text-decoration: underline;*/
}
.calendar tbody td.today {
font-weight:bold;
color: #57B3FF;
}
.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:#ABABAB;
text-align:right;
color: #30312c;
border-right: 1px solid #ABABAB;
}
.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}
;-)
Enjoy
Richard
On Wed, Sep 7, 2011 at 10:55 AM, Richard Vézina <[email protected]
> wrote:
> Finally, I think I had correct the little glitch...
>
> There is maybe some line that are not use full, like the one that include a
> .png file...
>
> Richard
>
>
> On Wed, Sep 7, 2011 at 10:51 AM, Richard Vézina <
> [email protected]> wrote:
>
>> 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
>>
>>
>>
>
