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

275 lines
9.2 KiB
Plaintext
Raw Normal View History

refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
/*
* Citizen - CSS variables
* https://starcitizen.tools
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
*/
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
@import '../../variables.less';
doc: bump version to 1.2.0
2021-01-12 23:23:58 +00:00
/**
* Base theme
*/
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
:root {
refactor(core): ♻️ merge theme into features.less and cssvariables.less
2024-04-25 20:19:53 +00:00
--color-primary__h: @color-primary__h;
--color-primary__s: @color-primary__s;
--color-primary__l: @color-primary__l;
feat(core): ✨ destructure surface colors into hsl variables
2024-05-28 17:58:43 +00:00
--color-surface-0__s: 30%;
--color-surface-0__l: 96%;
--color-surface-1__s: 40%;
--color-surface-1__l: 94%;
--color-surface-2__s: 30%;
--color-surface-2__l: 92%;
--color-surface-3__s: 20%;
--color-surface-3__l: 90%;
--color-surface-4__s: 10%;
--color-surface-4__l: 88%;
--delta-hover-state: 2%;
--color-surface-0: ~'hsl( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ) )';
--color-surface-1: ~'hsl( var( --color-primary__h ), var( --color-surface-1__s ), var( --color-surface-1__l ) )';
--color-surface-2: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), var( --color-surface-2__l ) )';
--color-surface-3: ~'hsl( var( --color-primary__h ), var( --color-surface-3__s ), var( --color-surface-3__l ) )';
--color-surface-4: ~'hsl( var( --color-primary__h ), var( --color-surface-4__s ), var( --color-surface-4__l ) )';
refactor(core): ♻️ merge theme into features.less and cssvariables.less
2024-04-25 20:19: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% )';
feat(core): ✨ destructure surface colors into hsl variables
2024-05-28 17:58:43 +00:00
--background-color-overlay: ~'hsla( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ), 0.95 )';
--background-color-overlay--lighter: ~'hsla( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ), 0.6 )';
refactor(core): ♻️ merge theme into features.less and cssvariables.less
2024-04-25 20:19:53 +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): ✨ destructure surface colors into hsl variables
2024-05-28 17:58:43 +00:00
--color-surface-2--hover: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) + var( --delta-hover-state ) ) )';
--color-surface-2--active: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) - var( --delta-hover-state ) ) )';
refactor(core): ♻️ merge theme into features.less and cssvariables.less
2024-04-25 20:19:53 +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 );
--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 ) );
--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 );
--box-shadow-card: @box-shadow-card;
--box-shadow-dialog: @box-shadow-dialog;
--surface-shadow: var( --color-primary__h ), 10%, 20%;
--shadow-strength: 0.02;
--font-grade: 0;
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
--background-color-icon: @background-color-icon;
--background-color-icon--hover: @background-color-icon--hover;
--background-color-icon--active: @background-color-icon--active;
--background-color-quiet--hover: @background-color-quiet--hover;
--background-color-quiet--active: @background-color-quiet--active;
refactor: use common CSS variables for search suggestion
2021-01-12 20:46:40 +00:00
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
/* Foreground Colors */
feat: unify core link styles
2021-01-14 17:53:29 +00:00
--color-destructive: @color-destructive;
--color-destructive--hover: @color-destructive--hover;
--color-destructive--active: @color-destructive--active;
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
--color-warning: @color-warning;
--color-success: @color-success;
ci: 👷 lint code to MediaWiki standards Check commit and GitHub actions for more details
2023-06-01 22:48:25 +00:00
feat(core): update state text color (#642) * Update variables.less * Update cssvariables.less * Update content.body.less * Update mediawiki.special.changeslist.less * Update mediawiki.special.changeslist.less * Update ext.scribunto.edit.less * Update ext.echo.ui.less * Create mediawiki.interface.helpers.styles.less * Update skin.json * Update oojs-ui-core.less * Update oojs-ui-core.less * Update variables.less * Update cssvariables.less * Update variables.less * Update mediawiki.special.changeslist.less * Update cssvariables.less * Update variables.less * Update variables.less * Update README.md * Update README.md * Update mediawiki.special.changeslist.less
2023-06-01 22:47:40 +00:00
--color-text-error: @color-text-error;
--color-text-warning: @color-text-warning;
--color-text-success: @color-text-success;
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
feat: separate link color from primary color
2021-03-18 16:59:48 +00:00
--color-link-new: @color-link-new;
--color-link-new--hover: @color-link-new--hover;
--color-link-new--active: @color-link-new--active;
feat(Scribunto): add support for Scribunto debug console (#629) * add support for Scribunto debug console * Update ext.scribunto.edit.less * Update README.md
2023-05-23 16:27:54 +00:00
--color-syntax-red: @color-syntax-red;
--color-syntax-orange: @color-syntax-orange;
--color-syntax-yellow: @color-syntax-yellow;
--color-syntax-green: @color-syntax-green;
--color-syntax-cyan: @color-syntax-cyan;
--color-syntax-blue: @color-syntax-blue;
--color-syntax-paleblue: @color-syntax-paleblue;
--color-syntax-purple: @color-syntax-purple;
--color-syntax-brown: @color-syntax-brown;
--color-syntax-pink: @color-syntax-pink;
--color-syntax-violet: @color-syntax-violet;
--color-syntax-grey: @color-syntax-grey;
feat: unify icon opacity and states
2021-01-14 17:20:15 +00:00
/* Opacity */
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
--opacity-base--disabled: @opacity-base--disabled;
feat: unify icon opacity and states
2021-01-14 17:20:15 +00:00
--opacity-icon-base: @opacity-icon-base;
--opacity-icon-base--hover: @opacity-icon-base--hover;
--opacity-icon-base--active: @opacity-icon-base--active;
refactor: clean up header structure and styles
2021-01-16 00:56:59 +00:00
/* Size */
--size-icon: @size-icon;
feat: convert border radius to CSS variable
2021-05-27 14:35:21 +00:00
/* Border radius */
--border-radius--small: @border-radius--small;
--border-radius--medium: @border-radius--medium;
--border-radius--large: @border-radius--large;
feat(core): ✨ add pill and circle border radius variables
2022-11-15 16:21:04 +00:00
--border-radius--pill: @border-radius--pill;
feat: convert border radius to CSS variable
2021-05-27 14:35:21 +00:00
feat: convert font family to root CSS variable
2021-03-09 18:13:49 +00:00
/* Fonts */
feat(core): ✨ update font stacks
2023-02-16 17:58:51 +00:00
--font-family-base: @font-family-base;
--font-family-serif: @font-family-serif;
--font-family-monospace: @font-family-monospace;
feat(core): ✨ use CSS variable to define default Citizen font
2023-12-15 20:07:43 +00:00
--font-family-citizen-base: 'Roboto';
--font-family-citizen-serif: 'Roboto Serif';
--font-family-citizen-monospace: 'Roboto Mono';
feat(core): ✨ use CSS variable for language-specific fonts
2023-12-13 22:09:57 +00:00
--font-family-language-base: '';
--font-family-language-serif: '';
--font-family-language-monospace: '';
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)!: 💥 ✨ rework font-size CSS variables To align with Codex tokens, the old --font-size-hN CSS variables are renamed. Introduced new font size variables (x-small, small)
2024-02-26 21:54:58 +00:00
--font-size-x-small: 0.75rem;
--font-size-small: 0.875rem;
--font-size-medium: 1rem;
--font-size-large: 1rem;
--font-size-x-large: 1.125rem;
--font-size-xx-large: 1.375rem;
--font-size-xxx-large: 1.75rem;
feat(core): ✨ responsive heading font sizes
2022-11-08 18:19:23 +00:00
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
--font-weight-normal: 400;
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-weight-medium: ~'calc( var( --font-weight-normal ) + 100)';
--font-weight-semibold: ~'calc( var( --font-weight-normal ) + 200)';
--font-weight-bold: ~'calc( var( --font-weight-normal ) + 300)';
feat(core): ✨ update hover transition styles and implementation The timing and easing function are defined separately than the property. It is now accessible as a CSS variable (transition-hover)
2023-07-07 20:36:27 +00:00
/* Transitions */
--transition-hover: @transition-hover;
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
}
refactor: convert page width to css var
2021-01-16 21:14:04 +00:00
html {
/* Size */
feat(core): redesign site header (#521) Change header into vertical header for large screen and bottom header for small screen.
2022-09-29 23:12:56 +00:00
--header-size: @header-size;
feat(core): ✨ re-implement responsive toc
2022-10-20 01:09:50 +00:00
--header-card-maxheight: 70vh;
refactor: convert page width to css var
2021-01-16 21:14:04 +00:00
--width-layout: @width-layout;
feat(core): ✨ redesign site footer last modified and copyright message are not implemented yet. they will be integrated into body content since they are not global.
2022-10-01 19:06:57 +00:00
--width-layout--extended: ~'calc( var( --width-layout ) * 1.5 )';
feat(core): ✨ rewrite body layout into flex and grid
2022-10-06 20:31:55 +00:00
--width-toc: @width-toc;
feat(core): ✨ standardize line height
2022-10-25 20:42:19 +00:00
--line-height: @line-height-md;
--line-height-xs: @line-height-xs;
--line-height-sm: @line-height-sm;
feat(core): ✨ move page actions into bottom toolbar when width is limited Related: #821
2024-04-26 21:41:27 +00:00
--toolbar-size: 2.5rem;
refactor: convert page width to css var
2021-01-16 21:14:04 +00:00
feat(core): redesign site header (#521) Change header into vertical header for large screen and bottom header for small screen.
2022-09-29 23:12:56 +00:00
/* Spacing */
--space-unit: @space-unit;
feat(core): ✨ more granular spacing units
2022-11-01 00:34:00 +00:00
--space-xxs: ~'calc( 0.25 * var( --space-unit ) )';
--space-xs: ~'calc( 0.5 * var( --space-unit ) )';
--space-sm: ~'calc( 0.75 * var( --space-unit ) )';
feat(core): redesign site header (#521) Change header into vertical header for large screen and bottom header for small screen.
2022-09-29 23:12:56 +00:00
--space-md: ~'var( --space-unit )';
feat(core): ✨ more granular spacing units
2022-11-01 00:34:00 +00:00
--space-lg: ~'calc( 1.25 * var( --space-unit ) )';
--space-xl: ~'calc( 1.5 * var( --space-unit ) )';
--space-xxl: ~'calc( 2 * var( --space-unit ) )';
feat(core): redesign site header (#521) Change header into vertical header for large screen and bottom header for small screen.
2022-09-29 23:12:56 +00:00
feat: make ToC width adjustable and respect layout width
2021-03-18 17:39:13 +00:00
/* Margin */
--margin-layout: ~'calc( ( 100vw - var( --width-layout ) ) / 2 )';
refactor: convert page width to css var
2021-01-16 21:14:04 +00:00
feat: make ToC width adjustable and respect layout width
2021-03-18 17:39:13 +00:00
/* Padding */
--padding-page: @padding-page;
refactor: clean up header background var
2021-02-04 15:38:29 +00:00
}
ci: 👷 lint code to MediaWiki standards Check commit and GitHub actions for more details
2024-04-19 20:26:48 +00:00
:lang( ja ),
:lang( ko ),
:lang( zh ) {
feat(core): ✨ increase line height for CJK text To improve readability on sites using Chinese, Japanese, and Korean.
2024-04-19 20:24:41 +00:00
/* CJK languages need increased line-height for readability */
--line-height: 1.75;
}
refactor(core): ♻️ merge theme into features.less and cssvariables.less
2024-04-25 20:19:53 +00:00
a {
--color-link: ~'var( --color-primary )';
--color-link--hover: ~'var( --color-primary--hover )';
--color-link--active: ~'var( --color-primary--active )';
}
refactor(core): ♻️ replace usage of skin-citizen-theme classes
2024-04-25 00:48:43 +00:00
.theme-dark-old() {
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
--background-color-icon: @dark-background-color-icon;
--background-color-icon--hover: @dark-background-color-icon--hover;
--background-color-icon--active: @dark-background-color-icon--active;
--background-color-quiet--hover: @dark-background-color-quiet--hover;
--background-color-quiet--active: @dark-background-color-quiet--active;
feat(core): update state text color (#642) * Update variables.less * Update cssvariables.less * Update content.body.less * Update mediawiki.special.changeslist.less * Update mediawiki.special.changeslist.less * Update ext.scribunto.edit.less * Update ext.echo.ui.less * Create mediawiki.interface.helpers.styles.less * Update skin.json * Update oojs-ui-core.less * Update oojs-ui-core.less * Update variables.less * Update cssvariables.less * Update variables.less * Update mediawiki.special.changeslist.less * Update cssvariables.less * Update variables.less * Update variables.less * Update README.md * Update README.md * Update mediawiki.special.changeslist.less
2023-06-01 22:47:40 +00:00
--color-text-error: @dark-color-text-error;
--color-text-warning: @dark-color-text-warning;
--color-text-success: @dark-color-text-success;
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
feat: separate link color from primary color
2021-03-18 16:59:48 +00:00
--color-link-new: @dark-color-link-new;
--color-link-new--hover: @dark-color-link-new--hover;
--color-link-new--active: @dark-color-link-new--active;
feat(Scribunto): add support for Scribunto debug console (#629) * add support for Scribunto debug console * Update ext.scribunto.edit.less * Update README.md
2023-05-23 16:27:54 +00:00
--color-syntax-red: @color-syntax-red-dark;
--color-syntax-orange: @color-syntax-orange-dark;
--color-syntax-yellow: @color-syntax-yellow-dark;
--color-syntax-green: @color-syntax-green-dark;
--color-syntax-cyan: @color-syntax-cyan-dark;
--color-syntax-blue: @color-syntax-blue-dark;
--color-syntax-paleblue: @color-syntax-paleblue-dark;
--color-syntax-purple: @color-syntax-purple-dark;
--color-syntax-brown: @color-syntax-brown-dark;
--color-syntax-pink: @color-syntax-pink-dark;
--color-syntax-violet: @color-syntax-violet-dark;
feat: unify icon opacity and states
2021-01-14 17:20:15 +00:00
/* Opacity */
--opacity-icon-base--active: @dark-opacity-icon-base--active;
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
}
refactor(core): ♻️ replace usage of skin-citizen-theme classes
2024-04-25 00:48:43 +00:00
/**
* Dark theme
*/
:root.skin-theme-clientpref-night {
ci: 👷 lint code to MediaWiki standards Check commit and GitHub actions for more details
2024-04-25 00:49:51 +00:00
.theme-dark-old();
ci: 👷 lint code to MediaWiki standards Check commit and GitHub actions for more details
2024-04-25 19:50:36 +00:00
}
refactor(core): ♻️ replace usage of skin-citizen-theme classes
2024-04-25 00:48:43 +00:00
@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os {
.theme-dark-old();
}
}
feat(core): ✨ re-implement responsive toc
2022-10-20 01:09:50 +00:00
feat(core): ✨ replace breakpoint LESS variables with Codex tokens Codex tokens are a better implementation and this should ensure consistency across the MW ecosystem. We have to keep a copy for now as they are introduced in 1.41. Related: #735
2023-11-16 22:55:23 +00:00
@media ( min-width: @min-width-breakpoint-tablet ) {
feat(core): ✨ responsive heading font sizes
2022-11-08 18:19:23 +00:00
:root {
feat(core): ✨ use CSS variables for x-small font sizes
2024-02-26 22:14:19 +00:00
--font-size-x-small: 0.8125rem;
feat(core)!: 💥 ✨ rework font-size CSS variables To align with Codex tokens, the old --font-size-hN CSS variables are renamed. Introduced new font size variables (x-small, small)
2024-02-26 21:54:58 +00:00
--font-size-large: 1.125rem;
--font-size-x-large: 1.25rem;
--font-size-xx-large: 1.5rem;
--font-size-xxx-large: 2rem;
feat(core): ✨ responsive heading font sizes
2022-11-08 18:19:23 +00:00
}
feat(core): ✨ responsive page padding
2022-11-16 23:45:45 +00:00
html {
--padding-page: @padding-page * 1.5;
}
feat(core): ✨ responsive heading font sizes
2022-11-08 18:19:23 +00:00
}
feat(core): ✨ replace breakpoint LESS variables with Codex tokens Codex tokens are a better implementation and this should ensure consistency across the MW ecosystem. We have to keep a copy for now as they are introduced in 1.41. Related: #735
2023-11-16 22:55:23 +00:00
@media ( min-width: @min-width-breakpoint-desktop ) {
feat(core): ✨ re-implement responsive toc
2022-10-20 01:09:50 +00:00
html {
feat(core): ✨ responsive page padding
2022-11-16 23:45:45 +00:00
--padding-page: @padding-page * 2;
feat(core): ✨ re-implement responsive toc
2022-10-20 01:09:50 +00:00
--header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )';
}
}
feat(core): ✨ update menu transition styles and implementation Same as the previous commit, the transition is now accessible as a CSS variable (transition-menu)
2023-07-07 21:02:27 +00:00
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
@media ( prefers-contrast: more ) {
:root {
--font-weight-normal: 500;
}
}
@media ( prefers-contrast: less ) {
:root {
--font-weight-normal: 300;
}
}
feat(core): ✨ update menu transition styles and implementation Same as the previous commit, the transition is now accessible as a CSS variable (transition-menu)
2023-07-07 21:02:27 +00:00
.citizen-animations-ready {
/* Only apply transition when page is ready for it */
--transition-menu: @transition-menu;
}
Reference in a new issue Copy permalink