Difference between revisions of "Template:Frac/styles.css"

From blackwiki
Jump to navigation Jump to search
imported>MusikBot
m (Removing protection templates from unprotected page (more info))
imported>WOSlinker
(Screen reader-only)
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
/*  */
+
.frac,
/**
+
.sfrac {
* Resulting [[Template:sfrac]] code with all 3 parameters provided, indentation added:
+
white-space: nowrap;
*
 
*    <span class="sfrac nowrap">
 
*      <span class="int">{{{1}}}&#x2064;</span>
 
*      <span class="plus visualhide">+</span>
 
*      <span class="tion">
 
*        <span class="num">{{{2}}}</span>
 
*        <span class="slash visualhide">/</span>
 
*        <span class="den">{{{3}}}</span>
 
*      </span>
 
*    </span>
 
*
 
*    .sfrac.nowrap
 
*    > .int
 
*    > .plus.visualhide
 
*    > .tion
 
*      > .num
 
*      > .slash.visualhide
 
*      > .den
 
*
 
* Resulting [[Template:sfrac]] code with just 1 or 2 parameters provided, indentation added:
 
*
 
*    <span class="sfrac nowrap" class="tion">
 
*      <span class="num">{{{1|1}}}</span>
 
*      <span class="visualhide slash">/</span>
 
*      <span class="den">{{{2|{{{1}}}}}}</span>
 
*    </span>
 
*
 
*    .sfrac.tion.nowrap
 
*    > .num
 
*    > .slash.visualhide
 
*    > .den
 
*/
 
 
 
/**
 
* Stacked Fractions
 
* -----------------
 
*
 
* - default for [[Template:sfrac]]
 
*  and for [[Template:frac]] inside [[Template:math]] or [[Template:bigmath]]
 
* - opt-in with .stacked set on any ancestor or with the {{{class}}} parameter
 
* - opt-out with .vulgar set on any ancestor or with the {{{class}}} parameter
 
*/
 
 
 
/** stacked container */
 
/* with integer */
 
.stacked .frac>.tion /* opt-in */,
 
.stacked.frac>.tion,
 
.texhtml .frac>.tion /* context */,
 
.math    .frac>.tion,
 
        .sfrac>.tion /* default */,
 
/* without integer */
 
.stacked .frac.tion /* opt-in */,
 
.stacked.frac.tion,
 
.texhtml .frac.tion /* context */,
 
.math    .frac.tion,
 
        .sfrac.tion /* default */
 
{
 
  display: inline-block;
 
  vertical-align: -0.6em; /* = -0.51 parent-em */
 
  font-size: 85%; /* should this be 83.3%? to make vertical alignment max. 0.5 parent-em */
 
  text-align: center;
 
}
 
 
 
/** stacked numerator */
 
.stacked .frac sup  /* opt-in */,
 
.stacked.frac .num,
 
.stacked .frac sup,
 
.stacked.frac .num,
 
.texhtml .frac sup  /* context */,
 
.texhtml .frac .num,
 
.math    .frac sup,
 
.math    .frac .num,
 
    span.sfrac .num /* default */,
 
/** stacked denominator */
 
.stacked .frac sub  /* opt-in */,
 
.stacked.frac .den,
 
.stacked .frac sub,
 
.stacked.frac .den,
 
.texhtml .frac sub  /* context */,
 
.texhtml .frac .den,
 
.math    .frac sub,
 
.math    .frac .den,
 
        .sfrac .den /* default */
 
{
 
  display: block;
 
  margin: 0 0.1em; /* should this be padding? */
 
  line-height: 1em;
 
}
 
 
 
/** reset default <sup> and <sub> styling */
 
.stacked .frac sup /* opt-in */,
 
.stacked.frac sup,
 
.stacked .frac sub,
 
.stacked.frac sub,
 
.texhtml .frac sup /* context */,
 
.texhtml .frac sub,
 
.math    .frac sup,
 
.math    .frac sub
 
{
 
  vertical-align: baseline; /* may be 'super' or 'sub', respectively */
 
  position: static; /* may be 'relative' */
 
  font-size: 1em; /* overrides 80% from selector '.mw-body-content sub/p' in [[MediaWiki:Common.css]],
 
                    inherits 85% of outer font size */
 
}
 
 
 
/** stacked fraction line above denominator */
 
.stacked .frac sub  /* opt-in */,
 
.stacked .frac .den,
 
.math    .frac sub  /* context */,
 
.texhtml .frac sub,
 
.texhtml .frac .den,
 
.math    .frac .den,
 
        .sfrac .den /* default */
 
{
 
  border-top: 1px solid;
 
 
}
 
}
  
/**
+
.frac .num {
* Vulgar Fractions
+
font-size: 80%;
* ----------------
+
    vertical-align: super;
*
 
* - default for [[Template:frac]]
 
* - opt-in with .vulgar set on any ancestor or with the {{{class}}} parameter
 
* - opt-out with .stacked set on any ancestor or with the {{{class}}} parameter
 
*/
 
 
 
/** unhide vulgar fraction slash */
 
.vulgar .sfrac .slash.visualhide /* opt-in */,
 
.vulgar.sfrac .slash.visualhide,
 
        .frac .slash.visualhide /* default */
 
{
 
  /* reset everything that .visualhide from [[MediaWiki:Common.css]] does */
 
  position: static /* absolute */;
 
  left: 0 /* -10000px*/;
 
  top: 0 /* auto */;
 
  width: auto /* 1px */;
 
  height: auto /* 1px */;
 
  overflow: visible /* hidden */;
 
 
}
 
}
  
/** avoid line above denominator */
+
.frac .den {
.vulgar .sfrac .den /* opt-in */,
+
font-size: 80%;
.vulgar.sfrac .den,
+
    vertical-align: sub;
        .frac .den /* default */,
 
        .frac sub
 
{
 
  border-top: none;
 
 
}
 
}
  
.vulgar .sfrac>.tion /* opt-in, with integer */,
+
.sfrac.tion,
.vulgar.sfrac>.tion,
+
.sfrac .tion {
.vulgar .sfrac.tion /* opt-in, without integer */,
+
display: inline-block;
.vulgar.sfrac.tion
+
vertical-align: -0.5em;
{
+
font-size: 85%;
  display: inline;
+
text-align: center;
  vertical-align: baseline;
 
  font-size: 1em;
 
  text-align: inherit;
 
 
}
 
}
  
/**
+
.sfrac .num,
* Fancy vulgar fractions
+
.sfrac .den {
* ----------------------
+
display: block;
*
+
line-height: 1em;
* - always requires opt-in
+
margin: 0 0.1em;
*/
 
 
 
/** enable smart-font features */
 
.stacked .fancy .frac /* double opt-in */,
 
.stacked.fancy .frac,
 
.stacked  .fancy.frac,
 
.fancy  .stacked.frac,
 
.fancy .stacked .frac,
 
  .fancy.stacked.frac,
 
        .fancy .sfrac /* opt-in */,
 
        .fancy.sfrac,
 
              .sfrac /* default */
 
{
 
  font-variant-numeric: stacked-fractions;
 
}
 
.vulgar .fancy .sfrac /* double opt-in */,
 
.vulgar.fancy .sfrac,
 
.vulgar  .fancy.sfrac,
 
.fancy  .vulgar.sfrac,
 
.fancy .vulgar .sfrac,
 
  .fancy.vulgar.sfrac,
 
        .fancy  .frac /* opt-in */,
 
          .fancy.frac,
 
                .frac /* default */
 
{
 
  font-variant-numeric: diagonal-fractions;
 
 
}
 
}
  
/* remove stacking */
+
.sfrac .den {
.fancy .sfrac>.tion[title] /* opt-in, with integer */,
+
border-top: 1px solid;
.fancy.sfrac>.tion[title],
 
.fancy .sfrac.tion[title]  /* opt-in, without integer */,
 
.fancy.sfrac.tion[title]
 
{
 
  display: inline;
 
  vertical-align: baseline;
 
  font-size: 1em;
 
  text-align: inherit;
 
}
 
/* remove all children of .tion except integer */
 
.fancy .sfrac>.tion[title]>* /* opt-in, with integer */,
 
.fancy  .frac>.tion[title]>*,
 
.fancy.sfrac>.tion[title]>*,
 
  .fancy.frac>.tion[title]>*,
 
.fancy .sfrac.tion[title]>*  /* opt-in, without integer */,
 
.fancy  .frac.tion[title]>*,
 
.fancy.sfrac.tion[title]>*,
 
  .fancy.frac.tion[title]>*
 
{
 
  display: none;
 
}
 
/* insert fancy character(s) stored by the template in .tion[title] */
 
.fancy .sfrac>.tion[title]::before /* opt-in, with integer */,
 
.fancy  .frac>.tion[title]::before,
 
.fancy.sfrac>.tion[title]::before,
 
  .fancy.frac>.tion[title]::before,
 
.fancy .sfrac.tion[title]::before  /* opt-in, without integer */,
 
.fancy  .frac.tion[title]::before,
 
.fancy.sfrac.tion[title]::before,
 
  .fancy.frac.tion[title]::before
 
{
 
  content: attr(title);
 
 
}
 
}
  
/** invisible plus sign U+2064 */
+
/* [[Template:Screen reader-only]] is canonical implementation */
/* remove normal plus sign or space */
+
.sr-only {
.fancy .sfrac .plus  /* opt-in */,
+
border: 0;
.fancy  .frac .plus,
+
clip: rect(0, 0, 0, 0);
.fancy.sfrac .plus,
+
height: 1px;
  .fancy.frac .plus
+
margin: -1px;
{
+
overflow: hidden;
  display: none;
+
padding: 0;
}
+
position: absolute;
/* insert invisible Unicode character */
+
width: 1px;
.fancy .sfrac .int::after /* opt-in */,
+
/* white-space: nowrap; /* already have nowrap above */
.fancy  .frac .int::after,
 
.fancy.sfrac .int::after,
 
  .fancy.frac .int::after
 
{
 
  content: "\2064";
 
 
}
 
}

Latest revision as of 09:19, 20 December 2020

.frac,
.sfrac {
	white-space: nowrap;
}

.frac .num {
	font-size: 80%;
    vertical-align: super;
}

.frac .den {
	font-size: 80%;
    vertical-align: sub;
}

.sfrac.tion,
.sfrac .tion {
	display: inline-block;
	vertical-align: -0.5em;
	font-size: 85%;
	text-align: center;
}

.sfrac .num,
.sfrac .den {
	display: block;
	line-height: 1em;
	margin: 0 0.1em;
}

.sfrac .den {
	border-top: 1px solid;
}

/* [[Template:Screen reader-only]] is canonical implementation */
.sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	/* white-space: nowrap; /* already have nowrap above */
}