fixe stuff & adde stuff lol

no "d" key gaming * heat map toggle is set to false by default now * custom theme stuff * 3rd-party fixes * rounded corners? get them outta here!
ktg5 · Oct 10, 2023 · 8b29c04 · 8b29c04
1 parent 5b11a91
commit 8b29c04
Show file tree

Hide file tree

Showing 11 changed files with 543 additions and 912 deletions.
diff --git a/css/2010-dark.css b/css/2010-dark.css
diff --git a/css/2010-white.css b/css/2010-white.css
@@ -0,0 +1,234 @@
+/* PLAYER BASE */
+
+:root {
+	--background: linear-gradient(rgb(200, 200, 200), rgb(255, 255, 255));
+    --background-top: #f7f7f7;
+    --main-colour: rgba(255, 0, 0, 0.4);
+    --alt-colour: rgb(255 0 0 / 25%);
+    --volume-slider: #c03335;
+    --progress-bar-bg: rgb(255 255 255 / 50%);
+    --progress-bar-outline: #5a5a5a63;
+    --progress-text: #3a3a3a;
+	--alt-progress-text: #3a3a3a;
+    --button-gradient: linear-gradient(rgb(255, 255, 255), rgb(192 192 192));
+    --settings-bg: rgb(255, 255, 255);
+}
+
+/* ################################# */
+
+/* "BEZEL" ICONS */
+
+.ytp-bezel[aria-label="Pause"] {
+    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/PlayerTube/main/img/big-play.png');
+    background-size: cover;
+    border-radius: 0;
+}
+
+/* ################################# */
+
+/* SCRUBBER */
+
+.ytp-scrubber-button {
+    background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010-scrubber.png) no-repeat !important;
+    background-position: 0px 0px !important;
+    background-size: 18px !important;
+    height: 18px !important;
+    width: 18px !important;
+    top: -2px;
+    transition: .5s !important;
+    position: relative;
+    transform: scale(1) !important;
+}
+
+.ytp-scrubber-button:hover {
+	background: url(https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010-scrubber-hover.png) !important;
+	background-position: 0px 0px !important;
+    background-size: 16px !important;
+    height: 16px !important;
+    width: 16px !important;
+    top: 0;
+}
+
+/* ################################# */
+
+/* BUTTONS BASE */
+
+.ytp-chrome-bottom .ytp-button {
+    position: sticky !important;
+    height: 33px !important;
+    width: 40px !important;
+    bottom: 9px;
+    border: solid 1px lightgray;
+    background: var(--button-gradient) !important;
+}
+
+/* ################################# */
+
+/* PLAY BUTTON */
+
+.ytp-button.ytp-play-button svg {
+	background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/pause.png') no-repeat center;
+    background-size: 15px;
+}
+
+.ytp-button.ytp-play-button:hover svg {
+    background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/play-hover.png') no-repeat center;
+    background-size: 15px;
+}
+
+.ytp-button.ytp-play-button[data-title-no-tooltip="Play"] svg {
+	background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/play.png') no-repeat center;
+	background-size: 15px;
+}
+
+.ytp-button.ytp-play-button[data-title-no-tooltip="Play"]:hover svg {
+	background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/pause-hover.png') no-repeat center;
+	background-size: 15px;
+}
+
+/* VOLUME BUTTON */
+
+.ytp-button.ytp-mute-button svg {
+	background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/volume.png') no-repeat center;
+	background-size: 34px;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.ytp-button.ytp-mute-button:hover svg {
+	background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/volume-mute-hover.png') no-repeat center;
+    background-size: 34px;
+}
+
+.ytp-button.ytp-mute-button[title="Unmute (m)"] svg {
+	background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/volume-mute.png') no-repeat center;
+    background-size: 34px;
+}
+
+.ytp-button.ytp-mute-button[data-title-no-tooltip="Unmute"]:hover svg {
+	background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/volume-hover.png') no-repeat center;
+    background-size: 34px;
+}
+
+/* ################################# */
+
+/* RIGHT BUTTONS */
+/* SUBTITLES BUTTON */
+
+.ytp-subtitles-button.ytp-button svg {
+    background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/captions-off.png') no-repeat center;
+    background-size: 24px;
+}
+
+.ytp-subtitles-button.ytp-button:hover svg {
+    background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/captions-on.png') no-repeat center;
+    background-size: 24px;
+}
+
+.ytp-subtitles-button.ytp-button[aria-pressed=true] svg {
+    background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/captions-on.png') no-repeat center;
+    background-size: 24px;
+}
+
+/* SETTINGS BUTTON */
+
+.ytp-button.ytp-settings-button svg {
+	background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2012-icons.png') no-repeat;
+    background-position: -164px -132px;
+    background-size: 200px;
+    bottom: 5px;
+    transform: rotate(0) !important;
+}
+
+.ytp-button.ytp-settings-button:hover svg, .ytp-button.ytp-settings-button[aria-expanded="true"] svg {
+    filter: brightness(1.5);
+}
+
+.ytp-settings-button.ytp-hd-quality-badge:after {
+	background-color: #b91f1f !important;
+	top: 4px !important;
+}
+
+/* THEATER BUTTON */
+
+.ytp-button.ytp-size-button svg {
+    background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/theater-mode.png') no-repeat center;
+	background-size: 20px;
+}
+
+.ytp-button.ytp-size-button:hover svg {
+    background: Url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/un-theater-mode-hover.png') no-repeat center;
+	background-size: 20px;
+}
+
+.ytp-button.ytp-size-button[title="Default view (t)"] svg {
+    background: Url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/un-theater-mode.png') no-repeat center;
+	background-size: 20px;
+}
+
+.ytp-button.ytp-size-button[aria-label="Default view keyboard shortcut t"]:hover svg {
+    background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/theater-mode-hover.png') no-repeat center;
+	background-size: 20px;
+}
+
+/* FULLSCREEN BUTTON */
+
+.ytp-button.ytp-fullscreen-button svg {
+	background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/fullscreen.png') no-repeat center;
+    background-size: 24px;
+}
+
+.ytp-button.ytp-fullscreen-button:hover svg {
+    background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/fullscreen-hover.png') no-repeat center;
+    background-size: 24px;
+}
+
+.ytp-button.ytp-fullscreen-button[data-title-no-tooltip="Exit full screen"] svg {
+	background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/un-fullscreen.png') no-repeat center;
+    background-size: 24px;
+}
+
+.ytp-button.ytp-fullscreen-button[data-title-no-tooltip="Exit full screen"]:hover svg {
+    background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/un-fullscreen-hover.png') no-repeat center;
+    background-size: 24px;
+}
+
+/* DISPLAY NONE OF THESE */
+
+.ytp-fullerscreen-edu-button,
+.ytp-multicam-button,
+.ytp-multicam-button,
+.ytp-miniplayer-button,
+.ytp-remote-button {
+	display: none !important;
+}
+
+/* ################################# */
+
+/* SETTINGS MENU */
+
+.ytp-menuitem .ytp-menuitem-label,
+.ytp-menuitem .ytp-menuitem-content,
+.ytp-panel .ytp-panel-footer,
+.ytp-panel .ytp-panel-header {
+	color: rgb(10, 10, 10);
+    text-shadow: none;
+}
+
+.ytp-settings-menu .ytp-panel-back-button {
+    background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/x-1.png') no-repeat center;
+    background-size: 20px;
+}
+
+.ytp-menuitem[role=menuitemradio][aria-checked=true] .ytp-menuitem-label {
+    background: url('https://raw.githubusercontent.com/ktg5/PlayerTube/main/img/2010%20icons/dot-1.png') no-repeat center;
+    background-size: 12px !important;
+    background-position: left 10px center;
+}