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 836: Line 836:
/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   Mechanics tab
   Mechanics tab
  - mirrors skill_scaling structure
  - left: compact 3x3 mod pill grid
  - right: single-column keyword rail
   -------------------------------------------------------------------------- */
   -------------------------------------------------------------------------- */


.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"]{
.sv-skill-tabs .sv-mech-panel{
   display:grid;
   display:grid;
   grid-template-columns:minmax(0, 1fr) minmax(0, 252px);
   grid-template-columns:minmax(0, 1fr) minmax(0, 220px);
   column-gap:16px;
   column-gap:16px;
   row-gap:12px;
   row-gap:12px;
Line 849: Line 846:
}
}


.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section{
.sv-skill-tabs .sv-mech-panel__mods,
.sv-skill-tabs .sv-mech-panel__keywords{
   min-width:0;
   min-width:0;
  max-width:100%;
}
}


.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:first-child{
.sv-skill-tabs .sv-mech-panel__mods{
   grid-column:1;
   grid-column:1;
  overflow:hidden;
}
}


.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:last-child{
.sv-skill-tabs .sv-mech-panel__keywords{
   grid-column:2;
   grid-column:2;
   margin-top:0;
   margin-top:0;
Line 863: Line 863:


/* Mods: compact 3x3 pill matrix */
/* Mods: compact 3x3 pill matrix */
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
.sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
   display:grid;
   display:grid;
   grid-template-columns:repeat(3, fit-content(110px));
   grid-template-columns:repeat(3, minmax(0, max-content));
   justify-content:start;
   justify-content:start;
   justify-items:start;
   justify-items:start;
  align-content:start;
   gap:8px 10px;
   gap:8px 10px;
  max-width:100%;
}
}


.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-cell{
.sv-skill-tabs .sv-mech-panel__mods .sv-kw-cell{
   width:auto;
   width:auto;
   min-width:92px;
   min-width:84px;
  max-width:100%;
   min-height:0;
   min-height:0;
   padding:7px 10px 6px;
   padding:7px 9px 6px;


   display:flex;
   display:flex;
Line 890: Line 894:
}
}


.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-label{
.sv-skill-tabs .sv-mech-panel__mods .sv-kw-label{
   font-weight:900;
   font-weight:900;
   font-size:10px;
   font-size:10px;
Line 899: Line 903:
}
}


.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-value{
.sv-skill-tabs .sv-mech-panel__mods .sv-kw-value{
   margin-top:4px;
   margin-top:4px;
   word-wrap:break-word;
   word-wrap:break-word;
Line 910: Line 914:
}
}


/* Keywords: oversized single-column rail */
/* Keywords: centered compact rail */
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills{
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{
   display:flex;
   display:flex;
   flex-direction:column;
   flex-direction:column;
   gap:10px;
  align-items:stretch;
   gap:8px;
}
}


.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill{
.sv-skill-tabs .sv-mech-keyword-pill{
   min-height:46px;
  position:relative;
   min-width:0;
   width:100%;
   width:100%;
   padding:10px 12px;
  min-height:38px;
   padding:8px 10px;


   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
   justify-content:flex-start;
   justify-content:center;
   text-align:left;
   text-align:center;


   border-radius:14px;
   border-radius:13px;
   border:1px solid rgba(75,99,136,0.62);
   border:1px solid rgba(75,99,136,0.58);
   background:#223248;
   background:#223248;
   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:inset 0 1px 0 rgba(255,255,255,0.04);
   box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.sv-skill-tabs .sv-mech-keyword-pill__label{
  display:block;
  min-width:0;
  width:100%;


   font-weight:900;
   font-weight:900;
   font-size:14px;
   font-size:13px;
   line-height:1.15;
   line-height:1.10;
   color:rgba(245,249,255,0.97);
   color:rgba(245,249,255,0.97);
  text-align:center;
}
.sv-skill-tabs .sv-mech-keyword-pill__hit{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:5;
  opacity:0;
}
.sv-skill-tabs .sv-mech-keyword-pill__hit .sv-def{
  display:block;
  width:100%;
  height:100%;
}
}


/* Toggle: larger keyword mode */
/* 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-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill,
.sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill.sv-pill--xl{
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{
   min-height:58px;
   min-height:46px;
   padding:14px 14px;
   padding:10px 12px;
   border-radius:16px;
   border-radius:15px;
}


   font-size:15px;
.sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill__label,
   line-height:1.18;
.sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl .sv-mech-keyword-pill__label{
   font-size:14px;
   line-height:1.14;
}
}


Line 1,055: Line 1,088:


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


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


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


   .sv-skill-meta{
   .sv-skill-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    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{
   .sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; }
    grid-template-columns:1fr;
  }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"]{
   .sv-skill-tabs .sv-mech-panel{
     grid-template-columns:minmax(0, 1fr) minmax(0, 228px);
     grid-template-columns:minmax(0, 1fr) minmax(0, 196px);
     column-gap:14px;
     column-gap:14px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
     grid-template-columns:repeat(3, fit-content(102px));
     grid-template-columns:repeat(3, minmax(0, max-content));
     gap:8px 8px;
     gap:8px 8px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-cell{
   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-cell{
     min-width:86px;
     min-width:80px;
     padding:6px 9px 5px;
     padding:6px 8px 5px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-value{
   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-value{ font-size:12px; }
    font-size:12px;
 
  .sv-skill-tabs .sv-mech-keyword-pill{
    min-height:36px;
    padding:7px 9px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill{
   .sv-skill-tabs .sv-mech-keyword-pill__label{ font-size:12px; }
 
  .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill,
  .sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{
     min-height:42px;
     min-height:42px;
     padding:9px 11px;
     padding:9px 10px;
    font-size:13px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills.sv-tab-pills--xl .sv-pill,
   .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill__label,
   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill.sv-pill--xl{
   .sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl .sv-mech-keyword-pill__label{ font-size:13px; }
    min-height:52px;
    padding:12px 13px;
    font-size:14px;
  }
}
}


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


   .sv-skill-icon{
   .sv-skill-icon{
Line 1,121: Line 1,143:
   }
   }


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


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


  /* Mechanics tab: collapse split layout to one column */
   .sv-skill-tabs .sv-mech-panel{
   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"]{
     grid-template-columns:1fr;
     grid-template-columns:1fr;
     row-gap:12px;
     row-gap:12px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:first-child,
   .sv-skill-tabs .sv-mech-panel__mods,
   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:last-child{
   .sv-skill-tabs .sv-mech-panel__keywords{ grid-column:1; }
    grid-column:1;
  }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-section:last-child{
   .sv-skill-tabs .sv-mech-panel__keywords{ margin-top:0; }
    margin-top:0;
  }


  /* Keep mods compact in a 3-column matrix on normal mobile */
   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
     grid-template-columns:repeat(3, minmax(0, max-content));
     grid-template-columns:repeat(3, fit-content(96px));
     gap:8px 8px;
     gap:8px 8px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-cell{
   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-cell{
     min-width:80px;
     min-width:76px;
     padding:6px 8px 5px;
     padding:6px 8px 5px;
     border-radius:11px;
     border-radius:11px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-label{
   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-label{
     font-size:9px;
     font-size:9px;
     line-height:1.04;
     line-height:1.04;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-value{
   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-value{
     margin-top:3px;
     margin-top:3px;
     font-size:12px;
     font-size:12px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills{
   .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills{ gap:7px; }
     gap:8px;
 
  .sv-skill-tabs .sv-mech-keyword-pill{
    min-height:34px;
     padding:7px 9px;
    border-radius:12px;
  }
 
  .sv-skill-tabs .sv-mech-keyword-pill__label{
    font-size:12px;
    line-height:1.08;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill{
   .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill,
  .sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{
     min-height:40px;
     min-height:40px;
     padding:9px 11px;
     padding:9px 10px;
     border-radius:13px;
     border-radius:14px;
    font-size:13px;
    line-height:1.12;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills.sv-tab-pills--xl .sv-pill,
   .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill__label,
   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill.sv-pill--xl{
   .sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl .sv-mech-keyword-pill__label{ font-size:13px; }
    min-height:48px;
    padding:11px 12px;
    border-radius:15px;
    font-size:14px;
  }


   .sv-gi-card .sv-reqrow,
   .sv-gi-card .sv-reqrow,
Line 1,238: Line 1,250:
   }
   }


   .sv-skill-level{
   .sv-skill-level{ padding:9px 10px; }
    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{
   .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{ font-size:12px; }
    font-size:12px;
  }


   .sv-skill-card .sv-skill-meta .sv-pill,
   .sv-skill-card .sv-skill-meta .sv-pill,
Line 1,264: Line 1,272:
   }
   }


  /* Mechanics tab: reduce mods grid to 2 columns on very small screens */
   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-grid{
   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-grid{
     grid-template-columns:repeat(2, minmax(0, max-content));
     grid-template-columns:repeat(2, fit-content(96px));
     gap:8px 8px;
     gap:8px 8px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-kw-cell{
   .sv-skill-tabs .sv-mech-panel__mods .sv-kw-cell{
     min-width:78px;
     min-width:74px;
     padding:6px 8px 5px;
     padding:6px 7px 5px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill{
   .sv-skill-tabs .sv-mech-keyword-pill{
     min-height:38px;
     min-height:32px;
     padding:8px 10px;
     padding:6px 8px;
    font-size:12px;
   }
   }


   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-tab-pills.sv-tab-pills--xl .sv-pill,
   .sv-skill-tabs .sv-mech-keyword-pill__label{ font-size:11px; }
   .sv-skill-tabs .sv-tabpanel[data-panel="mechanics"] .sv-pill.sv-pill--xl{
 
     min-height:44px;
  .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill,
     padding:10px 11px;
   .sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl{
    font-size:13px;
     min-height:36px;
     padding:8px 9px;
   }
   }
  .sv-skill-tabs .sv-mech-panel__keywords .sv-tab-pills.sv-tab-pills--xl .sv-mech-keyword-pill__label,
  .sv-skill-tabs .sv-mech-keyword-pill.sv-pill--xl .sv-mech-keyword-pill__label{ font-size:12px; }
}
}
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"