commit e11923a9b03a9635c7ee9a5153e30b9b05c33ba2
parent 423f25a8decf67cc71edfa8234e1c3265064d7db
Author: MTRNord <mtrnord1@gmail.com>
Date: Sat, 10 Jun 2017 23:43:27 +0200
Possible fix to issue #1
Signed-off-by: MTRNord <mtrnord1@gmail.com>
Diffstat:
3 files changed, 453 insertions(+), 0 deletions(-)
diff --git a/flat_wide/css/_common.scss b/flat_wide/css/_common.scss
@@ -94,6 +94,7 @@ textarea {
*/
.gm-scrollbar-container .gm-scroll-view {
position: absolute;
+ z-index: 1;
}
/* Expand thumbs on hoverover */
diff --git a/flat_wide/css/matrix-react-sdk/views/rooms/_EventTile.scss b/flat_wide/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -0,0 +1,450 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 MTRNord <info@nordgedanken.de>
+
+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: 18px;
+ font-size: 14px;
+ position: relative;
+}
+
+.mx_EventTile.mx_EventTile_info {
+ padding-top: 0px;
+}
+
+.mx_EventTile_avatar {
+ position: absolute;
+ top: 14px;
+ left: 8px;
+ cursor: pointer;
+ z-index: 2;
+}
+
+.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+ top: 8px;
+ left: 65px;
+}
+
+.mx_EventTile_continuation {
+ padding-top: 0px ! important;
+}
+
+.mx_EventTile .mx_SenderProfile {
+ color: $primary-fg-color;
+ opacity: 0.5;
+ font-size: 14px;
+ display: block; /* anti-zalgo, with overflow hidden */
+ overflow-y: hidden;
+ cursor: pointer;
+ padding-left: 65px; /* left gutter */
+ padding-bottom: 0px;
+ padding-top: 0px;
+ margin: 0px;
+ line-height: 22px;
+}
+
+.mx_EventTile .mx_MessageTimestamp {
+ display: block;
+ visibility: hidden;
+ white-space: nowrap;
+ color: $event-timestamp-color;
+ font-size: 10px;
+ left: 0px;
+ width: 46px; /* 8 + 30 (avatar) + 8 */
+ text-align: center;
+ position: absolute;
+}
+
+.mx_EventTile_line {
+ position: relative;
+ /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
+ margin-right: 110px;
+ padding-left: 65px; /* left gutter */
+ padding-top: 4px;
+ padding-bottom: 2px;
+ border-radius: 4px;
+ min-height: 24px;
+ line-height: 22px;
+}
+
+.mx_EventTile_info .mx_EventTile_line {
+ padding-left: 83px;
+}
+
+/* HACK to override line-height which is already marked important elsewhere */
+.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
+ font-size: 48px ! important;
+ line-height: 48px ! important;
+}
+
+/* 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 .mx_EventTile_line {
+ border-left: $accent-color 5px solid;
+ padding-left: 60px;
+ background-color: $event-selected-color;
+}
+
+.mx_EventTile:hover .mx_EventTile_line,
+.mx_EventTile.menu .mx_EventTile_line
+{
+ background-color: $event-selected-color;
+ z-index: 1;
+}
+
+.mx_EventTile_searchHighlight {
+ background-color: $accent-color;
+ color: $accent-fg-color;
+ border-radius: 5px;
+ padding-left: 2px;
+ padding-right: 2px;
+ cursor: pointer;
+}
+
+.mx_EventTile_searchHighlight a {
+ background-color: $accent-color;
+ color: $accent-fg-color;
+}
+
+.mx_EventTile_encrypting {
+ color: $event-encrypting-color ! important;
+}
+
+.mx_EventTile_sending {
+ color: $event-sending-color;
+}
+
+.mx_EventTile_notSent {
+ color: $event-notsent-color;
+}
+
+.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody {
+ display: block;
+ width: 100%;
+ height: 36px;
+ background-image: $event-redacted-img;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+
+.mx_EventTile.mx_EventTile_redacted .mx_EventTile_line {
+ /*
+ Prevent changing colour of the background because
+ $event-redacted-img matches $primary-bg-color
+ */
+ background-color: initial !important;
+}
+
+.mx_EventTile_highlight,
+.mx_EventTile_highlight .markdown-body
+{
+ color: $warning-color;
+}
+
+.mx_EventTile_contextual {
+ opacity: 0.4;
+}
+
+.mx_EventTile_msgOption {
+ float: right;
+ text-align: right;
+ z-index: 1;
+ position: relative;
+ width: 90px;
+
+ /* Hack to stop the height of this pushing the messages apart.
+ Replaces margin-top: -6px. This interacts better with a read
+ marker being in between. Content overflows. */
+ height: 1px;
+
+ margin-right: 10px;
+}
+
+.mx_EventTile_msgOption a {
+ text-decoration: none;
+}
+
+.mx_EventTile_last .mx_MessageTimestamp,
+.mx_EventTile:hover .mx_MessageTimestamp,
+.mx_EventTile.menu .mx_MessageTimestamp
+{
+ visibility: visible;
+}
+
+.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
+ visibility: visible;
+}
+
+.mx_EventTile_selected .mx_MessageTimestamp {
+ left: 3px;
+ width: auto;
+}
+
+.mx_EventTile_editButton {
+ position: absolute;
+ display: inline-block;
+ visibility: hidden;
+ cursor: pointer;
+ top: 6px;
+ right: 6px;
+ width: 19px;
+ height: 19px;
+ background-image: url($edit-button-url);
+}
+
+.mx_EventTile:hover .mx_EventTile_editButton,
+.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;
+ top: 29px;
+}
+
+.mx_EventTile_continuation .mx_EventTile_readAvatars,
+.mx_EventTile_info .mx_EventTile_readAvatars,
+.mx_EventTile_emote .mx_EventTile_readAvatars {
+ top: 7px;
+}
+
+.mx_EventTile_readAvatars .mx_BaseAvatar {
+ position: absolute;
+ display: inline-block;
+}
+
+.mx_EventTile_readAvatarRemainder {
+ color: $event-timestamp-color;
+ font-size: 11px;
+ position: absolute;
+}
+
+/* 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;
+ margin-right: 34px;
+}
+
+/* De-zalgoing */
+.mx_EventTile_body {
+ overflow-y: hidden;
+}
+
+/* End to end encryption stuff */
+
+.mx_EventTile_e2eIcon {
+ display: block;
+ position: absolute;
+ top: 9px;
+ left: 46px;
+ z-index: 2;
+ cursor: pointer;
+}
+
+.mx_EventTile_12hr .mx_EventTile_e2eIcon {
+ padding-left: 5px;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+ padding-left: 60px;
+}
+
+.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
+ padding-left: 78px;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+ border-left: $e2e-verified-color 5px solid;
+}
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+ border-left: $e2e-unverified-color 5px solid;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
+ left: 3px;
+ width: auto;
+}
+
+/*
+.mx_EventTile_verified .mx_EventTile_e2eIcon {
+ display: none;
+}
+*/
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon {
+ display: block;
+ left: 41px;
+}
+
+/* Various markdown overrides */
+
+.mx_EventTile_content .markdown-body {
+ font-family: inherit ! important;
+ white-space: normal ! important;
+ line-height: inherit ! important;
+ color: inherit;
+ font-size: 14px;
+}
+
+/* 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 code {
+ background-color: #f8f8f8;
+}
+.mx_EventTile_copyButton {
+ position: absolute;
+ display: inline-block;
+ visibility: hidden;
+ cursor: pointer;
+ top: 6px;
+ right: 6px;
+ width: 19px;
+ height: 19px;
+ background-image: url($copy-button-url);
+}
+.mx_EventTile_body pre {
+ position: relative;
+}
+.mx_EventTile_body pre:hover .mx_EventTile_copyButton
+{
+ visibility: 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;
+}
+
+
+/* Make h1 and h2 the same size as h3. */
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2
+{
+ font-size: 1.5em;
+}
+
+.mx_EventTile_content .markdown-body a {
+ color: $accent-color;
+}
+
+.mx_EventTile_content .markdown-body .hljs {
+ display: inline ! important;
+}
+
+/* end of overrides */
+
+.mx_MatrixChat_useCompactLayout {
+ .mx_EventTile {
+ padding-top: 4px;
+ }
+
+ .mx_EventTile.mx_EventTile_info {
+ padding-top: 0px;
+ }
+
+ .mx_EventTile .mx_SenderProfile {
+ font-size: 13px;
+ }
+
+ .mx_EventTile.mx_EventTile_emote {
+ padding-top: 8px;
+ .mx_EventTile_avatar {
+ top: 2px;
+ }
+ .mx_EventTile_line {
+ padding-top: 0px;
+ padding-bottom: 1px;
+ }
+ }
+
+ .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
+ padding-top: 0;
+ .mx_EventTile_line {
+ padding-top: 0px;
+ padding-bottom: 0px;
+ }
+ }
+
+ .mx_EventTile_line {
+ padding-top: 0px;
+ padding-bottom: 0px;
+ }
+
+ .mx_EventTile_avatar {
+ top: 2px;
+ }
+
+ .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+ top: 5px;
+ }
+
+ .mx_EventTile_e2eIcon {
+ top: 7px;
+ }
+
+ .mx_EventTile_editButton {
+ top: 3px;
+ }
+
+ .mx_EventTile_readAvatars {
+ top: 27px;
+ }
+
+ .mx_EventTile_continuation .mx_EventTile_readAvatars,
+ .mx_EventTile_info .mx_EventTile_readAvatars,
+ .mx_EventTile_emote .mx_EventTile_readAvatars {
+ top: 5px;
+ }
+
+ .mx_RoomView_MessageList h2 {
+ margin-top: 6px;
+ }
+}
+\ No newline at end of file
diff --git a/flat_wide/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/flat_wide/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
@@ -26,6 +26,7 @@ limitations under the License.
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
+ z-index: 2;
}
}
}
