Module:GameInfo/styles.css: Difference between revisions
From SpiritVale Wiki
More actions
No edit summary Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| Line 302: | Line 302: | ||
display:grid; | display:grid; | ||
grid-template-columns:repeat(4, minmax(0, 1fr)); | grid-template-columns:repeat(4, minmax(0, 1fr)); | ||
gap: | gap:8px; | ||
margin:8px 0 10px; | margin:8px 0 10px; | ||
} | } | ||
| Line 311: | Line 311: | ||
width:100%; | width:100%; | ||
justify-content:flex-start; | justify-content:flex-start; | ||
gap: | gap:8px; | ||
padding: | padding:7px 10px; | ||
border-radius: | border-radius:999px; | ||
border:1px solid rgba(59,75,99,0.85); | border:1px solid rgba(59,75,99,0.85); | ||
background:#273449; | background:#273449; | ||
| Line 320: | Line 320: | ||
font-weight:900; | font-weight:900; | ||
font-size: | font-size:13px; | ||
line-height:1.05; | |||
text-transform:none; | text-transform:none; | ||
letter-spacing:0; | letter-spacing:0.1px; | ||
color:rgba(245,249,255,0.96); | color:rgba(245,249,255,0.96); | ||
} | } | ||
| Line 329: | Line 330: | ||
.sv-gi-card .sv-meta-card, | .sv-gi-card .sv-meta-card, | ||
.sv-skill-card .sv-meta-card{ | .sv-skill-card .sv-meta-card{ | ||
position:relative; /* for full-pill def hitbox */ | |||
display:flex; | display:flex; | ||
align-items:center; | align-items:center; | ||
gap: | gap:8px; | ||
padding: | padding:7px 10px; | ||
border-radius: | border-radius:999px; | ||
border:1px solid rgba(59,75,99,0.85); | border:1px solid rgba(59,75,99,0.85); | ||
background:#273449; | background:#273449; | ||
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.05), 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-gi-card .sv-meta-card:hover, | |||
.sv-skill-card .sv-meta-card:hover{ | |||
background:#2e3f59; | |||
} | } | ||
| Line 343: | Line 350: | ||
.sv-skill-card .sv-meta-icon{ | .sv-skill-card .sv-meta-icon{ | ||
flex:0 0 auto; | flex:0 0 auto; | ||
width: | width:24px; | ||
height: | height:24px; | ||
border-radius: | border-radius:999px; | ||
border:1px solid rgba(75,99,136,0.55); | border:1px solid rgba(75,99,136,0.55); | ||
background:#0f172a; | background:#0f172a; | ||
| Line 364: | Line 371: | ||
font-weight:900; | font-weight:900; | ||
color:rgba(245,249,255,0.96); | color:rgba(245,249,255,0.96); | ||
font-size: | font-size:13px; | ||
line-height:1. | line-height:1.05; | ||
letter-spacing:0. | letter-spacing:0.1px; | ||
min-width:0; | min-width:0; | ||
word-wrap:break-word; | word-wrap:break-word; | ||
| Line 374: | Line 381: | ||
.sv-skill-card .sv-meta-lines span{ | .sv-skill-card .sv-meta-lines span{ | ||
display:block; | display:block; | ||
} | |||
/* Visible meta text should look like plain label text (interaction is on pill hitbox) */ | |||
.sv-gi-card .sv-meta-text .sv-def, | |||
.sv-skill-card .sv-meta-text .sv-def{ | |||
cursor:default; | |||
} | |||
.sv-gi-card .sv-meta-text .sv-def-text, | |||
.sv-skill-card .sv-meta-text .sv-def-text{ | |||
color:inherit; | |||
border-bottom:none; | |||
} | |||
/* Second line (qualifier) smaller + softer */ | |||
.sv-gi-card .sv-meta-text .sv-meta-lines span + span, | |||
.sv-skill-card .sv-meta-text .sv-meta-lines span + span{ | |||
margin-top:2px; | |||
font-size:11px; | |||
font-weight:800; | |||
opacity:0.90; | |||
letter-spacing:0.12px; | |||
} | |||
/* Full-pill Definitions interaction overlay (rendered by Skills.lua) */ | |||
.sv-gi-card .sv-meta-hit, | |||
.sv-skill-card .sv-meta-hit{ | |||
position:absolute; | |||
top:0; | |||
right:0; | |||
bottom:0; | |||
left:0; | |||
z-index:5; | |||
opacity:0; | |||
} | |||
.sv-gi-card .sv-meta-hit .sv-def, | |||
.sv-skill-card .sv-meta-hit .sv-def{ | |||
display:block; | |||
width:100%; | |||
height:100%; | |||
} | } | ||