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 edit
No edit summary
No edit summary
Tags: Mobile edit Mobile web edit
 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Template:def/styles.css
/* SpiritVale Wiki — Template:def/styles.css */
   Namespace: sv-def only
/* 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.                        */
/* -------------------------------------------------------------------------- */


/* Inline, no pill — align icon + text cleanly */
 
.sv-def {
/* -------------------------------------------------------------------------- */
   display: inline-flex;
/* 1) Wrapper */
   align-items: center;
/* -------------------------------------------------------------------------- */
   gap: 0.35em;           /* spacing between icon and text (only when icon exists) */
 
   vertical-align: baseline;
.sv-def{
   white-space: nowrap;
   display:inline-flex;
   cursor: help;
   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;
}
}


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


/* If file icons render as images, keep them tidy + centered */
.sv-def-icon-img img{
.sv-def-icon-img img {
   display:block;
   display: block;
  width:14px;
  height:14px;
}
}


/* Keep the text looking link-like but not too loud */
.sv-def-icon--missing{
.sv-def-text {
   display:inline-flex;
   color: #0b63c5;
  align-items:center;
   border-bottom: 1px dotted currentColor;
  justify-content:center;
   text-decoration: none;
  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;
}
}


.sv-def:hover .sv-def-text {
/* -------------------------------------------------------------------------- */
   border-bottom-style: solid;
/* 3) Text */
/* -------------------------------------------------------------------------- */
 
.sv-def-text{
  color:var(--color-link);
   border-bottom:1px dotted currentColor;
  text-decoration:none;
}
}


/* Missing/error states */
.sv-def:hover .sv-def-text{
  color:var(--color-link--hover);
  border-bottom-style:solid;
}
 
/* -------------------------------------------------------------------------- */
/* 4) States and modes */
/* -------------------------------------------------------------------------- */
 
.sv-def--missing,
.sv-def--missing,
.sv-def--error {
.sv-def--error{
   cursor: not-allowed;
   cursor:not-allowed;
   opacity: 0.85;
   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%;
}
}
Retrieved from "https://spiritvale.info/wiki/Template:Def/styles.css"