Hello I'm trying to change rightmost element color (which is pink by default). It is not fitting my forum at all. Here I found an element to change color, but with no result. Any suggestions?
.ChatList .header {
background-color: #000000;
}
EDIT: Well figured it out:
.ChatList .header {
background-color: #000000 !important;
}
EDIT2: There is one last pink element of chat which is pink frame which shows which current chat is selected. Any ideas how to alter it? Google Developer Tools can't find it :S
EDIT3: Here is solution for problem described in EDIT 2:
`.ChatList {
.input--down {
*,
*:before,
&:before {
cursor: default;
}
}
width: 85px;
background-color: @color-chatlist-bg;
.previewBody {
display: none;
}
.header {
display: flex;
justify-content: flex-end;
height: 35px;
background-color: @color-chatlist-hr;
position: relative;
p {
position: relative;
float: right;
}
.icon {
width: 28px;
line-height: 35px;
color: #3a3a3a;
vertical-align: middle;
text-align: center;
font-size: 12pt;
cursor: pointer;
position: relative;
&:hover {
color: #FFF;
}
}
}
.list {
overflow: auto;
}
.unreaded {
.user-select(none);
.transition(all .1s ease);
position: absolute;
min-width: 18px;
height: 18px;
padding: 0px 5px;
border-radius: 18px;
background-color: #3ab6ff;
z-index: 99;
top: 0px;
right: 20px;
text-align: center;
color: #FFF;
line-height: 18px;
font-size: 12px;
box-shadow: 0 0 4px 0px #000;
}
.panel-add {
width: 55px;
}
.panel-preview {
display: flex;
overflow: hidden;
height: 55px;
width: 55px;
background-color: #ffffff00;
margin: 10px 8px;
border-radius: 100px;
box-shadow: none;
position: relative;
.transition(box-shadow .1s);
.user-select(none);
&:hover:not(.active) {
box-shadow: 0 0 0 3px #226638!important;
@media @phone {
background-color: #226638!important;
}
}
&.active {
background-color: #226638!important;
box-shadow: 0 0 0 3px #226638!important;
}
.avatar {
width: 55px;
min-width: 55px;
line-height: 55px;
border-radius: 50%;
text-align: center;
font-size: 28px;
background-color: #bfc2c5;
&.image {
background-size: contain;
color: #FFFFFF00;
}
}
.title {
overflow: hidden;
text-overflow: ellipsis;
margin-left: 7px;
font-weight: bold;
max-width: 100px;
z-index: 5;
white-space: nowrap;
i {
margin-right: 3px;
}
}
.message {
overflow: hidden;
text-overflow: ellipsis;
color: #929292;
white-space: nowrap;
margin-left: 7px;
max-width: 150px;
.media {
color: #3ab6ff;
}
.sender {
color: #226638!important;
}
.empty {
color: #bdbfc4;
}
}
.timestamp {
font-size: 8pt;
text-align: right;
width: 100%;
line-height: 2;
color: #a1a1a1;
position: absolute;
right: 5px;
opacity: 0;
}
}
@media @tablet-up {
&:hover {
width: 255px;
.previewBody {
display: flex;
flex-direction: column;
}
.unreaded {
top: 25px;
right: 15px;
box-shadow: none;
}
.list {
overflow-y: auto;
}
.header {
justify-content: space-between;
}
.panel-add {
width: auto;
border-radius: 15px;
padding: 5px;
background-color: #ffffff;
.user-select(none);
&:before {
content: "+";
font-size: 48pt;
color: #31394652;
line-height: 0.5;
display: block;
text-align: center;
height: 45px;
}
}
.panel-preview {
border-radius: 15px;
padding: 5px;
width: auto;
background-color: #fff;
.timestamp {
opacity: 1;
}
.avatar {
margin-left: 2px;
min-width: 45px;
width: 45px;
line-height: 45px;
font-size: 24px;
}
}
.input-wrapper {
display: block;
}
}
}
&.toggled {
width: 255px;
.previewBody {
display: flex;
flex-direction: column;
}
.unreaded {
top: 25px;
right: 15px;
box-shadow: none;
}
.list {
overflow-y: auto;
}
.header {
justify-content: space-between;
}
.panel-add {
width: auto;
border-radius: 15px;
padding: 5px;
background-color: #ffffff;
.user-select(none);
&:before {
content: "+";
font-size: 48pt;
color: #31394652;
line-height: 0.5;
display: block;
text-align: center;
height: 45px;
}
}
.panel-preview {
border-radius: 15px;
padding: 5px;
width: auto;
background-color: #fff;
.timestamp {
opacity: 1;
}
.avatar {
margin-left: 2px;
min-width: 45px;
width: 45px;
line-height: 45px;
font-size: 24px;
}
}
.input-wrapper {
display: block;
}
.icon-toggle {
color: #FFF;
}
}
.input-wrapper {
display: none;
background-color: #ffffff;
border-radius: 15px;
margin: 5px 10px;
&:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f002";
position: relative;
margin: 5px;
color: #9ba0ab;
}
#chat-find {
resize: none;
width: 80%;
border-radius: 8px;
background-color: #ffffff;
outline: none;
border: none;
height: 25px;
overflow: hidden;
white-space: nowrap;
&:focus::placeholder {
color: #adadad
}
&:focus:-moz-placeholder {
color: #adadad
}
&:focus::-moz-placeholder {
color: #adadad
}
&:focus:-ms-input-placeholder {
color: #adadad
}
&:focus::-webkit-input-placeholder {
color: #adadad
}
}
}
.panel-add {
padding: 5px;
background-color: #ffffff;
margin: 8px;
border-radius: 100px;
box-shadow: none;
.transition(box-shadow .1s);
&:before {
content: "+";
font-size: 48pt;
color: #31394652;
line-height: 0.5;
text-align: center;
}
&:hover {
box-shadow: 0 0 0 3px #226638!important;
}
}
}`
