Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Update css of landing page images to show fading effect. 

This commit adds the css class - "message-screenshot" and
"message-starred" to the "landing_page" to exhibit fading
effect.
This commit is contained in:
roanster007 2024-06-18 21:36:54 +05:30 committed by Tim Abbott
parent 00d127965e
commit 90c44d63b7
1 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/styles/portico/landing_page.css
View File

@ -2265,7 +2265,8 @@ button {
} }
} }
.feature-image { .feature-image,
.message-screenshot {
& img, & img,
div.quote { div.quote {
width: 400px; width: 400px;
@ -2284,6 +2285,34 @@ button {
} }
} }
.message-screenshot {
position: relative;
img {
display: block;
mask-image: linear-gradient(
to right,
hsl(0deg 0% 0%) 75%,
transparent 100%
);
}
margin-bottom: 10px;
}
/* message-starred is used when the message screenshot captured using
the script "generate-user-message-screenshot" contains starred message.
This is done to reduce the fading effect on the image caused by
".message-screenshot" class so that the star is visible. */
.message-starred {
img {
mask-image: linear-gradient(
to right,
hsl(0deg 0% 0%) 95%,
transparent 100%
);
}
}
.feature-icon { .feature-icon {
& img, & img,
div.quote { div.quote {