Template:Quote article content/styles.css: Difference between revisions

.tpl-quote-article-content {
	/* border: 1px solid var(--border-color-subtle, #c8ccd1); */
	display: block;
	box-sizing: border-box;
    overflow: hidden;
    padding: 1em;
    margin: 1em 1.5em;
    padding-left: 1.5em;
    border: 1px solid var(--border-color-muted, #dadde3);
    border-radius: 1px;
    background-color: #f9f9f9d9;
    background-color: var(--background-color-neutral-subtle, #f8f9fa);
}

/* This replicates the margin/padding given to blockquotes, without having
 * to use that element and inherit its implicit semantics.
 */
.tpl-blockquote-container {
	display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 2em;
    margin-inline-end: 2em;
}

.tpl-blockquote-text {
	display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

/* Get rid of unequal top/bottom padding. For example, if the content starts
 * with a <div> from a hatnote and ends with a <p> element, it will be uneven
 * as the <div> has no implicit styles but the <p> elements does have that
 * assigned by user style sheet. Add more elements here as needed.
 */
.tpl-quote-article-content p:last-child {
	margin-bottom: inherit;
}

/* Nice paragraph spacing between <p> elements for example but not if first
 * or last child or orphans, as then it looks too spaced out.
 */
.tpl-blockquote-text > :last-child {
    margin-bottom: 0;
}

.tpl-blockquote-text > :first-child {
    margin-top: 0;
}

.tpl-quote-article-content-text {
	overflow: hidden;
	color: var(--color-base, #202122);
}

/* @Discouraged. Make available the ability to replicate [[Template:Xt]]
 * styles and related templates. Legacy way of presenting article quoted text.
 */
.tpl-quote-article-content--color-green {
	color: var(--color-content-added, #006400);
	/* font-family: serif; */
}

.tpl-quote-article-content--drop-target {
	background-color: #f9f9f9d9;
	background-color: var(--background-color-neutral-subtle, #f9f9f9d9);
	transition-property: background-color, color, border-color;
    transition-duration: 100ms;
    border: 1px dashed var(--border-color-muted, #dadde3);
    border-radius: 2px;
    vertical-align: middle;
    overflow: hidden;
}

.tpl-quote-article-content--drop-target:hover {
	border-color: #72777d;
}