mirror of
https://github.com/element-hq/element-web
synced 2024-11-23 09:46:09 +03:00
Merge styles of mx_EventTile_content for maintainability (#8605)
* Include mx_EventTile_edited in mx_EventTile_content Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include mx_EventTile_pendingModeration in mx_EventTile_content Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules of mx_EventTile_edited and mx_EventTile_pendingModeration Except "cursor: pointer" of mx_EventTile_edited Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include markdown-body in mx_EventTile_content Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include 'pre code' in 'pre' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include 'mx_EventTile_content' in 'mx_EventTile_content' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include 'mx_EventTile_content .markdown-body' header in 'mx_EventTile_content' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Include 'mx_EventTile_content .markdown-body' a, blockquote, and em in 'mx_EventTile_content' Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove a comment on selector 'code' There is technically nothing wrong that a declaration for 'code' is inherited to 'pre code'. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara
GitHub
parent
ce73b9988e
commit
8d59612c74
1 changed files with 97 additions and 100 deletions
|
|
@ -301,15 +301,107 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
|
||||
}
|
||||
|
||||
/* all the overflow-y: hidden; are to trap Zalgos -
|
||||
.mx_EventTile_content {
|
||||
/*
|
||||
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 {
|
||||
https://github.com/vector-im/vector-web/issues/1154
|
||||
*/
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
margin-right: 34px;
|
||||
|
||||
.mx_EventTile_edited,
|
||||
.mx_EventTile_pendingModeration {
|
||||
user-select: none;
|
||||
font-size: $font-12px;
|
||||
color: $roomtopic-color;
|
||||
display: inline-block;
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.mx_EventTile_edited {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
font-family: inherit !important;
|
||||
white-space: normal !important;
|
||||
line-height: inherit !important;
|
||||
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
|
||||
font-size: $font-14px;
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: $monospace-font-family !important;
|
||||
background-color: $codeblock-background-color;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre-wrap; // don't collapse spaces in inline code blocks
|
||||
}
|
||||
|
||||
pre {
|
||||
// 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
|
||||
overflow-x: overlay;
|
||||
overflow-y: visible;
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre; // we want code blocks to be scrollable and not wrap
|
||||
|
||||
> * {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: inherit !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Make h1 and h2 the same size as h3. */
|
||||
h1,
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
border-bottom: none !important; // override GFM
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accent-alt;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid $blockquote-bar-color;
|
||||
border-radius: 2px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
// actually, removing the Italic TTF provides
|
||||
// better results seemingly
|
||||
|
||||
// compensate for Nunito italics being terrible
|
||||
// https://github.com/google/fonts/issues/1726
|
||||
em {
|
||||
transform: skewX(-14deg);
|
||||
display: inline-block;
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
/* Spoiler stuff */
|
||||
|
|
@ -386,23 +478,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_content .mx_EventTile_edited {
|
||||
user-select: none;
|
||||
font-size: $font-12px;
|
||||
color: $roomtopic-color;
|
||||
display: inline-block;
|
||||
margin-left: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .mx_EventTile_pendingModeration {
|
||||
user-select: none;
|
||||
font-size: $font-12px;
|
||||
color: $roomtopic-color;
|
||||
display: inline-block;
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
|
|
@ -479,45 +554,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body {
|
||||
font-family: inherit !important;
|
||||
white-space: normal !important;
|
||||
line-height: inherit !important;
|
||||
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
|
||||
font-size: $font-14px;
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: $monospace-font-family !important;
|
||||
background-color: $codeblock-background-color;
|
||||
}
|
||||
|
||||
// this selector wrongly applies to code blocks too but we will unset it in the next one
|
||||
code {
|
||||
white-space: pre-wrap; // don't collapse spaces in inline code blocks
|
||||
}
|
||||
|
||||
pre code {
|
||||
white-space: pre; // we want code blocks to be scrollable and not wrap
|
||||
|
||||
>* {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
// 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
|
||||
overflow-x: overlay;
|
||||
overflow-y: visible;
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_lineNumbers {
|
||||
float: left;
|
||||
margin: 0 0.5em 0 -1.5em;
|
||||
|
|
@ -588,45 +624,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
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;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
border-bottom: none !important; // override GFM
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body a {
|
||||
color: $accent-alt;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body blockquote {
|
||||
border-left: 2px solid $blockquote-bar-color;
|
||||
border-radius: 2px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
// actually, removing the Italic TTF provides
|
||||
// better results seemingly
|
||||
|
||||
// compensate for Nunito italics being terrible
|
||||
// https://github.com/google/fonts/issues/1726
|
||||
.mx_EventTile_content .markdown-body em {
|
||||
transform: skewX(-14deg);
|
||||
display: inline-block;
|
||||
}
|
||||
*/
|
||||
|
||||
/* end of overrides */
|
||||
|
||||
.mx_EventTile_keyRequestInfo {
|
||||
|
|
|
|||
Loading…
Reference in a new issue