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