Files
wompchat/src/stylus/content.styl
wompmacho 1826dce523 not happening
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
2020-11-13 05:16:24 -05:00

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