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

Fix colors for the help, chat and userlist boxes

Browse Source
pull/1/head
yflory 5 years ago
parent 706ecc67f9
commit 303d4fdd3a
9 changed files with 73 additions and 96 deletions
Show Stats Download Patch File Download Diff File

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

@ -68,8 +68,11 @@
@colortheme_dropdown-bg-active: #e8e8e8; @colortheme_dropdown-bg-active: #e8e8e8;
// Apps, these colors are used for customizing the toolbar for the apps. // Apps, these colors are used for customizing the toolbar for the apps.
@colortheme_pad-toolbar-bg: #eeeeee;
@colortheme_toolbar-warn: @colortheme_alertify-red; @colortheme_toolbar-warn: @colortheme_alertify-red;
@colortheme_pad-toolbar-bg: #eeeeee;
@colortheme_help-bg: #ddd;
@colortheme_userlist-bg: #eee;
@colortheme_pad-chat-bg: #AAA;
@colortheme_pad-bg: #256ad5; @colortheme_pad-bg: #256ad5;
@colortheme_pad-color: #fff; @colortheme_pad-color: #fff;

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

@ -805,12 +805,8 @@
} }
&:not(.cp-app-drive-element-droppable):hover { &:not(.cp-app-drive-element-droppable):hover {
&:not(.cp-app-drive-path-separator) { &:not(.cp-app-drive-path-separator) {
//background-color: @colortheme_drive-bg-active;
text-decoration: underline; text-decoration: underline;
} }
& ~ .cp-app-drive-path-element {
//background-color: @colortheme_drive-bg-active;
}
& ~ .cp-app-drive-path-element:not(.cp-app-drive-path-separator) { & ~ .cp-app-drive-path-element:not(.cp-app-drive-path-separator) {
text-decoration: underline; text-decoration: underline;
} }

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

@ -42,7 +42,10 @@
.tippy_main(); .tippy_main();
.checkmark_main(20px); .checkmark_main(20px);
.password_main(); .password_main();
.messenger_main(); .messenger_main(
@color: @cryptpad_text_col,
@bg-color: @colortheme_pad-chat-bg
);
.cursor_main(); .cursor_main();
.usergrid_main(); .usergrid_main();
.mentions_main(); .mentions_main();

27
customize.dist/src/less2/include/help.less
Unescape Escape View File

@ -1,30 +1,13 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
.help_vars ( .help_main () {
@color: @colortheme_default-color,
@bg-color: @colortheme_default-bg
) {
@help-bg-color-l15: lighten(@bg-color, 15%);
@help-text-color: contrast(@help-bg-color-l15, #fff, #000); //@color;
@help-link-color: contrast(@help-bg-color-l15, lighten(spin(@bg-color, 180), 10%), darken(spin(@bg-color, 180), 10%));
}
.help_main (
@color: @colortheme_default-color,
@bg-color: @colortheme_default-bg
) {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
.help_vars(@color, @bg-color);
--help-bg-color-l15: @help-bg-color-l15;
--help-text-color: @help-text-color;
--help-link-color: @help-link-color;
}; };
& { & {
.help_vars();
.cp-help-container { .cp-help-container {
position: relative; position: relative;
background-color: @help-bg-color-l15; background-color: @colortheme_help-bg;
background-color: var(--help-bg-color-l15);
&.cp-help-hidden { &.cp-help-hidden {
display: none; display: none;
} }
@ -36,13 +19,11 @@
cursor: pointer; cursor: pointer;
} }
.cp-help-text { .cp-help-text {
color: @help-text-color; color: @cryptpad_text_col;
color: var(--help-text-color);
margin: 0; margin: 0;
padding: 5px 15px; padding: 5px 15px;
a { a {
color: @help-link-color; color: @colortheme_link-color;
color: var(--help-link-color);
} }
h1 { h1 {
font-size: 20px; font-size: 20px;

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

@ -1,11 +1,32 @@
@import (reference) './avatar.less'; @import (reference) './avatar.less';
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
.messenger_main() { .messenger_vars (
@color: @colortheme_friends-color, // color of the toolbar background
@bg-color: @colortheme_friends-bg, // color of the toolbar background
) {
@msg-color: @color;
@msg-bg-color: @bg-color;
@msg-bg-color-light: lighten(@bg-color, 15%);
@msg-bg-color-lighter: lighten(@bg-color, 20%);
@msg-bg-color-dark: darken(@bg-color, 10%);
@msg-bg-color-darker: darken(@bg-color, 20%);
};
.messenger_main(
@color: @colortheme_friends-color, // color of the toolbar background
@bg-color: @colortheme_friends-bg, // color of the toolbar background
) {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
.messenger_vars(@color, @bg-color);
--msg-color: @msg-color;
--msg-bg-color: @msg-bg-color;
--msg-bg-color-light: @msg-bg-color-light;
--msg-bg-color-lighter: @msg-bg-color-lighter;
--msg-bg-color-dark: @msg-bg-color-dark;
--msg-bg-color-darker: @msg-bg-color-darker;
}; };
& { & {
@keyframes example { @keyframes notif {
0% { 0% {
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
} }
@ -17,9 +38,8 @@
} }
} }
.messenger_vars();
@button-border: 2px; @button-border: 2px;
@bg-color: @colortheme_friends-bg;
@color: @colortheme_friends-color;
@room-height: 48px; @room-height: 48px;
#cp-app-contacts-container { #cp-app-contacts-container {
@ -57,7 +77,8 @@
#cp-app-contacts-friendlist { #cp-app-contacts-friendlist {
width: 200px; width: 200px;
height: 100%; height: 100%;
background-color: lighten(@bg-color, 10%); background-color: @msg-bg-color;
background-color: var(--msg-bg-color);
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -86,7 +107,7 @@
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.3);
} }
&.cp-app-contacts-notify { &.cp-app-contacts-notify {
animation: example 2s ease-in-out infinite; animation: notif 2s ease-in-out infinite;
} }
} }
.cp-app-contacts-remove { .cp-app-contacts-remove {
@ -94,7 +115,7 @@
width: 20px; width: 20px;
text-align: center; text-align: center;
&:hover { &:hover {
color: darken(@color, 20%); color: darken(@msg-color, 20%);
} }
} }
@ -183,7 +204,7 @@
display: flex; display: flex;
} }
cursor: pointer; cursor: pointer;
color: @color; color: @msg-color;
media-tag { media-tag {
img { img {
color: #000; color: #000;
@ -252,14 +273,16 @@
#cp-app-contacts-messaging { #cp-app-contacts-messaging {
flex: 1; flex: 1;
height: 100%; height: 100%;
background-color: lighten(@bg-color, 20%); background-color: @msg-bg-color-lighter;
background-color: var(--msg-bg-color-lighter);
min-width: 0; min-width: 0;
.cp-app-contacts-info { .cp-app-contacts-info {
padding: 20px; padding: 20px;
} }
.cp-app-contacts-header { .cp-app-contacts-header {
background-color: lighten(@bg-color, 15%); background-color: @msg-bg-color;
background-color: var(--msg-bg-color);
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -289,7 +312,7 @@
//display: none; //display: none;
.hover; .hover;
&.cp-app-contacts-faded { &.cp-app-contacts-faded {
color: darken(@bg-color, 5%); color: @cryptpad_text_col;
} }
} }
@ -300,7 +323,8 @@
} }
.cp-app-contacts-tips { .cp-app-contacts-tips {
margin: 1em; margin: 1em;
background-color: lighten(@bg-color, 15%); background-color: @msg-bg-color-light;
background-color: var(--msg-bg-color-light);
font-size: 14px; font-size: 14px;
padding: 10px; padding: 10px;
position: relative; position: relative;
@ -352,7 +376,7 @@
display: none; display: none;
font-size: 0.8em; font-size: 0.8em;
align-items: center; align-items: center;
color: @color; color: @msg-color;
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
right: 0; right: 0;
@ -372,7 +396,8 @@
} }
} }
.cp-app-contacts-input { .cp-app-contacts-input {
background-color: lighten(@bg-color, 15%); background-color: @msg-bg-color-lighter;
background-color: var(--msg-bg-color-lighter);
height: auto; height: auto;
min-height: 50px; min-height: 50px;
display: flex; display: flex;
@ -385,22 +410,28 @@
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: darken(@bg-color, 10%); background-color: white;
color: @color; color: @cryptpad_text_col;
//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(#bbb); .placeholder(#999);
&[disabled="true"] { &[disabled="true"] {
.placeholder(#999); .placeholder(#666);
} }
} }
button { button {
height: 54px !important; height: 54px !important;
border-radius: 0; border-radius: 0;
border: none; border: none;
background-color: darken(@bg-color, 15%) !important; color: #eee;
background-color: @msg-bg-color-darker;
background-color: var(--msg-bg-color-darker);
&:hover { &:hover {
background-color: darken(@bg-color, 20%) !important; background-color: @msg-bg-color-dark;
background-color: var(--msg-bg-color-dark);
} }
} }
} }

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

@ -16,16 +16,9 @@
@bg-color: @colortheme_default-bg, // color of the toolbar background @bg-color: @colortheme_default-bg, // color of the toolbar background
@warn-color: @colortheme_default-warn // color of the warning text in the toolbar @warn-color: @colortheme_default-warn // color of the warning text in the toolbar
) { ) {
@toolbar-color: @cryptpad_text_col;
@toolbar-bg-color: @bg-color; @toolbar-bg-color: @bg-color;
@toolbar-bg-color-light: lighten(@bg-color, 30%); @toolbar-bg-color-light: lighten(@bg-color, 30%);
@toolbar-bg-color-active: lighten(@bg-color, 20%); @toolbar-bg-color-active: lighten(@bg-color, 20%);
@toolbar-bg-color-d10: darken(@bg-color, 10%);
@toolbar-warn-color: @warn-color;
@toolbar-userlist-name-edit: @toolbar-color;
}; };
.toolbar_main ( .toolbar_main (
@ -37,18 +30,11 @@
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
.toolbar_vars(@color, @bg-color, @warn-color); .toolbar_vars(@color, @bg-color, @warn-color);
--toolbar-color: @toolbar-color;
--toolbar-bg-color: @toolbar-bg-color; --toolbar-bg-color: @toolbar-bg-color;
--toolbar-bg-color-light: @toolbar-bg-color-light; --toolbar-bg-color-light: @toolbar-bg-color-light;
--toolbar-bg-color-active: @toolbar-bg-color-active; --toolbar-bg-color-active: @toolbar-bg-color-active;
--toolbar-bg-color-d10: @toolbar-bg-color-d10;
--toolbar-warn-color: @toolbar-warn-color;
--toolbar-userlist-name-edit: @toolbar-userlist-name-edit; .help_main();
.help_main(@color, @bg-color);
.notifications_main(); .notifications_main();
.dropdown_main(); .dropdown_main();
.history_main(); .history_main();
@ -56,17 +42,8 @@
.modal_main(); .modal_main();
}; };
& { & {
@keyframes notification { @toolbar-color: @cryptpad_text_col;
0% { @toolbar-color-light: lighten(@cryptpad_text_col, 10%);
background: rgba(0,0,0,0);
}
50% {
background: rgba(0,0,0,0.2);
}
100% {
background: rgba(0,0,0,0);
}
}
.toolbar_vars(); .toolbar_vars();
@toolbar-top-bg: #eee; @toolbar-top-bg: #eee;
@ -94,7 +71,6 @@
height: @toolbar_line-height !important; height: @toolbar_line-height !important;
outline: 0; outline: 0;
color: @toolbar-color; color: @toolbar-color;
color: var(--toolbar-color);
.toolbar_button; .toolbar_button;
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
&:hover { &:hover {
@ -155,7 +131,6 @@
} }
.cp-toolbar-chat-drawer-close { .cp-toolbar-chat-drawer-close {
color: @toolbar-color; color: @toolbar-color;
color: var(--toolbar-color);
position: absolute; position: absolute;
top: 0; top: 0;
right: 1px; right: 1px;
@ -367,33 +342,21 @@
} }
.cp-toolbar-userlist-drawer { .cp-toolbar-userlist-drawer {
background-color: @toolbar-bg-color; background-color: @colortheme_userlist-bg;
background-color: var(--toolbar-bg-color);
color: @toolbar-color; color: @toolbar-color;
color: var(--toolbar-color);
.cp-toolbar-userlist-drawer-close { .cp-toolbar-userlist-drawer-close {
color: @toolbar-color; color: @toolbar-color;
color: var(--toolbar-color);
} }
h2 { h2 {
background-color: @toolbar-bg-color-d10;
background-color: var(--toolbar-bg-color-d10);
color: @toolbar-color; color: @toolbar-color;
color: var(--toolbar-color);
} }
.cp-toolbar-userlist-name-input { .cp-toolbar-userlist-name-input {
background-color: @toolbar-bg-color-d10; background-color: rgba(0,0,0,0.1);
background-color: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
} }
.cp-toolbar-userlist-button { .cp-toolbar-userlist-button {
color: @toolbar-userlist-name-edit;
color: var(--toolbar-userlist-name-edit);
background: transparent; background: transparent;
&:hover { &:hover {
color: @toolbar-color; color: @toolbar-color-light;
color: var(--toolbar-color);
} }
} }
} }

2
www/common/common-ui-elements.js
Unescape Escape View File

@ -1884,7 +1884,7 @@ define([
common.fixLinks(text); common.fixLinks(text);
var closeButton = h('span.cp-help-close.fa.fa-window-close'); var closeButton = h('span.cp-help-close.fa.fa-times');
var $toolbarButton = common.createButton('', true, { var $toolbarButton = common.createButton('', true, {
title: Messages.hide_help_button, title: Messages.hide_help_button,
text: Messages.help_button, text: Messages.help_button,

2
www/common/messenger-ui.js
Unescape Escape View File

@ -329,7 +329,7 @@ define([
var priv = metadataMgr.getPrivateData(); var priv = metadataMgr.getPrivateData();
var closeTips = h('span.fa.fa-window-close.cp-app-contacts-tips-close'); var closeTips = h('span.fa.fa-times.cp-app-contacts-tips-close');
var tips; var tips;
if (isApp && Util.find(priv.settings, ['general', 'hidetips', 'chat']) !== true) { if (isApp && Util.find(priv.settings, ['general', 'hidetips', 'chat']) !== true) {
tips = h('div.cp-app-contacts-tips', [ tips = h('div.cp-app-contacts-tips', [

4
www/common/toolbar.js
Unescape Escape View File

@ -401,7 +401,7 @@ MessengerUI, Messages) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); });
var $closeIcon = $('<span>', {"class": "fa fa-window-close cp-toolbar-userlist-drawer-close"}).appendTo($content); var $closeIcon = $('<span>', {"class": "fa fa-times cp-toolbar-userlist-drawer-close"}).appendTo($content);
$('<h2>').text(Messages.users).appendTo($content); $('<h2>').text(Messages.users).appendTo($content);
$('<p>', {'class': USERLIST_CLS}).appendTo($content); $('<p>', {'class': USERLIST_CLS}).appendTo($content);
@ -468,7 +468,7 @@ MessengerUI, Messages) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); });
var $closeIcon = $('<span>', {"class": "fa fa-window-close cp-toolbar-chat-drawer-close"}).appendTo($content); var $closeIcon = $('<span>', {"class": "fa fa-times cp-toolbar-chat-drawer-close"}).appendTo($content);
//$('<h2>').text(Messages.users).appendTo($content); //$('<h2>').text(Messages.users).appendTo($content);
//$('<p>', {'class': USERLIST_CLS}).appendTo($content); //$('<p>', {'class': USERLIST_CLS}).appendTo($content);

Write Preview
Loading…
Cancel
Save