チャット欄：カットイン風
https://scrapbox.io/files/632314103e7c580022dcad9f.png
https://scrapbox.io/files/632312255a7e6c0023c6d0f9.mp4
OBSの設定
table:obsの設定
ソースの種類 ブラウザ
URL ココフォリアの部屋URL
よこ 1920
たて 1080
code:css
@import url("https://ghgantz.github.io/customCss/ccfolia/chat.css");
@import url("https://ghgantz.github.io/customCss/ccfolia/fadeIntoRight.css");
.MuiList-root>div>div>div:nth-last-of-type(-n+3) {
display: block !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
:root {
--icon-width: 200px !important; /** 画像の横幅 */
--icon-height: 200px !important; /** 画像の高さ */
--font-color-success: rgb(255 255 255) !important;
--font-color-fail: rgb(255 255 255) !important;
--background-color: rgba(0, 0, 0, 0.95) !important;
--is-top: auto;/* 上揃えの場合⇒0、下揃えの場合⇒auto */
--is-bottom: 0;/* 上揃えの場合⇒auto、下揃えの場合⇒0 */
}
.MuiListItemAvatar-root {
position: absolute !important;
left: 330px !important;/* アイコン画像のY座標 */
opacity: 0.75 !important;/* 画像の不透明度　0：透明、1：不透明 */
z-index: 1 !important;
}
.MuiListItemAvatar-root img{
position: relative !important;
top: -50px !important;/* アイコン画像のX座標 */
}
.MuiListItemText-root {
z-index: 3 !important;
}
.MuiListItem-root {
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 20px !important;
overflow: hidden !important;
}
#チャット欄