Template:Def/styles.css: Difference between revisions

Latest revision as of 22:41, 7 March 2026

/* SpiritVale Wiki — Template:def/styles.css */
/* Final minimal sv-def namespace styling. */
/* -------------------------------------------------------------------------- */
/* Canonical ownership map                                                     */
/* -------------------------------------------------------------------------- */
/* This sheet owns only the Definitions / sv-def namespace. It is responsible  */
/* for inline definition tokens, pill variants, icons, and definition-local    */
/* emphasis states.                                                            */
/*                                                                            */
/* It does NOT own sitewide tokens, Citizen theme logic, shared popup anatomy, */
/* or module/template layout outside the sv-def namespace.                     */
/*                                                                            */
/* Responsive cleanup note: this stylesheet currently does not require its own */
/* breakpoint rules. If responsive behavior is ever added here, it should use  */
/* the canonical six-viewpoint ladder from Common.css.                         */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* 1) Wrapper */
/* -------------------------------------------------------------------------- */

.sv-def{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  line-height:inherit;
  vertical-align:middle;
  cursor:help;
}

.sv-def[data-sv-def-link],
.sv-def--pill{
  cursor:pointer;
}

.sv-def:focus{
  outline:2px solid currentColor;
  outline-offset:2px;
  border-radius:8px;
}

/* -------------------------------------------------------------------------- */
/* 2) Icons */
/* -------------------------------------------------------------------------- */

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

.sv-def-icon-img img{
  display:block;
  width:14px;
  height:14px;
}

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

/* -------------------------------------------------------------------------- */
/* 3) Text */
/* -------------------------------------------------------------------------- */

.sv-def-text{
  color:var(--color-link);
  border-bottom:1px dotted currentColor;
  text-decoration:none;
}

.sv-def:hover .sv-def-text{
  color:var(--color-link--hover);
  border-bottom-style:solid;
}

/* -------------------------------------------------------------------------- */
/* 4) States and modes */
/* -------------------------------------------------------------------------- */

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

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

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

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

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