]> git.wh0rd.org - tt-rss.git/blame - lib/dijit/themes/claro/Calendar.css
upgrade dojo to 1.8.3 (refs #570)
[tt-rss.git] / lib / dijit / themes / claro / Calendar.css
CommitLineData
81bea17a
AD
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 */
2f01fe57 34.claro .dijitCalendar {
81bea17a 35 border: solid 1px #b5bcc7;
f0cfe83e
AD
36 border-collapse: separate;
37 -moz-border-radius: 4px;
38 border-radius: 4px;
81bea17a 39 background-color: #cfe5fa;
f0cfe83e 40 background-image: url("images/calendar.png");
81bea17a 41 background-repeat: repeat-x;
f0cfe83e
AD
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%);
81bea17a
AD
46 text-align: center;
47 padding: 6px 5px 3px 5px;
2f01fe57
AD
48}
49.dj_ie6 .claro .dijitCalendar {
81bea17a 50 background-image: none;
2f01fe57
AD
51}
52.claro .dijitCalendar img {
81bea17a 53 border: none;
2f01fe57 54}
1354d172 55.claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive {
f0cfe83e 56 /* treat dijitCalendarActive like hover since there's
81bea17a
AD
57 * no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
58 */
59
60 background-color: #abd6ff;
1354d172 61 border: solid 1px #759dc0;
2f01fe57
AD
62}
63.claro .dijitCalendarMonthContainer th {
81bea17a
AD
64 text-align: center;
65 padding-bottom: 4px;
66 vertical-align: middle;
2f01fe57
AD
67}
68.claro .dijitCalendarMonthLabel {
81bea17a
AD
69 color: #000000;
70 font-size: 1.091em;
71 padding: 0 4px;
2f01fe57 72}
81bea17a 73/* next/previous month arrows */
2f01fe57 74.claro .dijitCalendarIncrementControl {
81bea17a
AD
75 width: 18px;
76 height: 16px;
77 background-image: url("images/calendarArrows.png");
78 background-repeat: no-repeat;
2f01fe57
AD
79}
80.dj_ie6 .claro .dijitCalendarIncrementControl {
81bea17a 81 background-image: url("images/calendarArrows8bit.png");
2f01fe57
AD
82}
83.claro .dijitCalendarIncrease {
81bea17a 84 background-position: -18px 0;
2f01fe57 85}
1354d172 86.claro .dijitCalendarArrowHover .dijitCalendarDecrease, .claro .dijitCalendarArrow:hover .dijitCalendarDecrease {
81bea17a 87 background-position: -36px 0;
2f01fe57 88}
1354d172 89.claro .dijitCalendarArrowHover .dijitCalendarIncrease, .claro .dijitCalendarArrow:hover .dijitCalendarIncrease {
81bea17a 90 background-position: -55px 0;
2f01fe57 91}
1354d172 92.claro .dijitCalendarArrowActive .dijitCalendarDecrease, .claro .dijitCalendarArrow:active .dijitCalendarDecrease {
81bea17a 93 background-position: -72px 0;
2f01fe57 94}
1354d172 95.claro .dijitCalendarArrowActive .dijitCalendarIncrease, .claro .dijitCalendarArrow:active .dijitCalendarIncrease {
81bea17a 96 background-position: -91px 0;
2f01fe57
AD
97}
98.claro .dijitA11ySideArrow {
81bea17a
AD
99 /* text +/- labels instead of arrow icons, for high contrast mode */
100
101 display: none;
2f01fe57 102}
2f01fe57 103.claro .dijitCalendarDayLabelTemplate {
81bea17a
AD
104 padding-bottom: 0;
105 text-align: center;
106 border-bottom: 1px solid #b5bcc7;
81bea17a 107 padding: 0 3px 2px;
2f01fe57 108}
1354d172
AD
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}
2f01fe57 116.claro .dijitCalendarDateTemplate {
81bea17a
AD
117 text-align: center;
118 background-color: #ffffff;
81bea17a
AD
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;
1354d172 126 color: #000000;
2f01fe57
AD
127}
128.dj_ie6 .claro .dijitCalendarDateTemplate {
81bea17a 129 background-image: none;
2f01fe57 130}
81bea17a 131.claro .dijitCalendarPreviousMonth, .claro .dijitCalendarNextMonth {
1354d172 132 background-color: #e5f2fe;
81bea17a
AD
133 background-image: none;
134 border-bottom: solid 1px #d3d3d3;
135 /* todo: redundant with above .dijitCalendarDateTemplate rule */
2f01fe57
AD
136}
137.claro .dijitCalendarDateTemplate .dijitCalendarDateLabel {
81bea17a
AD
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 {
1354d172
AD
155 color: #759dc0;
156 border-color: #e5f2fe;
81bea17a
AD
157 /* intentionally matches background-color, no visible border until hover/selection */
158
2f01fe57
AD
159}
160.claro .dijitCalendarYearContainer {
81bea17a 161 vertical-align: middle;
2f01fe57
AD
162}
163.claro .dijitCalendarYearControl {
81bea17a 164 padding: 1px 2px 2px 2px;
2f01fe57
AD
165}
166.claro .dijitCalendarYearLabel {
81bea17a
AD
167 padding: 2px 0 0 0;
168 margin: 0;
1354d172 169 font-size: 1.17em;
2f01fe57
AD
170}
171.claro .dijitCalendarYearLabel span {
81bea17a
AD
172 /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */
173
174 vertical-align: middle;
2f01fe57
AD
175}
176.claro .dijitCalendarSelectedYear {
81bea17a 177 padding: 0 3px;
2f01fe57 178}
81bea17a
AD
179.claro .dijitCalendarNextYear, .claro .dijitCalendarPreviousYear {
180 padding: 1px 6px 1px 6px;
181 font-size: 0.909em;
2f01fe57
AD
182}
183.claro .dijitCalendarSelectedYear {
81bea17a
AD
184 font-size: 1.091em;
185 color: #000000;
186}
187/* End Normal Calendar Style */
188/* Hovered Calendar Style */
1354d172 189.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
81bea17a 190 background-color: #abd6ff;
1354d172 191 border: solid 1px #759dc0;
81bea17a
AD
192 color: #000000;
193 -webkit-transition-duration: 0.2s;
194 -moz-transition-duration: 0.2s;
195 transition-duration: 0.2s;
196}
1354d172
AD
197.claro .dijitCalendarNextYearHover,
198.claro .dijitCalendarNextYear:hover,
199.claro .dijitCalendarPreviousYearHover,
200.claro .dijitCalendarPreviousYear:hover {
81bea17a
AD
201 color: #000000;
202 border: solid 1px #ffffff;
203 padding: 0 5px 0 5px;
204 /* reduced by 1 to make room for border */
205
1354d172 206 background-color: #e5f2fe;
81bea17a
AD
207}
208/* End Hovered Calendar Style */
209/* Active Calendar Style */
1354d172
AD
210.claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active.claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active {
211 border: solid 1px #759dc0;
81bea17a
AD
212 padding: 0 5px 0 5px;
213 /* reduced by 1 to make room for border */
214
1354d172 215 background-color: #7dbdfa;
2f01fe57 216}
1354d172 217.claro .dijitCalendarActiveDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
1354d172 218 background-color: #7dbdfa;
81bea17a
AD
219 border: solid 1px #ffffff;
220 -webkit-transition-duration: 0.1s;
221 -moz-transition-duration: 0.1s;
222 transition-duration: 0.1s;
2f01fe57
AD
223}
224.dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
81bea17a 225 background-image: none;
2f01fe57 226}
81bea17a
AD
227/* End Active Calendar Style */
228/* Selected Calendar Style */
2f01fe57 229.claro .dijitCalendarSelectedDate .dijitCalendarDateLabel {
81bea17a
AD
230 color: #000000;
231 background-color: #abd6ff;
1354d172 232 border-color: #759dc0;
2f01fe57 233}
81bea17a
AD
234/* End Selected Calendar Style */
235/* Disabled Calendar Style*/
2f01fe57 236.claro .dijitCalendarDisabledDate .dijitCalendarDateLabel {
81bea17a 237 color: #818181;
1354d172 238 text-decoration: line-through;
81bea17a
AD
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 {
81bea17a
AD
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);
f0cfe83e
AD
255 background-color: transparent;
256 background-image: none;
81bea17a 257}
1354d172
AD
258.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
259 background-color: #e5f2fe;
81bea17a
AD
260 border: solid 1px #ffffff;
261}
262/* Styling for month drop down list */
263.claro .dijitCalendarMonthMenu {
1354d172 264 border-color: #759dc0;
81bea17a
AD
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}
1354d172 276.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
1354d172 277 border-color: #759dc0;
81bea17a 278 border-width: 1px 0;
f0cfe83e
AD
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 );
2f01fe57 285}