mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-16 19:10:34 +00:00
47e1259bc3
* Looks more natural * Can be customized through the surface-shadow and shadow-strength CSS var * Light mode and dark mode have been different shadow now, it should be more visible in dark mode * Box-shadow is a CSS var, which can be used in templates and wiki CSS
80 lines
1.6 KiB
Plaintext
80 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';
|
|
|
|
.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 );
|
|
box-shadow: var( --box-shadow-card );
|
|
|
|
&: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 {
|
|
box-shadow: var( --box-shadow-dialog );
|
|
}
|
|
|
|
&: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 );
|
|
}
|
|
}
|
|
}
|
|
}
|