Template:Neighbor Stories/styles.css: Difference between revisions
Appearance
Cleared both sides of hr. Added light background and padding for story text |
mNo edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.neighbor-story { | |||
margin-bottom: 1.5em; | |||
} | |||
.neighbor-story .mw-heading2 { | .neighbor-story .mw-heading2 { | ||
margin-top: 1em; | margin-top: 1em; | ||
} | } | ||
/* Image */ | |||
.neighbor-story-image { | .neighbor-story-image { | ||
border-radius: 20px; | border-radius: 20px; | ||
| Line 17: | Line 22: | ||
figure[typeof~='mw:File'].mw-halign-left.neighbor-story-image { | figure[typeof~='mw:File'].mw-halign-left.neighbor-story-image { | ||
margin: 0 | margin: 0 1.75em 1.75em 0; | ||
} | } | ||
figure[typeof~='mw:File'].mw-halign-right.neighbor-story-image { | figure[typeof~='mw:File'].mw-halign-right.neighbor-story-image { | ||
margin: 0 0 | margin: 0 0 1.75em 1.75em; | ||
} | } | ||
figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image { | figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image { | ||
margin: | margin: 0 auto 0; | ||
} | } | ||
@media (max-width: 639px) { | @media (max-width: 639px) { | ||
body.skin--responsive figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image { | body.skin--responsive figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image { | ||
margin: | margin: 0 auto 0 !important; | ||
} | } | ||
} | } | ||
.neighbor-story | /* Text */ | ||
.neighbor-story-text { | |||
white-space: pre-wrap; | |||
background: var(--background-color-0b); | background: var(--background-color-0b); | ||
padding: 1em; | |||
border-radius: 10px; | border-radius: 10px; | ||
} | } | ||
.neighbor-story | .neighbor-story-text p:last-of-type { | ||
margin: -0.5em 0; | margin-bottom: -0.5em; | ||
} | |||
.neighbor-story-text hr + p { | |||
margin-top: 0; | |||
} | } | ||
@media (min-width: 639px) { | |||
.neighbor-story-text figure + p { | |||
margin-top: -1.5rem !important; | |||
} | |||
} | |||
/* Horizontal rule */ | |||
.neighbor-story hr { | .neighbor-story hr { | ||
background-color: var(--background-color-3); | |||
width: 85%; | width: 85%; | ||
margin: 0.2em auto; | margin: 0.2em auto; | ||
| Line 57: | Line 69: | ||
} | } | ||
.neighbor-story { | .neighbor-story-text p + hr { | ||
margin- | margin-top: -0.75em !important; | ||
} | |||
.neighbor-story-text p:last-of-type + hr { | |||
margin-top: 0.75em !important; | |||
} | } | ||
Latest revision as of 11:09, 10 May 2026
.neighbor-story {
margin-bottom: 1.5em;
}
.neighbor-story .mw-heading2 {
margin-top: 1em;
}
/* Image */
.neighbor-story-image {
border-radius: 20px;
background: #131836; /* fallback */
background: linear-gradient(to bottom, #131836 0%, #14364d 100%);
max-width: max-content;
}
.neighbor-story-image img {
background-color: transparent !important;
color: inherit;
filter: none;
}
figure[typeof~='mw:File'].mw-halign-left.neighbor-story-image {
margin: 0 1.75em 1.75em 0;
}
figure[typeof~='mw:File'].mw-halign-right.neighbor-story-image {
margin: 0 0 1.75em 1.75em;
}
figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image {
margin: 0 auto 0;
}
@media (max-width: 639px) {
body.skin--responsive figure[typeof~='mw:File'].mw-halign-center.neighbor-story-image {
margin: 0 auto 0 !important;
}
}
/* Text */
.neighbor-story-text {
white-space: pre-wrap;
background: var(--background-color-0b);
padding: 1em;
border-radius: 10px;
}
.neighbor-story-text p:last-of-type {
margin-bottom: -0.5em;
}
.neighbor-story-text hr + p {
margin-top: 0;
}
@media (min-width: 639px) {
.neighbor-story-text figure + p {
margin-top: -1.5rem !important;
}
}
/* Horizontal rule */
.neighbor-story hr {
background-color: var(--background-color-3);
width: 85%;
margin: 0.2em auto;
clear: both;
}
.neighbor-story-text p + hr {
margin-top: -0.75em !important;
}
.neighbor-story-text p:last-of-type + hr {
margin-top: 0.75em !important;
}