cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-06-06 04:44:16 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Smooth gradient for headers

Browse source
This commit is contained in:
Carlos Fernandez 2026-05-24 21:02:56 -04:00
parent 0a45b75df5
commit 799ecb86e6
6 changed files with 124 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

67
styles/less/utils/mixin.less
View file

@ -114,3 +114,70 @@
font-family: @font-body;
}
}
// A simple ease-out mask
.smooth-gradient-ease-out(@param, @to, @destination, @length) {
@{param}+: linear-gradient(
@to,
transparent 0%,
rgb(from @destination r g b / ~"calc(alpha * 0.013)") calc(0.008 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.049)") calc(0.029 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.104)") calc(0.064 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.259)") calc(0.166 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.45)") calc(0.304 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.741)") calc(0.554 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.825)") calc(0.644 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.896)") calc(0.735 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.951)") calc(0.825 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.987)") calc(0.914 * @length),
@destination @length
);
}
/**
* A simple ease in and out mask.
* @param - the parameter to add to
* @param - direction, such as "to top"
* @destination - the color at the destination. The origin is always transparent
* @length - the value at the destination
*/
.smooth-gradient-ease-in-out(@param, @to, @destination, @length: 100%) {
@{param}+: linear-gradient(
@to,
transparent 0%,
rgb(from @destination r g b / ~"calc(alpha * 0.013)") calc(0.081 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.049)") calc(0.155 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.104)") calc(0.225 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.259)") calc(0.353 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.45)") calc(0.471 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.741)") calc(0.647 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.825)") calc(0.71 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.896)") calc(0.775 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.951)") calc(0.845 * @length),
rgb(from @destination r g b / ~"calc(alpha * 0.987)") calc(0.914 * @length),
@destination @length
);
}
// .forNow {
// linear-gradient(
// to top,
// hsla(0, 0%, 0%, 0) 0%,
// hsla(0, 0%, 0%, 0.013) 0.8%,
// hsla(0, 0%, 0%, 0.049) 2.9%,
// hsla(0, 0%, 0%, 0.104) 6.4%,
// hsla(0, 0%, 0%, 0.175) 11%,
// hsla(0, 0%, 0%, 0.259) 16.6%,
// hsla(0, 0%, 0%, 0.352) 23.1%,
// hsla(0, 0%, 0%, 0.45) 30.4%,
// hsla(0, 0%, 0%, 0.55) 38.3%,
// hsla(0, 0%, 0%, 0.648) 46.7%,
// hsla(0, 0%, 0%, 0.741) 55.4%,
// hsla(0, 0%, 0%, 0.825) 64.4%,
// hsla(0, 0%, 0%, 0.896) 73.5%,
// hsla(0, 0%, 0%, 0.951) 82.5%,
// hsla(0, 0%, 0%, 0.987) 91.4%,
// hsl(0, 0%, 0%) 100%
// );
// };