Sync the visuals of inline code and text markers

diff --git a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php
index f87ae14ff4cd0f68e4c9b9283bee231cd0bd0517..d1ec405ce86cee120cb20b6504733368c1e76162 100644 (file)
--- a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php
+++ b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php
@@ -42,7 +42,7 @@ class HtmlInputNodeProcessor extends AbstractHtmlNodeProcessor
             'woltlabSuiteMedia',
         ],
         'li' => ['text-center', 'text-justify', 'text-right'],
-        'mark' => ['marker-error', 'marker-information', 'marker-success', 'marker-warning'],
+        'mark' => ['marker-error', 'marker-info', 'marker-success', 'marker-warning'],
         'p' => ['text-center', 'text-justify', 'text-right'],
         'pre' => ['woltlabHtml'],
         'td' => ['text-center', 'text-justify', 'text-right'],

diff --git a/wcfsetup/install/files/style/bbcode/inlineCode.scss b/wcfsetup/install/files/style/bbcode/inlineCode.scss
index 22e23c60520ae1765d2ca9800032b59ba3ca4e45..7421207d03df8b82550f805abd24f9a6cf472dac 100644 (file)
--- a/wcfsetup/install/files/style/bbcode/inlineCode.scss
+++ b/wcfsetup/install/files/style/bbcode/inlineCode.scss
@@ -1,16 +1,10 @@
 .inlineCode, /* deprecated, legacy class */
+.ck-content code,
 kbd {
-       /* do not use inline-block, it breaks arrow key navigation in Firefox and Internet Explorer 11 */
-
-       /* update: `inline` styling breaks even more things, in particular the caret position is way off */
-       /* this reverts 8d381dc61e8183adcb770457f9fba25c29c00bd2 */
-
-       /* new update: `display: inline` + `box-decoration-break` deliver the proper visual appearance,
-                      and the `::after` element in the editor is used to fix the caret position at the end */
-
        background-color: rgba(255, 255, 255, 1) !important;
        border: 1px solid rgba(196, 196, 196, 1) !important;
-       border-radius: var(--wcfBorderRadius);
+       border-width: 1px 0 !important;
+       border-radius: 2px;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        color: rgba(68, 68, 68, 1) !important;
@@ -19,20 +13,18 @@ kbd {
        font-size: 13px;
        font-style: normal;
        font-weight: normal;
-       margin: 0 2px;
        overflow: auto;
-       padding: 0 4px;
+       padding: 0.15em;
        text-decoration: none;
        vertical-align: middle;
        word-break: break-word;
        word-wrap: break-word;
+}
 
-       @include screen-sm-down {
-               /* Reduce the padding to prevent pixel rounding errors in the font rendering that
-                  can cause the page to display a horizontal scrollbar when <kbd> appears at the
-                  edge of the content container. */
-               padding: 0 3px;
-       }
+html[data-color-scheme="dark"] :is(.inlineCode, .ck-content code, kbd) {
+       background-color: #424242 !important;
+       border-color: #616161 !important;
+       color: #bdbdbd !important;
 }
 
 small kbd {
@@ -41,6 +33,7 @@ small kbd {
 
 @supports (-webkit-overflow-scrolling: touch) {
        .inlineCode,
+       .ck-content code,
        kbd {
                -webkit-box-decoration-break: initial;
        }

diff --git a/wcfsetup/install/files/style/ui/ckeditor.scss b/wcfsetup/install/files/style/ui/ckeditor.scss
index 0a1b93309ccb452c470acc0635dae52f4d8ba971..9ffbcf31926e4b6007cb143cfd93565e893c3cbf 100644 (file)
--- a/wcfsetup/install/files/style/ui/ckeditor.scss
+++ b/wcfsetup/install/files/style/ui/ckeditor.scss
@@ -325,10 +325,12 @@ html[data-color-scheme="dark"] {
 .marker-info,
 .marker-success,
 .marker-warning {
+       border-radius: 2px;
        border-style: solid;
        border-width: 1px 0;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
+       padding: 0.15em;
 }
 
 .marker-error {