Toggle search
Toggle menu
115
248
25
2.7K
SpiritVale Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

Template:Def/styles.css: Difference between revisions

Template page
More actions
← Older editNewer edit →
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 1: Line 1:
/* Template:def/styles.css
/* SpiritVale Wiki — Template:def/styles.css */
  Definitions v1
/* Final minimal sv-def namespace styling. */
  Namespace: sv-def only
 
*/
/* -------------------------------------------------------------------------- */
/* 1) Wrapper */
/* -------------------------------------------------------------------------- */


/* Inline, flush with text — treat as one “word” */
.sv-def{
.sv-def{
   display:inline-flex;
   display:inline-flex;
Line 14: Line 15:
}
}


/* Linked defs are click-open (Universal Popups pins them) */
.sv-def[data-sv-def-link],
.sv-def[data-sv-def-link]{
  cursor:pointer;
}
 
/* Pill mode is always “clickable” */
.sv-def--pill{
.sv-def--pill{
   cursor:pointer;
   cursor:pointer;
}
}


/* Focus styling (tabindex is added only when interactive) */
.sv-def:focus{
.sv-def:focus{
   outline:2px solid currentColor;
   outline:2px solid currentColor;
Line 31: Line 26:
}
}


/* Icon wrappers */
/* -------------------------------------------------------------------------- */
/* 2) Icons */
/* -------------------------------------------------------------------------- */
 
.sv-def-icon,
.sv-def-icon,
.sv-def-icon-img{
.sv-def-icon-img{
Line 42: Line 40:
}
}


/* File icons rendered as images */
.sv-def-icon-img img{
.sv-def-icon-img img{
   display:block;
   display:block;
Line 49: Line 46:
}
}


/* Missing file / missing record icon (“?” badge) */
.sv-def-icon--missing{
.sv-def-icon--missing{
   display:inline-flex;
   display:inline-flex;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
   width:14px;
   width:14px;
   height:14px;
   height:14px;
   border-radius:999px;
   border-radius:999px;
   border:1px solid rgba(255,255,255,0.28);
   border:1px solid rgba(255,255,255,0.28);
   background:rgba(0,0,0,0.18);
   background:rgba(0,0,0,0.18);
   font-weight:900;
   font-weight:900;
   font-size:11px;
   font-size:11px;
Line 67: Line 60:
}
}


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


.sv-def-text{
.sv-def-text{
   color:#8cbcff;
   color:var(--color-link);
   border-bottom:1px dotted currentColor;
   border-bottom:1px dotted currentColor;
   text-decoration:none;
   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{
.sv-def:hover .sv-def-text{
  color:var(--color-link--hover);
   border-bottom-style:solid;
   border-bottom-style:solid;
}
}


/* Night hover */
/* -------------------------------------------------------------------------- */
.skin-theme-clientpref-night .sv-def:hover .sv-def-text{
/* 4) States and modes */
  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--missing,
.sv-def--error{
.sv-def--error{
Line 126: Line 85:
}
}


/* -------------------------------------------------------------------------
.sv-def--pill .sv-def-text,
  Pill mode + fill mode
.sv-def--fill .sv-def-text{
------------------------------------------------------------------------- */
  border-bottom:none;
}


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


Line 150: Line 105:
   width:100%;
   width:100%;
   height:100%;
   height:100%;
  border-bottom:none;
}
}
Retrieved from "https://spiritvale.info/wiki/Template:Def/styles.css"