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

Revision as of 13:31, 20 December 2025

/** 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>
 * tags, unlike Zoophilia Wiki. Here, we keep these the same as
 * MediaWiki:Common.css. The word-wrap and :target styles were moved here from
 * that page, so keep these the same as Template:Citation/styles.css.
 */
cite.citation {
  font-style: inherit;  /* Remove italics for <cite>. */
  word-wrap: break-word;  /* Break long elements rather than overflowing box. */
}

.citation q {
  quotes: '"' '"' "'" "'";  /* Use "straight" quote marks for <q> tags. */
}

/* Highlight linked elements (such as clicked references) in blue. */
.citation:target {
  /* Ignore the linter, all browsers implement this. */
  background-color: rgba(0, 127, 255, 0.133);
}

/** ID and URL access
 * Both core and Common.css have the .mw-parser-output a[href$=".pdf"].external
 * selector for PDF pages. All TemplateStyles pages are hoisted to
 * .mw-parser-output. We need specificity equal to a[href$=".pdf"].external for
 * locks to override the PDF icon. That's essentially 2 classes and 1 element.
 * The .id-lock-… selectors are for use by non-Citation templates like
 * Template: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("//zoophilia.wiki/images/6/65/Lock-green.svg");
  background-position: right 0.1em center;
  background-repeat: no-repeat;
  background-size: 9px;
}

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

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

/** Wikisource
 * Wikisource icon when |chapter= or |title= is wikilinked to Wikisource, as in
 * Template:Cite_Wikisource.
 */
.cs1-ws-icon a {
  background-image: url("//zoophilia.wiki/images/4/4c/Wikisource-logo.svg");
  background-position: right 0.1em center;
  background-repeat: no-repeat;
  background-size: 12px;
}

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. We "reset" the padding
   * here. 1em picked out of a hat, based on 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: var(--color-error, #d33);
  display: none;
}

.cs1-visible-error {
  color: var(--color-error, #d33);
}

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

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

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

/** Selflinks
 * Avoid bold font style when Cs1|2 template links to the current page.
 */
.citation .mw-selflink {
  font-weight: inherit;
}

@media screen {
  /** Small text size
   * Set small text size in one place: 95% (here) * 90% (from references list)
   * is ~0.85em, which is the lower bound for size under a11y. 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 95%; else multiply
   * by 85%.
   */
  .cs1-format {
    font-size: 95%;
  }

  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;
  }
}