Replies: 4 comments 24 replies
-
Restream like chatIt's meant to mimic Restream Chat, as such it runs top to bottom, and has a slide in animation with a little bounce. among other changes. Also I only use youtube and twitch chats here.
Preview:
CSS: Click this to expand/*New Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
#root > span > img[src='./images/tick.svg'], #root > span > img[src='./images/error-alt-svgrepo-com.svg']{
display: none;
}
#root > span > .authorName {
display: none;
}
#root .ant-spin.ant-spin-spinning,
#root .anticon.anticon-loading.anticon-spin {
display: none;
}
/*-------------------------Animation--------------------------------------*/
.messagesListView > div:nth-last-child(2){
position: relative;
animation-name: slideIn;
animation-duration: 0.3s;
animation-iteration-count: 1;
transition-timing-function: cubic-bezier(.75,-0.5,0,1.75);
}
@-webkit-keyframes slideIn{
0% {transform: translateX(100%)}
80% {transform: translateX(-2%)}
90% {transform:translateX(2%)}
100% {transform: translateX(0%)}
}
/*------------------------------------------------------------*/
/*Moves username onto new line*/
span.authorName::after{
content: "\A";
white-space: pre;
line-height:2;
vertical-align:top
}
/*Reverses the message order*/
.messagesListView{
display:flex;
flex-direction: column-reverse
}
/*---------------------------------message styling---------------------------*/
.message{
background: #253858;
padding: 1rem;
margin: 0.2rem 0;
width: 400px;
box-shadow: 5px 5px 5px rgba(37,56,88,0.4);
border-radius: 0px;
}
.badgeServiceIcon {
width: 12px;
padding-right: 6px;
}
.badgeLeft, .badgeRight {
display: none;
}
/*This removes the colon I believe?*/
span.text:nth-of-type(3) {
display: none;
}
/*Pushes the actual message text downwards a little*/
.message :nth-child(n+4) {
margin-top: 6px;
word-wrap: anywhere;
}
/*------------------------------------------------------------*/
/*Transparent BG and removing scroll wheel*/
body{
background-color: rgba(0,0,0,0);
overflow-y:hidden;
overflow-x:hidden;
}
/*--------------Finally using the fonts to change the name and messages to look nicer-------------------------*/
.authorName {
color: #D3D3D3 !important;
font-family: "Poppins", sans-serif;
font-style: normal;
font-weight: 300;
font-size: 1rem;
}
.authorMessageContentSeparator{
display: none
}
.text{
color: #FFF !important;
font-family: "Inter", sans-serif;
font-size: 1.3rem;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
margin-top: 5px
} |
Beta Was this translation helpful? Give feedback.
-
|
I've tried to disable the Null_Message with custom CSS - One which says "Connected!" with icon. Didn't work, maybe doing something wrong. What exactly is the element of that message? .null_message doesn't work. |
Beta Was this translation helpful? Give feedback.
-
|
Here's some CSS for those issues I think @Aeon1704 This removes the tick and error images that show up before messages are sent This removes the loading stuff too I think this is what I use to remove everything. Idk if the connected text goes away but that can always be dealt with by hiding the chat till the first message pops in. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, it does remove the icons, but message connected stays. But easy way will be to removes it from JS and leave it blank :D |
Beta Was this translation helpful? Give feedback.
-
|
Hi! I will try to make it possible to disable the display of such a message through the settings |
Beta Was this translation helpful? Give feedback.
-
|
There is an option in the settings to remove the connected message. |
Beta Was this translation helpful? Give feedback.
-
|
Simple Style I've made for myself. Changes made to original style: Alpha-mask .png
CSS: New Messages at Bottom:CSS: New Messages at Top:CSS: New Messages at Bottom, 30sec timer:CSS: New Messages at Top, 30sec timer: |
Beta Was this translation helpful? Give feedback.
-
а у меня наоборот, почему-то фон прозрачный, а не как у вас на скрине, в самом коде я ничего не меняла |
Beta Was this translation helpful? Give feedback.
-
|
Скорее всего у вас включена настройка фона в самом приложении. Ее нужно отключить. Либо модифицировать строку до: |
Beta Was this translation helpful? Give feedback.
-
в приложении отключено |
Beta Was this translation helpful? Give feedback.
-
|
Видимо версия обновилась и теперь там жесткие настройки для фона сообщений. на Custom CSS должен игнорировать настройки фона приложения. Попробуйте скопировать любой из предложенных кодов в первом посте. |
Beta Was this translation helpful? Give feedback.
-
помогло, спасибо |
Beta Was this translation helpful? Give feedback.
-
|
А как поставить мне такой стиль, подскажите пожалуйста! |
Beta Was this translation helpful? Give feedback.
-
|
какой именно? |
Beta Was this translation helpful? Give feedback.
-
|
Когда вы добавите виджет AxelChat в свой обс, кликните правой кнопкой - свойства. Будет поле CSS. Скопируйте туда код CSS, предложенный выше. |
Beta Was this translation helpful? Give feedback.
-
|
is it possible to limit the words in a line? I want to make the chat not so long horizontally, and I would like to be able to adjust the line break. can someone help with this, please? |
Beta Was this translation helpful? Give feedback.
-
|
Not sure exactly, horizontal limit is set in your Scene Element. But if you want message to appear in one line and simply being, let's say, cut. You can try to add this. You need to adjust the "height" property and set proper size(number) to it, matching your font size. Otherwise it will not work, but it will cut too big text and will place it in single line |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Here you can find Custom CSS styles for AxelChat widgets and you can also share your styles with the user community. Instructions for installing styles can be found here: #622
When publishing your CSS style, please follow these instructions:
Click this to expand
When publishing your CSS style, please include the following information:
To make it easier look at examples of those who have done it before you
Beta Was this translation helpful? Give feedback.
All reactions