Template:Def/styles.css: Difference between revisions

Revision as of 16:41, 26 February 2026

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

/* Inline, flush with normal text — treat as one “word” with centered contents */
.sv-def {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;   /* keep icon + label together */
  line-height: inherit;
  vertical-align: middle; /* important when inside normal text lines */
  cursor: help;
}

/* Icon wrappers only exist when an icon exists */
.sv-def-icon,
.sv-def-icon-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-right: 0.25em;  /* spacing between icon and text */
  line-height: 0;        /* prevents baseline “drop” */
  vertical-align: middle; /* harmless but consistent */
}

/* File icons rendered as images */
.sv-def-icon-img img {
  display: block;        /* removes baseline behavior entirely */
  height: 1em;           /* or whatever your canonical size is */
  width: auto;
}

/* Missing file / missing record icon ("?") */
.sv-def-icon--missing {
  font-weight: 700;
  line-height: 1;        /* ensure the ? is not squashed by line-height:0 on wrapper */
}

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

/* -------------------------------------------------------------------------
   Pill mode + fill mode
   - pill: let the parent “pill” own the visual styling (no dotted underline)
   - fill: make the sv-def element stretch to its container (for full-hit areas)
------------------------------------------------------------------------- */

.sv-def--pill .sv-def-text{
  color:inherit;
  border-bottom:none;
}

.sv-def--pill{
  cursor:pointer;
}

.sv-def--pill:hover .sv-def-text{
  border-bottom:none;
}

.sv-def--fill{
  display:block;
  width:100%;
  height:100%;
  white-space:normal;
}

.sv-def--fill .sv-def-text{
  display:block;
  width:100%;
  height:100%;
  border-bottom:none;
}