// 7x7 grid
width: @calendarWidth / 7;
line-height: @calendarHeight / 7;
- // Don't overlap the hacked-up fake box-shadow border we get inside DateInputWidget when focussed
+ // Don't overlap the hacked-up fake box-shadow border we get when focussed
&:nth-child(7n) {
width: @calendarWidth / 7 - 0.2em;
margin-right: 0.2em;
// 2x6 grid
width: @calendarWidth / 2;
line-height: @calendarHeight / 6;
- // Don't overlap the hacked-up fake box-shadow border we get inside DateInputWidget when focussed
+ // Don't overlap the hacked-up fake box-shadow border we get when focussed
&:nth-child(2n) {
width: @calendarWidth / 2 - 0.2em;
margin-right: 0.2em;
// 5x4 grid
width: @calendarWidth / 5;
line-height: @calendarHeight / 4;
- // Don't overlap the hacked-up fake box-shadow border we get inside DateInputWidget when focussed
+ // Don't overlap the hacked-up fake box-shadow border we get when focussed
&:nth-child(5n) {
width: @calendarWidth / 5 - 0.2em;
margin-right: 0.2em;
}
/* Theme-specific */
+.mw-widget-calendarWidget {
+ box-shadow: inset 0 0 0 1px #ccc;
+}
+
+.mw-widget-calendarWidget:focus {
+ outline: none;
+ box-shadow: inset 0 0 0 2px #36c;
+}
+
.mw-widget-calendarWidget-day {
color: #444;
+ border-radius: 0.1em;
}
.mw-widget-calendarWidget-day-heading {
.mw-widget-calendarWidget-day-today {
box-shadow: inset 0 0 0 1px #3787fb;
- border-radius: ((@calendarHeight / 7) / 2);
}
.mw-widget-calendarWidget-item-selected {
background-color: #d8e6fe;
color: #3787fb;
-
- &.mw-widget-calendarWidget-day,
- &.mw-widget-calendarWidget-day-heading {
- border-radius: ((@calendarHeight / 7) / 2);
- }
-
- &.mw-widget-calendarWidget-month {
- border-radius: ((@calendarHeight / 6) / 2);
- }
-
- &.mw-widget-calendarWidget-year {
- border-radius: ((@calendarHeight / 4) / 2);
- }
}
.mw-widget-calendarWidget-item:hover {
background-color: #eee;
-
- &.mw-widget-calendarWidget-day,
- &.mw-widget-calendarWidget-day-heading {
- border-radius: ((@calendarHeight / 7) / 4);
- // Hide the border from .mw-widget-calendarWidget-day-today
- box-shadow: none;
- }
-
- &.mw-widget-calendarWidget-month {
- border-radius: ((@calendarHeight / 6) / 4);
- }
-
- &.mw-widget-calendarWidget-year {
- border-radius: ((@calendarHeight / 4) / 4);
- }
}