Toggle menu
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
No edit summary
No edit summary
Tags: Mobile edit Mobile web edit
 
(18 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.                        */
/* -------------------------------------------------------------------------- */


/* No pill */
 
.sv-def {
/* -------------------------------------------------------------------------- */
   display: inline-block;
/* 1) Wrapper */
   vertical-align: baseline;
/* -------------------------------------------------------------------------- */
   white-space: nowrap;
 
   cursor: help;
.sv-def{
   display:inline-flex;
   align-items:center;
   white-space:nowrap;
  line-height:inherit;
  vertical-align:middle;
   cursor:help;
}
}


/* Blue info circle (consistent in light/dark) */
.sv-def[data-sv-def-link],
.sv-def-icon {
.sv-def--pill{
  display: inline-block;
   cursor:pointer;
  width: 1.05em;
}
  height: 1.05em;
  line-height: 1.05em;
   text-align: center;
  border-radius: 999px;


   font-size: 0.75em;
.sv-def:focus{
   font-weight: 800;
  outline:2px solid currentColor;
   outline-offset:2px;
   border-radius:8px;
}


  background: #0b63c5;
/* -------------------------------------------------------------------------- */
  color: #ffffff;
/* 2) Icons */
/* -------------------------------------------------------------------------- */


   margin-right: 0.35em;
.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;
}
}


/* Keep the text looking link-like but not too loud */
.sv-def-icon-img img{
.sv-def-text {
  display:block;
   color: #0b63c5;
  width:14px;
   border-bottom: 1px dotted currentColor;
  height:14px;
   text-decoration: none;
}
 
.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 {
.sv-def:hover .sv-def-text{
   border-bottom-style: solid;
  color:var(--color-link--hover);
   border-bottom-style:solid;
}
}


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