diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less
index f69e6505f..1b755fd96 100644
--- a/customize.dist/src/less2/include/colortheme-dark.less
+++ b/customize.dist/src/less2/include/colortheme-dark.less
@@ -237,7 +237,7 @@
@cp_dropdown-bg-active: @cryptpad_color_grey;
// Rendered Markdown
-@cp_markdown-bg: @cryptpad_color_light_grey;
+@cp_markdown-bg: @cryptpad_color_lighter_grey;
@cp_markdown-border: @cryptpad_color_grey;
// Avatar
@@ -327,9 +327,9 @@
@cp_history-fg: @cp_toolbar-bottom-fg;
// Tokenfield
-@cp_token-bg: @cryptpad_color_lighter_grey;
+@cp_token-bg: @cryptpad_color_neutral2_grey;
@cp_token-fg: @cryptpad_text_col;
-@cp_token-bg-hover: @cryptpad_color_light_grey;
+@cp_token-bg-hover: @cryptpad_color_neutral_grey;
@cp_token-invalid: @cryptpad_color_warn_red;
// Usergrid
@@ -343,6 +343,8 @@
// Apps
+@cp_app-bg: @cryptpad_color_light_grey;
+
// Accounts
@cp_accounts-basic: @cryptpad_color_basic;
@cp_accounts-pro: @cryptpad_color_pro;
@@ -373,7 +375,24 @@
@cp_debug-hover: fade(@cryptpad_color_black, 10%);
@cp_debug-icon-hover: @cryptpad_color_dark_grey;
-
+// Mediatag
+@cp_mediatag-text-bg: @cryptpad_color_white;
+@cp_mediatag-text-fg: @cryptpad_text_col;
+
+// File
+@cp_file-progress-bg: @colortheme_logo-2;
+@cp_file-progress-fg: @cryptpad_text_col;
+
+// Kanban
+@cp_kanban-fg: @cryptpad_text_col;
+@cp_kanban-item-bg: @cryptpad_color_light_grey;
+@cp_kanban-board-bg: @cryptpad_color_help_grey;
+@cp_kanban-conflict-bg: @cryptpad_color_toolbar_grey;
+@cp_kanban-tags-bg: @cryptpad_color_help_grey;
+@cp_kanban-add-hover: fade(@cryptpad_color_black, 10%);
+@cp_kanban-trash-bg: @cryptpad_color_warn_red;
+@cp_kanban-color0: @cryptpad_color_neutral2_grey;
+@cp_kanban-colors: darken(#FFD4D4,75%), darken(#FFDECA, 75%), darken(#FFE69C,75%), darken(#DBFFB7,75%), darken(#AFFDC2,75%), darken(#C9FFFE,75%), darken(#C8D6FF,75%), darken(#E4CAFF,75%);
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 7c1475ac1..b1d6258ec 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -241,7 +241,7 @@
@cp_dropdown-bg-active: @cryptpad_color_grey;
// Rendered Markdown
-@cp_markdown-bg: @cryptpad_color_light_grey;
+@cp_markdown-bg: @cryptpad_color_lighter_grey;
@cp_markdown-border: @cryptpad_color_grey;
// Avatar
@@ -331,9 +331,9 @@
@cp_history-fg: @cp_toolbar-bottom-fg;
// Tokenfield
-@cp_token-bg: @cryptpad_color_lighter_grey;
+@cp_token-bg: @cryptpad_color_neutral2_grey;
@cp_token-fg: @cryptpad_text_col;
-@cp_token-bg-hover: @cryptpad_color_light_grey;
+@cp_token-bg-hover: @cryptpad_color_neutral_grey;
@cp_token-invalid: @cryptpad_color_warn_red;
// Usergrid
@@ -346,6 +346,8 @@
// Apps
+@cp_app-bg: @cryptpad_color_light_grey;
+
// Accounts
@cp_accounts-basic: @cryptpad_color_basic;
@cp_accounts-pro: @cryptpad_color_pro;
@@ -376,4 +378,25 @@
@cp_debug-hover: fade(@cryptpad_color_black, 10%);
@cp_debug-icon-hover: @cryptpad_color_dark_grey;
+// Mediatag
+@cp_mediatag-text-bg: @cryptpad_color_white;
+@cp_mediatag-text-fg: @cryptpad_text_col;
+
+// File
+@cp_file-progress-bg: @colortheme_logo-2;
+@cp_file-progress-fg: @cryptpad_text_col;
+
+// Kanban
+@cp_kanban-fg: @cryptpad_text_col;
+@cp_kanban-item-bg: @cryptpad_color_light_grey;
+@cp_kanban-board-bg: @cryptpad_color_help_grey;
+@cp_kanban-conflict-bg: @cryptpad_color_toolbar_grey;
+@cp_kanban-tags-bg: @cryptpad_color_help_grey;
+@cp_kanban-add-hover: fade(@cryptpad_color_black, 10%);
+@cp_kanban-trash-bg: @cryptpad_color_warn_red;
+@cp_kanban-color0: @cryptpad_color_neutral2_grey;
+@cp_kanban-colors: #FFD4D4, #FFDECA, #FFE69C, #DBFFB7, #AFFDC2, #C9FFFE, #C8D6FF, #E4CAFF;
+
+
+
diff --git a/customize.dist/src/less2/include/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less
index 5b78414b3..f46ff06aa 100644
--- a/customize.dist/src/less2/include/tokenfield.less
+++ b/customize.dist/src/less2/include/tokenfield.less
@@ -76,6 +76,10 @@
height: 100%;
vertical-align: middle;
padding-right: 4px;
+ color: @cp_token-fg;
+ &:hover {
+ color: contrast(@cp_token-fg, darken(@cp_token-fg, 10%), lighten(@cp_token-fg, 10%));
+ }
}
}
.token-input {
diff --git a/www/file/app-file.less b/www/file/app-file.less
index 1226ded8d..739720f6e 100644
--- a/www/file/app-file.less
+++ b/www/file/app-file.less
@@ -14,6 +14,7 @@
// body
display: flex;
flex-flow: column;
+ background-color: @cp_app-bg;
#cp-app-file-content {
flex: 1;
@@ -57,7 +58,8 @@
width: 90vw;
height: 100%;
padding: 2em;
- background-color: white;
+ background-color: @cp_mediatag-text-bg;
+ color: @cp_mediatag-text-fg;
overflow-y: auto;
word-wrap: break-word;
white-space: pre-wrap;
@@ -77,14 +79,14 @@
margin-top: 5px;
height: 40px;
font-size: 20px;
- border: 1px solid @colortheme_logo-2;
+ border: 1px solid @cp_file-progress-bg;
background: white;
- color: @cryptpad_text_col;
+ color: @cp_file-progress-fg;
display: flex;
justify-content: space-between;
position: relative;
.cp-app-file-progress-dl {
- border-right: 1px solid @cryptpad_text_col;
+ border-right: 1px solid @cp_file-progress-fg;
}
.cp-app-file-progress-dl, .cp-app-file-progress-dc {
width: 50%;
@@ -99,7 +101,7 @@
top: 0;
left: 0;
bottom: 0;
- background: @colortheme_logo-2;
+ background: @cp_file-progress-bg;
}
}
.cp-app-file-progress-txt {
@@ -116,7 +118,8 @@
display: block;
margin: 50px auto;
max-width: 80vw;
- label {
+ button {
+ width: 100%;
line-height: ~"calc(50vh - 20px)";
text-align: center;
position: relative;
@@ -143,10 +146,6 @@
}
}
}
- .cp-app-file-hovering {
- background-color: rgba(255, 0, 115, 0.5) !important;
- }
-
.cp-app-file-block {
display: block;
}
@@ -154,31 +153,9 @@
display: none;
}
.cp-app-file-input + label {
- //border: 2px solid black;
- //background-color: rgba(50, 50, 50, .10);
display: block;
}
- .cp-app-file-input:focus + label,
- .cp-app-file-input + label:hover {
- //background-color: rgba(50, 50, 50, 0.30);
- }
-
- #cp-app-file-dlprogress {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
-
-
- transition: width 200ms;
- width: 0%;
- max-width: 100%;
- max-height: 100%;
- background-color: rgba(255, 0, 115, 0.75);
- z-index: 10000;
- display: block;
- }
#cp-app-file-download-view {
flex: 1;
diff --git a/www/file/inner.html b/www/file/inner.html
index 45ba831fe..450bbbb26 100644
--- a/www/file/inner.html
+++ b/www/file/inner.html
@@ -13,7 +13,7 @@
-
diff --git a/www/file/inner.js b/www/file/inner.js
index 59291c964..5b3fc66ec 100644
--- a/www/file/inner.js
+++ b/www/file/inner.js
@@ -44,7 +44,7 @@ define([
var $appContainer = $('#cp-app-file-content');
var $form = $('#cp-app-file-upload-form');
var $dlview = $('#cp-app-file-download-view');
- var $label = $form.find('label');
+ var $label = $form.find('button');
var $bar = $('.cp-toolbar-container');
var $body = $('body');
@@ -175,6 +175,10 @@ define([
});
}
+ $label.click(function () {
+ $form.find('input[type="file"]').click();
+ });
+
$form.css({
display: 'block',
});
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index ac91a9e1a..80424c9d4 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -14,24 +14,18 @@
flex-flow: column;
max-height: 100%;
min-height: auto;
- color: @cryptpad_text_col;
+ color: @cp_kanban-fg;
+ background-color: @cp_app-bg;
- @board-bg: #eaeaea;
+ @board-bg: @cp_kanban-board-bg;
- @palette0: #C9C9C9; // Default bg color for header
+ @palette0: @cp_kanban-color0; // Default bg color for header
- @kanban-colors:
- #FFD4D4,
- #FFDECA,
- #FFE69C,
- #DBFFB7,
- #AFFDC2,
- #C9FFFE,
- #C8D6FF,
- #E4CAFF;
+ @kanban-colors: @cp_kanban-colors;
.kanban-board-header {
background-color: @palette0;
+ color: @cp_kanban-fg;
}
.kanban-board {
.kanban-board-inner {
@@ -41,7 +35,10 @@
display: flex;
flex-flow: column;
}
- color: @cryptpad_text_col;
+ color: @cp_kanban-fg;
+ button {
+ color: @cp_kanban-fg;
+ }
}
.cp-kanban-palette-nocolor {
@@ -70,8 +67,8 @@
}
#cp-kanban-edit-conflicts {
padding: 5px;
- background: #eee;
- color: @cryptpad_text_col;
+ background: @cp_kanban-conflict-bg;
+ color: @cp_kanban-fg;
font-size: 14px;
div {
display: inline;
@@ -83,7 +80,7 @@
margin-bottom: 5px;
}
#cp-kanban-edit-body {
- border: 1px solid @colortheme_modal-input;
+ border: 1px solid @cp_forms-border;
.CodeMirror {
height: 105px;
resize: vertical;
@@ -92,12 +89,12 @@
box-sizing: content-box;
}
.cp-markdown-toolbar {
- background-color: #eee;
- color: @cryptpad_text_col;
+ background-color: @cp_kanban-conflict-bg;
+ color: @cp_kanban-fg;
button {
&:hover {
- background-color: @cryptpad_text_col;
- color: white;
+ background-color: @cp_kanban-fg;
+ color: @cp_kanban-conflict-bg;
}
}
}
@@ -113,7 +110,7 @@
width: 30px;
text-align: center;
line-height: 30px;
- color: @cryptpad_text_col;
+ color: @cp_kanban-fg;
}
}
#cp-kanban-edit-tags {
@@ -167,6 +164,19 @@
padding: 5px;
flex-wrap: wrap;
touch-action: none;
+ background: @cp_kanban-item-bg;
+ cursor: move;
+
+ margin-bottom: 10px;
+ &:last-child {
+ margin: 0;
+ }
+ &.is-moving.gu-mirror {
+ transform: rotate(3deg);
+ height: auto !important;
+ opacity: 0.8;
+ }
+
.cp-kanban-cursors {
margin-top: 10px;
}
@@ -197,15 +207,16 @@
border: none;
padding: 5px;
margin: 0;
- background-color: @cryptpad_color_grey;
+ background-color: @cp_markdown-bg;
+ color: @cp_kanban-fg;
width: 100%;
}
table {
- color: @cryptpad_text_col;
- border-color: @cryptpad_text_col;
+ color: @cp_kanban-fg;
+ border-color: @cp_kanban-fg;
th {
padding: 5px !important;
- background-color: fade(@cryptpad_text_col, 10%);
+ background-color: fade(@cp_kanban-fg, 10%);
}
td {
padding: 5px;
@@ -220,7 +231,7 @@
padding: 0 5px;
margin-right: 5px;
margin-top: 5px;
- background-color: rgba(0,0,0,0.1);
+ background-color: @cp_kanban-tags-bg;
display: inline-block;
font-size: 12px;
}
@@ -240,6 +251,24 @@
}
.kanban-board {
+ position: relative;
+ transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+ margin: 10px;
+ vertical-align: top;
+ display: flex;
+ flex-flow: column;
+ width: 300px;
+ margin: 10px 5px;
+
+ &.is-moving.gu-mirror {
+ transform: rotate(3deg);
+ opacity: 0.8;
+ .kanban-drag {
+ overflow: hidden;
+ padding-right: 50px;
+ }
+ }
+
main {
padding: 0 10px;
margin: 10px 0;
@@ -255,12 +284,18 @@
padding: 5px 10px;
.kanban-title-board {
flex: 1;
- margin-right: 10px;
min-width: 0;
overflow: hidden;
//white-space: nowrap;
text-overflow: ellipsis;
+ font-weight: 700;
+ margin: 0;
+ margin-right: 10px;
+ padding: 0;
+ display: inline;
+ cursor: text;
}
+
#kanban-edit {
font-weight: bold;
}
@@ -276,8 +311,8 @@
.tools_unselectable();
outline: none;
width: 50%;
- border: 1px solid fade(@cryptpad_text_col, 70%);
- color: fade(@cryptpad_text_col, 70%);
+ border: 1px solid fade(@cp_kanban-fg, 70%);
+ color: fade(@cp_kanban-fg, 70%);
border-radius: 0px;
font-size: 25px;
display: inline-flex;
@@ -293,7 +328,7 @@
margin-left: 5px;
}
&:hover {
- background-color: rgba(0,0,0,0.1);
+ background-color: @cp_kanban-add-hover;
}
.fa {
margin-right: 5px;
@@ -351,7 +386,7 @@
}
em {
font-size: 14px;
- color: lighten(@cryptpad_text_col, 10%);
+ color: lighten(@cp_kanban-fg, 10%);
}
span {
@@ -359,13 +394,13 @@
padding: 0 5px;
margin-right: 5px;
margin-top: 5px;
- background-color: rgba(0,0,0,0.1);
+ background-color: @cp_kanban-tags-bg;
display: inline-block;
font-size: 14px;
cursor: pointer;
&.active {
- background-color: @cryptpad_text_col;
- color: #fff;
+ background-color: @cp_kanban-fg;
+ color: @cp_kanban-item-bg;
}
}
}
@@ -393,8 +428,8 @@
#cp-kanban-controls {
.cp-kanban-changeView {
span.cp-kanban-view {
- background-color: @cryptpad_text_col !important;
- color: white;
+ background-color: @cp_kanban-fg !important;
+ color: @cp_app-bg;
}
span.cp-kanban-view-small {
}
@@ -407,8 +442,8 @@
span.cp-kanban-view {
}
span.cp-kanban-view-small {
- background-color: @cryptpad_text_col !important;
- color: white;
+ background-color: @cp_kanban-fg !important;
+ color: @cp_app-bg;
}
}
}
@@ -471,14 +506,14 @@
right: 0;
}
&.kanban-trash-active {
- color: @colortheme_notification-warn;
+ color: @cp_kanban-trash-bg;
div {
- background: fade(@colortheme_notification-warn, 20%);
+ background: fade(@cp_kanban-trash-bg, 20%);
}
}
&.kanban-trash-suggest {
div {
- background: fade(@cryptpad_text_col, 20%);
+ background: fade(@cp_kanban-fg, 20%);
}
}
.kanban-item, .kanban-board {
@@ -489,7 +524,7 @@
#kanban-edit {
width: 100%;
background: transparent;
- border: 1px solid rgba(0,0,0,0.3);
+ border: 1px solid @cp_kanban-add-hover;
color: inherit;
}
@@ -497,8 +532,8 @@
order: 2;
width: 300px;
margin: 10px 5px;
- border: 1px solid @cryptpad_text_col;
- color: @cryptpad_text_col;
+ border: 1px solid @cp_kanban-fg;
+ color: @cp_kanban-fg;
height: 40px;
display: inline-flex;
justify-content: center;
@@ -509,7 +544,7 @@
cursor: pointer;
.tools_unselectable();
&:hover {
- background-color: rgba(0,0,0,0.1);
+ background-color: @cp_kanban-add-hover;
}
}
@@ -571,4 +606,30 @@
}
}
+ .gu-mirror {
+ position: fixed !important;
+ margin: 0 !important;
+ z-index: 9999 !important;
+ }
+
+ .gu-hide {
+ display: none !important;
+ }
+
+ .gu-unselectable {
+ -webkit-user-select: none !important;
+ -moz-user-select: none !important;
+ -ms-user-select: none !important;
+ user-select: none !important;
+ }
+
+ .gu-transit {
+ opacity: 0.2 !important;
+ transform: rotate(0deg) !important;
+ }
+
+ .form-group {
+ text-align: right;
+ margin-button: 5px;
+ }
}
diff --git a/www/kanban/jkanban.css b/www/kanban/jkanban.css
deleted file mode 100644
index bb8d5eb6a..000000000
--- a/www/kanban/jkanban.css
+++ /dev/null
@@ -1,97 +0,0 @@
-.kanban-container * {
- box-sizing: border-box;
-}
-
-.kanban-board {
- position: relative;
- transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
- margin: 10px;
- vertical-align: top;
- display: flex;
- flex-flow: column;
- width: 300px;
- margin: 10px 5px;
-}
-
-.kanban-board.disabled-board {
- opacity: .3;
-}
-
-.kanban-board.is-moving.gu-mirror {
- transform: rotate(3deg);
- opacity: 0.8;
-}
-
-.kanban-board.is-moving.gu-mirror .kanban-drag {
- overflow: hidden;
- padding-right: 50px;
-}
-
-.kanban-board header {
- font-size: 16px;
- padding: 10px;
-}
-
-.kanban-board header .kanban-title-board {
- font-weight: 700;
- margin: 0;
- padding: 0;
- display: inline;
- cursor: text;
-}
-
-.kanban-board header .kanban-title-button {
- float: right;
- line-height: 1;
- padding: .25rem .5rem;
-}
-
-
-.kanban-item {
- background: #fff;
- padding: 15px;
- margin-bottom: 10px;
-}
-
-.kanban-item:hover {
- cursor: move;
-}
-
-.kanban-item:last-child {
- margin: 0;
-}
-
-.kanban-item.is-moving.gu-mirror {
- transform: rotate(3deg);
- height: auto !important;
- opacity: 0.8;
-}
-
-/* Dragula CSS */
-
-.gu-mirror {
- position: fixed !important;
- margin: 0 !important;
- z-index: 9999 !important;
-}
-
-.gu-hide {
- display: none !important;
-}
-
-.gu-unselectable {
- -webkit-user-select: none !important;
- -moz-user-select: none !important;
- -ms-user-select: none !important;
- user-select: none !important;
-}
-
-.gu-transit {
- opacity: 0.2 !important;
- transform: rotate(0deg) !important;
-}
-
-.form-group {
- text-align: right;
- margin-button: 5px;
-}