mediawiki-skins-Citizen/skinStyles/extensions/RelatedArticles/ext.relatedArticles.cards.less

/*
 * Citizen - Related Articles Styles
 * https://starcitizen.tools
*/

@import '../../../resources/variables.less';
@import '../../../resources/mixins.less';

.ext-related-articles-card-list {
	overflow: visible; // Show shadow
	padding-top: @content-margin-top; // Give room for shadows and translate
	margin-top: 0;

	h3 {
		a {
			color: var( --color-base--emphasized );
		}

		&:after {
			background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), var( --background-color-dp-04 ) 50% );
		}
	}

	.ext-related-articles-card {
		border-color: var( --border-color-base ) !important;
		background-color: var( --background-color-dp-04 );
		transition: @transition-transform-quick;
		.boxshadow(1);

		&:hover {
			.boxshadow(3);
			transform: translateY( -2px );
		}

		> a:hover {
			box-shadow: none;
		}
	}

	.ext-related-articles-card-thumb {
		background-color: var( --background-color-framed );
	}

	.ext-related-articles-card-extract {
		color: var( --color-base--subtle );
	}
}

.ext-related-articles-card-extract:after {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 10%;
	height: 1em;
	background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), var( --background-color-dp-04 ) 50% );
	content: '';
}