Template:Def/styles.css: Difference between revisions

Revision as of 06:07, 27 February 2026

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

/* Inline, flush with text — treat as one “word” */
.sv-def{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  line-height:inherit;
  vertical-align:middle;
  cursor:help;
}

/* Linked defs are click-open (Universal Popups pins them) */
.sv-def[data-sv-def-link]{
  cursor:pointer;
}

/* Pill mode is always “clickable” */
.sv-def--pill{
  cursor:pointer;
}

/* Focus styling (tabindex is added only when interactive) */
.sv-def:focus{
  outline:2px solid currentColor;
  outline-offset:2px;
  border-radius:8px;
}

/* Icon wrappers */
.sv-def-icon,
.sv-def-icon-img{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:0.25em;
  line-height:0;
  vertical-align:middle;
}

/* File icons rendered as images */
.sv-def-icon-img img{
  display:block;
  width:14px;
  height:14px;
}

/* Missing file / missing record icon (“?” badge) */
.sv-def-icon--missing{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:14px;
  height:14px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,0.28);
  background:rgba(0,0,0,0.18);

  font-weight:900;
  font-size:11px;
  line-height:1;
}

/* -------------------------------------------------------------------------
   Definition text: link-like tone + dotted underline
   (TemplateStyles-safe: no CSS vars)
------------------------------------------------------------------------- */

.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 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
------------------------------------------------------------------------- */

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

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