Fluent UI for chzzk.naver.com by Kinomerc

Screenshot of Fluent UI for chzzk.naver.com
Details

AuthorKinomerc
LicenseNo License
Categorychzzk.naver.com
Created2 weeks, 4 days ago
Updated2 days, 8 hours ago
Size20 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

https://userstyles.world/style/13773/chzzk-clean-theater-mode 해당모드와 호환되며
치지직 내부 라이트모드와 일부 호환됩니다
사이드바를 비롯하여 수많은 귀찮음 요소가 제거되었기 때문에 순정 치지직에서 일부 호환됩니다.
Notes

Userstyle doesn't have notes.
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name       Fluent UI for chzzk.naver.com
@version    20241016
@namespace  ?
==/UserStyle== */
@-moz-document domain("chzzk.naver.com") {
/* 햄버거 메뉴 */
/* 햄버거 메뉴 */
header[class^="header_area__"] button[class^="header_button"] svg:hover
{
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
    text-decoration: none;
}
div[class^="toolbar_section__"]
{
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
}

/* 검색창 */
[class^="search_form__"]
{
    border: 1px solid rgba(0, 0, 0, 0.1)!important;
    box-shadow: 0 1px 3px rgba(128, 128, 128, 0.3) !important;
    border-radius: 10px;
    padding: 8px;
    outline: none;
    transition: background-color 0.3s, box-shadow 0.3s;
}
[class^="search_form__"]:hover
{
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    background-color: rgb(128, 128, 128, 0.1);
}
[class^="search_autocomplete__"]
{
    background-color: rgba(128, 128, 128, .3) !important;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(128, 128, 128, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 5px!important;
    transition: background-color 0.3s, box-shadow 0.3s;
}
html[style="color-scheme: dark;"] [class^="search_autocomplete__"]
{
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
html[style="color-scheme: light;"] [class^="search_autocomplete__"]
{
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
[class^="search_autocomplete__"]:hover
{
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    background-color: rgb(128, 128, 128, 0.35);
}
html[style="color-scheme: dark;"] [class^="search_off_button__"]
{
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
html[style="color-scheme: light;"] [class^="search_off_button__"]
{
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
html[style="color-scheme: dark;"] [class^="search_close_button__"]
{
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
html[style="color-scheme: light;"] [class^="search_close_button__"]
{
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

/* 검색창 오른쪽 아이콘 */
a[class^="toolbar_item__"]:hover
{
    background-color: rgba(128, 128, 128, .3) !important;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
}
a[class^="toolbar_item__"]:hover span[class^="toolbar_label__"]
{
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
}
div[class^="toolbar_item__"]:hover
{
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
}
div[class^="toolbar_item__"]:hover span[class^="toolbar_label__"]
{
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
}
div[class*="toolbar_profile__"]:hover
{
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
}
div[class*="toolbar_profile__"]:hover span[class^="toolbar_label__"]
{
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
}

/* 최상단 프로필 클릭시*/
div[class^="profile_layer_container"]
{
    box-shadow: 0 1px 3px rgba(128, 128, 128, 0.3);
    background-color: rgba(128, 128, 128, .1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
div[class^="profile_layer_container"]:hover
{
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgb(128, 128, 128, 0.15);
}
a[class^="profile_layer_area__"]:hover
{
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
}
li[class^="profile_layer_item__"] button[type="button"]:hover
{
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
    text-decoration: none !important;
    color: rgba(128, 128, 128, .9) !important;
}

/* 사이드바 최상단 버튼*/
h[class^="navigator_button__"]
{
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
    text-decoration: none !important;
    color: rgba(128, 128, 128, .9) !important;
}
[class^="navigator_button__"] :hover
{
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
    text-decoration: none !important;
    color: rgba(128, 128, 128, .9) !important;
}

/* 사이드바 스트리머 큰틀*/
div[class^="navigator_header__"] h2[class="navigator_title__9RhVJ"]
{
    color: white;
}
a[class^="navigator_item__"]:hover
{
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(128, 128, 128, .3) !important;
    transition: background-color 0.3s, box-shadow 0.3s;
    border-color: rgb(128, 128, 128, 0.1);
}

/* 사이드바 확장*/
div[class*="header_is_expanded__"] div[class^="header_wrapper__"]
{
    /*
    background-color: rgba(128, 128, 128, .1);
    backdrop-filter: blur(10px);
    */
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 사이드바 - 호버시 보여지는 것*/
[class^="navigator_tooltip__"]
{
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(128, 128, 128, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
}
[class^="navigator_inner__"]
{
    background-color: rgba(128, 128, 128, .3);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(128, 128, 128, 0.3);
}
html[style="color-scheme: dark;"] div[class^="navigator_tooltip"] div[class^="navigator_inner"] span
{
    color: #FFF;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

html[style="color-scheme: light;"] div[class^="navigator_tooltip"] div[class^="navigator_inner"] span
{
    color: #000;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

    
/* 사이드바 더보기 버튼 */
button[class^="navigator_button_more__"]
{
    border-radius: 10px;
    display: flex;
    align-items: center;
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 1px 3px rgba(128, 128, 128, 0.3);
}
button[class^="navigator_button_more__"]:hover
{
    box-shadow: 0 4px 10px rgba(128, 128, 128, 0.3);
    border-color: rgb(128, 128, 128, 0.1);
    color: white;
}

/* 사용자 이름 및 스트리머 카테고리 */
html[style="color-scheme: dark;"] div[class^="navigator_information"] strong[class^="navigator_name"] span[class^="name_ellipsis__"] [class^="name_text__"]
{
    color: white;
    transition: color 0.3s;
}
html[style="color-scheme: light;"] div[class^="navigator_information"] strong[class^="navigator_name"] span[class^="name_ellipsis__"] [class^="name_text__"]
{
    color: black;
    transition: color 0.3s;
}
html[style="color-scheme: dark;"] div[class^="navigator_information"] strong[class^="navigator_name"] span[class^="name_ellipsis__"] [class^="name_text__"]:hover
{
    color: rgba(255, 255, 255, .9);
}  
html[style="color-scheme: light;"] div[class^="navigator_information"] strong[class^="navigator_name"] span[class^="name_ellipsis__"] [class^="name_text__"]:hover
{
    color: rgba(0, 0, 0, .9);
}    
html[style="color-scheme: dark;"] div[class^="navigator_information"] span[class^="navigator_category"]
{
    color: rgba(255, 255, 255, .8);
    transition: color 0.3s;
}    
html[style="color-scheme: light;"] div[class^="navigator_information"] span[class^="navigator_category"]
{
    color: rgba(0, 0, 0, .8);
    transition: color 0.3s;
}
html[style="color-scheme: dark;"] div[class^="navigator_information"] span[class^="navigator_category"]:hover
{
    color: rgba(255, 255, 255, .7);
}
html[style="color-scheme: light;"] div[class^="navigator_information"] span[class^="navigator_category"]:hover
{
    color: rgba(0, 0, 0, .7);
}
        

/* 로딩 이미지 */
div[class*="loading-indicator"]
{
    backdrop-filter: blur(10px);
    background-color: transparent;
    border-radius: 10px;
}
div[class*="loading-indicator"] svg
{
    backdrop-filter: blur(10px);
    border-radius: 10px;
}
div[class*="pzp-pc__loading-indicator"]
{
    backdrop-filter: blur(10px);
    background-color: transparent;
    border-radius: 10px;
}
div[class^="live_information_player__"]
{
        backdrop-filter: blur(10px) !important;
        border-radius: 10px !important;
        transition: border-color 0.2s, box-shadow 0.2s !important;
}


/* 알림 */
div[id^="onair_notification_section"]
{
    background-color: rgb(128, 128, 128, 0.1);
    backdrop-filter: ...
Reviews

No reviews yet.