MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
Line 120: | Line 120: | ||
/* Frontpage stuff */ | /* Frontpage stuff */ | ||
.skill-wrapper { | |||
max-width: 1000px; | |||
margin: 0 auto; | |||
} | |||
.skill-grid { | .skill-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax( | grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); | ||
gap: | gap: 12px 18px; | ||
background: #f6f6f6; | background: #f6f6f6; | ||
padding: | padding: 20px; | ||
border-radius: | border-radius: 12px; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
color: #101418; | color: #101418; | ||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); | |||
} | } | ||
Line 134: | Line 140: | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
padding: | padding: 6px 10px; | ||
border-radius: | border-radius: 8px; | ||
transition: background 0.2s ease; | transition: background 0.2s ease; | ||
cursor: pointer; | cursor: pointer; | ||
Line 141: | Line 147: | ||
.skill-icon { | .skill-icon { | ||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 4px; | padding: 4px; | ||
margin-right: 10px; | margin-right: 10px; | ||
border-radius: | border-radius: 6px; | ||
width: 28px; | |||
height: 28px; | |||
flex-shrink: 0; | flex-shrink: 0; | ||
text-align: center; | text-align: center; | ||
font-size: 16px; | |||
} | } | ||
/* | /* Hover Backgrounds */ | ||
.skill-hitpoints:hover { background-color: #f2da85; } | .skill-hitpoints:hover { background-color: #f2da85; } | ||
.skill-accuracy:hover { background-color: #d6f47c; } | .skill-accuracy:hover { background-color: #d6f47c; } | ||
Line 167: | Line 178: | ||
.skill-smithing:hover { background-color: #ff7cf1; } | .skill-smithing:hover { background-color: #ff7cf1; } | ||
/* Always-colored icon boxes */ | |||
.skill-hitpoints .skill-icon { background-color: #f2da85; } | .skill-hitpoints .skill-icon { background-color: #f2da85; } | ||
.skill-accuracy .skill-icon { background-color: #d6f47c; } | .skill-accuracy .skill-icon { background-color: #d6f47c; } |