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
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
 
(2 intermediate revisions by the same user 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, flush with normal text — treat as one “word” with centered contents */
.sv-def {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;  /* keep icon + label together */
  line-height: inherit;
  vertical-align: middle; /* important when inside normal text lines */
  cursor: help;
}


/* Icon wrappers only exist when an icon exists */
/* -------------------------------------------------------------------------- */
.sv-def-icon,
/* 1) Wrapper */
.sv-def-icon-img {
/* -------------------------------------------------------------------------- */
  display: inline-flex;
  align-items: center;
  justify-content: center;


   margin-right: 0.25em; /* spacing between icon and text */
.sv-def{
   line-height: 0;       /* prevents baseline “drop” */
  display:inline-flex;
   vertical-align: middle; /* harmless but consistent */
   align-items:center;
  white-space:nowrap;
   line-height:inherit;
   vertical-align:middle;
  cursor:help;
}
}


/* File icons rendered as images */
.sv-def[data-sv-def-link],
.sv-def-icon-img img {
.sv-def--pill{
   display: block;        /* removes baseline behavior entirely */
   cursor:pointer;
  height: 1em;          /* or whatever your canonical size is */
  width: auto;
}
}


/* Missing file / missing record icon ("?") */
.sv-def:focus{
.sv-def-icon--missing {
   outline:2px solid currentColor;
   font-weight: 700;
   outline-offset:2px;
   line-height: 1;       /* ensure the ? is not squashed by line-height:0 on wrapper */
  border-radius:8px;
}
}


/* -------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
  Link color match (TemplateStyles-safe: NO var())
/* 2) Icons */
  Citizen theme classes:
/* -------------------------------------------------------------------------- */
  - Night links: #6aa6ff (hover: #8cbcff)
  - Day  links: #8cbcff (hover: #b0d0ff)
------------------------------------------------------------------------- */


/* Default (fallback if theme classes not present) */
.sv-def-icon,
.sv-def-text {
.sv-def-icon-img{
   color: #8cbcff;
   display:inline-flex;
   border-bottom: 1px dotted currentColor;
  align-items:center;
   text-decoration: none;
  justify-content:center;
  margin-right:0.25em;
   line-height:0;
   vertical-align:middle;
}
}


/* Night */
.sv-def-icon-img img{
.skin-theme-clientpref-night .sv-def-text {
   display:block;
   color: #6aa6ff;
  width:14px;
  height:14px;
}
}


/* Day */
.sv-def-icon--missing{
.skin-theme-clientpref-day .sv-def-text {
  display:inline-flex;
   color: #8cbcff;
  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;
}
}


/* OS mode: respect prefers-color-scheme */
/* -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
/* 3) Text */
  .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 link tone */
.sv-def-text{
.sv-def:hover .sv-def-text {
  color:var(--color-link);
   border-bottom-style: solid;
   border-bottom:1px dotted currentColor;
  text-decoration:none;
}
}


/* Night hover */
.sv-def:hover .sv-def-text{
.skin-theme-clientpref-night .sv-def:hover .sv-def-text {
   color:var(--color-link--hover);
   color: #8cbcff;
  border-bottom-style:solid;
}
}


/* Day hover */
/* -------------------------------------------------------------------------- */
.skin-theme-clientpref-day .sv-def:hover .sv-def-text {
/* 4) States and modes */
  color: #b0d0ff;
/* -------------------------------------------------------------------------- */
}


/* OS hover */
.sv-def--missing,
@media (prefers-color-scheme: dark) {
.sv-def--error{
  .skin-theme-clientpref-os .sv-def:hover .sv-def-text {
  cursor:not-allowed;
    color: #8cbcff;
   opacity:0.85;
   }
}
@media (prefers-color-scheme: light) {
  .skin-theme-clientpref-os .sv-def:hover .sv-def-text {
    color: #b0d0ff;
  }
}
}


/* Missing/error states */
.sv-def--pill .sv-def-text,
.sv-def--missing,
.sv-def--fill .sv-def-text{
.sv-def--error {
   border-bottom:none;
   cursor: not-allowed;
  opacity: 0.85;
}
}
/* -------------------------------------------------------------------------
  Pill mode + fill mode
  - pill: let the parent “pill” own the visual styling (no dotted underline)
  - fill: make the sv-def element stretch to its container (for full-hit areas)
------------------------------------------------------------------------- */


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


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