Template:LocaleDate/styles.css: Difference between revisions

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";}*/