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
 
(19 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.                        */
/* -------------------------------------------------------------------------- */


.sv-def {
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
  cursor: help;


  /* subtle pill */
/* -------------------------------------------------------------------------- */
   padding: 0.08em 0.35em;
/* 1) Wrapper */
   border-radius: 999px;
/* -------------------------------------------------------------------------- */
   background: rgba(0,0,0,0.06);
 
   border: 1px solid rgba(0,0,0,0.10);
.sv-def{
  display:inline-flex;
  align-items:center;
   white-space:nowrap;
   line-height:inherit;
   vertical-align:middle;
   cursor:help;
}
}


.sv-def-icon {
.sv-def[data-sv-def-link],
  display: inline-block;
.sv-def--pill{
  width: 1.05em;
   cursor:pointer;
  height: 1.05em;
  line-height: 1.05em;
  text-align: center;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 700;
  margin-right: 0.35em;
  background: rgba(0,0,0,0.10);
   color: inherit;
}
}


.sv-def-text {
.sv-def:focus{
   color: #0b63c5;
   outline:2px solid currentColor;
   border-bottom: 1px dotted currentColor;
   outline-offset:2px;
   text-decoration: none;
   border-radius:8px;
}
}


.sv-def:hover {
/* -------------------------------------------------------------------------- */
   background: rgba(0,0,0,0.09);
/* 2) Icons */
   border-color: rgba(0,0,0,0.16);
/* -------------------------------------------------------------------------- */
 
.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 {
.sv-def:hover .sv-def-text{
   border-bottom-style: solid;
  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.8;
   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%;
}
}