From 16f88947eafa390dcc8fd74146b14eb642bb397d Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 9 Feb 2021 15:29:58 +0100 Subject: [PATCH 01/14] Fix conflict hightlight and codemirror --- www/common/highlight/styles/dark.css | 76 ++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 www/common/highlight/styles/dark.css diff --git a/www/common/highlight/styles/dark.css b/www/common/highlight/styles/dark.css new file mode 100644 index 000000000..d591db680 --- /dev/null +++ b/www/common/highlight/styles/dark.css @@ -0,0 +1,76 @@ +/* + +Dracula Theme v1.2.0 + +https://github.com/zenorocha/dracula-theme + +Copyright 2015, All rights reserved + +Code licensed under the MIT license +http://zenorocha.mit-license.org + +@author Éverton Ribeiro +@author Zeno Rocha + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #282a36; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-section, +.hljs-link { + color: #8be9fd; +} + +.hljs-function .hljs-keyword { + color: #ff79c6; +} + +.hljs, +.hljs-subst { + color: #f8f8f2; +} + +.hljs-string, +.hljs-title, +.hljs-name, +.hljs-type, +.hljs-attribute, +.hljs-symbol, +.hljs-bullet, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: #f1fa8c; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion, +.hljs-meta { + color: #6272a4; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-title, +.hljs-section, +.hljs-doctag, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} From a685f4601fe9c083a9de10bacddfc15a059a4500 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 9 Feb 2021 15:44:02 +0100 Subject: [PATCH 02/14] Fix comment bubble position in rich text --- www/pad/app-pad.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less index 48ee72854..1818e22be 100644 --- a/www/pad/app-pad.less +++ b/www/pad/app-pad.less @@ -182,7 +182,7 @@ body.cp-app-pad { .fa { margin: 0 !important; } - right: 20px; + left: 10px; position: absolute; } } @@ -204,7 +204,8 @@ body.cp-app-pad { &.cke_body_width { div.cp-comment-bubble { button { - right: 0px; + right: -10px; + left: unset; } } iframe { From d9f002d5c29bd55a166912bf68db3e32e16e642a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 9 Feb 2021 14:51:06 +0000 Subject: [PATCH 03/14] Comment notification color --- customize.dist/src/less2/include/colortheme-dark.less | 1 + customize.dist/src/less2/include/colortheme.less | 1 + www/pad/app-pad.less | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 32059d4dc..ab1995479 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -392,6 +392,7 @@ @cp_comments-fg: @cryptpad_text_col; @cp_comments-bg: @cryptpad_color_grey_800; @cp_comments-header: @cryptpad_color_grey_500; +@cp_comments-notif: @cryptpad_color_light_red; // Poll @cp_poll-th-bg: @cryptpad_color_brand_fadest; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index fc252f876..249883531 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -391,6 +391,7 @@ @cp_comments-fg: @cryptpad_text_col; @cp_comments-bg: @cryptpad_color_white; @cp_comments-header: @cryptpad_color_grey_600; +@cp_comments-notif: @cryptpad_color_red; // Poll @cp_poll-th-bg: @cryptpad_color_lighter_blue; diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less index 1818e22be..d9893e7b0 100644 --- a/www/pad/app-pad.less +++ b/www/pad/app-pad.less @@ -53,7 +53,8 @@ body.cp-app-pad { #cp-app-pad-comments { &.hidden { .cp-pad-show.notif { - color: red; + color: @cp_comments-notif; + border-color: @cryptpad_color_red; } } .cp-pad-show { From 45faee3eed43c2f0465c313da1610d63381d8da2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 9 Feb 2021 15:48:04 +0000 Subject: [PATCH 04/14] Fix premium ticket styles --- customize.dist/src/less2/include/colortheme-dark.less | 8 ++++---- www/admin/app-admin.less | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index ab1995479..5a85e4374 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -332,10 +332,10 @@ // Admin @cp_admin-isadmin-fg: @cryptpad_color_brand; @cp_admin-isadmin-bg: @cryptpad_color_white; -@cp_admin-premium-fg: @cryptpad_color_warn_red; -@cp_admin-premium-bg: lighten(@cryptpad_color_warn_red, 25%); -@cp_admin-last-fg: @cryptpad_color_warn_red; -@cp_admin-last-bg: lighten(@cryptpad_color_orange, 25%); +@cp_admin-premium-fg: @cryptpad_color_light_red; +@cp_admin-premium-bg: @cryptpad_color_red_fader; +@cp_admin-last-fg: @cryptpad_color_light_red; +@cp_admin-last-bg: @cryptpad_color_red_fader; // Code @cp_preview-bg: @cryptpad_color_grey_900; diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less index 2ecf99bed..da4703203 100644 --- a/www/admin/app-admin.less +++ b/www/admin/app-admin.less @@ -101,7 +101,7 @@ display: flex; justify-content: space-between; flex-wrap: wrap; - color: #666; + color: fade(@cryptpad_text_col, 80%); .cp-support-ispremium { padding: 0 5px; color: @cp_admin-premium-fg; From af695510bbcbc61c18d6105b5cc062a794277d2b Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 9 Feb 2021 17:03:14 +0100 Subject: [PATCH 05/14] Improve comment bubble --- www/pad/app-pad.less | 13 +++++++++---- www/pad/comments.js | 25 +++++++------------------ 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less index 1818e22be..502d5616c 100644 --- a/www/pad/app-pad.less +++ b/www/pad/app-pad.less @@ -177,13 +177,19 @@ body.cp-app-pad { } div.cp-comment-bubble { position: relative; - order: 2; button { .fa { margin: 0 !important; } - left: 10px; position: absolute; + padding: 0 4px; + background: @cp_toolbar-bg; + margin-left: 0px; + margin-top: 20px; + line-height: unset; + &:hover { + background: @toolbar-bg-active; + } } } #cp-app-pad-comments { @@ -204,8 +210,7 @@ body.cp-app-pad { &.cke_body_width { div.cp-comment-bubble { button { - right: -10px; - left: unset; + margin-left: 30px; } } iframe { diff --git a/www/pad/comments.js b/www/pad/comments.js index 4d752d54d..90ba02471 100644 --- a/www/pad/comments.js +++ b/www/pad/comments.js @@ -749,31 +749,19 @@ define([ }; var updateBubble = function(Env) { if (!Env.bubble) { return; } - var pos = Env.bubble.node.getBoundingClientRect(); - if (pos.y < 0 || pos.y > Env.$inner.outerHeight()) { - //removeCommentBubble(Env); - } - Env.bubble.button.setAttribute('style', 'top:' + pos.y + 'px'); + var pos = Env.bubble.range.getClientRects()[0]; + var left = pos.x + pos.width; + Env.bubble.button.setAttribute('style', 'top:' + pos.y + 'px; left: '+left+'px'); }; var addCommentBubble = function(Env) { var ranges = Env.editor.getSelectedRanges(); if (!ranges.length) { return; } - var el = ranges[0].endContainer || ranges[0].startContainer; - var node = el && el.$; - if (!node) { return; } - if (node.nodeType === Node.TEXT_NODE) { - node = node.parentNode; - if (!node) { return; } - } - var pos = node.getBoundingClientRect(); - var y = pos.y; - if (y < 0 || y > Env.$inner.outerHeight()) { return; } + var button = h('button.btn.btn-secondary', { - style: 'top:' + y + 'px;', title: Messages.comments_comment }, h('i.fa.fa-commenting')); Env.bubble = { - node: node, + range: ranges[0], button: button }; $(button).click(function(e)  { @@ -781,7 +769,8 @@ define([ Env.editor.execCommand('comment'); Env.bubble = undefined; }); - Env.$contentContainer.append(h('div.cp-comment-bubble', button)); + Env.$contentContainer.find('iframe').before(h('div.cp-comment-bubble', button)); + updateBubble(Env); }; var isEditable = function (document) { From 9d6488343741208241987effe72d79d722d6c8d6 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 9 Feb 2021 17:26:52 +0100 Subject: [PATCH 06/14] Fix comment button stuck behind the comments --- www/pad/comments.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/www/pad/comments.js b/www/pad/comments.js index 90ba02471..72935a92b 100644 --- a/www/pad/comments.js +++ b/www/pad/comments.js @@ -761,13 +761,14 @@ define([ title: Messages.comments_comment }, h('i.fa.fa-commenting')); Env.bubble = { - range: ranges[0], + range: ranges[ranges.length-1], button: button }; $(button).click(function(e)  { e.stopPropagation(); Env.editor.execCommand('comment'); Env.bubble = undefined; + removeCommentBubble(Env); }); Env.$contentContainer.find('iframe').before(h('div.cp-comment-bubble', button)); updateBubble(Env); @@ -803,7 +804,7 @@ define([ $(form).remove(); Env.$inner.focus(); - if (!val) { return; } + if (!val) { addCommentBubble(Env); return; } var applicable = Env.editor.plugins.comments.isApplicable(); if (!applicable || !isEditable(Env.ifrWindow.document)) { // text has been deleted by another user while we were typing our comment? From 2da6ac87c32ac0ffe9653a1ff84d33be8076f1d8 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 9 Feb 2021 17:35:41 +0100 Subject: [PATCH 07/14] Fix initial scroll in rich text --- www/pad/inner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/pad/inner.js b/www/pad/inner.js index d31fb07ad..5e529d12d 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -934,7 +934,7 @@ define([ // Get scroll position var sTop = $iframe.scrollTop(); var sTopMax = $iframe.innerHeight() - $('iframe').innerHeight(); - var scrollMax = Math.abs(sTop - sTopMax) < 1; + var scrollMax = Math.abs(sTop - sTopMax) < 1 && sTop; // Apply the changes var patch = (DD).diff(inner, userDocStateDom); From d571822adf1e3d20bc02f928d35b880edf732449 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 9 Feb 2021 17:44:38 +0100 Subject: [PATCH 08/14] Fix mermaid dark/light themes --- www/common/diffMarked.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/common/diffMarked.js b/www/common/diffMarked.js index ddc0d0adf..71b2185ba 100644 --- a/www/common/diffMarked.js +++ b/www/common/diffMarked.js @@ -40,7 +40,7 @@ define([ Mermaid = _Mermaid; Mermaid.initialize({ gantt: { axisFormat: '%m-%d', }, - theme: (window.CryptPad_theme === 'dark') ? 'dark' : undefined, + theme: (window.CryptPad_theme === 'dark') ? 'dark' : 'default', "themeCSS": mermaidThemeCSS, }); } From 92bdc6b33bc610068b4ce418528b5120a00c45e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 9 Feb 2021 17:26:00 +0000 Subject: [PATCH 09/14] Fix Mermaid diagram styles --- .../src/less2/include/colortheme-dark.less | 4 +-- .../src/less2/include/colortheme.less | 4 +-- .../src/less2/include/markdown.less | 35 +++++++++++-------- 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 5a85e4374..14cb35d1c 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -207,8 +207,8 @@ // Rendered Markdown @cp_markdown-bg: @cryptpad_color_grey_900; @cp_markdown-border: @cryptpad_color_grey_700; -@cp_markdown-contrast-fg: white; // XXX -@cp_markdown-contrast-bg: @cryptpad_color_grey; // XXX +@cp_markdown-block-fg: @cryptpad_text_col; +@cp_markdown-block-bg: @cryptpad_color_grey_800; // Avatar @cp_avatar-bg: @cryptpad_color_grey_700; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 249883531..048363874 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -206,8 +206,8 @@ // Rendered Markdown @cp_markdown-bg: @cryptpad_color_lighter_grey; @cp_markdown-border: @cryptpad_color_grey; -@cp_markdown-contrast-fg: @cryptpad_text_col; // XXX -@cp_markdown-contrast-bg: transparent; // XXX +@cp_markdown-block-fg: @cryptpad_text_col; // XXX +@cp_markdown-block-bg: @cryptpad_color_grey_200; // XXX // Avatar @cp_avatar-bg: @cryptpad_color_grey; diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index 1bc271122..871e298c9 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -151,27 +151,34 @@ // XXX apply the styles below in modals-ui-elements.less - pre.mermaid[mermaid-source^="pie"] { // XXX + pre.mermaid[mermaid-source^="pie"] { g.legend text, text.pieTitleText { - fill: @cp_markdown-contrast-fg; + fill: @cp_markdown-block-fg; } } - pre.mermaid[mermaid-source^="gantt"] { // XXX - background-color: @cp_markdown-contrast-bg; - background-color: #444; + pre.mermaid[mermaid-source^="gantt"] { text.titleText { - fill: @cp_markdown-contrast-fg; + fill: @cp_markdown-block-fg; + } + g.tick { + text { + fill: @cp_markdown-block-fg; + } + line { + stroke: fade(@cp_markdown-block-fg, 50%); + } } } - /* make sure markmap text shows up in dark mode */ - pre.markmap svg { // XXX - color: @cp_markdown-contrast-fg; + pre.markmap svg { + color: @cp_markdown-block-fg; } - pre.mathjax { // XXX - background-color: @cp_markdown-contrast-bg; + pre.mathjax { + padding: 5px; + color: @cryptpad_text_col; + background-color: @cp_markdown-block-bg; } } @@ -179,13 +186,13 @@ pre > code { display: block; position: relative; - border: 1px solid @cp_markdown-border; width: 90%; margin: auto; - padding-left: .25vw; + padding: 5px; overflow-x: auto; overflow-y: hidden; - background-color: @cp_markdown-contrast-bg; // XXX + color: @cp_markdown-block-fg; + background-color: @cp_markdown-block-bg; // XXX } } From c3611ef38acfaec3ce90caa7d8cecc6ae2a9135d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 9 Feb 2021 20:27:16 +0000 Subject: [PATCH 10/14] Address remaining // XXX --- .../src/less2/include/colortheme-dark.less | 9 ++++---- .../src/less2/include/colortheme.less | 10 ++++---- customize.dist/src/less2/include/drive.less | 9 ++------ customize.dist/src/less2/include/export.less | 1 - customize.dist/src/less2/include/forms.less | 2 +- .../src/less2/include/limit-bar.less | 1 - .../src/less2/include/markdown.less | 9 ++++---- .../src/less2/include/messenger.less | 1 - .../src/less2/include/modals-ui-elements.less | 23 +++++++++++++++++++ .../src/less2/include/sidebar-layout.less | 2 +- customize.dist/src/less2/include/toolbar.less | 21 ----------------- www/kanban/app-kanban.less | 4 ++-- www/poll/app-poll.less | 1 - 13 files changed, 43 insertions(+), 50 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 14cb35d1c..0c09929bd 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -31,7 +31,6 @@ @cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%); @cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%); -// XXX this whole block was copy-pasted from colortheme.less to avoid a reference error --ansuz @cryptpad_color_hint_grey: #777; @cryptpad_color_dark_grey: #999999; @cryptpad_color_neutral_grey: #aaaaaa; @@ -75,7 +74,7 @@ @cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%); @cryptpad_color_light_yellow: #FFE69C; @cryptpad_color_yellow_fade: fade(#FFE69C, 15%); -@cryptpad_color_lighter_blue: #d2e1f2; // XXX replace with @cryptpad_color_brand_fadest +@cryptpad_color_lighter_blue: #d2e1f2; @cryptpad_color_link:@cryptpad_color_brand_300; @@ -161,7 +160,7 @@ @cp_sidebar-left-bg: @cryptpad_color_grey_800; @cp_sidebar-left-fg: @cryptpad_text_col; @cp_sidebar-right-bg: @cryptpad_color_grey_900; -@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black +@cp_sidebar-right-fg: @cryptpad_text_col; @cp_sidebar-left-active: @cp_sidebar-right-bg; @cp_sidebar-hint: fade(@cryptpad_text_col, 80%); @@ -225,7 +224,7 @@ @cp_creation-button-bg: @cryptpad_color_brand; @cp_creation-button-fg: @cryptpad_color_white; @cp_creation-error-bg: @cryptpad_color_blue; -@cp_creation-error-fg: @cryptpad_color_grey_100; // XXX +@cp_creation-error-fg: @cryptpad_color_grey_100; // Export @cp_export-bg: @cryptpad_color_grey_900; @@ -283,7 +282,7 @@ @cp_support-header-bg: @cryptpad_color_grey_800; // Toolbar -@cp_toolbar-bg: @cryptpad_color_grey_900; +@cp_toolbar-bg: @cryptpad_color_grey_850; @cp_toolbar-fg: @cryptpad_text_col; @cp_toolbar-bottom-fg: @cryptpad_text_col; @cp_toolbar-logo-bg: @cryptpad_color_grey_200; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 048363874..d96ce4e0f 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -73,7 +73,7 @@ @cryptpad_color_light_green: #c5ffa8; @cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%); @cryptpad_color_light_yellow: #FFE69C; -@cryptpad_color_yellow_fade: fade(#FFE69C, 50%); // XXX diff from dark +@cryptpad_color_yellow_fade: fade(#FFE69C, 50%); // different from dark @cryptpad_color_lighter_blue: #d2e1f2; @cryptpad_color_link: #0275D8; @@ -160,7 +160,7 @@ @cp_sidebar-left-bg: @cryptpad_color_toolbar_grey; @cp_sidebar-left-fg: @cryptpad_text_col; @cp_sidebar-right-bg: @cryptpad_color_white; -@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black +@cp_sidebar-right-fg: @cryptpad_text_col; @cp_sidebar-left-active: @cp_sidebar-right-bg; @cp_sidebar-hint: @cryptpad_color_hint_grey; @@ -205,9 +205,9 @@ // Rendered Markdown @cp_markdown-bg: @cryptpad_color_lighter_grey; -@cp_markdown-border: @cryptpad_color_grey; -@cp_markdown-block-fg: @cryptpad_text_col; // XXX -@cp_markdown-block-bg: @cryptpad_color_grey_200; // XXX +@cp_markdown-border: @cryptpad_color_grey_400; +@cp_markdown-block-fg: @cryptpad_text_col; +@cp_markdown-block-bg: @cryptpad_color_grey_200; // Avatar @cp_avatar-bg: @cryptpad_color_grey; diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index cc71507d1..30d369ff5 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -183,20 +183,15 @@ font-size: 50px; } .cptools-folder-no-color { - color: #bbb; // XXX + color: @cryptpad_color_grey_500; } .fa-check { position: absolute; top: 40%; left: 35%; color: transparent; } - // XXX Check colors in the "change folder color" modal &.cp-app-drive-current-color > .fa-check { - color: @cryptpad_color_white; - } - - &.cp-app-drive-current-color:first-child > .fa-check { - color: @cryptpad_color_black; + color: @cryptpad_color_grey_900; } } } diff --git a/customize.dist/src/less2/include/export.less b/customize.dist/src/less2/include/export.less index 301bd1404..10f03b741 100644 --- a/customize.dist/src/less2/include/export.less +++ b/customize.dist/src/less2/include/export.less @@ -11,7 +11,6 @@ .cp-export-block { width: 800px; max-width: 90vw; - // XXX Keep hardcoded progress bar colors for now... .cp-export-progress-bar-container { height: 24px; background: @cp_loading-progress-bg; diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index 4962f3891..7f072115c 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -162,7 +162,7 @@ } } - &.btn-light { // XXX DARK + &.btn-light { border-color: @cryptpad_text_col; color: @cryptpad_text_col; background-color: transparent; diff --git a/customize.dist/src/less2/include/limit-bar.less b/customize.dist/src/less2/include/limit-bar.less index 46e6dcf11..33c733efd 100644 --- a/customize.dist/src/less2/include/limit-bar.less +++ b/customize.dist/src/less2/include/limit-bar.less @@ -32,7 +32,6 @@ left: 0; top: 0; z-index: 1; // .usage - // XXX Check if we can keep the same colors in dark themes &.cp-limit-usage-normal { background: @cp-limit-bar-normal; } diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index 871e298c9..09d820362 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -149,8 +149,6 @@ } } - // XXX apply the styles below in modals-ui-elements.less - pre.mermaid[mermaid-source^="pie"] { g.legend text, text.pieTitleText { fill: @cp_markdown-block-fg; @@ -192,7 +190,7 @@ overflow-x: auto; overflow-y: hidden; color: @cp_markdown-block-fg; - background-color: @cp_markdown-block-bg; // XXX + background-color: @cp_markdown-block-bg; } } @@ -203,8 +201,11 @@ th { padding: 15px; } + td { + padding:3px; + } th, td { - border: 1px solid @cp_markdown-border; // XXX + border: 1px solid @cp_markdown-border; } } } diff --git a/customize.dist/src/less2/include/messenger.less b/customize.dist/src/less2/include/messenger.less index dffcd741e..a47f738e8 100644 --- a/customize.dist/src/less2/include/messenger.less +++ b/customize.dist/src/less2/include/messenger.less @@ -8,7 +8,6 @@ @msg-color-hover: contrast(@msg-color, lighten(@msg-color, 10%), darken(@msg-color, 10%)); @msg-bg-color: @bg-color; @invert: @bg-color; - // XXX Adjust chat colors @msg-bg-color-light: contrast(@invert, lighten(@bg-color, 5%), darken(@bg-color, 5%)); @msg-bg-color-lighter: contrast(@invert, lighten(@bg-color, 10%), darken(@bg-color, 10%)); @msg-bg-color-dark: contrast(@bg-color, lighten(@bg-color, 5%), darken(@bg-color, 5%)); diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less index 527d3c4e4..c62f5f3b5 100644 --- a/customize.dist/src/less2/include/modals-ui-elements.less +++ b/customize.dist/src/less2/include/modals-ui-elements.less @@ -237,6 +237,24 @@ pre.mermaid { overflow: unset; margin-bottom: 0; + &[mermaid-source^="pie"] { + g.legend text, text.pieTitleText { + fill: @cp_markdown-block-fg; + } + } + &[mermaid-source^="gantt"] { + text.titleText { + fill: @cp_markdown-block-fg; + } + g.tick { + text { + fill: @cp_markdown-block-fg; + } + line { + stroke: fade(@cp_markdown-block-fg, 50%); + } + } + } } pre.markmap { margin-bottom: 0; @@ -246,8 +264,13 @@ flex-flow: column; svg { flex: 1; + color: @cp_markdown-block-fg; } } + pre.mathjax { + padding: 5px; + color: @cryptpad_text_col; + } .cp-spinner { border-color: @cryptpad_color_brand; border-top-color: transparent; diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 35d22f197..275bf769b 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -74,7 +74,7 @@ // Following rules are only in settings .cp-sidebarlayout-element { pre { - color: @cryptpad_text_col; // XXX + color: @cryptpad_text_col; } label:not(.noTitle), .label { display: block; diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 90d072063..d54778efd 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -421,27 +421,6 @@ white-space: normal; } - /*button, select { - height: @toolbar_line-height; - box-sizing: border-box; - padding: 3px 10px; - margin: 0; - }*/ - - // XXX I don't think we still use any select in the toolbar - select { - margin-left: 5px; - margin-right: 5px; - padding-left: 5px; - border: 1px solid #A6A6A6; - border-bottom-color: #979797; - vertical-align: top; - box-sizing: content-box; - option { - height: 24px; - } - } - &.cp-toolbar-notitle { .cp-toolbar-top-filler { flex: 1; diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 60ee72186..9fd06a510 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -217,8 +217,8 @@ border: none; padding: 5px; margin: 0; - //background-color: @cp_markdown-bg; // XXX disabled for being unreadable in dark mode - //color: @cp_kanban-fg; // XXX disabled for being unreadable in dark mode + background-color: @cp_markdown-bg; + color: @cp_kanban-fg; width: 100%; } table { diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less index 571f08887..6a48362f3 100644 --- a/www/poll/app-poll.less +++ b/www/poll/app-poll.less @@ -84,7 +84,6 @@ // The placeholder color only seems to effect Safari when not set - // XXX placeholder in forms.less input[type="text"][disabled]::placeholder { color: @poll-th-fg; opacity: 1; From 6cb5019cd30d4d6454655f35cce855abbc91eed8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 9 Feb 2021 20:29:00 +0000 Subject: [PATCH 11/14] Lint compliance --- customize.dist/src/less2/include/markdown.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index 09d820362..6f5e3c80b 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -202,7 +202,7 @@ padding: 15px; } td { - padding:3px; + padding: 3px; } th, td { border: 1px solid @cp_markdown-border; From 58bf19a5e1beed9a3709e3019c50119a5450103e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 9 Feb 2021 20:58:45 +0000 Subject: [PATCH 12/14] Add XXX about 404 background --- customize.dist/src/less2/pages/page-404.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/customize.dist/src/less2/pages/page-404.less b/customize.dist/src/less2/pages/page-404.less index 1fe18bd90..f8f55e29c 100644 --- a/customize.dist/src/less2/pages/page-404.less +++ b/customize.dist/src/less2/pages/page-404.less @@ -5,7 +5,7 @@ html, body { .font_main(); margin: 0px; padding: 0px; - background-color: @cp_static-bg; + background-color: @cp_static-bg; // XXX doesn't get applied color: @cryptpad_text_col; font-family: "IBM Plex Mono"; #cp-main { From f54e771d0ff1e783792ccc71c02633a6297e0b79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 9 Feb 2021 21:05:38 +0000 Subject: [PATCH 13/14] Update grey logo and use in empty Code and Slides --- customize.dist/CryptPad_logo_grey.svg | 8 -------- www/code/inner.js | 2 +- www/slide/slide.js | 2 +- 3 files changed, 2 insertions(+), 10 deletions(-) diff --git a/customize.dist/CryptPad_logo_grey.svg b/customize.dist/CryptPad_logo_grey.svg index 083bbd4e1..a2e6a685e 100644 --- a/customize.dist/CryptPad_logo_grey.svg +++ b/customize.dist/CryptPad_logo_grey.svg @@ -1,13 +1,5 @@ - - - - - - - - diff --git a/www/code/inner.js b/www/code/inner.js index 31d12eff4..2eb433c01 100644 --- a/www/code/inner.js +++ b/www/code/inner.js @@ -152,7 +152,7 @@ define([ var $codeMirror = $('.CodeMirror'); $('', { - src: '/customize/CryptPad_logo.svg', + src: '/customize/CryptPad_logo_grey.svg', alt: '', class: 'cp-app-code-preview-empty' }).appendTo($previewContainer); diff --git a/www/slide/slide.js b/www/slide/slide.js index c104c5f3b..66182049c 100644 --- a/www/slide/slide.js +++ b/www/slide/slide.js @@ -78,7 +78,7 @@ define([ if (c === '') { var $empty = $('', { - src: '/customize/CryptPad_logo.svg', + src: '/customize/CryptPad_logo_grey.svg', alt: '', class: 'cp-app-code-preview-empty' }); From 0fa638096283b53f920c9150dcb831ab7158c552 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Tue, 9 Feb 2021 22:25:20 +0000 Subject: [PATCH 14/14] Adjust sidebar color --- customize.dist/src/less2/include/colortheme-dark.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 0c09929bd..23a485479 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -157,7 +157,7 @@ @cp_buttons-cancel-border: @cryptpad_color_grey_400; // Sidebar layout -@cp_sidebar-left-bg: @cryptpad_color_grey_800; +@cp_sidebar-left-bg: @cryptpad_color_grey_850; @cp_sidebar-left-fg: @cryptpad_text_col; @cp_sidebar-right-bg: @cryptpad_color_grey_900; @cp_sidebar-right-fg: @cryptpad_text_col;