mediawiki-skins-Citizen/skinStyles/extensions/RelatedArticles/ext.relatedArticles.cards.less
2021-08-31 12:29:49 -04:00

81 lines
1.6 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Extension:RelatedArticles
* Module: ext.relatedArticles.cards
* Version: REL1_35 0f27333
*
* Date: 2021-08-31
*/
@import '../../../resources/variables.less';
@import '../../../resources/mixins.less';
.ext-related-articles-card-list {
h3 {
a {
color: var( --color-base--emphasized );
}
&:after {
background-image: linear-gradient( to right, transparent, var( --color-surface-1 ) 50% );
}
}
.ext-related-articles-card {
border-color: var( --border-color-base );
background-color: var( --color-surface-1 );
.boxshadow(1);
&:first-child {
border-radius: var( --border-radius--medium ) var( --border-radius--medium ) 0 0;
}
&:last-child {
border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
}
}
.ext-related-articles-card > a {
&:hover {
.boxshadow(2);
}
&:active {
box-shadow: none;
}
}
.ext-related-articles-card-extract {
color: var( --color-base--subtle );
font-size: @content-caption-size;
}
.ext-related-articles-card-thumb {
background-color: var( --color-surface-2 );
border-radius: var( --border-radius--medium ) 0 0 var( --border-radius--medium );
}
}
// 720px - @width-breakpoint-tablet
@media all and ( min-width: 720px ) {
.ext-related-articles-card-list {
border-top: 0;
.ext-related-articles-card {
border-color: var( --border-color-base );
// Individual border-radius when cards side by side (not stacked)
&,
&:first-child,
&:last-child {
border-radius: var( --border-radius--medium );
}
& + .ext-related-articles-card {
border-color: var( --border-color-base );
}
}
}
}