element-web/res/css/views/messages/_EventTileBubble.scss
Suguru Hirahara b1f8d36a69
Re-add margin to tiles based on EventTileBubble (#9015)
* Re-add margin to HistoryTile, which is based on EventTileBubble

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Readd margin to the other tiles based on EventTileBubble

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Default margin is not required for mx_MJitsiWidgetEvent as it appears inside EventTile

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Cancel left value for cryptoEvent on IRC layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-07-08 09:58:49 +01:00

67 lines
1.8 KiB
SCSS

/*
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
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_EventTileBubble {
--EventTileBubble_margin-block: 10px; // TODO: Use a spacing variable
background-color: $dark-panel-bg-color;
padding: 10px; // TODO: Use a spacing variable
border-radius: 8px;
// Reserve space for external timestamps, but also cap the width
max-width: min(calc(100% - 2 * $MessageTimestamp_width), 600px);
box-sizing: border-box;
display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content min-content;
&::before,
&::after {
position: relative;
grid-column: 1;
grid-row: 1 / 3;
width: 16px;
height: 16px;
content: "";
inset: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
margin-top: $spacing-4;
}
.mx_EventTileBubble_title,
.mx_EventTileBubble_subtitle {
grid-column: 2;
overflow-wrap: break-word;
}
.mx_EventTileBubble_title {
font-weight: 600;
font-size: $font-15px;
grid-row: 1;
}
.mx_EventTileBubble_subtitle {
font-size: $font-12px;
grid-row: 2;
}
.mx_MessageTimestamp {
grid-column: 4;
grid-row: 1 / 3;
align-self: center;
margin-left: $spacing-16;
}
}