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:PatchHighlights/styles.css: Difference between revisions

Template page
m Protected "Template:PatchHighlights/styles.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 1: Line 1:
/* Template:PatchHighlights/styles.css
/* SpiritVale Wiki — Template:PatchHighlights/styles.css */
TemplateStyles-safe (NO var()) */
/* Patch highlight cards and responsive grid styles. */
.sv-ph-wrap{width:100%;max-width:700px;margin:1em auto}
 
.sv-ph-head{text-align:center;font-weight:800;padding:10px 12px;margin:10px}
/* -------------------------------------------------------------------------- */
.sv-ph-pad{padding:.75rem}
/* 1) Layout */
.sv-ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start;width:100%;direction:rtl}
/* -------------------------------------------------------------------------- */
.sv-ph-empty{grid-column:1/-1;opacity:.75;text-align:center;padding:1rem;direction:ltr}
 
.sv-ph-item{text-align:left;direction:ltr;padding:1rem 1.1rem .85rem;min-width:0;word-break:break-word}
.sv-ph-wrap{
.sv-ph-item__title{font-size:1.25em;font-weight:800;line-height:1.2;margin:-.1em 0 .35em 0}
  width:100%;
.sv-ph-item__date{margin:.1em 0;font-size:.85em;font-style:italic;opacity:.9}
  max-width:700px;
.sv-ph-item__blurb{font-size:.92em;line-height:1.65em;margin:.35em 0 0 0;opacity:.95}
  margin:1em auto;
.sv-ph-item__divider{height:1px;margin:.35rem 0 .55rem 0;background:rgba(0,0,0,0.18)}
}
.skin-theme-clientpref-night .sv-ph-item__divider{background:rgba(255,255,255,0.16)}
 
@media (prefers-color-scheme:dark){.skin-theme-clientpref-os .sv-ph-item__divider{background:rgba(255,255,255,0.16)}}
.sv-ph-head{
@media (prefers-color-scheme:light){.skin-theme-clientpref-os .sv-ph-item__divider{background:rgba(0,0,0,0.18)}}
  text-align:center;
@media (max-width:1024px){.sv-ph-grid{grid-template-columns:repeat(2,1fr)}.sv-ph-grid>.sv-ph-item:nth-of-type(n+3){display:none}}
  font-weight:800;
@media (max-width:640px){.sv-ph-grid{grid-template-columns:1fr;direction:ltr}.sv-ph-grid>.sv-ph-item:nth-of-type(n+2){display:none}}
  padding:10px 12px;
  margin:10px;
}
 
.sv-ph-pad{
  padding:.75rem;
}
 
.sv-ph-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  align-items:start;
  width:100%;
  direction:rtl;
}
 
.sv-ph-empty{
  grid-column:1/-1;
  opacity:.75;
  text-align:center;
  padding:1rem;
  direction:ltr;
}
 
/* -------------------------------------------------------------------------- */
/* 2) Card content */
/* -------------------------------------------------------------------------- */
 
.sv-ph-item{
  text-align:left;
  direction:ltr;
  padding:1rem 1.1rem .85rem;
  min-width:0;
  word-break:break-word;
}
 
.sv-ph-item__title{
  font-size:1.25em;
  font-weight:800;
  line-height:1.2;
  margin:-.1em 0 .35em 0;
}
 
.sv-ph-item__date{
  margin:.1em 0;
  font-size:.85em;
  font-style:italic;
  opacity:.9;
}
 
.sv-ph-item__blurb{
  font-size:.92em;
  line-height:1.65em;
  margin:.35em 0 0 0;
  opacity:.95;
}
 
.sv-ph-item__divider{
  height:1px;
  margin:.35rem 0 .55rem 0;
  background:rgba(0,0,0,0.18);
}
 
/* -------------------------------------------------------------------------- */
/* 3) Theme */
/* -------------------------------------------------------------------------- */
 
.skin-theme-clientpref-night .sv-ph-item__divider{
  background:rgba(255,255,255,0.16);
}
 
@media (prefers-color-scheme:dark){
  .skin-theme-clientpref-os .sv-ph-item__divider{
    background:rgba(255,255,255,0.16);
  }
}
 
@media (prefers-color-scheme:light){
  .skin-theme-clientpref-os .sv-ph-item__divider{
    background:rgba(0,0,0,0.18);
  }
}
 
/* -------------------------------------------------------------------------- */
/* 4) Responsive */
/* -------------------------------------------------------------------------- */
 
@media (max-width:1024px){
  .sv-ph-grid{
    grid-template-columns:repeat(2,1fr);
  }
 
  .sv-ph-grid > .sv-ph-item:nth-of-type(n+3){
    display:none;
  }
}
 
@media (max-width:640px){
  .sv-ph-grid{
    grid-template-columns:1fr;
    direction:ltr;
  }
 
  .sv-ph-grid > .sv-ph-item:nth-of-type(n+2){
    display:none;
  }
}