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

feat(WikiHiero): add WikiHiero color (#653)

Browse source 
Also update Math color

---------

Co-authored-by: alistair3149 <alistair3149@users.noreply.github.com>
This commit is contained in:
沈澄心 2023-06-09 03:44:22 +08:00 committed by GitHub
parent 90d69720f6
commit e69160de2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 114 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -57,7 +57,7 @@ Name | Grade | Version | Last updated
[Graph](https://www.mediawiki.org/wiki/Extension:Graph) | B | N/A | N/A
[Interwiki](https://www.mediawiki.org/wiki/Extension:Interwiki) | B | REL1_35 `a65a18e` | 2022-05-15
[Lingo](https://www.mediawiki.org/wiki/Extension:Lingo) | B | REL1_35 `e948775` | 2022-04-29
[Math](https://www.mediawiki.org/wiki/Extension:Math) | B | REL1_35 `b7a7939` | 2022-08-16
[Math](https://www.mediawiki.org/wiki/Extension:Math) | B | REL1_35 `b7a7939` | 2023-06-04
[ManageWiki](https://www.mediawiki.org/wiki/Extension:ManageWiki) | B | master `e626a9f` | 2023-06-02
[MediaSearch](https://www.mediawiki.org/wiki/Extension:MediaSearch) | A | REL1_39 `e0aa7bb` | 2022-12-09
[MsUpload](https://www.mediawiki.org/wiki/Extension:MsUpload) | A | REL1_35 `32eb420` | 2021-08-25
@ -86,7 +86,7 @@ Name | Grade | Version | Last updated
[VisualEditor](https://www.mediawiki.org/wiki/Extension:VisualEditor) | A | REL1_39 `65d89c9` | 2023-02-06
[Wikibase](https://www.mediawiki.org/wiki/Extension:Wikibase) | B | REL1_35 `7bb503b` | 2022-05-11
[WikiEditor](https://www.mediawiki.org/wiki/Extension:WikiEditor) | A | REL1_39 `02e1c70` | 2023-06-03
[WikiHiero](https://www.mediawiki.org/wiki/Extension:WikiHiero) | B | REL1_39 `3a2be51` | 2023-06-01
[WikiHiero](https://www.mediawiki.org/wiki/Extension:WikiHiero) | B | REL1_39 `3a2be51` | 2023-06-04
[WSSearchFront](https://www.mediawiki.org/wiki/Extension:WSSearchFront) | B | 3.5.4 `c27ebcb5` | 2021-11-23
Some of the field are tagged as N/A because the information was not tracked before.

19
resources/mixins.less
View file

@ -1,7 +1,7 @@
/*
* Citizen - Mixins
* https://starcitizen.tools
*/
*/
@import 'variables.less';
@ -225,3 +225,20 @@
.button-red-active() {
background-color: var( --color-destructive--active );
}
// Transform black into given color
// From https://stackoverflow.com/a/73390109/10624167
.recolor( @color ) {
@r: red( @color ) / 255;
@g: green( @color ) / 255;
@b: blue( @color ) / 255;
@a: alpha( @color );
// grayscale fallback if SVG from data url is not supported
@lightness: lightness( @color );
filter: saturate( 0% ) brightness( 0% ) invert( @lightness ) opacity( @a );
// color filter
@svg-filter-id: "recolor";
filter: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="@{svg-filter-id}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 @{r} 0 0 0 0 @{g} 0 0 0 0 @{b} 0 0 0 @{a} 0"/></filter></svg> #@{svg-filter-id}' );
}

6
resources/skins.citizen.styles/common/cssvariables.less
View file

@ -1,7 +1,7 @@
/*
* Citizen - CSS variables
* https://starcitizen.tools
*/
*/
@import '../../variables.less';
@ -19,10 +19,6 @@
--background-color-quiet--active: @background-color-quiet--active;
/* Foreground Colors */
--color-base: @color-base;
--color-base--emphasized: @color-base--emphasized;
--color-base--subtle: @color-base--subtle;
--color-destructive: @color-destructive;
--color-destructive--hover: @color-destructive--hover;
--color-destructive--active: @color-destructive--active;

4
resources/skins.citizen.styles/common/theme.less
View file

@ -14,6 +14,10 @@
--color-surface-3: @color-surface-3;
--color-surface-4: @color-surface-4;
--color-base: @color-base;
--color-base--emphasized: @color-base--emphasized;
--color-base--subtle: @color-base--subtle;
--color-primary: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), var( --color-primary__l ) )';
--color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 1.2 ) )';
--color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 0.8 ) )';

13
resources/variables.less
View file

@ -1,7 +1,7 @@
/*
* Citizen - LESS variables
* https://starcitizen.tools
*/
*/
// Import MediaWiki-supplied mixins
@import 'mediawiki.mixins';
@ -256,7 +256,6 @@
@dark-background-color-primary--hover: @color-accent30;
@dark-background-color-primary--active: @color-accent-30--darken;
/* Foreground colors */
@dark-color-text-error: @color-red50--lighten;
@dark-color-text-warning: @color-yellow50;
@dark-color-text-success: @color-green50;
@ -296,10 +295,18 @@
* After that we can remove all theses LESS variables.
*/
@dark-color-base: rgba( 255, 255, 255, 0.6 );
@dark-bg-10: #1d2129;
@dark-bg-20: #22262d;
@dark-bg-30: #24272f;
@dark-bg-40: #2b2f36;
@dark-bg-50: #33363d;
@dark-bg-60: #34383f;
/*
* Used by Math and WikiHiero for recolor
* TODO: Figure out a way to do recolor with CSS variable
* e.g. If the primary color is changed on wiki, it won't be reflected here.
*/
@dark-color-base: hsl( @color-primary__h, 25%, 80% );
@dark-color-base--emphasized: hsl( @color-primary__h, 80%, 95% );
@dark-color-base--subtle: hsl( @color-primary__h, 25%, 65% );

68
skinStyles/extensions/Math/ext.math.styles.less
View file

@ -5,37 +5,63 @@
* Module: ext.math.styles
* Version: REL1_35 b7a7939
*
* Date: 2022-08-16
*/
* Date: 2023-06-04
*/
@import '../../../resources/variables.less';
// From https://stackoverflow.com/a/73390109/10624167
.recolor(@color: #333) {
@r: red(@color) / 255;
@g: green(@color) / 255;
@b: blue(@color) / 255;
@a: alpha(@color);
// grayscale fallback if SVG from data url is not supported
@lightness: lightness(@color);
filter: saturate( 0% ) brightness( 0% ) invert( @lightness ) opacity( @a );
// color filter
@svg-filter-id: "recolor";
filter: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="@{svg-filter-id}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 @{r} 0 0 0 0 @{g} 0 0 0 0 @{b} 0 0 0 @{a} 0"/></filter></svg> #@{svg-filter-id}' );
}
@import '../../../resources/mixins.less';
.skin-citizen-light {
.mwe-math-fallback-image-display,
.mwe-math-fallback-image-inline {
.recolor(@color-base);
.recolor( @color-base );
}
h1,
h2,
h3,
h4,
h5,
h6,
dt {
.mwe-math-fallback-image-display,
.mwe-math-fallback-image-inline {
.recolor( @color-base--emphasized );
}
}
blockquote,
th {
.mwe-math-fallback-image-display,
.mwe-math-fallback-image-inline {
.recolor( @color-base--subtle );
}
}
}
.skin-citizen-dark {
.mwe-math-fallback-image-display,
.mwe-math-fallback-image-inline {
.recolor(@dark-color-base);
.recolor( @dark-color-base );
}
h1,
h2,
h3,
h4,
h5,
h6,
dt {
.mwe-math-fallback-image-display,
.mwe-math-fallback-image-inline {
.recolor( @dark-color-base--emphasized );
}
}
blockquote,
th {
.mwe-math-fallback-image-display,
.mwe-math-fallback-image-inline {
.recolor( @dark-color-base--subtle );
}
}
}

35
skinStyles/extensions/WikiHiero/ext.wikihiero.less
View file

@ -5,15 +5,44 @@
* Module: ext.wikihiero
* Version: REL1_39 3a2be51
*
* Date: 2023-06-01
* Date: 2023-06-04
*/
@import '../../../resources/variables.less';
@import '../../../resources/mixins.less';
.mw-hiero {
/* content.css */
.skin-citizen-light &-table img {
.recolor( @color-base );
}
.skin-citizen-light h1 &-table img,
.skin-citizen-light h2 &-table img,
.skin-citizen-light h3 &-table img,
.skin-citizen-light h4 &-table img,
.skin-citizen-light h5 &-table img,
.skin-citizen-light h6 &-table img,
.skin-citizen-light dt &-table img {
.recolor( @color-base--emphasized );
}
.skin-citizen-light blockquote &-table img,
.skin-citizen-light th &-table img {
.recolor( @color-base--subtle );
}
.skin-citizen-dark &-table img {
filter: invert( 1 ) hue-rotate( 180deg );
.recolor( @dark-color-base );
}
.skin-citizen-dark h1 &-table img,
.skin-citizen-dark h2 &-table img,
.skin-citizen-dark h3 &-table img,
.skin-citizen-dark h4 &-table img,
.skin-citizen-dark h5 &-table img,
.skin-citizen-dark h6 &-table img,
.skin-citizen-dark dt &-table img {
.recolor( @dark-color-base--emphasized );
}
.skin-citizen-dark blockquote &-table img,
.skin-citizen-dark th &-table img {
.recolor( @dark-color-base--subtle );
}
/* special.css */