Template:LocaleDate/styles.css

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: #f00;
 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: ", "; } .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"; }*/