GIF attachments
This commit is contained in:
parent
5f17d01f49
commit
caf1d4c4da
15 changed files with 526 additions and 93 deletions
|
@ -663,6 +663,10 @@
|
|||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
.module-message__container--gif & {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__sticker-container {
|
||||
|
@ -4188,42 +4192,30 @@ button.module-conversation-details__action-button {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.module-image--tap-to-play,
|
||||
.module-image--not-downloaded {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
i {
|
||||
span {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 48px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-65;
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-75;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
@include color-svg('../images/icons/v2/arrow-down-24.svg', $color-white);
|
||||
}
|
||||
background-color: $color-black-alpha-70;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
background-color: $color-black;
|
||||
span {
|
||||
background-color: $color-black-alpha-80;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
i {
|
||||
span {
|
||||
background-color: $color-gray-75;
|
||||
border: 4px solid $ultramarine-ui-light;
|
||||
box-sizing: border-box;
|
||||
|
@ -4232,6 +4224,28 @@ button.module-conversation-details__action-button {
|
|||
}
|
||||
}
|
||||
|
||||
.module-image--not-downloaded {
|
||||
span:after {
|
||||
content: '';
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
@include color-svg('../images/icons/v2/arrow-down-24.svg', $color-white);
|
||||
}
|
||||
}
|
||||
|
||||
.module-image--tap-to-play {
|
||||
span:after {
|
||||
content: 'GIF';
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
@include font-body-1;
|
||||
line-height: 24px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.module-image__download-pending {
|
||||
position: relative;
|
||||
|
||||
|
@ -4336,6 +4350,26 @@ button.module-conversation-details__action-button {
|
|||
}
|
||||
}
|
||||
|
||||
.module-image--gif {
|
||||
border-radius: 18px;
|
||||
|
||||
&__filesize {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 2px 8px;
|
||||
|
||||
color: $color-white;
|
||||
background: $color-black-alpha-70;
|
||||
|
||||
/* The height is: 14px + 2x2px from the padding */
|
||||
border-radius: 9px;
|
||||
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// Only if it's a sticker do we put the outline inside it
|
||||
.module-message--selected
|
||||
.module-message__container--with-sticker
|
||||
|
@ -10677,6 +10711,11 @@ $contact-modal-padding: 18px;
|
|||
&--deleted-for-everyone {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&--gif {
|
||||
border-radius: inherit;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__context {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue