From 8edd6b791de621ead5bee42581f4bc6de943b96e Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 5 Feb 2021 11:46:51 +0100
Subject: [PATCH] Fix CkEditor scrollbar

---
 customize.dist/ckeditor-contents.css | 23 +++++++++++++++++++++++
 www/common/diffMarked.js             |  1 +
 www/pad/app-pad.less                 |  1 +
 www/pad/inner.js                     | 10 +++++++---
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/customize.dist/ckeditor-contents.css b/customize.dist/ckeditor-contents.css
index ca0817062..e78cef7da 100644
--- a/customize.dist/ckeditor-contents.css
+++ b/customize.dist/ckeditor-contents.css
@@ -3,6 +3,29 @@ Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
 */
 
+html {
+    scrollbar-color: rgba(0,0,0,0.2) transparent;
+    scrollbar-width: thin;
+}
+body::-webkit-scrollbar {
+    width: 6px;
+    background-color: #FFF !important;
+}
+body::-webkit-scrollbar-thumb {
+    width: 6px;
+    background-color: rgba(0,0,0,0.2) !important;
+}
+html.cp-dark {
+    scrollbar-color: rgba(255,255,255,0.2) transparent;
+}
+html.cp-dark ::-webkit-scrollbar {
+    background-color: #222 !important; /* should match the value un pad/inner.js */
+}
+html.cp-dark ::-webkit-scrollbar-thumb {
+    background-color: rgba(255,255,255,0.2) !important;
+}
+
+
 body
 {
     /* Font */
diff --git a/www/common/diffMarked.js b/www/common/diffMarked.js
index 71149b59f..e49b1a27f 100644
--- a/www/common/diffMarked.js
+++ b/www/common/diffMarked.js
@@ -40,6 +40,7 @@ define([
                     Mermaid = _Mermaid;
                     Mermaid.initialize({
                         gantt: { axisFormat: '%m-%d', },
+                        theme: window.CryptPad_theme === 'dark' ? 'dark' : undefined,
                         "themeCSS": mermaidThemeCSS,
                     });
                 }
diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less
index c9ab0e350..f31b87ad5 100644
--- a/www/pad/app-pad.less
+++ b/www/pad/app-pad.less
@@ -116,6 +116,7 @@ body.cp-app-pad {
         background-color: @bg-color;
         justify-content: center;
         iframe {
+            background-color: transparent;
             flex: 1;
             min-width: 0;
             order: 1;
diff --git a/www/pad/inner.js b/www/pad/inner.js
index 6e43a10a9..33e3e6735 100644
--- a/www/pad/inner.js
+++ b/www/pad/inner.js
@@ -1217,12 +1217,16 @@ define([
                 $contentContainer.prepend(h('div#cp-app-pad-toc'));
                 $ckeToolbar.find('.cke_button__image_icon').parent().hide();
 
+                var $iframe = $('iframe').contents();
                 if (window.CryptPad_theme === 'dark') {
-                    var $iframe = $('iframe').contents();
-                    $iframe.find('html').css({
-                        'background-color': '#222', // XXX
+                    $iframe.find('html').addClass('cp-dark').css({
+                        'background-color': '#222', // XXX make sure it's the same in www/pad/app-pad.less
                         'color': '#aaa' // XXX
                     });
+                } else {
+                    $iframe.find('html').css({
+                        'background-color': '#FFF'
+                    });
                 }
             }).nThen(waitFor());