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

157 lines
4.6 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
*/
@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 {
feat: convert drawer menu to overlay menu
2021-01-29 16:47:33 +00:00
--background-color-overlay: @background-color-overlay;
feat: rewrite core MW gallery styles
2021-03-05 18:43:11 +00:00
--background-color-overlay--lighter: @background-color-overlay--lighter;
feat: convert drawer menu to overlay menu
2021-01-29 16:47:33 +00:00
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
--background-color-destructive: @background-color-destructive;
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
--background-color-warning: @background-color-warning;
--background-color-success: @background-color-success;
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
/* Foreground Colors */
--color-base: @color-base;
--color-base--emphasized: @color-base--emphasized;
--color-base--subtle: @color-base--subtle;
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;
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: 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;
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
/* Border Colors */
--border-color-base: @border-color-base;
--border-color-base--lighter: @border-color-base--lighter;
--border-color-base--darker: @border-color-base--darker;
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
--border-color-input: @border-color-input;
--border-color-input--hover: @border-color-input--hover;
feat: convert font family to root CSS variable
2021-03-09 18:13:49 +00:00
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 */
--font-family-base: @fonts;
--font-family-serif: @fonts-serif;
--font-family-monospace: @fonts-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): ✨ responsive heading font sizes
2022-11-08 18:19:23 +00:00
--font-size-h1: 1.75rem;
--font-size-h2: 1.375rem;
--font-size-h3: 1.125rem;
--font-size-h4: 1rem;
--font-size-h5: 1rem;
--font-size-h6: 1rem;
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;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
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;
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
}
doc: bump version to 1.2.0
2021-01-12 23:23:58 +00:00
/**
* Dark theme
*/
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
:root.skin-citizen-dark {
--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;
--background-color-destructive: @dark-background-color-destructive;
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
--background-color-warning: @dark-background-color-warning;
--background-color-success: @dark-background-color-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: 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
/* Border Colors */
--border-color-base: @dark-border-color-base;
--border-color-base--lighter: @dark-border-color-base--lighter;
--border-color-base--darker: @dark-border-color-base--darker;
feat: rework OOUI core styles
2021-01-14 20:27:06 +00:00
--border-color-input: @dark-border-color-input;
--border-color-input--hover: @dark-border-color-input--hover;
refactor: merge CSS variables in core styles
2021-01-12 19:31:35 +00:00
}
feat(core): ✨ re-implement responsive toc
2022-10-20 01:09:50 +00:00
feat(core): ✨ responsive heading font sizes
2022-11-08 18:19:23 +00:00
@media ( min-width: @width-breakpoint-tablet ) {
:root {
--font-size-h1: 2rem;
--font-size-h2: 1.5rem;
--font-size-h3: 1.25rem;
--font-size-h4: 1.125rem;
}
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): ✨ re-implement responsive toc
2022-10-20 01:09:50 +00:00
@media ( min-width: @width-breakpoint-desktop ) {
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 )';
}
}
Reference in a new issue Copy permalink