diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 61c563869..083228b16 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -76,89 +76,30 @@ @colortheme_userlist-bg: #eee; @colortheme_pad-chat-bg: #AAA; -@colortheme_pad-bg: #256ad5; -@colortheme_pad-color: #fff; -@colortheme_pad-warn: #ffae00; +@colortheme_apps: { + default: #0087FF; + pad: #256ad5; + code: #EAA000; + slide: #e57614; + poll: #2c9e98; + whiteboard: #a72ba7; + kanban: #8C4; + oocell: #40865c; + oodoc: #5170B5; + ooslide: #C65D27; +} + +@colortheme_static_apps: { + default: #0087FF; + teams: #4A3BBD; + file: #CD2532; + contacts: #607B8D; +} -@colortheme_slide-bg: #e57614; -@colortheme_slide-color: #fff; -@colortheme_slide-warn: #005868; - -@colortheme_code-bg: #EAA000; -@colortheme_code-color: #000; -@colortheme_code-warn: #9A37F7; - -@colortheme_poll-bg: #2c9e98; @colortheme_poll-color: #fff; @colortheme_poll-help-bg: #bbffbb; @colortheme_poll-th-bg: #005bef; @colortheme_poll-th-fg: #fff; -@colortheme_poll-warn: #ffade3; - -@colortheme_whiteboard-bg: #a72ba7; -@colortheme_whiteboard-color: #fff; -@colortheme_whiteboard-warn: #ffae00; - -@colortheme_drive-bg: #0087FF; -@colortheme_drive-color: #fff; -@colortheme_drive-warn: #cd2532; - -@colortheme_teams-bg: #4a3bbd; -@colortheme_teams-color: #fff; -@colortheme_teams-warn: #cd2532; - -@colortheme_file-bg: #cd2532; -@colortheme_file-color: #fff; -@colortheme_file-warn: #ffae00; - -@colortheme_friends-bg: #607b8d; -@colortheme_friends-color: #fff; -@colortheme_friends-warn: #cd2532; - -@colortheme_default-bg: #326599; -@colortheme_default-color: #FFF; -@colortheme_default-warn: #cd2532; - -@colortheme_settings-bg: #0087ff; -@colortheme_settings-color: #fff; -@colortheme_settings-warn: #cd2532; - -@colortheme_profile-bg: #0087ff; -@colortheme_profile-color: #fff; -@colortheme_profile-warn: #cd2532; - -@colortheme_todo-bg: #999; -@colortheme_todo-color: #3F4141; -@colortheme_todo-warn: #cd2532; - -@colortheme_oodoc-bg: #5170B5; -@colortheme_oodoc-color: #FFF; -@colortheme_oodoc-warn: #cd2532; - -@colortheme_ooslide-bg: #c65d27; -@colortheme_ooslide-color: #FFF; -@colortheme_ooslide-warn: #cd2532; - -@colortheme_oocell-bg: #40865c; -@colortheme_oocell-color: #FFF; -@colortheme_oocell-warn: #ffbcc0; - -@colortheme_kanban-bg: #8C4; -@colortheme_kanban-color: #000; -@colortheme_kanban-warn: #e6385d; - -@colortheme_admin-bg: #0087ff; -@colortheme_admin-color: #FFF; -@colortheme_admin-warn: #ffae00; - -@colortheme_notifications-bg: #0087ff; -@colortheme_notifications-color: #000; -@colortheme_notifications-warn: #e34a85; - -@colortheme_support-bg: #0087ff; -@colortheme_support-color: #000; -@colortheme_support-warn: #9A37F7; - // Sidebar layout (profile / settings) @colortheme_sidebar-active: #fff; diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index 711ae1d77..daef0b876 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -5,8 +5,7 @@ @import (reference) "./avatar.less"; .creation_vars( - @color: @colortheme_default-color, - @bg-color: @colortheme_default-bg + @bg-color: @colortheme_apps[default] ) { @creation-color: @cryptpad_text_col; @creation-bg-color: @bg-color; @@ -14,11 +13,10 @@ }; .creation_main( - @color: @colortheme_default-color, - @bg-color: @colortheme_default-bg + @bg-color: @colortheme_apps[default] ) { --LessLoader_require: LessLoader_currentFile(); - .creation_vars(@color, @bg-color); + .creation_vars(@bg-color); --creation-color: @cryptpad_text_col; --creation-bg-color: @bg-color; --creation-bg-color-light: @creation-bg-color-light; diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index 13105ea53..da2b10485 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -12,8 +12,7 @@ .limit-bar_main(); .tokenfield_main(); - @colortheme_drive-bg-light: lighten(@colortheme_drive-bg, 30%); - @colortheme_drive-bg-active: lighten(@colortheme_drive-bg, 20%); + @colortheme_drive-bg-active: lighten(@colortheme_static_apps[default], 20%); @colortheme_drive-color: @cryptpad_text_col; @drive_hover: #eee; @@ -819,7 +818,6 @@ font-size: @colortheme_app-font-size; padding: 0 5px; border: 0; - //background: @colortheme_drive-bg-active; color: @colortheme_drive-color; box-sizing: border-box; overflow: hidden; diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less index 8fb1c8857..0d39b342a 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: 100000; //Z file upload table container display: none; - color: darken(@colortheme_drive-bg, 10%); + color: darken(@colortheme_static_apps[default], 10%); max-height: 180px; overflow-y: auto; diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less index 7876195c1..da379a164 100644 --- a/customize.dist/src/less2/include/framework.less +++ b/customize.dist/src/less2/include/framework.less @@ -20,9 +20,7 @@ @import (reference) "./modals-ui-elements.less"; .framework_main( - @bg-color: @colortheme_default-bg, // color of the toolbar background - @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar - @color: @colortheme_default-color, // Color of the text for the toolbar + @bg-color: @colortheme_apps[default] ) { --LessLoader_require: LessLoader_currentFile(); // Set the HTML style for the apps which shouldn't have a body scrollbar @@ -35,8 +33,6 @@ .toolbar_main( @bg-color: @bg-color, - @warn-color: @warn-color, - @color: @color ); .alertify_main(); .modals-ui-elements_main(); @@ -48,7 +44,6 @@ .checkmark_main(20px); .password_main(); .messenger_main( - @color: @cryptpad_text_col, @bg-color: @colortheme_pad-chat-bg ); .cursor_main(); @@ -57,15 +52,12 @@ .mentions_main(); .creation_main( @bg-color: @bg-color, - @color: @color ); font: @colortheme_app-font; }; .framework_min_main( - @color: @colortheme_default-color, // Color of the text for the toolbar - @bg-color: @colortheme_default-bg, // color of the toolbar background - @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar + @bg-color: @colortheme_static_apps[default] ) { --LessLoader_require: LessLoader_currentFile(); // Set the HTML style for the apps which shouldn't have a body scrollbar @@ -78,8 +70,6 @@ .toolbar_main( @bg-color: @bg-color, - @warn-color: @warn-color, - @color: @color ); .fileupload_main(); .alertify_main(); diff --git a/customize.dist/src/less2/include/icon-colors.less b/customize.dist/src/less2/include/icon-colors.less index 776a7c443..0d7ecb121 100644 --- a/customize.dist/src/less2/include/icon-colors.less +++ b/customize.dist/src/less2/include/icon-colors.less @@ -3,43 +3,15 @@ --LessLoader_require: LessLoader_currentFile(); } & { - // Classes used in common-interface.js - .cp-icon-color-pad { color: @colortheme_pad-bg; } - .cp-icon-color-code { color: @colortheme_code-bg; } - .cp-icon-color-slide { color: @colortheme_slide-bg; } - .cp-icon-color-poll { color: @colortheme_poll-bg; } - .cp-icon-color-file { color: @colortheme_file-bg; } - .cp-icon-color-contacts { color: @colortheme_friends-bg; } - .cp-icon-color-whiteboard { color: @colortheme_whiteboard-bg; } - .cp-icon-color-drive { color: @colortheme_drive-bg; } - .cp-icon-color-settings { color: @colortheme_settings-bg; } - .cp-icon-color-profile { color: @colortheme_settings-bg; } - .cp-icon-color-default { color: @colortheme_default-bg; } - .cp-icon-color-todo { color: @colortheme_todo-bg; } - .cp-icon-color-oodoc { color: @colortheme_oodoc-bg; } - .cp-icon-color-ooslide { color: @colortheme_ooslide-bg; } - .cp-icon-color-sheet { color: @colortheme_oocell-bg; } - .cp-icon-color-kanban { color: @colortheme_kanban-bg; } - .cp-icon-color-admin { color: @colortheme_admin-bg; } - .cp-icon-color-teams { color: @colortheme_teams-bg; } - .cp-border-color-pad { border-color: @colortheme_pad-bg !important; } - .cp-border-color-code { border-color: @colortheme_code-bg !important; } - .cp-border-color-slide { border-color: @colortheme_slide-bg !important; } - .cp-border-color-poll { border-color: @colortheme_poll-bg !important; } - .cp-border-color-file { border-color: @colortheme_file-bg !important; } - .cp-border-color-contacts { border-color: @colortheme_friends-bg !important; } - .cp-border-color-whiteboard { border-color: @colortheme_whiteboard-bg !important; } - .cp-border-color-drive { border-color: @colortheme_drive-bg !important; } - .cp-border-color-settings { border-color: @colortheme_settings-bg !important; } - .cp-border-color-profile { border-color: @colortheme_settings-bg !important; } - .cp-border-color-default { border-color: @colortheme_default-bg !important; } - .cp-border-color-todo { border-color: @colortheme_todo-bg !important; } - .cp-border-color-oodoc { border-color: @colortheme_oodoc-bg !important; } - .cp-border-color-ooslide { border-color: @colortheme_ooslide-bg !important; } - .cp-border-color-sheet { border-color: @colortheme_oocell-bg !important; } - .cp-border-color-kanban { border-color: @colortheme_kanban-bg !important; } - .cp-border-color-admin { border-color: @colortheme_admin-bg !important; } - .cp-border-color-teams { border-color: @colortheme_teams-bg !important; } + each(@colortheme_apps, { + .cp-icon-color-@{key} { color: @value; } + }); + + each(@colortheme_apps, { + @val: @{value} !important; + .cp-border-color-@{key} { border-color: @val; } + }); + } diff --git a/customize.dist/src/less2/include/messenger.less b/customize.dist/src/less2/include/messenger.less index 66ad741bb..f5ace3444 100644 --- a/customize.dist/src/less2/include/messenger.less +++ b/customize.dist/src/less2/include/messenger.less @@ -2,10 +2,9 @@ @import (reference) "./colortheme-all.less"; .messenger_vars ( - @color: @colortheme_friends-color, // color of the toolbar text - @bg-color: @colortheme_friends-bg, // color of the toolbar background + @bg-color: @colortheme_static_apps[contacts], // color of the toolbar background ) { - @msg-color: @color; + @msg-color: @cryptpad_text_col; @msg-bg-color: @bg-color; @msg-bg-color-light: lighten(@bg-color, 15%); @msg-bg-color-lighter: lighten(@bg-color, 20%); @@ -13,11 +12,10 @@ @msg-bg-color-darker: darken(@bg-color, 20%); }; .messenger_main( - @color: @colortheme_friends-color, // color of the toolbar text - @bg-color: @colortheme_friends-bg, // color of the toolbar background + @bg-color: @colortheme_static_apps[contacts], // color of the toolbar background ) { --LessLoader_require: LessLoader_currentFile(); - .messenger_vars(@color, @bg-color); + .messenger_vars(@bg-color); --msg-color: @msg-color; --msg-bg-color: @msg-bg-color; --msg-bg-color-light: @msg-bg-color-light; diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 8e2fa70f9..860d06300 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -12,9 +12,7 @@ @import (reference) "./notifications.less"; .toolbar_vars ( - @color: @colortheme_default-color, // Color of the text for the toolbar - @bg-color: @colortheme_default-bg, // color of the toolbar background - @warn-color: @colortheme_default-warn // color of the warning text in the toolbar + @bg-color: @colortheme_apps[default], // color of the toolbar background ) { @toolbar-bg-color: @bg-color; @toolbar-bg-color-light: lighten(@bg-color, 30%); @@ -22,13 +20,10 @@ }; .toolbar_main ( - @color: @colortheme_default-color, // Color of the text for the toolbar - @bg-color: @colortheme_default-bg, // color of the toolbar background - @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar - @barWidth: 600px // width of the toolbar + @bg-color: @colortheme_apps[default], // color of the toolbar background ) { --LessLoader_require: LessLoader_currentFile(); - .toolbar_vars(@color, @bg-color, @warn-color); + .toolbar_vars(@bg-color); --toolbar-bg-color: @toolbar-bg-color; --toolbar-bg-color-light: @toolbar-bg-color-light; diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index b9fa7f654..38c4333e3 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -148,28 +148,15 @@ transform: none !important; } - .app-block(@app; @app-color) { - .cp-callout-@{app} { - i { - color: @app-color; - } + each(@colortheme_apps, { + .cp-callout-@{key} { + i { color: @value; } &:hover { - background-color: lighten(@app-color, 30%); - i { - color: @cryptpad_text_col; - } + background-color: lighten(@value, 30%); + i { color: @cryptpad_text_col; } } } - } - .app-block(code, @colortheme_code-bg); - .app-block(pad, @colortheme_pad-bg); - .app-block(slide, @colortheme_slide-bg); - .app-block(poll, @colortheme_poll-bg); - .app-block(kanban, @colortheme_kanban-bg); - .app-block(whiteboard, @colortheme_whiteboard-bg); - .app-block(sheet, @colortheme_oocell-bg); - .app-block(drive, @colortheme_drive-bg); - + }); .cp-hidden { display: none !important; } .cp-callout-more { diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less index 5112fd9e2..1f90fbfff 100644 --- a/www/admin/app-admin.less +++ b/www/admin/app-admin.less @@ -4,11 +4,7 @@ &.cp-app-admin { - .framework_min_main( - @bg-color: @colortheme_admin-bg, - @warn-color: @colortheme_admin-warn, - @color: @colortheme_admin-color - ); + .framework_min_main(); .sidebar-layout_main(); .support_main(); diff --git a/www/code/app-code.less b/www/code/app-code.less index 6557d39f6..7ba5142a7 100644 --- a/www/code/app-code.less +++ b/www/code/app-code.less @@ -4,9 +4,7 @@ &.cp-app-code { .framework_main( - @bg-color: @colortheme_code-bg, - @warn-color: @colortheme_code-warn, - @color: @colortheme_code-color + @bg-color: @colortheme_apps[code], ); display: flex; diff --git a/www/common/onlyoffice/app-oo.less b/www/common/onlyoffice/app-oo.less index 08b64df91..8521a30df 100644 --- a/www/common/onlyoffice/app-oo.less +++ b/www/common/onlyoffice/app-oo.less @@ -7,23 +7,17 @@ body.cp-app-sheet, body.cp-app-oodoc, body.cp-app-ooslide { &.cp-app-sheet { .framework_main( - @bg-color: @colortheme_oocell-bg, - @warn-color: @colortheme_oocell-warn, - @color: @colortheme_oocell-color + @bg-color: @colortheme_apps[oocell], ); } &.cp-app-oodoc { .framework_main( - @bg-color: @colortheme_oodoc-bg, - @warn-color: @colortheme_oodoc-warn, - @color: @colortheme_oodoc-color + @bg-color: @colortheme_apps[oodoc], ); } &.cp-app-ooslide { .framework_main( - @bg-color: @colortheme_ooslide-bg, - @warn-color: @colortheme_ooslide-warn, - @color: @colortheme_ooslide-color + @bg-color: @colortheme_apps[ooslide], ); } diff --git a/www/contacts/app-contacts.less b/www/contacts/app-contacts.less index 99b927b6c..ba45c962c 100644 --- a/www/contacts/app-contacts.less +++ b/www/contacts/app-contacts.less @@ -5,9 +5,7 @@ // body &.cp-app-contacts { .framework_min_main( - @bg-color: @colortheme_friends-bg, - @warn-color: @colortheme_friends-warn, - @color: @colortheme_friends-color + @bg-color: @colortheme_static_apps[contacts] ); display: flex; diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less index 2cf445524..21ecb6b89 100644 --- a/www/drive/app-drive.less +++ b/www/drive/app-drive.less @@ -2,11 +2,7 @@ @import (reference) '../../customize/src/less2/include/drive.less'; &.cp-app-drive { - .framework_min_main( - @bg-color: @colortheme_drive-bg, - @warn-color: @colortheme_drive-warn, - @color: @colortheme_drive-color - ); + .framework_min_main(); .drive_main(); } diff --git a/www/file/app-file.less b/www/file/app-file.less index 4ac94ca33..87bdd5b6d 100644 --- a/www/file/app-file.less +++ b/www/file/app-file.less @@ -4,9 +4,7 @@ &.cp-app-file { .framework_min_main( - @bg-color: @colortheme_file-bg, - @warn-color: @colortheme_file-warn, - @color: @colortheme_file-color + @bg-color: @colortheme_static_app[file], ); .tokenfield_main(); @@ -159,4 +157,4 @@ } } -} \ No newline at end of file +} diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index a4c7ad743..524d414b4 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -7,9 +7,7 @@ // body &.cp-app-kanban { .framework_main( - @bg-color: @colortheme_kanban-bg, - @warn-color: @colortheme_kanban-warn, - @color: @colortheme_kanban-color + @bg-color: @colortheme_apps[kanban], ); display: flex; diff --git a/www/notifications/app-notifications.less b/www/notifications/app-notifications.less index 5199ae5b6..bcb0c9dd7 100644 --- a/www/notifications/app-notifications.less +++ b/www/notifications/app-notifications.less @@ -4,11 +4,7 @@ &.cp-app-notifications { - .framework_min_main( - @bg-color: @colortheme_notifications-bg, - @warn-color: @colortheme_notifications-warn, - @color: @colortheme_notifications-color - ); + .framework_min_main(); .sidebar-layout_main(); display: flex; diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less index 489cbb17d..731bea767 100644 --- a/www/pad/app-pad.less +++ b/www/pad/app-pad.less @@ -4,9 +4,7 @@ body.cp-app-pad { .framework_main( - @bg-color: @colortheme_pad-bg, - @warn-color: @colortheme_pad-warn, - @color: @colortheme_pad-color + @bg-color: @colortheme_apps[pad], ); @bg-color: #e3e3e3; diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less index 2aa1a8e75..124e6a671 100644 --- a/www/poll/app-poll.less +++ b/www/poll/app-poll.less @@ -6,9 +6,7 @@ &.cp-app-poll { .framework_main( - @bg-color: @colortheme_poll-bg, - @warn-color: @colortheme_poll-warn, - @color: @colortheme_poll-color + @bg-color: @colortheme_apps[poll], ); @poll-fore: #555; diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less index 82091fa45..2ca8b2900 100644 --- a/www/profile/app-profile.less +++ b/www/profile/app-profile.less @@ -3,11 +3,7 @@ &.cp-app-profile { - .framework_min_main( - @bg-color: @colortheme_profile-bg, - @warn-color: @colortheme_profile-warn, - @color: @colortheme_profile-color - ); + .framework_min_main(); .sidebar-layout_main(); @cp-profile-is-your-friend: #777; diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less index 1f0da1263..7c460716c 100644 --- a/www/settings/app-settings.less +++ b/www/settings/app-settings.less @@ -5,11 +5,7 @@ @import (reference) '../../customize/src/less2/include/export.less'; &.cp-app-settings { - .framework_min_main( - @bg-color: @colortheme_settings-bg, - @warn-color: @colortheme_settings-warn, - @color: @colortheme_settings-color - ); + .framework_min_main(); .sidebar-layout_main(); .limit-bar_main(); .creation_main(); diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less index 58f139145..2646df1e4 100644 --- a/www/slide/app-slide.less +++ b/www/slide/app-slide.less @@ -7,9 +7,7 @@ .mediatag_base(); .framework_main( - @bg-color: @colortheme_slide-bg, - @warn-color: @colortheme_slide-warn, - @color: @colortheme_slide-color + @bg-color: @colortheme_apps[slide] ); @slide-default-bg: #e3e3e3; diff --git a/www/support/app-support.less b/www/support/app-support.less index 41af016fd..c6c64e941 100644 --- a/www/support/app-support.less +++ b/www/support/app-support.less @@ -3,11 +3,7 @@ @import (reference) '../../customize/src/less2/include/support.less'; &.cp-app-support { - .framework_min_main( - @bg-color: @colortheme_support-bg, - @warn-color: @colortheme_support-warn, - @color: @colortheme_support-color - ); + .framework_min_main(); .sidebar-layout_main(); .support_main(); diff --git a/www/teams/app-team.less b/www/teams/app-team.less index cbbfcaec2..7792b0c5f 100644 --- a/www/teams/app-team.less +++ b/www/teams/app-team.less @@ -9,9 +9,7 @@ &.cp-app-team { .framework_min_main( - @bg-color: @colortheme_teams-bg, - @warn-color: @colortheme_teams-warn, - @color: @colortheme_teams-color + @bg-color: @colortheme_static_apps[teams], ); .drive_main(); diff --git a/www/todo/app-todo.less b/www/todo/app-todo.less index c4419f69d..bd43e5e67 100644 --- a/www/todo/app-todo.less +++ b/www/todo/app-todo.less @@ -2,11 +2,8 @@ &.cp-app-todo { - .framework_min_main( - @bg-color: @colortheme_todo-bg, - @warn-color: @colortheme_todo-warn, - @color: @colortheme_todo-color - ); + @colortheme_todo-bg: @colortheme_static_apps[default]; + .framework_min_main(); display: flex; flex-flow: column; diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less index 054bc76a7..972e4fee2 100644 --- a/www/whiteboard/app-whiteboard.less +++ b/www/whiteboard/app-whiteboard.less @@ -4,9 +4,7 @@ &.cp-app-whiteboard { .framework_main( - @bg-color: @colortheme_whiteboard-bg, - @warn-color: @colortheme_whiteboard-warn, - @color: @colortheme_whiteboard-color + @bg-color: @colortheme_apps[whiteboard], ); display: flex; diff --git a/www/worker/app-worker.less b/www/worker/app-worker.less index 9357c8be4..f9cc81b4f 100644 --- a/www/worker/app-worker.less +++ b/www/worker/app-worker.less @@ -22,7 +22,7 @@ flex-flow: column; padding: 20px; align-items: center; - background-color: lighten(@colortheme_todo-bg, 15%); + background-color: lighten(@colortheme_apps[default], 15%); min-height: 0; } }