xarxaprod
/
xarxaprod-wp-theme
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added background colors as css elements

This commit is contained in:
jorge 2024-02-01 22:36:38 +01:00
parent ebdee1ff01
commit 9a37872926
1 changed files with 62 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
sass/base/elements/_body.scss
View File

@ -1,8 +1,66 @@
body { body {
background: $color__background-body; // Fallback for when there is no custom background color defined. background: $color__background-body; // Fallback for when there is no custom background color defined.
background-image: url(./assets/img/background-colors-02.jpg); //background-image: url(./assets/img/background-colors-02.jpg);
background-size: cover; //background-size: cover;
background-position: center center; //background-position: center center;
background-repeat: no-repeat; //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);
}