Stylus Styles for YT Live

make Youtube like you need it…

Stylus is a browser extension for Chrome (and Opera) that allows the user to manage and create "styles" that modify the appearance of web sites. Users may download existing skins/styles from a repository, or write their own. Stylus uses CSS scripting to override the selected site's CSS.

Below is my CSS for Youtube live streams. Most of it improves the chat box.

In Stylus, name your style, click Edit, and paste the following into a Section.

/* For Youtube Live Streams, Rev. 04/09/19
   NOTE: 1080p desplay; Windows zoom: 125%; browser zoom: 150%.
   User will need to adjust some pixel settings to accomodate zoom used.
*/
html,
body,
iframe {
    /* override google font Roboto and use locally-installed unicode font; uncomment if desired */
    /* font-family: "Arial Unicode MS" !important; */
    margin: 0 !important;
    padding: 0 !important;
}
#masthead-positioner,
#masthead-container {
    /* unlock stupid fat fixed top bar so it'll scroll up */
    position: relative !important;
}
#masthead-positioner-height-offset {
    /* recover space for stupid fat fixed top bar */
    height: 0 !important;
}
#page-manager {
    margin: 0 !important;
}
#primary {
    /* recover tons of wasted white-space around video (left column) */
    margin: 0 !important;
    padding: 0 10px 0 0 !important;
}
ytd-live-chat-frame {
    /* make chat box go to bottom of screen (adjust as needed) */
    height: 500px !important;
    min-height: 500px !important;
}
yt-live-chat-header-renderer {
    /* make fat "Top Chat/Live Chat" bar skinny */
    height: 16px !important;
    padding: 0 !important;
}
yt-live-chat-text-message-renderer {
    /* reduce huge (due to 150% browser zoom) font size (adjust as desired) */
    font-size: 12px !important
}
#secondary {
    /* recover tons of wasted white-space in right column */
    padding: 3px !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-message-input-renderer {
    padding: 3px !important;
}
#clarify-box {
    display: none;
}

/* Emoji Picker Box (adjust as desired) */
yt-emoji-picker-renderer.yt-live-chat-message-input-renderer {
    min-height: 220px;
    max-height: 300px;
    margin: 0 -24px 0 -24px;
}

/* Set: Applies to: URLs starting with : https://www.youtube.com
	 Click the Add button at the end of that line, then,
   Set: Applies to: URLs starting with : https://gaming.youtube.com
   Left Column:
   Give the style a name, click Save
   Editing: after making a change, click Save, then switch to the tab
   with the YT live stream to see changes. You do not need to refresh.
*/

To learn more about using Stylus, click its icon and select Wiki.

Enjoy! --KV5R

Comments are closed.