From baddf8ae1172d25dbd65e3d9bd1ce68e04bd37dc Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 25 Jan 2021 18:07:05 +0100 Subject: [PATCH] Move all color variables to colortheme.less --- .../src/less2/include/checkmark.less | 22 +- .../src/less2/include/colortheme-dark.less | 219 ++++++++++++++++-- .../src/less2/include/colortheme.less | 134 ++++++++++- .../src/less2/include/comments.less | 15 +- .../src/less2/include/contextmenu.less | 16 +- customize.dist/src/less2/include/corner.less | 62 ++--- .../src/less2/include/creation.less | 60 ++--- customize.dist/src/less2/include/drive.less | 137 ++++------- customize.dist/src/less2/include/export.less | 15 +- .../src/less2/include/fileupload.less | 8 +- customize.dist/src/less2/include/forms.less | 5 +- customize.dist/src/less2/include/help.less | 6 +- customize.dist/src/less2/include/icons.less | 9 +- .../src/less2/include/infopages.less | 84 ++----- .../src/less2/include/leftside-menu.less | 2 +- .../src/less2/include/limit-bar.less | 3 +- .../src/less2/include/mentions.less | 4 +- customize.dist/src/less2/include/modal.less | 4 +- .../src/less2/include/modals-ui-elements.less | 14 +- .../src/less2/include/notifications.less | 8 +- .../src/less2/include/password-input.less | 2 +- .../src/less2/include/sidebar-layout.less | 16 +- customize.dist/src/less2/include/support.less | 8 +- .../src/less2/include/toolbar-history.less | 10 +- customize.dist/src/less2/include/toolbar.less | 62 +++-- .../src/less2/include/usergrid.less | 12 +- www/common/LessLoader.js | 1 + www/common/common-interface.js | 3 - www/common/common-ui-elements.js | 1 + www/common/drive-ui.js | 10 - 30 files changed, 559 insertions(+), 393 deletions(-) diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index 15cbc5cea..17a434fd3 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./tools.less"; .checkmark_vars( @size: 20px @@ -23,12 +24,12 @@ } & { // XXX DARK - @cp_checkmark-back0: @colortheme_form-bg-alt; - @cp_checkmark-back0-active: @colortheme_form-border; - @cp_checkmark-back1: @colortheme_form-bg; - @cp_checkmark-col1: @colortheme_form-color; - @cp_checkmark-back2: @colortheme_form-bg-alt; - @cp_checkmark-col2: @colortheme_form-color-alt; + @cp_checkmark-back0: @cp_forms-bg; + @cp_checkmark-back0-active: @cp_forms-disabled; + @cp_checkmark-back1: @cp_forms-border; + @cp_checkmark-col1: @cp_forms-bg; + @cp_checkmark-back2: @cp_forms-bg; + @cp_checkmark-col2: @cp_forms-border; @cp_checkmark-disabled: @cp_forms-disabled; .checkmark_vars(); @@ -38,10 +39,7 @@ display: flex; align-items: center; position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + .tools_unselectable(); & > a { margin-left: 0.25em; @@ -103,7 +101,7 @@ background-color: @cp_checkmark-back0; display: flex; justify-content: center; - border: 1px solid @colortheme_form-border; + border: 1px solid @cp_checkmark-disabled; flex-shrink: 0; &:after { content: ""; @@ -196,7 +194,7 @@ display: flex; justify-content: center; align-items: center; - border: 1px solid @colortheme_form-border; + border: 1px solid @cp_checkmark-disabled; flex-shrink: 0; &:after { display: none; diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 0028af616..d7615072a 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -9,18 +9,17 @@ @colortheme_loading_bg: #E7E7E7; @colortheme_link-color: #0275D8; -@colortheme_link-color-visited: #005999; +@colortheme_link-color-visited: lighten(@colortheme_link-color, 10%); @colortheme_info-background: #eeeeee; -@colortheme_old-base: #302B28; -@colortheme_old-fore: #fafafa; - @colortheme_base: #fff; @colortheme_light-base: lighten(@colortheme_base, 20%); @colortheme_cp-red: #FA5858; // remove red @colortheme_cp-green: #46E981; +@colortheme_old-fore: #fafafa; + @colortheme_form-border: #bbbbbb; @colortheme_form-bg: @colortheme_logo-2; @colortheme_form-color: #ffffff; @@ -48,9 +47,6 @@ @colortheme_alertify-red: #E55236; @colortheme_alertify-red-color: #FFF; @colortheme_alertify-red-border: transparent; -@colortheme_alertify-green: #77C825; -@colortheme_alertify-green-color: #FFF; -@colortheme_alertify-green-border: transparent; @colortheme_alertify-primary: @colortheme_form-bg; @colortheme_alertify-primary-text: @colortheme_form-color; @colortheme_alertify-primary-border: transparent; @@ -60,15 +56,8 @@ @colortheme_alertify-cancel: @colortheme_modal-bg; @colortheme_alertify-cancel-border: #949494; -@colortheme_notification-log: fade(@colortheme_logo-2, 90%); -@colortheme_notification-color: #fff;; @colortheme_notification-warn: rgba(205, 37, 50, 0.8); -@colortheme_dropdown-bg: #f9f9f9; -@colortheme_dropdown-color: black; -@colortheme_dropdown-bg-hover: #f1f1f1; -@colortheme_dropdown-bg-active: #e8e8e8; - // Apps, these colors are used for customizing the toolbar for the apps. @colortheme_toolbar-warn: @colortheme_alertify-red; @colortheme_pad-toolbar-bg: #eeeeee; @@ -77,7 +66,7 @@ @colortheme_pad-chat-bg: #AAA; @colortheme_apps: { - default: #000000; + default: #0087FF; drive: #0087FF; // Used as icon color in index.js (index.html) pad: #256ad5; code: #EAA000; @@ -92,7 +81,7 @@ } @colortheme_static_apps: { - default: #000000; + default: #0087FF; teams: #4A3BBD; contacts: #607B8D; } @@ -115,11 +104,8 @@ @colortheme_sidebar-button-alt-bg: #fff; @cryptpad_color_blue: #4591C4; -@cryptpad_color_grey: #999999; -@cryptpad_color_light_grey: #e0e0e0; @cryptpad_header_col: #1E1F1F; -@cryptpad_text_col: #3F4141; -@cryptpad_color_light_blue: #00b7d8; +@cryptpad_text_col: #FFF-#3F4141; @colortheme_checkmark-back0: @colortheme_form-bg-alt; @colortheme_checkmark-back0-active: @colortheme_form-border; @@ -128,3 +114,196 @@ @colortheme_checkmark-back2: @colortheme_form-bg-alt; @colortheme_checkmark-col2: @colortheme_form-color-alt; @colortheme_checkmark-disabled: #AAA; + +// New variables + +// Colors +@cryptpad_color_hint_grey: #FFF-#777; +@cryptpad_color_dark_grey: #FFF-#999999; +@cryptpad_color_neutral_grey: #FFF-#aaaaaa; +@cryptpad_color_neutral2_grey: #FFF-#cccccc; +@cryptpad_color_help_grey: #FFF-#dddddd; +@cryptpad_color_grey: #FFF-#e0e0e0; +@cryptpad_color_toolbar_grey: #FFF-#EEEEEE; +@cryptpad_color_light_grey: #FFF-#f1f1f1; +@cryptpad_color_lighter_grey: #FFF-#f9f9f9; + +@cryptpad_color_light_blue: #FFF-#00b7d8; +@cryptpad_color_lighter_blue: #FFF-#d2e1f2; +@cryptpad_color_warn_red: #FFF-#eb675e; +@cryptpad_color_black: #FFF-#000; +@cryptpad_color_white: #FFF-#FFF; + +@cryptpad_color_link: #FFF-#0275D8; + +@cp_loading-bg: #FFF-#E7E7E7; + +// Alertify +@cp_alertify-bg: @cryptpad_color_white; +@cp_alertify-fg: @colortheme_logo-2; +@cp_alertify-hover: fade(@cp_alertify-fg, 25%); +@cp_alertify-overlay: fade(@cryptpad_text_col, 50%); +@cp_alertify-log-bg: fade(@colortheme_logo-2, 90%); +@cp_alertify-log-fg: @cryptpad_color_white; +@cp_alertify-warn-bg: rgba(205, 37, 50); + +// Forms +@cp_forms-fg: @cryptpad_text_col; +@cp_forms-bg: @cryptpad_color_white; +@cp_forms-border: @colortheme_logo-2; +@cp_forms-placeholder: @cryptpad_color_dark_grey; +@cp_forms-readonly: fade(@colortheme_logo-2, 25%); +@cp_forms-readonly-border: @cryptpad_color_white; +@cp_forms-disabled: #AAA; + +// Buttons +@cp_buttons-fg: @colortheme_logo-2; +@cp_buttons-default: #CCC; +@cp_buttons-default-color: @cryptpad_text_col; +@cp_buttons-default-border: @cryptpad_text_col; +@cp_buttons-red: #E55236; +@cp_buttons-red-color: #FFF; +@cp_buttons-red-border: transparent; +@cp_buttons-primary: @colortheme_logo-2; +@cp_buttons-primary-text: #FFFFFF; +@cp_buttons-primary-border: transparent; +@cp_buttons-disabled: #6c757d; +@cp_buttons-disabled-text: #ffffff; +@cp_buttons-disabled-border: #6c757d; +@cp_buttons-cancel: #ffffff; +@cp_buttons-cancel-border: #949494; + +// Sidebar layout +@cp_sidebar-left-bg: @cryptpad_color_grey; +@cp_sidebar-left-fg: @cryptpad_color_black; +@cp_sidebar-left-active: @cryptpad_color_white; +@cp_sidebar-right-bg: @cryptpad_color_white; +@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black +@cp_sidebar-hint: @cryptpad_color_hint_grey; + +// Drive +@cp_drive-bg: @cryptpad_color_white; +@cp_drive-fg: @cryptpad_text_col; +@cp_drive-header-fg: @cryptpad_color_dark_grey; +@cp_drive-icon-hover: @cryptpad_color_grey; +@cp_drive-icon-border: @cryptpad_color_neutral2_grey; +@cp_drive-selected-bg: @cryptpad_color_dark_grey; +@cp_drive-selected-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey); +@cp_drive-selection-overlay: fade(@cryptpad_color_black, 70%); +@cp_drive-selection-bg: @cryptpad_color_neutral_grey; +@cp_drive-selection-fg: @cryptpad_text_col; +@cp_drive-droppable-bg: @colortheme_logo-2; +@cp_drive-droppable-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey); +@cp_drive-infobox-bg: @cryptpad_color_lighter_blue; +@cp_drive-infobox-fg: @cryptpad_color_black; +@cp_drive-warnbox-bg: @cryptpad_color_warn_red; +@cp_drive-warnbox-fg: @cryptpad_color_white; +@cp_drive-tree-branch: @cryptpad_color_dark_grey; + + +// Tooltip background +@cp_tooltip-bg: @cryptpad_color_grey; +@cp_tooltip-fg: @cryptpad_text_col; + +// Dropdown +@cp_dropdown-fg: @cryptpad_text_col; +@cp_dropdown-bg: @cryptpad_color_lighter_grey; +@cp_dropdown-bg-hover: @cryptpad_color_light_grey; +@cp_dropdown-bg-active: @cryptpad_color_grey; + +// Rendered Markdown +@cp_markdown-bg: @cryptpad_color_light_grey; +@cp_markdown-border: @cryptpad_color_grey; + +// Avatar +@cp_avatar-bg: @cryptpad_color_grey; +@cp_avatar-fg: @cryptpad_text_col; + +// Comments +@cp_comments-fg: @cryptpad_text_col; +@cp_comments-bg: @cryptpad_color_white; +@cp_comments-header: @cryptpad_color_dark_grey; + +// Contextmenu +@cp_context-bg: @cryptpad_color_white; +@cp_context-bg-hover: @cryptpad_color_lighter_grey; +@cp_context-bg-active: @cryptpad_color_light_grey; +@cp_context-fg: @cryptpad_text_col; +@cp_context-icon: @cryptpad_color_dark_grey; +@cp_context-disabled: @cryptpad_color_neutral_grey; + +// Corner +@cp_corner-primary: @colortheme_logo-1; +@cp_corner-secondary: @cryptpad_color_white; + +// Pad Creation Screen +@cp_creation-bg: @cryptpad_color_white; +@cp_creation-fg: @cryptpad_text_col; +@cp_creation-button-bg: @colortheme_logo-2; +@cp_creation-button-fg: @cryptpad_color_white; +@cp_creation-error-bg: @colortheme_logo-1; +@cp_creation-error-fg: @cryptpad_color_light_grey; + +// Export +@cp_export-bg: @cryptpad_color_white; +@cp_export-fg: @cryptpad_text_col; +@cp_export-hint: @cryptpad_color_hint_grey; +@cp_export-error-bg: @cryptpad_color_grey; +@cp_export-error-bg2: @cryptpad_color_neutral2_grey; + +// File upload +@cp_upload-fg: @colortheme_logo-2; +@cp_upload-header: @cryptpad_color_help_grey; +@cp_upload-progress: @cryptpad_color_help_grey; + +// Help +@cp_help-bg: @cryptpad_color_help_grey; +@cp_help-fg: @cryptpad_text_col; +@cp_help-link: @cryptpad_color_link; + +// Static pages +@cp_static-bg: @cryptpad_color_grey; +@cp_static-fg: @cryptpad_text_col; +@cp_static-link: @colortheme_logo-2; +@cp_static-title: @colortheme_logo-2; +@cp_static-footer: @cryptpad_color_help_grey; +@cp_static-footer-border: @cryptpad_color_white; +@cp_static-topbar-fg: @colortheme_logo-2; + +// Limit +@cp_limit-fg: @cryptpad_text_col; + +// Mentions +@cp_mentions-bg: @cryptpad_color_grey; +@cp_mentions-hover: @cryptpad_color_help_grey; + +// Modals +@cp_access-overlay: fade(@cryptpad_color_white, 50%); +@cp_snapshots-hover: @cryptpad_color_help_grey; + +// Support +@cp_support-bg: @cryptpad_color_lighter_grey; +@cp_support-msg-bg: @cryptpad_color_grey; +@cp_support-header-bg: @cryptpad_color_help_grey; + +// Toolbar +@cp_toolbar-bg: @cryptpad_color_toolbar_grey; +@cp_toolbar-fg: @cryptpad_text_col; +@cp_toolbar-bottom-fg: @cryptpad_text_col; + +@cp_toolbar-fade1: fade(@cryptpad_color_black, 10%); +@cp_toolbar-fade3: fade(@cryptpad_color_black, 30%); +@cp_toolbar-warn: @cp_buttons-red; + +@cp_history-line-bg: @cryptpad_color_white; +@cp_history-bg1: #DDD; +@cp_history-bg2: #BBB; +@cp_history-fg: @cp_toolbar-bottom-fg; + +// Usergrid +@cp_usergrid-fg: @cryptpad_text_col; +@cp_usergrid-selected-bg: @colortheme_logo-2; +@cp_usergrid-selected-fg: @cryptpad_color_white; + +// Other +@cp_shadow-color: rgba(0,0,0,0.4); diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 924891005..2982ed374 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -118,13 +118,26 @@ // New variables // Colors +@cryptpad_color_hint_grey: #777; @cryptpad_color_dark_grey: #999999; +@cryptpad_color_neutral_grey: #aaaaaa; +@cryptpad_color_neutral2_grey: #cccccc; +@cryptpad_color_help_grey: #dddddd; @cryptpad_color_grey: #e0e0e0; +@cryptpad_color_toolbar_grey: #EEEEEE; @cryptpad_color_light_grey: #f1f1f1; @cryptpad_color_lighter_grey: #f9f9f9; + @cryptpad_color_light_blue: #00b7d8; +@cryptpad_color_lighter_blue: #d2e1f2; +@cryptpad_color_warn_red: #eb675e; @cryptpad_color_black: #000; @cryptpad_color_white: #FFF; +@cryptpad_color_green: #5cb85c; + +@cryptpad_color_link: #0275D8; + +@cp_loading-bg: #E7E7E7; // Alertify @cp_alertify-bg: @cryptpad_color_white; @@ -137,9 +150,11 @@ // Forms @cp_forms-fg: @cryptpad_text_col; +@cp_forms-bg: @cryptpad_color_white; @cp_forms-border: @colortheme_logo-2; @cp_forms-placeholder: @cryptpad_color_dark_grey; @cp_forms-readonly: fade(@colortheme_logo-2, 25%); +@cp_forms-readonly-border: @cryptpad_color_white; @cp_forms-disabled: #AAA; // Buttons @@ -150,15 +165,42 @@ @cp_buttons-red: #E55236; @cp_buttons-red-color: #FFF; @cp_buttons-red-border: transparent; -@cp_buttons-primary: @colortheme_form-bg; -@cp_buttons-primary-text: @colortheme_form-color; +@cp_buttons-primary: @colortheme_logo-2; +@cp_buttons-primary-text: #FFFFFF; @cp_buttons-primary-border: transparent; @cp_buttons-disabled: #6c757d; @cp_buttons-disabled-text: #ffffff; @cp_buttons-disabled-border: #6c757d; -@cp_buttons-cancel: @colortheme_modal-bg; +@cp_buttons-cancel: #ffffff; @cp_buttons-cancel-border: #949494; +// Sidebar layout +@cp_sidebar-left-bg: @cryptpad_color_grey; +@cp_sidebar-left-fg: @cryptpad_color_black; +@cp_sidebar-left-active: @cryptpad_color_white; +@cp_sidebar-right-bg: @cryptpad_color_white; +@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black +@cp_sidebar-hint: @cryptpad_color_hint_grey; + +// Drive +@cp_drive-bg: @cryptpad_color_white; +@cp_drive-fg: @cryptpad_text_col; +@cp_drive-header-fg: @cryptpad_color_dark_grey; +@cp_drive-icon-hover: @cryptpad_color_grey; +@cp_drive-icon-border: @cryptpad_color_neutral2_grey; +@cp_drive-selected-bg: @cryptpad_color_dark_grey; +@cp_drive-selected-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey); +@cp_drive-selection-overlay: fade(@cryptpad_color_black, 70%); +@cp_drive-selection-bg: @cryptpad_color_neutral_grey; +@cp_drive-selection-fg: @cryptpad_text_col; +@cp_drive-droppable-bg: @colortheme_logo-2; +@cp_drive-droppable-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey); +@cp_drive-infobox-bg: @cryptpad_color_lighter_blue; +@cp_drive-infobox-fg: @cryptpad_color_black; +@cp_drive-warnbox-bg: @cryptpad_color_warn_red; +@cp_drive-warnbox-fg: @cryptpad_color_white; +@cp_drive-tree-branch: @cryptpad_color_dark_grey; + // Tooltip background @cp_tooltip-bg: @cryptpad_color_grey; @@ -178,5 +220,91 @@ @cp_avatar-bg: @cryptpad_color_grey; @cp_avatar-fg: @cryptpad_text_col; +// Comments +@cp_comments-fg: @cryptpad_text_col; +@cp_comments-bg: @cryptpad_color_white; +@cp_comments-header: @cryptpad_color_dark_grey; + +// Contextmenu +@cp_context-bg: @cryptpad_color_white; +@cp_context-bg-hover: @cryptpad_color_lighter_grey; +@cp_context-bg-active: @cryptpad_color_light_grey; +@cp_context-fg: @cryptpad_text_col; +@cp_context-icon: @cryptpad_color_dark_grey; +@cp_context-disabled: @cryptpad_color_neutral_grey; + +// Corner +@cp_corner-primary: @colortheme_logo-1; +@cp_corner-secondary: @cryptpad_color_white; + +// Pad Creation Screen +@cp_creation-bg: @cryptpad_color_white; +@cp_creation-fg: @cryptpad_text_col; +@cp_creation-button-bg: @colortheme_logo-2; +@cp_creation-button-fg: @cryptpad_color_white; +@cp_creation-error-bg: @colortheme_logo-1; +@cp_creation-error-fg: @cryptpad_color_light_grey; + +// Export +@cp_export-bg: @cryptpad_color_white; +@cp_export-fg: @cryptpad_text_col; +@cp_export-hint: @cryptpad_color_hint_grey; +@cp_export-error-bg: @cryptpad_color_grey; +@cp_export-error-bg2: @cryptpad_color_neutral2_grey; + +// File upload +@cp_upload-fg: @colortheme_logo-2; +@cp_upload-header: @cryptpad_color_help_grey; +@cp_upload-progress: @cryptpad_color_help_grey; + +// Help +@cp_help-bg: @cryptpad_color_help_grey; +@cp_help-fg: @cryptpad_text_col; +@cp_help-link: @cryptpad_color_link; + +// Static pages +@cp_static-bg: @cryptpad_color_grey; +@cp_static-fg: @cryptpad_text_col; +@cp_static-link: @colortheme_logo-2; +@cp_static-title: @colortheme_logo-2; +@cp_static-footer: @cryptpad_color_help_grey; +@cp_static-footer-border: @cryptpad_color_white; +@cp_static-topbar-fg: @colortheme_logo-2; + +// Limit +@cp_limit-fg: @cryptpad_text_col; + +// Mentions +@cp_mentions-bg: @cryptpad_color_grey; +@cp_mentions-hover: @cryptpad_color_help_grey; + +// Modals +@cp_access-overlay: fade(@cryptpad_color_white, 50%); +@cp_snapshots-hover: @cryptpad_color_help_grey; + +// Support +@cp_support-bg: @cryptpad_color_lighter_grey; +@cp_support-msg-bg: @cryptpad_color_grey; +@cp_support-header-bg: @cryptpad_color_help_grey; + +// Toolbar +@cp_toolbar-bg: @cryptpad_color_toolbar_grey; +@cp_toolbar-fg: @cryptpad_text_col; +@cp_toolbar-bottom-fg: @cryptpad_text_col; + +@cp_toolbar-fade1: fade(@cryptpad_color_black, 10%); +@cp_toolbar-fade3: fade(@cryptpad_color_black, 30%); +@cp_toolbar-warn: @cp_buttons-red; + +@cp_history-line-bg: @cryptpad_color_white; +@cp_history-bg1: #DDD; +@cp_history-bg2: #BBB; +@cp_history-fg: @cp_toolbar-bottom-fg; + +// Usergrid +@cp_usergrid-fg: @cryptpad_text_col; +@cp_usergrid-selected-bg: @colortheme_logo-2; +@cp_usergrid-selected-fg: @cryptpad_color_white; + // Other @cp_shadow-color: rgba(0,0,0,0.4); diff --git a/customize.dist/src/less2/include/comments.less b/customize.dist/src/less2/include/comments.less index f53fb00ff..360a64c18 100644 --- a/customize.dist/src/less2/include/comments.less +++ b/customize.dist/src/less2/include/comments.less @@ -4,9 +4,8 @@ @import (reference) "./tools.less"; .comments_main() { - @data-color: #888; overflow-y: auto; - color: @cryptpad_text_col; + color: @cp_comments-fg; &:empty { display: none !important; @@ -29,7 +28,7 @@ margin-left: 30px; } .cp-comment-deleted { - background: white; + background-color: @cp_comments-bg; font-size: 14px; padding: 5px; } @@ -96,7 +95,7 @@ height: 40px; align-items: center; display: flex; - background-color: white; + background-color: @cp_comments-bg; position: relative; padding: 5px; box-sizing: content-box; @@ -108,7 +107,7 @@ margin-left: 5px; .cp-comment-time { font-size: 13px; - color: @data-color; + color: @cp_comments-header; } } .cp-comment-edit { @@ -127,15 +126,15 @@ } } .cp-comment-content { - background-color: white; + background-color: @cp_comments-bg; padding: 0px 5px 5px 5px; white-space: pre-wrap; word-break: break-word; } .cp-comment-edited { - background-color: white; + background-color: @cp_comments-bg; font-size: 13px; - color: @data-color; + color: @cp_comments-header; padding: 0 5px; } .cp-comment-actions { diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less index 023053438..d17f2c217 100644 --- a/customize.dist/src/less2/include/contextmenu.less +++ b/customize.dist/src/less2/include/contextmenu.less @@ -8,6 +8,9 @@ display: none; position: absolute; z-index: 50000; + & > ul { + background-color: @cp_context-bg; + } li { padding: 0; font-size: @colortheme_app-font-size; @@ -33,16 +36,25 @@ } a { cursor: pointer; + color: @cp_context-fg; + &:hover { + background-color: @cp_context-bg-hover; + color: @cp_context-fg; + } + &:active { + background-color: @cp_context-bg-active; + color: @cp_context-fg; + } .fa, .cptools { margin-right: 1rem; - color: @colortheme_context-menu-icon-color; + color: @cp_context-icon; width: 16px; } } } .cp-app-drive-context-noAction { font-style: italic; - color: #aaa; + color: @cp_context-disabled; cursor: default; display: none; } diff --git a/customize.dist/src/less2/include/corner.less b/customize.dist/src/less2/include/corner.less index 04d503cc9..f1b72b640 100644 --- a/customize.dist/src/less2/include/corner.less +++ b/customize.dist/src/less2/include/corner.less @@ -4,9 +4,11 @@ --LessLoader_require: LessLoader_currentFile(); }; & { - @corner-link: #ffff7a; @corner-blue: @colortheme_logo-1; @corner-white: @colortheme_base; + @corner-blue-alt: darken(@corner-blue, 10%); + @corner-white-alt: darken(@corner-white, 10%); + @keyframes appear { 0% { @@ -32,7 +34,6 @@ width: 350px; padding: 10px; background-color: fade(@corner-blue, 95%); - border: 1px solid @corner-blue; color: @corner-white; z-index: 9999; transform-origin: bottom right; @@ -41,7 +42,6 @@ &.cp-corner-alt { background-color: fade(@corner-white, 95%); - border: 1px solid @corner-blue; color: @corner-blue; } @@ -54,39 +54,6 @@ clear: left; height: 21px; } - .cp-corner-minimize, .cp-corner-maximize { - position: absolute; - height: 15px; - width: 20px; - top: 0; - right: 0; - font-size: 12px; - text-align: left; - cursor: pointer; - line-height: 15px; - display: none; - &:hover { - color: darken(@corner-white, 15%); - } - } - .cp-corner-minimize { - display: inline; - } - &.cp-minimized { - transition: transform 0.8s ease-in-out; - transform: scale(0.1); - animation: none; - .cp-corner-text, .cp-corner-actions, .cp-corner-footer { - display: none; - } - .cp-corner-maximize { - display: inline; - font-size: 130px; - width: 180px; - height: 200px; - line-height: 200px; - } - } &.cp-corner-big { width: 500px; max-width: 95%; @@ -99,13 +66,14 @@ font-size: 1.1em; } &:hover { - color: darken(@corner-white, 10%); + color: @corner-white-alt; + } } &.cp-corner-alt { .cp-corner-dontshow { &:hover { - color: lighten(@corner-blue, 10%); + color: @corner-blue-alt; } } } @@ -124,19 +92,19 @@ color: @corner-white; text-decoration: underline; &:hover { - color: darken(@corner-white, 10%); + color: @corner-white-alt; } } } &.cp-corner-alt a { color: @corner-blue; &:hover { - color: lighten(@corner-blue, 10%); + color: @corner-blue-alt; } } button { - padding: 5px; + padding: 5px; color: @corner-white; &:not(:first-child) { margin-left: 10px; @@ -151,15 +119,15 @@ background-color: @corner-white; color: @corner-blue; &:hover { - background-color: lighten(@corner-blue, 50%); - border-color: lighten(@corner-blue, 50%); + background-color: @corner-white-alt; + border-color: @corner-white-alt; } } &.cp-corner-cancel { background-color: @corner-blue; color: @corner-white; &:hover { - background-color: darken(@corner-blue, 10%); + background-color: @corner-blue-alt; } } } @@ -169,15 +137,15 @@ background-color: @corner-blue; color: @corner-white; &:hover { - background-color: darken(@corner-blue, 10%); - border-color: darken(@corner-blue, 10%); + background-color: @corner-blue-alt; + border-color: @corner-blue-alt; } } &.cp-corner-cancel { background-color: @corner-white; color: @corner-blue; &:hover { - background-color: lighten(@corner-blue, 50%); + background-color: @corner-white-alt; } } } diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index daef0b876..3bb187b9e 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -7,9 +7,9 @@ .creation_vars( @bg-color: @colortheme_apps[default] ) { - @creation-color: @cryptpad_text_col; + @creation-color: @cp_creation-fg; @creation-bg-color: @bg-color; - @creation-bg-color-light: lighten(@bg-color, 30%); + @creation-bg-color-light: contrast(@creation-color, lighten(@bg-color, 30%), darken(@bg-color, 30%)); }; .creation_main( @@ -17,23 +17,18 @@ ) { --LessLoader_require: LessLoader_currentFile(); .creation_vars(@bg-color); - --creation-color: @cryptpad_text_col; + --creation-color: @cp_creation-fg; --creation-bg-color: @bg-color; --creation-bg-color-light: @creation-bg-color-light; } & { .creation_vars(); - @colortheme_creation-modal-bg: #fff; - @colortheme_creation-modal: #666; - @colortheme_creation-modal-title: @colortheme_loading-bg; #cp-creation-container { position: absolute; z-index: 100000000; // #loading * 10 top: 0px; - //background: @colortheme_loading-bg; - background: @colortheme_loading_bg; - color: @colortheme_loading-color; + background: @cp_loading-bg; display: flex; flex-flow: column; /* we need column so that the child can shrink vertically */ justify-content: center; @@ -60,8 +55,8 @@ #cp-creation { overflow: auto; text-align: center; - background: @colortheme_creation-modal-bg; - color: @colortheme_creation-modal; + background: @cp_creation-bg; + color: @cp_creation-fg; font: @colortheme_app-font; outline: none; width: 700px; @@ -127,16 +122,16 @@ button { .tools_unselectable(); padding: 6px; - background: @colortheme_logo-2; + background: @cp_creation-button-bg; font-size: 20px; - color: #FFF; + color: @cp_creation-button-fg; margin: 3px 10px; border: none; cursor: pointer; outline: none; text-transform: uppercase; &:hover { - background: lighten(@colortheme_logo-2, 5%); + background: contrast(@cp_creation-button-fg, lighten(@cp_creation-button-bg, 5%), darken(@cp_creation-button-bg, 5%)); } } } @@ -171,10 +166,9 @@ } } .cp-creation-help, .cp-creation-warning { - font-size: 18px; - color: @colortheme_form-warning; + font-size: 16px; + color: @cp_creation-fg; &:hover { - color: @colortheme_form-warning-hov; text-decoration: none; } } @@ -196,11 +190,11 @@ input, select { font-size: 14px; - border: 1px solid @colortheme_form-bg; + background: @cp_forms-bg; + border: 1px solid @cp_forms-border; height: 26px; line-height: 26px; - //background-color: @colortheme_form-bg; - color: @cryptpad_text_col; + color: @cp_forms-fg; } .cp-creation-teams { @@ -221,14 +215,13 @@ padding: 5px; cursor: default; font: @colortheme_app-font; - color: @colortheme_modal-fg; margin: 0 1px; .tools_unselectable(); &.cp-selected { - background-color: @colortheme_alertify-primary; - color: @colortheme_alertify-primary-text; + background-color: @cp_creation-button-bg; + color: @cp_creation-button-fg; } .cp-creation-team-avatar { .fa { @@ -243,7 +236,7 @@ text-align: center; line-height: 18px; } - border: 1px solid @colortheme_alertify-primary; + border: 1px solid @cp_creation-button-bg; } } @@ -294,19 +287,6 @@ .cp-filler { flex: 1; } } - div.cp-creation-remember { - .cp-creation-remember-help { - width: 100%; - //font-style: italic; - font-size: 12px; - font-weight: bold; - color: @colortheme_form-bg; - line-height: 20px; - .fa { - margin-right: 10px; - } - } - } div.cp-creation-template { width: 100%; //flex: 1 0 auto; @@ -341,7 +321,7 @@ max-height: 159px; align-items: center; .cp-creation-template-element { - box-shadow: 2px 2px 7px @colortheme_form-border; + box-shadow: 2px 2px 7px @cp_shadow-color; width: 300px; max-width: calc(100% - 10px); padding: 2px; @@ -404,8 +384,8 @@ text-align: center; .cp-creation-deleted { margin: 0 10px; - background: @colortheme_loading-bg; - color: @colortheme_loading-color; + background: @cp_creation-error-bg; + color: @cp_creation-error-fg; padding: 10px; text-align: center; font-weight: bold; diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index b933fa32f..b6dac22c7 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -13,23 +13,6 @@ .tokenfield_main(); @colortheme_drive-bg-active: lighten(@colortheme_static_apps[default], 20%); - @colortheme_drive-color: @cryptpad_text_col; - - @drive_hover: #eee; - @drive_hover-light: lighten(@drive_hover, 20%); - @drive_info-box-bg: #d2e1f2; - @drive_info-box-border: #bbb; - @drive_table-header-fg: #555; - @drive_table-header-bg: #e8e8e8; - @drive_mobile-tree-border-col: #ccc; - - @drive_content-fg: @colortheme_sidebar-right-fg; - @drive_content-bg: @colortheme_sidebar-right-bg; - @drive_content-bg-ro: darken(@drive_content-bg, 10%); - - @drive_selected-bg: #888; - @drive_droppable-bg: #FE9A2E; - /* PAGE */ @@ -59,7 +42,7 @@ border: 1px solid transparent; &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) { - border: 1px solid #CCC; + border: 1px solid @cp_drive-icon-border; } .cp-app-drive-element-name { width: 100%; @@ -126,7 +109,6 @@ min-width: unset; max-width: unset; max-height: unset; - border-bottom: 1px solid @drive_mobile-tree-border-col; .cp-app-drive-tree-category { margin-top: 0.5em; } @@ -152,38 +134,34 @@ li { padding: 0px 5px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + .tools_unselectable(); } .cp-app-drive-element-restricted { - color: #939393; + color: @cp_drive-header-fg; } .cp-app-drive-element-droppable { - background-color: @drive_droppable-bg; - color: #222; + background-color: @cp_drive-droppable-bg; + color: @cp_drive-droppable-fg; } .cp-app-drive-element-selected { - background: @drive_selected-bg !important; - color: #eee; + background: @cp_drive-selected-bg !important; + color: @cp_drive-selected-fg; .fa-minus-square-o, .fa-plus-square-o { - color: @colortheme_sidebar-left-fg; + color: @cp_sidebar-left-fg; } .cptools { - color: #eee; + color: @cp_drive-selected-fg; } } .cp-app-drive-element-selected-tmp { - border: 1px dotted #bbb; - background: #AAA; - color: #ddd; + background: @cp_drive-selection-bg; + color: @cp_drive-selection-fg; .fa-minus-square-o, .fa-plus-square-o { - color: @colortheme_sidebar-left-fg; + color: @cp_sidebar-left-fg; } } @@ -205,19 +183,20 @@ font-size: 50px; } .cptools-folder-no-color { - color: #bbb; + color: #bbb; // XXX } .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: white; + color: @cryptpad_color_white; } &.cp-app-drive-current-color:first-child > .fa-check { - color: black; + color: @cryptpad_color_black; } } } @@ -231,13 +210,13 @@ margin: 15px; input { background: transparent; - color: @colortheme_drive-color; + color: @cp_drive-fg; .tools_placeholder-color(); outline-width: 0px; border-radius: 0; width: 100%; border: 0; - border-bottom: 3px solid @colortheme_drive-color; + border-bottom: 3px solid @cp_drive-fg; margin: 0 5px; flex: 1; min-width: 0; @@ -255,12 +234,12 @@ cursor: pointer; } .cp-app-drive-tree-search-icon, .cp-app-drive-search-cancel { - color: @colortheme_drive-color; + color: @cp_drive-fg; } } .cp-app-drive-search-spinner { display: inline-flex; - color: @colortheme_drive-color; + color: @cp_drive-fg; font-size: 40px; align-items: center; justify-content: center; @@ -280,7 +259,7 @@ font-size: @colortheme_app-font-size; //border-right: 1px solid #ccc; box-sizing: border-box; - background: @colortheme_sidebar-left-bg; + background: @cp_sidebar-left-bg; overflow: auto; resize: horizontal; width: auto; @@ -288,26 +267,11 @@ max-width: 500px; min-width: 200px; padding: 0px; - color: @colortheme_sidebar-left-fg; + color: @cp_sidebar-left-fg; display: flex; flex-flow: column; max-height: 100%; position: relative; - .cp-close-button { - position: absolute; - cursor: pointer; - right: 5px; - top: 5px; - font-size: 18px; - padding: 3px; - margin: 0; - border: 0; - background-color: transparent; - outline: none; - &:hover { - color: #000; - } - } .cp-app-drive-tree-categories-container { flex: 1; overflow: auto; @@ -330,7 +294,6 @@ width: ~"calc(100% - 30px)"; padding: 0 10px; border: 0; - color: lighten(@colortheme_sidebar-left-fg, 40%); height: auto; } & > span.cp-app-drive-element-row { @@ -391,7 +354,7 @@ height: 11px !important; padding: 0; margin: 0; - background: white; + background: @cryptpad_color_white; z-index: 10; cursor: default; &:before { @@ -431,9 +394,9 @@ top: -11px; content: ''; display: block; - border-left: 1px solid @colortheme_sidebar-left-branch; + border-left: 1px solid @cp_drive-tree-branch; height: ~"calc(1em + 11px)"; - border-bottom: 1px solid @colortheme_sidebar-left-branch; + border-bottom: 1px solid @cp_drive-tree-branch; width: 15px; } &:after { @@ -442,7 +405,7 @@ bottom: -7px; content: ''; display: block; - border-left: 1px solid @colortheme_sidebar-left-branch; + border-left: 1px solid @cp_drive-tree-branch; height: 100%; } &.cp-app-drive-tree-root { @@ -470,8 +433,8 @@ } #cp-app-drive-content { box-sizing: border-box; - background: @drive_content-bg; - color: @drive_content-fg; + background: @cp_sidebar-right-bg; + color: @cp_sidebar-right-fg; overflow-y: auto; flex: 1; display: flex; @@ -479,12 +442,12 @@ position: relative; .cp-app-drive-content-select-box { display: none; - background-color: rgba(100, 100, 100, 0.7); + background-color: @cp_drive-selection-overlay; position: absolute; z-index: 50; } &.cp-app-drive-readonly { - background: @drive_content-bg-ro; + background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%)); } h1 { padding-left: 10px; @@ -495,7 +458,7 @@ line-height: 2em; padding: 0.25em 0.75em; margin: 1em; - background: @drive_info-box-bg; + background: @cp_drive-infobox-bg; cursor: default; span { cursor: pointer; @@ -508,7 +471,7 @@ &:not(.cp-app-drive-element-header) { &:hover { &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) { - background-color: @drive_hover; + background-color: @cp_drive-icon-hover; } } } @@ -535,13 +498,13 @@ .cp-app-drive-path-clickable { cursor: pointer; &:hover { - background-color: #eee; + color: @cp_drive-fg; } } } font-size: 12px; line-height: 16px; - color: @drive_table-header-fg; + color: @cp_drive-header-fg; } } &.cp-app-drive-tags-list { @@ -603,7 +566,7 @@ margin: 0; padding: 0; border-radius: 0; - border: 1px solid #ddd; + border: 1px solid transparent; font-size: 14px; height: auto; } @@ -658,7 +621,7 @@ li { display: flex; input { - border: 1px solid #ddd; + border: 1px solid transparent; margin: 0; padding: 0 4px; flex: 1; @@ -734,7 +697,7 @@ } &.cp-app-drive-element-header { cursor: default; - color: @drive_table-header-fg; + color: @cp_drive-header-fg; span { &:not(.fa):not(.cptools) { text-align: left; @@ -748,7 +711,7 @@ &.cp-app-drive-sort-clickable { cursor: pointer; &:hover { - background: @drive_table-header-bg; + background: @cp_drive-icon-hover; } } } @@ -821,7 +784,7 @@ font-size: @colortheme_app-font-size; padding: 0 5px; border: 0; - color: @colortheme_drive-color; + color: @cp_drive-fg; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; @@ -832,7 +795,7 @@ } &.cp-app-drive-path-separator { - color: #ccc; + color: @cp_drive-header-fg; cursor: default; } @@ -841,7 +804,8 @@ } &.cp-app-drive-element-droppable { - background-color: @drive_droppable-bg; + background-color: @cp_drive-droppable-bg; + color: @cp_drive-droppable-fg; } &.cp-app-drive-path-clickable { cursor: pointer; @@ -867,13 +831,8 @@ #cp-app-drive-new-ghost-dialog.cp-modal-container { .drive_fileIcon; - border: 1px solid @colortheme_modal-fg; li:not(.cp-app-drive-element-selected):hover { - background: @colortheme_logo_2_light; - color: @cryptpad_text_col; - .cptools { - color: @cryptpad_text_col; - } + background: @cp_drive-icon-hover; } .cp-modal { display: flex; @@ -900,7 +859,7 @@ } .cp-app-drive-new-name { - color: @cryptpad_text_col; + color: @cp_drive-fg; white-space: nowrap; } @@ -954,8 +913,8 @@ display: flex; align-items: center; justify-content: center; - background-color: @colortheme_drive-bg-active; - color: black; + background-color: @cp_drive-infobox-bg; + color: @cp_drive-infobox-fg; font-weight: bold; text-transform: uppercase; cursor: default; @@ -965,8 +924,8 @@ display: flex; align-items: center; justify-content: center; - background-color: #eb675e; - color: white; + background-color: @cp_drive-warnbox-bg; + color: @cp_drive-warnbox-fg; font-weight: bold; text-transform: uppercase; cursor: default; diff --git a/customize.dist/src/less2/include/export.less b/customize.dist/src/less2/include/export.less index d1ee37d4b..548bc6ec6 100644 --- a/customize.dist/src/less2/include/export.less +++ b/customize.dist/src/less2/include/export.less @@ -6,13 +6,16 @@ min-height: 0; align-items: center; justify-content: center; + background-color: @cp_export-bg; + color: @cp_export-fg; .cp-export-block { width: 800px; max-width: 90vw; + // XXX Keep hardcoded progress bar colors for now... .cp-export-progress-bar-container { height: 24px; background: white; - border: 1px solid #DDD; + border: 1px solid ; width: 80%; margin: auto; position: relative; @@ -33,7 +36,7 @@ } } & > p { - color: #777; + color: @cp_export-hint; } .cp-export-progress { margin-bottom: 1rem; @@ -58,8 +61,8 @@ display: none; overflow-x: auto; max-height: 300px; - background: #ededed; - border: 1px solid #777; + background: @cp_export-error-bg; + border: 1px solid @cp_export-hint; padding: 5px 20px; margin-top: 1rem; & > p { @@ -69,7 +72,7 @@ & > div { padding: 5px 10px; margin: 5px 0; - background: #dedede; + background: @cp_export-error-bg2; .title { font-weight: bold; } @@ -79,7 +82,7 @@ } .reason { padding: 0 20px; - color: #777; + color: @cp_export-hint; } } } diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less index d2f2fff18..bd36faf8d 100644 --- a/customize.dist/src/less2/include/fileupload.less +++ b/customize.dist/src/less2/include/fileupload.less @@ -16,7 +16,7 @@ box-sizing: border-box; z-index: 100001; //Z file upload table container: just above the file picker display: none; - color: darken(@colortheme_static_apps[default], 10%); + color: @cp_upload-fg; max-height: 180px; overflow-y: auto; @@ -26,7 +26,7 @@ .cp-fileupload-header { display: flex; - background-color: darken(@colortheme_modal-bg, 10%); + background-color: @cp_upload-header; font-weight: bold; position: sticky; top: 0; @@ -39,7 +39,7 @@ padding: 0.25em 0.5em; cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + color: lighten(@cp_upload-fg, 10%); } } } @@ -86,7 +86,7 @@ position: absolute; width: 0px; height: 100%; - background-color: #dddddd; + background-color: @cp_upload-progress; z-index: -1; //Z file upload progress container } .cp-fileupload-table-cancel { diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index 13583ad85..26ba00d96 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -17,6 +17,7 @@ padding: @alertify_padding-base; &[readonly] { background-color: @cp_forms-readonly; + border-color: @cp_forms-readonly-border; color: @cp_forms-fg; } } @@ -135,7 +136,7 @@ &:hover, &:not(:disabled):active, &:focus { border-color: @cp_buttons-red-border; color: @cp_buttons-red-color; - background-color: contrast(@cp_buttons-red-color, darken(@cp_buttons-red, 10%), lighten(@colortheme_alertify-red, 10%)); + background-color: contrast(@cp_buttons-red-color, darken(@cp_buttons-red, 10%), lighten(@cp_buttons-red, 10%)); } } @@ -157,7 +158,7 @@ &:hover, &:not(:disabled):active, &:focus { color: @cp_buttons-primary-text; border-color: @cp_buttons-primary-border; - background-color: contrast(@colortheme_modal-bg, darken(@cp_buttons-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); + background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%)); } } diff --git a/customize.dist/src/less2/include/help.less b/customize.dist/src/less2/include/help.less index 3bc9ae1e0..04a20f4f3 100644 --- a/customize.dist/src/less2/include/help.less +++ b/customize.dist/src/less2/include/help.less @@ -7,7 +7,7 @@ .cp-help-container { position: relative; - background-color: @colortheme_help-bg; + background-color: @cp_help-bg; max-height: 50%; overflow-y: auto; &.cp-help-hidden { @@ -21,11 +21,11 @@ cursor: pointer; } .cp-help-text { - color: @cryptpad_text_col; + color: @cp_help-fg; margin: 0; padding: 5px 15px; a { - color: @colortheme_link-color; + color: @cp_help-link; } h1 { font-size: 20px; diff --git a/customize.dist/src/less2/include/icons.less b/customize.dist/src/less2/include/icons.less index 228e10c3d..118367b56 100644 --- a/customize.dist/src/less2/include/icons.less +++ b/customize.dist/src/less2/include/icons.less @@ -10,6 +10,8 @@ text-overflow: ellipsis; padding-top: 5px; padding-bottom: 5px; + border: 1px solid transparent; + background: @cp_drive-bg; .cp-icons-name { width: 100%; @@ -22,11 +24,11 @@ white-space: nowrap; text-overflow: ellipsis; word-wrap: break-word; - color: @cryptpad_text_col; + color: @cp_drive-fg; } &.cp-icons-element-selected { - background-color: rgba(0,0,0,0.2); - color: #666; + background: @cp_drive-icon-hover; + color: @cp_drive-fg; } .fa, .cptools { display: block; @@ -39,4 +41,3 @@ } } } - diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index 8373ff2e8..ead6f812c 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -3,7 +3,7 @@ .infopages_link () { text-decoration: none; - color: #0275D8; + color: @cryptpad_color_link; cursor: pointer; display: inline-flex; &:hover { @@ -23,11 +23,11 @@ body { @infopages_padding: 32px; // Basic setup for info pages, this should be used at the global level - background-color: @colortheme_info-background; - color: @cryptpad_text_col; + background-color: @cp_static-bg; + color: @cp_static-fg; a { - color: @colortheme_logo-2; - &:visited { color: darken(@colortheme_logo-2, 5%); } + color: @cp_static-link; + &:visited { color: darken(@cp_static-link, 5%); } } a:hover { opacity: 1; @@ -77,7 +77,7 @@ body { .cp-page-title { h1 { font-family: "IBM Plex Mono"; - color: @colortheme_logo-2; + color: @cp_static-title; margin: 50px auto; } } @@ -90,21 +90,21 @@ body { button { outline: none; - background-color: @colortheme_logo-2; - color: @colortheme_base; + background-color: @cp_buttons-primary; + color: @cp_buttons-primary-text; border: none; padding: 10px 20px; margin-right: 10px; border-radius: 0px; cursor: pointer; &:hover, &:focus { - background-color: darken(@colortheme_logo-2, 5%); + background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%)); } } button.cp-secondary { - background-color: white; - color: @colortheme_logo-2; - border: 1px solid @colortheme_logo-2; + background-color: @cp_buttons-cancel; + color: @cp_buttons-fg; + border: 1px solid @cp_buttons-fg; } .form-group { @@ -128,19 +128,18 @@ body { } } footer { - @footer-color: #d9d9d9; // FIXME use/make variable - background-color: @footer-color; + background-color: @cp_static-footer; padding-top: 20px; align-self: normal; // override align-items:center from parent in index.html .container { margin-bottom: 20px; a { - color: @colortheme_logo-2; + color: @cp_static-link; &:visited { - color: @colortheme_logo-2; - }; + color: @cp_static-link; + } } } .cp-logo-foot { @@ -156,18 +155,18 @@ body { display: block; font-family: "IBM Plex Mono"; font-size: 1.5rem; - color: @colortheme_logo-2; + color: @cp_static-link; margin-bottom: 10px; } } .cp-version-footer { - background-color: @footer-color; + background-color: @cp_static-footer; display: flex; flex-flow: column; align-items: center; padding: 0.5em; - border-top: 1px solid #fff; + border-top: 1px solid @cp_static-footer-border; select { min-width: 0; margin-bottom: 10px; @@ -175,47 +174,10 @@ body { } } - // Apply this to the top bar div - .cp-topbar { - background: #fff; - z-index: 10000; //Z infopage toolbar - position: fixed; - top: 0; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - box-sizing: border-box; - width: 100%; - height: @infopages_infobar-height; - padding-left: 0.5em; - padding-right: 0.5em; - vertical-align: middle; - font-size: 1.25em; - line-height: 1.25em; - cursor: default; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - .navbar-nav { - display: flex; - align-items: center; - } - a { - font-weight: 500; - padding: 0.6em; - .infopages_link() - } - .cp-logo { - margin-right: 0.5em; - } - } - // navigation top bar .navbar { width: 100%; - color: @colortheme_logo-2; + color: @cp_static-topbar-fg; .navbar-brand { display: block; height: 50px; @@ -235,7 +197,7 @@ body { border: 2px solid transparent; white-space: nowrap; &:visited { - color: @colortheme_logo-2; + color: @cp_static-link; } } .nav-link { @@ -245,7 +207,7 @@ body { } } .cp-register-btn { - border: 2px solid @colortheme_logo-2; + border: 2px solid @cp_static-topbar-fg; display: inline-block; } button:focus { @@ -253,7 +215,7 @@ body { } .navbar-toggler { margin-top: 10px; - color: @colortheme_logo-2; + color: @cp_static-topbar-fg; } } @media (max-width: 1000px) { diff --git a/customize.dist/src/less2/include/leftside-menu.less b/customize.dist/src/less2/include/leftside-menu.less index e69a3e816..807055184 100644 --- a/customize.dist/src/less2/include/leftside-menu.less +++ b/customize.dist/src/less2/include/leftside-menu.less @@ -18,6 +18,6 @@ background: rgba(0,0,0,0.05); } &.cp-leftside-active { - background: @colortheme_sidebar-active; + background: @cp_sidebar-left-active; } } diff --git a/customize.dist/src/less2/include/limit-bar.less b/customize.dist/src/less2/include/limit-bar.less index cb6bfdd42..d5618ea62 100644 --- a/customize.dist/src/less2/include/limit-bar.less +++ b/customize.dist/src/less2/include/limit-bar.less @@ -32,6 +32,7 @@ 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: @colortheme_green; } @@ -45,7 +46,7 @@ } .cp-limit-usage-text { - color: @cryptpad_text_col; + color: @cp_limit-fg; margin-left: 5px; z-index: 2; // .usageText font-size: @colortheme_app-font-size-small; diff --git a/customize.dist/src/less2/include/mentions.less b/customize.dist/src/less2/include/mentions.less index 9ef96acba..f15dad068 100644 --- a/customize.dist/src/less2/include/mentions.less +++ b/customize.dist/src/less2/include/mentions.less @@ -12,7 +12,7 @@ display: inline-flex; align-items: center; vertical-align: bottom; - background-color: #eee; + background-color: @cp_mentions-bg; span.cp-mentions-name { max-width: 150px; @@ -25,7 +25,7 @@ outline: none; cursor: pointer; &:hover { - background-color: #ddd; + background-color: @cp_mentions-hover; } } } diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less index bf2175bfb..feed09a70 100644 --- a/customize.dist/src/less2/include/modal.less +++ b/customize.dist/src/less2/include/modal.less @@ -9,10 +9,10 @@ box-shadow: @variables_shadow; a { - color: @colortheme_link-color; + color: @cryptpad_color_link; &:visited { - color: @colortheme_link-color-visited; + color: @cryptpad_color_link; } } } diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less index ff40729a6..0d9320eb4 100644 --- a/customize.dist/src/less2/include/modals-ui-elements.less +++ b/customize.dist/src/less2/include/modals-ui-elements.less @@ -38,11 +38,6 @@ // Properties modal .cp-app-prop { margin-bottom: 10px; - .cp-app-prop-hint { - color: @cryptpad_text_col; - font-size: 0.8em; - margin-bottom: 5px; - } .cp-app-prop-size-container { height: 20px; background-color: @colortheme_logo-2; @@ -52,11 +47,10 @@ height: 20px; margin: 0; padding: 0; - background-color: #CCCCCC; + background-color: @cryptpad_color_neutral2_grey; } } .cp-app-prop-size-legend { - color: @colortheme_modal-fg; display: flex; margin: 10px 0; & > div { @@ -73,7 +67,7 @@ margin-right: 10px; } .cp-app-prop-history-size-color { - background-color: #CCCCCC; + background-color: @cryptpad_color_neutral2_grey; } .cp-app-prop-contents-size-color { background-color: @colortheme_logo-2; @@ -108,7 +102,7 @@ position: relative; .cp-overlay { position: absolute; - background-color: rgba(255,255,255,0.5); + background-color: @cp_access-overlay; top: 0; bottom: 0; left: 0; @@ -200,7 +194,7 @@ .cp-snapshot-buttons { display: flex; } - background-color: #DDD; + background-color: @cp_snapshots-hover; } } } diff --git a/customize.dist/src/less2/include/notifications.less b/customize.dist/src/less2/include/notifications.less index a24ad32d3..54f866654 100644 --- a/customize.dist/src/less2/include/notifications.less +++ b/customize.dist/src/less2/include/notifications.less @@ -22,7 +22,7 @@ padding: 0 5px; cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_dropdown-bg-hover; } } .cp-notification-content { @@ -35,7 +35,7 @@ &.cp-clickable { cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_dropdown-bg-hover; } } } @@ -47,7 +47,7 @@ justify-content: center; cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_dropdown-bg-hover; } } } @@ -59,7 +59,7 @@ font-weight: bold; cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_dropdown-bg-hover; } } } diff --git a/customize.dist/src/less2/include/password-input.less b/customize.dist/src/less2/include/password-input.less index 0f476390a..ef99dddb8 100644 --- a/customize.dist/src/less2/include/password-input.less +++ b/customize.dist/src/less2/include/password-input.less @@ -18,7 +18,7 @@ justify-content: center; cursor: pointer; &:hover { - color: darken(@colortheme_alertify-primary, 10%); + color: darken(@colortheme_logo-2, 10%); } } } diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 4273b0b9a..70509577b 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -13,20 +13,15 @@ } } & { - @leftside-bg: @colortheme_sidebar-left-bg; - @leftside-color: @colortheme_sidebar-left-fg; - @rightside-color: @colortheme_sidebar-right-fg; - @description-color: @colortheme_sidebar-description; - #cp-sidebarlayout-container { font-size: 16px; display: flex; flex: 1; min-height: 0; #cp-sidebarlayout-leftside { - color: @leftside-color; + color: @cp_sidebar-left-fg; width: 250px; - background: @leftside-bg; + background: @cp_sidebar-left-bg; display: flex; flex-flow: column; .cp-sidebarlayout-categories { @@ -71,7 +66,8 @@ #cp-sidebarlayout-rightside { flex: 1; padding: 5px 20px; - color: @rightside-color; + background: @cp_sidebar-right-bg; + color: @cp_sidebar-right-fg; overflow: auto; padding-bottom: 200px; @@ -84,7 +80,7 @@ } .cp-sidebarlayout-description { display: block; - color: @description-color; + color: @cp_sidebar-hint; margin-bottom: 5px; p { margin-bottom: 0; @@ -111,7 +107,7 @@ input { flex: 1; //border-radius: 0.25em 0 0 0.25em; - border: 1px solid #adadad; + border: 1px solid @cryptpad_color_neutral_grey; border-right: 0px; } button { diff --git a/customize.dist/src/less2/include/support.less b/customize.dist/src/less2/include/support.less index 105599ada..2c06a7c4d 100644 --- a/customize.dist/src/less2/include/support.less +++ b/customize.dist/src/less2/include/support.less @@ -1,8 +1,8 @@ @import (reference) "./colortheme-all.less"; .support_main () { - @ticket-bg: #F7F7F7; - @msg-bg: #eee; - @fromme-bg: #ddd; + @ticket-bg: @cp_support-bg; + @msg-bg: @cp_support-msg-bg; + @fromme-bg: @cp_support-header-bg; .cp-support-form-container { div { margin-bottom: 10px; @@ -25,7 +25,7 @@ margin-right: 10px; } &> span { - border: 1px solid #ddd; + border: 1px solid @fromme-bg; margin-right: 5px; padding: 10px; } diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less index 2759fe71b..2c97de873 100644 --- a/customize.dist/src/less2/include/toolbar-history.less +++ b/customize.dist/src/less2/include/toolbar-history.less @@ -6,10 +6,10 @@ & { .cp-toolbar-history { - @history_lineBg: #FFFFFF; - @history_userBg1: #DDD; - @history_userBg2: #BBB; - @pos-color: @cryptpad_text_col; + @history_lineBg: @cp_history-line-bg; + @history_userBg1: @cp_history-bg1; + @history_userBg2: @cp_history-bg2; + @pos-color: @cp_history-fg; @fill-width: 40px; display: none; @@ -17,7 +17,7 @@ padding: 10px 0 0; align-items: center; justify-content: center; - color: @cryptpad_text_col; + color: @cp_history-fg; * { font: @colortheme_app-font; } diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index b267b9dad..1951aa940 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -37,11 +37,10 @@ .modal_main(); }; & { - @toolbar-color: @cryptpad_text_col; - @toolbar-color-light: lighten(@cryptpad_text_col, 10%); + @toolbar-color: @cp_toolbar-fg; .toolbar_vars(); - @toolbar-top-bg: #eee; + @toolbar-top-bg: @cp_toolbar-bg; @toolbar_line-height: 32px; @toolbar_top-height: 76px; @toolbar_button-font: @colortheme_app-font; @@ -60,7 +59,8 @@ .cp-markdown-toolbar { height: @toolbar_line-height; - background-color: @colortheme_pad-toolbar-bg; + background-color: @cp_toolbar-bg; + color: @cp_toolbar-fg; display: none; button { height: @toolbar_line-height !important; @@ -69,7 +69,7 @@ .toolbar_button; font: normal normal normal 14px/1 FontAwesome; &:hover { - background-color: darken(@colortheme_pad-toolbar-bg, 5%); + background-color: contrast(@cp_toolbar-bg, darken(@cp_toolbar-bg, 5%), lighten(@cp_toolbar-bg, 5%)); } &.cp-markdown-help { float: right; } } @@ -102,7 +102,7 @@ } background: transparent; &:hover { - background-color: rgba(50,50,50,0.3); + background-color: @cp_toolbar-fade3; } } @@ -174,7 +174,7 @@ .cp-toolbar-userlist-viewer { font-style: italic; padding: 5px; - background: rgba(0,0,0,0.1); + background: @cp_toolbar-fade1; margin: 2px 0; } @@ -194,7 +194,7 @@ height: 48px; padding: 5px; margin: 2px 0; - background: rgba(0,0,0,0.1); + background: @cp_toolbar-fade1; border-right: 3px solid transparent; .avatar_main(30px); .cp-avatar-default, media-tag { @@ -203,7 +203,7 @@ &.cp-userlist-clickable { cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.3); + background: @cp_toolbar-fade3; } } .cp-toolbar-userlist-rightcol { @@ -263,14 +263,11 @@ .icons_main(); li { - border: 1px solid @colortheme_modal-fg; + color: @cp_drive-fg; + border: 1px solid @cp_drive-icon-border; &:hover { - //border: 1px solid @colortheme_modal-fg; - background: @colortheme_logo_2_light; - color: @cryptpad_text_col; - .cptools { - color: @cryptpad_text_col; - } + background: @cp_drive-icon-hover; + color: @cp_drive-fg; } } .cp-modal { @@ -339,7 +336,7 @@ } .cp-toolbar-userlist-drawer { - background-color: @colortheme_userlist-bg; + background-color: @cp_toolbar-bg; color: @toolbar-color; .cp-toolbar-userlist-drawer-close { color: @toolbar-color; @@ -348,12 +345,12 @@ color: @toolbar-color; } .cp-toolbar-userlist-name-input { - background-color: rgba(0,0,0,0.1); + background: @cp_toolbar-fade1; } .cp-toolbar-userlist-button { background: transparent; &:hover { - color: @toolbar-color-light; + color: contrast(@cp_toolbar-bg, lighten(@cp_toolbar-fg, 10%), darken(@cp_toolbar-fg, 10%)); } } } @@ -366,8 +363,6 @@ } } - @toolbar-green: #5cb85c; - box-sizing: border-box; padding: 0px; display: flex; @@ -431,6 +426,7 @@ margin: 0; }*/ + // XXX I don't think we still use any select in the toolbar select { margin-left: 5px; margin-right: 5px; @@ -568,7 +564,7 @@ } .cp-toolbar-limit { - color: @colortheme_toolbar-warn; + color: @cp_toolbar-warn; } } @@ -591,7 +587,7 @@ padding: 0; margin: 0 5px; font-size: @colortheme_app-font-size; - color: @colortheme_toolbar-warn; + color: @cp_toolbar-warn; .cp-pnp-msg { padding-left: 5px; font-family: @colortheme_font; @@ -600,7 +596,7 @@ font-size: @colortheme_app-font-size; font-family: @colortheme_font; font-weight: bold; - color: @colortheme_toolbar-warn; + color: @cp_toolbar-warn; &:hover { text-decoration: underline; } @@ -621,7 +617,7 @@ //flex: 1; } .cp-toolbar-title { - color: @cryptpad_text_col; + color: @cp_toolbar-fg; flex: 1; overflow: hidden; text-overflow: ellipsis; @@ -756,7 +752,7 @@ } &:hover { border-color: transparent; - background-color: rgba(50,50,50,0.1); + background-color: @cp_toolbar-fade1; } span { vertical-align: top; @@ -859,7 +855,7 @@ padding: 0; &:hover { border-color: transparent; - background-color: rgba(50,50,50,0.1); + background-color: @cp_toolbar-fade1; } span { text-align: center; @@ -888,7 +884,7 @@ border-radius: 0; background: transparent; &:hover { - background-color: rgba(0,0,0,0.2); + background-color: @cp_toolbar-fade1; } } } @@ -897,7 +893,7 @@ .cp-toolbar-history, .cp-toolbar-snapshots { background-color: @toolbar-bg-color-light; background-color: var(--toolbar-bg-color-light); - color: @cryptpad_text_col; + color: @toolbar-color; } .cp-toolbar-snapshots { display: none; @@ -925,7 +921,7 @@ .cp-toolbar-snapshots-actions { button { margin: 0 5px; - border: 1px solid @cryptpad_text_col; + border: 1px solid @toolbar-color; text-transform: uppercase; i:not(:last-child) { margin-right: 5px; @@ -936,7 +932,7 @@ .cp-toolbar-bottom { background-color: @toolbar-bg-color-light; background-color: var(--toolbar-bg-color-light); - color: @cryptpad_text_col; + color: @cp_toolbar-bottom-fg; button:hover, button.cp-toolbar-button-active { background-color: @toolbar-bg-color-active; background-color: var(--toolbar-bg-color-active); @@ -1062,7 +1058,7 @@ display: none; } .cp-toolbar-drawer-content { - box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 5px 0px @cp_shadow-color; overflow-y: auto; overflow-x: hidden; &.cp-dropdown-visible { @@ -1117,7 +1113,7 @@ } .cp-toolbar-spinner { - color: @cryptpad_text_col; + color: @cp_toolbar-fg; font-family: "Open Sans"; font-size: 14px; padding: 0 8px; diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index ea755b1dd..d4b03e89c 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -59,8 +59,8 @@ .tools_unselectable(); &.cp-selected { - background-color: @colortheme_alertify-primary; - color: @colortheme_alertify-primary-text; + background-color: @cp_usergrid-selected-bg; + color: @cp_usergrid-selected-fg; order: -1 !important; .cp-usergrid-avatar { media-tag, .cp-avatar-default { @@ -98,12 +98,12 @@ margin-left: 5px; text-align: left; line-height: 150%; - color: @cryptpad_text_col; + color: @cp_usergrid-fg; } } &.cp-selected { .cp-usergrid-user-name { - color: @colortheme_alertify-primary-text; + color: @cp_usergrid-selected-fg; } } .fa-times { @@ -111,9 +111,9 @@ cursor: pointer; height: 100%; line-height: 25px; - color: @cryptpad_text_col; + color: @cp_usergrid-fg; &:hover { - color: lighten(@cryptpad_text_col, 10%); + color: lighten(@cp_usergrid-fg, 10%); } } } diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index e9b60c381..796004429 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -95,6 +95,7 @@ define([ var COLORTHEME = '/customize/src/less2/include/colortheme.less'; var COLORTHEME_DARK = '/customize/src/less2/include/colortheme-dark.less'; + //COLORTHEME_DARK = '/customize/src/less2/include/colortheme.less'; // XXX var getColortheme = function () { return window.CryptPad_theme; }; diff --git a/www/common/common-interface.js b/www/common/common-interface.js index e5e35ffe1..3f7db9149 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -1265,9 +1265,6 @@ define([ var $popup = $(popup); - if (opts.hidden) { - $popup.addClass('cp-minimized'); - } if (opts.big) { $popup.addClass('cp-corner-big'); } diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 7f080d9df..f1d8ae78c 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -2130,6 +2130,7 @@ define([ // Team pad var team; + // FIXME: broken wen cache is enabled var teamExists = privateData.teams && Object.keys(privateData.teams).length; var teamValue; // storeInTeam can be diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 972675487..814853013 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -4023,16 +4023,6 @@ define([ $tree.html(''); - /* - $(h('button.fa.fa-times.cp-close-button', { - title: Messages.filePicker_close - })).click(function (e) { - e.stopPropagation(); - $tree.hide(); - checkCollapseButton(); - }).appendTo($tree); - */ - var $div = $('
', {'class': 'cp-app-drive-tree-categories-container'}) .appendTo($tree); if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); }