status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add linear gradient for top image

This commit is contained in:
RadoslavDimchev 2023-12-13 09:17:04 +02:00
parent bc239e14a9
commit c3a5e9e328
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/PageWrappers/layout.css
View File

@ -14,7 +14,6 @@
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
}
.layout-left {
flex: 0 0 55%;
@ -26,7 +25,6 @@
flex-wrap: wrap;
justify-content: end;
height: 100%;
/* padding: 70px 0 0; */
}
.container-inner {
max-width: 70%;
@ -113,7 +111,7 @@
order: 0;
padding: 0;
margin-top: -10%;
margin-bottom: -70%;
margin-bottom: -72%;
}
.image-container {
@ -129,8 +127,8 @@
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%) translateY(-10%);
clip-path: inset(10% 0 70% 0);
transform: translateX(-50%) translateY(-5%);
clip-path: inset(0 0 85% 0);
height: auto;
}
@ -159,6 +157,13 @@
}
.image-container .background-img {
clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%);
clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
}
.image-container::after {
width: 100%;
right: 0;
left: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0));
}
}