rekt-theme/src/main/_smoke.scss

41 lines
1018 B
SCSS

// smoke effect
@if $icedream-fog-bg {
#main {
position: relative;
min-width: 100%;
max-width: 100%;
width: 100%;
overflow-x: hidden;
&::before {
opacity: .2;
background-image: url('../images/whitefog.png');
background-attachment: fixed;
content: ' '; // sass-lint:disable-line variable-for-property
position: absolute;
left: 0;
top: 0;
height: 100%;
min-width: 100%;
@if not($icedream-fog-bg-animated) {
background-size: 200% 100%;
}
// animate it so it moves right to left slowly?
@if $icedream-fog-bg-animated {
background-repeat: repeat-x;
background-size: 100% 100%;
animation: icedream-bg-slide linear $icedream-fog-bg-animation-length infinite;
transform: scale(2, 1) translateX(0);
transform-origin: left;
@keyframes icedream-bg-slide {
to {
transform: scale(2, 1) translateX(-50%);
}
}
}
}
}
}