Template:Def/styles.css: Difference between revisions

Revision as of 03:37, 24 February 2026

/* Template:def/styles.css
   Namespace: sv-def only
*/

/* Inline, flush with normal text */
.sv-def {
  display: inline;
  line-height: inherit;
  white-space: nowrap; /* keep icon + label together */
  cursor: help;
}

/* Icon wrappers only exist when an icon exists */
.sv-def-icon,
.sv-def-icon-img {
  display: inline-block;
  margin-right: 0.35em; /* spacing between icon and text */
  vertical-align: -0.125em; /* nudge down to visually center with text */
}

/* File icons rendered as images */
.sv-def-icon-img img {
  height: 1em;
  width: auto;
  vertical-align: middle;
}

/* Missing file / missing record icon ("?") */
.sv-def-icon--missing {
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Link color match (TemplateStyles-safe: NO var())
   Citizen theme classes:
   - Night links: #6aa6ff (hover: #8cbcff)
   - Day   links: #8cbcff (hover: #b0d0ff)
------------------------------------------------------------------------- */

/* Default (fallback if theme classes not present) */
.sv-def-text {
  color: #8cbcff;
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}

/* Night */
.skin-theme-clientpref-night .sv-def-text {
  color: #6aa6ff;
}

/* Day */
.skin-theme-clientpref-day .sv-def-text {
  color: #8cbcff;
}

/* OS mode: respect prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  .skin-theme-clientpref-os .sv-def-text {
    color: #6aa6ff;
  }
}
@media (prefers-color-scheme: light) {
  .skin-theme-clientpref-os .sv-def-text {
    color: #8cbcff;
  }
}

/* Hover: solid underline + brighter link tone */
.sv-def:hover .sv-def-text {
  border-bottom-style: solid;
}

/* Night hover */
.skin-theme-clientpref-night .sv-def:hover .sv-def-text {
  color: #8cbcff;
}

/* Day hover */
.skin-theme-clientpref-day .sv-def:hover .sv-def-text {
  color: #b0d0ff;
}

/* OS hover */
@media (prefers-color-scheme: dark) {
  .skin-theme-clientpref-os .sv-def:hover .sv-def-text {
    color: #8cbcff;
  }
}
@media (prefers-color-scheme: light) {
  .skin-theme-clientpref-os .sv-def:hover .sv-def-text {
    color: #b0d0ff;
  }
}

/* Missing/error states */
.sv-def--missing,
.sv-def--error {
  cursor: not-allowed;
  opacity: 0.85;
}