From 0b49ce0cce3d4fc05d6f57d9dc8c8abfcd16a16d Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Wed, 18 Jan 2023 16:57:04 +0100 Subject: [PATCH 1/4] Add new style for inline code --- res/css/_common.pcss | 3 +++ res/css/views/rooms/_EventTile.pcss | 2 ++ .../views/rooms/wysiwyg_composer/components/_Editor.pcss | 9 +++++++++ res/themes/dark/css/_dark.pcss | 3 ++- res/themes/light/css/_light.pcss | 3 ++- 5 files changed, 18 insertions(+), 2 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index bf7b1c14de1..4d0350ec3d7 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -327,6 +327,9 @@ legend { code { font-family: $monospace-font-family !important; background-color: $codeblock-background-color; + border: 1px solid $codeblock-border-color; + border-radius: 4px; + padding: 2px; } /* this selector wrongly applies to code blocks too but we will unset it in the next one */ diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 3beaeacf72f..1e966c26122 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -549,6 +549,8 @@ $left-gutter: 64px; code { font-family: $monospace-font-family !important; background-color: $codeblock-background-color; + border: 1px solid $codeblock-border-color; + padding: 2px; } code { diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss index 7ff3f11a500..d8cb2a05e27 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss @@ -49,6 +49,15 @@ limitations under the License. :is(ol, ul) + br:last-of-type { display: none; } + + pre, + code { + font-family: $monospace-font-family !important; + background-color: $codeblock-background-color; + border: 1px solid $codeblock-border-color; + border-radius: 4px; + padding: 2px; + } } .mx_WysiwygComposer_Editor_content_placeholder::before { diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 6fd88d63a97..d9d2722c51c 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -224,7 +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); -$codeblock-background-color: #2a3039; +$codeblock-border-color: $quinary-content; +$codeblock-background-color: $system; $scrollbar-thumb-color: rgba(255, 255, 255, 0.2); $selected-color: $room-highlight-color; /* ******************** */ diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 4a1ae7e53a8..0f1b5f89633 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -295,7 +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; -$codeblock-background-color: $header-panel-bg-color; +$codeblock-border-color: $quinary-content; +$codeblock-background-color: $system; $scrollbar-thumb-color: rgba(0, 0, 0, 0.2); $selected-color: $secondary-accent-color; /* ******************** */ From 08eb320aa4fabb57f68863164b496b3edc4b4a56 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 19 Jan 2023 12:13:38 +0100 Subject: [PATCH 2/4] Rework inline code style --- res/css/_common.pcss | 3 --- res/css/views/rooms/_EventTile.pcss | 12 ++++++++++-- .../rooms/wysiwyg_composer/components/_Editor.pcss | 5 ++--- res/themes/dark/css/_dark.pcss | 5 +++-- res/themes/legacy-dark/css/_legacy-dark.pcss | 2 ++ res/themes/legacy-light/css/_legacy-light.pcss | 2 ++ res/themes/light/css/_light.pcss | 5 +++-- 7 files changed, 22 insertions(+), 12 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 4d0350ec3d7..bf7b1c14de1 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -327,9 +327,6 @@ legend { code { font-family: $monospace-font-family !important; background-color: $codeblock-background-color; - border: 1px solid $codeblock-border-color; - border-radius: 4px; - padding: 2px; } /* this selector wrongly applies to code blocks too but we will unset it in the next one */ diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 8016937f92d..d6a7d718667 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -549,8 +549,16 @@ $left-gutter: 64px; code { font-family: $monospace-font-family !important; background-color: $codeblock-background-color; - border: 1px solid $codeblock-border-color; - padding: 2px; + } + + 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: 2px 0; + // Avoid inline code blocks to be sticked when on multiple lines + line-height: $font-22px; } code { diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss index d8cb2a05e27..ad3dfb30657 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss @@ -50,11 +50,10 @@ limitations under the License. display: none; } - pre, code { font-family: $monospace-font-family !important; - background-color: $codeblock-background-color; - border: 1px solid $codeblock-border-color; + background-color: $inlinecode-background-color; + border: 1px solid $inlinecode-border-color; border-radius: 4px; padding: 2px; } diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index d9d2722c51c..882ef1f0053 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -224,8 +224,9 @@ $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); -$codeblock-border-color: $quinary-content; -$codeblock-background-color: $system; +$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 0f1b5f89633..6d59801779b 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -295,8 +295,9 @@ $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; -$codeblock-border-color: $quinary-content; -$codeblock-background-color: $system; +$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; /* ******************** */ From 9677070b2cdd1432be84f6cd2b54f35cfb8f34eb Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 19 Jan 2023 12:34:50 +0100 Subject: [PATCH 3/4] Add extra margin to avoid inline code to be glued to other characters --- res/css/views/rooms/_EventTile.pcss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index d6a7d718667..f9760dcc826 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -559,6 +559,8 @@ $left-gutter: 64px; padding: 2px 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: 2px; } code { From 33f71a3ee28d3341bfc7043b5d742f1fd31972ac Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 19 Jan 2023 14:23:22 +0100 Subject: [PATCH 4/4] Add and use $spacing-2 --- res/css/_spacing.pcss | 1 + res/css/views/rooms/_EventTile.pcss | 4 ++-- res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) 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 f9760dcc826..9fa9ace1076 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -556,11 +556,11 @@ $left-gutter: 64px; border: 1px solid $inlinecode-border-color; border-radius: 4px; // The horizontal padding is added by gfm.css .markdown-body - padding: 2px 0; + 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: 2px; + margin-right: $spacing-2; } code { diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss index ad3dfb30657..dcebf80a241 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss @@ -55,7 +55,7 @@ limitations under the License. background-color: $inlinecode-background-color; border: 1px solid $inlinecode-border-color; border-radius: 4px; - padding: 2px; + padding: $spacing-2; } }