diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css index 6c868b8d18..3b63aeaf31 100644 --- a/src/skins/vector/css/common.css +++ b/src/skins/vector/css/common.css @@ -128,10 +128,13 @@ a:visited { max-width: 75%; } -.mx_ImageView { - margin: 6px; - /* hack: flexbox bug? */ - margin-bottom: 4px; +.mx_Dialog_lightbox .mx_Dialog_background { + opacity: 0.85; +} + +.mx_Dialog_lightbox .mx_Dialog { + border-radius: 0px; + background-color: #000; } .mx_Dialog_content { diff --git a/src/skins/vector/views/molecules/MImageTile.js b/src/skins/vector/views/molecules/MImageTile.js index 59d9cfde7e..7984921d4e 100644 --- a/src/skins/vector/views/molecules/MImageTile.js +++ b/src/skins/vector/views/molecules/MImageTile.js @@ -61,7 +61,7 @@ module.exports = React.createClass({ src: httpUrl, width: content.info.w, height: content.info.h - }); + }, "mx_Dialog_lightbox"); } }, @@ -70,7 +70,7 @@ module.exports = React.createClass({ var cli = MatrixClientPeg.get(); var thumbHeight = null; - if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, 320, 240); + if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, 480, 360); var imgStyle = {}; if (thumbHeight) imgStyle['height'] = thumbHeight; @@ -78,7 +78,7 @@ module.exports = React.createClass({ return ( - {content.body} + {content.body}