uh
YT Player Classicifierv2 by coffeemccoffeeeeeee
Details
Authorcoffeemccoffeeeeeee
LicenseNo License
Categoryyou
Created
Updated
Size28 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name YT Player Classicifierv2
@namespace https://github.com/YukisCoffee
@version 1.1.4
@description Return the old scales of the YouTube player.
@author Taniko Yamamoto <kirasicecreamm@gmail.com>
@author Aubrey Pankow <aubyomori@gmail.com>
@preprocessor less
@var checkbox smallerLike2019 "Use pre-2020 scaling (even smaller)" 0
@var select menuType "Menu type" ["2015", "2019", "Current*"]
@var checkbox noMenuIcons "Disable menu icons" 0
@var checkbox noHeatmap "Disable 'Most replayed' graph" 0
@var checkbox oldEmbedHead "Disable profile picture on embed" 0
@var checkbox oldStoryboard "Old storyboard when scrubbing through video" 0
@var checkbox chromeOnHover "Only show player UI on hover" 0
@var checkbox lighterGradient "Less intense gradient" 0
==/UserStyle== */
@-moz-document domain("www.youtube.com"), domain("youtube-nocookie.com"), domain("youtube.googleapis.com"), domain("www.localhost:8552/") {
// Define common player scale definitions depending on user
// scale preference.
.player-scale() when (@smallerLike2019 = 0)
{
@chrome-bottom-scale: 40px;
@chrome-button-width: 40px;
@chrome-progress-bar-position: 39px;
@chrome-text-line-height: 39px;
}
.player-scale() when (@smallerLike2019 = 1)
{
@chrome-bottom-scale: 36px;
@chrome-button-width: 36px;
@chrome-progress-bar-position: 35px;
@chrome-text-line-height: 35px;
}
// Apply styles across the entire ytp namespace
// (Also apply over the ytp-embed class in order to
// not affect users using that)
// only change ytp-embed when it's not big mode as ytp-embed
// overrides the ytp-big-mode code included in www-player.css
.ytp-, .ytp-embed:not(.ytp-big-mode) .ytp-
{
&popup
{
outline: 0 !important;
}
&chrome-bottom
{
.player-scale();
height: @chrome-bottom-scale;
}
&progress-bar-container
{
.player-scale();
bottom: @chrome-progress-bar-position;
}
&chrome-controls
{
.player-scale();
height: @chrome-bottom-scale;
line-height: @chrome-bottom-scale;
& .ytp-button, & .ytp-replay-button
{
width: @chrome-button-width;
padding: 0;
// Width override affects chapter menus, so
// undo these changes manually
&.ytp-chapter-title
{
width: 100%;
}
// Also apply these overrides to specially
// padded buttons
&.ytp-mute-button,
&.ytp-next-button,
&.ytp-miniplayer-button,
&.ytp-remote-button
{
padding: 0;
}
// Correct the pressed state after to not be
// positioned incorrectly
&[aria-pressed="true"]::after
{
// Larger player scale definitions:
&
{
height: 2px;
border-radius: 2px;
left: 10px;
width: 20px;
bottom: 8px;
}
// 2019 player scale definitions
& when (@smallerLike2019 = 1)
{
width: 18px;
left: 9px;
bottom: 6px;
height: 2px;
border-radius: 2px;
}
}
}
& .ytp-youtube-button
{
width: 67px;
}
// Play button should have its own overrides
// as it is slightly wider than the rest of the
// control buttons.
& .ytp-play-button
{
width: 46px;
}
}
// Rescale line heights of the player text displays
&time-display, &chapter-container
{
.player-scale();
line-height: @chrome-text-line-height;
}
&player-content
{
bottom: 53px;
&:not(.ytp-upnext):not(.html5-endscreen)
{
top: 60px;
}
}
// 2019 player scale had a smaller gradient as well.
// Therefore, shrink its size when using the setting.
&gradient-bottom when (@smallerLike2019 = 1)
{
height: 49px;
padding-top: 49px;
}
&settings-menu when (@smallerLike2019 = 0)
{
bottom: 53px;
}
// Settings menu should be positioned a little lower for the
// 2019 player scale.
&settings-menu when (@smallerLike2019 = 1)
{
bottom: 49px;
right: 12px;
}
// Tooltips for 2019 player scale
// Lil hacky, but there's only one way to reposition
// them since they are positioned in JS
&tooltip.ytp-bottom when (@smallerLike2019 = 1)
{
margin-top: 12px;
}
// Comfy feeling autoplay toggle in 2019 player scale
// An equally hacky mess but idc it works for now!
&autonav-toggle-button when (@smallerLike2019 = 1)
{
transform: scale(0.9251237);
top: 11px;
}
// Misc styles
&skip-intro-button
{
bottom: 50px;
height: 40px;
}
&webgl-spherical-control
{
top: 60px;
}
&title-text
{
padding-top: 21px;
}
}
// Correct caption scalings
.caption-window.ytp-caption-window-bottom
{
&.ytp-caption-window-bottom
{
& when (@smallerLike2019 = 0)
{
margin-bottom: 53px;
}
& when (@smallerLike2019 = 1)
{
margin-bottom: 49px;
}
}
& svg, & .ytp-icon
{
width: 40px;
height: 40px;
}
}
// 2019 menu scale definitions
:root when (@menuType = 2019)
{
.ytp-
{
&settings-menu
{
right: 12px;
bottom: 49px;
}
&popup
{
border-radius: 2px;
}
&panel
{
min-width: 0 !important;
&-menu
{
padding: 6px 0;
width: 100%;
}
&-header
{
padding: 6px 0;
height: 33px;
font-size: 109%;
}
}
&menuitem
{
height: 33px;
&-label
{
font-size: 118%;
font-weight: 500;
&, .ytp-menuitem-content
{
padding: 0 15px;
}
}
}
&panel-header
{
height: 33px;
}
&big-mode .ytp-
{
&menuitem
{
height: 49px;
&-label
{
padding: 0 22px;
}
}
&panel-
{
&header
{
height: 49px;
}
&title
{
padding: 0 15px;
}
}
&settings-menu
{
right: 24px;
bottom: 70px;
}
}
}
}
// Disable menu icons definitions
:root when (@noMenuIcons = 1)
{
.ytp-
{
&menuitem-icon
{
display: none !important;
}
&menuitem-label when (@menuType = Current)
{
padding-left: 20px;
}
&big-mode .ytp-menuitem-label when (@menuType = Current)
{
padding-left: 22px;
}
}
}
:root when (@oldEmbedHead = 1)
{
.ytp-
{
&title-
{
&channel
{
display: none;
}
&text
{
padding-left: 4px;
padding-top: 12px !important;
}
}
&watch-later-,
&share-
{
&title
{
display: none;
}
&button
{
margin...