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

feat(core): ✨ add pill and circle border radius variables

Browse source
This commit is contained in:
alistair3149 2022-11-15 11:21:04 -05:00
parent 6bc611adcd
commit d238e932a1
No known key found for this signature in database
8 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/skins.citizen.styles/Pagetools.less
View file

@ -124,7 +124,7 @@
left: 55%; left: 55%;
display: block; display: block;
padding: 0.1em 0.4em; padding: 0.1em 0.4em;
border-radius: 100px; border-radius: var( --border-radius--pill );
background: var( --color-primary ); background: var( --color-primary );
color: #fff; color: #fff;
content: attr( data-counter-text ); content: attr( data-counter-text );

2
resources/skins.citizen.styles/TableOfContents.less
View file

@ -80,7 +80,7 @@
&__indicator { &__indicator {
width: 3px; width: 3px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 1000px; border-radius: var( --border-radius--pill );
margin-left: -2px; margin-left: -2px;
} }

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

@ -62,6 +62,7 @@
--border-radius--small: @border-radius--small; --border-radius--small: @border-radius--small;
--border-radius--medium: @border-radius--medium; --border-radius--medium: @border-radius--medium;
--border-radius--large: @border-radius--large; --border-radius--large: @border-radius--large;
--border-radius--pill: @border-radius--pill;
/* Fonts */ /* Fonts */
--font-family-base: @fonts; --font-family-base: @fonts;

2
resources/skins.citizen.styles/skinning/interface.category.less
View file

@ -32,7 +32,7 @@
display: block; display: block;
padding: var( --space-xs ) var( --space-md ); padding: var( --space-xs ) var( --space-md );
border: 1px solid var( --border-color-base--darker ); border: 1px solid var( --border-color-base--darker );
border-radius: 9999px; border-radius: var( --border-radius--pill );
color: var( --color-base--subtle ); color: var( --color-base--subtle );
transition: @transition-background; transition: @transition-background;

2
resources/variables.less
View file

@ -253,6 +253,8 @@
@border-radius--small: 4px; @border-radius--small: 4px;
@border-radius--medium: @border-radius--small * 2; @border-radius--medium: @border-radius--small * 2;
@border-radius--large: @border-radius--small * 3; @border-radius--large: @border-radius--small * 3;
@border-radius--pill: 9999px;
@border-radius--circle: 100%;
/* Transitions */ /* Transitions */
@transition-timing-fast: 100ms; @transition-timing-fast: 100ms;

2
skinStyles/extensions/Echo/ext.echo.styles.badge.less
View file

@ -42,7 +42,7 @@
&:after { &:after {
top: 0; top: 0;
border-color: var( --color-destructive ); border-color: var( --color-destructive );
border-radius: 100px; border-radius: var( --border-radius--pill );
background-color: var( --color-destructive ); background-color: var( --color-destructive );
font-size: 0.65rem; font-size: 0.65rem;
} }

2
skinStyles/extensions/TimedMediaHandler/ext.tmh.player.styles.less
View file

@ -12,7 +12,7 @@
position: relative; position: relative;
top: 50%; top: 50%;
border-color: var( --border-color-base--lighter ); border-color: var( --border-color-base--lighter );
border-radius: 100px; border-radius: var( --border-radius--pill );
margin: 0 auto; margin: 0 auto;
background-color: var( --color-surface-1 ); background-color: var( --color-surface-1 );

2
skinStyles/mediawiki/action/mediawiki.action.view.filepage.less
View file

@ -60,7 +60,7 @@
display: inline-block; display: inline-block;
padding: var( --space-xxs ) var( --space-md ); padding: var( --space-xxs ) var( --space-md );
border: 1px solid var( --border-color-base ); border: 1px solid var( --border-color-base );
border-radius: 100px; border-radius: var( --border-radius--pill );
margin: var( --space-xxs ); margin: var( --space-xxs );
background-color: var( --color-surface-0 ); background-color: var( --color-surface-0 );
color: var( --color-base--subtle ); color: var( --color-base--subtle );