mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 01:05:42 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add new style for inline code (#9936)

Browse source 
Add new style for inline code
This commit is contained in:
Florian Duros 2023-01-19 14:42:59 +01:00 committed by GitHub
parent 8a2e386531
commit 314b2e7ba6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 29 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/_spacing.pcss
View file

@ -16,6 +16,7 @@ limitations under the License.
/* 1rem :: 10px */
$spacing-2: 2px;
$spacing-4: 4px;
$spacing-8: 8px;
$spacing-12: 12px;

12
res/css/views/rooms/_EventTile.pcss
View file

@ -551,6 +551,18 @@ $left-gutter: 64px;
background-color: $codeblock-background-color;
}
code:not(pre *) {
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
// The horizontal padding is added by gfm.css .markdown-body
padding: $spacing-2 0;
// Avoid inline code blocks to be sticked when on multiple lines
line-height: $font-22px;
// Avoid the border to be glued to the other words
margin-right: $spacing-2;
}
code {
white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
}

8
res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
View file

@ -49,6 +49,14 @@ limitations under the License.
:is(ol, ul) + br:last-of-type {
display: none;
}
code {
font-family: $monospace-font-family !important;
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
padding: $spacing-2;
}
}
.mx_WysiwygComposer_Editor_content_placeholder::before {

2
res/themes/dark/css/_dark.pcss
View file

@ -224,6 +224,8 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
$breadcrumb-placeholder-bg-color: #272c35;
$theme-button-bg-color: #e3e8f0;
$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74);
$inlinecode-border-color: $quinary-content;
$inlinecode-background-color: $system;
$codeblock-background-color: #2a3039;
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
$selected-color: $room-highlight-color;

2
res/themes/legacy-dark/css/_legacy-dark.pcss
View file

@ -190,6 +190,8 @@ $appearance-tab-border-color: $room-highlight-color;
$composer-shadow-color: tranparent;
$codeblock-background-color: #2a3039;
$inlinecode-border-color: #2a3039;
$inlinecode-background-color: #2a3039;
/* Bubble tiles */
$eventbubble-self-bg: #14322e;

2
res/themes/legacy-light/css/_legacy-light.pcss
View file

@ -290,6 +290,8 @@ $appearance-tab-border-color: $input-darker-bg-color;
$composer-shadow-color: tranparent;
$codeblock-background-color: $header-panel-bg-color;
$inlinecode-border-color: $header-panel-bg-color;
$inlinecode-background-color: $header-panel-bg-color;
/* Bubble tiles */
$eventbubble-self-bg: #f0fbf8;

2
res/themes/light/css/_light.pcss
View file

@ -295,6 +295,8 @@ $composer-shadow-color: rgba(0, 0, 0, 0.04);
$breadcrumb-placeholder-bg-color: #e8eef5;
$theme-button-bg-color: $quinary-content;
$resend-button-divider-color: $input-darker-bg-color;
$inlinecode-border-color: $quinary-content;
$inlinecode-background-color: $system;
$codeblock-background-color: $header-panel-bg-color;
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
$selected-color: $secondary-accent-color;