StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-24 06:24:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(RelatedArticles): ✨ update RelatedArticles styles

Browse source
This commit is contained in:
alistair3149 2022-11-16 17:43:57 -05:00
parent 224c117f65
commit 3c0eea2637
No known key found for this signature in database
5 changed files with 91 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -61,7 +61,7 @@ Name | Grade | Version | Last updated
[OAuth](https://www.mediawiki.org/wiki/Extension:OAuth) | B | REL1_35 `451ed95` | 2021-08-31
[Popups](https://www.mediawiki.org/wiki/Extension:Popups) | A | REL1_35 `dccd607` | 2021-09-02
[PortableInfobox](https://www.mediawiki.org/wiki/Extension:PortableInfobox) | B | 0.6 `16a77dc` | 2022-04-14
[RelatedArticles](https://www.mediawiki.org/wiki/Extension:RelatedArticles) | A | REL1_35 `0f27333` | 2021-08-31
[RelatedArticles](https://www.mediawiki.org/wiki/Extension:RelatedArticles) | A | REL1_39 `f513e5c` | 2022-11-16
[RevisionSlider](https://www.mediawiki.org/wiki/Extension:RevisionSlider) | B | REL1_35 `4c4e368` | 2022-06-02
[Semantic MediaWiki](https://www.mediawiki.org/wiki/Extension:Semantic_MediaWiki) | A | 4.0.2 `0fcdfce` | 2022-10-21
[Semantic Result Formats](https://www.mediawiki.org/wiki/Extension:Semantic_Result_Formats) | E | N/A | N/A

2
skin.json
View file

@ -384,7 +384,7 @@
"+ext.pygments": "skinStyles/extensions/SyntaxHighlight_GeSHi/ext.pygments.less",
"+ext.math.styles": "skinStyles/extensions/Math/ext.math.styles.less",
"+ext.MsUpload": "skinStyles/extensions/MsUpload/ext.MsUpload.less",
"+ext.relatedArticles.cards": "skinStyles/extensions/RelatedArticles/ext.relatedArticles.cards.less",
"+ext.relatedArticles.styles": "skinStyles/extensions/RelatedArticles/ext.relatedArticles.styles.less",
"+ext.relatedArticles.readMore": "skinStyles/extensions/RelatedArticles/ext.relatedArticles.readMore.less",
"+ext.RevisionSlider.lazyCss": "skinStyles/extensions/RevisionSlider/ext.RevisionSlider.lazyCss.less",
"+ext.RevisionSlider.init": "skinStyles/extensions/RevisionSlider/ext.RevisionSlider.init.less",

79
skinStyles/extensions/RelatedArticles/ext.relatedArticles.cards.less
View file

@ -1,79 +0,0 @@
/*
* 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 {
border-radius: var( --border-radius--medium ) 0 0 var( --border-radius--medium );
background-color: var( --color-surface-2 );
}
}
// 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 );
}
}
}
}

79
skinStyles/extensions/RelatedArticles/ext.relatedArticles.readMore.less
View file

@ -3,27 +3,82 @@
*
* SkinStyles for Extension:RelatedArticles
* Module: ext.relatedArticles.readMore
* Version: REL1_35 0f27333
* Version: REL1_39 f513e5c
*
* Date: 2021-08-31
* Date: 2022-11-16
*/
@import '../../../resources/variables.less';
.read-more-container {
margin: 0 auto;
}
.ra-read-more {
padding: 0 var( --padding-page );
max-width: var( --width-layout--extended );
padding: var( --space-md ) 0 0;
margin-right: auto;
margin-left: auto;
// In line with catlink styles
h2 {
padding: 0;
margin: 0;
padding-bottom: 0;
margin-top: 0;
color: var( --color-base--subtle );
font-size: @ui-menu-text;
font-size: 0.875rem;
font-weight: var( --font-weight-normal );
letter-spacing: 0.05em;
text-transform: capitalize;
text-transform: none;
}
}
.ext-related-articles-card-list {
gap: var( --space-sm );
h3 {
font-weight: var( --font-weight-semibold );
line-height: var( --line-height-xs );
a {
color: var( --color-base--emphasized );
}
&:after {
background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), var( --color-surface-1 ) 50% );
}
}
.ext-related-articles-card {
overflow: hidden; // Enforce rounded corner
border: 0 !important; // No border regardless
border-radius: var( --border-radius--medium ) !important; // Same border-radius regardless
background-color: var( --color-surface-1 );
}
.ext-related-articles-card > a {
&:hover {
background-color: var( --background-color-quiet--hover );
box-shadow: var( --box-shadow-card ); // reset
}
&:active {
background-color: var( --background-color-quiet--active );
}
}
.ext-related-articles-card-extract {
margin-top: var( --space-xxs );
color: var( --color-base--subtle );
font-size: 0.8125rem;
}
.ext-related-articles-card-thumb {
margin-right: var( --space-sm );
}
}
@media all and ( min-width: @width-breakpoint-tablet ) {
.ext-related-articles-card-list {
.ext-related-articles-card {
// Magic
width: ~'calc( 100% / 3 - var( --space-xs ) )';
margin-right: 0;
margin-bottom: 0;
}
}
}

22
skinStyles/extensions/RelatedArticles/ext.relatedArticles.styles.less Normal file
View file

@ -0,0 +1,22 @@
/*
* Citizen
*
* SkinStyles for Extension:RelatedArticles
* Module: ext.relatedArticles.styles
* Version: REL1_39 f513e5c
*
* Date: 2022-11-16
*/
@import '../../../resources/variables.less';
.client-js {
.read-more-container {
min-height: auto;
padding: 0 var( --padding-page );
@media ( min-width: @width-breakpoint-desktop ) {
min-height: auto;
}
}
}