change name - wompchat overlay attempt was made. turns out cant link obs to chrome extension web page. added greenscreen option instead. best i can do until chat bot is made. need a web page hosted that can be manipulated and can be linked into obs. some other unrelated fixes - minor bugs added escape key for popup expanded pupup window to full width of chat
223 lines
5.4 KiB
Stylus
223 lines
5.4 KiB
Stylus
@import '_chatColors.styl'
|
|
|
|
.item-offset
|
|
//height: 100%
|
|
|
|
#items
|
|
// Chat user avatar
|
|
img.yt-img-shadow
|
|
//height: inherit;
|
|
//width: inherit;
|
|
//align-content: center;
|
|
//display: initial;
|
|
//border-radius: inherit;
|
|
|
|
// Owner chat messages
|
|
.yt-live-chat-item-list-renderer[author-type="owner"]
|
|
//background: rgba(#fff, 0.1);
|
|
#content #author-name
|
|
//text-shadow: #ffd600 0px 0px 10px
|
|
|
|
// Chat user menu button (3 dot menu)
|
|
#menu #menu-button.yt-live-chat-text-message-renderer
|
|
//padding: 5px !important
|
|
//width: 28px !important
|
|
//height: 28px !important
|
|
|
|
// Chat user name
|
|
#author-name.yt-live-chat-text-message-renderer
|
|
&:after
|
|
//content: ' :'
|
|
//color: #fff
|
|
|
|
.AuthorFix
|
|
#author-photo.yt-live-chat-text-message-renderer
|
|
img.yt-img-shadow
|
|
display: inline-block
|
|
vertical-align: middle
|
|
border-radius: 50%;
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
vertical-align: sub;
|
|
#content
|
|
display: inline-block
|
|
vertical-align: middle
|
|
|
|
.showTimeStamp
|
|
#timestamp.yt-live-chat-text-message-renderer
|
|
display: inline-block
|
|
vertical-align: middle
|
|
|
|
|
|
.Emote
|
|
height: 100%;
|
|
vertical-align: bottom;
|
|
|
|
img
|
|
height: 1.75em
|
|
align-self: center
|
|
display:inline-block
|
|
vertical-align: middle !important
|
|
|
|
emote_div:hover
|
|
background-size: 100% //100%
|
|
background-color: var(--divider-color)
|
|
|
|
.hideElement
|
|
display: none !important
|
|
|
|
.alternateLineColor
|
|
yt-live-chat-text-message-renderer:nth-child(odd)
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
|
|
.setTwitchColors
|
|
text-shadow: 0 0 1px #000, 0 0 2px #000 !important
|
|
background: #18181b !important
|
|
font-family: 'Roboto' !important
|
|
font-size: 1.3rem !important
|
|
line-height: 1.5em !important
|
|
color: #FAFAFA !important
|
|
#timestamp.yt-live-chat-text-message-renderer
|
|
display: none
|
|
yt-live-chat-author-chip[is-highlighted] #author-name.owner.yt-live-chat-author-chip, #author-name.owner.yt-live-chat-author-chip
|
|
background-color: transparent
|
|
color: green
|
|
yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip
|
|
background-color: transparent
|
|
|
|
.emoteDivider
|
|
width: 20vw
|
|
border: 1px solid red;
|
|
border-radius: 5px;
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
margin-left: auto
|
|
margin-right: auto
|
|
|
|
.emotePopUpText
|
|
margin-bottom: 2%;
|
|
|
|
.popup
|
|
background-color: var(--yt-app-background)
|
|
color: var(--yt-live-chat-primary-text-color)
|
|
position: absolute;
|
|
top: 15%
|
|
left: 0
|
|
right: 0
|
|
margin-left: auto
|
|
margin-right: auto
|
|
height 70%
|
|
width: 100%
|
|
z-index: 999
|
|
text-align: center
|
|
border-radius: 5px
|
|
border: #303030 1px solid
|
|
font-size: 1em
|
|
overflow: hidden
|
|
overflow-y: scroll
|
|
padding: 1%;
|
|
padding-top: 2%;
|
|
|
|
.emoteButton
|
|
background-color:rgba(255, 255, 255, .1);
|
|
background-image: url("https://cdn.frankerfacez.com/emoticon/447885/4")
|
|
background-repeat: no-repeat
|
|
background-position: center
|
|
background-size: 80% 80%;
|
|
width: var(--yt-live-chat-32px-icon-button_-_width)
|
|
height: var(--yt-live-chat-32px-icon-button_-_height)
|
|
padding: var(--yt-live-chat-32px-icon-button_-_padding)
|
|
border-radius: 10px;
|
|
border: none
|
|
cursor: pointer
|
|
|
|
.emoteButton:hover
|
|
background-color: #4e4e4e;
|
|
|
|
.emoteButton:focus
|
|
outline:0
|
|
|
|
.body_Fix
|
|
height: 100% !important
|
|
margin: 0 !important
|
|
overflow: hidden !important
|
|
|
|
.theater_wrapper_fix
|
|
padding: 2px;
|
|
background-color: #1e1e1e;
|
|
position: fixed
|
|
z-index: 900 !important
|
|
height: 100vh !important
|
|
width: 100vw !important
|
|
|
|
.movie_player_fix
|
|
height: 100vh;
|
|
position: absolute;
|
|
width: calc(100vw - 25vw);
|
|
video
|
|
left: 0 !important
|
|
top: 0 !important
|
|
height: 100vh !important
|
|
width: calc(100vw - 25vw) !important
|
|
#html5-video-player
|
|
top: 0 !important
|
|
width: calc(100vw - 25vw) !important
|
|
.ytp-title
|
|
color: rgba(255, 255, 255, .8) !important
|
|
.ytp-title-channel
|
|
all: unset
|
|
.ytp-gradient-top
|
|
max-width: calc(100vw - 25vw) !important
|
|
.ytp-chrome-bottom
|
|
width: calc(100vw - 25vw) !important
|
|
left: 0 !important
|
|
.html5-endscreen
|
|
width: calc(100vw - 25vw) !important
|
|
.ytp-chapter-hover-container
|
|
width: calc(100vw - 25vw) !important
|
|
.ytp-gradient-bottom
|
|
width: calc(100vw - 25vw) !important
|
|
.ytp-iv-video-content
|
|
width: calc(100vw - 25vw) !important
|
|
left: 0 !important
|
|
.ytp-player-content.ytp-iv-player-content
|
|
width: calc(100vw - 25vw) !important
|
|
left: -12px !important
|
|
bottom: 10vh !important;
|
|
.ytp-upnext.ytp-player-content.ytp-upnext-autoplay-paused.ytp-suggestion-set
|
|
width: calc(100vw - 25vw) !important
|
|
left: 0 !important
|
|
.ytp-bezel-text-hide
|
|
width: calc(100vw - 25vw) !important
|
|
left: 0 !important
|
|
.ytp-spinner
|
|
left: 40% !important
|
|
.ytp-cued-thumbnail-overlay
|
|
width: calc(100vw - 25vw) !important
|
|
|
|
.info_contents_fix
|
|
z-index: 901 !important
|
|
height: 80px
|
|
top: 0
|
|
position: absolute !important
|
|
width: calc(100vw - 25vw) !important
|
|
|
|
ytd-video-primary-info-renderer
|
|
padding: 1rem
|
|
border-bottom: none
|
|
|
|
.chat_frame_fix
|
|
height: 100vh !important
|
|
width: calc(calc(100vw - 75vw) - 1px) !important;
|
|
position: absolute !important
|
|
right: 0px !important
|
|
top: 0px !important
|
|
border: 1px solid #4e4e4e
|
|
|
|
.green_sceen
|
|
background-color: #00ff00 !important
|
|
font-weight: 700 !important
|
|
-webkit-text-stroke: 1px #000000
|
|
yt-live-chat-text-message-renderer:nth-child(odd)
|
|
background-color: #00ff00 !important
|