80 lines
1.9 KiB
SCSS
80 lines
1.9 KiB
SCSS
body {
|
|
background: $color__background-body; // Fallback for when there is no custom background color defined.
|
|
//background-image: url(./assets/img/background-colors-02.jpg);
|
|
//background-size: cover;
|
|
//background-position: center center;
|
|
//background-repeat: no-repeat;
|
|
position: relative;
|
|
&.admin-bar { //if else breaks the WordPress inline styles when front end editing
|
|
position: inherit;
|
|
}
|
|
}
|
|
.liquid-bubbles {
|
|
overflow: hidden;
|
|
float: left;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1000;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
}
|
|
@keyframes bubble-move {
|
|
from {
|
|
width: 40vw;
|
|
height: 40vw;
|
|
filter: blur(10rem);
|
|
/* transform: rotate(0);*/
|
|
}
|
|
to {
|
|
width: 90vw;
|
|
height: 20vw;
|
|
filter: blur(20rem);
|
|
/* transform: rotate(5deg);*/
|
|
}
|
|
}
|
|
.bubbles {
|
|
--size: 40vw;
|
|
--position: -5vw;
|
|
filter: blur(20rem);
|
|
position:absolute;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
border-radius: 20%;
|
|
background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
|
|
//animation: 4s ease-in-out 4s infinite alternate bubble-move;
|
|
&.bubble-01{
|
|
top: var(--position);
|
|
left: var(--position);
|
|
--bgcolor: var(--bubble-color-01);
|
|
//--bgangle: to bottom right;
|
|
--bgangle: 135deg;
|
|
animation: 5s ease-in-out 2s infinite alternate bubble-move;
|
|
}
|
|
&.bubble-02{
|
|
top: var(--position);
|
|
right: var(--position);
|
|
--bgcolor: var(--bubble-color-02);
|
|
//--bgangle: to bottom left;
|
|
--bgangle: 225deg;
|
|
animation: 3s ease-in-out 0s infinite alternate bubble-move;
|
|
}
|
|
&.bubble-03{
|
|
bottom: var(--position);
|
|
left: var(--position);
|
|
--bgcolor: var(--bubble-color-03);
|
|
//--bgangle: to top right;
|
|
--bgangle: 45deg;
|
|
animation: 2s ease-in-out 3s infinite alternate bubble-move;
|
|
}
|
|
&.bubble-04{
|
|
bottom: var(--position);
|
|
right: var(--position);
|
|
--bgcolor: var(--bubble-color-04);
|
|
//--bgangle: to top left;
|
|
--bgangle: 325deg;
|
|
animation: 4s ease-in-out 1s infinite alternate bubble-move;
|
|
}
|
|
}
|