.mw-widget-calendarWidget-upButton {
position: absolute;
+ top: 0;
right: 3em;
+ pointer-events: none;
}
.mw-widget-calendarWidget-prevButton {
.mw-widget-calendarWidget-body-wrapper {
.mw-widget-calendarWidget-body {
display: inline-block;
+ display: inline-grid;
// Fit 7 days, 3em each
width: @calendarWidth;
// Fit 6 weeks + heading line, 2em each
.mw-widget-calendarWidget-body {
display: block;
+ display: grid;
}
.mw-widget-calendarWidget-body:first-child {
.mw-widget-calendarWidget-body {
display: block;
+ display: grid;
}
.mw-widget-calendarWidget-body:first-child {
}
}
+// Support: Browsers that render CSS Grid. All others ignore unknown `grid-*` properties.
+// This avoids any calculation issues pushing items to next line.
+.mw-widget-calendarWidget-body-month {
+ grid-template-columns: auto auto auto auto auto auto auto;
+}
+
+.mw-widget-calendarWidget-body-year {
+ grid-template-columns: auto auto;
+}
+
+.mw-widget-calendarWidget-body-duodecade {
+ grid-template-columns: auto auto auto auto auto;
+}
+
.mw-widget-calendarWidget-day,
.mw-widget-calendarWidget-day-heading,
.mw-widget-calendarWidget-month,
// 7x7 grid
width: @calendarWidth / 7;
line-height: @calendarHeight / 7;
+
// 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;
}
+
&:nth-child( 7n+1 ) {
width: @calendarWidth / 7 - 0.2em;
margin-left: 0.2em;
}
+
&:nth-child( 42 ) ~ & {
line-height: @calendarHeight / 7 - 0.2em;
margin-bottom: 0.2em;
// 2x6 grid
width: @calendarWidth / 2;
line-height: @calendarHeight / 6;
+
// 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;
}
+
&:nth-child( 2n+1 ) {
width: @calendarWidth / 2 - 0.2em;
margin-left: 0.2em;
}
+
&:nth-child( 10 ) ~ & {
line-height: @calendarHeight / 6 - 0.2em;
margin-bottom: 0.2em;
// 5x4 grid
width: @calendarWidth / 5;
line-height: @calendarHeight / 4;
+
// 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;
}
+
&:nth-child( 5n+1 ) {
width: @calendarWidth / 5 - 0.2em;
margin-left: 0.2em;
}
+
&:nth-child( 15 ) ~ & {
line-height: @calendarHeight / 4 - 0.2em;
margin-bottom: 0.2em;