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

Merge pull request #268 from RogerDodger/feat/header-shadow

Browse source 
Change header shadow from box-shadow to a gradient
This commit is contained in:
alistair3149 2021-02-04 10:28:08 -05:00 committed by GitHub
parent c78bd5ff64 296691c2ab
commit 64c89ecbf1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
resources/skins.citizen.styles/Header.less
View file

@ -9,6 +9,11 @@
display: flex;
height: var( --height-header );
justify-content: space-between;
pointer-events: none;
& > * {
pointer-events: auto;
}
&-tools {
display: inherit;
@ -28,7 +33,21 @@
position: absolute;
right: 0;
left: 0;
box-shadow: 0 0 30px var( --height-header ) var( --background-color-dp-00 );
height: ~'calc( var( --height-header ) * 1.5 )';
/*
* ease(x) := 1 - pow(1 - x, 2);
*/
background-image: linear-gradient(to bottom,
~"rgba(var(--background-color-dp-00-rgb),1)" 0%,
~"rgba(var(--background-color-dp-00-rgb),0.988)" 11.11%,
~"rgba(var(--background-color-dp-00-rgb),0.951)" 22.22%,
~"rgba(var(--background-color-dp-00-rgb),0.889)" 33.33%,
~"rgba(var(--background-color-dp-00-rgb),0.802)" 44.44%,
~"rgba(var(--background-color-dp-00-rgb),0.691)" 55.56%,
~"rgba(var(--background-color-dp-00-rgb),0.556)" 66.67%,
~"rgba(var(--background-color-dp-00-rgb),0.395)" 77.78%,
~"rgba(var(--background-color-dp-00-rgb),0.210)" 88.89%,
~"rgba(var(--background-color-dp-00-rgb),0)" 100%);
content: '';
}
}

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

@ -10,6 +10,7 @@
*/
:root {
/* Background Colors */
--background-color-dp-00-rgb: red(@background-color-dp-00), green(@background-color-dp-00), blue(@background-color-dp-00);
--background-color-dp-00: @background-color-dp-00;
--background-color-dp-01: @background-color-dp-01;
--background-color-dp-02: @background-color-dp-02;
@ -86,6 +87,7 @@ html {
*/
:root.skin-citizen-dark {
/* Background Colors */
--background-color-dp-00-rgb: red(@dark-background-color-dp-00), green(@dark-background-color-dp-00), blue(@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-02: @dark-background-color-dp-02;