infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Fix messenger colors

Browse Source
pull/1/head
yflory 4 years ago
parent 89455eeb97
commit 44889a291d
7 changed files with 50 additions and 90 deletions
Show Stats Download Patch File Download Diff File

7
customize.dist/src/less2/include/colortheme.less
Unescape Escape View File

@ -134,6 +134,7 @@
@cryptpad_color_dark_red: #9e0000; @cryptpad_color_dark_red: #9e0000;
@cryptpad_color_black: #000; @cryptpad_color_black: #000;
@cryptpad_color_white: #FFF; @cryptpad_color_white: #FFF;
@cryptpad_color_light_green: #c5ffa8;
@cryptpad_color_green: #5cb85c; @cryptpad_color_green: #5cb85c;
@cryptpad_color_link: #0275D8; @cryptpad_color_link: #0275D8;
@ -148,6 +149,12 @@
@cp_loading-progress-bar-bg: @colortheme_logo-2; @cp_loading-progress-bar-bg: @colortheme_logo-2;
@cp_loading-spinner: @cryptpad_color_dark_grey; @cp_loading-spinner: @cryptpad_color_dark_grey;
// Chat
@cp_messenger-bg: @cryptpad_color_neutral2_grey;
@cp_messenger-fg: @cryptpad_text_col;
@cp_messenger-notif: @cryptpad_color_black;
@cp_messenger-friend: @cryptpad_color_black;
@cp_messenger-online: @cryptpad_color_light_green;
// Alertify // Alertify
@cp_alertify-bg: @cryptpad_color_white; @cp_alertify-bg: @cryptpad_color_white;

2
customize.dist/src/less2/include/framework.less
Unescape Escape View File

@ -44,7 +44,7 @@
.checkmark_main(20px); .checkmark_main(20px);
.password_main(); .password_main();
.messenger_main( .messenger_main(
@bg-color: @colortheme_pad-chat-bg @bg-color: @cp_messenger-bg
); );
.cursor_main(); .cursor_main();
.usergrid_main(); .usergrid_main();

117
customize.dist/src/less2/include/messenger.less
Unescape Escape View File

@ -2,17 +2,20 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
.messenger_vars ( .messenger_vars (
@bg-color: @colortheme_static_apps[contacts], // color of the toolbar background @bg-color: @cp_messenger-bg,
) { ) {
@msg-color: @cryptpad_text_col; @msg-color: @cryptpad_text_col;
@msg-color-hover: contrast(@msg-color, lighten(@msg-color, 10%), darken(@msg-color, 10%));
@msg-bg-color: @bg-color; @msg-bg-color: @bg-color;
@msg-bg-color-light: lighten(@bg-color, 15%); @invert: #FFF-@bg-color;
@msg-bg-color-lighter: lighten(@bg-color, 20%); // XXX Adjust chat colors
@msg-bg-color-dark: darken(@bg-color, 10%); @msg-bg-color-light: contrast(@invert, lighten(@bg-color, 5%), darken(@bg-color, 5%));
@msg-bg-color-darker: darken(@bg-color, 20%); @msg-bg-color-lighter: contrast(@invert, lighten(@bg-color, 10%), darken(@bg-color, 10%));
@msg-bg-color-dark: contrast(@bg-color, lighten(@bg-color, 5%), darken(@bg-color, 5%));
@msg-bg-color-darker: contrast(@bg-color, lighten(@bg-color, 10%), darken(@bg-color, 10%));
}; };
.messenger_main( .messenger_main(
@bg-color: @colortheme_static_apps[contacts], // color of the toolbar background @bg-color: @cp_messenger-bg,
) { ) {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
.messenger_vars(@bg-color); .messenger_vars(@bg-color);
@ -26,13 +29,13 @@
& { & {
@keyframes notif { @keyframes notif {
0% { 0% {
background: rgba(0,0,0,0.1); background: fade(@cp_messenger-notif, 10%);
} }
50% { 50% {
background: rgba(0,0,0,0.3); background: fade(@cp_messenger-notif, 30%);
} }
100% { 100% {
background: rgba(0,0,0,0.1); background: fade(@cp_messenger-notif, 10%);
} }
} }
@ -58,7 +61,7 @@
.cp-app-contacts-initializing { .cp-app-contacts-initializing {
.cp-app-contacts-spinner { .cp-app-contacts-spinner {
color: white; color: @cp_messenger-fg;
display: block; display: block;
} }
.cp-app-contacts-info { .cp-app-contacts-info {
@ -77,11 +80,14 @@
height: 100%; height: 100%;
background-color: @msg-bg-color; background-color: @msg-bg-color;
background-color: var(--msg-bg-color); background-color: var(--msg-bg-color);
color: @msg-color;
color: var(--msg-color);
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
.cp-app-contacts-friend { .cp-app-contacts-friend {
background: rgba(0,0,0,0.1); background-color: @msg-bg-color-dark;
background-color: var(--msg-bg-color-dark);
padding: 5px; padding: 5px;
margin: 10px; margin: 10px;
margin-bottom: 0; margin-bottom: 0;
@ -94,16 +100,19 @@
flex-flow: column; flex-flow: column;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
color: @colortheme_base;
.cp-app-contacts-name { .cp-app-contacts-name {
white-space: nowrap; white-space: nowrap;
} }
.cp-app-contacts-icons { .cp-app-contacts-icons {
text-align: right; text-align: right;
& > span:hover {
color: @msg-color-hover;
}
} }
} }
&:hover { &:hover {
background-color: rgba(0,0,0,0.3); background-color: @msg-bg-color-darker;
background-color: var(--msg-bg-color-darker);
} }
&.cp-app-contacts-notify { &.cp-app-contacts-notify {
animation: notif 2s ease-in-out infinite; animation: notif 2s ease-in-out infinite;
@ -114,7 +123,7 @@
width: 20px; width: 20px;
text-align: center; text-align: center;
&:hover { &:hover {
color: @cryptpad_text_col; color: @msg-color-hover;
} }
} }
@ -128,7 +137,8 @@
font-size: 18px; font-size: 18px;
margin: 0px 5px; margin: 0px 5px;
text-align: center; text-align: center;
background: rgba(0,0,0,0.1); background-color: @msg-bg-color-dark;
background-color: var(--msg-bg-color-dark);
font-weight: bold; font-weight: bold;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
@ -172,28 +182,6 @@
#cp-app-contacts-container.cp-app-contacts-inapp { #cp-app-contacts-container.cp-app-contacts-inapp {
#cp-app-contacts-friendlist { #cp-app-contacts-friendlist {
display: none; display: none;
/*
transition: width 0.2s ease-in-out 0.2s;
width: 68px;
.cp-app-contacts-friend {
.cp-app-contacts-right-col {
overflow: hidden;
}
}
.cp-app-contacts-category-title {
transition: font-size 0.2s ease-in-out 0.2s;
margin: 0px 2px;
font-size: 16px;
}
&:hover {
transition-delay: 1.5s;
width: 200px !important;
.cp-app-contacts-category-title {
transition-delay: 1.5s;
font-size: 18px;
}
}
*/
} }
} }
@ -216,21 +204,8 @@
margin: 4px; margin: 4px;
} }
.cp-app-contacts-status { .cp-app-contacts-status {
//width: 5px;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
//right: 0;
//top: 0;
//bottom: 0;
//opacity: 0.7;
//background-color: #777;
/* width: (@room-height - 6px);
top: 3px;
bottom: 3px;
left: 3px;
border-radius: 100%;
*/
width: 10px; width: 10px;
height: 10px; height: 10px;
top: 0; top: 0;
@ -238,42 +213,19 @@
border-bottom-left-radius: 100%; border-bottom-left-radius: 100%;
&.cp-app-contacts-online { &.cp-app-contacts-online {
//background-color: green; background-color: @cp_messenger-online;
//background-color: white;
background-color: #c5ffa8;
} }
&.cp-app-contacts-offline { &.cp-app-contacts-offline {
display: none; display: none;
//background-color: red;
} }
} }
} }
.placeholder (@color: #bbb) {
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: @color;
}
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: @color;
opacity: 1;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: @color;
opacity: 1;
}
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: @color;
}
&::-ms-input-placeholder { /* Microsoft Edge */
color: @color;
}
}
#cp-app-contacts-messaging { #cp-app-contacts-messaging {
flex: 1; flex: 1;
height: 100%; height: 100%;
background-color: @msg-bg-color-lighter; background-color: @msg-bg-color-light;
background-color: var(--msg-bg-color-lighter); background-color: var(--msg-bg-color-light);
min-width: 0; min-width: 0;
.cp-app-contacts-info { .cp-app-contacts-info {
@ -409,23 +361,20 @@
border: none; border: none;
height: 54px; // 2 lines (22px height) + 2 margins (5px) height: 54px; // 2 lines (22px height) + 2 margins (5px)
flex: 1; flex: 1;
background-color: white; background-color: @cp_forms-bg;
color: @cryptpad_text_col; color: @cp_forms-fg;
//background-color: @msg-bg-color-dark;
//background-color: var(--msg-bg-color-dark);
//color: @msg-color;
resize: none; resize: none;
overflow-y: auto; overflow-y: auto;
.placeholder(#999); .tools_placeholder-color();
&[disabled="true"] { &[disabled="true"] {
.placeholder(#666); .tools_placeholder-color();
} }
} }
button { button {
height: 54px !important; height: 54px !important;
border-radius: 0; border-radius: 0;
border: none; border: none;
color: #eee; color: @cp_messenger-fg;
background-color: @msg-bg-color-darker; background-color: @msg-bg-color-darker;
background-color: var(--msg-bg-color-darker); background-color: var(--msg-bg-color-darker);
&:hover { &:hover {

2
customize.dist/src/less2/include/notifications.less
Unescape Escape View File

@ -40,7 +40,7 @@
} }
} }
.cp-notification-dismiss { .cp-notification-dismiss {
color: black; color: @cp_dropdown-fg;
width: 25px; width: 25px;
display: flex; display: flex;
align-items: center; align-items: center;

4
customize.dist/src/less2/include/toolbar.less
Unescape Escape View File

@ -762,7 +762,7 @@
} }
} }
.cp-notifications-empty { .cp-notifications-empty {
color: black; color: @cp_dropdown-fg;
padding: 5px; padding: 5px;
} }
button { button {
@ -1073,7 +1073,7 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
z-index: 10000; //Z cp-toolbar-drawer-content z-index: 10000; //Z cp-toolbar-drawer-content
color: black; color: @cp_dropdown-fg;
.tools_unselectable(); .tools_unselectable();
.fa { .fa {
font-size: 17px; font-size: 17px;

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

@ -27,6 +27,8 @@
} }
} }
.messenger_main(); .messenger_main(
@bg-color: @cp_messenger-bg;
);
} }

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

@ -13,7 +13,9 @@
); );
.drive_main(); .drive_main();
.messenger_main(); .messenger_main(
@bg-color: @colortheme_pad-chat-bg
);
.sidebar-layout_main(); .sidebar-layout_main();
@roster-bg-color: #efefef; @roster-bg-color: #efefef;

Write Preview
Loading…
Cancel
Save