• Гость. Приятно видеть Вас на нашем форуме!
Иконка ресурса

Красивый youtube gaming чат в OBS

Dems_dd

Владыка темных земель
Команда форума
Форумчанин
demon-angel добавил(а) новый ресурс:

Красивый youtube gaming чат в OBS - CSS for Overlay Chat [OBS/CLR Browser]

Данный гайд понадобится тем кто занимается, или хочет заняться, стрименгом на youtube. Мы хотим вывести чатик на экран так, что бы он особо не мешался зрителям и при этом сохранился в архиве записи. Что же нам для этого понадобиться?

1. OBS Studio, либо OBS Classic + CLR Browser Source Plugin
2. Ссылка на ваш чат

Настройка.

С первым пунктом думаю ни у...
Узнать больше об этом ресурсе...
 
  • Мне нравится
Реакции: 1 пользователь

Dems_dd

Владыка темных земель
Команда форума
Форумчанин

Dems_dd

Владыка темных земель
Команда форума
Форумчанин
NOFEX Style chat

CSS:
@import url("https://fonts.googleapis.com/css?family=Roboto");

body {
    background-color: rgba(0, 0, 0, 0);
    margin: 0px auto;
    overflow: hidden;
}

::-webkit-scrollbar, yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer,
/*yt-live-chat-author-badge-renderer[type='moderator']*/,
yt-live-chat-viewer-engagement-message-renderer {
    display: none;
}

yt-live-chat-renderer {
    background-color: transparent !important;
    -webkit-mask-image: -webkit-gradient(linear,left 10%,left top,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
    -webkit-mask-image: -webkit-gradient(linear,left 20%,left top,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}

yt-live-chat-text-message-renderer {
    margin: 5px;
    padding: 5px 10px;
    border-radius: 3px;
    font-family: "Roboto";
    text-shadow: 0 0 1px #666,1px 1px 0 #000;
}

/* Настйрока фонов для ролей в чате*/
yt-live-chat-renderer {
    background-color: transparent !important;
}

yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
    background: rgba(0,0,0,.75);
    box-shadow: 0 0 6px rgba(255,255,255,0.1);
}

yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
    background: rgba(0,0,0,.75) !important;
    box-shadow: 0 0 6px rgba(255,255,255,0.1);
}

yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
    background: rgba(0,0,0,.75) !important;
    box-shadow: 0 0 6px rgba(255,255,255,0.1);
}

yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
    background: rgba(0,0,0,.75) !important;
    box-shadow: 0 0 6px rgba(255,255,255,0.1);
}

yt-live-chat-author-chip #author-name {
    background-color: rgba(0,0,0,0) !important;
}

/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
    overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
    overflow: hidden !important;
}

/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
    display: none !important;
}

/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

yt-live-chat-paid-message-renderer #header {
    margin: 4px 0 !important;
}

/* Аватарки. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    margin: 4px 7px 4px 4px !important;
}

/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
   /* display: none !important;*/
    vertical-align: text-top !important;
}

yt-live-chat-author-badge-renderer[type='verified'] {
    display: none;
}

/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
    color: #999999 !important;
    font-family: "Roboto";
}

/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
    color: #caa51a !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
    color: #caa51a !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
    color: #caa51a !important;
}

/* Настройки имен каналов людей */
yt-live-chat-text-message-renderer #author-name {
    color: #caa51a !important;
    font-weight: bold;
    font-family: "Roboto";
    font-size: 20px !important;
    line-height: 21px !important;
    text-shadow: 0 0 1px #666,1px 1px 0 #000;
}

yt-live-chat-text-message-renderer #author-name::after {
    content: ":";
}

/* Настройка вывода сообщений. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
    padding-top: 2px;
    color: #ffffff !important;
    font-family: "Roboto";
    font-size: 18px !important;
    line-height: 21px !important;
}

yt-live-chat-text-message-renderer #message {
    /*display: block !important;*/
}

/* Настройка вывода супер сообщений */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
    color: #ffffff !important;
    font-size: 20px !important;
    line-height: 22px !important;
    font-family: "Roboto";
}

yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
    color: #ffffff !important;
    font-family: "Roboto";
}

yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 20px !important;
    font-family: "Roboto";
}

yt-live-chat-paid-message-renderer {
    margin: 4px 0 !important;
}

yt-live-chat-legacy-paid-message-renderer {
    background-color: #0f9d58 !important;
    margin: 4px 0 !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
    text-decoration: none !important;
}

yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
    display: none !important;
}

yt-live-chat-ticker-renderer {
    background-color: transparent !important;
    box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
    display: none !important;
}

yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
    color: #ffffff !important;
    font-family: "Roboto";
}

yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-restricted-participation-renderer {
    display: none !important;
}

/* Настройки Анимации и появления сообщений */
@-webkit-keyframes FadeOut {
    0%, 100% { opacity: 0; transform: translateX(16px) scale(0.98, 1); }
    2%, 98% { opacity: 1; transform: none;}
}

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    -webkit-animation-name: FadeOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 15s;
    -webkit-animation-fill-mode: both;
}
 

Dems_dd

Владыка темных земель
Команда форума
Форумчанин
Escape from Tarkov

CSS:
@import url("https://fonts.googleapis.com/css?family=Roboto");
body {
    background-color: rgba(0, 0, 0, 0);
    margin: 0px auto;
    overflow: hidden;
}
::-webkit-scrollbar, yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer,
yt-live-chat-author-badge-renderer[type='moderator'],
yt-live-chat-viewer-engagement-message-renderer {
    display: none;
}
yt-live-chat-renderer {
    background-color: transparent !important;
    -webkit-mask-image: -webkit-gradient(linear,left 10%,left top,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
    -webkit-mask-image: -webkit-gradient(linear,left 20%,left top,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}
yt-live-chat-text-message-renderer {
    margin: 5px;
    padding: 5px 10px;
    border-radius: 3px;
    font-family: "Roboto";
    text-shadow: 0 0 1px #666,1px 1px 0 #000;
}
/* Настйрока фонов для ролей в чате*/
yt-live-chat-renderer {
    background: rgba(06, 06, 06, 0.6);
    background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
    background: rgba(06, 06, 06, 0.6);
    box-shadow: 0 0 6px rgba(255,255,255,0.1);
}
yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
    background-color: rgba(23,23,21,0.75) !important;
    box-shadow: 0 0 6px rgba(255,255,255,0.1);
    color: #c1b68b !important;
}
yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
    background-color: rgba(25,31,25,0.75) !important;
    box-shadow: 0 0 6px rgba(255,255,255,0.1);
}
yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
    background-color: rgba(25,31,25,0.75) !important;
    box-shadow: 0 0 6px rgba(255,255,255,0.1);
}
yt-live-chat-author-chip #author-name {
    background-color: rgba(0,0,0,0.25) !important;
    background-color: transparent !important;
}
/*Настройка спонсоров чата*/
yt-live-chat-membership-item-renderer[show-only-header]
#header.yt-live-chat-membership-item-renderer {
    background-color: none;
}
#card.yt-live-chat-membership-item-renderer {
    overflow: hidden;
    font-size: 14px;
    border-radius: 4px;
}
yt-live-chat-membership-item-renderer {
    --yt-live-chat-sponsor-header-color: rgba(25,31,25,0.75) !important;
    --yt-live-chat-sponsor-color: rgba(25,31,25,0.75) !important;
    --yt-live-chat-sponsor-text-color: #fff;
    --yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none);
    padding: 5px 10px;
}
#header-subtext.yt-live-chat-membership-item-renderer {
    color: #bcb67c !important;
}
/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
    overflow: hidden !important;
}
yt-live-chat-item-list-renderer #item-scroller{
    overflow: hidden !important;
}
/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
    display: none !important;
}
/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    padding-left: 4px !important;
    padding-right: 4px !important;
}
yt-live-chat-paid-message-renderer #header {
    margin: 4px 0 !important;
}
/* Аватарки. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
    width: 24px !important;
    height: 24px !important;
    /*border-radius: 50% !important;*/
    margin: 4px 7px 4px 4px !important;
}
/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
    display: none !important;
    vertical-align: text-top !important;
}
/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
    color: #999999 !important;
    font-family: "Roboto";
}
/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  color: #c1b68b !important;
}
yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  color: #8cb182 !important;
}
yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  color: #0f9d58 !important;
}
/* Настройки имен каналов людей */
yt-live-chat-text-message-renderer #author-name {
    color: #9a8866 !important;
    font-weight: bold;
    font-family: "Roboto";
    font-size: 20px !important;
    line-height: 22px !important;
}
yt-live-chat-text-message-renderer #author-name::after {
    content: ":";
}
/* Настройка вывода сообщений. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
    padding-top: 2px;
    color: #aeaeb0 !important;
    font-family: "Roboto";
    font-size: 18px !important;
    line-height: 20px !important;
}
yt-live-chat-text-message-renderer #message {
    display: block !important;
}
/* Настройка вывода супер сообщений */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
    color: #aeaeb0 !important;
    font-size: 20px !important;
    line-height: 22px !important;
    font-family: "Roboto";
}
yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
    color: #aeaeb0 !important;
    font-family: "Roboto";
}
yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
    color: #aeaeb0 !important;
    font-size: 18px !important;
    line-height: 20px !important;
    font-family: "Roboto";
}
yt-live-chat-paid-message-renderer {
    margin: 4px 0 !important;
}
yt-live-chat-legacy-paid-message-renderer {
    background-color: #0f9d58 !important;
    margin: 4px 0 !important;
}
yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
    text-decoration: none !important;
}
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
    display: none !important;
}
yt-live-chat-ticker-renderer {
    background-color: transparent !important;
    box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
    display: none !important;
}
yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
    color: #aeaeb0 !important;
    font-family: "Roboto";
}
yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-restricted-participation-renderer {
    display: none !important;
}
/* Настройки Анимации и появления сообщений */
@-webkit-keyframes FadeOut {
    0% { opacity: 0; transform: translateX(16px) scale(0.98, 1); }
    100% { opacity: 1; transform: none;}
}
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    -webkit-animation-name: FadeOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
}
 

Dems_dd

Владыка темных земель
Команда форума
Форумчанин
Сверху Снизу