Page MenuHomeWickedGov Phorge
Files F4149183

mw.widgets.CalendarWidget.less
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

mw.widgets.CalendarWidget.less
View Options

/*!
* MediaWiki Widgets – CalendarWidget styles.
*
* @copyright 2011-2025 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;
/* stylelint-disable declaration-no-important */
.mw-widget-calendarWidget-body:first-child {
margin-top: 0 !important;
margin-left: 0 !important;
transition: margin-left 500ms;
}
/* stylelint-enable declaration-no-important */
}
.mw-widget-calendarWidget-body-wrapper-fade-next {
width: @calendarWidth * 2;
height: @calendarHeight;
/* stylelint-disable declaration-no-important */
.mw-widget-calendarWidget-body:first-child {
margin-left: -@calendarWidth !important;
margin-top: 0 !important;
transition: margin-left 500ms;
}
/* stylelint-enable declaration-no-important */
}
.mw-widget-calendarWidget-body-wrapper-fade-up {
width: @calendarWidth;
height: @calendarHeight * 2;
.mw-widget-calendarWidget-body {
display: block;
display: grid;
}
/* stylelint-disable declaration-no-important */
.mw-widget-calendarWidget-body:first-child {
margin-left: 0 !important;
margin-top: 0 !important;
transition: margin-top 500ms;
}
/* stylelint-enable declaration-no-important */
}
.mw-widget-calendarWidget-body-wrapper-fade-down {
width: @calendarWidth;
height: @calendarHeight * 2;
.mw-widget-calendarWidget-body {
display: block;
display: grid;
}
/* stylelint-disable declaration-no-important */
.mw-widget-calendarWidget-body:first-child {
margin-left: 0 !important;
margin-top: -@calendarHeight !important;
transition: margin-top 500ms;
}
/* stylelint-enable declaration-no-important */
}
// 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;
}
}
}

File Metadata

Mime Type
text/plain
Expires
Aug 19 2026, 19:05 (6 w, 4 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
21/3b/6ba11da536004ae81237955233cf
Default Alt Text
mw.widgets.CalendarWidget.less (6 KB)

Event Timeline