YouTube-Emoji-Reactions.css

/*
 * CSS theme for YouTube Emoji Reactions
 * This hides all elements except the floating emoji reactons.
 *
 * OBS Browser source properties
 *  - URL: https://www.youtube.com/live_chat?is_popout=1&v=dQw4w9WgXcQ (regular chat URL)
 *  - Width: 500
 *  - Height: 650
 *  - Custom CSS: this file
 *  ❌ (disable) Shutdown source when not visible
 *  ❌ (disable) Refresh browser when scene becomes active
 * 
 * Sometimes the emoji thing doesn't load in (problem with YouTube), so I've made it display a bright purple screen saying
 * "Refresh the source until it works 🙃" to make it obvious what to do.
 * With 'Shutdown source when not visible' and 'Refresh browser when scene becomes active' disabled, you only have get it to load once
 * and it should stay loaded even if switching scenes.
 *
 * Copyright (c) Susko3 <susko3@protonmail.com>. Licensed under the MIT Licence.
 * See the LICENCE file in the repository root for full licence text.
 */


/*
 * Hide the permanent ❤️ emoji button
 */

#fab-container {
  display: none;
}


/*
 * Zoom the page to the bottom right corner to make the reactions more visible
 */

body {
    transform: scale(2.2); /* increase the scale if needed */
    transform-origin: bottom right;
}


/*
 * Make the screen purple if the emojis aren't working (refresh until it works!)
 */

#reaction-control-panel-overlay:empty {
  background-color: purple;
}

#reaction-control-panel-overlay:empty::before {
  content: "Refresh the source until it works 🙃";
  font-size: 28px;
  width: 23%;
  padding-bottom: 20px;
}


/*
 * Add padding to the continer so the emoji don't go out-of-bounds on the right
 */

#reaction-control-panel-overlay {
	padding-right: 13%; 
}


/*
 * Hide unwanted chat elements
 */

#header,
yt-live-chat-banner-renderer,
yt-live-chat-header-renderer,
#live-chat-banner,
yt-live-chat-banner-manager,
#docked-messages,
yt-live-chat-docked-message,
yt-live-chat-action-panel-renderer,
iron-pages,
#item-offset,
#menu,
#separator {
  display: none;
}


/*
 * Hide the gradient at the bottom when a pool is active
 */

#action-panel {
  display: none !important;
}


/*
 * 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
 */

yt-live-chat-renderer {
  background: transparent;
}