49 lines
902 B
SCSS
49 lines
902 B
SCSS
|
@use 'sass:list';
|
||
|
|
@use "sass:map";
|
||
|
|
|
||
|
|
@use "../../hippie-style/hippie";
|
||
|
|
|
||
|
|
$colors: hippie.$color_palette;
|
||
|
|
$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
|
||
|
|
|
||
|
|
@function getColor($index, $colors) {
|
||
|
|
$color_keys: map.keys($colors);
|
||
|
|
$key_count: list.length($color_keys);
|
||
|
|
$cycled_index: ($index % $key_count) + 1;
|
||
|
|
$key: list.nth($color_keys, $cycled_index);
|
||
|
|
@return map.get($colors, $key);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin fadeColors($steps, $colors) {
|
||
|
|
@keyframes fadeColor {
|
||
|
|
@for $i from 1 through list.length($steps) {
|
||
|
|
$percent: list.nth($steps, $i);
|
||
|
|
$color: getColor($i - 1, $colors);
|
||
|
|
|
||
|
|
#{$percent}% {
|
||
|
|
background-color: $color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
animation: fadeColor 16s infinite linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body_mwo {
|
||
|
|
@extend .h_full_view;
|
||
|
|
|
||
|
|
canvas {
|
||
|
|
@include fadeColors($steps, $colors);
|
||
|
|
|
||
|
|
display: block;
|
||
|
|
cursor: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.controls {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
border-radius: hippie.$radius_basic;
|
||
|
|
}
|
||
|
|
}
|