Всем привет.
Решил изменить вид чата на такой:
Но получается вот так:
То есть сам чат залезает под полоску навигации и хотелось бы убрать расстояние где отметил красными крестиками.
Код CSS
/*CHAT*/
.timenew {
float: right;
color: #565a5a;
padding-left: 30px;
padding-right: 9px;
line-height: 28px;
margin-top: 6px;
background-image: -webkit-linear-gradient(right,#252525, rgba(255,255,255,0));
margin-right: -4px;
}
.chat_row:after {
content: '';
display: block;
border-top: 0px solid transparent;
border-bottom: 25px solid rgb(35, 35, 35);
border-right: 25px solid rgba(41, 41, 41, 0);
border-left: 25px solid rgba(41, 41, 41, 0);
position: absolute;
left: -14px;
top: 30px;
-webkit-transform: rotate(-226deg);
border-width: 15px;
}
.ipsUserPhoto:after {
border: 3px solid rgba(255,255,255,0.15);
}
.chat_row .ipsPhotoPanel > .ipsUserPhoto {
position: relative;
display: block;
background: #2d2d2d;
padding: 3px;
border: 0;
left: -70px;
top: -3px;
}
.ipsPad_half1 {
margin-left: -400px;
padding: 5px 5px 0px 3px;
line-height: 1.7;
}
.chat_row {
width: auto;
background: rgba(41, 41, 41, 0.55);
border: 0;
margin: 5px 5px 5px 65px;
border-radius: 6px;
position: relative;
}
/*CHAT END*/
Код chatbox.css
.smile-bny {
position: absolute;
right: -5px;
padding: 0 10px 0 10px !important;
height: 26px !important;
font-size: 18px;
line-height: 27px;
background: rgb(35, 35, 35);
}
.vol-bny {
position: absolute;
bottom: 6px;
right: 40px;
padding: 0 10px 0 10px !important;
height: 26px !important;
line-height: 24px !important;
font-size: 12px;
line-height: 28px;
padding: 0 15px;
background: rgb(35, 35, 35);
}
.vol-bny-fal {
position: absolute;
bottom: 6px;
right: 5px;
padding: 0 10px 0 10px !important;
height: 26px !important;
line-height: 24px !important;
font-size: 12px;
line-height: 28px;
padding: 0 15px;
background: rgb(35, 35, 35);
}
#chatboxWrap {
height: 300px;
overflow-y: scroll;
resize: vertical;
background: #1c1c1c;
}
.bimcb_chatArea {
/*padding: 4px; background: #fff; */
}
#cbInput_container { position:relative; padding:0; margin:0; }
#input_img {
position: absolute;
bottom: 6px;
right: 80px;
padding: 0 10px 0 10px !important;
height: 26px !important;
line-height: 24px !important;
}
#chat_button {
position: absolute;
bottom: 6px;
right: 114px;
padding: 0 10px 0 10px !important;
height: 26px !important;
line-height: 24px !important;
}
.bimcb_chatInput {
width: 100% !important;
max-width: 100% !important;
margin-top: 2px;
height: 36px;
padding: 8px 90px 8px 8px !important;
border: none !important;
background: transparent;
opacity: 0.5;
}
.ipsDataList:not( .ipsGrid ) .ipsDataItem:last-child, .ipsDataList.ipsDataList_zebra > .ipsDataItem {
border-bottom: 0px solid #252525 !important;
}
.bimcb_chatInput :focus {
border: none !important;
outline: 0 !important;
}
#cbInput_container input:focus {
border: none !important;
outline: 0 !important;
}
.cbEmoList {
float: left;
width: 55px;
height: 55px;
text-align: center;
}
.cbEmoList img {
cursor: pointer; cursor: hand;
}
#elChatbox {
background: {theme="section_title"};
color: {theme="section_title_font"};
}
#elChatboxBar > li > a {
color: #000;
}
#elChatboxBar > li > a:not( .ipsTabs_activeItem ) {
background: rgba(225,225,225,0.2);
color: {theme="section_title_font"};
}
.cbTabSmall { font-size: 12px !important; padding-right: 8px !important; padding-left: 8px !important; }
.ipsWidget.ipsWidget_horizontal[data-blockid^="app_bimchatbox"] {
padding: 5px !important;
}
.ipsWidget.ipsWidget_horizontal div[data-controller="bimChatBoxMain"] {
margin-top: -20px;
}
@media screen and (max-width: 767px) {
#elChatboxBar > li > a:not( .ipsTabs_activeItem ) {
color: #52585f;
background: #fff;
}
#elChatboxBar {
margin-right: 150px;
font-size: 13px !important;
}
#elChatboxBar a { font-size: 13px !important; }
#cbexpandTabs
{
margin-right: 150px !important;
left: 100px !important;
}
}
.manaButtonSmall a { color: #fff; line-height: 30px; }
Если честно,то я не знаю Может еще кто поможет))
Данный стиль выполнен в темных тонах и отлично подойдет для игрового проекта.Free
