dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make application colors easier to maintain

This commit is contained in:
yflory 2020-11-13 17:05:26 +01:00
parent 2f910726e9
commit 49423474a8
27 changed files with 69 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
customize.dist/src/less2/include/colortheme.less
View File

@ -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_slide-bg: #e57614;
@colortheme_slide-color: #fff;
@colortheme_slide-warn: #005868;
@colortheme_static_apps: {
default: #0087FF;
teams: #4A3BBD;
file: #CD2532;
contacts: #607B8D;
}
@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;

8
customize.dist/src/less2/include/creation.less
View File

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

4
customize.dist/src/less2/include/drive.less
View File

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

2
customize.dist/src/less2/include/fileupload.less
View File

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

14
customize.dist/src/less2/include/framework.less
View File

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

46
customize.dist/src/less2/include/icon-colors.less
View File

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

10
customize.dist/src/less2/include/messenger.less
View File

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

11
customize.dist/src/less2/include/toolbar.less
View File

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

25
customize.dist/src/less2/pages/page-index.less
View File

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

6
www/admin/app-admin.less
View File

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

4
www/code/app-code.less
View File

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

12
www/common/onlyoffice/app-oo.less
View File

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

4
www/contacts/app-contacts.less
View File

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

6
www/drive/app-drive.less
View File

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

4
www/file/app-file.less
View File

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

4
www/kanban/app-kanban.less
View File

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

6
www/notifications/app-notifications.less
View File

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

4
www/pad/app-pad.less
View File

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

4
www/poll/app-poll.less
View File

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

6
www/profile/app-profile.less
View File

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

6
www/settings/app-settings.less
View File

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

4
www/slide/app-slide.less
View File

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

6
www/support/app-support.less
View File

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

4
www/teams/app-team.less
View File

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

7
www/todo/app-todo.less
View File

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

4
www/whiteboard/app-whiteboard.less
View File

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

2
www/worker/app-worker.less
View File

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