Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Tidy up styles on _EventTile.scss (#8882)

Browse Source 
* Tidy up styles

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

* Tidy up styles

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

* Include in mx_EventTile_body pre

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

* Include in mx_EventTile_line

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

* Use spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-27 06:38:17 +00:00 committed by GitHub
parent 97a9af42d5
commit 7d3c750247
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
res/css/views/rooms/_EventTile.scss
View File

@ -243,11 +243,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
cursor: pointer; cursor: pointer;
}
.mx_EventTile_searchHighlight a { a {
background-color: $accent; background-color: $accent;
color: $accent-fg-color; color: $accent-fg-color;
}
} }
&.mx_EventTile_contextual { &.mx_EventTile_contextual {
@ -264,10 +264,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
Replaces margin-top: -6px. This interacts better with a read Replaces margin-top: -6px. This interacts better with a read
marker being in between. Content overflows. */ marker being in between. Content overflows. */
height: 1px; height: 1px;
}
.mx_EventTile_msgOption a { a {
text-decoration: none; text-decoration: none;
}
} }
/* De-zalgoing */ /* De-zalgoing */
@ -538,8 +538,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
} }
} }
/* Various markdown overrides */
.mx_EventTile_body { .mx_EventTile_body {
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
@ -547,6 +545,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
pre { pre {
border: 1px solid transparent; border: 1px solid transparent;
.mx_EventTile:hover &,
.mx_EventTile.focus-visible:focus-within & {
border: 1px solid $tertiary-content;
}
} }
// selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity // selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity
@ -554,16 +557,50 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
object-fit: contain; object-fit: contain;
object-position: left top; object-position: left top;
} }
}
.mx_EventTile_clamp { .mx_EventTile_clamp & {
.mx_EventTile_body {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
} }
.mx_EventTile_pre_container {
// For correct positioning of _copyButton (See TextualBody)
position: relative;
&:focus-within,
&:hover {
.mx_EventTile_button {
visibility: visible;
}
}
.mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
}
// Inserted adjacent to <pre> blocks, (See TextualBody)
.mx_EventTile_button {
position: absolute;
top: $spacing-8;
right: $spacing-8;
width: 19px;
height: 19px;
visibility: hidden;
background-color: $message-action-bar-fg-color;
&.mx_EventTile_buttonBottom {
top: 33px;
}
&.mx_EventTile_collapseButton,
&.mx_EventTile_expandButton {
mask-size: 75%;
}
}
}
} }
.mx_EventTile_lineNumbers { .mx_EventTile_lineNumbers {
@ -578,11 +615,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
} }
} }
.mx_EventTile:hover .mx_EventTile_body pre,
.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
border: 1px solid $tertiary-content;
}
.mx_EventTile_button { .mx_EventTile_button {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -606,44 +638,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
} }
.mx_EventTile_body .mx_EventTile_pre_container {
// For correct positioning of _copyButton (See TextualBody)
position: relative;
&:focus-within,
&:hover {
.mx_EventTile_button {
visibility: visible;
}
}
.mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
}
// Inserted adjacent to <pre> blocks, (See TextualBody)
.mx_EventTile_button {
position: absolute;
top: 8px;
right: 8px;
width: 19px;
height: 19px;
visibility: hidden;
background-color: $message-action-bar-fg-color;
&.mx_EventTile_buttonBottom {
top: 33px;
}
&.mx_EventTile_collapseButton,
&.mx_EventTile_expandButton {
mask-size: 75%;
}
}
}
/* end of overrides */
.mx_EventTile_keyRequestInfo { .mx_EventTile_keyRequestInfo {
font-size: $font-12px; font-size: $font-12px;
@ -685,10 +679,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile_line { .mx_EventTile_line {
padding-left: 0; padding-left: 0;
margin-right: 0; margin-right: 0;
}
.mx_EventTile_line span { span {
padding: 4px 8px; padding: $spacing-4 $spacing-8;
}
} }
a { a {