mw.widgets.CalendarWidget: Tweak hover styling after OOUI changes

[lhc/web/wiklou.git] / resources / src / mediawiki.widgets / mw.widgets.CalendarWidget.less

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
index 1035786..ba5ae33 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
@@ -39,7 +39,9 @@
 
 .mw-widget-calendarWidget-upButton {
        position: absolute;
+       top: 0;
        right: 3em;
+       pointer-events: none;
 }
 
 .mw-widget-calendarWidget-prevButton {
@@ -63,6 +65,7 @@
 .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
@@ -108,6 +111,7 @@
 
        .mw-widget-calendarWidget-body {
                display: block;
+               display: grid;
        }
 
        .mw-widget-calendarWidget-body:first-child {
@@ -123,6 +127,7 @@
 
        .mw-widget-calendarWidget-body {
                display: block;
+               display: grid;
        }
 
        .mw-widget-calendarWidget-body:first-child {
@@ -132,6 +137,20 @@
        }
 }
 
+// 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,
@@ -149,15 +168,18 @@
        // 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;
@@ -168,15 +190,18 @@
        // 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;
@@ -187,15 +212,18 @@
        // 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;