Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

pull/1/head
ansuz 4 years ago
commit f4451efeac

@ -1,13 +1,5 @@
<svg width="280" height="349" version="1.1" viewBox="0 0 74.083 92.34" xmlns="http://www.w3.org/2000/svg" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb">
<g>
<g transform="translate(-640.42 -172.99)" style="fill:#ffffff">
<g style="fill:#ffffff">
<path d="m644.02 176.9h44.386l22.414 20.826v24.899c0 26.166-21.414 32.228-33.117 38.409-12.815-5.8945-32.794-12.329-33.117-38.409z" style="fill:#ffffff"/>
</g>
<g style="fill:#ffffff">
<path d="m644.02 176.9h44.386l22.414 20.826v24.899c0 26.166-21.414 32.228-33.117 38.409-12.815-5.8945-32.794-12.329-33.117-38.409z" style="fill:#ffffff"/>
</g>
</g>
<g transform="translate(-125.38 -26.449)">
<path d="m128.98 30.355 0.55499 39.644h33.141l4e-3 -39.644z" style="fill-opacity:.39608;fill:#949494"/>
<path d="m162.69 70 3e-3 43.946c12.825-5.8796 32.762-17.077 33.127-43.157l0.0108-0.78911z" style="fill-opacity:.39608;fill:#949494"/>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -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;

@ -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;

@ -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;
}
}
}

@ -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;

@ -162,7 +162,7 @@
}
}
&.btn-light { // XXX DARK
&.btn-light {
border-color: @cryptpad_text_col;
color: @cryptpad_text_col;
background-color: transparent;

@ -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;
}

@ -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;
}
}
}

@ -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%));

@ -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,7 +264,12 @@
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;

@ -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;

@ -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;

@ -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 {

@ -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;

@ -152,7 +152,7 @@ define([
var $codeMirror = $('.CodeMirror');
$('<img>', {
src: '/customize/CryptPad_logo.svg',
src: '/customize/CryptPad_logo_grey.svg',
alt: '',
class: 'cp-app-code-preview-empty'
}).appendTo($previewContainer);

@ -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,
});
}

@ -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 <nuxlli@gmail.com>
@author Zeno Rocha <hi@zenorocha.com>
*/
.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;
}

@ -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 {

@ -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 {

@ -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?

@ -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);

@ -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;

@ -78,7 +78,7 @@ define([
if (c === '') {
var $empty = $('<img>', {
src: '/customize/CryptPad_logo.svg',
src: '/customize/CryptPad_logo_grey.svg',
alt: '',
class: 'cp-app-code-preview-empty'
});

Loading…
Cancel
Save