Template:Def/styles.css

/* SpiritVale Wiki — Template:def/styles.css */
/* Final minimal sv-def namespace styling. */

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