youtube-live-qa.css

/*
 * CSS theme for YouTube Live Q&A
 *
 * Copyright (c) Susko3 <susko3@protonmail.com>. Licensed under the MIT Licence.
 * See the LICENCE file in the repository root for full licence text.
 */


/*
 * Add shadow to text to make it stand out against the background
 */

* {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0px 2px 0 #000, 0px -2px 0 #000, -2px 0px 0 #000, 2px 0px 0 #000, 1px 2px 0 #000, -1px 2px 0 #000, 1px -2px 0 #000, -1px -2px 0 #000, 2px 1px 0 #000, -2px 1px 0 #000, 2px -1px 0 #000, -2px -1px 0 #000;
}

/* Add some spacing for the shadow */
yt-formatted-string {
  padding-left: 3px;
  padding-right: 3px;
}


/*
 * Customise the text of the username on the creator prompt and viewer question
 */

#question-label,
#author-name,
#separator-collapsed,
#feature-label {
  font-family: "Roboto", "Noto", sans-serif !important;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px !important;  /* original: 12px */
  line-height: 40px !important;  /* original: 20px */
}


/*
 * Customise the text of the creator prompt and viewer question
 */

#question-text,
#call-for-questions-text {
  font-family: "Roboto", "Noto", sans-serif !important;
  color: #FFFFFF;
  font-size: 28px !important;  /* original: 14px */
  line-height: 40px !important;  /* original: 20px */
}


/*
 * Customise the question mark icon, shown when displaying viewer question
 */

#question-icon {
  transform: scale(1.3);
  color: #FFFFFF;
  stroke: black;
  stroke-width: 0.4px;
}


/*
 * Customise the border
 */

yt-live-chat-banner-renderer {
  border-radius: 8px;  /* original: 4px */
  border-width: 2px;  /* original: 1px */
}


/*
 * Customise background color
 */

yt-live-interactivity-component-background {
  background: #203F6F;
}

/* hide the default blue SVG background */
svg.yt-live-interactivity-component-background {
  display: none;
}


/*
 * Always display expanded "call for questions" banner (and hide the collapsed state)
 */

#ask-question,
#main-content {
  display: flex !important;
}

#author-name,
#separator-collapsed {
  display: inline !important;
}

#separator-extended,  /* this name seems to be reversed, extended<->collapsed */
#collapsed-call-for-questions-text {
  display: none !important;
}


/*
 * Always display expanded "viewer questions" banner (and hide the collapsed state)
 */

#question-label {
  display: block !important;
}

#collapsed-question-text {
  display: none !important;
}


/*
 * Disable animation between expanded and collapsed state
 */

yt-live-chat-call-for-questions-renderer[in-collapsed-banner],
yt-live-chat-creator-answers-questions-banner-renderer[in-collapsed-banner] {
  margin: 0 -8px -8px 0;
}

#contents.yt-live-chat-banner-renderer {
  padding-bottom: 4px !important;
}


/*
 * Hide unwanted chat elements
 */

/* hide every banned that is not the Q&A banner, eg. pinned message */
yt-live-chat-banner-renderer:not([is-call-for-questions]):not([is-creator-answers-questions-banner]),
yt-live-chat-header-renderer,
iron-pages,
#item-offset,
#menu,
#separator {
  display: none;
}


/*
 * Hide scrollbar
 */

yt-live-chat-item-list-renderer[allow-scroll] #item-scroller.yt-live-chat-item-list-renderer {
  overflow: hidden;
}

#item-scroller.yt-live-chat-item-list-renderer {
  --scrollbar-width: 0px;
}


/*
 * Make the chat background transparent and remove the drop shadow
 */

yt-live-chat-renderer,
yt-live-chat-banner-manager.yt-live-chat-item-list-renderer {
  background: transparent;
}