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

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

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

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

	.ext-related-articles-card {
		border: 1px solid @base-80 !important;
		border-radius: 0 !important;
		.boxshadow(1);
		transition: @transition-transform-quick;

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

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

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

@media ( prefers-color-scheme: dark ) {
	.ext-related-articles-card-list {
		.ext-related-articles-card {
			border-color: @dark-bg-40 !important;
			background-color: @dark-bg-30;
		}

		.ext-related-articles-card-thumb {
			background-color: @dark-bg-10;
		}

		h3 {
			&:after {
				background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), @dark-bg-30 50% );
			}

			a {
				color: @dark-text-100;
			}
		}
	}

	.ext-related-articles-card-extract:after {
		background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), @dark-bg-30 50% );
	}
}