6,558
edits
MediaWiki:Common.css: Difference between revisions
no edit summary
No edit summary |
No edit summary |
||
| (43 intermediate revisions by 2 users not shown) | |||
| Line 1,098: | Line 1,098: | ||
.tweet-header { | .tweet-header { | ||
display: flex; | display: flex; | ||
gap: | gap: 0.75rem; | ||
margin: 0 0 | margin: 0 0 0.5rem; | ||
} | } | ||
.tweet-header-image | .tweet-header-image p { | ||
margin: 0; | margin: 0; | ||
} | } | ||
| Line 1,112: | Line 1,111: | ||
width: 48px !important; | width: 48px !important; | ||
height: 48px !important; | height: 48px !important; | ||
} | |||
.tweet-header-name { | |||
display: flex; | |||
flex-direction: column; | |||
line-height: 1.4; | |||
} | } | ||
.tweet-header-name a.external { | .tweet-header-name a.external { | ||
background-image: none; | background-image: none; | ||
} | } | ||
| Line 1,131: | Line 1,130: | ||
.tweet-username { | .tweet-username { | ||
color: #555; | color: #555 !important; | ||
font-size: 0.85rem; | font-size: 0.85rem; | ||
line-height: 1.2; | line-height: 1.2; | ||
margin-top: 0.15rem; | margin-top: 0.15rem; | ||
} | |||
.tweet-display-name a.external { | |||
color: #000 !important; | |||
font-weight: bold; | |||
text-decoration: none; | |||
} | |||
.tweet-display-name:hover a.external { | |||
text-decoration: underline; | |||
} | |||
/* Keep the quoted card look but without changing fonts */ | |||
.tweet-quote { | |||
padding-top: 0.75rem; | |||
} | |||
.tweet-quote .tweet { | |||
border-radius: 10px; | |||
background-color: #f9f9f9; | |||
} | |||
.tweet-quote .tweet-header-image img { | |||
width: 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; | |||
} | |||
/* 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; | |||
} | } | ||