---
title: "修改原生 Twitch 聊天室的 CSS，自訂想要的擷取效果！"
tags: OBS
description: "覺得市面上的 Twitch 聊天室擷取都讓你不滿意，想要自己弄個好看的版本嗎？"
---

# 修改原生 Twitch 聊天室的 CSS，自訂想要的擷取效果！

{%hackmd @f6bfb5/biKBG-dnSQajGm3NZj38Fg %}

 

- [總覽](/s/1lhI9SqjRzepld5qyOMHKw)

## 原生 Twitch 聊天室

- 網址: `https://www.twitch.tv/popout/[帳號]/chat`
- 未完成:
1. 訂閱訊息
2. Clip 縮圖
- 字體下載: [genyog-font](https://github.com/ButTaiwan/genyog-font)
- 移除多餘元素的基礎 CSS:

/* ----------------------------------------
 * General Settings
 * ---------------------------------------- */
body {
    background-color: rgba(24,24,24,.33) !important;
    overflow: hidden;
}
.tw-root--theme-light, 
.tw-root--theme-dark,
.tw-c-background-base,
.tw-c-background-alt,
.tw-c-background-alt-2,
.stream-chat, 
.chat-room {
    background-color: transparent !important;
}

/* ----------------------------------------
 * Remove the header, scrollbar and footer section
 * ---------------------------------------- */
.stream-chat-header.tw-flex,
.channel-leaderboard,
.chat-input.tw-block,
.simplebar-track {
    display: none !important;
}

/* ----------------------------------------
 * Chat Container Spacing
 * ---------------------------------------- */
.chat-list {
    padding: 20px;
    padding-bottom: 10px;
}
.chat-line__status,
.chat-line__moderation, 
.chat-line__message {
    padding: 6px 4px !important;
}

/* ----------------------------------------
 * Chat Font Size, Color
 * CSS-Based Outside Stroke: https://www.petercarrero.com/examples/stroke/
 * ---------------------------------------- */
.chat-line__status[data-a-target="chat-welcome-message"] {
    display: none;
}
.chat-line__status,
.chat-line__moderation, 
.chat-line__message,
.user-notice-line,
.channel-points-reward-line {
    font-family: 'GenYoGothic TW TTF Heavy';
}
.chat-line__status,
.chat-line__moderation, 
.chat-line__message {
    font-size: 24px !important;
    line-height: 28px !important;
    letter-spacing: 1px !important;
}
.user-notice-line p,
.channel-points-reward-line {
    font-size: 20px !important;
    line-height: 24px !important;
    letter-spacing: 1px !important;
}
.chat-line__status,
.chat-line__moderation, 
.chat-line__message {
    color: #e7e7e7 !important;
}
a {
    color: #0fa5e5 !important;
}
.chat-author__intl-login {
    opacity: 1;
}

### 氣球效果

- [yuki-natsuno-vt/SpeechBubbleCSS: Youtube Liveのチャットコメントを吹き出しで表示するCSSです。](https://github.com/yuki-natsuno-vt/SpeechBubbleCSS)
- 未完成

/* ----------------------------------------
 * Chat Balloon Effect
 * ---------------------------------------- */
.text-fragment {
  display: block;
  position: relative;
  top: -8px;
  margin-left: 0px;
  padding: 5px 8px;
  border-radius: 10px;
}
.text-fragment::before {
  content: "";
  display: block;
  position: relative;
  top: 10px;
  left: -18px;
  width: 0px;
  height: 0px;
  border: 10px 0px 0px 20px solid rgba(255,255,255,255) rgba(0,0,0,0) rgba(0,0,0,0);
  transform: rotate(20deg);
}
.text-fragment {
  background-color: #fefefe;
  color: #101010;
}

### 文字外框線效果

/* ----------------------------------------
 * Chat Stroke
 * CSS-Based Outside Stroke: https://www.petercarrero.com/examples/stroke/
 * ---------------------------------------- */
.chat-author__display-name, 
.chat-author__intl-login,
.user-notice-line,
.channel-points-reward-line {
    text-shadow: 
       -2px -2px #e7e7e7,
       -2px -1px #e7e7e7,
       -2px  0px #e7e7e7,
       -2px  1px #e7e7e7,
       -2px  2px #e7e7e7,
       -1px -2px #e7e7e7,
       -1px -1px #e7e7e7,
       -1px  0px #e7e7e7,
       -1px  1px #e7e7e7,
       -1px  2px #e7e7e7,
        0px -2px #e7e7e7,
        0px -1px #e7e7e7,
        0px  0px #e7e7e7,
        0px  1px #e7e7e7,
        0px  2px #e7e7e7,
        1px -2px #e7e7e7,
        1px -1px #e7e7e7,
        1px  0px #e7e7e7,
        1px  1px #e7e7e7,
        1px  2px #e7e7e7,
        2px -2px #e7e7e7,
        2px -1px #e7e7e7,
        2px  0px #e7e7e7,
        2px  1px #e7e7e7,
        2px  2px #e7e7e7;
}
.text-fragment,
a {
    -webkit-text-stroke: .5px #232323;
    text-shadow: 
       -2px -2px #232323,
       -2px -1px #232323,
       -2px  0px #232323,
       -2px  1px #232323,
       -2px  2px #232323,
       -1px -2px #232323,
       -1px -1px #232323,
       -1px  0px #232323,
       -1px  1px #232323,
       -1px  2px #232323,
        0px -2px #232323,
        0px -1px #232323,
        0px  0px #232323,
        0px  1px #232323,
        0px  2px #232323,
        1px -2px #232323,
        1px -1px #232323,
        1px  0px #232323,
        1px  1px #232323,
        1px  2px #232323,
        2px -2px #232323,
        2px -1px #232323,
        2px  0px #232323,
        2px  1px #232323,
        2px  2px #232323;
}

### 移入動畫效果

/* ----------------------------------------
 * Animation
 * ---------------------------------------- */
 
/* ----------------------------------------------
 * Generated by Animista on 2020-6-3 13:50:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes slide-top {
    0% {
        // transform: translateY(24px);
        transform: translateX(100vw);
    }
    100% {
        // transform: translateY(0);
        transform: translateX(0);
    }
}

.chat-line__message {
    animation: 
        fade-in 0.4s ease both, 
        slide-top 0.4s ease both;
    /* transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; */
}

.chat-list, .chat-line__message {
    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
}