blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Kanban and file app dark

Browse source
This commit is contained in:
yflory 2021-01-27 17:00:21 +01:00
parent 51ff055e61
commit b7681ffbf2
8 changed files with 174 additions and 183 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
customize.dist/src/less2/include/colortheme-dark.less
View file

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

29
customize.dist/src/less2/include/colortheme.less
View file

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

4
customize.dist/src/less2/include/tokenfield.less
View file

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

41
www/file/app-file.less
View file

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

2
www/file/inner.html
View file

@ -13,7 +13,7 @@
<div id="cp-app-file-content">
<div id="cp-app-file-upload-form" style="display: none;">
<input type="file" name="file" id="cp-app-file-upfile" class="cp-app-file-input" />
<label for="cp-app-file-upfile" class="btn btn-primary cp-app-file-block unselectable" data-localization-title="upload_choose"
<button for="cp-app-file-upfile" class="btn btn-primary cp-app-file-block unselectable" data-localization-title="upload_choose"
data-localization="upload_choose"></label>
</div>
<div id="cp-app-file-download-view" style="display: none;">

6
www/file/inner.js
View file

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

151
www/kanban/app-kanban.less
View file

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

97
www/kanban/jkanban.css
View file

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