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