resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less

   1 /*!
   2  * MediaWiki Widgets – CalendarWidget styles.
   3  *
   4  * @copyright 2011-2023 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7
   8 /* stylelint-disable no-duplicate-selectors */
   9 @import 'mediawiki.skin.variables.less';
  10 @import 'mediawiki.mixins.less';
  11
  12 @calendarWidth: 21em;
  13 @calendarHeight: 14em;
  14
  15 .mw-widget-calendarWidget {
  16         width: @calendarWidth;
  17 }
  18
  19 .mw-widget-calendarWidget-header {
  20         position: relative;
  21         line-height: 2.5;
  22
  23         // Overwrite OOUI's `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child`
  24         .oo-ui-buttonWidget.oo-ui-iconElement {
  25                 margin-left: 0;
  26                 margin-right: 0;
  27         }
  28
  29         .mw-widget-calendarWidget-labelButton {
  30                 margin: 0 auto;
  31                 display: block;
  32                 width: @calendarWidth - 2 * 3em;
  33
  34                 .oo-ui-buttonElement-button {
  35                         width: @calendarWidth - 2 * 3em;
  36                         text-align: center;
  37                 }
  38         }
  39 }
  40
  41 .mw-widget-calendarWidget-upButton {
  42         position: absolute;
  43         top: 0;
  44         right: 3em;
  45         pointer-events: none;
  46 }
  47
  48 .mw-widget-calendarWidget-prevButton {
  49         float: left;
  50 }
  51
  52 .mw-widget-calendarWidget-nextButton {
  53         float: right;
  54 }
  55
  56 .mw-widget-calendarWidget-body-outer-wrapper {
  57         clear: both;
  58         position: relative;
  59         overflow: hidden;
  60         // Fit 7 days, 3em each
  61         width: @calendarWidth;
  62         // Fit 6 weeks + heading line, 2em each
  63         height: @calendarHeight;
  64 }
  65
  66 .mw-widget-calendarWidget-body-wrapper {
  67         .mw-widget-calendarWidget-body {
  68                 display: inline-block;
  69                 display: inline-grid;
  70                 // Fit 7 days, 3em each
  71                 width: @calendarWidth;
  72                 // Fit 6 weeks + heading line, 2em each
  73                 height: @calendarHeight;
  74         }
  75
  76         .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):first-child {
  77                 margin-top: -@calendarHeight;
  78                 margin-left: -@calendarWidth;
  79         }
  80
  81         .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):last-child {
  82                 margin-top: 0;
  83                 margin-left: 0;
  84         }
  85 }
  86
  87 .mw-widget-calendarWidget-body-wrapper-fade-previous {
  88         width: @calendarWidth * 2;
  89         height: @calendarHeight;
  90
  91         /* stylelint-disable declaration-no-important */
  92         .mw-widget-calendarWidget-body:first-child {
  93                 margin-top: 0 !important;
  94                 margin-left: 0 !important;
  95                 transition: margin-left 500ms;
  96         }
  97         /* stylelint-enable declaration-no-important */
  98 }
  99
 100 .mw-widget-calendarWidget-body-wrapper-fade-next {
 101         width: @calendarWidth * 2;
 102         height: @calendarHeight;
 103
 104         /* stylelint-disable declaration-no-important */
 105         .mw-widget-calendarWidget-body:first-child {
 106                 margin-left: -@calendarWidth !important;
 107                 margin-top: 0 !important;
 108                 transition: margin-left 500ms;
 109         }
 110         /* stylelint-enable declaration-no-important */
 111 }
 112
 113 .mw-widget-calendarWidget-body-wrapper-fade-up {
 114         width: @calendarWidth;
 115         height: @calendarHeight * 2;
 116
 117         .mw-widget-calendarWidget-body {
 118                 display: block;
 119                 display: grid;
 120         }
 121
 122         /* stylelint-disable declaration-no-important */
 123         .mw-widget-calendarWidget-body:first-child {
 124                 margin-left: 0 !important;
 125                 margin-top: 0 !important;
 126                 transition: margin-top 500ms;
 127         }
 128         /* stylelint-enable declaration-no-important */
 129 }
 130
 131 .mw-widget-calendarWidget-body-wrapper-fade-down {
 132         width: @calendarWidth;
 133         height: @calendarHeight * 2;
 134
 135         .mw-widget-calendarWidget-body {
 136                 display: block;
 137                 display: grid;
 138         }
 139
 140         /* stylelint-disable declaration-no-important */
 141         .mw-widget-calendarWidget-body:first-child {
 142                 margin-left: 0 !important;
 143                 margin-top: -@calendarHeight !important;
 144                 transition: margin-top 500ms;
 145         }
 146         /* stylelint-enable declaration-no-important */
 147 }
 148
 149 // Support: Browsers that render CSS Grid. All others ignore unknown `grid-*` properties.
 150 // This avoids any calculation issues pushing items to next line.
 151 .mw-widget-calendarWidget-body-month {
 152         grid-template-columns: auto auto auto auto auto auto auto;
 153 }
 154
 155 .mw-widget-calendarWidget-body-year {
 156         grid-template-columns: auto auto;
 157 }
 158
 159 .mw-widget-calendarWidget-body-duodecade {
 160         grid-template-columns: auto auto auto auto auto;
 161 }
 162
 163 .mw-widget-calendarWidget-day,
 164 .mw-widget-calendarWidget-day-heading,
 165 .mw-widget-calendarWidget-month,
 166 .mw-widget-calendarWidget-year {
 167         display: inline-block;
 168         vertical-align: middle;
 169         white-space: nowrap;
 170         overflow: hidden;
 171         text-overflow: ellipsis;
 172         text-align: center;
 173 }
 174
 175 .mw-widget-calendarWidget-day,
 176 .mw-widget-calendarWidget-day-heading {
 177         // 7x7 grid
 178         width: (@calendarWidth / 7);
 179         line-height: (@calendarHeight / 7);
 180
 181         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 182         &:nth-child( 7n ) {
 183                 width: (@calendarWidth / 7 - 0.2em);
 184                 margin-right: 0.2em;
 185         }
 186
 187         &:nth-child( 7n+1 ) {
 188                 width: (@calendarWidth / 7 - 0.2em);
 189                 margin-left: 0.2em;
 190         }
 191
 192         &:nth-child( 42 ) ~ & {
 193                 line-height: (@calendarHeight / 7 - 0.2em);
 194                 margin-bottom: 0.2em;
 195         }
 196 }
 197
 198 .mw-widget-calendarWidget-month {
 199         // 2x6 grid
 200         width: (@calendarWidth / 2);
 201         line-height: (@calendarHeight / 6);
 202
 203         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 204         &:nth-child( 2n ) {
 205                 width: (@calendarWidth / 2 - 0.2em);
 206                 margin-right: 0.2em;
 207         }
 208
 209         &:nth-child( 2n+1 ) {
 210                 width: (@calendarWidth / 2 - 0.2em);
 211                 margin-left: 0.2em;
 212         }
 213
 214         &:nth-child( 10 ) ~ & {
 215                 line-height: (@calendarHeight / 6 - 0.2em);
 216                 margin-bottom: 0.2em;
 217         }
 218 }
 219
 220 .mw-widget-calendarWidget-year {
 221         // 5x4 grid
 222         width: (@calendarWidth / 5);
 223         line-height: (@calendarHeight / 4);
 224
 225         // Don't overlap the hacked-up fake box-shadow border we get when focussed
 226         &:nth-child( 5n ) {
 227                 width: (@calendarWidth / 5 - 0.2em);
 228                 margin-right: 0.2em;
 229         }
 230
 231         &:nth-child( 5n+1 ) {
 232                 width: (@calendarWidth / 5 - 0.2em);
 233                 margin-left: 0.2em;
 234         }
 235
 236         &:nth-child( 15 ) ~ & {
 237                 line-height: (@calendarHeight / 4 - 0.2em);
 238                 margin-bottom: 0.2em;
 239         }
 240 }
 241
 242 .mw-widget-calendarWidget-item {
 243         cursor: pointer;
 244 }
 245
 246 /* Theme-specific */
 247 .mw-widget-calendarWidget {
 248         box-sizing: border-box;
 249         border: @border-base;
 250         transition: border-color 100ms, box-shadow 100ms;
 251
 252         &:focus {
 253                 border-color: @border-color-progressive--focus;
 254                 box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
 255                 outline: @outline-base--focus;
 256         }
 257
 258         &-day {
 259                 color: @color-base;
 260                 border-radius: @border-radius-base;
 261         }
 262
 263         &-day-heading {
 264                 color: @color-subtle;
 265                 font-weight: bold;
 266         }
 267
 268         &-day-additional {
 269                 color: #a2a9b1;
 270
 271                 &:hover {
 272                         color: #202122;
 273                 }
 274         }
 275
 276         &-day-today {
 277                 box-shadow: @box-shadow-inset-small @box-shadow-color-progressive-selected;
 278         }
 279
 280         &-item {
 281                 transition: background-color 250ms, color 250ms;
 282
 283                 &:hover {
 284                         background-color: #36c;
 285                         color: #fff;
 286                 }
 287
 288                 &-selected {
 289                         background-color: #2a4b8d;
 290                         color: #fff;
 291                 }
 292         }
 293 }