paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

message-feed: Add some styling to open graph previews.

Browse Source 
This adds some styling to make the open graph previews look a bit nicer,
including:

1. Adding a bottom fading gradient to slowly fade out text that is out
of bounds rather than chopping it off.
2. Using font anti-aliasing to make the characters appear smoother.
3. Increasing the font size of the title to give it prominence.
4. Changing the height to 80px from 70px.
This commit is contained in:
Brock Whittaker
2018-01-09 14:19:58 -08:00
committed by Tim Abbott
parent c415cc74d7
commit 06f3cb2b78
2 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/styles/dark.css
View File

@@ -19,6 +19,10 @@ body.dark-mode #settings_page .right {
background-color: hsl(212, 28%, 18%);
}
.message_embed .data-container::after {
background: linear-gradient(0deg, hsl(212, 28%, 18%), transparent 10%);
}
body.dark-mode .column-left .left-sidebar,
body.dark-mode #settings_page .form-sidebar,
body.dark-mode .column-right .right-sidebar {

31
static/styles/zulip.css
View File

@@ -2564,9 +2564,14 @@ button.topic_edit_cancel {
margin: 5px 0px;
border: none;
border-left: 3px solid hsl(0, 0%, 93%);
height: 70px;
height: 80px;
padding: 5px;
z-index: 1;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
.message_content .message_embed > * {
@@ -2578,17 +2583,16 @@ button.topic_edit_cancel {
.message_embed .message_embed_title {
padding-top: 0px;
/* to remove the spacing that the font has from the top of the container. */
margin-top: -1px;
margin-top: -5px;
font-size: 1em;
font-weight: 600;
font-size: 1.2em;
line-height: normal;
}
.message_embed .message_embed_description {
position: relative;
margin-top: -5px;
max-width: 500px;
margin-top: 3px;
/* to put it below the container gradient. */
z-index: -1;
@@ -2596,18 +2600,19 @@ button.topic_edit_cancel {
.message_embed .message_embed_image {
display: inline-block;
width: 60px;
height: 60px;
width: 70px;
height: 70px;
background-size: cover;
background-position: center;
}
.message_embed .data-container {
position: relative;
padding: 0px 5px;
display: inline-block;
vertical-align: top;
max-width: calc(100% - 115px);
max-height: 70px;
max-height: 80px;
overflow: hidden;
}
@@ -2616,6 +2621,16 @@ button.topic_edit_cancel {
border: none;
}
.message_embed .data-container::after {
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: linear-gradient(0deg, #fff, transparent 10%);
}
@media (max-width: 600px) {
.message_content .message_embed {
height: auto;