Module:GameInfo/styles.css: Difference between revisions

/* Module:GameInfo/styles.css */

/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */

/* ----------------------------------------------------------------------------

.sv-gi-card,

   max-width: 600px;

   margin: 18px auto;

/* Locked split zones */

.sv-gi-top,

   padding: 14px 14px 4px;

   border-radius: 22px 22px 0 0;

.sv-gi-bottom,

   padding: 10px 14px 12px;

   border-top: 1px solid rgba(255, 255, 255, 0.050);

.sv-gi-card *,

.sv-skill-card,

   box-sizing: border-box;

}

.sv-gi-card a,

   text-decoration: none;

}

.sv-gi-card a:hover,

   text-decoration: underline;

}

   padding: 10px 12px;

   border-radius: 14px;

}

/* IMPORTANT: Phase 4.1 hiding contract */

   display: none !important;

}

   display: none !important;

}

/* Remove default details marker (safe even if no <details> used) */

.sv-gi-card summary,

   list-style: none;

}

   display: inline-flex;

   align-items: center;

   justify-content: center;

   border-radius: 999px;

   font-size: 12px;

   line-height: 1;

}

/* ----------------------------------------------------------------------------

---------------------------------------------------------------------------- */

.sv-gi-card .sv-pill,

   display: inline-flex;

   align-items: center;

   border-radius: 999px;

   border: 1px solid rgba(255, 255, 255, 0.050);

   white-space: nowrap;

}

.sv-gi-card .sv-img,

   display: inline-flex;

   align-items: center;

.sv-gi-card .sv-img img,

   display: block;

   border-radius: 10px;

.sv-skill-card .sv-disclose-btn:focus,

.sv-gi-card .sv-tab:focus,

   outline: 2px solid rgba(170, 220, 255, 0.55);

   outline-offset: 2px;

---------------------------------------------------------------------------- */

   display: flex;

   align-items: flex-start;

}

   flex: 0 0 auto;

   width: 64px;

}

   min-width: 0;

   flex: 1 1 auto;

}

   display: flex;

   align-items: center;

   gap: 10px;

}

   font-weight: 900;

   letter-spacing: 0.2px;

}

   margin-top: 6px;

   font-size: 14px;

}

/* ----------------------------------------------------------------------------

---------------------------------------------------------------------------- */

.sv-gi-card .sv-tip,

   position: relative;

   flex: 0 0 auto;

.sv-gi-card .sv-tip-btn,

   display: inline-flex;

   align-items: center;

.sv-gi-card .sv-tip-btn:hover,

   background: rgba(255,255,255,0.06);

}

.sv-skill-card .sv-tip-btn[aria-expanded="true"],

.sv-gi-card .sv-disclose-btn[aria-expanded="true"],

   background: rgba(255,255,255,0.07);

   border-color: rgba(255,255,255,0.10);

.sv-gi-card .sv-ico,

   display: inline-flex;

   align-items: center;

   font-size: 12px;

   line-height: 1;

   background: rgba(0,0,0,0.12);

   border: 1px solid rgba(255,255,255,0.08);

/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */

.sv-gi-card .sv-tip-pop,

   display: block;

   position: absolute;

.sv-gi-card .sv-tip-pop-head,

   display: flex;

   align-items: center;

.sv-gi-card .sv-tip-pop-title,

   font-weight: 900;

   font-size: 13px;

.sv-gi-card .sv-tip-pop-hint,

   font-size: 12px;

   color: rgba(210,224,245,0.65);

.sv-gi-card .sv-tip-pop-body,

   padding: 10px 12px;

   font-size: 13px;

}

/* ----------------------------------------------------------------------------

---------------------------------------------------------------------------- */

   display: grid;

}

.sv-gi-card .sv-meta-card,

   display: flex;

   gap: 10px;

   border-radius: 16px;

   background: rgba(255,255,255,0.03);

}

.sv-gi-card .sv-meta-icon,

   display: flex;

   align-items: center;

.sv-gi-card .sv-meta-icon img,

}

.sv-gi-card .sv-meta-textwrap,

   flex: 1 1 auto;

}

.sv-gi-card .sv-meta-text,

}

.sv-gi-card .sv-meta-lines span,

}

/* ----------------------------------------------------------------------------

---------------------------------------------------------------------------- */

.sv-gi-card .sv-reqrow,

}

.sv-gi-card .sv-disclose,

   position: relative;

}

.sv-gi-card .sv-disclose-btn,

   align-items: center;

   border: 1px solid rgba(255,255,255,0.06);

   cursor: pointer;

}

.sv-gi-card .sv-disclose-btn:hover,

}

.sv-gi-card .sv-disclose-label,

}

.sv-gi-card .sv-disclose-count,

}

.sv-gi-card .sv-disclose-pop,

   display: block;

   position: absolute;

   width: 420px;

   max-width: 92vw;

.sv-gi-card .sv-disclose-pop-head,

   display: flex;

   align-items: center;

.sv-gi-card .sv-disclose-pop-title,

   font-weight: 900;

   font-size: 13px;

.sv-gi-card .sv-disclose-pop-hint,

   font-size: 12px;

   color: rgba(210,224,245,0.65);

.sv-gi-card .sv-disclose-list,

   padding: 10px 12px 12px;

   list-style: none;

}

.sv-gi-card .sv-disclose-list li,

   padding: 6px 0;

}

.sv-gi-card .sv-disclose-list li:first-child,

   padding-top: 0;

}

.sv-gi-card .sv-disclose-group-title,

   font-weight: 900;

}

/* ----------------------------------------------------------------------------

---------------------------------------------------------------------------- */

.sv-gi-card .sv-level-ui,

   display: flex;

   align-items: baseline;

}

.sv-gi-card .sv-level-label,

   font-weight: 900;

}

.sv-gi-card .sv-level-num,

   font-weight: 900;

}

.sv-gi-card .sv-level-slider,

   position: relative;

   border-radius: 999px;

}

.sv-gi-card .sv-level-track,

   position: absolute;

}

.sv-gi-card .sv-level-fill,

   width: 0%;

}

.sv-gi-card .sv-level-thumb,

   position: absolute;

   top: 50%;

   width: 18px;

   height: 18px;

   border-radius: 999px;

   background: rgba(245,250,255,0.92);

}

.sv-gi-card .sv-level-range--custom:focus,

}

.sv-gi-card .sv-level-ticklabels,

   display: flex;

   justify-content: space-between;

}

/* ----------------------------------------------------------------------------

---------------------------------------------------------------------------- */

}

   border-radius: 16px;

   background: rgba(255,255,255,0.03);

}

}

   font-weight: 900;

   font-size: 12px;

}

}

   font-size: 13px;

}

}

.sv-gi-card .sv-core-row,

   gap: 10px;

}

}

}

   font-weight: 900;

   font-size: 12px;

}

}

/* ----------------------------------------------------------------------------

---------------------------------------------------------------------------- */

}

   display: flex;

   gap: 8px;

.sv-gi-card .sv-tab,

   padding: 7px 10px;

   cursor: pointer;

}

.sv-gi-card .sv-tab:hover,

}

.sv-gi-card .sv-tab[aria-selected="true"],

}

   margin-top: 6px;

}

/* ----------------------------------------------------------------------------

---------------------------------------------------------------------------- */

.sv-gi-card .sv-ref-grid,

   display: grid;

   grid-template-columns: repeat(2, minmax(0, 1fr));

}

.sv-gi-card .sv-ref-card,

   border-radius: 16px;

   background: rgba(255,255,255,0.03);

}

}

.sv-gi-card .sv-ref-text,

}

}

.sv-gi-card .sv-ref-stats,

   display: flex;

   flex-wrap: wrap;

}

.sv-gi-card .sv-ref-stat,

   display: inline-flex;

   align-items: center;

   border-radius: 999px;

   font-size: 12px;

}

   font-weight: 900;

}

/* ----------------------------------------------------------------------------

---------------------------------------------------------------------------- */

@media (max-width: 720px) {

     margin: 14px 10px;

     border-radius: 20px;

   }

     padding: 12px 12px 4px;

     border-radius: 20px 20px 0 0;

   }

     padding: 10px 12px 12px;

     border-radius: 0 0 20px 20px;

   }

     font-size: 20px;

   }

     grid-template-columns: repeat(2, minmax(0, 1fr));

   }

     grid-template-columns: repeat(2, minmax(0, 1fr));

   }

     grid-template-columns: 1fr;

   }

}

@media (max-width: 520px) {

   }

     width: 56px;

     height: 56px;

   }

   }

   }

     grid-template-columns: 1fr;