74 lines
No EOL
1.3 KiB
SCSS
74 lines
No EOL
1.3 KiB
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_game {
|
|
@extend .h_full_view;
|
|
background-color: hotpink;
|
|
|
|
footer {
|
|
@extend .pos_abs;
|
|
@extend .pin_bottom;
|
|
@extend .width_full;
|
|
|
|
.brand {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: hippie.$space_half hippie.$space_basic;
|
|
|
|
margin: hippie.$space_basic hippie.$space_double;
|
|
|
|
& > svg {
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.body_fpv {
|
|
@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;
|
|
}
|
|
} |