MediaWiki:Common.css: Difference between revisions
add more wiki.gg commons |
testing better social view layout |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* Remove the logo and wordmark from the Timeless skin header */ | |||
.skin-timeless #p-logo, .skin-vector-legacy #p-logo { | |||
display: none !important; | |||
} | |||
.fplinks { | .fplinks { | ||
| Line 1,333: | Line 1,338: | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
justify-content: space-around; | justify-content: space-around; | ||
} | |||
/* Main page category thumbnails */ | |||
.mpheader4 { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: flex-start; | |||
border: 1px var(--mp-border-color) solid; | |||
border-radius: 5px; | |||
margin: 0.2em; | |||
padding: 0.5em; | |||
width: 150px; | |||
box-sizing: border-box; | |||
gap: 8px; | |||
} | |||
/* Thumbnail image */ | |||
.mpheader4 img { | |||
width: 100px; | |||
height: 100px; | |||
object-fit: contain; | |||
} | |||
/* Category link */ | |||
.mpheader4 a { | |||
text-align: center; | |||
} | |||
/* Responsive social media cards */ | |||
.social-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); | |||
gap: 12px; | |||
width: 100%; | |||
max-width: 650px; | |||
margin: 0 auto; | |||
box-sizing: border-box; | |||
} | |||
.social-card { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 8px; | |||
min-width: 0; | |||
padding: 12px 6px; | |||
box-sizing: border-box; | |||
border: 1px solid var(--mp-border-color, #aaa); | |||
border-radius: 8px; | |||
text-align: center; | |||
overflow-wrap: anywhere; | |||
} | |||
.social-card img { | |||
width: 64px; | |||
height: 64px; | |||
max-width: 100%; | |||
object-fit: contain; | |||
} | |||
.social-card a { | |||
text-decoration: none; | |||
font-weight: bold; | |||
} | |||
.social-card a:hover { | |||
text-decoration: underline; | |||
} | |||
/* Smaller cards on narrow mobile screens */ | |||
@media screen and (max-width: 480px) { | |||
.social-grid { | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 6px; | |||
} | |||
.social-card { | |||
padding: 8px 3px; | |||
} | |||
.social-card img { | |||
width: 48px; | |||
height: 48px; | |||
} | |||
} | } | ||