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/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 32059d4dc..23a485479 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; @@ -158,10 +157,10 @@ @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; // 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%); @@ -207,8 +206,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; @@ -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; @@ -332,10 +331,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; @@ -392,6 +391,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..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-contrast-fg: @cryptpad_text_col; // XXX -@cp_markdown-contrast-bg: transparent; // 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; @@ -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/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 1bc271122..6f5e3c80b 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -149,29 +149,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 +184,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; } } @@ -196,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/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 { 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; 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/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, }); } 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; +} 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/pad/app-pad.less b/www/pad/app-pad.less index 48ee72854..b939c4b9d 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 { @@ -177,13 +178,19 @@ body.cp-app-pad { } div.cp-comment-bubble { position: relative; - order: 2; button { .fa { margin: 0 !important; } - right: 20px; 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,7 +211,7 @@ body.cp-app-pad { &.cke_body_width { div.cp-comment-bubble { button { - right: 0px; + margin-left: 30px; } } iframe { diff --git a/www/pad/comments.js b/www/pad/comments.js index 4d752d54d..72935a92b 100644 --- a/www/pad/comments.js +++ b/www/pad/comments.js @@ -749,39 +749,29 @@ 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[ranges.length-1], button: button }; $(button).click(function(e)  { e.stopPropagation(); Env.editor.execCommand('comment'); Env.bubble = undefined; + removeCommentBubble(Env); }); - 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) { @@ -814,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? 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); 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; 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' });