Jump to content

Template:Neighbor Stories/styles.css

From The Petit Planet Wiki
.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 1em 1em 0;
}

figure[typeof~='mw:File'].mw-halign-right.neighbor-story-image {
    margin: 0 0 1em 1em;
}

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;
}