wikimedia/mediawiki-core

/*!
 * MediaWiki Widgets – CalendarWidget styles.
 *
 * @copyright 2011-2023 MediaWiki Widgets Team and others; see AUTHORS.txt
 * @license The MIT License (MIT); see LICENSE.txt
 */

/* stylelint-disable no-duplicate-selectors */
@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';

@calendarWidth: 21em;
@calendarHeight: 14em;

.mw-widget-calendarWidget {
    width: @calendarWidth;
}

.mw-widget-calendarWidget-header {
    position: relative;
    line-height: 2.5;

    // Overwrite OOUI's `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child`
    .oo-ui-buttonWidget.oo-ui-iconElement {
        margin-left: 0;
        margin-right: 0;
    }

    .mw-widget-calendarWidget-labelButton {
        margin: 0 auto;
        display: block;
        width: @calendarWidth - 2 * 3em;

        .oo-ui-buttonElement-button {
            width: @calendarWidth - 2 * 3em;
            text-align: center;
        }
    }
}

.mw-widget-calendarWidget-upButton {
    position: absolute;
    top: 0;
    right: 3em;
    pointer-events: none;
}

.mw-widget-calendarWidget-prevButton {
    float: left;
}

.mw-widget-calendarWidget-nextButton {
    float: right;
}

.mw-widget-calendarWidget-body-outer-wrapper {
    clear: both;
    position: relative;
    overflow: hidden;
    // Fit 7 days, 3em each
    width: @calendarWidth;
    // Fit 6 weeks + heading line, 2em each
    height: @calendarHeight;
}

.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
        height: @calendarHeight;
    }

    .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):first-child {
        margin-top: -@calendarHeight;
        margin-left: -@calendarWidth;
    }

    .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):last-child {
        margin-top: 0;
        margin-left: 0;
    }
}

.mw-widget-calendarWidget-body-wrapper-fade-previous {
    width: @calendarWidth * 2;
    height: @calendarHeight;

    .mw-widget-calendarWidget-body:first-child {
        margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
        margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
        transition: margin-left 500ms;
    }
}

.mw-widget-calendarWidget-body-wrapper-fade-next {
    width: @calendarWidth * 2;
    height: @calendarHeight;

    .mw-widget-calendarWidget-body:first-child {
        margin-left: -@calendarWidth !important; /* stylelint-disable-line declaration-no-important */
        margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
        transition: margin-left 500ms;
    }
}

.mw-widget-calendarWidget-body-wrapper-fade-up {
    width: @calendarWidth;
    height: @calendarHeight * 2;

    .mw-widget-calendarWidget-body {
        display: block;
        display: grid;
    }

    .mw-widget-calendarWidget-body:first-child {
        margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
        margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
        transition: margin-top 500ms;
    }
}

.mw-widget-calendarWidget-body-wrapper-fade-down {
    width: @calendarWidth;
    height: @calendarHeight * 2;

    .mw-widget-calendarWidget-body {
        display: block;
        display: grid;
    }

    .mw-widget-calendarWidget-body:first-child {
        margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
        margin-top: -@calendarHeight !important; /* stylelint-disable-line declaration-no-important */
        transition: margin-top 500ms;
    }
}

// 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,
.mw-widget-calendarWidget-year {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.mw-widget-calendarWidget-day,
.mw-widget-calendarWidget-day-heading {
    // 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;
    }
}

.mw-widget-calendarWidget-month {
    // 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;
    }
}

.mw-widget-calendarWidget-year {
    // 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;
    }
}

.mw-widget-calendarWidget-item {
    cursor: pointer;
}

/* Theme-specific */
.mw-widget-calendarWidget {
    box-sizing: border-box;
    border: @border-base;
    transition: border-color 100ms, box-shadow 100ms;

    &:focus {
        border-color: @border-color-progressive--focus;
        box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
        outline: @outline-base--focus;
    }

    &-day {
        color: @color-base;
        border-radius: @border-radius-base;
    }

    &-day-heading {
        color: @color-subtle;
        font-weight: bold;
    }

    &-day-additional {
        color: #a2a9b1;

        &:hover {
            color: #202122;
        }
    }

    &-day-today {
        box-shadow: @box-shadow-inset-small @box-shadow-color-progressive-selected;
    }

    &-item {
        transition: background-color 250ms, color 250ms;

        &:hover {
            background-color: #36c;
            color: #fff;
        }

        &-selected {
            background-color: #2a4b8d;
            color: #fff;
        }
    }
}