Add new style for inline code (#9936)

Add new style for inline code

Author: florianduros

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;

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 */
         }

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 {

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;

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;

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;

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;