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

Template page
More actions
Created page with "→Container (matches PatchNav border vibe): .sv-highlights-wrap { border: 2px solid #372b54; border-radius: 10px; padding: 0.75rem; background: transparent; } →Grid: 3 columns desktop: .sv-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; grid-auto-rows: auto; align-items: start; width: 100%; direction: rtl; →keeps visual order consistent with your previous layout: } →Empty state inside grid: .sv-empty {..."
 
No edit summary
Tags: Mobile edit Mobile web edit
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Container (matches PatchNav border vibe) */
/* SpiritVale Wiki — Template:PatchHighlights/styles.css */
.sv-highlights-wrap {
/* Patch highlight cards and responsive grid styles. */
   border: 2px solid #372b54;
/* -------------------------------------------------------------------------- */
   border-radius: 10px;
/* Canonical ownership map                                                    */
   padding: 0.75rem;
/* -------------------------------------------------------------------------- */
   background: transparent;
/* This sheet owns only the PatchHighlights namespace: the wrap, grid, cards, */
/* and any responsive changes that are specific to PatchHighlights behavior.  */
/*                                                                            */
/* It does NOT own sitewide tokens, shared utilities, Citizen shell styling,  */
/* or breakpoint definitions. Those remain in Common.css / Citizen.css.        */
/*                                                                            */
/* Responsive cleanup note: PatchHighlights now uses the canonical breakpoint  */
/* ladder directly. It serves as a clean example of a module moving from      */
/* ad hoc thresholds into the shared responsive vocabulary.                    */
/* -------------------------------------------------------------------------- */
/* Canonical ladder                                                            */
/* -------------------------------------------------------------------------- */
/* - default: <640px                                                          */
/* - sm:      >=640px                                                          */
/* - md:      >=768px                                                          */
/* - lg:      >=1024px                                                        */
/* - xl:      >=1280px                                                        */
/* - 2xl:    >=1536px                                                        */
/* -------------------------------------------------------------------------- */
 
 
/* -------------------------------------------------------------------------- */
/* 1) Layout */
/* -------------------------------------------------------------------------- */
 
.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;
}
 
.sv-ph-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  align-items:start;
  width:100%;
  direction:ltr;
}
 
.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;
}
}


/* Grid: 3 columns desktop */
.sv-ph-item__date{
.sv-highlights {
   margin:.1em 0;
   display: grid;
   font-size:.85em;
   grid-template-columns: repeat(3, 1fr);
   font-style:italic;
   gap: 1rem;
   opacity:.9;
  grid-auto-rows: auto;
   align-items: start;
  width: 100%;
  direction: rtl; /* keeps visual order consistent with your previous layout */
}
}


/* Empty state inside grid */
.sv-ph-item__blurb{
.sv-empty {
   font-size:.92em;
   grid-column: 1 / -1;
   line-height:1.65em;
  opacity: .75;
   margin:.35em 0 0 0;
   text-align: center;
   opacity:.95;
   padding: 1rem;
   direction: ltr;
}
}


/* Card base */
.sv-ph-item__divider{
.sv-card {
   height:1px;
   text-align: left;
   margin:.35rem 0 .55rem 0;
   padding: 1rem 1.5rem 0.75rem;
   background:rgba(0,0,0,0.18);
   direction: ltr;
  border-radius: 8px;
}
}


/* Card title + divider + date + blurb */
/* -------------------------------------------------------------------------- */
.sv-card__title {
/* 3) Theme */
  font-size: 1.4em;
/* -------------------------------------------------------------------------- */
  font-weight: 700;
 
  line-height: 1.2;
.skin-theme-clientpref-night .sv-ph-item__divider{
   margin: -0.2em 0 0.3em 0;
   background:rgba(255,255,255,0.16);
}
}


.sv-card__divider {
@media (prefers-color-scheme:dark){
  height: 1px;
  .skin-theme-clientpref-os .sv-ph-item__divider{
  background: rgba(55, 43, 84, 0.25);
    background:rgba(255,255,255,0.16);
   margin: 0.35rem 0 0.5rem 0;
   }
}
 
@media (prefers-color-scheme:light){
  .skin-theme-clientpref-os .sv-ph-item__divider{
    background:rgba(0,0,0,0.18);
  }
}
}


.sv-card__date {
/* -------------------------------------------------------------------------- */
  margin: .1em 0;
/* 4) Responsive                                                              */
  font-size: .85em;
/* -------------------------------------------------------------------------- */
  font-style: italic;
/* default (<640px): single featured card.                                     */
  color: var(--text-color);
/* sm-md (>=640px): two-up grid with two cards visible.                       */
/* lg+ (>=1024px): three-up grid with three cards visible.                    */
 
.sv-ph-grid > .sv-ph-item:nth-of-type(n+2){
  display:none;
}
}


.sv-card__blurb {
@media (min-width:640px){
  font-size: .9em;
  .sv-ph-grid{
   line-height: 1.75em;
    grid-template-columns:repeat(2,1fr);
   color: var(--text-color);
    direction:rtl;
   margin: .3em 0 0 0;
   }
 
  .sv-ph-grid > .sv-ph-item:nth-of-type(n+2){
    display:block;
   }
 
  .sv-ph-grid > .sv-ph-item:nth-of-type(n+3){
    display:none;
   }
}
}


/* Mobile: show only the newest card, 1 column, normal LTR */
@media (min-width:1024px){
@media (max-width: 640px) {
   .sv-ph-grid{
   .sv-highlights {
     grid-template-columns:repeat(3,1fr);
     grid-template-columns: 1fr;
    direction: ltr;
   }
   }
   .sv-highlights > .sv-card:not(:first-child) {
 
     display: none;
   .sv-ph-grid > .sv-ph-item:nth-of-type(n+3){
     display:block;
   }
   }
}
}
Retrieved from "https://spiritvale.info/wiki/Template:PatchHighlights/styles.css"