StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-26 23:32:25 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Citizen/resources/skins.citizen.styles/common/theme.less

99 lines
4.2 KiB
Plaintext
Raw Normal View History

feat: simplify background color variables in core styles --background-color-dp-XX is soft depreciated, please use --color-surface-X instead
2021-07-25 23:16:05 +00:00
/**
feat(core): ✨ implement new light theme Now that we have a comfortable coverage for extensions. It is time to start tweaking light theme color.
2024-03-19 19:48:53 +00:00
* Base/light theme
feat: simplify background color variables in core styles --background-color-dp-XX is soft depreciated, please use --color-surface-X instead
2021-07-25 23:16:05 +00:00
*/
:root {
feat: calculate primary hover state color based on HSL
2021-07-27 19:49:12 +00:00
--color-primary__h: @color-primary__h;
--color-primary__s: @color-primary__s;
--color-primary__l: @color-primary__l;
feat(core): ✨ tweak light theme colors - Decrease saturation for surface-0 - Increase saturation for other surfaces
2024-04-19 19:20:45 +00:00
--color-surface-0: ~'hsl( var( --color-primary__h ), 30%, 96% )';
--color-surface-1: ~'hsl( var( --color-primary__h ), 40%, 94% )';
--color-surface-2: ~'hsl( var( --color-primary__h ), 30%, 92% )';
--color-surface-3: ~'hsl( var( --color-primary__h ), 20%, 90% )';
--color-surface-4: ~'hsl( var( --color-primary__h ), 10%, 88% )';
feat: rewrite OOUI skinstyles to the new system
2021-07-27 06:13:22 +00:00
feat(core): ✨ implement new light theme Now that we have a comfortable coverage for extensions. It is time to start tweaking light theme color.
2024-03-19 19:48:53 +00:00
--color-base--emphasized: ~'hsl( var( --color-primary__h ), 85%, 5% )';
--color-base: ~'hsl( var( --color-primary__h ), 30%, 20% )';
--color-base--subtle: ~'hsl( var( --color-primary__h ), 30%, 35% )';
--background-color-overlay: ~'hsla( var( --color-primary__h ), 25%, 94%, 0.95 )';
--background-color-overlay--lighter: ~'hsla( var( --color-primary__h ), 25%, 94%, 0.6 )';
feat(WikiHiero): add WikiHiero color (#653) Also update Math color --------- Co-authored-by: alistair3149 <alistair3149@users.noreply.github.com>
2023-06-08 19:44:22 +00:00
feat: calculate primary hover state color based on HSL
2021-07-27 19:49:12 +00:00
--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 ) )';
--background-color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 95% )';
--background-color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 90% )';
feat(core): ✨ implement new light theme Now that we have a comfortable coverage for extensions. It is time to start tweaking light theme color.
2024-03-19 19:48:53 +00:00
--color-surface-2--hover: ~'hsl( var( --color-primary__h ), 30%, 94% )';
--color-surface-2--active: ~'hsl( var( --color-primary__h ), 30%, 90% )';
feat: implement a more adaptive smooth shadow * 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
2022-04-24 19:24:09 +00:00
feat(core): ✨ update state background color Switch to a semi-transparent color so it blends with the background. Fix #639
2023-06-01 23:00:33 +00:00
--background-color-destructive: rgba( 221, 51, 51, 0.1 );
--background-color-success: rgba( 0, 175, 137, 0.1 );
--background-color-warning: rgba( 255, 204, 51, 0.1 );
feat(core): update MediaWiki notification style (#673) * Update variables.less * Update cssvariables.less * Update mediawiki.notification.less * Update cssvariables.less * Update variables.less * Update mediawiki.notification.less * Update mediawiki.notification.less * Update mediawiki.notification.less * Update theme.less
2023-06-26 19:25:12 +00:00
--background-image-destructive: linear-gradient( var( --background-color-destructive ), var( --background-color-destructive ) );
--background-image-success: linear-gradient( var( --background-color-success ), var( --background-color-success ) );
--background-image-warning: linear-gradient( var( --background-color-warning ), var( --background-color-warning ) );
feat(core): ✨ rename border-color variables and increase contrast Align variable names with Codex
2024-04-19 19:14:18 +00:00
--border-color-base: rgba( 0, 0, 0, 0.08 );
--border-color-subtle: rgba( 0, 0, 0, 0.05 );
--border-color-interactive: rgba( 0, 0, 0, 0.11 );
feat: implement a more adaptive smooth shadow * 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
2022-04-24 19:24:09 +00:00
--box-shadow-card: @box-shadow-card;
--box-shadow-dialog: @box-shadow-dialog;
fix(core): skin preference support for Safari on iOS < 12.2 (#680) * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update inline.js * Update SkinHooks.php * Update skins.citizen.preferences.less * Update variables.less * Update theme.less * Update theme.less * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skin.js
2023-07-03 12:48:41 +00:00
--surface-shadow: var( --color-primary__h ), 10%, 20%;
feat: implement a more adaptive smooth shadow * 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
2022-04-24 19:24:09 +00:00
--shadow-strength: 0.02;
feat(core): ✨ adapt typography to user preferences * Add reduced gradation for dark mode * Bolder font for prefer high contrast * Thinner font for prefer low contrast
2023-08-03 21:41:54 +00:00
--font-grade: 0;
feat: simplify background color variables in core styles --background-color-dp-XX is soft depreciated, please use --color-surface-X instead
2021-07-25 23:16:05 +00:00
}
feat: remove color-link LESS variable and scope the CSS variable
2021-07-27 21:33:59 +00:00
a {
--color-link: ~'var( --color-primary )';
--color-link--hover: ~'var( --color-primary--hover )';
--color-link--active: ~'var( --color-primary--active )';
}
feat: simplify background color variables in core styles --background-color-dp-XX is soft depreciated, please use --color-surface-X instead
2021-07-25 23:16:05 +00:00
/**
* Dark theme
*/
:root.skin-citizen-dark {
feat(core): ✨ dynamic dark theme color based on primary hue
2022-12-14 19:06:06 +00:00
--color-primary__l: 60%;
feat: improve contrast for primary color in dark theme
2021-07-27 21:18:23 +00:00
fix(core): skin preference support for Safari on iOS < 12.2 (#680) * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update inline.js * Update SkinHooks.php * Update skins.citizen.preferences.less * Update variables.less * Update theme.less * Update theme.less * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skin.js
2023-07-03 12:48:41 +00:00
--color-surface-0: ~'hsl( var( --color-primary__h ), 20%, 10% )';
--color-surface-1: ~'hsl( var( --color-primary__h ), 25%, 12% )';
--color-surface-2: ~'hsl( var( --color-primary__h ), 25%, 15% )';
--color-surface-3: ~'hsl( var( --color-primary__h ), 15%, 20% )';
--color-surface-4: ~'hsl( var( --color-primary__h ), 15%, 25% )';
feat(core): ✨ dynamic dark theme color based on primary hue
2022-12-14 19:06:06 +00:00
fix(core): skin preference support for Safari on iOS < 12.2 (#680) * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update inline.js * Update SkinHooks.php * Update skins.citizen.preferences.less * Update variables.less * Update theme.less * Update theme.less * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skin.js
2023-07-03 12:48:41 +00:00
--color-base--emphasized: ~'hsl( var( --color-primary__h ), 80%, 95% )';
--color-base: ~'hsl( var( --color-primary__h ), 25%, 80% )';
--color-base--subtle: ~'hsl( var( --color-primary__h ), 25%, 65% )';
feat: rewrite OOUI skinstyles to the new system
2021-07-27 06:13:22 +00:00
feat: calculate primary hover state color based on HSL
2021-07-27 19:49:12 +00:00
--background-color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 15% )';
--background-color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 20% )';
fix(core): skin preference support for Safari on iOS < 12.2 (#680) * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update inline.js * Update SkinHooks.php * Update skins.citizen.preferences.less * Update variables.less * Update theme.less * Update theme.less * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skin.js
2023-07-03 12:48:41 +00:00
--background-color-overlay: ~'hsla( var( --color-primary__h ), 20%, 10%, 0.95 )';
--background-color-overlay--lighter: ~'hsla( var( --color-primary__h ), 20%, 10%, 0.6 )';
feat(core): ✨ dynamic dark theme color based on primary hue
2022-12-14 19:06:06 +00:00
fix(core): skin preference support for Safari on iOS < 12.2 (#680) * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update inline.js * Update SkinHooks.php * Update skins.citizen.preferences.less * Update variables.less * Update theme.less * Update theme.less * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skin.js
2023-07-03 12:48:41 +00:00
--color-surface-2--hover: ~'hsl( var( --color-primary__h ), 30%, 19% )';
--color-surface-2--active: ~'hsl( var( --color-primary__h ), 30%, 11% )';
feat: implement a more adaptive smooth shadow * 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
2022-04-24 19:24:09 +00:00
feat(core): ✨ rename border-color variables and increase contrast Align variable names with Codex
2024-04-19 19:14:18 +00:00
--border-color-base: rgba( 255, 255, 255, 0.05 );
--border-color-subtle: rgba( 255, 255, 255, 0.02 );
--border-color-interactive: rgba( 255, 255, 255, 0.08 );
fix(core): skin preference support for Safari on iOS < 12.2 (#680) * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update inline.js * Update SkinHooks.php * Update skins.citizen.preferences.less * Update variables.less * Update theme.less * Update theme.less * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skins.citizen.preferences.js * Update skin.js
2023-07-03 12:48:41 +00:00
--surface-shadow: var( --color-primary__h ), 50%, 3%;
feat: implement a more adaptive smooth shadow * 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
2022-04-24 19:24:09 +00:00
--shadow-strength: 0.8;
feat(core): ✨ use different font weight in different themes The same font weight do not provide the same contrast in different themes. We should be able to change the scaling
2022-10-23 23:40:19 +00:00
feat(core): ✨ use filter-invert CSS variable to flip color This decouple the filter style from the class. Instead, filter-invert can be redefined if needed (e.g. :root.skin-citizen-dark)
2023-07-10 20:56:56 +00:00
--filter-invert: invert( 1 ) hue-rotate( 180deg );
feat(core): ✨ adapt typography to user preferences * Add reduced gradation for dark mode * Bolder font for prefer high contrast * Thinner font for prefer low contrast
2023-08-03 21:41:54 +00:00
--font-grade: -25;
feat(typography): ✨ do not change GRAD axis It seems that browsers don't have a standard for GRAD. Sometimes it is too thin and sometimes it is too thick
2022-11-23 23:37:00 +00:00
// FIXME: Browsers seem to treat GRAD differently, disabling for now
feat(font): ✨ use GRAD instead of font-weight to adjust contrast font-weight have the issue of changing the width of text, while GRAD does not
2022-10-28 03:01:23 +00:00
// Dark theme usually have an illusion of thicker fonts
// So we have to tune it back
feat(typography): ✨ do not change GRAD axis It seems that browsers don't have a standard for GRAD. Sometimes it is too thin and sometimes it is too thick
2022-11-23 23:37:00 +00:00
// font-variation-settings: 'GRAD' -90;
feat: simplify background color variables in core styles --background-color-dp-XX is soft depreciated, please use --color-surface-X instead
2021-07-25 23:16:05 +00:00
}
Reference in a new issue Copy permalink