Module:Citation/CS1/styles.css: Difference between revisions

From Zoophilia Wiki
Jump to navigationJump to search
en>Trappist the monk
sync from sandbox;
 
SockyPaws (talk | contribs)
Upgrade deprecated CSS2 declarations to CSS3 and CSS4.
 
(3 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* Protection icon
the following line controls the page-protection icon in the upper right corner
it must remain within this comment
{{sandbox other||{{pp-template}}}}
*/
/* Overrides
Some wikis do not override user agent default styles for HTML <cite> and <q>,
unlike en.wp. On en.wp, keep these the same as [[MediaWiki:Common.css]]
*/
cite.citation {
cite.citation {
font-style: inherit; /* Remove italics for <cite> */
  font-style: inherit; /* Remove italics for <cite>. */
  /* Break long URLs, etc., rather than overflowing the box. */
  overflow-wrap: break-word;
}
}


.citation q {
.citation q {
quotes: '"' '"' "'" "'"; /* Straight quote marks for <q> */
  quotes: '"' '"' "'" "'"; /* Straight quotation marks for <q>. */
}
}


/* ID and URL access
/* Highlight linked elements (such as clicked references) in blue. */
Both core and Common.css have selector .mw-parser-output a[href$=".pdf"].external
.citation:target {
for PDF pages. All TemplateStyles pages are hoisted to .mw-parser-output. We need
  /* Ignore the linter, all browsers of interest implement this. */
to have specificity equal to a[href$=".pdf"].external for locks to override PDF icon.
  background-color: #007fff22;
 
the .id-lock-... selectors are for use by non-citation templates like {{Catalog lookup link}}
*/
.id-lock-free a,
.citation .cs1-lock-free a {
background: linear-gradient(transparent, transparent),
url(//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg)
right 0.1em center/9px no-repeat;
}
}


.id-lock-limited a,
/* ID and URL access:
.id-lock-registration a,
Both Core and Common.css have the selector .mw-parser-output a[href$=".pdf"].external
.citation .cs1-lock-limited a,
for PDF pages. All TemplateStyles pages are hoisted to .mw-parser-output. We need to
.citation .cs1-lock-registration a {
have specificity equal to a[href$=".pdf"].external for locks to override a PDF icon.
background: linear-gradient(transparent, transparent),
That's essentially two classes and one element. The .id-lock-… selectors are for use
url(//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg)
by non-citation templates like Catalog lookup link. bg-size `contain` in Minerva and
right 0.1em center/9px no-repeat;
Timeless is too large, so we set a size for them and then exclude them later. */
.id-lock-free.id-lock-free a {
  background-image: url("https://zoophilia.wiki/images/6/65/Lock-green.svg");
  background-position: right center;
  background-repeat: no-repeat;
}
}


.id-lock-subscription a,
.id-lock-limited.id-lock-limited a,
.citation .cs1-lock-subscription a {
.id-lock-registration.id-lock-registration a {
background: linear-gradient(transparent, transparent),
  background-image: url("https://zoophilia.wiki/images/d/d6/Lock-gray-alt-2.svg");
url(//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg)
  background-position: right center;
right 0.1em center/9px no-repeat;
  background-repeat: no-repeat;
}
}


.cs1-subscription,
.id-lock-subscription.id-lock-subscription a {
.cs1-registration {
  background-image: url("https://zoophilia.wiki/images/a/aa/Lock-red-alt-2.svg");
color: #555;
  background-position: right center;
  background-repeat: no-repeat;
}
}


.cs1-subscription span,
/* Wikisource:
.cs1-registration span {
The Wikisource icon when chapter or title parameteres is linked to Wikisource in a citation. */
border-bottom: 1px dotted;
.cs1-ws-icon a {
cursor: help;
  background-image: url("https://zoophilia.wiki/images/4/4c/Wikisource-logo.svg");
  background-position: right center;
  background-repeat: no-repeat;
}
}


/* Wikisource
body:not(.skin-timeless):not(.skin-minerva) .id-lock-free a,
Wikisource icon when |chapter= or |title= is wikilinked to Wikisource
body:not(.skin-timeless):not(.skin-minerva) .id-lock-limited a,
as in cite wikisource
body:not(.skin-timeless):not(.skin-minerva) .id-lock-registration a,
*/
body:not(.skin-timeless):not(.skin-minerva) .id-lock-subscription a,
.cs1-ws-icon a {
body:not(.skin-timeless):not(.skin-minerva) .cs1-ws-icon a {
background: linear-gradient(transparent, transparent),
  background-size: contain;
url(//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg)
  /* Common.css has a padding set for PDF URLs. bg-contain expands to the size of the padding
right 0.1em center/12px no-repeat;
    which makes the icons very large, so we "reset" the padding here. 1em picked out of a hat
    based on the console having a similar rule from elsewhere. */
  padding: 0 1em 0 0;
}
}


/* Errors and maintenance */
/* Errors and maintenance. */
code.cs1-code {
.cs1-code {
/* <code>...</code> style override: mediawiki's css definition is specified here:
  /* <code></code> style override; Mediawiki's CSS definition is specified here:   <https://git.wikimedia.org/blob/mediawiki%2Fcore.git/69cd73811f7aadd093050dbf20ed70ef0b42a713/skins%2Fcommon%2FcommonElements.css#L199>
https://git.wikimedia.org/blob/mediawiki%2Fcore.git/
  */
69cd73811f7aadd093050dbf20ed70ef0b42a713/skins%2Fcommon%2FcommonElements.css#L199
  background: inherit;
*/
  border: none;
color: inherit;
  color: inherit;
background: inherit;
  padding: inherit;
border: none; /* this maybe can be inherit. MDN says yes, code editor says no */
padding: inherit;
}
}


.cs1-hidden-error {
.cs1-hidden-error {
display: none;
  color: #d33;
font-size: 100%;
  display: none;
}
}


.cs1-visible-error {
.cs1-visible-error {
font-size: 100%;
  color: #d33;
}
}


.cs1-maint {
.cs1-maint {
display: none;
  color: #085;
color: #33aa33;
  display: none;
margin-left: 0.3em;
  margin-left: 0.3em;
}
}


/* Small text size
/* Font kerning. */
Set small text size in one place. 0.95 (here) * 0.9 (from references list) is
.cs1-kern-left {
~0.85, which is the lower bound for size for accessibility. Old styling for this
  padding-left: 0.2em;
was just 0.85. We could write the rule so that when this template is inside
references/reflist, only then does it multiply by 0.95; else multiply by 0.85 */
.cs1-format {
font-size: 95%;
}
}


/* kerning */
.cs1-kern-right {
.cs1-kern-left,
  padding-right: 0.2em;
.cs1-kern-wl-left {
padding-left: 0.2em;
}
}


.cs1-kern-right,
/* Selflinks – avoid bold font style when CS1/CS2 templates link to the current page. */
.cs1-kern-wl-right {
.citation .mw-selflink {
padding-right: 0.2em;
  font-weight: inherit;
}
}


/* selflinks – avoid bold font style when cs1|2 template links to the current page */
@media screen {
.citation .mw-selflink {
  /* Small text size:
font-weight: inherit;
    Set small text size in one place: here, as 0.95em, applied to 0.9em from the
    references list is ~0.85em, which is the lower text size bound for accessibility.
    Old styling for this was just 0.85em. We could write the rule so that when this
    template is inside references/reflist, only then does it multiply by 0.95em; else
    multiply by 0.85em. */
  .cs1-format {
    font-size: 0.95em;
  }
 
  html.skin-theme-clientpref-night .cs1-maint {
    color: #18911f;
  }
}
 
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .cs1-maint {
    color: #18911f;
  }
}
}

Latest revision as of 04:26, 22 November 2024

cite.citation {
  font-style: inherit;  /* Remove italics for <cite>. */
  /* Break long URLs, etc., rather than overflowing the box. */
  overflow-wrap: break-word;
}

.citation q {
  quotes: '"' '"' "'" "'";  /* Straight quotation marks for <q>. */
}

/* Highlight linked elements (such as clicked references) in blue. */
.citation:target {
  /* Ignore the linter, all browsers of interest implement this. */
  background-color: #007fff22;
}

/* ID and URL access:
Both Core and Common.css have the selector .mw-parser-output a[href$=".pdf"].external
for PDF pages. All TemplateStyles pages are hoisted to .mw-parser-output. We need to
have specificity equal to a[href$=".pdf"].external for locks to override a PDF icon.
That's essentially two classes and one element. The .id-lock-… selectors are for use
by non-citation templates like Catalog lookup link. bg-size `contain` in Minerva and
Timeless is too large, so we set a size for them and then exclude them later. */
.id-lock-free.id-lock-free a {
  background-image: url("https://zoophilia.wiki/images/6/65/Lock-green.svg");
  background-position: right center;
  background-repeat: no-repeat;
}

.id-lock-limited.id-lock-limited a,
.id-lock-registration.id-lock-registration a {
  background-image: url("https://zoophilia.wiki/images/d/d6/Lock-gray-alt-2.svg");
  background-position: right center;
  background-repeat: no-repeat;
}

.id-lock-subscription.id-lock-subscription a {
  background-image: url("https://zoophilia.wiki/images/a/aa/Lock-red-alt-2.svg");
  background-position: right center;
  background-repeat: no-repeat;
}

/* Wikisource:
The Wikisource icon when chapter or title parameteres is linked to Wikisource in a citation. */
.cs1-ws-icon a {
  background-image: url("https://zoophilia.wiki/images/4/4c/Wikisource-logo.svg");
  background-position: right center;
  background-repeat: no-repeat;
}

body:not(.skin-timeless):not(.skin-minerva) .id-lock-free a,
body:not(.skin-timeless):not(.skin-minerva) .id-lock-limited a,
body:not(.skin-timeless):not(.skin-minerva) .id-lock-registration a,
body:not(.skin-timeless):not(.skin-minerva) .id-lock-subscription a,
body:not(.skin-timeless):not(.skin-minerva) .cs1-ws-icon a {
  background-size: contain;
  /* Common.css has a padding set for PDF URLs. bg-contain expands to the size of the padding
     which makes the icons very large, so we "reset" the padding here. 1em picked out of a hat
     based on the console having a similar rule from elsewhere. */
  padding: 0 1em 0 0;
}

/* Errors and maintenance. */
.cs1-code {
  /* <code>…</code> style override; Mediawiki's CSS definition is specified here:    <https://git.wikimedia.org/blob/mediawiki%2Fcore.git/69cd73811f7aadd093050dbf20ed70ef0b42a713/skins%2Fcommon%2FcommonElements.css#L199>
  */
  background: inherit;
  border: none;
  color: inherit;
  padding: inherit;
}

.cs1-hidden-error {
  color: #d33;
  display: none;
}

.cs1-visible-error {
  color: #d33;
}

.cs1-maint {
  color: #085;
  display: none;
  margin-left: 0.3em;
}

/* Font kerning. */
.cs1-kern-left {
  padding-left: 0.2em;
}

.cs1-kern-right {
  padding-right: 0.2em;
}

/* Selflinks – avoid bold font style when CS1/CS2 templates link to the current page. */
.citation .mw-selflink {
  font-weight: inherit;
}

@media screen {
  /* Small text size:
     Set small text size in one place: here, as 0.95em, applied to 0.9em from the
     references list is	~0.85em, which is the lower text size bound for accessibility.
     Old styling for this was just 0.85em. We could write the rule so that when this
     template is inside	references/reflist, only then does it multiply by 0.95em; else
     multiply by 0.85em. */
  .cs1-format {
    font-size: 0.95em;
  }

  html.skin-theme-clientpref-night .cs1-maint {
    color: #18911f;
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .cs1-maint {
    color: #18911f;
  }
}