Replies: 3 comments 17 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.
-
|
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.
-
|
Thats odd, because i did test it alot, atleast in older version of AxelChat. Worked alright. fixes it. Java code doesn't seem to like "display:flex;" method, maybe :D I will see to it later, will try to find other solutions. |
Beta Was this translation helpful? Give feedback.
-
|
I did modify the "On top" variation with more stable solution. Full CSS code updated in top message too. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot! |
Beta Was this translation helpful? Give feedback.
-
|
как сделать его прозрачным? |
Beta Was this translation helpful? Give feedback.
-
Если хотите убрать фон именно с моего стиля есть секция CSS кода: Удалите строки: или замените их на: |
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.
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