diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 0ae5af160..0bcc48c3b 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -48,6 +48,7 @@ @import "./matrix-react-sdk/views/messages/_MEmoteBody.scss"; @import "./matrix-react-sdk/views/messages/_MFileBody.scss"; @import "./matrix-react-sdk/views/messages/_MImageBody.scss"; +@import "./matrix-react-sdk/views/messages/_MStickerBody.scss"; @import "./matrix-react-sdk/views/messages/_MNoticeBody.scss"; @import "./matrix-react-sdk/views/messages/_MTextBody.scss"; @import "./matrix-react-sdk/views/messages/_RoomAvatarEvent.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss index 9d26cacbf..bf483feda 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss @@ -18,11 +18,3 @@ limitations under the License. display: block; margin-right: 34px; } - -.mx_MImageBody_thumbnail_container { - display: inline-block; -} - -img.mx_MImageBody_thumbnail { - max-width: 100%; -} diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/_MStickerBody.scss b/src/skins/vector/css/matrix-react-sdk/views/messages/_MStickerBody.scss new file mode 100644 index 000000000..29b77f884 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/messages/_MStickerBody.scss @@ -0,0 +1,48 @@ +/* +Copyright 2018 New Vector Ltd. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_MStickerBody { + display: block; + margin-right: 34px; + min-height: 110px; +} + +.mx_MStickerBody_thumbnail_container { + display: inline-block; + position: relative; +} + +.mx_MStickerBody_thumbnail { + max-width: 100%; + transition: 500ms; + opacity: 0; +} + +.mx_MStickerBody_thumbnail_visible { + transition: 500ms; + opacity: 1; +} + +.mx_MStickerBody_placeholder { + position: absolute; + transition: 500ms; + opacity: 1; +} + +.mx_MStickerBody_placeholder_invisible { + transition: 500ms; + opacity: 0; +}