Template:LocaleDate/styles.css: Difference between revisions
(Created page with ":root { --month-order:1; →these variables are here to be changed by JavaScript code in MediaWiki:Common.js: --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: val(--day-order); } .date-month { order: val(--month-order); } .date-year { order: 3; } /* Display dates...") |
(variables do not seem to work here in any browser but Firefox, so revert to explicit values which will be overridden in JS) Tag: Manual revert |
||
| (15 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
: | /* Source: https://stackoverflow.com/questions/29359486/use-css-to-format-date-time-or-percent-value */ | ||
/* These variables are here to be changed by JavaScript code in MediaWiki:Common.js */ | |||
:root | |||
{ | |||
--day-order:2; | --day-order:2; | ||
--month-order:1; | |||
} | } | ||
/* Setup for date flexbox */ | /* Setup for date flexbox */ | ||
.date-wrapper { | .date-wrapper | ||
align-items: baseline; | { | ||
background: # | align-items:baseline; | ||
display: inline-flex; | background:#eee; | ||
display:inline-flex; | |||
} | } | ||
.date-year, | .date-year, | ||
.date-month, | .date-month, | ||
.date-day { | .date-day | ||
display: inline-block; | { | ||
display:inline-block; | |||
} | } | ||
/* Set date display order */ | /* Set date display order */ | ||
.date-day | .date-day {order:var(--day-order);} | ||
.date-month | .date-month{order:var(--month-order);} | ||
.date-year | .date-year {order:3;} | ||
/* Add separators */ | |||
.date-day::before {content:"/";} | |||
.date-month::before{content:"\00a0";} /* \00a0 is a non-breaking space */ | |||
.date-year::before {content:"/";} /* or ", " for long format */ | |||
/* Additional optional features after this point (disabled) */ | |||
/* These are dependent on "val" which is supposed to be set in the span declarations: | |||
<span class="date-year" val="1994"></span> | |||
<span class="date-month" val="3"></span> | |||
<span class="date-day" val="9"></span> | |||
However currently the template simply prints the date components directly into | |||
the spans because we don't desire to format them in any way. */ | |||
/* Display dates based on "val" custom attribute in HTML */ | /* Display dates based on "val" custom attribute in HTML */ | ||
.date-year::after, | /*.date-year::after, | ||
.date-month::after, | .date-month::after, | ||
.date-day::after { | .date-day::after | ||
content: attr(val); | { | ||
} | content:attr(val); | ||
}*/ | |||
/* Convert month numbers to month text */ | /* Convert month numbers to month text */ | ||
.date-month[ val="1"]:after{ content: "January"; } | /*.date-month[ val="1"]:after{content:"January";} | ||
.date-month[ val="2"]:after{ content: "February"; } | .date-month[ val="2"]:after{content:"February";} | ||
.date-month[ val="3"]:after{ content: "March"; } | .date-month[ val="3"]:after{content:"March";} | ||
.date-month[ val="4"]:after{ content: "April"; } | .date-month[ val="4"]:after{content:"April";} | ||
.date-month[ val="5"]:after{ content: "May"; } | .date-month[ val="5"]:after{content:"May";} | ||
.date-month[ val="6"]:after{ content: "June"; } | .date-month[ val="6"]:after{content:"June";} | ||
.date-month[ val="7"]:after{ content: "July"; } | .date-month[ val="7"]:after{content:"July";} | ||
.date-month[ val="8"]:after{ content: "August"; } | .date-month[ val="8"]:after{content:"August";} | ||
.date-month[ val="9"]:after{ content: "September"; } | .date-month[ val="9"]:after{content:"September";} | ||
.date-month[val="10"]:after{ content: "October"; } | .date-month[val="10"]:after{content:"October";} | ||
.date-month[val="11"]:after{ content: "November"; } | .date-month[val="11"]:after{content:"November";} | ||
.date-month[val="12"]:after{ content: "December"; } | .date-month[val="12"]:after{content:"December";}*/ | ||
/* Add leading zero to days */ | /* Add leading zero to days */ | ||
.date-day[val="1"]:after{ content: "01"; } | /*.date-day[val="1"]:after{content:"01";} | ||
.date-day[val="2"]:after{ content: "02"; } | .date-day[val="2"]:after{content:"02";} | ||
.date-day[val="3"]:after{ content: "03"; } | .date-day[val="3"]:after{content:"03";} | ||
.date-day[val="4"]:after{ content: "04"; } | .date-day[val="4"]:after{content:"04";} | ||
.date-day[val="5"]:after{ content: "05"; } | .date-day[val="5"]:after{content:"05";} | ||
.date-day[val="6"]:after{ content: "06"; } | .date-day[val="6"]:after{content:"06";} | ||
.date-day[val="7"]:after{ content: "07"; } | .date-day[val="7"]:after{content:"07";} | ||
.date-day[val="8"]:after{ content: "08"; } | .date-day[val="8"]:after{content:"08";} | ||
.date-day[val="9"]:after{ content: "09"; } | .date-day[val="9"]:after{content:"09";}*/ | ||
/* Display 4-digit years as 2-digit years (e.g. 1994 becomes '94) */ | /* 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 */ | /* 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="1990"]:after{content:"'90";} | ||
.date-year[val="1991"]:after{ content: "'91"; } | .date-year[val="1991"]:after{content:"'91";} | ||
.date-year[val="1992"]:after{ content: "'92"; } | .date-year[val="1992"]:after{content:"'92";} | ||
.date-year[val="1993"]:after{ content: "'93"; } | .date-year[val="1993"]:after{content:"'93";} | ||
.date-year[val="1994"]:after{ content: "'94"; } | .date-year[val="1994"]:after{content:"'94";} | ||
.date-year[val="1995"]:after{ content: "'95"; } | .date-year[val="1995"]:after{content:"'95";} | ||
.date-year[val="1996"]:after{ content: "'96"; } | .date-year[val="1996"]:after{content:"'96";} | ||
.date-year[val="1997"]:after{ content: "'97"; } | .date-year[val="1997"]:after{content:"'97";} | ||
.date-year[val="1998"]:after{ content: "'98"; } | .date-year[val="1998"]:after{content:"'98";} | ||
.date-year[val="1999"]:after{ content: "'99"; }*/ | .date-year[val="1999"]:after{content:"'99";}*/ | ||
Latest revision as of 21:44, 5 May 2025
/* Source: https://stackoverflow.com/questions/29359486/use-css-to-format-date-time-or-percent-value */
/* These variables are here to be changed by JavaScript code in MediaWiki:Common.js */
:root
{
--day-order:2;
--month-order:1;
}
/* 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:var(--day-order);}
.date-month{order:var(--month-order);}
.date-year {order:3;}
/* Add separators */
.date-day::before {content:"/";}
.date-month::before{content:"\00a0";} /* \00a0 is a non-breaking space */
.date-year::before {content:"/";} /* or ", " for long format */
/* Additional optional features after this point (disabled) */
/* These are dependent on "val" which is supposed to be set in the span declarations:
<span class="date-year" val="1994"></span>
<span class="date-month" val="3"></span>
<span class="date-day" val="9"></span>
However currently the template simply prints the date components directly into
the spans because we don't desire to format them in any way. */
/* Display dates based on "val" custom attribute in HTML */
/*.date-year::after,
.date-month::after,
.date-day::after
{
content:attr(val);
}*/
/* 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";}*/