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 > > >
