Skip to content

Instantly share code, notes, and snippets.

@AiOO

AiOO/chzzk-chat-styles.css

Last active July 12, 2025 02:47
Show Gist options
  • Save AiOO/f0ab2512677475efa147a98fc6a82682 to your computer and use it in GitHub Desktop.
Save AiOO/f0ab2512677475efa147a98fc6a82682 to your computer and use it in GitHub Desktop.
Download ZIP
Inspired by https://chat.kya.sh/
Raw
chzzk-chat-styles.css
/* =========== */
/* 설정 영역 */
:root {
/* [TIP] 글자 두께를 변경해야 하는 경우 */
/* 아래 숫자(600)를 100~900 사이에서 100 단위로 조절해주세요. */
/* 숫자가 클 수록 두께가 두꺼워집니다. */
/* (기본값: 600) */
--font-weight: 600;
/* [TIP] 글자 크기를 변경해야 하는 경우 이 값을 조절해주세요. */
/* (기본값: 30px) */
--base-font-size: 30px;
/* [TIP] 테두리 두께를 변경해야 하는 경우 이 값을 조절해주세요. */
/* (기본값: 4px) */
--ot: 4px;
/* [TIP] 메시지간 간격을 변경해야 하는 경우 이 값을 조절해주세요. */
/* (기본값: 방송중 1.7em, 대기화면 1.75em) */
  --line-height: 1.7em;
}
/* =========== */
/* 글꼴 영역 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css");
:root {
--font-family: 'Noto Sans KR', Pretendard, NanumGothic, 'Nanum Gothic', 나눔고딕, 'Malgun Gothic', '맑은 고딕', Dotum, Gulim, 돋움, 굴림, sans-serif;
--font-size: 1em;
--letter-spacing: -0.015em;
--nickname-gap: 0.25em;
}
/* =========== */
body {
-webkit-mask-image: -webkit-gradient(linear, left 5%, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
mask-image: linear-gradient(transparent, rgb(0 0 0 / 100%) 5%);
}
div#root {
overflow: hidden;
}
div[class*='live_overlay_chatting'] {
height: calc(100vh + var(--base-font-size) * 5);
margin-top: calc(var(--base-font-size) * -5);
padding: var(--ot) !important;
font-family: var(--font-family) !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
div[class*='live_overlay_item'] {
margin: 0 !important;
}
div[class*='live_overlay_message'] {
max-width: 100% !important;
background: transparent !important;
}
div[class*='live_chatting_message_wrapper'] {
text-shadow: 0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000,
0px 0px var(--ot) #000, 0px 0px var(--ot) #000, 0px 0px var(--ot) #000;
padding: 0 !important;
font-size: var(--base-font-size) !important;
letter-spacing: var(--letter-spacing) !important;
}
div[class*='live_chatting_message_wrapper'] span {
line-height: var(--line-height) !important;
font-size: var(--font-size) !important;
font-weight: var(--font-weight) !important;
}
span[class*='live_chatting_username_container'] {
margin-right: var(--nickname-gap) !important;
}
span[class*='live_chatting_username_wrapper'] {
margin-right: var(--nickname-gap) !important;
gap: 0.2em !important;
}
span[class*='badge_container'] > img,
span[class*='badge_container'] > svg {
margin: calc(0.35em + var(--ot)) 0 0 0 !important;
vertical-align: top !important;
height: 1em !important;
width: auto !important;
}
span[class*='live_chatting_username_nickname']:after {
content: ':';
}
span[class*='live_chatting_message_text'] {}
span[class*='live_chatting_message_text'] > img,
span[class*='live_chatting_message_text'] > svg {
margin: calc(0.15em + var(--ot) / 2) 0.067em 0 0 !important;
vertical-align: top !important;
height: 1.4em !important;
width: auto !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment