]> git.wh0rd.org - tt-rss.git/blame_incremental - lib/dijit/themes/claro/Calendar.css
upgrade dojo to 1.8.3 (refs #570)
[tt-rss.git] / lib / dijit / themes / claro / Calendar.css
... / ...
CommitLineData
1/* Calendar
2 *
3 * Styling Calendar mainly includes:
4 *
5 * 1. Calendar container
6 * .dijitCalendar - main container
7 * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
8 *
9 * 2. Month
10 * .dijitCalendarMonthContainer
11 * .dijitCalendarMonthLabel
12 * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
13 * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
14 *
15 * 3. Date
16 * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S
17 * .dijitCalendarDateTemplate - date label wrapper
18 * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month
19 * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date
20 * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date
21 * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active
22 *
23 * 4. Year
24 * .dijitCalendarYearContainer
25 * .dijitCalendarYearLabel
26 * .dijitCalendarPreviousYear /.dijitCalendarNextYear
27 * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
28 *
29 * 5. Dropdown Month Menu
30 * .dijitCalendarMonthMenu - menu container
31 * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
32 * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
33 */
34.claro .dijitCalendar {
35 border: solid 1px #b5bcc7;
36 border-collapse: separate;
37 -moz-border-radius: 4px;
38 border-radius: 4px;
39 background-color: #cfe5fa;
40 background-image: url("images/calendar.png");
41 background-repeat: repeat-x;
42 background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
43 background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
44 background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
45 background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
46 text-align: center;
47 padding: 6px 5px 3px 5px;
48}
49.dj_ie6 .claro .dijitCalendar {
50 background-image: none;
51}
52.claro .dijitCalendar img {
53 border: none;
54}
55.claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive {
56 /* treat dijitCalendarActive like hover since there's
57 * no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
58 */
59
60 background-color: #abd6ff;
61 border: solid 1px #759dc0;
62}
63.claro .dijitCalendarMonthContainer th {
64 text-align: center;
65 padding-bottom: 4px;
66 vertical-align: middle;
67}
68.claro .dijitCalendarMonthLabel {
69 color: #000000;
70 font-size: 1.091em;
71 padding: 0 4px;
72}
73/* next/previous month arrows */
74.claro .dijitCalendarIncrementControl {
75 width: 18px;
76 height: 16px;
77 background-image: url("images/calendarArrows.png");
78 background-repeat: no-repeat;
79}
80.dj_ie6 .claro .dijitCalendarIncrementControl {
81 background-image: url("images/calendarArrows8bit.png");
82}
83.claro .dijitCalendarIncrease {
84 background-position: -18px 0;
85}
86.claro .dijitCalendarArrowHover .dijitCalendarDecrease, .claro .dijitCalendarArrow:hover .dijitCalendarDecrease {
87 background-position: -36px 0;
88}
89.claro .dijitCalendarArrowHover .dijitCalendarIncrease, .claro .dijitCalendarArrow:hover .dijitCalendarIncrease {
90 background-position: -55px 0;
91}
92.claro .dijitCalendarArrowActive .dijitCalendarDecrease, .claro .dijitCalendarArrow:active .dijitCalendarDecrease {
93 background-position: -72px 0;
94}
95.claro .dijitCalendarArrowActive .dijitCalendarIncrease, .claro .dijitCalendarArrow:active .dijitCalendarIncrease {
96 background-position: -91px 0;
97}
98.claro .dijitA11ySideArrow {
99 /* text +/- labels instead of arrow icons, for high contrast mode */
100
101 display: none;
102}
103.claro .dijitCalendarDayLabelTemplate {
104 padding-bottom: 0;
105 text-align: center;
106 border-bottom: 1px solid #b5bcc7;
107 padding: 0 3px 2px;
108}
109.claro .dijitCalendarDayLabel {
110 padding: 0 4px 0 4px;
111 font-weight: bold;
112 font-size: 0.909em;
113 text-align: center;
114 color: #000000;
115}
116.claro .dijitCalendarDateTemplate {
117 text-align: center;
118 background-color: #ffffff;
119 border-bottom: 1px solid #d3d3d3;
120 padding-top: 0;
121 font-size: 0.909em;
122 font-family: Arial;
123 font-weight: bold;
124 letter-spacing: .05em;
125 text-align: center;
126 color: #000000;
127}
128.dj_ie6 .claro .dijitCalendarDateTemplate {
129 background-image: none;
130}
131.claro .dijitCalendarPreviousMonth, .claro .dijitCalendarNextMonth {
132 background-color: #e5f2fe;
133 background-image: none;
134 border-bottom: solid 1px #d3d3d3;
135 /* todo: redundant with above .dijitCalendarDateTemplate rule */
136}
137.claro .dijitCalendarDateTemplate .dijitCalendarDateLabel {
138 text-decoration: none;
139 display: block;
140 padding: 3px 5px 3px 4px;
141 border: solid 1px #ffffff;
142 /* intentionally matches background-color, no visible border until hover/selection */
143
144 background-color: rgba(171, 212, 251, 0);
145 /* transparent causes black-flash animation problem on webkit */
146
147 -webkit-transition-property: background-color, border;
148 -moz-transition-property: background-color, border;
149 transition-property: background-color, border;
150 -webkit-transition-duration: 0.35s;
151 -moz-transition-duration: 0.35s;
152 transition-duration: 0.35s;
153}
154.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, .claro .dijitCalendarNextMonth .dijitCalendarDateLabel {
155 color: #759dc0;
156 border-color: #e5f2fe;
157 /* intentionally matches background-color, no visible border until hover/selection */
158
159}
160.claro .dijitCalendarYearContainer {
161 vertical-align: middle;
162}
163.claro .dijitCalendarYearControl {
164 padding: 1px 2px 2px 2px;
165}
166.claro .dijitCalendarYearLabel {
167 padding: 2px 0 0 0;
168 margin: 0;
169 font-size: 1.17em;
170}
171.claro .dijitCalendarYearLabel span {
172 /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */
173
174 vertical-align: middle;
175}
176.claro .dijitCalendarSelectedYear {
177 padding: 0 3px;
178}
179.claro .dijitCalendarNextYear, .claro .dijitCalendarPreviousYear {
180 padding: 1px 6px 1px 6px;
181 font-size: 0.909em;
182}
183.claro .dijitCalendarSelectedYear {
184 font-size: 1.091em;
185 color: #000000;
186}
187/* End Normal Calendar Style */
188/* Hovered Calendar Style */
189.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
190 background-color: #abd6ff;
191 border: solid 1px #759dc0;
192 color: #000000;
193 -webkit-transition-duration: 0.2s;
194 -moz-transition-duration: 0.2s;
195 transition-duration: 0.2s;
196}
197.claro .dijitCalendarNextYearHover,
198.claro .dijitCalendarNextYear:hover,
199.claro .dijitCalendarPreviousYearHover,
200.claro .dijitCalendarPreviousYear:hover {
201 color: #000000;
202 border: solid 1px #ffffff;
203 padding: 0 5px 0 5px;
204 /* reduced by 1 to make room for border */
205
206 background-color: #e5f2fe;
207}
208/* End Hovered Calendar Style */
209/* Active Calendar Style */
210.claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active.claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active {
211 border: solid 1px #759dc0;
212 padding: 0 5px 0 5px;
213 /* reduced by 1 to make room for border */
214
215 background-color: #7dbdfa;
216}
217.claro .dijitCalendarActiveDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
218 background-color: #7dbdfa;
219 border: solid 1px #ffffff;
220 -webkit-transition-duration: 0.1s;
221 -moz-transition-duration: 0.1s;
222 transition-duration: 0.1s;
223}
224.dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
225 background-image: none;
226}
227/* End Active Calendar Style */
228/* Selected Calendar Style */
229.claro .dijitCalendarSelectedDate .dijitCalendarDateLabel {
230 color: #000000;
231 background-color: #abd6ff;
232 border-color: #759dc0;
233}
234/* End Selected Calendar Style */
235/* Disabled Calendar Style*/
236.claro .dijitCalendarDisabledDate .dijitCalendarDateLabel {
237 color: #818181;
238 text-decoration: line-through;
239}
240/* End Disabled Calendar Style */
241/* Styling for month DropDownButton */
242.claro .dijitCalendar .dijitDropDownButton {
243 margin: 0;
244}
245.claro .dijitCalendar .dijitButtonText {
246 padding: 1px 0 3px;
247 margin-right: -4px;
248}
249.claro .dijitCalendar .dijitDropDownButton .dijitButtonNode {
250 padding: 0 3px 0 2px;
251 border: solid 1px #b5bcc7;
252 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
253 -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
254 box-shadow: 0 0 0 rgba(0, 0, 0, 0);
255 background-color: transparent;
256 background-image: none;
257}
258.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
259 background-color: #e5f2fe;
260 border: solid 1px #ffffff;
261}
262/* Styling for month drop down list */
263.claro .dijitCalendarMonthMenu {
264 border-color: #759dc0;
265 background-color: #ffffff;
266 text-align: center;
267 background-image: none;
268}
269.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
270 border-top: solid 1px #ffffff;
271 /* intentionally invisible until hover */
272
273 border-bottom: solid 1px #ffffff;
274 padding: 2px 0;
275}
276.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
277 border-color: #759dc0;
278 border-width: 1px 0;
279 background-color: #abd6ff;
280 background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
281 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
282 background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
283 background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
284 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= #ffffff , endColorstr= #abd6ff );
285}