From 75c8a31f99db7f03f01b9c70250070dc34649df2 Mon Sep 17 00:00:00 2001
From: Simek <gosimek@gmail.com>
Date: Fri, 27 Feb 2026 11:14:04 +0100
Subject: [PATCH] ui: improve markdown editor styles, align more with lichess

---
 ui/bits/css/_markdown-toastui.scss | 50 +++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/ui/bits/css/_markdown-toastui.scss b/ui/bits/css/_markdown-toastui.scss
index 3816601d15e93..27f7a0a807392 100644
--- a/ui/bits/css/_markdown-toastui.scss
+++ b/ui/bits/css/_markdown-toastui.scss
@@ -11,28 +11,30 @@
   }
   .toastui-editor {
     &-defaultUI {
+      @extend %base-font;
       border: none;
       &-toolbar {
-        @extend %metal, %box-radius-top;
-        border-radius: 3px 3px 0 0 !important;
+        @extend %metal;
+        border-radius: $box-radius-size $box-radius-size 0 0 !important;
         border: $border;
-        border-bottom: 0;
         flex-flow: row wrap;
       }
     }
     &-toolbar {
+      height: auto;
       &-icons {
         border-color: $c-border;
         &:not(:disabled) {
+          background-color: $c-bg-zebra;
           &:hover {
             background-color: $c-bg-box;
           }
-          &.active {
-            background-color: $c-bg-zebra;
-          }
         }
       }
     }
+    &-toolbar-group button {
+      margin: 6px 3px;
+    }
     &-dropdown {
       &-toolbar {
         display: flex;
@@ -50,10 +52,7 @@
       }
     }
     &-md-tab-container {
-      background: none;
-      /* preview is not accurate to what lichess shows */
       display: none;
-      width: 0;
     }
     &-tabs {
       @extend %flex-center;
@@ -68,13 +67,27 @@
       }
     }
     &-popup {
+      @extend %box-radius;
+      border: $border;
+      background-color: $c-bg-page;
       margin-left: 0;
+
+      @include if-light {
+        background-color: $c-bg;
+      }
+
+      button {
+        text-align: center;
+      }
+    }
+    &-ok-button {
+      background-color: $c-primary !important;
     }
     &-ww-container,
     &-md-container {
+      @extend %box-radius-bottom;
       border: $border;
       border-top: 0;
-      border-radius: 0 0 3px 3px;
     }
     &.ww-mode,
     &.md-mode,
@@ -107,11 +120,18 @@
       background: none;
       border: none;
     }
-    &-popup-body li[data-type='Heading'] {
-      &[data-level='1'],
-      &[data-level='5'],
-      &[data-level='6'] {
-        display: none;
+    &-popup-body {
+      li[data-type='Heading'] {
+        &[data-level='1'],
+        &[data-level='5'],
+        &[data-level='6'] {
+          display: none;
+        }
+      }
+      input {
+        width: 100%;
+        border: $border;
+        border-radius: $box-radius-size !important;
       }
     }
   }