6,558
edits
MediaWiki:Mobile.css: Difference between revisions
no edit summary
No edit summary |
No edit summary |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 853: | Line 853: | ||
} | } | ||
.tweet-header-image img { | .tweet > .tweet-header .tweet-header-image img { | ||
border-radius: 100%; | border-radius: 100%; | ||
max-width: 48px; | max-width: 48px!important; | ||
width: 48px !important; | width: 48px !important; | ||
height: 48px !important; | height: 48px !important; | ||
| Line 895: | Line 895: | ||
/* Keep the quoted card look but without changing fonts */ | /* Keep the quoted card look but without changing fonts */ | ||
.tweet-quote { | .tweet-quote { | ||
padding-top: 0.75rem; | |||
} | |||
.tweet-quote .tweet { | |||
border-radius: 10px; | border-radius: 10px; | ||
background-color: #f9f9f9; | background-color: #f9f9f9; | ||
} | } | ||
| Line 908: | Line 906: | ||
width: 42px !important; | width: 42px !important; | ||
height: 42px !important; | height: 42px !important; | ||
} | |||
/* Tweet media */ | |||
.tweet-media { | |||
display: grid; | |||
gap: 6px; | |||
margin-top: 8px; | |||
} | |||
.tweet-media.count-1 { grid-template-columns: 1fr; } | |||
.tweet-media.count-2 { grid-template-columns: 1fr 1fr; } | |||
.tweet-media.count-3 { grid-template-columns: 1fr 1fr; } | |||
.tweet-media.count-4 { grid-template-columns: 1fr 1fr; } | |||
/* Make the first image span full width in a 3-image layout (2x1 + 1x2) */ | |||
.tweet-media.count-3 > :first-child { grid-column: 1 / -1; } | |||
/* Ensure images fill their grid cell */ | |||
.tweet-media img { | |||
width: 100%; | |||
height: auto; | |||
display: block; | |||
border-radius: 6px; | |||
object-fit: contain; | |||
} | |||
/* Tweet Thread */ | |||
.tweet-thread > .tweet { | |||
display: grid; | |||
grid-template-areas: "header date" "content content" "media media" "quote quote"; | |||
grid-template-columns: min-content 1fr; | |||
margin: 0 0 0.25em; | |||
padding: 0; | |||
border: none; | |||
} | |||
.tweet-thread > .tweet > .tweet-header { | |||
grid-area: header; | |||
margin: 0 0 0.25rem; | |||
} | |||
.tweet-thread > .tweet > .tweet-content { | |||
grid-area: content; | |||
margin-left: 23px; | |||
padding-left: 22px; | |||
border-left: 2px solid #ced9de; | |||
} | |||
.tweet-thread > .tweet > .tweet-content p:first-child { | |||
margin: 0 0 0.5em; | |||
} | |||
.tweet-thread > .tweet > .tweet-timestamp { | |||
grid-area: date; | |||
align-items: start; | |||
margin: 0; | |||
} | |||
.tweet-thread > .tweet > .tweet-media { | |||
grid-area: media; | |||
margin-left: 23px; | |||
margin-top: 0; | |||
padding-left: 22px; | |||
padding-top: 0.25em; | |||
padding-bottom: 0.25em; | |||
border-left: 2px solid #ced9de; | |||
} | |||
.tweet-thread > .tweet > .tweet-quote { | |||
grid-area: quote; | |||
margin-left: 23px; | |||
padding-left: 22px; | |||
padding-top: 0.75rem; | |||
padding-bottom: 0.75rem; | |||
border-left: 2px solid #ced9de; | |||
} | } | ||