Fix colors for the help, chat and userlist boxes

pull/1/head
yflory 5 years ago
parent 706ecc67f9
commit 303d4fdd3a

@ -68,8 +68,11 @@
@colortheme_dropdown-bg-active: #e8e8e8;
// Apps, these colors are used for customizing the toolbar for the apps.
@colortheme_pad-toolbar-bg: #eeeeee;
@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-color: #fff;

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

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

@ -1,30 +1,13 @@
@import (reference) "./colortheme-all.less";
.help_vars (
@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
) {
.help_main () {
--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 {
position: relative;
background-color: @help-bg-color-l15;
background-color: var(--help-bg-color-l15);
background-color: @colortheme_help-bg;
&.cp-help-hidden {
display: none;
}
@ -36,13 +19,11 @@
cursor: pointer;
}
.cp-help-text {
color: @help-text-color;
color: var(--help-text-color);
color: @cryptpad_text_col;
margin: 0;
padding: 5px 15px;
a {
color: @help-link-color;
color: var(--help-link-color);
color: @colortheme_link-color;
}
h1 {
font-size: 20px;

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

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

@ -1884,7 +1884,7 @@ define([
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, {
title: Messages.hide_help_button,
text: Messages.help_button,

@ -329,7 +329,7 @@ define([
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;
if (isApp && Util.find(priv.settings, ['general', 'hidetips', 'chat']) !== true) {
tips = h('div.cp-app-contacts-tips', [

@ -401,7 +401,7 @@ MessengerUI, Messages) {
e.preventDefault();
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);
$('<p>', {'class': USERLIST_CLS}).appendTo($content);
@ -468,7 +468,7 @@ MessengerUI, Messages) {
e.preventDefault();
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);
//$('<p>', {'class': USERLIST_CLS}).appendTo($content);

Loading…
Cancel
Save