YouTube Livestreams Theater Mode ---css fix for反向修正擴充的CSS
当前为
/* ==UserStyle==
@name YT Theater Chat
@namespace 1
@homepageURL https://greasyfork.org/zh-TW/users/4839
@version 1.2.1
@description YouTube Livestreams Theater Mode ---css fix for反向修正擴充的CSS
@author Leadra
@license MIT
@preprocessor stylus
@var range text_pr "聊天行距" [-2, -10, 10, 1, "px"]
@var checkbox theater_chat '劇場模式chat邊界' 1
@var checkbox user_pic '劇場模式大頭貼顯示' 1
@var checkbox input_set 'input打字區調整' 0
@var checkbox emphasize_moderator '版主強調' 0
@var checkbox hide_user_name 'name非表示' 0
@var checkbox hide_reaction '愛心❤❤❤非表示' 0
@var select milestone_chat "會員免費留言框" {
"all:預設 *": "all",
"plain:簡約": "plain",
"normal_chat:同chat": "normal_chat"
}
@var select display_chat "chat分類" {
"all:全て表示 *": "all",
"only_member:僅會員": "only_member",
"only_moderator:僅版主": "only_moderator"
}
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/live_chat") {
/* --------------------------------------------------------------- */
/*YouTube Livestreams Theater Mode 邊界調整*/
if theater_chat {
[data-ytlstm-theater-mode] yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer {
margin: -0px -0px -0px -10px ;
}
/*
#items {
padding: 0px 0px 0px -0px !important;
margin: -0px -0px -0px -0px !important;
}*/
/*聊天行距*/
#items > * {padding: 0px 0px 0px 10px !important;margin: text_pr -0px text_pr -10px !important;}
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer .yt-live-chat-text-message-renderer{
margin: text_pr -0px text_pr -0px ;
}
/*相容tabview後規則失效-使用上面的items全面更改
[data-ytlstm-theater-mode] yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer
#chat #items .yt-live-chat-text-message-renderer {padding: 0px 0px 0px 0px;margin: 0px 0px -0px -0px ;}*/
[data-ytlstm-theater-mode] yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer
#message.yt-live-chat-text-message-renderer {
padding: 0px 0px 0px 0px;
margin: 10px 0px -0px -0px ;}
[data-ytlstm-chat-over-video] yt-live-chat-text-message-renderer #content {
padding: 0px;
margin: 0px 0px -0px -0px ;
border-radius: 10px;
}
/* 大頭貼profile picture */
//#avatar.yt-live-chat-message-input-renderer,
//#avatar.yt-live-chat-message-input-renderer > img,
#author-photo.yt-live-chat-text-message-renderer,
#author-photo.yt-live-chat-text-message-renderer > img {
margin: 0px;
/*強制顯示大頭貼*/
if user_pic {display: block!important;}
}
/*chat聊天室框架恢復原設定*/
html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-message-input-renderer,
[data-ytlstm-chat-over-video] yt-live-chat-banner-manager,
[data-ytlstm-chat-over-video] yt-live-chat-restricted-participation-renderer,
html:not(:hover)[data-ytlstm-chat-over-video] #contents #ticker,
html:not(:hover)[data-ytlstm-chat-over-video] #contents #separator ,
html:hover[data-ytlstm-chat-over-video] #contents #ticker,
html:hover[data-ytlstm-chat-over-video] #contents #separator ,
html:hover[data-ytlstm-chat-over-video] yt-live-chat-message-input-renderer,
//html:hover[data-ytlstm-chat-over-video] yt-live-chat-header-renderer,
//html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-header-renderer,
{
display: block!important;
margin: -0px;
}
html:hover[data-ytlstm-chat-over-video] yt-live-chat-header-renderer{display: block;}//position: absolute;z-index:1;
html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-header-renderer{display: none;}
html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-ticker-renderer{display: none!important;}
html:hover[data-ytlstm-chat-over-video] yt-live-chat-ticker-renderer{display: block!important;}
/*chatheader聊天頂部欄位調整*/
yt-live-chat-header-renderer {
margin:-15px 0px -15px 0px!important;
padding: unset;
}
yt-dropdown-menu.yt-sort-filter-sub-menu-renderer {
margin: 10px 0px 0px 0px;
}
}
if input_set{
/*input頭像*/
//#avatar.yt-live-chat-message-input-renderer {margin:0px 0px -0px 0px !important;visibility:hidden!important;display:block;}
/* input打字輸入區 */
yt-live-chat-message-input-renderer {
padding: 0px 0px 0px 0px!important;
margin:0px 0px 0px -0px!important;
//overflow: unset;//隱藏元素不消除佔位
}
/*input總區塊*/
#input-panel.yt-live-chat-renderer.iron-selected {
background-color:rgba(0, 0, 0,0.1);
}
}
/*
yt-live-chat-message-input-renderer ,yt-live-chat-renderer.iron-selected #input #input-container{
display: unset!important;
padding: 0px 0px 0px 0px!important;
margin: 0px 0px -0px -0px!important ;
}*/
/* モデレータを強調 */
if emphasize_moderator {
/* モデレータのチャット背景に色をつける */
yt-live-chat-text-message-renderer[author-type="moderator"] {
padding: 2px 12px;
background: #debabe;
& > #content > span#message {
color: #222;
}
}
/* 上部に固定されたモデレータのチャット */
#contents > yt-live-chat-text-message-renderer[author-type="moderator"] > #content > span#message {
/* 上部固定をすると見た目が変わるため、各種スタイルを打ち消す必要がある */
color: #f5f5f5;
}
}
/* ユーザー名を非表示 */
if hide_user_name {
yt-live-chat-text-message-renderer > #content > yt-live-chat-author-chip > #author-name {
display: none;
}
}
/* リアクションを非表示 */
if hide_reaction {
#chat > #reaction-control-panel-overlay.yt-live-chat-renderer {
display: none;
}
}
/* マイルストーンチャットを目立たなくする */
if (milestone_chat == plain || milestone_chat == normal_chat) {
yt-live-chat-membership-item-renderer[has-primary-header-text] {
padding: 2px 12px;
& > #card {
position: relative;
align-items: center;
/* 横並びにする */
display: flex;
flex-direction: row;
box-shadow: none;
/* 上部 */
& > #header {
position: static;
width: 142px;
padding: 0;
background-color: transparent;
& > yt-img-shadow,
& > yt-img-shadow img{
height: 24px !important;
width: 24px !important;
margin-right: 6px;
}
/* ユーザー情報 */
#header-content > #header-content-primary-column {
display: flex;
flex-direction: column;
#header-content-inner-column {
display: flex;
flex-direction: column;
/* 名前＆メンバーバッジ */
& > yt-live-chat-author-chip {
overflow: hidden;
align-items: center;
& > #author-name {
width: 90px;
max-height: 3em;
line-height: 1em;
word-break: break-all;
font-size: 11px;
color: rgb(43, 166, 64);
}
& > #chat-badges {
margin-left: 2px;
}
}
/* メンバー歴 */
& > #header-primary-text {
font-size: 10px;
color: var(--yt-live-chat-primary-text-color,var(--yt-spec-text-primary));
}
/* メンバー歴：非表示 */
if (milestone_chat == normal_chat) {
& > #header-primary-text {
display: none;
}
}
}
/* メンバーシップ名 */
#header-subtext {
margin: 0;
word-break: break-all;
font-size: 10px !important;
color: var(--yt-live-chat-primary-text-color,var(--yt-spec-text-primary));
}
/* メンバーシップ名：非表示 */
if (milestone_chat == normal_chat) {
#header-subtext {
display: none;
}
}
}
/* メニュー */
& > #menu {
position: absolute;
right: 0;
top: 0;
}
}
/* 下部 */
& > #content {
width: calc(100% - 142px);
margin-left: 2px;
padding: 0;
background-color: transparent;
color: var(--yt-live-chat-primary-text-color,var(--yt-spec-text-primary));
font-size: 13px;
line-height: 16px;
}
}
}
}
/* 特定のチャットのみ表示 */
if (display_chat == only_member) {
/* メンバーのみ */
yt-live-chat-text-message-renderer[author-type=""] {
display: none;
}
} else if (display_chat == only_moderator) {
/* モデレータのみ */
yt-live-chat-text-message-renderer:not([author-type="moderator"]) {
display: none;
}
/* スパチャ＆メンバーシップ加入のメッセージを非表示 */
yt-live-chat-paid-message-renderer,
yt-live-chat-membership-item-renderer{
display: none;
}
}
}