element-web/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css

/*
Copyright 2015, 2016 OpenMarket 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_EventTile {
    max-width: 100%;
    clear: both;
    padding-top: 24px;
    margin-left: 65px;
}

.mx_EventTile_avatar {
    padding-left: 18px;
    padding-right: 12px;
    margin-left: -73px;
    margin-top: -2px;
    float: left;
    position: relative;
    top: 0px;
    cursor: pointer;
}

.mx_EventTile_continuation {
    padding-top: 8px ! important;
}

.mx_EventTile_verified {
    background-color: #eaf5f0;
}

.mx_EventTile_unverified {
    background-color: #ffa0a0;
}

.mx_EventTile .mx_SenderProfile {
    color: #454545;
    opacity: 0.5;
    display: inline-block;
    font-size: 13px;
    overflow-y: hidden;
    cursor: pointer;
}

.mx_EventTile .mx_MessageTimestamp {
    color: #acacac;
    font-size: 11px;
}

.mx_EventTile_line {
    position: relative;
    /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
    margin-right: 95px;
}

/* all the overflow-y: hidden; are to trap Zalgos -
   but they introduce an implicit overflow-x: auto.
   so make that explicitly hidden too to avoid random
   horizontal scrollbars occasionally appearing, like in
   https://github.com/vector-im/vector-web/issues/1154
    */
.mx_EventTile_content {
    display: block;
    overflow-y: hidden;
    overflow-x: hidden;
}

/* De-zalgoing */
.mx_EventTile_body {
    overflow-y: hidden;
}

/* Various markdown overrides */

.mx_EventTile_content .markdown-body {
    font-family: inherit ! important;
    white-space: normal ! important;
    line-height: inherit ! important;
    color: inherit;
    font-size: 15px;
}

/* have to use overlay rather than auto otherwise Linux and Windows
   Chrome gets very confused about vertical spacing:
   https://github.com/vector-im/vector-web/issues/754
*/
.mx_EventTile_content .markdown-body pre {
    overflow-x: overlay;
    overflow-y: visible;
}

.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2,
.mx_EventTile_content .markdown-body h3,
.mx_EventTile_content .markdown-body h4,
.mx_EventTile_content .markdown-body h5,
.mx_EventTile_content .markdown-body h6
{
    font-family: inherit ! important;
}

.mx_EventTile_content .markdown-body a {
    color: #76cfa6;
}

.mx_EventTile_content .markdown-body .hljs {
    display: inline ! important;
}

/* end of overrides */

.mx_EventTile_bigEmoji {
    font-size: 48px;
}

/* this is used for the tile for the event which is selected via the URL.
 * TODO: ultimately we probably want some transition on here.
 */
.mx_EventTile_selected {
    border-left: #76cfa6 5px solid;
    margin-left: 53px;
    padding-left: 7px;
}

.mx_EventTile_searchHighlight {
    background-color: #76cfa6;
    color: #fff;
    border-radius: 5px;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
}

.mx_EventTile_searchHighlight a {
    background-color: #76cfa6;
    color: #fff;
}

.mx_EventTile_sending {
    color: #ddd;
}

.mx_EventTile_notSent {
    color: #f44;
}

.mx_EventTile_highlight,
.mx_EventTile_highlight .markdown-body
 {
    color: #FF0064;
}

.mx_EventTile_contextual {
    opacity: 0.4;
}

.mx_EventTile_msgOption {
    float: right;
    text-align: right;
    z-index: 1;
    position: relative;
    width: 90px;
    height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */
    margin-right: 10px;
}

.mx_EventTile_msgOption a {
    text-decoration: none;
}

.mx_EventTile .mx_MessageTimestamp {
    display: block;
    visibility: hidden;
    text-align: right;
    white-space: nowrap;
}

.mx_EventTile_last .mx_MessageTimestamp {
    visibility: visible;
}

.mx_EventTile:hover .mx_MessageTimestamp {
    visibility: visible;
}

.mx_EventTile_editButton {
    position: absolute;
    display: inline-block;
    visibility: hidden;
}

.mx_EventTile:hover .mx_EventTile_editButton {
    visibility: visible;
}

.mx_EventTile.menu .mx_EventTile_editButton {
    visibility: visible;
}

.mx_EventTile.menu .mx_MessageTimestamp {
    visibility: visible;
}

.mx_EventTile_readAvatars {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
}

.mx_EventTile_readAvatars .mx_BaseAvatar {
    position: absolute;
    display: inline-block;
}

.mx_EventTile_readAvatarRemainder {
    color: #acacac;
    font-size: 11px;
    position: absolute;
}