67 lines
1.1 KiB
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,255,0);
|
|
}
|
|
&.blue{
|
|
--bgcolor: rgb(0,0,255);
|
|
}
|
|
&.green{
|
|
--bgcolor: rgb(0,255,0);
|
|
}
|
|
background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
|
|
}
|