YouTube 2010-2011 HTML5 Video Player by magma_craft

/* ==UserStyle==
@name         YouTube 2010-2011 HTML5 Video Player
@version      1.0.0
@namespace    userstyles.world/user/magma_craft
@description  Makes YouTube Player look like it did in 2010. Original credit goes to Lego Savant at greasyfork.
@author       magma_craft
@license      CC Zero
==/UserStyle== */

@-moz-document domain("youtube.com") {
    /*player*/
/*general purpose player fix*/
.ytp-exp-bigger-button-like-mobile .ytp-chrome-controls .ytp-button:not(.ytp-chapter-title), .ytp-exp-bigger-button-like-mobile .ytp-replay-button {
    max-width:40px;
    padding:0;
    line-height:40px;
    height:40px
}
.ytp-exp-bigger-button-like-mobile .ytp-progress-bar-container {
    bottom:39px
}
.ytp-exp-bigger-button-like-mobile .ytp-chrome-bottom, .ytp-embed-mobile-exp .ytp-chrome-bottom, .ytp-embed-mobile-exp.ytp-small-mode .ytp-chrome-bottom, .ytp-embed-mobile-exp .ytp-chrome-bottom .ytp-chrome-controls, .ytp-embed-mobile-exp.ytp-small-mode .ytp-chrome-bottom .ytp-chrome-controls {
    height:40px
}
/*bigmode fixes*/
.ytp-big-mode .ytp-chrome-controls .ytp-button svg {
    display:block
}
.ytp-big-mode .ytp-chrome-bottom {
    padding:0;
}
.ytp-big-mode .ytp-subtitles-button {
    top:-14px
}
.ytp-big-mode .ytp-chrome-controls .ytp-settings-button svg {
    display:none
}
.ytp-big-mode .ytp-chrome-controls .ytp-settings-button:before {
    font-size:14px;
    padding-left:5px;
    top:0;
    margin-top:-3px
}
.ytp-big-mode .ytp-fullscreen-button {
    position:relative;
    top:-7px
}
.ytp-big-mode .ytp-time-display {
    line-height:24px
}

.ytp-big-mode .ytp-volume-panel .ytp-volume-slider .ytp-volume-slider-handle {
    background-position-y:-242px
}
.ytp-big-mode .ytp-scrubber-container {
    top:0
}
/*main*/
.ytp-gradient-bottom {
    display:none
}
.ytp-big-mode .ytp-play-button:not(.ytp-play-button-playlist)::before {
    content:none
}
.ytp-chrome-bottom, .ytp-chrome-controls {
    height:30px!important
}
.ytp-progress-bar-container, .ytp-exp-bigger-button-like-mobile.ytp-small-mode .ytp-progress-bar-container {
    bottom:31px!important;
    height:18px!important
}
.html5-video-player {
    background:#000
}
.ytp-chrome-bottom {
    background: -webkit-gradient(linear,left top,left bottom,from(#d6d6d6),to(white));
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    right:0!important;
    left:0!important;
    width:100%!important;
    padding-top:0;
    border-top:1px solid #000
}
/*scrub an progress*/
.ytp-chapters-container {
    height:4px;
    margin-top:14px;
    transform:scale(1)!important;
    background: rgba(255,255,255,.5);
}
.ended-mode .ytp-chapters-container  {
    background:#c80000
}
.ytp-progress-list {
    transform:scale(1)!important;
}
.ytp-progress-bar:hover .ytp-chapters-container, .ytp-progress-bar-container.ytp-drag .ytp-chapters-container{
    height:12px;
    margin-top:6px
}

.ytp-progress-list {
    background:transparent;
    left:0px
}
.ytp-scrubber-container {
    left:0;
    top:0px
}
.ytp-right-controls {
    margin-top:1px
}
.ytp-left-controls {
    margin-top:1px
}
.ytp-progress-linear-live-buffer, .ytp-swatch-background-color {
    background:#c80000
}
.ytp-scrubber-button {
    background-position: -14px -274px!important;
    height:15px!important;
    width:16px;
    z-index:999;
    top:0;
    margin-top:4px;
    border-radius:0;
    margin-left:-2px
}
.ytp-scrubber-button:hover {
    background-position: -34px -274px!important;
}
.ytp-progress-bar-container:hover:not([aria-disabled="true"]) .ytp-scrubber-button.ytp-scrubber-button-hover, .ytp-drag .ytp-scrubber-button.ytp-scrubber-button-hover, .ytp-drag .ytp-exp-chapter-hover-effect, .ytp-progress-bar-container:hover:not([aria-disabled="true"]) .ytp-exp-chapter-hover-effect, .ytp-exp-chapter-hover-container:hover {
    transform:none
}
/*tooltip*/
.ytp-tooltip-bg{
    transform:scale(.65);
    border:1px solid #ccc
}
.ytp-tooltip.ytp-preview:not(.ytp-text-detail) {
background:transparent;
    height:70px;
    margin-top:10px
}
/*main buttons*/
 .ytp-chrome-controls .ytp-left-controls .ytp-button:not(.ytp-chapter-title),  .ytp-chrome-controls .ytp-size-button,.ytp-chrome-controls .ytp-fullscreen-button,.ytp-chrome-controls .ytp-remote-button, .ytp-exp-bigger-button-like-mobile .ytp-chrome-controls .ytp-button:not(.ytp-settings-button):not(.ytp-subtitles-button):not(.ytp-chapter-title) {
    background: -webkit-gradient(linear,left top,left bottom,from(white),color-stop(0.5,white),to(#d8d8d8));
    background-color: #f7f7f7;
    border-right: 1px solid #ccc;
    padding: 3px 0 2px 1px;
    cursor: pointer;
    width:29px;
    height:24px;
    box-sizing:content-box
}
ytd-app  .ytp-chrome-controls .ytp-left-controls .ytp-button:active,ytd-app  .ytp-chrome-controls .ytp-size-button:active,ytd-app  .ytp-chrome-controls .ytp-fullscreen-button:active,ytd-app  .ytp-chrome-controls .ytp-remote-button {
    -webkit-box-shadow: inset 1px 1px 4px #aaa;
    -moz-box-shadow: inset 1px 1px 4px #c2c2c2;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
/*time*/
.ytp-time-current, .ytp-time-separator, .ytp-time-duration {
    color:#000;
    text-shadow:none;
    font-size:11px
}
.ytp-time-display {
    line-height:28px!important
}
/*play*/

.ytp-chrome-controls .ytp-play-button svg {
    background-position:0 -24px
}
.ytp-chrome-controls .ytp-play-button:hover svg {
    background-position:-29px -24px
}
.paused-mode .ytp-chrome-controls .ytp-play-button svg {
    background-position:0 0
}
.paused-mode .ytp-chrome-controls .ytp-play-button:hover svg {
    background-position:-29px 0
}
/*dont like these*/
.ytp-next-button.ytp-button, .ytp-miniplayer-button, .ytp-button[data-tooltip-target-id="ytp-autonav-toggle-button"] {
    display:none!important
}
/*mute*/
.ytp-chrome-controls .ytp-mute-button svg {
    background-position: 0 -48px;
}
.ytp-chrome-controls .ytp-mute-button:hover svg {
    background-position: -29px -48px;
}
.ytp-chrome-controls .ytp-mute-button[aria-label="Unmute (m)"] svg{
    background-position: 0 -120px;
}
.ytp-chrome-controls .ytp-mute-button[aria-label="Unmute (m)"]:hover svg{
    background-position: -29px -120px;
}
/*volume*/
.ytp-volume-slider-active .ytp-volume-panel {
    margin-left:5px
}
.ytp-volume-panel .ytp-volume-slider .ytp-volume-slider-handle {
    background-position: -8px -244px;
    width:46.9px;
    height:30px;
    border-radius:0!Important;
    top:8px;
    margin-left:-40px
}
.ytp-volume-slider-handle:before, .ytp-volume-slider-handle:after {
    content:none
}
.ytp-volume-panel {
    background-position: -56px -241px!important;
    border-right:1px solid #ccc
}
    .ytp-chapter-title-prefix {
        display:none
    }
/*sub*/
.ytp-subtitles-button:after {
    content:none!important
}
.ytp-subtitles-button svg {
    background-position: -76px -276px!important;
    width: 17px;
    height: 12px;
    border:0;
    margin:0;
    position:static;
    display:block;
}
.ytp-subtitles-button:hover svg, .ytp-subtitles-button[aria-pressed="true"] svg {
    background-position: -54px -276px!important;
}
.ytp-subtitles-button {
    height:18px!important;
    width:27px!important;
    border:1px solid transparent;
    color: #c80000;
    border-radius: 4px;
    background:transparent;
    padding-left:4px!important;
    top:-7px;
    margin-right:3px!important
}
.ytp-subtitles-button:hover {
    background: -webkit-gradient(linear,left top,left bottom,from(white),to(#d6d6d6));
    border: 1px solid #bfbfbf;
}
/*settings*/
.ytp-settings-button {
    top:0px;
    height:29px!important;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width:36px!important
}
.ytp-settings-button svg {
    display:none
}
.ytp-settings-button:before {
    content:"SD";
    display:inline-block;
    position:absolute;
    padding:2px 4px;
    border:1px solid transparent;
    height:17px;
    width:30px;
    top:0!Important;
    color:#333;
    box-sizing:border-box;
    line-height:13px;
    margin-left:2px;
    margin-top:6px;
    padding-left:7px
}
.ytp-settings-button.ytp-hd-quality-badge:before {
    content:"HD"
}
.ytp-settings-button.ytp-hd-quality-badge:after {
    content:none
}
.ytp-settings-button:hover:before {
    border: 1px solid #bfbfbf;
    color: #c80000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: -webkit-gradient(linear,left top,left bottom,from(white),to(#d6d6d6));
}
/*theater*/
.ytp-chrome-controls .ytp-size-button svg {
    background-position: 0 -144px; 
}
.ytp-chrome-controls .ytp-size-button:hover svg {
    background-position: -29px -144px;
}
#player-theater-container .ytp-chrome-controls .ytp-size-button svg {
    background-position: 0 -168px; 
}
#player-theater-container .ytp-chrome-controls .ytp-size-button:hover svg {
    background-position: -29px -168px;
}
/*fullscreen*/
.ytp-chrome-controls .ytp-fullscreen-button svg {
    background-position: 0 -192px;
}
.ytp-chrome-controls .ytp-fullscreen-button:hover svg {
    background-position: -29px -192px;
}
.ytp-fullscreen .ytp-chrome-controls .ytp-fullscreen-button svg {
    background-position: 0 -218px;
}
.ytp-fullscreen .ytp-chrome-controls .ytp-fullscreen-button:hover svg {
    background-position: -29px -218px;
}
.ytp-big-mode .ytp-fullscreen-button{
    width:30px!important
}
/*setting menu*/
.ytp-panel-menu {
    border-radius: 6px;
    background-color: black;
    opacity: 0.9;
    padding:6px 0
}
.ytp-panel {
    min-width:0!important;
}
#ytp-id-17 {
    bottom:35px!important
}
.ytp-menuitem, .ytp-panel-header {
    height:30px!important;
    min-height:0!important;
}
.ytp-panel-header {
    padding:0
}
.ytp-menuitem-label {
    padding-left:10px!important;
    font-size:100%
}
.ytp-menuitem[role="menuitemradio"][aria-checked="true"] .ytp-menuitem-label {
    background-position:55px 5px
}
.ytp-panel-footer {
    display:none
}
.ytp-menuitem-icon {
    display:none
}
.ytp-menuitem:not([aria-disabled="true"...