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

Module:GameInfo/styles.css: Difference between revisions

From SpiritVale Wiki
More actions
← Older editNewer edit →
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 793: Line 793:
   ========================================================================== */
   ========================================================================== */


.sv-skill-tabs{ margin:10px 0 0; }
.sv-skill-tabs{
  margin:10px 0 0;
}
 
.sv-skill-tabs .sv-tabs-panels{
  margin-top:10px;
}
 
.sv-skill-tabs .sv-tabpanel{
  min-width:0;
}
 
.sv-skill-tabs .sv-tab-empty{
  padding:14px 12px;
  text-align:center;
 
  border-radius:14px;
  border:1px solid rgba(59,75,99,0.78);
  background:#182130;
 
  font-weight:900;
  font-size:13px;
  color:rgba(140,156,184,0.82);
}
 
/* Section framing inside panels */
.sv-skill-tabs .sv-tab-section + .sv-tab-section{
  margin-top:12px;
}
 
.sv-skill-tabs .sv-tab-section-title{
  margin:0 0 8px;
 
  font-weight:900;
  font-size:11px;
  line-height:1.05;
  letter-spacing:0.22px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.94);
}
 
/* --------------------------------------------------------------------------
  Mechanics tab
  - mirrors skill_scaling structure
  - left: 3x3 mod pill grid
  - right: single-column keyword rail
  -------------------------------------------------------------------------- */


.sv-gi-card .sv-kw-grid,
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"]{
.sv-skill-card .sv-kw-grid{
   display:grid;
   display:grid;
   grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-columns:minmax(0, 1fr) minmax(0, 252px);
   gap:10px;
  column-gap:16px;
  row-gap:12px;
  align-items:start;
}
 
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section{
  min-width:0;
}
 
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:first-child{
  grid-column:1;
}
 
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:last-child{
  grid-column:2;
}
 
/* Mods: 3x3 pill matrix */
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
  display:grid;
   grid-template-columns:repeat(3, minmax(0, 1fr));
   gap:8px;
  justify-items:center;
}
}


.sv-gi-card .sv-kw-cell,
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-cell{
.sv-skill-card .sv-kw-cell{
  width:100%;
   padding:10px 10px 9px;
  min-width:70px;
  min-height:25px;
   padding:8px 6px;
 
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;


   border-radius:14px;
   border-radius:12px;
   border:1px solid rgba(59,75,99,0.85);
   border:1px solid rgba(59,75,99,0.85);
   background:#273449;
   background:#1a2434;
   background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   background-image:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
}


.sv-gi-card .sv-kw-label,
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-label{
.sv-skill-card .sv-kw-label{
   font-weight:900;
   font-weight:900;
   font-size:12px;
   font-size:10px;
   letter-spacing:0.25px;
  line-height:1.10;
   letter-spacing:0.14px;
   text-transform:uppercase;
   text-transform:uppercase;
   color:rgba(182,198,224,0.95);
   color:rgba(182,198,224,0.95);
}
}


.sv-gi-card .sv-kw-value,
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-value{
.sv-skill-card .sv-kw-value{
   margin-top:5px;
   margin-top:6px;
   word-wrap:break-word;
   word-wrap:break-word;
  overflow-wrap:anywhere;


   font-weight:900;
   font-weight:900;
   font-size:15px;
   font-size:14px;
   color:rgba(245,249,255,0.96);
  line-height:1.02;
   color:rgba(245,249,255,0.98);
}
}


.sv-gi-card .sv-tab-pills,
/* Keywords: oversized single-column rail */
.sv-skill-card .sv-tab-pills{
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills{
   display:flex;
   display:flex;
   flex-wrap:wrap;
   flex-direction:column;
   gap:8px;
   gap:10px;
}
 
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill{
  min-height:46px;
  width:100%;
  padding:10px 12px;
 
  justify-content:flex-start;
  text-align:left;
 
  border-radius:14px;
  border:1px solid rgba(75,99,136,0.62);
  background:#223248;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
 
  font-weight:900;
  font-size:14px;
  line-height:1.15;
  color:rgba(245,249,255,0.97);
}
 
/* Toggle: larger keyword mode */
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills.sv-tab-pills--xl .sv-pill,
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill.sv-pill--xl{
  min-height:58px;
  padding:14px 14px;
  border-radius:16px;
 
  font-size:15px;
  line-height:1.18;
}
}


/* ==========================================================================
/* ==========================================================================
   9) EFFECT / EVENT CARDS
   9) EFFECT CARDS
   ========================================================================== */
   ========================================================================== */


Line 944: Line 1,051:


   .sv-gi-top,
   .sv-gi-top,
   .sv-skill-top{ padding:12px 16px 4px; }
   .sv-skill-top{
    padding:12px 16px 4px;
  }


   .sv-gi-bottom,
   .sv-gi-bottom,
   .sv-skill-bottom{ padding:10px 16px 12px; }
   .sv-skill-bottom{
    padding:10px 16px 12px;
  }


   .sv-skill-title{ font-size:20px; }
   .sv-skill-title{
    font-size:20px;
  }


   .sv-skill-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
   .sv-skill-meta{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }


   .sv-gi-card .sv-ref-grid,
   .sv-gi-card .sv-ref-grid,
   .sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; }
   .sv-skill-card .sv-ref-grid{
    grid-template-columns:1fr;
  }
}
}


@media (max-width:500px){
@media (max-width:500px){
   .sv-skill-head{ gap:10px; }
   .sv-skill-head{
    gap:10px;
  }


   .sv-skill-icon{
   .sv-skill-icon{
Line 966: Line 1,085:
   }
   }


   .sv-skill-title{ font-size:18px; }
   .sv-skill-title{
   .sv-skill-desc{ font-size:13px; }
    font-size:18px;
  }
 
   .sv-skill-desc{
    font-size:13px;
  }


   .sv-gi-card .sv-scaling-grid,
   .sv-gi-card .sv-scaling-grid,
   .sv-skill-card .sv-scaling-grid{ grid-template-columns:1fr; }
   .sv-skill-card .sv-scaling-grid{
    grid-template-columns:1fr;
  }


   .sv-gi-card .sv-kw-grid,
  /* Mechanics tab: collapse split layout to one column */
   .sv-skill-card .sv-kw-grid{ grid-template-columns:1fr; }
   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"]{
    grid-template-columns:1fr;
    row-gap:12px;
  }
 
  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:first-child,
   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:last-child{
    grid-column:1;
  }
 
  /* Keep mods as a 3-column matrix on normal mobile */
  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }


   .sv-gi-card .sv-reqrow,
   .sv-gi-card .sv-reqrow,
Line 1,022: Line 1,161:
   }
   }


   .sv-skill-level{ padding:9px 10px; }
   .sv-skill-level{
    padding:9px 10px;
  }


   .sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
   .sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
   .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{ font-size:12px; }
   .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{
    font-size:12px;
  }


   .sv-skill-card .sv-skill-meta .sv-pill,
   .sv-skill-card .sv-skill-meta .sv-pill,
Line 1,042: Line 1,185:
     flex:1 1 100%;
     flex:1 1 100%;
     max-width:100%;
     max-width:100%;
  }
  /* Mechanics tab: reduce mods grid to 2 columns on very small screens */
  .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
   }
   }
}
}
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"