HackMD修改原生 Twitch 聊天室的 CSS，自訂想要的擷取效果！
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
原生 Twitch 聊天室
- 網址:
https://www.twitch.tv/popout/[帳號]/chat - 未完成:
- 訂閱訊息
- Clip 縮圖
- 字體下載: 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;
}
氣球效果
/* ----------------------------------------
* 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;
}
