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

refactor: convert page width to css var

Browse source
This commit is contained in:
alistair3149 2021-01-16 16:14:04 -05:00
parent 3fe4863170
commit ffad106fa3
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
5 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/mixins.less
View file

@ -11,7 +11,7 @@
// Set content to be at the center // Set content to be at the center
.content-center() { .content-center() {
max-width: @page-width; max-width: var( --width-layout );
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }

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

@ -2,7 +2,7 @@
position: absolute; position: absolute;
z-index: 1; z-index: 1;
display: flex; display: flex;
transform: translateX( ~'calc( (100vw - @{page-width}) / 2 - @{margin-side} * 2 - 100%)' ); // magic transform: translate3d( ~'calc( (100vw - var( --width-layout )) / 2 - var( --padding-page ) * 2 - 100%)', 0, 0 ); // magic
ul { ul {
display: flex; display: flex;

2
resources/skins.citizen.styles/common/content.less
View file

@ -257,7 +257,7 @@
> div.tnone, > div.tnone,
> div.floatnone, > div.floatnone,
> table.floatnone { > table.floatnone {
margin: 0.6rem ~'calc((100vw - @{page-width}) / -2)'; margin: 0.6rem ~'calc((100vw - var( --width-layout )) / -2)';
a.image, a.image,
a.image > img { a.image > img {

15
resources/skins.citizen.styles/common/rootvariables.less
View file

@ -9,7 +9,6 @@
* Base theme * Base theme
*/ */
:root { :root {
/* == Colors == */
/* Background Colors */ /* Background Colors */
--background-color-dp-00: @background-color-dp-00; --background-color-dp-00: @background-color-dp-00;
--background-color-dp-01: @background-color-dp-01; --background-color-dp-01: @background-color-dp-01;
@ -62,10 +61,6 @@
/* Size */ /* Size */
--size-icon: @size-icon; --size-icon: @size-icon;
--height-header: @height-header;
/* Paddings */
--padding-page: @padding-page;
/* Border Colors */ /* Border Colors */
--border-color-base: @border-color-base; --border-color-base: @border-color-base;
@ -75,11 +70,19 @@
--border-color-input--hover: @border-color-input--hover; --border-color-input--hover: @border-color-input--hover;
} }
html {
/* Size */
--height-header: @height-header;
--width-layout: @width-layout;
/* Paddings */
--padding-page: @padding-page;
}
/** /**
* Dark theme * Dark theme
*/ */
:root.skin-citizen-dark { :root.skin-citizen-dark {
/* == Colors == */
/* Background Colors */ /* Background Colors */
--background-color-dp-00: @dark-background-color-dp-00; --background-color-dp-00: @dark-background-color-dp-00;
--background-color-dp-01: @dark-background-color-dp-01; --background-color-dp-01: @dark-background-color-dp-01;

1
resources/variables.less
View file

@ -102,6 +102,7 @@
/* `--*size` variables are used for `*width` & `*height` properties. */ /* `--*size` variables are used for `*width` & `*height` properties. */
@size-icon: 20px; @size-icon: 20px;
@height-header: 56px; @height-header: 56px;
@width-layout: 860px;
/* Paddings */ /* Paddings */
@padding-page: 20px; @padding-page: 20px;