xarxaprod-wp-theme/sass/base/elements/_body.scss

67 lines
1.1 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;
}
.liquid {
overflow: hidden;
float: left;
position: fixed;
top: 0;
left: 0;
z-index: -1000;
width: 100vw;
height: 100vh;
}
.bubble {
--size: 40vw;
--position: -10vw;
position:absolute;
width: var(--size);
height: var(--size);
border-radius: 50%;
filter: blur(10rem);
&.top {
top: var(--position);
}
&.bottom {
bottom: var(--position);
}
&.left {
left: var(--position);
}
&.right {
right: var(--position);
}
&.top.left{
--bgangle: to bottom right;
}
&.top.right{
--bgangle: to bottom left;
}
&.bottom.left{
--bgangle: to top right;
}
&.bottom.right{
--bgangle: to top left;
}
&.red{
--bgcolor: rgb(255,0,0);
}
&.yellow{
--bgcolor: rgb(255,0,255);
}
&.blue{
--bgcolor: rgb(0,0,255);
}
&.green{
--bgcolor: rgb(0,255,0);
}
background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
}