Skip to content

Commit

Permalink
still needs some work when i get back -- saving this for now (v1.4.1)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ktg5
ktg5 committed Oct 18, 2023
1 parent 8b29c04 commit 4e3e5e9
Show file tree
Hide file tree
Showing 8 changed files with 192 additions and 57 deletions.
37 changes: 31 additions & 6 deletions css/2010.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,6 @@
transform: scale(1) !important;
}

.ytp-autohide .ytp-chapter-hover-container {
width: calc(100% - 24px) !important;
}

.ytp-progress-bar-container:hover:not([aria-disabled=true]) .ytp-exp-chapter-hover-effect {
transform: scaleY(1) !important;
}
Expand All @@ -57,6 +53,10 @@
right: 0;
}

.ytp-big-mode .ytp-chrome-bottom .ytp-progress-bar:after {
width: 48px
}

.ytp-chrome-bottom .ytp-progress-bar .ytp-load-progress {
background: var(--alt-colour)
}
Expand Down Expand Up @@ -424,8 +424,33 @@
display: none;
}

.ytp-chrome-top {
display: none !important;
/* Disable all of these for 2010 */
.ytp-playlist-menu-button.ytp-button,
.ytp-title-channel,
.ytp-title,
.ytp-watch-later-button.ytp-button,
.ytp-button.ytp-copylink-button,
.ytp-button.ytp-overflow-button
{
display: none !important;
}

.ytp-button.ytp-share-button {
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: 2px -524px;
background-size: 220px;
width: 40px !important;
height: 40px !important;
}

.ytp-button.ytp-cards-button {
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: 5px -512px;
transition: .5s !important;
background-size: 200px;
width: 40px !important;
height: 40px !important;
bottom: 0px;
}

/* ################################# */
Expand Down
28 changes: 14 additions & 14 deletions css/2012.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@

.ytp-chrome-bottom {
bottom: 0;
transition: bottom .5s cubic-bezier(0.0,0.0,0.2,1) !important;
transition: all .5s cubic-bezier(0.0,0.0,0.2,1) !important;
}

.ytp-autohide:not(.ytp-watch-controls) .ytp-chrome-bottom, .ytp-chrome-bottom[aria-hidden=true] {
Expand Down Expand Up @@ -164,13 +164,13 @@
}

.ytp-bezel[aria-label="Pause"] {
background: url('https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/big-pause.png');
background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/big-pause.png');
background-size: cover;
border-radius: 0;
}

.ytp-bezel[aria-label="Play"] {
background: url('https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/big-play.png');
background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/big-play.png');
background-size: cover;
border-radius: 0;
}
Expand All @@ -180,7 +180,7 @@
/* SCRUBBER */

.ytp-scrubber-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2012-scrubber.png) !important;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2012-scrubber.png) !important;
background-position: 0px 0px !important;
background-size: 18px !important;
height: 18px !important;
Expand All @@ -190,7 +190,7 @@
}

.ytp-scrubber-button:hover {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2012-scrubber-hover.png) !important;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2012-scrubber-hover.png) !important;
background-position: 0px 0px !important;
background-size: 18px !important;
height: 18px !important;
Expand Down Expand Up @@ -295,7 +295,7 @@
/* PLAY BUTTON */

.ytp-button.ytp-play-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2012-icons.png);
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2012-icons.png);
background-position: -74px 153.5px;
background-size: 210px;
width: 65px !important;
Expand All @@ -318,7 +318,7 @@
/* VOLUME BUTTON */

.ytp-button.ytp-mute-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2012-icons.png);
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2012-icons.png);
background-position: -175px -296px;
background-size: 210px;
width: 40px !important;
Expand Down Expand Up @@ -452,7 +452,7 @@
/* SUBTITLES BUTTON */

.ytp-subtitles-button.ytp-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2012-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2012-icons.png) no-repeat;
background-position: -65px -220px;
background-size: 200px;
bottom: 5px;
Expand Down Expand Up @@ -481,7 +481,7 @@
/* SETTINGS BUTTON */

.ytp-button.ytp-settings-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2012-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2012-icons.png) no-repeat;
background-position: -164px -132px;
background-size: 200px;
bottom: 5px;
Expand All @@ -505,7 +505,7 @@
/* THEATER BUTTON */

.ytp-button.ytp-size-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2012-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2012-icons.png) no-repeat;
background-position: -58px -133.5px;
background-size: 200px;
bottom: 5px;
Expand Down Expand Up @@ -533,7 +533,7 @@
/* FULLSCREEN BUTTON */

.ytp-button.ytp-fullscreen-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2012-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2012-icons.png) no-repeat;
background-position: -93px -133.5px;
background-size: 200px;
bottom: 5px;
Expand All @@ -550,7 +550,7 @@
/* WATCH LATER (moved from chrome-top) */

.ytp-button.ytp-watch-later-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2012-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2012-icons.png) no-repeat;
background-position: 3px -280px;
background-size: 200px;
display: inline-block;
Expand Down Expand Up @@ -604,7 +604,7 @@
}

.ytp-button.ytp-share-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: 2px -524px;
transition: .5s !important;
background-size: 220px;
Expand All @@ -613,7 +613,7 @@
}

.ytp-button.ytp-cards-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: 5px -512px;
transition: .5s !important;
background-size: 200px;
Expand Down
34 changes: 17 additions & 17 deletions css/2015.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@

.ytp-chrome-bottom {
bottom: 0;
transition: bottom .5s cubic-bezier(0.0,0.0,0.2,1) !important;
transition: all .5s cubic-bezier(0.0,0.0,0.2,1) !important;
}

.ytp-autohide:not(.ytp-watch-controls) .ytp-chrome-bottom, .ytp-chrome-bottom[aria-hidden=true] {
Expand Down Expand Up @@ -160,13 +160,13 @@
}

.ytp-bezel[aria-label="Pause"] {
background: url('https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/big-pause.png');
background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/big-pause.png');
background-size: cover;
border-radius: 0;
}

.ytp-bezel[aria-label="Play"] {
background: url('https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/big-play.png');
background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/big-play.png');
background-size: cover;
border-radius: 0;
}
Expand All @@ -176,7 +176,7 @@
/* SCRUBBER */

.ytp-scrubber-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-scrubber.png) !important;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-scrubber.png) !important;
background-position: 0px 0px !important;
background-size: 18px !important;
height: 18px !important;
Expand All @@ -186,7 +186,7 @@
}

.ytp-scrubber-button:hover {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-scrubber-hover.png) !important;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-scrubber-hover.png) !important;
background-position: 0px 0px !important;
background-size: 18px !important;
height: 18px !important;
Expand Down Expand Up @@ -281,15 +281,15 @@
/* PREV BUTTON */

.ytp-button.ytp-prev-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: 4px -1px;
background-size: 200px;
}

/* PLAY BUTTON */

.ytp-button.ytp-play-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: -50px -1330px;
background-size: 200px;
width: 55px !important;
Expand All @@ -302,7 +302,7 @@
/* NEXT BUTTON */

.ytp-button.ytp-next-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: 4px -1216px;
background-size: 200px;
width: 45px !important;
Expand All @@ -311,7 +311,7 @@
/* VOLUME BUTTON */

.ytp-button.ytp-mute-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: -113px -154.5px;
background-size: 200px;
width: 45px !important;
Expand Down Expand Up @@ -443,7 +443,7 @@
/* SUBTITLES BUTTON */

.ytp-subtitles-button.ytp-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: -113px -998px;
background-size: 200px;
bottom: 5px;
Expand All @@ -464,7 +464,7 @@
/* SETTINGS BUTTON */

.ytp-button.ytp-settings-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: -155px -522px;
background-size: 200px;
bottom: 5px;
Expand All @@ -488,7 +488,7 @@
/* THEATER BUTTON */

.ytp-button.ytp-size-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: -156px -484px;
background-size: 200px;
bottom: 5px;
Expand All @@ -509,7 +509,7 @@
/* WATCH ON YOUTUBE BUTTON (usually displayed on embed videos) */

.ytp-button.ytp-youtube-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: -120px -268px;
position: sticky !important;
width: 55px !important;
Expand All @@ -520,7 +520,7 @@
/* FULLSCREEN BUTTON */

.ytp-button.ytp-fullscreen-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: -114px -523px;
background-size: 200px;
bottom: 5px;
Expand All @@ -533,7 +533,7 @@
/* WATCH LATER (moved from chrome-top) */

.ytp-button.ytp-watch-later-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: -53px -1099px;
background-size: 200px;
display: inline-block;
Expand Down Expand Up @@ -587,7 +587,7 @@
}

.ytp-button.ytp-share-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: 2px -524px;
transition: .5s !important;
background-size: 220px;
Expand All @@ -596,7 +596,7 @@
}

.ytp-button.ytp-cards-button {
background: url(https://raw.githubusercontent.com/ktg5/YT-HTML5-Player/main/img/2015-icons.png) no-repeat;
background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2015-icons.png) no-repeat;
background-position: 5px -512px;
transition: .5s !important;
background-size: 200px;
Expand Down
Loading

0 comments on commit 4e3e5e9

Please sign in to comment.