From 314b2e7ba607f9e11504fd9a0a04fc7bbfed7f55 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 19 Jan 2023 14:42:59 +0100 Subject: [PATCH] Add new style for inline code (#9936) Add new style for inline code --- res/css/_spacing.pcss | 1 + res/css/views/rooms/_EventTile.pcss | 12 ++++++++++++ .../rooms/wysiwyg_composer/components/_Editor.pcss | 8 ++++++++ res/themes/dark/css/_dark.pcss | 2 ++ res/themes/legacy-dark/css/_legacy-dark.pcss | 2 ++ res/themes/legacy-light/css/_legacy-light.pcss | 2 ++ res/themes/light/css/_light.pcss | 2 ++ 7 files changed, 29 insertions(+) diff --git a/res/css/_spacing.pcss b/res/css/_spacing.pcss index 40c470c26b6..63197f2321f 100644 --- a/res/css/_spacing.pcss +++ b/res/css/_spacing.pcss @@ -16,6 +16,7 @@ limitations under the License. /* 1rem :: 10px */ +$spacing-2: 2px; $spacing-4: 4px; $spacing-8: 8px; $spacing-12: 12px; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index da773964691..9fa9ace1076 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -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 */ } diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss index 7ff3f11a500..dcebf80a241 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss @@ -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 { diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 6fd88d63a97..882ef1f0053 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -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; diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index ed1ff5793b4..03088f216ba 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -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; diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index ae52b078a72..dd152f368e7 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -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; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 4a1ae7e53a8..6d59801779b 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -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;