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

MediaWiki:Common.css: Difference between revisions

MediaWiki interface 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:
/* SpiritVale Wiki — Common.css */
/* SpiritVale Wiki — Common.css */
/* Shared sitewide tokens, primitives, and reusable components. */
/* Role: shared tokens, primitives, utilities, and interactive anatomy */
/* Scope: sitewide SpiritVale UI foundations only */


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
Line 7: Line 8:


:root{
:root{
   /* Fallback SV UI tokens. */
   /* Surface ladder.
    bg0 = site background only
    bg1 = main component surface
    bg2 = nested/grouped panel surface
    bg3 = deep inset / pill surface
    bg4 = highest emphasis / selected / strong highlight surface
  */
   --sv-ui-bg0:#0f172a;
   --sv-ui-bg0:#0f172a;
   --sv-ui-bg1:#1f2937;
   --sv-ui-bg1:#1f2937;
   --sv-ui-bg2:#273449;
   --sv-ui-bg2:#273449;
   --sv-ui-bg3:#2e3f59;
   --sv-ui-bg3:#2e3f59;
  --sv-ui-bg4:#5779a8;


  /* Border / frame ladder. */
   --sv-ui-line1:#3b4b63;
   --sv-ui-line1:#3b4b63;
   --sv-ui-line2:#4b6388;
   --sv-ui-line2:#4b6388;
  --sv-ui-line3:#7d93b5;


  /* Text ladder. */
   --sv-ui-text1:#f5f9ff;
   --sv-ui-text1:#f5f9ff;
   --sv-ui-text2:#d7e2f4;
   --sv-ui-text2:#d7e2f4;
   --sv-ui-text3:#b6c6e0;
   --sv-ui-text3:#b6c6e0;
  --sv-ui-text4:#7f9fcc;


  /* Accent ladder. */
   --sv-ui-accent:#6aa6ff;
   --sv-ui-accent:#6aa6ff;
   --sv-ui-accent2:#8cbcff;
   --sv-ui-accent2:#8cbcff;
  --sv-ui-accent3:#e6f0ff;


   /* Popover tokens. */
   /* Popover tokens. */
   --sv-ui-pop-bg:var(--sv-ui-bg0);
   --sv-ui-pop-bg:var(--sv-ui-bg2);
   --sv-ui-pop-line:var(--sv-ui-line2);
   --sv-ui-pop-line:var(--sv-ui-line2);
   --sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35);
   --sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35);


  /* Radius tokens. */
   --sv-ui-rad-sm:10px;
   --sv-ui-rad-sm:10px;
   --sv-ui-rad-md:14px;
   --sv-ui-rad-md:14px;
Line 33: Line 48:
   --sv-ui-rad-pill:999px;
   --sv-ui-rad-pill:999px;


  /* Shared shadow tokens. */
   --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
   --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);


Line 40: Line 56:
   --sv-ui-pill-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
   --sv-ui-pill-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
   --sv-ui-pill-text:var(--sv-ui-text1);
   --sv-ui-pill-text:var(--sv-ui-text1);
}
}


Line 49: Line 64:
   --sv-ui-bg2:#2e3f59;
   --sv-ui-bg2:#2e3f59;
   --sv-ui-bg3:#364a69;
   --sv-ui-bg3:#364a69;
  --sv-ui-bg4:#6888b4;


   --sv-ui-line1:#4b6388;
   --sv-ui-line1:#4b6388;
   --sv-ui-line2:#5f7fb4;
   --sv-ui-line2:#5f7fb4;
  --sv-ui-line3:#8ea7ca;


   --sv-ui-text1:#f5f9ff;
   --sv-ui-text1:#f5f9ff;
   --sv-ui-text2:#d7e2f4;
   --sv-ui-text2:#d7e2f4;
   --sv-ui-text3:#b6c6e0;
   --sv-ui-text3:#b6c6e0;
  --sv-ui-text4:#8ba8d1;


   --sv-ui-accent:#8cbcff;
   --sv-ui-accent:#8cbcff;
   --sv-ui-accent2:#b0d0ff;
   --sv-ui-accent2:#b0d0ff;
  --sv-ui-accent3:#f2f7ff;
}
}


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 2) Sitewide link visibility */
/* 2) Sitewide link treatment */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


Line 70: Line 89:
   text-decoration-thickness:2px;
   text-decoration-thickness:2px;
   text-underline-offset:2px;
   text-underline-offset:2px;
  text-decoration-skip-ink:auto;
  transition:
    color 120ms ease,
    text-decoration-thickness 120ms ease,
    text-underline-offset 120ms ease;
}
}


Line 78: Line 102:
.mw-parser-output a:hover{
.mw-parser-output a:hover{
   text-decoration-thickness:3px;
   text-decoration-thickness:3px;
  text-underline-offset:3px;
}
}


.mw-parser-output a:focus-visible{
.mw-parser-output a:focus-visible{
   outline:2px solid var(--sv-ui-accent2);
   outline:2px solid var(--sv-ui-accent3);
   outline-offset:2px;
   outline-offset:2px;
   border-radius:6px;
   border-radius:6px;
  box-shadow:0 0 0 3px rgba(230,240,255,0.12);
}
}


Line 119: Line 145:
   padding:0.18em 0.40em;
   padding:0.18em 0.40em;
   border-radius:var(--sv-ui-rad-sm);
   border-radius:var(--sv-ui-rad-sm);
   background:var(--sv-ui-bg3);
   background:var(--sv-ui-pill-bg);
   border:1px solid var(--sv-ui-line2);
   border:1px solid var(--sv-ui-pill-line);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
   box-shadow:var(--sv-ui-pill-shadow);
   background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
   background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
   color:var(--color-emphasized, var(--sv-ui-text1));
   color:var(--sv-ui-pill-text);
   font-weight:800;
   font-weight:800;
   text-transform:uppercase;
   text-transform:uppercase;
Line 148: Line 174:
.sv-focus-ring:focus-visible,
.sv-focus-ring:focus-visible,
.mw-parser-output .sv-focus-ring:focus-visible{
.mw-parser-output .sv-focus-ring:focus-visible{
   outline:2px solid var(--sv-ui-accent2);
   outline:2px solid var(--sv-ui-accent3);
   outline-offset:2px;
   outline-offset:2px;
   border-radius:8px;
   border-radius:var(--sv-ui-rad-sm);
}
}


Line 181: Line 207:
}
}


/* Size modifiers. */
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}
Line 189: Line 214:
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


/* JS visibility contract. */
.sv-hidden,
.sv-hidden,
.mw-parser-output .sv-hidden{
.mw-parser-output .sv-hidden{
Line 197: Line 221:
[hidden]{display:none !important;}
[hidden]{display:none !important;}


/* Missing icon badge. */
.sv-miss,
.sv-miss,
.mw-parser-output .sv-miss{
.mw-parser-output .sv-miss{
Line 214: Line 237:
}
}


/* Generic image wrapper. */
.sv-img,
.sv-img,
.mw-parser-output .sv-img{
.mw-parser-output .sv-img{
Line 230: Line 252:
}
}


/* Image shadow variant. */
.sv-img--shadow img,
.sv-img--shadow img,
.mw-parser-output .sv-img--shadow img{
.mw-parser-output .sv-img--shadow img{
Line 352: Line 373:
}
}


/* Slider shell. */
.sv-level-range--custom,
.sv-level-range--custom,
.sv-level-range[data-sv-slider="1"]{
.sv-level-range[data-sv-slider="1"]{
Line 360: Line 380:
   border-radius:var(--sv-ui-rad-pill);
   border-radius:var(--sv-ui-rad-pill);
   border:1px solid var(--sv-ui-line2);
   border:1px solid var(--sv-ui-line2);
   background:var(--sv-ui-bg0);
   background:var(--sv-ui-bg1);
   cursor:pointer;
   cursor:pointer;
   box-sizing:border-box;
   box-sizing:border-box;
}
}


/* Track and fill. */
.sv-level-track{
.sv-level-track{
   position:absolute;
   position:absolute;
Line 386: Line 405:
}
}


/* Thumb. */
.sv-level-thumb{
.sv-level-thumb{
   position:absolute;
   position:absolute;
Line 396: Line 414:
   height:18px;
   height:18px;
   border-radius:var(--sv-ui-rad-pill);
   border-radius:var(--sv-ui-rad-pill);
   border:2px solid var(--sv-ui-line2);
   border:2px solid var(--sv-ui-line3);
   background:rgba(245,249,255,0.92);
   background:rgba(245,249,255,0.92);
   box-shadow:0 10px 18px rgba(0,0,0,0.35);
   box-shadow:0 10px 18px rgba(0,0,0,0.35);
}
}


/* Tick labels. */
.sv-level-ticklabels{
.sv-level-ticklabels{
   display:flex;
   display:flex;
Line 421: Line 438:
}
}


/* Value bubble. */
.sv-level-range--custom .sv-level-bubble,
.sv-level-range--custom .sv-level-bubble,
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
Line 430: Line 446:
   padding:9px 15px;
   padding:9px 15px;
   border-radius:36px;
   border-radius:36px;
   border:1px solid var(--sv-ui-line2);
   border:1px solid var(--sv-ui-line3);
   background:var(--sv-ui-bg1);
   background:var(--sv-ui-bg3);
   background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
   background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
   box-shadow:0 10px 18px rgba(0,0,0,0.35);
   box-shadow:0 10px 18px rgba(0,0,0,0.35);
Line 451: Line 467:
   height:14px;
   height:14px;
   margin-left:-7px;
   margin-left:-7px;
   background:var(--sv-ui-bg1);
   background:var(--sv-ui-bg3);
   border-left:1px solid var(--sv-ui-line2);
   border-left:1px solid var(--sv-ui-line3);
   border-bottom:1px solid var(--sv-ui-line2);
   border-bottom:1px solid var(--sv-ui-line3);
   transform:rotate(45deg);
   transform:rotate(45deg);
}
}


/* Focus ring. */
.sv-level-range--custom:focus-visible,
.sv-level-range--custom:focus-visible,
.sv-level-range[data-sv-slider="1"]:focus-visible{
.sv-level-range[data-sv-slider="1"]:focus-visible{
   outline:2px solid var(--sv-ui-accent2);
   outline:2px solid var(--sv-ui-accent3);
   outline-offset:2px;
   outline-offset:2px;
   border-radius:10px;
   border-radius:var(--sv-ui-rad-sm);
}
}


Line 518: Line 533:
}
}


/* Shared control focus rings. */
.sv-tab:focus-visible,
.sv-tab:focus-visible,
.mw-parser-output .sv-tab:focus-visible,
.mw-parser-output .sv-tab:focus-visible,
.sv-disclose-btn:focus-visible,
.sv-disclose-btn:focus-visible,
.mw-parser-output .sv-disclose-btn:focus-visible{
.mw-parser-output .sv-disclose-btn:focus-visible{
   outline:2px solid var(--sv-ui-accent2);
   outline:2px solid var(--sv-ui-accent3);
   outline-offset:2px;
   outline-offset:2px;
   border-radius:10px;
   border-radius:var(--sv-ui-rad-sm);
}
}


Line 559: Line 573:
.sv-tip-btn:focus-visible,
.sv-tip-btn:focus-visible,
.mw-parser-output .sv-tip-btn:focus-visible{
.mw-parser-output .sv-tip-btn:focus-visible{
   outline:2px solid var(--sv-ui-accent2);
   outline:2px solid var(--sv-ui-accent3);
   outline-offset:2px;
   outline-offset:2px;
}
}
Line 594: Line 608:
}
}


/* Small info icon. */
.sv-ico--info,
.sv-ico--info,
.mw-parser-output .sv-ico--info{
.mw-parser-output .sv-ico--info{
Line 658: Line 671:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 9) Universal Popups v3.2 */
/* 9) Universal popups */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


/* Prevent long-press select and callout. */
.sv-tip-btn,
.sv-tip-btn,
.sv-disclose-btn,
.sv-disclose-btn,
Line 689: Line 701:
   border-radius:var(--sv-ui-rad-lg);
   border-radius:var(--sv-ui-rad-lg);
   border:1px solid var(--sv-ui-pop-line, var(--sv-ui-line2));
   border:1px solid var(--sv-ui-pop-line, var(--sv-ui-line2));
   background:var(--sv-ui-pop-bg, var(--sv-ui-bg0));
   background:var(--sv-ui-pop-bg, var(--sv-ui-bg2));
   background-image:
   background-image:
     radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%),
     radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%),
Line 716: Line 728:
   justify-content:center;
   justify-content:center;
   padding:12px 12px;
   padding:12px 12px;
   border-bottom:1px solid var(--sv-ui-line1);
   border-bottom:1px solid var(--sv-ui-line2);
   background:var(--sv-ui-bg1);
   background:var(--sv-ui-bg3);
}
}


Line 772: Line 784:
}
}


.sv-uipop a:hover{text-decoration-thickness:3px;}
.sv-uipop a:hover{
  text-decoration-thickness:3px;
  text-underline-offset:3px;
}
 
.sv-uipop a:focus-visible,
.sv-uipop-title a.sv-uipop-title-link:focus-visible{
  outline:2px solid var(--sv-ui-accent3);
  outline-offset:2px;
  border-radius:6px;
}


.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){
Line 832: Line 854:
/* 10) Motion */
/* 10) Motion */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
@media (prefers-reduced-motion: reduce){
   .sv-hover-lift{transition:none;}
   .sv-hover-lift{transition:none;}
Line 840: Line 863:
/* 11) Responsive */
/* 11) Responsive */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
@media (max-width:500px){
@media (max-width:500px){
   .sv-level-endvalue,
   .sv-level-endvalue,
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"