Template:LocaleDate/styles.css: Difference between revisions
(Iritscen changed the content model of the page Template:LocaleDate/styles.css from "wikitext" to "Sanitized CSS") Tag: content model change |
No edit summary |
||
| Line 7: | Line 7: | ||
.date-wrapper { | .date-wrapper { | ||
align-items: baseline; | align-items: baseline; | ||
background: # | background: #eee; | ||
display: inline-flex; | display: inline-flex; | ||
} | } | ||
| Line 29: | Line 29: | ||
/* Add separators */ | /* Add separators */ | ||
.date-year::before { content: " | .date-year::before { content: "/"; } /* or ", " for long format */ | ||
.date-month::before { content: " | .date-month::before { content: "/"; } | ||
.date-day::before { content: "\00a0"; } /* \00a0 is a non-breaking space */ | .date-day::before { content: "\00a0"; } /* \00a0 is a non-breaking space */ | ||
Revision as of 20:53, 3 February 2025
:root { /* these variables are here to be changed by JavaScript code in MediaWiki:Common.js */
/*--month-order:1;*/ /* TemplateStyles does not support CSS variables :-( Would need TemplateStylesExtender too */
/*--day-order:2;*/
}
/* Setup for date flexbox */
.date-wrapper {
align-items: baseline;
background: #eee;
display: inline-flex;
}
.date-year,
.date-month,
.date-day {
display: inline-block;
}
/* Set date display order */
.date-day { order: 1; } /* order should be set to val(--day-order) */
.date-month { order: 2; } /* order should be set to val(--month-order) */
.date-year { order: 3; }
/* Display dates based on "val" custom attribute in HTML */
.date-year::after,
.date-month::after,
.date-day::after {
content: attr(val);
}
/* Add separators */
.date-year::before { content: "/"; } /* or ", " for long format */
.date-month::before { content: "/"; }
.date-day::before { content: "\00a0"; } /* \00a0 is a non-breaking space */
/* Convert month numbers to month text */
.date-month[ val="1"]:after{ content: "January"; }
.date-month[ val="2"]:after{ content: "February"; }
.date-month[ val="3"]:after{ content: "March"; }
.date-month[ val="4"]:after{ content: "April"; }
.date-month[ val="5"]:after{ content: "May"; }
.date-month[ val="6"]:after{ content: "June"; }
.date-month[ val="7"]:after{ content: "July"; }
.date-month[ val="8"]:after{ content: "August"; }
.date-month[ val="9"]:after{ content: "September"; }
.date-month[val="10"]:after{ content: "October"; }
.date-month[val="11"]:after{ content: "November"; }
.date-month[val="12"]:after{ content: "December"; }
/* Add leading zero to days */
.date-day[val="1"]:after{ content: "01"; }
.date-day[val="2"]:after{ content: "02"; }
.date-day[val="3"]:after{ content: "03"; }
.date-day[val="4"]:after{ content: "04"; }
.date-day[val="5"]:after{ content: "05"; }
.date-day[val="6"]:after{ content: "06"; }
.date-day[val="7"]:after{ content: "07"; }
.date-day[val="8"]:after{ content: "08"; }
.date-day[val="9"]:after{ content: "09"; }
/* Display 4-digit years as 2-digit years (e.g. 1994 becomes '94) */
/* As far as I can tell, doing this fully requires 100 lines of CSS which kinda sucks */
/*.date-year[val="1990"]:after{ content: "'90"; }
.date-year[val="1991"]:after{ content: "'91"; }
.date-year[val="1992"]:after{ content: "'92"; }
.date-year[val="1993"]:after{ content: "'93"; }
.date-year[val="1994"]:after{ content: "'94"; }
.date-year[val="1995"]:after{ content: "'95"; }
.date-year[val="1996"]:after{ content: "'96"; }
.date-year[val="1997"]:after{ content: "'97"; }
.date-year[val="1998"]:after{ content: "'98"; }
.date-year[val="1999"]:after{ content: "'99"; }*/