├── README.md ├── chrome beta ├── LICENSE ├── background.js ├── changelog.html ├── changelog.js ├── compatibility.css ├── css │ ├── appbar.css │ ├── bt-universalized-elements.css │ ├── channel-rework.css │ ├── chips.css │ ├── comments.css │ ├── cosmicpanda.css │ ├── description.css │ ├── emerald-general.css │ ├── emerald-watch4.css │ ├── emerald-watch5.css │ ├── emerald-watch7.css │ ├── emerald-watch8.css │ ├── emerald-watch9.css │ ├── global-color-palette.css │ ├── ltod.css │ ├── menus.css │ ├── player.css │ ├── playlist-panel.css │ ├── polymer.css │ ├── psuedo-static.css │ ├── related-videos.css │ ├── rich-grid.css │ ├── search.css │ ├── sidebar.css │ ├── static-scrolling.css │ ├── static.css │ ├── sub-btn.css │ ├── topbar.css │ ├── watch-page-blobs.css │ └── watch-page.css ├── general.css ├── images │ ├── 128.png │ ├── 16.png │ ├── 32.png │ ├── 48.png │ ├── beamtubebg.png │ ├── ctlogo.png │ ├── logo.png │ └── open-in-new-window-button-2-svgrepo-com.svg ├── initial-setup.js ├── main.js ├── manifest.json ├── popup.html ├── popup.js └── scripts │ ├── appbar.js │ ├── dataget.js │ ├── emerald.js │ ├── logo-endpoint.js │ ├── my-channel-btn.js │ ├── resize.js │ └── trending-btn.js ├── chrome ├── LICENSE ├── background.js ├── changelog.html ├── changelog.js ├── compatibility.css ├── css │ ├── appbar.css │ ├── bt-universalized-elements.css │ ├── channel-rework.css │ ├── chips.css │ ├── comments.css │ ├── cosmicpanda.css │ ├── description.css │ ├── global-color-palette.css │ ├── ltod.css │ ├── menus.css │ ├── player.css │ ├── playlist-panel.css │ ├── polymer.css │ ├── psuedo-static.css │ ├── related-videos.css │ ├── rich-grid.css │ ├── search.css │ ├── sidebar.css │ ├── static-scrolling.css │ ├── static.css │ ├── sub-btn.css │ ├── topbar.css │ ├── watch-page-blobs.css │ └── watch-page.css ├── general.css ├── images │ ├── 128.png │ ├── 16.png │ ├── 32.png │ ├── 48.png │ ├── beamtubebg.png │ ├── ctlogo.png │ ├── dislike-pressed.png │ ├── dislike.png │ ├── like-pressed.png │ ├── like.png │ ├── logo.png │ └── open-in-new-window-button-2-svgrepo-com.svg ├── initial-setup.js ├── main.js ├── manifest.json ├── popup.html ├── popup.js ├── scripts │ ├── appbar.js │ ├── dataget.js │ ├── logo-endpoint.js │ ├── my-channel-btn.js │ ├── resize.js │ └── trending-btn.js └── sub-btn.css ├── firefox beta ├── LICENSE ├── background.js ├── changelog.html ├── changelog.js ├── css │ ├── appbar.css │ ├── bt-universalized-elements.css │ ├── channel-rework.css │ ├── chips.css │ ├── comments.css │ ├── compatibility.css │ ├── cosmicpanda.css │ ├── description.css │ ├── emerald-general.css │ ├── emerald-watch4.css │ ├── emerald-watch5.css │ ├── emerald-watch7.css │ ├── emerald-watch8.css │ ├── emerald-watch9.css │ ├── global-color-palette.css │ ├── ltod.css │ ├── menus.css │ ├── player.css │ ├── playlist-panel.css │ ├── polymer.css │ ├── psuedo-static.css │ ├── related-videos.css │ ├── rich-grid.css │ ├── search.css │ ├── sidebar.css │ ├── static-scrolling.css │ ├── static.css │ ├── sub-btn.css │ ├── topbar.css │ ├── watch-page-blobs.css │ └── watch-page.css ├── general.css ├── images │ ├── 128.png │ ├── 16.png │ ├── 32.png │ ├── 48.png │ ├── beamtubebg.png │ ├── ctlogo.png │ ├── logo.png │ └── open-in-new-window-button-2-svgrepo-com.svg ├── initial-setup.js ├── main.js ├── manifest.json ├── popup.html ├── popup.js ├── scripts │ ├── appbar.js │ ├── dataget.js │ ├── emerald.js │ ├── logo-endpoint.js │ ├── my-channel-btn.js │ ├── resize.js │ └── trending-btn.js └── updates.json └── firefox ├── LICENSE ├── background.js ├── changelog.html ├── changelog.js ├── css ├── appbar.css ├── bt-universalized-elements.css ├── channel-rework.css ├── chips.css ├── comments.css ├── cosmicpanda.css ├── description.css ├── global-color-palette.css ├── ltod.css ├── menus.css ├── player.css ├── playlist-panel.css ├── polymer.css ├── psuedo-static.css ├── related-videos.css ├── rich-grid.css ├── search.css ├── sidebar.css ├── static-scrolling.css ├── static.css ├── sub-btn.css ├── topbar.css ├── watch-page-blobs.css └── watch-page.css ├── general.css ├── images ├── 128.png ├── 16.png ├── 32.png ├── 48.png ├── beamtubebg.png ├── ctlogo.png ├── logo.png └── open-in-new-window-button-2-svgrepo-com.svg ├── initial-setup.js ├── main.js ├── manifest.json ├── popup.html ├── popup.js └── scripts ├── appbar.js ├── dataget.js ├── logo-endpoint.js ├── my-channel-btn.js ├── resize.js └── trending-btn.js /README.md: -------------------------------------------------------------------------------- 1 | # CustomTube 2 | 3 | **Note that CustomTube has been discontinued. My current project, StarTube, is the successor, and it requires Vorapis 2013 (V3) to function.** 4 | 5 | Download V3: https://vorapis.pages.dev/#/ 6 | 7 | Download StarTube: https://greasyfork.org/en/scripts/485622-startube 8 | 9 | See discussion for details: https://github.com/lightbeam24/CustomTube/discussions/240 10 | 11 | ---- 12 | 13 | ![Mainfull](https://github.com/lightbeam24/CustomTube/assets/105595945/e9e27f41-4587-4f4c-b505-525520a62e73) 14 | 15 | What if you could just CHOOSE your YouTube layout? Well, now you can! CustomTube lets you use almost any YouTube layout from 2008-2021! 16 | 17 | [![Firefox](https://blog.mozilla.org/addons/files/2015/11/get-the-addon.png)](https://addons.mozilla.org/en-CA/firefox/addon/customtube/) 18 | [![Chrome](https://wd.imgix.net/image/BrQidfK9jaQyIHwdw91aVpkPiib2/RQMv2HZ0v6NKfFn7XCeU.png?auto=format&w=228)](https://chromewebstore.google.com/detail/customtube/iedffooliepgabiihipcbokboecnfcbe) 19 | 20 | CustomTube does not collect user data. I don't even know how to program that and I wouldn't want to anyway. 21 | 22 | Compatible Extensions: 23 | - 24 | CustomTube is currently only tested with these extensions/scripts: 25 | 26 | [Return YouTube Dislike](https://github.com/Anarios/return-youtube-dislike) 27 | 28 | [Annotations Restored for YouTube](https://github.com/isaackd/AnnotationsRestored) 29 | 30 | [uBlock Origin](https://github.com/gorhill/uBlock) 31 | 32 | [Restore YouTube Username from Handle to Custom](https://greasyfork.org/en/scripts/468740-restore-youtube-username-from-handle-to-custom) 33 | 34 | Using it with other extensions or scripts often causes issues and is therefore not recommended. 35 | 36 | If you have a user agent switcher installed, make sure it is disabled on youtube.com, as you may not be able to use anything other than the default 2017 layout otherwise. 37 | 38 | Screenshots: 39 | - 40 | 41 | ![ss1](https://github.com/lightbeam24/CustomTube/assets/105595945/90283c3b-86ae-419d-9663-be540a929349) 42 | 43 | ![ss2](https://github.com/lightbeam24/CustomTube/assets/105595945/3c7345bf-c1f8-4378-9c29-7e1fcab8822e) 44 | 45 | ![ss7](https://github.com/lightbeam24/CustomTube/assets/105595945/ebb24f00-fa78-4fd5-a9b2-21764056e7d4) 46 | 47 | ![ss6](https://github.com/lightbeam24/CustomTube/assets/105595945/cc4a19e6-ca85-469f-a945-fcea3710fd50) 48 | 49 | ![ss3](https://github.com/lightbeam24/CustomTube/assets/105595945/80af9f04-307d-479a-b3e0-8aa3e479fb4e) 50 | 51 | ![ss5](https://github.com/lightbeam24/CustomTube/assets/105595945/faa2507b-358f-43bb-8d4a-4fd503979baa) 52 | 53 | ![ss8](https://github.com/lightbeam24/CustomTube/assets/105595945/64903dd3-e3b5-4380-85ec-b9906dda577e) 54 | 55 | ![2011layout](https://github.com/lightbeam24/CustomTube/assets/105595945/ebed9e8a-5061-42bb-be13-92f5d0c3f400) 56 | 57 | ![l2009layout](https://github.com/lightbeam24/CustomTube/assets/105595945/575b551a-f3ff-4a62-82bd-01ec4ca6ebcc) 58 | 59 | ![2008layout](https://github.com/lightbeam24/CustomTube/assets/105595945/5966a02a-a501-4629-8fb2-bd6fc7967d18) 60 | 61 | 62 | Credits: 63 | - 64 | 65 | Logo made by UnderscoreAngel. [Github page](https://github.com/UnderscoreAngel) 66 | 67 | CustomTube shares a small amount of code with YouTube Redux, namely the code for managing user settings. 68 | 69 | The beta version makes use of the Return YouTube Dislike API - https://returnyoutubedislike.com 70 | -------------------------------------------------------------------------------- /chrome beta/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) lightbeam24 4 | Copyright (c) the-omnipotent 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /chrome beta/background.js: -------------------------------------------------------------------------------- 1 | let browser = chrome; 2 | function handleInstalled(reason) { 3 | browser.storage.sync.get(['BTConfig'], function(result) { 4 | if (Object.keys(result).length > 0 && !result.BTConfig.showChangelog) { 5 | return; 6 | } 7 | else if (reason != "browser_update") { 8 | browser.tabs.create({ 9 | url: `./changelog.html#${reason}` 10 | }); 11 | } 12 | }); 13 | } 14 | 15 | browser.runtime.onInstalled.addListener(reason => { 16 | handleInstalled(reason.reason); 17 | }); -------------------------------------------------------------------------------- /chrome beta/changelog.js: -------------------------------------------------------------------------------- 1 | function handleChangelog() { 2 | let changelogHeader = document.querySelector('#header'); 3 | let changelogFirstInstallTip = document.querySelector('#fit'); 4 | let changelogVersion = document.querySelector('#version'); 5 | let version = browser.runtime.getManifest().version; 6 | if (!changelogHeader) return; 7 | if (window.location.href.includes('#install')) { 8 | changelogHeader.innerText = "CustomTube was successfully installed!"; 9 | } 10 | else if (window.location.href.includes('#check')) { 11 | changelogHeader.innerText = `CustomTube is currently on version ${version}.`; 12 | } else { 13 | changelogVersion.innerText = `CustomTube has updated to version ${version}!`; 14 | } 15 | } 16 | 17 | handleChangelog(); -------------------------------------------------------------------------------- /chrome beta/compatibility.css: -------------------------------------------------------------------------------- 1 | /* Code to fix issues that are exclusive to the Chromium port of CustomTube. This file is not present in the Firefox version. */ 2 | 3 | .btc, 4 | .bts { 5 | margin-top: 1px; 6 | } 7 | html[channel-style^="aozora"] #channel-header::after, 8 | html[channel-style^="stargazer"] #channel-header::after { 9 | left: 300px; 10 | } 11 | html[player-style^="2012"] .ytp-big-mode .ytp-right-controls { 12 | margin-top: -5px !important; 13 | } 14 | html[player-style^="2013"] .ytp-big-mode .ytp-right-controls { 15 | margin-top: -2px !important; 16 | } 17 | html[watch-metadata-style^="cosmicpanda"] #bt-above #title yt-formatted-string { 18 | max-height: 30px !important; 19 | overflow-x: visible !important; 20 | } 21 | html[watch-metadata-style^="hitchhiker-2013"][lang^="en"] #owner-sub-count::before, 22 | html[watch-metadata-style^="hitchhiker-2014"][lang^="en"] #owner-sub-count::before { 23 | margin-top: 4px !important; 24 | left: 161px !important; 25 | } 26 | html[watch-metadata-style^="hitchhiker-2013"][lang^="en"] #owner-sub-count::after, 27 | html[watch-metadata-style^="hitchhiker-2014"][lang^="en"] #owner-sub-count::after { 28 | margin-top: 5px !important; 29 | left: 162px !important; 30 | } 31 | html[watch-metadata-style^="hitchhiker-2013-1"][lang^="en"] #owner-sub-count::after { 32 | left: 166px !important; 33 | } 34 | html[watch-metadata-style^="hitchhiker-2013-1"][lang^="en"] #owner-sub-count::before { 35 | left: 167px !important; 36 | } -------------------------------------------------------------------------------- /chrome beta/css/chips.css: -------------------------------------------------------------------------------- 1 | html[layout^="stargazer"] { 2 | --bt-chips-display: none; 3 | } 4 | html[layout^="aozora"] { 5 | --bt-chips-display: none; 6 | } 7 | html[layout^="cosmicpanda"] { 8 | --bt-chips-display: none; 9 | } 10 | html[chips-style^="hitchhiker"] { 11 | --bt-chips-display: block; 12 | --bt-outer-chips-position: fixed; 13 | --bt-outer-chips-height: 40px; 14 | --bt-outer-chips-top: var(--bt-topbar-height); 15 | --bt-outer-chips-bg: var(--yt-spec-brand-background-primary); 16 | --bt-outer-chips-border-top: none; 17 | --bt-outer-chips-border-bottom: 1px solid var(--bt-section-border-color); 18 | --bt-chip-margin-top: 6px; 19 | --bt-chip-padding-bottom: 3px; 20 | --bt-chip-radius: 0; 21 | --bt-chip-font-size: 13px; 22 | --bt-chip-text-transform: none; 23 | --bt-chip-border-bottom-hover: 3px solid var(--bt-spec-emphasis); 24 | --bt-active-chip-bg: none; 25 | --bt-active-chip-text-color: var(--yt-spec-text-primary); 26 | --bt-active-chip-border: none; 27 | --bt-active-chip-border-bottom: 3px solid var(--bt-spec-emphasis); 28 | --bt-inactive-chip-bg: none; 29 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 30 | --bt-inactive-chip-border: none; 31 | } 32 | html[chips-style^="hitchhiker-2013"] { 33 | --bt-chips-display: none; 34 | --bt-outer-chips-position: absolute; 35 | --bt-outer-chips-height: 40px; 36 | --bt-outer-chips-top: var(--bt-topbar-height); 37 | --bt-outer-chips-bg: var(--yt-spec-brand-background-primary); 38 | --bt-outer-chips-border-top: none; 39 | --bt-outer-chips-border-bottom: 1px solid var(--bt-section-border-color); 40 | --bt-chip-margin-top: 6px; 41 | --bt-chip-padding-bottom: 3px; 42 | --bt-chip-radius: 0; 43 | --bt-chip-font-size: 13px; 44 | --bt-chip-text-transform: none; 45 | --bt-chip-border-bottom-hover: 3px solid var(--bt-spec-emphasis); 46 | --bt-active-chip-bg: none; 47 | --bt-active-chip-text-color: var(--yt-spec-text-primary); 48 | --bt-active-chip-border: none; 49 | --bt-active-chip-border-bottom: 3px solid var(--bt-spec-emphasis); 50 | --bt-inactive-chip-bg: none; 51 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 52 | --bt-inactive-chip-border: none; 53 | } 54 | /*html[layout="polymer-2019"],*//* 55 | html[layout="polymer-2020"] { 56 | --bt-chips-display: none; 57 | }*/ 58 | html[chips-style^="polymer-2019"] { 59 | --bt-outer-chips-position: fixed; 60 | --bt-outer-chips-height: 56px; 61 | --bt-outer-chips-top: var(--bt-topbar-height); 62 | --bt-outer-chips-bg: var(--bt-masthead-bg); 63 | --bt-outer-chips-border-top: none; 64 | --bt-outer-chips-border-bottom: none; 65 | --bt-chip-margin-top: 12px; 66 | --bt-chip-padding-bottom: 0px; 67 | --bt-chip-radius: 2px; 68 | --bt-chip-font-size: 1.4rem; 69 | --bt-chip-font-weight: 500; 70 | --bt-chip-text-transform: uppercase; 71 | --bt-chip-border-bottom-hover: none; 72 | --bt-chip-bg-hover: var(--yt-spec-button-chip-background-hover); 73 | --bt-active-chip-bg: var(--yt-spec-icon-inactive); 74 | --bt-active-chip-text-color: var(--yt-spec-text-primary-inverse); 75 | --bt-active-chip-border: none; 76 | --bt-inactive-chip-bg: var(--yt-spec-badge-chip-background); 77 | --bt-inactive-chip-text-color: var(--bt-gcp-666); 78 | --bt-inactive-chip-border: none; 79 | } 80 | html[chips-style^="polymer-202"] { 81 | --bt-outer-chips-position: fixed; 82 | --bt-outer-chips-height: 56px; 83 | --bt-outer-chips-top: var(--bt-topbar-height); 84 | --bt-outer-chips-bg: var(--bt-masthead-bg); 85 | --bt-outer-chips-border-top: 1px solid var(--yt-spec-10-percent-layer); 86 | --bt-outer-chips-border-bottom: 1px solid var(--yt-spec-10-percent-layer); 87 | --bt-chip-margin-top: 12px; 88 | --bt-chip-padding-bottom: 0px; 89 | --bt-chip-radius: 16px; 90 | --bt-chip-font-size: 1.4rem; 91 | --bt-chip-text-transform: none; 92 | --bt-chip-border-bottom-hover: 1px solid var(--yt-spec-10-percent-layer); 93 | --bt-chip-bg-hover: var(--yt-spec-button-chip-background-hover); 94 | --bt-active-chip-bg: var(--yt-spec-icon-inactive); 95 | --bt-active-chip-text-color: var(--yt-spec-text-primary-inverse); 96 | --bt-active-chip-border: 1px solid var(--yt-spec-10-percent-layer); 97 | --bt-inactive-chip-bg: var(--yt-spec-badge-chip-background); 98 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 99 | --bt-inactive-chip-border: 1px solid var(--yt-spec-10-percent-layer); 100 | } 101 | /* hide chips */ 102 | ytd-browse[page-subtype="home"] ytd-feed-filter-chip-bar-renderer, 103 | ytd-watch-flexy yt-related-chip-cloud-renderer { 104 | display: var(--bt-chips-display) !important; 105 | } 106 | /* BTSection Chips */ 107 | html[chips-style] ytd-feed-filter-chip-bar-renderer:not([not-sticky]) #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 108 | top: var(--bt-outer-chips-top); 109 | position: var(--bt-outer-chips-position); 110 | height: var(--bt-outer-chips-height); 111 | background-color: var(--bt-outer-chips-bg); 112 | border-top: var(--bt-outer-chips-border-top); 113 | border-bottom: var(--bt-outer-chips-border-bottom); 114 | } 115 | /* patch */ 116 | ytd-browse[page-subtype="home"] ytd-feed-filter-chip-bar-renderer { 117 | display: var(--bt-chips-display) !important; 118 | position: fixed !important; 119 | z-index: 1919; 120 | width: calc(100vw - var(--bt-sidebar-width)) !important; 121 | max-width: calc(100vw - var(--bt-sidebar-width)) !important; 122 | min-width: calc(100vw - var(--bt-sidebar-width)) !important; 123 | left: var(--bt-sidebar-width); 124 | } 125 | ytd-feed-filter-chip-bar-renderer #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 126 | width: calc(100vw - var(--bt-sidebar-width)) !important; 127 | } 128 | ytd-feed-filter-chip-bar-renderer #scroll-container.ytd-feed-filter-chip-bar-renderer { 129 | width: calc(98vw - var(--bt-sidebar-width)) !important; 130 | margin: 0 auto; 131 | } 132 | /* patch end */ 133 | /* all chips */ 134 | html[chips-style] yt-chip-cloud-chip-renderer { 135 | margin-top: var(--bt-chip-margin-top); 136 | padding-bottom: var(--bt-chip-padding-bottom); 137 | } 138 | /* selected chip */ 139 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected], 140 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected] { 141 | background-color: var(--bt-active-chip-bg); 142 | color: var(--bt-active-chip-text-color); 143 | font-size: var(--bt-chip-font-size); 144 | border: var(--bt-active-chip-border) !important; 145 | border-radius: var(--bt-chip-radius) !important; 146 | border-bottom: var(--bt-active-chip-border-bottom) !important; 147 | } 148 | /* not selected chip */ 149 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"], 150 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"], 151 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_REFRESH_TO_NOVEL_CHIP"] { 152 | background-color: var(--bt-inactive-chip-bg); 153 | border: var(--bt-inactive-chip-border) !important; 154 | font-size: var(--bt-chip-font-size); 155 | font-weight: var(--bt-chip-font-weight); 156 | text-transform: var(--bt-chip-text-transform); 157 | color: var(--bt-inactive-chip-text-color); 158 | /*padding: 0 var(--ytd-margin-3x); 159 | transition: background-color 0.5s cubic-bezier(0.05,0,0,1);*/ 160 | border-radius: var(--bt-chip-radius); 161 | } 162 | html[chips-style] yt-chip-cloud-chip-renderer:not([selected]):hover { 163 | border: var(--bt-inactive-chip-border) !important; 164 | border-bottom: var(--bt-chip-border-bottom-hover, 0px solid currentcolor) !important; 165 | background-color: var(--bt-chip-bg-hover) !important; 166 | } -------------------------------------------------------------------------------- /chrome beta/css/cosmicpanda.css: -------------------------------------------------------------------------------- 1 | /* cosmicpanda */ 2 | html[layout^="cosmicpanda"] ytd-masthead { 3 | font-family: arial !important; 4 | } 5 | /* BTSection Topbar */ 6 | /* topbar color */ 7 | html[layout^="cosmicpanda"] ytd-masthead { 8 | background: transparent; 9 | } 10 | /* makes topbar have no bg */ 11 | html[layout^="cosmicpanda"] ytd-masthead[darker-dark-theme] #background.ytd-masthead { 12 | background: transparent !important; 13 | display: none !important; 14 | } 15 | /* topbar color */ 16 | html[layout^="cosmicpanda"] ytd-masthead { 17 | background-image: var(--bt-site-bg) !important; 18 | } 19 | html[layout^="cosmicpanda"] ytd-item-section-renderer { 20 | background-image: var(--bt-site-bg) !important; 21 | } -------------------------------------------------------------------------------- /chrome beta/css/emerald-watch4.css: -------------------------------------------------------------------------------- 1 | [ct][watch-version="watch4"] #emerald-watch-sidebar-channel-videos-toggle { 2 | order: 1; 3 | margin-bottom: 5px; 4 | } 5 | [ct][watch-version="watch4"] #emerald-watch-sidebar-channel-videos { 6 | order: 2; 7 | margin-bottom: 10px; 8 | } 9 | [ct][watch-version="watch4"] #emerald-watch-sidebar-related-toggle { 10 | order: 3; 11 | margin-bottom: 5px; 12 | } 13 | [ct][watch-version="watch4"] #emerald-watch-sidebar-related { 14 | order: 4; 15 | } 16 | html:not([use-related-tabs])[ct][watch-version="watch4"] #emerald-watch-sidebar-content:not([channel-videos-expanded]) #emerald-watch-sidebar-channel-videos, 17 | html:not([use-related-tabs])[ct][watch-version="watch4"] #emerald-watch-sidebar-content:not([related-expanded]) #emerald-watch-sidebar-related { 18 | display: none; 19 | } 20 | 21 | .emerald-watch-sidebar-toggle { 22 | font-size: 16px; 23 | font-weight: bold; 24 | color: var(--bt-gcp-000); 25 | cursor: pointer; 26 | } 27 | .emerald-watch-below-toggle:hover, 28 | .emerald-watch-sidebar-toggle:hover { 29 | color: var(--bt-gcp-666); 30 | } 31 | .emerald-watch-below-toggle { 32 | font-size: 12px; 33 | font-weight: bold; 34 | color: var(--bt-gcp-000); 35 | cursor: pointer; 36 | border-top: 1px solid #ccc; 37 | margin-top: 5px; 38 | padding-top: 5px; 39 | } 40 | .emerald-watch-below-toggle .emerald-toggle-icon, 41 | .emerald-watch-sidebar-toggle .emerald-toggle-icon { 42 | height: 16px; 43 | width: 12px; 44 | margin-right: 4px; 45 | background: url(https://i.imgur.com/2LCU6Hs.png) no-repeat 0 -344px; 46 | } 47 | [related-expanded] #emerald-watch-sidebar-related-toggle .emerald-toggle-icon, 48 | [channel-videos-expanded] #emerald-watch-sidebar-channel-videos-toggle .emerald-toggle-icon, 49 | [comments-expanded] #emerald-watch-comments-toggle .emerald-toggle-icon { 50 | background: url(https://i.imgur.com/2LCU6Hs.png) no-repeat 0 -322px; 51 | } 52 | 53 | 54 | 55 | 56 | #emerald-watch-sidebar:not([description-expanded]) #emerald-side-meta-description { 57 | max-height: 45px; 58 | overflow: hidden; 59 | } 60 | #emerald-side-meta { 61 | background: var(--bt-gcp-eee); 62 | border: 1px solid var(--bt-gcp-ccc); 63 | margin-bottom: 10px; 64 | font-size: 12px; 65 | padding: 6px; 66 | color: var(--bt-gcp-000); 67 | } 68 | #emerald-side-meta-pfp { 69 | width: 46px; 70 | height: 46px; 71 | border: 3px double var(--bt-gcp-999); 72 | background: var(--bt-gcp-fff); 73 | } 74 | #emerald-side-meta-pfp a { 75 | width: 46px; 76 | height: 46px; 77 | } 78 | .watch4-blue { 79 | color: var(--bt-blue); 80 | cursor: pointer; 81 | } 82 | .watch4-blue:hover { 83 | text-decoration: underline; 84 | } 85 | #emerald-side-meta-user-details { 86 | line-height: 18px; 87 | margin-left: 8px; 88 | color: var(--bt-gcp-333); 89 | margin-top: -2px; 90 | margin-bottom: 4px; 91 | } 92 | [ct] #side-meta-channel-name-container a { 93 | color: var(--bt-blue); 94 | font-weight: bold; 95 | cursor: pointer; 96 | } 97 | [ct] #side-meta-channel-name-container a:hover { 98 | text-decoration: underline; 99 | } 100 | [ct] .watch4-expand .expand-inner { 101 | font-size: 11px; 102 | display: flex; 103 | } 104 | #emerald-side-meta-subscribe { 105 | margin-left: auto; 106 | } 107 | [ct] #emerald-side-meta .emerald-link { 108 | color: var(--bt-blue); 109 | cursor: pointer; 110 | display: inline-block; 111 | } 112 | [ct] #emerald-side-meta .emerald-link:hover { 113 | text-decoration: underline; 114 | } 115 | #emerald-side-meta-actions { 116 | border-top: 1px solid var(--bt-gcp-ccc); 117 | padding: 5px 0 0 6px; 118 | margin: 5px 0 0; 119 | font-size: 11px; 120 | } 121 | .emerald-side-meta-text { 122 | color: var(--bt-gcp-666); 123 | line-height: 18px; 124 | font-size: 11px; 125 | font-weight: bold; 126 | float: left; 127 | margin-right: 5px; 128 | min-width: 40px; 129 | clear: left; 130 | text-align: right; 131 | } 132 | .emerald-side-meta-input input { 133 | width: 200px; 134 | overflow-x: hidden; 135 | font-size: 10px; 136 | border: 1px solid var(--bt-gcp-999); 137 | background: var(--bt-gcp-fff); 138 | border-radius: 2px; 139 | padding: 2px; 140 | white-space: nowrap; 141 | } 142 | 143 | [remove-rating-invisible="false"] #watch4-your-rating-text { 144 | display: none; 145 | } 146 | #watch4-rating-text { 147 | margin-left: 8px; 148 | font-size: 12px; 149 | color: var(--bt-gcp-666); 150 | } 151 | #watch4-ratings:not([rated]):not([temp-stars]) #watch4-rating-value { 152 | font-style: italic; 153 | color: var(--bt-gcp-888); 154 | } 155 | #watch4-ratings:not([rated])[temp-stars]:hover #watch4-rating-value { 156 | color: var(--bt-blue); 157 | } 158 | #watch4-ratings:not([rated])[temp-stars="1.0"]:hover #watch4-rating-value, 159 | #watch4-ratings:not([rated])[temp-stars="2.0"]:hover #watch4-rating-value { 160 | color: red; 161 | } 162 | #watch4-ratings:not([rated])[temp-stars="3.0"]:hover #watch4-rating-value, 163 | #watch4-ratings:not([rated])[temp-stars="4.0"]:hover #watch4-rating-value, 164 | #watch4-ratings:not([rated])[temp-stars="5.0"]:hover #watch4-rating-value { 165 | color: green; 166 | } 167 | #watch4-ratings-inner { 168 | background: url(https://i.imgur.com/2LCU6Hs.png) no-repeat; 169 | background-position: -75px -411px; 170 | height: 15px; 171 | } 172 | #watch4-ratings[temp-stars] #watch4-ratings-inner { 173 | outline: 2px solid var(--bt-blue); 174 | } 175 | #watch4-ratings-inner[rating="1.0"] { 176 | background-position: -60px -411px; 177 | } 178 | #watch4-ratings-inner[rating="1.5"] { 179 | background-position: -45px -426px; 180 | } 181 | #watch4-ratings-inner[rating="2.0"] { 182 | background-position: -45px -411px; 183 | } 184 | #watch4-ratings-inner[rating="2.5"] { 185 | background-position: -30px -426px; 186 | } 187 | #watch4-ratings-inner[rating="3.0"] { 188 | background-position: -30px -411px; 189 | } 190 | #watch4-ratings-inner[rating="3.5"] { 191 | background-position: -15px -426px; 192 | } 193 | #watch4-ratings-inner[rating="4.0"] { 194 | background-position: -15px -411px; 195 | } 196 | #watch4-ratings-inner[rating="4.5"] { 197 | background-position: 0px -426px; 198 | } 199 | #watch4-ratings-inner[rating="5.0"] { 200 | background-position: 0px -411px; 201 | } 202 | #watch4-ratings[temp-stars="1.0"] #watch4-ratings-inner { 203 | background-position: -60px -411px; 204 | } 205 | #watch4-ratings[temp-stars="2.0"] #watch4-ratings-inner { 206 | background-position: -45px -411px; 207 | } 208 | #watch4-ratings[temp-stars="3.0"] #watch4-ratings-inner { 209 | background-position: -30px -411px; 210 | } 211 | #watch4-ratings[temp-stars="4.0"] #watch4-ratings-inner { 212 | background-position: -15px -411px; 213 | } 214 | #watch4-ratings[temp-stars="5.0"] #watch4-ratings-inner { 215 | background-position: 0px -411px; 216 | } 217 | .watch4-star { 218 | width: 15px; 219 | height: 15px; 220 | } 221 | #watch4-ratings-info-row { 222 | padding: 9px 0 4px 0; 223 | } 224 | #watch4-views-info { 225 | font-size: 13px; 226 | color: var(--bt-gcp-000); 227 | font-weight: bold; 228 | margin-left: auto; 229 | } 230 | #watch4-views-info #views-text { 231 | font-weight: normal; 232 | } 233 | #watch4-actions-row { 234 | border: 1px solid var(--bt-gcp-ccc); 235 | width: 100%; 236 | } 237 | .watch4-action a { 238 | text-align: center; 239 | font-size: 13px; 240 | font-weight: bold; 241 | color: #03c; 242 | height: 32px; 243 | line-height: 28px; 244 | padding: 0 10px; 245 | display: block; 246 | float: left; 247 | cursor: pointer; 248 | } 249 | .watch4-action a::before { 250 | content: ""; 251 | background: url(https://i.imgur.com/2LCU6Hs.png) no-repeat; 252 | width: 10px; 253 | height: 9px; 254 | vertical-align: text-top; 255 | margin-bottom: 3px; 256 | margin-top: 3px; 257 | display: inline-block; 258 | } 259 | #watch4-like-button a::before { 260 | background-position: 0px -228px; 261 | } 262 | #watch4-like-button.active a::before, 263 | #watch4-like-button:hover a::before { 264 | background-position: 0px -238px; 265 | } 266 | #watch4-share-button a::before { 267 | background-position: -17px -228px; 268 | } 269 | #watch4-share-button.active a::before, 270 | #watch4-share-button:hover a::before { 271 | background-position: -17px -238px; 272 | } 273 | #watch4-addto-button a::before { 274 | background-position: -35px -228px; 275 | } 276 | #watch4-addto-button.active a::before, 277 | #watch4-addto-button:hover a::before { 278 | background-position: -35px -238px; 279 | } 280 | #watch4-report-button a::before { 281 | background-position: -53px -228px; 282 | } 283 | #watch4-report-button.active a::before, 284 | #watch4-report-button:hover a::before { 285 | background-position: -53px -238px; 286 | } 287 | #watch4-action-panels { 288 | border: 1px solid var(--bt-gcp-ccc); 289 | width: 100%; 290 | margin: 0 0 14px 0; 291 | background: #f3f3f3; 292 | border-top: none; 293 | } 294 | #watch4-action-panels-inner { 295 | border-top: 1px solid var(--bt-gcp-fff); 296 | } 297 | #watch4-action-panels[state="share"] #watch4-action-panel-close { 298 | display: none; 299 | } 300 | .watch4-action-panel { 301 | padding: 8px; 302 | font-size: 12px; 303 | } 304 | 305 | 306 | 307 | [ct] #watch4-sub-button { 308 | height: 23px; 309 | display: flex; 310 | align-items: center; 311 | padding: 0 10px; 312 | font-size: 12px; 313 | border-radius: 3px; 314 | border: 1px solid transparent; 315 | cursor: pointer; 316 | font-weight: bold; 317 | } 318 | [ct] #watch4-sub-button:hover { 319 | text-decoration: underline; 320 | } 321 | [ct] [state="subscribe"] #watch4-sub-button { 322 | background: #fed81c url(https://i.imgur.com/hcxA2dh.png) repeat-x center -2202px; 323 | color: #994800; 324 | border: 1px solid #ecc101; 325 | } 326 | [ct] [state="unsubscribe"] #watch4-sub-button, 327 | [ct] [state="creator-studio"] #watch4-sub-button{ 328 | background: #d8d8d8 url(https://i.imgur.com/hcxA2dh.png) repeat-x center -802px; 329 | color: #000; 330 | border-color: var(--bt-gcp-999); 331 | font-weight: normal; 332 | } 333 | [ct] [state="unsubscribe"] #watch4-sub-button:hover, 334 | [ct] [state="creator-studio"] #watch4-sub-button:hover { 335 | background: #d8d8d8 url(https://i.imgur.com/hcxA2dh.png) repeat-x center -1002px; 336 | } 337 | #emerald-watch-sidebar { 338 | position: relative; 339 | } 340 | 341 | #emerald-watch-below:not([comments-expanded]) #emerald-comments { 342 | display: none; 343 | } 344 | 345 | .emerald-side-meta-extra-header { 346 | color: var(--bt-gcp-666); 347 | margin-right: 4px; 348 | } 349 | #emerald-side-meta .emerald-extra { 350 | display: flex; 351 | margin-top: 5px; 352 | } 353 | .emerald-extra .emerald-link:not(:hover) { 354 | text-decoration: none; 355 | } 356 | 357 | 358 | #watch4-action-panels { 359 | position: relative; 360 | } 361 | #watch4-action-panel-close { 362 | color: var(--bt-blue); 363 | position: absolute; 364 | top: 8px; 365 | right: 8px; 366 | width: fit-content; 367 | cursor: pointer; 368 | font-weight: bold; 369 | } 370 | #watch4-action-panel-close:hover { 371 | text-decoration: underline; 372 | } -------------------------------------------------------------------------------- /chrome beta/css/emerald-watch8.css: -------------------------------------------------------------------------------- 1 | [ct] #watch8-title { 2 | padding: 15px 0 10px; 3 | font-size: 24px; 4 | color: var(--bt-gcp-222); 5 | } 6 | [layout^="hitchhiker-2016"] #watch8-title, 7 | [layout^="hitchhiker-2017"] #watch8-title, 8 | [layout^="polymer"] #watch8-title { 9 | font-size: 20px; 10 | } 11 | [ct] #watch8-owner-row { 12 | padding: 0 0 10px; 13 | } 14 | [ct] #watch8-owner { 15 | display: flex; 16 | } 17 | [ct] #watch8-pfp a { 18 | display: block; 19 | width: 48px; 20 | height: 48px; 21 | } 22 | [ct] #watch8-user { 23 | margin-left: 8px; 24 | } 25 | [ct] #watch8-channel-name-container { 26 | height: 22px; 27 | } 28 | [ct] .watch8-channel-name { 29 | color: var(--bt-gcp-333) !important; 30 | font-weight: 500; 31 | max-width: 315px; 32 | overflow: hidden; 33 | text-overflow: ellipsis; 34 | vertical-align: top; 35 | font-size: 13px; 36 | } 37 | [ct] .watch8-channel-name:hover { 38 | text-decoration: underline; 39 | } 40 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) #watch7-sub-button, 41 | html[layout^="polymer"] #watch7-sub-button { 42 | height: 22px; 43 | display: flex; 44 | align-items: center; 45 | padding: 0 8px 0 5.5px; 46 | padding: 0 6px 0 5.5px; 47 | font-size: 12px; 48 | border-radius: 2px 0 0 2px; 49 | border: 1px solid transparent; 50 | cursor: pointer; 51 | } 52 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="subscribe"] #watch7-sub-button, 53 | html[layout^="polymer"] [state="subscribe"] #watch7-sub-button { 54 | background: #e62117; 55 | box-shadow: 0 1px 0 rgba(0,0,0,0.05); 56 | color: #fefefe; 57 | } 58 | html[layout^="hitchhiker-2017"] [state="subscribe"] #watch7-sub-button { 59 | background: #f00 !important; 60 | } 61 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="subscribe"] #watch7-sub-button:hover { 62 | background: #cc181e; 63 | } 64 | html[layout^="hitchhiker-2017"] [state="subscribe"] #watch7-sub-button:hover { 65 | background: #d90a17 !important; 66 | } 67 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="subscribe"] #watch7-sub-button:active { 68 | background: #b31217; 69 | } 70 | html[layout^="hitchhiker-2017"] [state="subscribe"] #watch7-sub-button:active { 71 | background: #a60812 !important; 72 | } 73 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="subscribed"] #watch7-sub-button { 74 | background: linear-gradient(to top,#f6f6f6 0,#fcfcfc 100%); 75 | box-shadow: 0 1px 0 rgba(0,0,0,0.05); 76 | color: var(--bt-gcp-999); 77 | border-color: var(--bt-gcp-ccc); 78 | border-radius: 2px 0 0 2px; 79 | } 80 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="creator-studio"] #watch7-sub-button { 81 | background: linear-gradient(to top,#f6f6f6 0,#fcfcfc 100%); 82 | box-shadow: 0 1px 0 rgba(0,0,0,0.05); 83 | color: var(--bt-gcp-333); 84 | border-color: var(--bt-gcp-ccc); 85 | font-weight: bold; 86 | } 87 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="creator-studio"] #watch7-sub-count { 88 | display: none; 89 | } 90 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="subscribed"] #watch7-sub-button:active, 91 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="creator-studio"] #watch7-sub-button:active { 92 | background: linear-gradient(to top,#e7e7e7 0,#ededed 100%); 93 | box-shadow: inset 0 1px 0 #ddd; 94 | } 95 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) #watch7-notif-button { 96 | background: #f8f8f8; 97 | box-shadow: 0 1px 0 rgba(0,0,0,0.05); 98 | color: var(--bt-gcp-999); 99 | border: 1px solid #d3d3d3; 100 | border-left: none !important; 101 | border-radius: 0 2px 2px 0; 102 | height: 22px; 103 | display: flex; 104 | align-items: center; 105 | width: 22px; 106 | cursor: pointer; 107 | } 108 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) #watch7-notif-button:hover { 109 | background: #f0f0f0; 110 | box-shadow: 0 1px 0 rgba(0,0,0,0.10); 111 | border: 1px solid #c6c6c6; 112 | } 113 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) #watch7-notif-button:active { 114 | background: #e9e9e9; 115 | box-shadow: inset 0 1px 0 #ddd; 116 | border: 1px solid #c6c6c6; 117 | } 118 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) .watch7-notif-icon { 119 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vflEXP50f.png) -35px -305px; 120 | width: 12px; 121 | height: 12px; 122 | display: block; 123 | margin: 0 auto; 124 | } 125 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) #watch7-notif-button:hover .watch7-notif-icon { 126 | background-position: 0 -734px; 127 | } 128 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) .watch7-sub-icon { 129 | margin-right: 6px; 130 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vflQ1rFXN.png) -44px -992px; 131 | background-size: auto; 132 | width: 16px; 133 | height: 12px; 134 | } 135 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="subscribed"] .watch7-sub-icon { 136 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vflEXP50f.png) -47px -836px; 137 | } 138 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="creator-studio"] .watch7-sub-icon { 139 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vflEXP50f.png) 0 -852px; 140 | height: 15px; 141 | } 142 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) [state="subscribed"] [js-sub-trigger]:hover .watch7-sub-icon { 143 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vflEXP50f.png) -24px -696px; 144 | } 145 | html[layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) #watch7-sub-count, 146 | html[layout^="polymer"] #watch7-sub-count { 147 | padding: 0 6px; 148 | font-size: 11px; 149 | height: 22px; 150 | display: flex; 151 | align-items: center; 152 | color: var(--bt-gcp-777); 153 | margin-left: 0px; 154 | background: var(--bt-gcp-f9f9f9-surface); 155 | border: 1px solid var(--bt-gcp-ccc); 156 | border-radius: 0 2px 2px 0; 157 | position: relative; 158 | border-left: none; 159 | } 160 | [ct] #watch8-views-info { 161 | margin-left: auto; 162 | right: 0; 163 | margin-top: 29px; 164 | position: absolute; 165 | } 166 | html[layout^="hitchhiker"] #watch8-views-info { 167 | right: 15px; 168 | } 169 | html[layout^="hitchhiker-2013"] #watch8-views-info, 170 | html[layout^="hitchhiker-2014"] #watch8-views-info { 171 | right: 20px; 172 | } 173 | [ct] #watch8-view-count { 174 | font-size: 19px; 175 | color: var(--bt-gcp-666); 176 | line-height: 24px; 177 | margin-left: auto; 178 | width: fit-content; 179 | } 180 | [ct] .watch8-ltod-bar { 181 | height: 2px; 182 | width: 160px; 183 | display: flex; 184 | padding: 4px 0; 185 | position: relative; 186 | cursor: pointer; 187 | } 188 | [ct] .watch8-ltod-bar #js-likes { 189 | background: #1b7fcc; 190 | width: 100%; 191 | height: 2px; 192 | display: block; 193 | position: absolute; 194 | z-index: 2; 195 | } 196 | [ct] .watch8-ltod-bar #js-dislikes { 197 | background: #ccc; 198 | width: 100%; 199 | height: 2px; 200 | display: block; 201 | position: absolute; 202 | z-index: 1; 203 | } 204 | [ct] #watch8-actions-row { 205 | padding: 5px 0; 206 | border-top: 1px solid var(--bt-gcp-e6e6e6, var(--bt-gcp-ddd)); 207 | align-items: center; 208 | } 209 | [ct] #watch8-buttons { 210 | margin-left: -10px; 211 | } 212 | [ct] .watch8-button { 213 | padding: 0 10px; 214 | color: var(--bt-gcp-000); 215 | font-weight: 500; 216 | font-size: 11px; 217 | height: 28px; 218 | display: flex; 219 | align-items: center; 220 | opacity: 0.5; 221 | cursor: pointer; 222 | } 223 | [ct] .watch8-button span { 224 | display: flex; 225 | align-items: center; 226 | } 227 | [ct] #watch8-addto-button span::before, 228 | [ct] #watch8-share-button span::before, 229 | [ct] #watch8-more-button span::before { 230 | content: ""; 231 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vfljEooDy.png) -64px -1389px; 232 | background-size: auto; 233 | width: 20px; 234 | height: 20px; 235 | margin-right: 6px; 236 | display: block; 237 | } 238 | [ct] #watch8-share-button span::before { 239 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vfldzd94_.png) -304px -393px; 240 | } 241 | html[layout^="hitchhiker-2016"] #watch8-share-button span::before, 242 | html[layout^="hitchhiker-2017"] #watch8-share-button span::before, 243 | html[layout^="polymer"] #watch8-share-button span::before { 244 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vfljEooDy.png) -21px -1679px; 245 | } 246 | [ct] #watch8-more-button span::before { 247 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vfljEooDy.png) -42px -845px; 248 | } 249 | [ct] #watch8-ltod { 250 | margin-left: auto; 251 | } 252 | [ct] .watch8-ltod-button { 253 | color: var(--bt-gcp-000); 254 | font-weight: 500; 255 | font-size: 11px; 256 | height: 28px; 257 | display: flex; 258 | align-items: center; 259 | opacity: 0.5; 260 | cursor: pointer; 261 | padding-left: 10px; 262 | } 263 | [ct] .watch8-ltod-button:hover, 264 | [ct] .watch8-button:hover { 265 | opacity: 0.6; 266 | } 267 | [ct] .watch8-ltod-button.active, 268 | [ct] .watch8-button.active, 269 | [ct] .watch8-button:active { 270 | opacity: 0.8; 271 | } 272 | [ct] .watch8-like.active { 273 | color: #167ac6; 274 | } 275 | [ct] .watch8-ltod-button.active:hover, 276 | [ct] .watch8-button.active:hover { 277 | opacity: 1; 278 | } 279 | [ct] .watch8-like .watch8-ltod-icon { 280 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vfljEooDy.png) -38px -688px; 281 | background-size: auto; 282 | width: 20px; 283 | height: 20px; 284 | margin-right: 6px; 285 | } 286 | [ct] .watch8-like.active .watch8-ltod-icon { 287 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vfljEooDy.png) -24px -1635px; 288 | } 289 | [ct] .watch8-dislike .watch8-ltod-icon { 290 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vfljEooDy.png) -100px -1223px; 291 | background-size: auto; 292 | width: 20px; 293 | height: 20px; 294 | padding-bottom: 1px; 295 | margin-right: 6px; 296 | } 297 | [ct] .watch8-dislike.active .watch8-ltod-icon { 298 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-hitchhiker-vflEXP50f.png) 0 -104px; 299 | } 300 | [ct] #watch8-slider[state="none"] #watch8-action-panel-close { 301 | display: none; 302 | } 303 | [ct] #watch8-slider[state="none"] { 304 | display: none; 305 | } 306 | [ct] #watch8-info[expanded] #watch8-expand, 307 | [ct] #watch8-info:not([expanded]) #watch8-collapse { 308 | display: none; 309 | } 310 | [ct] #watch8-slider, 311 | [ct] #watch8-info { 312 | font-size: 13px; 313 | color: var(--bt-gcp-333); 314 | } 315 | [ct] #watch8-info { 316 | position: relative; 317 | } 318 | [ct] .watch8-slider { 319 | padding: 15px 0; 320 | } 321 | [ct] .watch8-header-text { 322 | font-weight: 500; 323 | } 324 | [ct] #watch8-info:not([expanded]) #watch8-description { 325 | max-height: 50px !important; 326 | overflow: hidden; 327 | } 328 | [ct] #watch8-info:not([expanded]) .emerald-extra { 329 | display: none; 330 | } 331 | [ct] .watch8 .emerald-link:hover { 332 | text-decoration: underline; 333 | } 334 | [ct] #watch8-info:hover .emerald-link { 335 | color: var(--bt-blue); 336 | } 337 | [ct] #watch8-info { 338 | padding-top: 15px; 339 | padding-bottom: 15px; 340 | } 341 | [ct] .watch8-expand, 342 | [ct][layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) #emerald-load-more-related { 343 | text-transform: uppercase; 344 | color: #767676; 345 | font-weight: 500; 346 | border-top: 1px solid #e2e2e2; 347 | cursor: pointer; 348 | font-size: 11px; 349 | height: 28px; 350 | display: flex; 351 | align-items: center; 352 | margin: 10px 0 -15px; 353 | } 354 | [ct] .watch8-expand:hover, 355 | [ct][layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) #emerald-load-more-related:hover a { 356 | color: var(--bt-gcp-222); 357 | } 358 | [ct] .watch8-expand .expand-inner, 359 | [ct][layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) #emerald-load-more-related a { 360 | width: fit-content; 361 | margin: 0 auto; 362 | } 363 | [ct][layout^="hitchhiker"]:not([layout^="hitchhiker-2013"]):not([layout^="hitchhiker-2014"]) #emerald-load-more-related { 364 | margin-bottom: 0; 365 | } 366 | [ct] #watch8-action-panel-close { 367 | position: absolute; 368 | top: 8px; 369 | right: -8px; 370 | opacity: .4; 371 | background: no-repeat url(https://s.ytimg.com/yts/imgbin/www-refresh-vflrvDBWB.png) 0 -12px; 372 | width: 9px; 373 | height: 9px; 374 | cursor: pointer; 375 | } 376 | [ct] #watch8-action-panel-close:hover { 377 | opacity: 1; 378 | } 379 | 380 | [ct] #watch8-slider { 381 | position: relative; 382 | } 383 | 384 | 385 | /*[ct] #emerald-watch-8 #watch8-playlist-dropdown { 386 | width: 290px; 387 | } 388 | [ct] #emerald-watch-8 #watch8-playlist-list { 389 | max-height: 250px; 390 | overflow-y: scroll; 391 | }*/ -------------------------------------------------------------------------------- /chrome beta/css/emerald-watch9.css: -------------------------------------------------------------------------------- 1 | [ct] .watch9 { 2 | --yt-expand-color: rgba(17, 17, 17, 0.6); 3 | --bt-watch9-button-color: #606060; 4 | --bt-watch9-icon-color: rgba(144,144,144); 5 | --bt-watch9-like-bar-unliked: #909090; 6 | --bt-watch9-dislike-bar: #ccc; 7 | --bt-watch9-user-subtitle-color: rgba(17, 17, 17, 0.6); 8 | } 9 | [dark][ct] .watch9 { 10 | --yt-expand-color: rgba(255, 255, 255, 0.6); 11 | --bt-watch9-button-color: #aaa; 12 | --bt-watch9-icon-color: rgba(144,144,144); 13 | --bt-watch9-like-bar-unliked: #909090; 14 | --bt-watch9-dislike-bar: #606060; 15 | --bt-watch9-user-subtitle-color: rgba(255, 255, 255, 0.6); 16 | } 17 | [ct] #watch9-primary-info { 18 | display: block; 19 | border-bottom: 1px solid var(--yt-spec-10-percent-layer); 20 | padding: 20px 0 8px 0; 21 | } 22 | [ct] #watch9-secondary-info { 23 | margin-bottom: 0; 24 | padding-bottom: 16px; 25 | border-bottom: 1px solid var(--yt-spec-10-percent-layer); 26 | } 27 | html[layout^="polymer"] #watch9-secondary-info { 28 | margin-bottom: 24px; 29 | } 30 | html[layout^="hitchhiker-2015"] #watch9-secondary-info, 31 | html[layout^="hitchhiker-2016"] #watch9-secondary-info, 32 | html[layout^="hitchhiker-2017"] #watch9-secondary-info { 33 | margin-bottom: 10px; 34 | border-bottom: none; 35 | } 36 | [ct] .watch9 #watch9-title { 37 | font-size: 1.8rem; 38 | font-weight: 400; 39 | line-height: 2.4rem; 40 | color: var(--bt-gcp-111); 41 | } 42 | [ct] .watch9 #watch9-views-info { 43 | font-size: 1.6rem; 44 | font-weight: 400; 45 | line-height: 2rem; 46 | color: var(--bt-gcp-666); 47 | } 48 | [ct] .watch9b #watch9-views-info { 49 | font-size: 1.4rem; 50 | line-height: 2.1rem; 51 | } 52 | [ct] .watch9 #watch9b-upload-date { 53 | margin-left: 4px; 54 | } 55 | [ct] .watch9 #watch9-actions { 56 | margin-left: auto; 57 | } 58 | [ct] .watch9 .watch9-button-icon svg, 59 | [ct] .watch9 .watch9-button-icon g, 60 | [ct] .watch9 .watch9-button-icon path { 61 | width: 20px !important; 62 | height: 20px !important; 63 | min-width: 20px !Important; 64 | } 65 | html[layout^="polymer-202"] .watch9 .watch9-button-icon svg, 66 | html[layout^="polymer-202"] .watch9 .watch9-button-icon g, 67 | html[layout^="polymer-202"] .watch9 .watch9-button-icon path { 68 | width: 24px !important; 69 | height: 24px !important; 70 | min-width: 24px !Important; 71 | } 72 | html[layout^="polymer-2020"] .watch9 .watch9-button-icon svg, 73 | html[layout^="polymer-2020"] .watch9 .watch9-button-icon g, 74 | html[layout^="polymer-2020"] .watch9 .watch9-button-icon path { 75 | width: 24px !important; 76 | height: 24px !important; 77 | min-width: 24px !Important; 78 | } 79 | html[layout] .watch9 div paper-ripple { 80 | display: block !important; 81 | } 82 | [ct] .watch9 .watch9-button-icon { 83 | position: relative; 84 | border-radius: 50%; 85 | padding: 8px; 86 | } 87 | [ct] .watch9 #watch9-owner-row { 88 | margin-bottom: 12px; 89 | padding-top: 16px; 90 | } 91 | [ct] .watch9 #watch9-pfp a { 92 | margin-right: 16px; 93 | width: 48px; 94 | height: 48px; 95 | border-radius: 50%; 96 | background-color: transparent; 97 | overflow: hidden; 98 | } 99 | [ct] .watch9 #watch9-channel-name-container { 100 | --yt-endpoint-color: var(--yt-channel-owner); 101 | --yt-endpoint-hover-color: var(--yt-channel-owner); 102 | font-size: 1.4rem; 103 | font-weight: 500; 104 | line-height: 1.6rem; 105 | } 106 | [ct] .watch9-yt-user-separator { 107 | margin: 0 6px 0 8px; 108 | } 109 | [ct] .watch9 #watch9-user-subtitle { 110 | color: var(--bt-watch9-user-subtitle-color); 111 | font-size: 1.3rem; 112 | font-weight: 400; 113 | line-height: 1.8rem; 114 | text-transform: none; 115 | } 116 | [ct] .watch9 #watch9-upload-date { 117 | margin-right: 8px; 118 | } 119 | [ct] .watch9 #watch9-sub-button, 120 | [ct] .watch9 .watch9-button { 121 | white-space: nowrap; 122 | font-size: 1.4rem; 123 | font-weight: 500; 124 | letter-spacing: .007px; 125 | text-transform: uppercase; 126 | cursor: pointer; 127 | border-radius: 2px; 128 | color: var(--bt-watch9-button-color); 129 | } 130 | [ct] .watch9b .watch9-button { 131 | letter-spacing: 0.5px; 132 | } 133 | [ct] .watch9[state="outline"] .watch9-button { 134 | color: #030303; 135 | } 136 | html[dark] .watch9[state="outline"] .watch9-button { 137 | color: #fff; 138 | } 139 | [ct] .watch9 .watch9-button { 140 | padding-right: 8px; 141 | margin-left: 8px; 142 | font-size: 1.3rem; 143 | } 144 | [ct] .watch9 .watch9-button svg[state-id="filled"] { 145 | fill: var(--bt-watch9-icon-color); 146 | } 147 | [ct] .watch9 .watch9-button svg[state-id="outline"] { 148 | fill: var(--bt-gcp-000); 149 | } 150 | [ct] .watch9[state="filled"] #watch9-like-button.active { 151 | color: var(--bt-blue) !important; 152 | } 153 | [ct] .watch9[state="filled"] #watch9-like-button.active svg { 154 | fill: var(--bt-blue) !important; 155 | } 156 | [ct] .watch9[state="outline"] #watch9-like-button.active svg:not(.filled-outline), 157 | [ct] .watch9[state="outline"] #watch9-dislike-button.active svg:not(.filled-outline), 158 | [ct] .watch9[state="outline"] #watch9-like-button:not(.active) svg.filled-outline, 159 | [ct] .watch9[state="outline"] #watch9-dislike-button:not(.active) svg.filled-outline { 160 | display: none !important; 161 | } 162 | [ct] .watch9 .watch9-ltod-bar { 163 | display: flex; 164 | padding: 6px 0 28px; 165 | position: absolute; 166 | width: 100%; 167 | } 168 | [ct] .watch9 #watch9-ltod { 169 | position: relative; 170 | } 171 | [ct] .watch9 #watch9-like-button { 172 | margin-left: 0; 173 | } 174 | [ct] .watch9 #watch9-sentiment-bar #js-likes { 175 | background: var(--bt-watch9-like-bar-unliked); 176 | width: 100%; 177 | height: 2px; 178 | display: block; 179 | position: absolute; 180 | z-index: 2; 181 | } 182 | [ct] .watch9[state="outline"] #watch9-sentiment-bar #js-likes { 183 | background: var(--bt-gcp-333); 184 | } 185 | [ct] .watch9 #watch9-sentiment-bar #js-dislikes { 186 | background: var(--bt-watch9-dislike-bar); 187 | width: 100%; 188 | height: 2px; 189 | display: block; 190 | position: absolute; 191 | z-index: 1; 192 | } 193 | [ct] .watch9[state="filled"] [liked="true"] #watch9-sentiment-bar #js-likes { 194 | background: var(--bt-blue); 195 | } 196 | [ct] .watch9 #watch9-sub-button { 197 | background-color: var(--bt-emphasis, red); 198 | color: #FFFFFF; 199 | padding: 10px 16px; 200 | position: relative; 201 | } 202 | html[layout^="hitchhiker-2015"] .watch9 [state="subscribe"] #watch9-sub-button, 203 | html[layout^="hitchhiker-2016"] .watch9 [state="subscribe"] #watch9-sub-button { 204 | background-color: var(--bt-lesser-emphasis, red); 205 | } 206 | html[layout^="polymer-202"] .watch9 [state="subscribe"] #watch9-sub-button { 207 | background-color: #c00; 208 | } 209 | [ct] .watch9 [state="subscribed"] #watch9-sub-button { 210 | background-color: var(--bt-light-grey); 211 | color: var(--bt-gcp-555); 212 | } 213 | html[layout^="polymer-2019"] .watch9 [state="subscribed"] #watch9-sub-button { 214 | background-color: var(--bt-light-grey); 215 | box-shadow: 0px 2px 2px rgba(0,0,0,0.5); 216 | } 217 | [ct] .watch9 #watch9-sub-count { 218 | margin-left: 8px; 219 | opacity: 85%; 220 | } 221 | [ct] .watch9 #watch9-subscription-container { 222 | margin-left: auto; 223 | } 224 | [ct] .watch9 #watch9-info { 225 | margin-left: 64px; 226 | font-size: 1.4rem; 227 | font-weight: 400; 228 | line-height: 2.1rem; 229 | } 230 | [ct] .watch9 #watch9-info:not([expanded]) #watch9-description { 231 | max-height: 60px; 232 | overflow: hidden; 233 | } 234 | [ct] .watch9 .emerald-link { 235 | color: var(--yt-spec-call-to-action, var(--bt-blue)); 236 | } 237 | [ct] .watch9 .watch9-expand { 238 | color: var(--yt-expand-color); 239 | display: inline-block; 240 | margin-top: 8px; 241 | font-size: 1.3rem; 242 | font-weight: 500; 243 | letter-spacing: .007px; 244 | text-transform: uppercase; 245 | cursor: pointer; 246 | } 247 | [ct] .watch9 #watch9-info[expanded] #watch9-expand, 248 | [ct] .watch9 #watch9-info:not([expanded]) #watch9-collapse { 249 | display: none; 250 | } 251 | [ct] .watch9b .watch9a-elem, 252 | [ct] .watch9:not(.watch9b) .watch9b-elem { 253 | display: none !important; 254 | } -------------------------------------------------------------------------------- /chrome beta/css/menus.css: -------------------------------------------------------------------------------- 1 | /* multiple dropdowns probably */ 2 | html[menu-style="unrounded"] { 3 | --paper-menu-button-content-border-radius: 0 !important; 4 | } 5 | /* sort by */ 6 | html[menu-style="unrounded"] .dropdown-content.tp-yt-paper-menu-button, 7 | html[menu-style="unrounded"] yt-dropdown-menu[modern-dialogs] #menu.yt-dropdown-menu { 8 | border-radius: 0 !important; 9 | } 10 | 11 | /* Thanks to UnderscoreAngel for the code in this section */ 12 | /*Fix for the rounded stuff*/ 13 | 14 | /*More Popup in watch page*/ 15 | html[menu-style="unrounded"] ytd-menu-popup-renderer { 16 | border-radius: 0px; 17 | } 18 | 19 | /*Share Popup in watch page*/ 20 | html[menu-style="unrounded"] tp-yt-paper-dialog[modern] { 21 | border-radius: 0px; 22 | } 23 | 24 | /*buttons in comments*/ 25 | html[menu-style="unrounded"] ytd-comments .yt-spec-button-shape-next--size-m { 26 | height: 32px; 27 | border-radius: 2px; 28 | } 29 | 30 | /*Search Bar Results (this one is not full i can't find the other stuff that makes it rounded)*/ 31 | html[menu-style="unrounded"] .sbsb_a { 32 | border-radius: 3px; 33 | } 34 | 35 | /*this is a certified "Show Chat Replay" Moment*/ 36 | html[menu-style="unrounded"] ytd-watch-flexy #secondary .yt-spec-button-shape-next--size-m { 37 | border-radius: 1px; 38 | } 39 | 40 | /*Notification & Account Panel*/ 41 | html[menu-style="unrounded"] ytd-multi-page-menu-renderer { 42 | /* display: inline-block; */ 43 | border-radius: 0px; 44 | 45 | } 46 | 47 | /*Clips Panel*/ 48 | html[menu-style="unrounded"] ytd-engagement-panel-section-list-renderer[modern-panels] { 49 | border-radius: 0px; 50 | overflow: hidden; 51 | } 52 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbdd_a { 53 | margin-top: -4px; 54 | } 55 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbdd_b { 56 | border-radius: 0; 57 | } 58 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbsb_a { 59 | padding: 2px; 60 | border-radius: 0px; 61 | } 62 | html[menu-style="unrounded"]:not([layout^="polymer"]) .gsfs { 63 | font-size: 16px; 64 | padding: 0px 4px !important; 65 | } 66 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbsb_c { 67 | line-height: 22px; 68 | } 69 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbqs_c::before { 70 | display: none; 71 | } 72 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbfl_a { 73 | margin: -5px 0px -5px 0; 74 | } -------------------------------------------------------------------------------- /chrome beta/css/psuedo-static.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* page man */ 3 | html[pseudo-static] ytd-app:not([masthead-hidden]) #page-manager { 4 | max-width: 1000px; 5 | } 6 | /* WP */ 7 | html[pseudo-static] [ct-watch-elem] #columns { 8 | margin-left: calc(var(--bt-sidebar-width) + 40px); 9 | } 10 | /* Topbar. This code works perfectly and is all that's needed for all pages. */ 11 | /* inner */ 12 | html[pseudo-static] ytd-masthead { 13 | width: calc(100vw - 80px); 14 | margin: 0 auto; 15 | } 16 | html[pseudo-static] #container.ytd-masthead { 17 | padding: 0; 18 | } 19 | /* Section subs page */ 20 | html[pseudo-static] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) { 21 | max-width: calc(var(--tubek12-static-page-width) - var(--app-drawer-width)); 22 | } 23 | /* Section Watch Page */ 24 | /* This code makes the page itself static, as well as the OUTER video player, but not the controls or the video element itself. */ 25 | html[pseudo-static] [ct-watch-elem] { 26 | --ytd-watch-flexy-player-width: 640px !important; 27 | --ytd-watch-flexy-player-height: 360px !important; 28 | } 29 | /* This code is to make reduce margin with related. */ 30 | html[pseudo-static] [ct-watch-elem] #primary { 31 | padding-right: 0; 32 | } 33 | html[pseudo-static] [ct-watch-elem] #primary { 34 | width: 641px !important; 35 | min-width: 641px !important; 36 | max-width: 641px !important; 37 | width: var(--bt-player-width) !important; 38 | min-width: var(--bt-player-width) !important; 39 | max-width: var(--bt-player-width) !important; 40 | } 41 | /* SubSection Video */ 42 | /* This code seems to make videos work pretty much perfectly, except for non 16:9 videos. The min-height property is required for 4:3 videos to keep a consistent width. 43 | html[pseudo-static] ytd-watch-flexy #movie_player[aria-label="YouTube Video Player"] video { 44 | width: auto !important; 45 | width: 640px !important; 46 | display: flex; 47 | max-width: 640px !important; 48 | height: auto !important; 49 | max-height: 366px !important; 50 | align-self: center !important; 51 | min-height: 360px !important; 52 | } 53 | /* This code is necessary for non 16:9 videos to keep a consistent width. * 54 | html[pseudo-static] #movie_player[aria-label="YouTube Video Player"] .ytp-chrome-bottom { 55 | width: 620px !important; 56 | } 57 | /* These variables are required for non 16:9 non 1:1 videos to keep a consistent width. 58 | html[pseudo-static] ytd-watch-flexy[flexy] { 59 | --ytd-watch-flexy-width-ratio: 16 !important; 60 | --ytd-watch-flexy-height-ratio: 9 !important; 61 | --ytd-watch-flexy-space-below-player: 136px; 62 | --ytd-watch-flexy-non-player-height: 360px !important; 63 | --ytd-watch-flexy-non-player-width: 641px !important; 64 | --ytd-watch-flexy-min-player-height: 360px !important; 65 | --ytd-watch-flexy-min-player-width: 641px !important; 66 | --ytd-watch-flexy-max-player-height: 360px !important; 67 | --ytd-watch-flexy-max-player-width: 641px !important; 68 | } 69 | html[pseudo-static] { 70 | --bt-player-width: 640px; 71 | --bt-player-height: 360px; 72 | } 73 | /* primary */ 74 | html[pseudo-static] [ct-watch-elem] #primary { 75 | margin-left: 0; 76 | padding-right: 0; 77 | } 78 | html[pseudo-static] #secondary-inner { 79 | width: 330px !important; 80 | } 81 | html[pseudo-static] #secondary-inner { 82 | width: 360px !important; 83 | } 84 | html[pseudo-static] [ct-watch-elem] #secondary-inner { 85 | width: 380px !important; 86 | } 87 | /* This code makes sidebar attach itself to edge of page, instead of screen. Needs to be disabled on watch pages. */ 88 | html[pseudo-static] ytd-app:not([masthead-hidden]) tp-yt-app-drawer { 89 | left: 40px !important; 90 | } 91 | /* Section playlist page */ 92 | html[pseudo-static] ytd-playlist-header-renderer { 93 | left: initial !important; 94 | } 95 | html[pseudo-static] [ct-watch-elem] #primary { 96 | max-width: calc((100vh - (var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))) * (${window.screen.width} / ${window.screen.height})) !important; 97 | min-width: calc(var(--ytd-watch-flexy-min-player-height) * (${window.screen.width} / ${window.screen.height})) !important; 98 | } 99 | html[pseudo-static] #player-container-outer { 100 | max-width: 640px !important; 101 | min-width: 0 !important; 102 | position: relative !important; 103 | } 104 | html[pseudo-static] #player-container-inner { 105 | padding-top: calc(${window.screen.height} / ${window.screen.width} * 100%) !important; 106 | } 107 | html[pseudo-static] .html5-video-container { 108 | width:100% !important; 109 | height:100% !important; 110 | } 111 | html[pseudo-static] .html5-video-container video { 112 | width:100% !important; 113 | height:100% !important; 114 | left:0 !important; 115 | top: 0 !important; 116 | object-fit: contain !important; 117 | } 118 | 119 | html[pseudo-static] [ct-watch-elem] #player { 120 | width: 641px; 121 | width: var(--bt-player-width) !important; 122 | } 123 | 124 | html[pseudo-static] [ct-watch-elem] #primary { 125 | margin-left: 568px !important; 126 | } -------------------------------------------------------------------------------- /chrome beta/css/static-scrolling.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* This code makes everything static on most pages */ 3 | ytd-app[static-scrolling] #masthead-container.ytd-app { 4 | position: absolute; 5 | } 6 | ytd-app[static-scrolling] #guide { 7 | position: absolute; 8 | } 9 | /* Chips. */ 10 | ytd-app[static-scrolling][location="home"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 11 | position: absolute !important; 12 | } 13 | /* Section playlist page */ 14 | ytd-app[static-scrolling] ytd-playlist-header-renderer { 15 | left: initial !important; 16 | position: absolute !important; 17 | } 18 | ytd-app[static-scrolling] #footer { 19 | pointer-events: all; 20 | } 21 | /* fix scroll */ 22 | ytd-app[static-scrolling] #guide-inner-content.ytd-app { 23 | scrollbar-width: none !important; 24 | background: none; 25 | z-index: 0; 26 | overscroll-behavior: unset !important; 27 | pointer-events: none; 28 | } 29 | ytd-app[static-scrolling] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer { 30 | pointer-events: all; 31 | } 32 | ytd-app[static-scrolling] tp-yt-paper-item:focus::before.tp-yt-paper-item.tp-yt-paper-item:focus::before { 33 | pointer-events: all !important; 34 | } -------------------------------------------------------------------------------- /chrome beta/css/static.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* Topbar. This code works perfectly and is all that's needed for all pages. */ 3 | ytd-app[static] ytd-masthead { 4 | width: var(--tubek12-static-page-width) !important; 5 | } 6 | ytd-app[static] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled), 7 | html[layout="hitchhiker-2013-1"][location="channel"] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) { 8 | max-width: calc(var(--tubek12-static-page-width) - var(--app-drawer-width)) !important; 9 | } 10 | html[channel-style^="cosmicpanda"][location="channel"] ytd-app:not([masthead-hidden]) #page-manager { 11 | max-width: 1000px; 12 | margin: 0 auto; 13 | } 14 | html[layout="hitchhiker-2013-1"][location="channel"] tp-yt-app-drawer { 15 | display: none; 16 | } 17 | /* This code makes the page itself static, as well as the OUTER video player, but not the controls or the video element itself. */ 18 | html[static] [ct-watch-elem] { 19 | --ytd-watch-flexy-player-width: 586px !important; 20 | --ytd-watch-flexy-player-height: 330px !important; 21 | --ytd-watch-flexy-player-width: 640px !important; 22 | --ytd-watch-flexy-player-height: 360px !important; 23 | } 24 | /* This code is to make reduce margin with related. */ 25 | html[static] [ct-watch-elem] #primary { 26 | padding-right: 0; 27 | } 28 | html[static] [ct-watch-elem] #columns #primary { 29 | width: 586px !important; 30 | min-width: 586px !important; 31 | max-width: 586px !important; 32 | width: 640px !important; 33 | min-width: 640px !important; 34 | max-width: 640px !important; 35 | } 36 | /* SubSection Video */ 37 | /* This code seems to make videos work pretty much perfectly, except for non 16:9 videos. The min-height property is required for 4:3 videos to keep a consistent width. */ 38 | html[static] [ct-watch-elem] #movie_player[aria-label="YouTube Video Player"] video { 39 | width: auto !important; 40 | width: 586px !important; 41 | margin: 0 auto !important; 42 | display: flex; 43 | max-width: 586px !important; 44 | height: auto !important; 45 | max-height: 336px !important; 46 | align-self: center !important; 47 | min-height: 330px !important; 48 | 49 | width: auto !important; 50 | width: 640px !important; 51 | margin: 0 auto !important; 52 | display: flex; 53 | max-width: 640px !important; 54 | height: auto !important; 55 | max-height: 366px !important; 56 | align-self: center !important; 57 | min-height: 360px !important; 58 | } 59 | /* This code is necessary for non 16:9 videos to keep a consistent width. */ 60 | html[static] #movie_player[aria-label="YouTube Video Player"] .ytp-chrome-bottom { 61 | width: 566px !important; 62 | width: 620px !important; 63 | } 64 | /* These variables are required for non 16:9 non 1:1 videos to keep a consistent width. */ 65 | html[static] [ct-watch-elem][flexy] { 66 | --ytd-watch-flexy-width-ratio: 16 !important; 67 | --ytd-watch-flexy-height-ratio: 9 !important; 68 | --ytd-watch-flexy-space-below-player: 136px; 69 | --ytd-watch-flexy-non-player-height: 330px !important; 70 | --ytd-watch-flexy-non-player-width: 586px !important; 71 | --ytd-watch-flexy-min-player-height: 330px !important; 72 | --ytd-watch-flexy-min-player-width: 586px !important; 73 | --ytd-watch-flexy-max-player-height: 330px !important; 74 | --ytd-watch-flexy-max-player-width: 586px !important; 75 | 76 | --ytd-watch-flexy-width-ratio: 16 !important; 77 | --ytd-watch-flexy-height-ratio: 9 !important; 78 | --ytd-watch-flexy-space-below-player: 136px; 79 | --ytd-watch-flexy-non-player-height: 360px !important; 80 | --ytd-watch-flexy-non-player-width: 640px !important; 81 | --ytd-watch-flexy-min-player-height: 360px !important; 82 | --ytd-watch-flexy-min-player-width: 640px !important; 83 | --ytd-watch-flexy-max-player-height: 360px !important; 84 | --ytd-watch-flexy-max-player-width: 640px !important; 85 | 86 | } 87 | html[static] { 88 | --bt-player-width: 586px; 89 | --bt-player-height: 330px; 90 | 91 | --bt-player-width: 640px; 92 | --bt-player-height: 360px; 93 | } 94 | /* primary */ 95 | html[static] [ct-watch-elem] #primary { 96 | margin-left: 0 !important; 97 | padding-left: 0 !important; 98 | } 99 | html[static] [ct-watch-elem] #secondary { 100 | padding-right: 0 !important; 101 | } 102 | /* 103 | ytd-app[static] #secondary-inner { 104 | width: 330px !important; 105 | } 106 | ytd-app[static] #secondary-inner { 107 | width: 360px !important; 108 | } 109 | */ 110 | html[static] #secondary-inner { 111 | width: 380px !important; 112 | 113 | width: 330px !important; 114 | } 115 | /* Section pages that aren't watch */ 116 | /* This code makes the screen static on pages that aren't watch. Absolutely must be disabled on watch page. */ 117 | html[static] ytd-app:not([masthead-hidden]) { 118 | width: var(--tubek12-static-page-width) !important; 119 | margin: var(--tubek12-static-page-margin) !important; 120 | } 121 | /* This code makes sidebar attach itself to edge of page, instead of screen. Needs to be disabled on watch pages. */ 122 | html[static] ytd-app:not([masthead-hidden]) tp-yt-app-drawer { 123 | left: initial !important; 124 | } 125 | /* Section playlist page */ 126 | ytd-app[static] ytd-playlist-header-renderer { 127 | left: initial !important; 128 | } 129 | html[static] [ct-watch-elem] #primary { 130 | max-width: calc((100vh - (var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))) * (${window.screen.width} / ${window.screen.height})) !important; 131 | min-width: calc(var(--ytd-watch-flexy-min-player-height) * (${window.screen.width} / ${window.screen.height})) !important; 132 | } 133 | html[static] #player-container-outer { 134 | max-width: 586px !important; 135 | 136 | max-width: 640px !important; 137 | min-width: 0 !important; 138 | position: relative !important; 139 | } 140 | html[static] #player-container-inner { 141 | padding-top: calc(${window.screen.height} / ${window.screen.width} * 100%) !important; 142 | } 143 | html[static] .html5-video-container { 144 | width:100% !important; 145 | height:100% !important; 146 | } 147 | html[static] .html5-video-container video { 148 | width:100% !important; 149 | height:100% !important; 150 | left:0 !important; 151 | top: 0 !important; 152 | object-fit: contain !important; 153 | } -------------------------------------------------------------------------------- /chrome beta/images/128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome beta/images/128.png -------------------------------------------------------------------------------- /chrome beta/images/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome beta/images/16.png -------------------------------------------------------------------------------- /chrome beta/images/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome beta/images/32.png -------------------------------------------------------------------------------- /chrome beta/images/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome beta/images/48.png -------------------------------------------------------------------------------- /chrome beta/images/beamtubebg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome beta/images/beamtubebg.png -------------------------------------------------------------------------------- /chrome beta/images/ctlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome beta/images/ctlogo.png -------------------------------------------------------------------------------- /chrome beta/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome beta/images/logo.png -------------------------------------------------------------------------------- /chrome beta/images/open-in-new-window-button-2-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /chrome beta/initial-setup.js: -------------------------------------------------------------------------------- 1 | let browser = chrome; 2 | let minVersion = 53; 3 | let browserVersion; 4 | let storage = browser.storage.local; 5 | if (navigator.userAgent.match(/Firefox\/([^\s]+)/)) { 6 | browserVersion = parseInt(navigator.userAgent.match(/Firefox\/([^\s]+)/)[1]); 7 | if (browserVersion >= minVersion) { 8 | storage = browser.storage.sync; 9 | } 10 | } 11 | let BTConfig; 12 | let playerSize = {}; 13 | let aspectRatio = (window.screen.width / window.screen.height).toFixed(2); 14 | const defaultSettings = { 15 | // 2017 layout is default just so the user knows for sure the extension actually does something 16 | "layoutSelect": "hitchhiker-2017", 17 | "relatedSize": "auto", 18 | "searchbarStyle": "autoSearchBar", 19 | "channelVidsDropdown": "CVDDauto", 20 | "channelVidsPerRow": "CVPRauto", 21 | "homepageVidsPerRow": "HPVPRauto", 22 | "homepageType": "HPTypeAuto", 23 | "subsVidsPerRow": "SVPRauto", 24 | "videoRendererSize": "VRSizeAuto", 25 | "videoPlayerSize": "PS854x480", 26 | "videoPlayerStyle": "PSTauto", 27 | "relatedHeader": "RHauto", 28 | "watchMetadata": "WMauto", 29 | "hideShortsSubs": "HSSauto", 30 | "showVideosLink": "SVLauto", 31 | "useAppbar": "UABauto", 32 | "appbarMode": "ABMunpinned", 33 | "favicon": "faviAuto", 34 | "blockRGW": true, 35 | "FSNoScroll": true, 36 | "noCast": true, 37 | "squarePfp": false, 38 | "squareVid": false, 39 | "dontLoopPlaylists": false, 40 | /* sidebar */ 41 | "alwaysShowSidebar": false, 42 | "homeSidebarBtn": true, 43 | "wtwSidebarBtn": false, 44 | "NOTwtwSidebarBtn": false, 45 | "fytSidebarBtn": false, 46 | "myChannelSidebarBtn": true, 47 | "lowerCaseC": false, 48 | "shortsSidebarBtn": false, 49 | "trendingSidebarBtn": true, 50 | "subsSidebarBtn": true, 51 | /* topbar */ 52 | "logoEndpoint": "LEHome", 53 | "iUseRYD": true, 54 | "useRYDAPI": true, 55 | /* tweaks */ 56 | "loopByDefault": false, 57 | "noJoin": true, 58 | "noClip": true, 59 | "noThanks": true, 60 | "noDownload": true, 61 | "betterSearch": true, 62 | "thumbFadeIn": false, 63 | "noInfi": false, 64 | "noFlexy": true, 65 | "randomSubCount": false, 66 | "viewCountFogging": false, 67 | "showNew": true, 68 | "showChangelog": true 69 | }; 70 | storage.set({BTDefaultConfig: defaultSettings}); 71 | initiate(); 72 | function initiate() { 73 | storage.get(['BTConfig'], function(result) { 74 | if (Object.keys(result).length == 0) { 75 | storage.set({BTConfig: defaultSettings}); 76 | BTConfig = defaultSettings; 77 | } else { 78 | //check which default settings are missing (e.g. due to updates) and add them 79 | for (let i in defaultSettings) { //loop through default settings 80 | let settingFound = false; 81 | for (let j in result.BTConfig) { //loop through current settings 82 | if (i == j) { 83 | settingFound = true; 84 | break; 85 | } 86 | } 87 | if (!settingFound) { 88 | console.log('[BT Log] New setting ' + i + ' is now available!'); 89 | result.BTConfig[i] = defaultSettings[i]; 90 | storage.set({BTConfig: result.BTConfig}); 91 | } 92 | } 93 | BTConfig = result.BTConfig; //reassign in case missing settings were added 94 | playerSize.width = 555; 95 | playerSize.height = Math.ceil(playerSize.width / aspectRatio); 96 | } 97 | }); 98 | } -------------------------------------------------------------------------------- /chrome beta/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CustomTube - Restore the Old YouTube Layout", 3 | "version": "1.3.0.2", 4 | "description": "Choose your own YouTube layout, and more!", 5 | "permissions": ["storage"], 6 | "action": { 7 | "default_popup": "popup.html", 8 | "default_icon": { 9 | "16": "images/16.png", 10 | "32": "images/32.png", 11 | "48": "images/48.png", 12 | "128": "images/128.png" 13 | } 14 | }, 15 | "icons": { 16 | "16": "images/16.png", 17 | "32": "images/32.png", 18 | "48": "images/48.png", 19 | "128": "images/128.png" 20 | }, 21 | "background": { 22 | "service_worker": "background.js" 23 | }, 24 | "content_scripts": [ 25 | { 26 | "matches": ["*://*.youtube.com/*"], 27 | "exclude_matches": ["*://*.youtube.com/embed/*"], 28 | "css": [ 29 | "general.css", 30 | "css/bt-universalized-elements.css", 31 | "css/static.css", 32 | "css/static-scrolling.css", 33 | "css/psuedo-static.css", 34 | "css/rich-grid.css", 35 | "css/topbar.css", 36 | "css/sidebar.css", 37 | "css/chips.css", 38 | "css/search.css", 39 | "css/watch-page.css", 40 | "css/watch-page-blobs.css", 41 | "css/ltod.css", 42 | "css/description.css", 43 | "css/comments.css", 44 | "css/playlist-panel.css", 45 | "css/channel-rework.css", 46 | "css/related-videos.css", 47 | "css/cosmicpanda.css", 48 | "css/polymer.css", 49 | "css/sub-btn.css", 50 | "css/menus.css", 51 | "css/player.css", 52 | "css/appbar.css", 53 | "css/global-color-palette.css", 54 | "css/emerald-general.css", 55 | "css/emerald-watch4.css", 56 | "css/emerald-watch5.css", 57 | "css/emerald-watch7.css", 58 | "css/emerald-watch8.css", 59 | "css/emerald-watch9.css", 60 | "compatibility.css" 61 | ], 62 | "run_at": "document_start" 63 | }, 64 | { 65 | "matches": ["*://*.youtube.com/*"], 66 | "exclude_matches": ["*://*.youtube.com/embed/*"], 67 | "js": [ 68 | "initial-setup.js" 69 | ], 70 | "run_at": "document_start" 71 | }, 72 | { 73 | "matches": ["*://*.youtube.com/*"], 74 | "exclude_matches": ["*://*.youtube.com/embed/*"], 75 | "js": ["main.js"] 76 | } 77 | 78 | ], 79 | "web_accessible_resources": [ 80 | { 81 | "resources": ["/images/*"], 82 | "matches": ["*://*.youtube.com/*"] 83 | }, 84 | { 85 | "resources": ["css/*"], 86 | "matches": ["*://*.youtube.com/*"] 87 | }, 88 | { 89 | "resources": ["scripts/*"], 90 | "matches": ["*://*.youtube.com/*"] 91 | } 92 | ], 93 | "manifest_version": 3 94 | } -------------------------------------------------------------------------------- /chrome beta/scripts/logo-endpoint.js: -------------------------------------------------------------------------------- 1 | cbFunction(); 2 | document.addEventListener("yt-page-data-updated", cbFunction); 3 | function cbFunction() { 4 | setTimeout(doNext, 50); 5 | setTimeout(doNext, 500); 6 | function doNext() { 7 | var ytdMasthead = document.querySelector("ytd-masthead"); 8 | ytdMasthead.data.logo.topbarLogoRenderer.endpoint.browseEndpoint.browseId = "FEsubscriptions"; 9 | ytdMasthead.data.logo.topbarLogoRenderer.endpoint.commandMetadata.webCommandMetadata.url = "/feed/subscriptions"; 10 | } 11 | } -------------------------------------------------------------------------------- /chrome beta/scripts/my-channel-btn.js: -------------------------------------------------------------------------------- 1 | var finished = false; 2 | var urlVar = "placeholder"; 3 | if (finished != true) { 4 | if (document.querySelector("html[my-channel-btn='true']") != null) { 5 | var YVData = document.querySelector("ytd-guide-section-renderer:nth-child(1) ytd-guide-collapsible-section-entry-renderer ytd-guide-entry-renderer:nth-child(2)").data; 6 | document.querySelector("#bt-my-channel-button").data = YVData; 7 | var urlVarTemp = document.querySelector("#bt-my-channel-button").data.navigationEndpoint.urlEndpoint; 8 | if (urlVar == "placeholder") { 9 | urlVar = urlVarTemp; 10 | } 11 | var cutString = JSON.stringify(urlVar).split('l/'); 12 | var theString = cutString[1]; 13 | var cutString1 = theString.split('/'); 14 | var theString1 = cutString1[0]; 15 | console.log(theString1); 16 | sessionStorage.setItem("nebula-channel-url", theString1); 17 | var chanUrl = sessionStorage.getItem("nebula-channel-url"); 18 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.browseEndpoint = { browseId: chanUrl }; 19 | //document.querySelector("#bt-my-channel-button").data.trackingParams = "BeamTubeButtonOne"; 20 | document.querySelector("ytd-guide-section-renderer ytd-guide-entry-renderer:not(#bt-my-channel-button)").data.navigationEndpoint.browseEndpoint.browseId = "FEwhat_to_watch"; 21 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.browseEndpoint.canonicalBaseUrl = undefined; 22 | document.querySelector("#bt-my-channel-button").data.formattedTitle.simpleText = "My Channel"; 23 | document.querySelector("#bt-my-channel-button").data.icon.iconType = "ACCOUNT_BOX"; 24 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.rootVe = 3611; 25 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.url = "/channel/" + theString1; 26 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.webPageType = "WEB_PAGE_TYPE_CHANNEL"; 27 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.urlEndpoint = undefined; 28 | setTimeout(redFunct, 10); 29 | function redFunct() { 30 | if (document.querySelector("html[my-channel-btn='true']") != null) { 31 | var cCase = sessionStorage.getItem("lowerCaseC"); 32 | document.querySelector("html").setAttribute("my-channel-btn", "true"); 33 | if (cCase == "false") { 34 | document.querySelector("#bt-my-channel-button yt-formatted-string").innerText = "My Channel"; 35 | document.querySelector("#bt-my-channel-button #endpoint").title = "My Channel"; 36 | } 37 | if (cCase == "true") { 38 | document.querySelector("#bt-my-channel-button yt-formatted-string").innerText = "My channel"; 39 | document.querySelector("#bt-my-channel-button #endpoint").title = "My channel"; 40 | } 41 | } 42 | //document.querySelector("#bt-your-vids-button").remove(); 43 | else { 44 | document.querySelector("#bt-my-channel-button").remove(); 45 | } 46 | sessionStorage.setItem("nebula-done-my-channel", "true"); 47 | } 48 | finished == true; 49 | } 50 | } -------------------------------------------------------------------------------- /chrome beta/scripts/resize.js: -------------------------------------------------------------------------------- 1 | //document.addEventListener("yt-page-data-updated", delayedResize); 2 | /*var loopThroughResize = setInterval(function() { 3 | if (document.querySelector("html[location='watch'] ytd-watch-flexy:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 4 | doResize(); 5 | } 6 | }, 100000);*/ 7 | var checkIfNeedResize = setInterval(function() { 8 | if (document.querySelector("html[location='watch'] [ct-watch-elem]:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 9 | var ctrls = document.querySelector('.ytp-chrome-bottom'); 10 | var offset = document.querySelector("html").getAttribute('player-offset'); 11 | var width = document.querySelector("html").getAttribute('player-width'); 12 | width = parseInt(width); 13 | offset = parseInt(offset); 14 | width = width + offset; 15 | var ctrlsWidth = ctrls.style.width; 16 | if (ctrlsWidth != width) { 17 | doResize(); 18 | } 19 | } 20 | }, 2000); 21 | setTimeout(checkIfNeedResize, 10); 22 | window.addEventListener('resize', () => { 23 | let repeatInsert = setInterval(() => { 24 | doResize(); 25 | }, 500); 26 | setTimeout(() => { 27 | clearInterval(repeatInsert); 28 | }, 2000); 29 | }); 30 | /* 31 | function delayedResize() { 32 | console.log("delayedResize"); 33 | setTimeout(doResize, 1000); 34 | setTimeout(doResize, 2500); 35 | } 36 | */ 37 | function doResize() { 38 | if (document.querySelector("html[location='watch'] [ct-watch-elem]:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 39 | var player = document.querySelector('#movie_player'); 40 | var offset = document.querySelector("html").getAttribute('player-offset'); 41 | var width = document.querySelector("html").getAttribute('player-width'); 42 | width = parseInt(width); 43 | offset = parseInt(offset); 44 | width = width + offset; 45 | var height = document.querySelector("html").getAttribute('player-height'); 46 | player.setInternalSize(width, height); 47 | } 48 | } -------------------------------------------------------------------------------- /chrome beta/scripts/trending-btn.js: -------------------------------------------------------------------------------- 1 | var finished = false; 2 | var urlVar = "placeholder"; 3 | if (finished != true) { 4 | if (document.querySelector("html[trending-btn='true']") != null) { 5 | var YVData = document.querySelector("#bt-trending-button").data; 6 | document.querySelector("#bt-trending-button-2").data = YVData; 7 | finished == true; 8 | } 9 | } -------------------------------------------------------------------------------- /chrome/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) lightbeam24 4 | Copyright (c) the-omnipotent 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /chrome/background.js: -------------------------------------------------------------------------------- 1 | let browser = chrome; 2 | function handleInstalled(reason) { 3 | browser.storage.sync.get(['BTConfig'], function(result) { 4 | if (Object.keys(result).length > 0 && !result.BTConfig.showChangelog) { 5 | return; 6 | } 7 | else if (reason != "browser_update") { 8 | browser.tabs.create({ 9 | url: `./changelog.html#${reason}` 10 | }); 11 | } 12 | }); 13 | } 14 | 15 | browser.runtime.onInstalled.addListener(reason => { 16 | handleInstalled(reason.reason); 17 | }); -------------------------------------------------------------------------------- /chrome/changelog.js: -------------------------------------------------------------------------------- 1 | function handleChangelog() { 2 | let changelogHeader = document.querySelector('#header'); 3 | let changelogFirstInstallTip = document.querySelector('#fit'); 4 | let changelogVersion = document.querySelector('#version'); 5 | let version = browser.runtime.getManifest().version; 6 | if (!changelogHeader) return; 7 | if (window.location.href.includes('#install')) { 8 | changelogHeader.innerText = "CustomTube was successfully installed!"; 9 | } 10 | else if (window.location.href.includes('#check')) { 11 | changelogHeader.innerText = `CustomTube is currently on version ${version}.`; 12 | } else { 13 | changelogVersion.innerText = `CustomTube has updated to version ${version}!`; 14 | } 15 | } 16 | 17 | handleChangelog(); -------------------------------------------------------------------------------- /chrome/compatibility.css: -------------------------------------------------------------------------------- 1 | /* Code to fix issues that are exclusive to the Chromium port of CustomTube. This file is not present in the Firefox version. */ 2 | 3 | .btc, 4 | .bts { 5 | margin-top: 1px; 6 | } 7 | html[channel-style^="aozora"] #channel-header::after, 8 | html[channel-style^="stargazer"] #channel-header::after { 9 | left: 300px; 10 | } 11 | html[player-style^="2012"] .ytp-big-mode .ytp-right-controls { 12 | margin-top: -5px !important; 13 | } 14 | html[player-style^="2013"] .ytp-big-mode .ytp-right-controls { 15 | margin-top: -2px !important; 16 | } 17 | html[watch-metadata-style^="cosmicpanda"] #bt-above #title yt-formatted-string { 18 | max-height: 30px !important; 19 | overflow-x: visible !important; 20 | } 21 | html[watch-metadata-style^="hitchhiker-2013"][lang^="en"] #owner-sub-count::before, 22 | html[watch-metadata-style^="hitchhiker-2014"][lang^="en"] #owner-sub-count::before { 23 | margin-top: 4px !important; 24 | left: 161px !important; 25 | } 26 | html[watch-metadata-style^="hitchhiker-2013"][lang^="en"] #owner-sub-count::after, 27 | html[watch-metadata-style^="hitchhiker-2014"][lang^="en"] #owner-sub-count::after { 28 | margin-top: 5px !important; 29 | left: 162px !important; 30 | } 31 | html[watch-metadata-style^="hitchhiker-2013-1"][lang^="en"] #owner-sub-count::after { 32 | left: 166px !important; 33 | } 34 | html[watch-metadata-style^="hitchhiker-2013-1"][lang^="en"] #owner-sub-count::before { 35 | left: 167px !important; 36 | } -------------------------------------------------------------------------------- /chrome/css/chips.css: -------------------------------------------------------------------------------- 1 | html[layout^="stargazer"] { 2 | --bt-chips-display: none; 3 | } 4 | html[layout^="aozora"] { 5 | --bt-chips-display: none; 6 | } 7 | html[layout^="cosmicpanda"] { 8 | --bt-chips-display: none; 9 | } 10 | html[chips-style^="hitchhiker"] { 11 | --bt-chips-display: block; 12 | --bt-outer-chips-position: fixed; 13 | --bt-outer-chips-height: 40px; 14 | --bt-outer-chips-top: var(--bt-topbar-height); 15 | --bt-outer-chips-bg: var(--yt-spec-brand-background-primary); 16 | --bt-outer-chips-border-top: none; 17 | --bt-outer-chips-border-bottom: 1px solid var(--bt-section-border-color); 18 | --bt-chip-margin-top: 6px; 19 | --bt-chip-padding-bottom: 3px; 20 | --bt-chip-radius: 0; 21 | --bt-chip-font-size: 13px; 22 | --bt-chip-text-transform: none; 23 | --bt-chip-border-bottom-hover: 3px solid var(--bt-spec-emphasis); 24 | --bt-active-chip-bg: none; 25 | --bt-active-chip-text-color: var(--yt-spec-text-primary); 26 | --bt-active-chip-border: none; 27 | --bt-active-chip-border-bottom: 3px solid var(--bt-spec-emphasis); 28 | --bt-inactive-chip-bg: none; 29 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 30 | --bt-inactive-chip-border: none; 31 | } 32 | html[chips-style^="hitchhiker-2013"] { 33 | --bt-chips-display: none; 34 | --bt-outer-chips-position: absolute; 35 | --bt-outer-chips-height: 40px; 36 | --bt-outer-chips-top: var(--bt-topbar-height); 37 | --bt-outer-chips-bg: var(--yt-spec-brand-background-primary); 38 | --bt-outer-chips-border-top: none; 39 | --bt-outer-chips-border-bottom: 1px solid var(--bt-section-border-color); 40 | --bt-chip-margin-top: 6px; 41 | --bt-chip-padding-bottom: 3px; 42 | --bt-chip-radius: 0; 43 | --bt-chip-font-size: 13px; 44 | --bt-chip-text-transform: none; 45 | --bt-chip-border-bottom-hover: 3px solid var(--bt-spec-emphasis); 46 | --bt-active-chip-bg: none; 47 | --bt-active-chip-text-color: var(--yt-spec-text-primary); 48 | --bt-active-chip-border: none; 49 | --bt-active-chip-border-bottom: 3px solid var(--bt-spec-emphasis); 50 | --bt-inactive-chip-bg: none; 51 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 52 | --bt-inactive-chip-border: none; 53 | } 54 | /*html[layout="polymer-2019"],*//* 55 | html[layout="polymer-2020"] { 56 | --bt-chips-display: none; 57 | }*/ 58 | html[chips-style^="polymer-2019"] { 59 | --bt-outer-chips-position: fixed; 60 | --bt-outer-chips-height: 56px; 61 | --bt-outer-chips-top: var(--bt-topbar-height); 62 | --bt-outer-chips-bg: var(--bt-masthead-bg); 63 | --bt-outer-chips-border-top: none; 64 | --bt-outer-chips-border-bottom: none; 65 | --bt-chip-margin-top: 12px; 66 | --bt-chip-padding-bottom: 0px; 67 | --bt-chip-radius: 2px; 68 | --bt-chip-font-size: 1.4rem; 69 | --bt-chip-font-weight: 500; 70 | --bt-chip-text-transform: uppercase; 71 | --bt-chip-border-bottom-hover: none; 72 | --bt-chip-bg-hover: var(--yt-spec-button-chip-background-hover); 73 | --bt-active-chip-bg: var(--yt-spec-icon-inactive); 74 | --bt-active-chip-text-color: var(--yt-spec-text-primary-inverse); 75 | --bt-active-chip-border: none; 76 | --bt-inactive-chip-bg: var(--yt-spec-badge-chip-background); 77 | --bt-inactive-chip-text-color: var(--bt-gcp-666); 78 | --bt-inactive-chip-border: none; 79 | } 80 | html[chips-style^="polymer-202"] { 81 | --bt-outer-chips-position: fixed; 82 | --bt-outer-chips-height: 56px; 83 | --bt-outer-chips-top: var(--bt-topbar-height); 84 | --bt-outer-chips-bg: var(--bt-masthead-bg); 85 | --bt-outer-chips-border-top: 1px solid var(--yt-spec-10-percent-layer); 86 | --bt-outer-chips-border-bottom: 1px solid var(--yt-spec-10-percent-layer); 87 | --bt-chip-margin-top: 12px; 88 | --bt-chip-padding-bottom: 0px; 89 | --bt-chip-radius: 16px; 90 | --bt-chip-font-size: 1.4rem; 91 | --bt-chip-text-transform: none; 92 | --bt-chip-border-bottom-hover: 1px solid var(--yt-spec-10-percent-layer); 93 | --bt-chip-bg-hover: var(--yt-spec-button-chip-background-hover); 94 | --bt-active-chip-bg: var(--yt-spec-icon-inactive); 95 | --bt-active-chip-text-color: var(--yt-spec-text-primary-inverse); 96 | --bt-active-chip-border: 1px solid var(--yt-spec-10-percent-layer); 97 | --bt-inactive-chip-bg: var(--yt-spec-badge-chip-background); 98 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 99 | --bt-inactive-chip-border: 1px solid var(--yt-spec-10-percent-layer); 100 | } 101 | /* hide chips */ 102 | ytd-browse[page-subtype="home"] ytd-feed-filter-chip-bar-renderer, 103 | ytd-watch-flexy yt-related-chip-cloud-renderer { 104 | display: var(--bt-chips-display) !important; 105 | } 106 | /* BTSection Chips */ 107 | html[chips-style] ytd-feed-filter-chip-bar-renderer:not([not-sticky]) #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 108 | top: var(--bt-outer-chips-top); 109 | position: var(--bt-outer-chips-position); 110 | height: var(--bt-outer-chips-height); 111 | background-color: var(--bt-outer-chips-bg); 112 | border-top: var(--bt-outer-chips-border-top); 113 | border-bottom: var(--bt-outer-chips-border-bottom); 114 | } 115 | /* patch */ 116 | ytd-browse[page-subtype="home"] ytd-feed-filter-chip-bar-renderer { 117 | display: var(--bt-chips-display) !important; 118 | position: fixed !important; 119 | z-index: 1919; 120 | width: calc(100vw - var(--bt-sidebar-width)) !important; 121 | max-width: calc(100vw - var(--bt-sidebar-width)) !important; 122 | min-width: calc(100vw - var(--bt-sidebar-width)) !important; 123 | left: var(--bt-sidebar-width); 124 | } 125 | ytd-feed-filter-chip-bar-renderer #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 126 | width: calc(100vw - var(--bt-sidebar-width)) !important; 127 | } 128 | ytd-feed-filter-chip-bar-renderer #scroll-container.ytd-feed-filter-chip-bar-renderer { 129 | width: calc(98vw - var(--bt-sidebar-width)) !important; 130 | margin: 0 auto; 131 | } 132 | /* patch end */ 133 | /* all chips */ 134 | html[chips-style] yt-chip-cloud-chip-renderer { 135 | margin-top: var(--bt-chip-margin-top); 136 | padding-bottom: var(--bt-chip-padding-bottom); 137 | } 138 | /* selected chip */ 139 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected], 140 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected] { 141 | background-color: var(--bt-active-chip-bg); 142 | color: var(--bt-active-chip-text-color); 143 | font-size: var(--bt-chip-font-size); 144 | border: var(--bt-active-chip-border) !important; 145 | border-radius: var(--bt-chip-radius) !important; 146 | border-bottom: var(--bt-active-chip-border-bottom) !important; 147 | } 148 | /* not selected chip */ 149 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"], 150 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"], 151 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_REFRESH_TO_NOVEL_CHIP"] { 152 | background-color: var(--bt-inactive-chip-bg); 153 | border: var(--bt-inactive-chip-border) !important; 154 | font-size: var(--bt-chip-font-size); 155 | font-weight: var(--bt-chip-font-weight); 156 | text-transform: var(--bt-chip-text-transform); 157 | color: var(--bt-inactive-chip-text-color); 158 | /*padding: 0 var(--ytd-margin-3x); 159 | transition: background-color 0.5s cubic-bezier(0.05,0,0,1);*/ 160 | border-radius: var(--bt-chip-radius); 161 | } 162 | html[chips-style] yt-chip-cloud-chip-renderer:not([selected]):hover { 163 | border: var(--bt-inactive-chip-border) !important; 164 | border-bottom: var(--bt-chip-border-bottom-hover, 0px solid currentcolor) !important; 165 | background-color: var(--bt-chip-bg-hover) !important; 166 | } -------------------------------------------------------------------------------- /chrome/css/cosmicpanda.css: -------------------------------------------------------------------------------- 1 | /* cosmicpanda */ 2 | html[layout^="cosmicpanda"] ytd-masthead { 3 | font-family: arial !important; 4 | } 5 | /* BTSection Topbar */ 6 | /* topbar color */ 7 | html[layout^="cosmicpanda"] ytd-masthead { 8 | background: transparent; 9 | } 10 | /* makes topbar have no bg */ 11 | html[layout^="cosmicpanda"] ytd-masthead[darker-dark-theme] #background.ytd-masthead { 12 | background: transparent !important; 13 | display: none !important; 14 | } 15 | /* topbar color */ 16 | html[layout^="cosmicpanda"] ytd-masthead { 17 | background-image: var(--bt-site-bg) !important; 18 | } 19 | html[layout^="cosmicpanda"] ytd-item-section-renderer { 20 | background-image: var(--bt-site-bg) !important; 21 | } -------------------------------------------------------------------------------- /chrome/css/menus.css: -------------------------------------------------------------------------------- 1 | /* multiple dropdowns probably */ 2 | html[menu-style="unrounded"] { 3 | --paper-menu-button-content-border-radius: 0 !important; 4 | } 5 | /* sort by */ 6 | html[menu-style="unrounded"] .dropdown-content.tp-yt-paper-menu-button, 7 | html[menu-style="unrounded"] yt-dropdown-menu[modern-dialogs] #menu.yt-dropdown-menu { 8 | border-radius: 0 !important; 9 | } 10 | 11 | /* Thanks to UnderscoreAngel for the code in this section */ 12 | /*Fix for the rounded stuff*/ 13 | 14 | /*More Popup in watch page*/ 15 | html[menu-style="unrounded"] ytd-menu-popup-renderer { 16 | border-radius: 0px; 17 | } 18 | 19 | /*Share Popup in watch page*/ 20 | html[menu-style="unrounded"] tp-yt-paper-dialog[modern] { 21 | border-radius: 0px; 22 | } 23 | 24 | /*buttons in comments*/ 25 | html[menu-style="unrounded"] ytd-comments .yt-spec-button-shape-next--size-m { 26 | height: 32px; 27 | border-radius: 2px; 28 | } 29 | 30 | /*Search Bar Results (this one is not full i can't find the other stuff that makes it rounded)*/ 31 | html[menu-style="unrounded"] .sbsb_a { 32 | border-radius: 3px; 33 | } 34 | 35 | /*this is a certified "Show Chat Replay" Moment*/ 36 | html[menu-style="unrounded"] ytd-watch-flexy #secondary .yt-spec-button-shape-next--size-m { 37 | border-radius: 1px; 38 | } 39 | 40 | /*Notification & Account Panel*/ 41 | html[menu-style="unrounded"] ytd-multi-page-menu-renderer { 42 | /* display: inline-block; */ 43 | border-radius: 0px; 44 | 45 | } 46 | 47 | /*Clips Panel*/ 48 | html[menu-style="unrounded"] ytd-engagement-panel-section-list-renderer[modern-panels] { 49 | border-radius: 0px; 50 | overflow: hidden; 51 | } 52 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbdd_a { 53 | margin-top: -4px; 54 | } 55 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbdd_b { 56 | border-radius: 0; 57 | } 58 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbsb_a { 59 | padding: 2px; 60 | border-radius: 0px; 61 | } 62 | html[menu-style="unrounded"]:not([layout^="polymer"]) .gsfs { 63 | font-size: 16px; 64 | padding: 0px 4px !important; 65 | } 66 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbsb_c { 67 | line-height: 22px; 68 | } 69 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbqs_c::before { 70 | display: none; 71 | } 72 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbfl_a { 73 | margin: -5px 0px -5px 0; 74 | } -------------------------------------------------------------------------------- /chrome/css/psuedo-static.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* page man */ 3 | html[pseudo-static] ytd-app:not([masthead-hidden]) #page-manager { 4 | max-width: 1000px; 5 | } 6 | /* WP */ 7 | html[pseudo-static] #columns.ytd-watch-flexy { 8 | margin-left: calc(var(--bt-sidebar-width) + 40px); 9 | } 10 | /* Topbar. This code works perfectly and is all that's needed for all pages. */ 11 | /* inner */ 12 | html[pseudo-static] ytd-masthead { 13 | width: calc(100vw - 80px); 14 | margin: 0 auto; 15 | } 16 | html[pseudo-static] #container.ytd-masthead { 17 | padding: 0; 18 | } 19 | /* Section subs page */ 20 | html[pseudo-static] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) { 21 | max-width: calc(var(--tubek12-static-page-width) - var(--app-drawer-width)); 22 | } 23 | /* Section Watch Page */ 24 | /* This code makes the page itself static, as well as the OUTER video player, but not the controls or the video element itself. */ 25 | html[pseudo-static] ytd-watch-flexy { 26 | --ytd-watch-flexy-player-width: 640px !important; 27 | --ytd-watch-flexy-player-height: 360px !important; 28 | } 29 | /* This code is to make reduce margin with related. */ 30 | html[pseudo-static] #primary.ytd-watch-flexy { 31 | padding-right: 0; 32 | } 33 | html[pseudo-static] ytd-watch-flexy #primary.ytd-watch-flexy { 34 | width: 641px !important; 35 | min-width: 641px !important; 36 | max-width: 641px !important; 37 | } 38 | /* SubSection Video */ 39 | /* This code seems to make videos work pretty much perfectly, except for non 16:9 videos. The min-height property is required for 4:3 videos to keep a consistent width. */ 40 | html[pseudo-static] ytd-watch-flexy #movie_player[aria-label="YouTube Video Player"] video { 41 | width: auto !important; 42 | width: 640px !important; 43 | display: flex; 44 | max-width: 640px !important; 45 | height: auto !important; 46 | max-height: 366px !important; 47 | align-self: center !important; 48 | min-height: 360px !important; 49 | } 50 | /* This code is necessary for non 16:9 videos to keep a consistent width. */ 51 | html[pseudo-static] #movie_player[aria-label="YouTube Video Player"] .ytp-chrome-bottom { 52 | width: 620px !important; 53 | } 54 | /* These variables are required for non 16:9 non 1:1 videos to keep a consistent width. */ 55 | html[pseudo-static] ytd-watch-flexy[flexy] { 56 | --ytd-watch-flexy-width-ratio: 16 !important; 57 | --ytd-watch-flexy-height-ratio: 9 !important; 58 | --ytd-watch-flexy-space-below-player: 136px; 59 | --ytd-watch-flexy-non-player-height: 360px !important; 60 | --ytd-watch-flexy-non-player-width: 641px !important; 61 | --ytd-watch-flexy-min-player-height: 360px !important; 62 | --ytd-watch-flexy-min-player-width: 641px !important; 63 | --ytd-watch-flexy-max-player-height: 360px !important; 64 | --ytd-watch-flexy-max-player-width: 641px !important; 65 | } 66 | html[pseudo-static] { 67 | --bt-player-width: 640px; 68 | --bt-player-height: 360px; 69 | } 70 | /* primary */ 71 | html[pseudo-static] #primary.ytd-watch-flexy { 72 | margin-left: 0; 73 | padding-right: 0; 74 | } 75 | html[pseudo-static] #secondary-inner { 76 | width: 330px !important; 77 | } 78 | html[pseudo-static] #secondary-inner { 79 | width: 360px !important; 80 | } 81 | html[pseudo-static] #secondary-inner { 82 | width: 380px !important; 83 | } 84 | /* This code makes sidebar attach itself to edge of page, instead of screen. Needs to be disabled on watch pages. */ 85 | html[pseudo-static] ytd-app:not([masthead-hidden]) tp-yt-app-drawer { 86 | left: 40px !important; 87 | } 88 | /* Section playlist page */ 89 | html[pseudo-static] ytd-playlist-header-renderer { 90 | left: initial !important; 91 | } 92 | html[pseudo-static] #primary.ytd-watch-flexy { 93 | max-width: calc((100vh - (var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))) * (${window.screen.width} / ${window.screen.height})) !important; 94 | min-width: calc(var(--ytd-watch-flexy-min-player-height) * (${window.screen.width} / ${window.screen.height})) !important; 95 | } 96 | html[pseudo-static] #player-container-outer { 97 | max-width: 640px !important; 98 | min-width: 0 !important; 99 | position: relative !important; 100 | } 101 | html[pseudo-static] #player-container-inner { 102 | padding-top: calc(${window.screen.height} / ${window.screen.width} * 100%) !important; 103 | } 104 | html[pseudo-static] .html5-video-container { 105 | width:100% !important; 106 | height:100% !important; 107 | } 108 | html[pseudo-static] .html5-video-container video { 109 | width:100% !important; 110 | height:100% !important; 111 | left:0 !important; 112 | top: 0 !important; 113 | object-fit: contain !important; 114 | } 115 | html[pseudo-static] ytd-watch-flexy #player { 116 | width: 641px; 117 | } -------------------------------------------------------------------------------- /chrome/css/static-scrolling.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* This code makes everything static on most pages */ 3 | ytd-app[static-scrolling] #masthead-container.ytd-app { 4 | position: absolute; 5 | } 6 | ytd-app[static-scrolling] #guide { 7 | position: absolute; 8 | } 9 | /* Chips. */ 10 | ytd-app[static-scrolling][location="home"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 11 | position: absolute !important; 12 | } 13 | /* Section playlist page */ 14 | ytd-app[static-scrolling] ytd-playlist-header-renderer { 15 | left: initial !important; 16 | position: absolute !important; 17 | } 18 | ytd-app[static-scrolling] #footer { 19 | pointer-events: all; 20 | } 21 | /* fix scroll */ 22 | ytd-app[static-scrolling] #guide-inner-content.ytd-app { 23 | scrollbar-width: none !important; 24 | background: none; 25 | z-index: 0; 26 | overscroll-behavior: unset !important; 27 | pointer-events: none; 28 | } 29 | ytd-app[static-scrolling] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer { 30 | pointer-events: all; 31 | } 32 | ytd-app[static-scrolling] tp-yt-paper-item:focus::before.tp-yt-paper-item.tp-yt-paper-item:focus::before { 33 | pointer-events: all !important; 34 | } -------------------------------------------------------------------------------- /chrome/css/static.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* Topbar. This code works perfectly and is all that's needed for all pages. */ 3 | ytd-app[static] ytd-masthead { 4 | width: var(--tubek12-static-page-width) !important; 5 | } 6 | ytd-app[static] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled), 7 | html[layout="hitchhiker-2013-1"][location="channel"] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) { 8 | max-width: calc(var(--tubek12-static-page-width) - var(--app-drawer-width)) !important; 9 | } 10 | html[channel-style^="cosmicpanda"][location="channel"] ytd-app:not([masthead-hidden]) #page-manager { 11 | max-width: 1000px; 12 | margin: 0 auto; 13 | } 14 | html[layout="hitchhiker-2013-1"][location="channel"] tp-yt-app-drawer { 15 | display: none; 16 | } 17 | /* This code makes the page itself static, as well as the OUTER video player, but not the controls or the video element itself. */ 18 | html[static] ytd-watch-flexy { 19 | --ytd-watch-flexy-player-width: 586px !important; 20 | --ytd-watch-flexy-player-height: 330px !important; 21 | --ytd-watch-flexy-player-width: 640px !important; 22 | --ytd-watch-flexy-player-height: 360px !important; 23 | } 24 | /* This code is to make reduce margin with related. */ 25 | html[static] #primary.ytd-watch-flexy { 26 | padding-right: 0; 27 | } 28 | html[static] ytd-watch-flexy #primary.ytd-watch-flexy { 29 | width: 586px !important; 30 | min-width: 586px !important; 31 | max-width: 586px !important; 32 | width: 640px !important; 33 | min-width: 640px !important; 34 | max-width: 640px !important; 35 | } 36 | /* SubSection Video */ 37 | /* This code seems to make videos work pretty much perfectly, except for non 16:9 videos. The min-height property is required for 4:3 videos to keep a consistent width. */ 38 | html[static] ytd-watch-flexy #movie_player[aria-label="YouTube Video Player"] video { 39 | width: auto !important; 40 | width: 586px !important; 41 | margin: 0 auto !important; 42 | display: flex; 43 | max-width: 586px !important; 44 | height: auto !important; 45 | max-height: 336px !important; 46 | align-self: center !important; 47 | min-height: 330px !important; 48 | 49 | width: auto !important; 50 | width: 640px !important; 51 | margin: 0 auto !important; 52 | display: flex; 53 | max-width: 640px !important; 54 | height: auto !important; 55 | max-height: 366px !important; 56 | align-self: center !important; 57 | min-height: 360px !important; 58 | } 59 | /* This code is necessary for non 16:9 videos to keep a consistent width. */ 60 | html[static] #movie_player[aria-label="YouTube Video Player"] .ytp-chrome-bottom { 61 | width: 566px !important; 62 | width: 620px !important; 63 | } 64 | /* These variables are required for non 16:9 non 1:1 videos to keep a consistent width. */ 65 | html[static] ytd-watch-flexy[flexy] { 66 | --ytd-watch-flexy-width-ratio: 16 !important; 67 | --ytd-watch-flexy-height-ratio: 9 !important; 68 | --ytd-watch-flexy-space-below-player: 136px; 69 | --ytd-watch-flexy-non-player-height: 330px !important; 70 | --ytd-watch-flexy-non-player-width: 586px !important; 71 | --ytd-watch-flexy-min-player-height: 330px !important; 72 | --ytd-watch-flexy-min-player-width: 586px !important; 73 | --ytd-watch-flexy-max-player-height: 330px !important; 74 | --ytd-watch-flexy-max-player-width: 586px !important; 75 | 76 | --ytd-watch-flexy-width-ratio: 16 !important; 77 | --ytd-watch-flexy-height-ratio: 9 !important; 78 | --ytd-watch-flexy-space-below-player: 136px; 79 | --ytd-watch-flexy-non-player-height: 360px !important; 80 | --ytd-watch-flexy-non-player-width: 640px !important; 81 | --ytd-watch-flexy-min-player-height: 360px !important; 82 | --ytd-watch-flexy-min-player-width: 640px !important; 83 | --ytd-watch-flexy-max-player-height: 360px !important; 84 | --ytd-watch-flexy-max-player-width: 640px !important; 85 | 86 | } 87 | html[static] { 88 | --bt-player-width: 586px; 89 | --bt-player-height: 330px; 90 | 91 | --bt-player-width: 640px; 92 | --bt-player-height: 360px; 93 | } 94 | /* primary */ 95 | html[static] #primary.ytd-watch-flexy { 96 | margin-left: 0 !important; 97 | padding-left: 0 !important; 98 | } 99 | html[static] #secondary.ytd-watch-flexy { 100 | padding-right: 0 !important; 101 | } 102 | /* 103 | ytd-app[static] #secondary-inner { 104 | width: 330px !important; 105 | } 106 | ytd-app[static] #secondary-inner { 107 | width: 360px !important; 108 | } 109 | */ 110 | html[static] #secondary-inner { 111 | width: 380px !important; 112 | 113 | width: 330px !important; 114 | } 115 | /* Section pages that aren't watch */ 116 | /* This code makes the screen static on pages that aren't watch. Absolutely must be disabled on watch page. */ 117 | html[static] ytd-app:not([masthead-hidden]) { 118 | width: var(--tubek12-static-page-width) !important; 119 | margin: var(--tubek12-static-page-margin) !important; 120 | } 121 | /* This code makes sidebar attach itself to edge of page, instead of screen. Needs to be disabled on watch pages. */ 122 | html[static] ytd-app:not([masthead-hidden]) tp-yt-app-drawer { 123 | left: initial !important; 124 | } 125 | /* Section playlist page */ 126 | ytd-app[static] ytd-playlist-header-renderer { 127 | left: initial !important; 128 | } 129 | html[static] #primary.ytd-watch-flexy { 130 | max-width: calc((100vh - (var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))) * (${window.screen.width} / ${window.screen.height})) !important; 131 | min-width: calc(var(--ytd-watch-flexy-min-player-height) * (${window.screen.width} / ${window.screen.height})) !important; 132 | } 133 | html[static] #player-container-outer { 134 | max-width: 586px !important; 135 | 136 | max-width: 640px !important; 137 | min-width: 0 !important; 138 | position: relative !important; 139 | } 140 | html[static] #player-container-inner { 141 | padding-top: calc(${window.screen.height} / ${window.screen.width} * 100%) !important; 142 | } 143 | html[static] .html5-video-container { 144 | width:100% !important; 145 | height:100% !important; 146 | } 147 | html[static] .html5-video-container video { 148 | width:100% !important; 149 | height:100% !important; 150 | left:0 !important; 151 | top: 0 !important; 152 | object-fit: contain !important; 153 | } -------------------------------------------------------------------------------- /chrome/images/128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/128.png -------------------------------------------------------------------------------- /chrome/images/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/16.png -------------------------------------------------------------------------------- /chrome/images/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/32.png -------------------------------------------------------------------------------- /chrome/images/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/48.png -------------------------------------------------------------------------------- /chrome/images/beamtubebg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/beamtubebg.png -------------------------------------------------------------------------------- /chrome/images/ctlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/ctlogo.png -------------------------------------------------------------------------------- /chrome/images/dislike-pressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/dislike-pressed.png -------------------------------------------------------------------------------- /chrome/images/dislike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/dislike.png -------------------------------------------------------------------------------- /chrome/images/like-pressed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/like-pressed.png -------------------------------------------------------------------------------- /chrome/images/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/like.png -------------------------------------------------------------------------------- /chrome/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/chrome/images/logo.png -------------------------------------------------------------------------------- /chrome/images/open-in-new-window-button-2-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /chrome/initial-setup.js: -------------------------------------------------------------------------------- 1 | let browser = chrome; 2 | let minVersion = 53; 3 | let browserVersion; 4 | let storage = browser.storage.local; 5 | if (navigator.userAgent.match(/Firefox\/([^\s]+)/)) { 6 | browserVersion = parseInt(navigator.userAgent.match(/Firefox\/([^\s]+)/)[1]); 7 | if (browserVersion >= minVersion) { 8 | storage = browser.storage.sync; 9 | } 10 | } 11 | let BTConfig; 12 | let playerSize = {}; 13 | let aspectRatio = (window.screen.width / window.screen.height).toFixed(2); 14 | const defaultSettings = { 15 | // 2017 layout is default just so the user knows for sure the extension actually does something 16 | "layoutSelect": "hitchhiker-2017", 17 | "relatedSize": "auto", 18 | "searchbarStyle": "autoSearchBar", 19 | "channelVidsDropdown": "CVDDauto", 20 | "channelVidsPerRow": "CVPRauto", 21 | "homepageVidsPerRow": "HPVPRauto", 22 | "subsVidsPerRow": "SVPRauto", 23 | "videoRendererSize": "VRSizeAuto", 24 | "videoPlayerSize": "PS854x480", 25 | "videoPlayerStyle": "PSTauto", 26 | "hideShortsSubs": "HSSauto", 27 | "showVideosLink": "SVLauto", 28 | "useAppbar": "UABauto", 29 | "appbarMode": "ABMunpinned", 30 | "favicon": "faviAuto", 31 | "blockRGW": true, 32 | "FSNoScroll": true, 33 | "noCast": true, 34 | "squarePfp": false, 35 | "squareVid": false, 36 | "dontLoopPlaylists": false, 37 | /* sidebar */ 38 | "alwaysShowSidebar": false, 39 | "homeSidebarBtn": true, 40 | "wtwSidebarBtn": false, 41 | "NOTwtwSidebarBtn": false, 42 | "fytSidebarBtn": false, 43 | "myChannelSidebarBtn": true, 44 | "lowerCaseC": false, 45 | "shortsSidebarBtn": false, 46 | "trendingSidebarBtn": true, 47 | "subsSidebarBtn": true, 48 | /* topbar */ 49 | "logoEndpoint": "LEHome", 50 | "iUseRYD": false, 51 | /* tweaks */ 52 | "loopByDefault": false, 53 | "noJoin": true, 54 | "noClip": true, 55 | "noThanks": true, 56 | "noDownload": true, 57 | "betterSearch": true, 58 | "thumbFadeIn": false, 59 | "noInfi": false, 60 | "noFlexy": true, 61 | "randomSubCount": false, 62 | "viewCountFogging": false, 63 | "showNew": true, 64 | "showChangelog": true 65 | }; 66 | storage.set({BTDefaultConfig: defaultSettings}); 67 | initiate(); 68 | function initiate() { 69 | storage.get(['BTConfig'], function(result) { 70 | if (Object.keys(result).length == 0) { 71 | storage.set({BTConfig: defaultSettings}); 72 | BTConfig = defaultSettings; 73 | } else { 74 | //check which default settings are missing (e.g. due to updates) and add them 75 | for (let i in defaultSettings) { //loop through default settings 76 | let settingFound = false; 77 | for (let j in result.BTConfig) { //loop through current settings 78 | if (i == j) { 79 | settingFound = true; 80 | break; 81 | } 82 | } 83 | if (!settingFound) { 84 | console.log('[BT Log] New setting ' + i + ' is now available!'); 85 | result.BTConfig[i] = defaultSettings[i]; 86 | storage.set({BTConfig: result.BTConfig}); 87 | } 88 | } 89 | BTConfig = result.BTConfig; //reassign in case missing settings were added 90 | playerSize.width = 555; 91 | playerSize.height = Math.ceil(playerSize.width / aspectRatio); 92 | } 93 | }); 94 | } -------------------------------------------------------------------------------- /chrome/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CustomTube - Restore the Old YouTube Layout", 3 | "version": "1.2.7.2", 4 | "description": "Choose your own YouTube layout, and more!", 5 | "permissions": ["storage"], 6 | "action": { 7 | "default_popup": "popup.html", 8 | "default_icon": { 9 | "16": "images/16.png", 10 | "32": "images/32.png", 11 | "48": "images/48.png", 12 | "128": "images/128.png" 13 | } 14 | }, 15 | "icons": { 16 | "16": "images/16.png", 17 | "32": "images/32.png", 18 | "48": "images/48.png", 19 | "128": "images/128.png" 20 | }, 21 | "background": { 22 | "service_worker": "background.js" 23 | }, 24 | "content_scripts": [ 25 | { 26 | "matches": ["*://*.youtube.com/*"], 27 | "exclude_matches": ["*://*.youtube.com/embed/*"], 28 | "css": [ 29 | "general.css", 30 | "css/bt-universalized-elements.css", 31 | "css/static.css", 32 | "css/static-scrolling.css", 33 | "css/psuedo-static.css", 34 | "css/rich-grid.css", 35 | "css/topbar.css", 36 | "css/sidebar.css", 37 | "css/chips.css", 38 | "css/search.css", 39 | "css/watch-page.css", 40 | "css/watch-page-blobs.css", 41 | "css/ltod.css", 42 | "css/description.css", 43 | "css/comments.css", 44 | "css/playlist-panel.css", 45 | "css/channel-rework.css", 46 | "css/related-videos.css", 47 | "css/cosmicpanda.css", 48 | "css/polymer.css", 49 | "css/sub-btn.css", 50 | "css/menus.css", 51 | "css/player.css", 52 | "css/appbar.css", 53 | "css/global-color-palette.css", 54 | "compatibility.css" 55 | ], 56 | "run_at": "document_start" 57 | }, 58 | { 59 | "matches": ["*://*.youtube.com/*"], 60 | "exclude_matches": ["*://*.youtube.com/embed/*"], 61 | "js": [ 62 | "initial-setup.js" 63 | ], 64 | "run_at": "document_start" 65 | }, 66 | { 67 | "matches": ["*://*.youtube.com/*"], 68 | "exclude_matches": ["*://*.youtube.com/embed/*"], 69 | "js": ["main.js"] 70 | } 71 | 72 | ], 73 | "web_accessible_resources": [ 74 | { 75 | "resources": ["/images/*"], 76 | "matches": ["*://*.youtube.com/*"] 77 | }, 78 | { 79 | "resources": ["css/*"], 80 | "matches": ["*://*.youtube.com/*"] 81 | }, 82 | { 83 | "resources": ["scripts/*"], 84 | "matches": ["*://*.youtube.com/*"] 85 | } 86 | ], 87 | "manifest_version": 3 88 | } -------------------------------------------------------------------------------- /chrome/scripts/logo-endpoint.js: -------------------------------------------------------------------------------- 1 | cbFunction(); 2 | document.addEventListener("yt-page-data-updated", cbFunction); 3 | function cbFunction() { 4 | setTimeout(doNext, 50); 5 | setTimeout(doNext, 500); 6 | function doNext() { 7 | var ytdMasthead = document.querySelector("ytd-masthead"); 8 | ytdMasthead.data.logo.topbarLogoRenderer.endpoint.browseEndpoint.browseId = "FEsubscriptions"; 9 | ytdMasthead.data.logo.topbarLogoRenderer.endpoint.commandMetadata.webCommandMetadata.url = "/feed/subscriptions"; 10 | } 11 | } -------------------------------------------------------------------------------- /chrome/scripts/my-channel-btn.js: -------------------------------------------------------------------------------- 1 | var finished = false; 2 | var urlVar = "placeholder"; 3 | if (finished != true) { 4 | if (document.querySelector("html[my-channel-btn='true']") != null) { 5 | var YVData = document.querySelector("ytd-guide-section-renderer:nth-child(1) ytd-guide-collapsible-section-entry-renderer ytd-guide-entry-renderer:nth-child(2)").data; 6 | document.querySelector("#bt-my-channel-button").data = YVData; 7 | var urlVarTemp = document.querySelector("#bt-my-channel-button").data.navigationEndpoint.urlEndpoint; 8 | if (urlVar == "placeholder") { 9 | urlVar = urlVarTemp; 10 | } 11 | var cutString = JSON.stringify(urlVar).split('l/'); 12 | var theString = cutString[1]; 13 | var cutString1 = theString.split('/'); 14 | var theString1 = cutString1[0]; 15 | console.log(theString1); 16 | sessionStorage.setItem("nebula-channel-url", theString1); 17 | var chanUrl = sessionStorage.getItem("nebula-channel-url"); 18 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.browseEndpoint = { browseId: chanUrl }; 19 | //document.querySelector("#bt-my-channel-button").data.trackingParams = "BeamTubeButtonOne"; 20 | document.querySelector("ytd-guide-section-renderer ytd-guide-entry-renderer:not(#bt-my-channel-button)").data.navigationEndpoint.browseEndpoint.browseId = "FEwhat_to_watch"; 21 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.browseEndpoint.canonicalBaseUrl = undefined; 22 | document.querySelector("#bt-my-channel-button").data.formattedTitle.simpleText = "My Channel"; 23 | document.querySelector("#bt-my-channel-button").data.icon.iconType = "ACCOUNT_BOX"; 24 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.rootVe = 3611; 25 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.url = "/channel/" + theString1; 26 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.webPageType = "WEB_PAGE_TYPE_CHANNEL"; 27 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.urlEndpoint = undefined; 28 | setTimeout(redFunct, 10); 29 | function redFunct() { 30 | if (document.querySelector("html[my-channel-btn='true']") != null) { 31 | var cCase = sessionStorage.getItem("lowerCaseC"); 32 | document.querySelector("html").setAttribute("my-channel-btn", "true"); 33 | if (cCase == "false") { 34 | document.querySelector("#bt-my-channel-button yt-formatted-string").innerText = "My Channel"; 35 | document.querySelector("#bt-my-channel-button #endpoint").title = "My Channel"; 36 | } 37 | if (cCase == "true") { 38 | document.querySelector("#bt-my-channel-button yt-formatted-string").innerText = "My channel"; 39 | document.querySelector("#bt-my-channel-button #endpoint").title = "My channel"; 40 | } 41 | } 42 | //document.querySelector("#bt-your-vids-button").remove(); 43 | else { 44 | document.querySelector("#bt-my-channel-button").remove(); 45 | } 46 | sessionStorage.setItem("nebula-done-my-channel", "true"); 47 | } 48 | finished == true; 49 | } 50 | } -------------------------------------------------------------------------------- /chrome/scripts/resize.js: -------------------------------------------------------------------------------- 1 | //document.addEventListener("yt-page-data-updated", delayedResize); 2 | /*var loopThroughResize = setInterval(function() { 3 | if (document.querySelector("html[location='watch'] ytd-watch-flexy:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 4 | doResize(); 5 | } 6 | }, 100000);*/ 7 | var checkIfNeedResize = setInterval(function() { 8 | if (document.querySelector("html[location='watch'] ytd-watch-flexy:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 9 | var ctrls = document.querySelector('.ytp-chrome-bottom'); 10 | var offset = document.querySelector("html").getAttribute('player-offset'); 11 | var width = document.querySelector("html").getAttribute('player-width'); 12 | width = parseInt(width); 13 | offset = parseInt(offset); 14 | width = width + offset; 15 | var ctrlsWidth = ctrls.style.width; 16 | if (ctrlsWidth != width) { 17 | doResize(); 18 | } 19 | } 20 | }, 2000); 21 | setTimeout(checkIfNeedResize, 10); 22 | window.addEventListener('resize', () => { 23 | let repeatInsert = setInterval(() => { 24 | doResize(); 25 | }, 500); 26 | setTimeout(() => { 27 | clearInterval(repeatInsert); 28 | }, 2000); 29 | }); 30 | /* 31 | function delayedResize() { 32 | console.log("delayedResize"); 33 | setTimeout(doResize, 1000); 34 | setTimeout(doResize, 2500); 35 | } 36 | */ 37 | function doResize() { 38 | if (document.querySelector("html[location='watch'] ytd-watch-flexy:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 39 | var player = document.querySelector('#movie_player'); 40 | var offset = document.querySelector("html").getAttribute('player-offset'); 41 | var width = document.querySelector("html").getAttribute('player-width'); 42 | width = parseInt(width); 43 | offset = parseInt(offset); 44 | width = width + offset; 45 | var height = document.querySelector("html").getAttribute('player-height'); 46 | player.setInternalSize(width, height); 47 | } 48 | } -------------------------------------------------------------------------------- /chrome/scripts/trending-btn.js: -------------------------------------------------------------------------------- 1 | var finished = false; 2 | var urlVar = "placeholder"; 3 | if (finished != true) { 4 | if (document.querySelector("html[trending-btn='true']") != null) { 5 | var YVData = document.querySelector("#bt-trending-button").data; 6 | document.querySelector("#bt-trending-button-2").data = YVData; 7 | finished == true; 8 | } 9 | } -------------------------------------------------------------------------------- /firefox beta/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) lightbeam24 4 | Copyright (c) the-omnipotent 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /firefox beta/background.js: -------------------------------------------------------------------------------- 1 | function handleInstalled(reason) { 2 | browser.storage.sync.get(['BTConfig'], function(result) { 3 | if (Object.keys(result).length > 0 && !result.BTConfig.showChangelog) { 4 | return; 5 | } 6 | else if (reason != "browser_update") { 7 | browser.tabs.create({ 8 | url: `./changelog.html#${reason}` 9 | }); 10 | } 11 | }); 12 | } 13 | 14 | browser.runtime.onInstalled.addListener(reason => { 15 | handleInstalled(reason.reason); 16 | }); -------------------------------------------------------------------------------- /firefox beta/changelog.js: -------------------------------------------------------------------------------- 1 | function handleChangelog() { 2 | let changelogHeader = document.querySelector('#header'); 3 | let changelogFirstInstallTip = document.querySelector('#fit'); 4 | let changelogVersion = document.querySelector('#version'); 5 | let version = browser.runtime.getManifest().version; 6 | if (!changelogHeader) return; 7 | if (window.location.href.includes('#install')) { 8 | changelogHeader.innerText = "CustomTube was successfully installed!"; 9 | } 10 | else if (window.location.href.includes('#check')) { 11 | changelogHeader.innerText = `CustomTube is currently on version ${version}.`; 12 | } else { 13 | changelogVersion.innerText = `CustomTube has updated to version ${version}!`; 14 | } 15 | } 16 | 17 | handleChangelog(); -------------------------------------------------------------------------------- /firefox beta/css/chips.css: -------------------------------------------------------------------------------- 1 | html[layout^="stargazer"] { 2 | --bt-chips-display: none; 3 | } 4 | html[layout^="aozora"] { 5 | --bt-chips-display: none; 6 | } 7 | html[layout^="cosmicpanda"] { 8 | --bt-chips-display: none; 9 | } 10 | html[chips-style^="hitchhiker"] { 11 | --bt-chips-display: block; 12 | --bt-outer-chips-position: fixed; 13 | --bt-outer-chips-height: 40px; 14 | --bt-outer-chips-top: var(--bt-topbar-height); 15 | --bt-outer-chips-bg: var(--yt-spec-brand-background-primary); 16 | --bt-outer-chips-border-top: none; 17 | --bt-outer-chips-border-bottom: 1px solid var(--bt-section-border-color); 18 | --bt-chip-margin-top: 6px; 19 | --bt-chip-padding-bottom: 3px; 20 | --bt-chip-radius: 0; 21 | --bt-chip-font-size: 13px; 22 | --bt-chip-text-transform: none; 23 | --bt-chip-border-bottom-hover: 3px solid var(--bt-spec-emphasis); 24 | --bt-active-chip-bg: none; 25 | --bt-active-chip-text-color: var(--yt-spec-text-primary); 26 | --bt-active-chip-border: none; 27 | --bt-active-chip-border-bottom: 3px solid var(--bt-spec-emphasis); 28 | --bt-inactive-chip-bg: none; 29 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 30 | --bt-inactive-chip-border: none; 31 | } 32 | html[chips-style^="hitchhiker-2013"] { 33 | --bt-chips-display: none; 34 | --bt-outer-chips-position: absolute; 35 | --bt-outer-chips-height: 40px; 36 | --bt-outer-chips-top: var(--bt-topbar-height); 37 | --bt-outer-chips-bg: var(--yt-spec-brand-background-primary); 38 | --bt-outer-chips-border-top: none; 39 | --bt-outer-chips-border-bottom: 1px solid var(--bt-section-border-color); 40 | --bt-chip-margin-top: 6px; 41 | --bt-chip-padding-bottom: 3px; 42 | --bt-chip-radius: 0; 43 | --bt-chip-font-size: 13px; 44 | --bt-chip-text-transform: none; 45 | --bt-chip-border-bottom-hover: 3px solid var(--bt-spec-emphasis); 46 | --bt-active-chip-bg: none; 47 | --bt-active-chip-text-color: var(--yt-spec-text-primary); 48 | --bt-active-chip-border: none; 49 | --bt-active-chip-border-bottom: 3px solid var(--bt-spec-emphasis); 50 | --bt-inactive-chip-bg: none; 51 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 52 | --bt-inactive-chip-border: none; 53 | } 54 | /*html[layout="polymer-2019"],*//* 55 | html[layout="polymer-2020"] { 56 | --bt-chips-display: none; 57 | }*/ 58 | html[chips-style^="polymer-2019"] { 59 | --bt-outer-chips-position: fixed; 60 | --bt-outer-chips-height: 56px; 61 | --bt-outer-chips-top: var(--bt-topbar-height); 62 | --bt-outer-chips-bg: var(--bt-masthead-bg); 63 | --bt-outer-chips-border-top: none; 64 | --bt-outer-chips-border-bottom: none; 65 | --bt-chip-margin-top: 12px; 66 | --bt-chip-padding-bottom: 0px; 67 | --bt-chip-radius: 2px; 68 | --bt-chip-font-size: 1.4rem; 69 | --bt-chip-font-weight: 500; 70 | --bt-chip-text-transform: uppercase; 71 | --bt-chip-border-bottom-hover: none; 72 | --bt-chip-bg-hover: var(--yt-spec-button-chip-background-hover); 73 | --bt-active-chip-bg: var(--yt-spec-icon-inactive); 74 | --bt-active-chip-text-color: var(--yt-spec-text-primary-inverse); 75 | --bt-active-chip-border: none; 76 | --bt-inactive-chip-bg: var(--yt-spec-badge-chip-background); 77 | --bt-inactive-chip-text-color: var(--bt-gcp-666); 78 | --bt-inactive-chip-border: none; 79 | } 80 | html[chips-style^="polymer-202"] { 81 | --bt-outer-chips-position: fixed; 82 | --bt-outer-chips-height: 56px; 83 | --bt-outer-chips-top: var(--bt-topbar-height); 84 | --bt-outer-chips-bg: var(--bt-masthead-bg); 85 | --bt-outer-chips-border-top: 1px solid var(--yt-spec-10-percent-layer); 86 | --bt-outer-chips-border-bottom: 1px solid var(--yt-spec-10-percent-layer); 87 | --bt-chip-margin-top: 12px; 88 | --bt-chip-padding-bottom: 0px; 89 | --bt-chip-radius: 16px; 90 | --bt-chip-font-size: 1.4rem; 91 | --bt-chip-text-transform: none; 92 | --bt-chip-border-bottom-hover: 1px solid var(--yt-spec-10-percent-layer); 93 | --bt-chip-bg-hover: var(--yt-spec-button-chip-background-hover); 94 | --bt-active-chip-bg: var(--yt-spec-icon-inactive); 95 | --bt-active-chip-text-color: var(--yt-spec-text-primary-inverse); 96 | --bt-active-chip-border: 1px solid var(--yt-spec-10-percent-layer); 97 | --bt-inactive-chip-bg: var(--yt-spec-badge-chip-background); 98 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 99 | --bt-inactive-chip-border: 1px solid var(--yt-spec-10-percent-layer); 100 | } 101 | /* hide chips */ 102 | ytd-browse[page-subtype="home"] ytd-feed-filter-chip-bar-renderer, 103 | ytd-watch-flexy yt-related-chip-cloud-renderer { 104 | display: var(--bt-chips-display) !important; 105 | } 106 | /* BTSection Chips */ 107 | html[chips-style] ytd-feed-filter-chip-bar-renderer:not([not-sticky]) #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 108 | top: var(--bt-outer-chips-top); 109 | position: var(--bt-outer-chips-position); 110 | height: var(--bt-outer-chips-height); 111 | background-color: var(--bt-outer-chips-bg); 112 | border-top: var(--bt-outer-chips-border-top); 113 | border-bottom: var(--bt-outer-chips-border-bottom); 114 | } 115 | /* patch */ 116 | ytd-browse[page-subtype="home"] ytd-feed-filter-chip-bar-renderer { 117 | display: var(--bt-chips-display) !important; 118 | position: fixed !important; 119 | z-index: 1919; 120 | width: calc(100vw - var(--bt-sidebar-width)) !important; 121 | max-width: calc(100vw - var(--bt-sidebar-width)) !important; 122 | min-width: calc(100vw - var(--bt-sidebar-width)) !important; 123 | left: var(--bt-sidebar-width); 124 | } 125 | ytd-feed-filter-chip-bar-renderer #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 126 | width: calc(100vw - var(--bt-sidebar-width)) !important; 127 | } 128 | ytd-feed-filter-chip-bar-renderer #scroll-container.ytd-feed-filter-chip-bar-renderer { 129 | width: calc(98vw - var(--bt-sidebar-width)) !important; 130 | margin: 0 auto; 131 | } 132 | /* patch end */ 133 | /* all chips */ 134 | html[chips-style] yt-chip-cloud-chip-renderer { 135 | margin-top: var(--bt-chip-margin-top); 136 | padding-bottom: var(--bt-chip-padding-bottom); 137 | } 138 | /* selected chip */ 139 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected], 140 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected] { 141 | background-color: var(--bt-active-chip-bg); 142 | color: var(--bt-active-chip-text-color); 143 | font-size: var(--bt-chip-font-size); 144 | border: var(--bt-active-chip-border) !important; 145 | border-radius: var(--bt-chip-radius) !important; 146 | border-bottom: var(--bt-active-chip-border-bottom) !important; 147 | } 148 | /* not selected chip */ 149 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"], 150 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"], 151 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_REFRESH_TO_NOVEL_CHIP"] { 152 | background-color: var(--bt-inactive-chip-bg); 153 | border: var(--bt-inactive-chip-border) !important; 154 | font-size: var(--bt-chip-font-size); 155 | font-weight: var(--bt-chip-font-weight); 156 | text-transform: var(--bt-chip-text-transform); 157 | color: var(--bt-inactive-chip-text-color); 158 | /*padding: 0 var(--ytd-margin-3x); 159 | transition: background-color 0.5s cubic-bezier(0.05,0,0,1);*/ 160 | border-radius: var(--bt-chip-radius); 161 | } 162 | html[chips-style] yt-chip-cloud-chip-renderer:not([selected]):hover { 163 | border: var(--bt-inactive-chip-border) !important; 164 | border-bottom: var(--bt-chip-border-bottom-hover, 0px solid currentcolor) !important; 165 | background-color: var(--bt-chip-bg-hover) !important; 166 | } -------------------------------------------------------------------------------- /firefox beta/css/compatibility.css: -------------------------------------------------------------------------------- 1 | /* Code to fix issues that are exclusive to the Chromium port of CustomTube. This file is not present in the Firefox version. */ 2 | 3 | .btc, 4 | .bts { 5 | margin-top: 1px; 6 | } -------------------------------------------------------------------------------- /firefox beta/css/cosmicpanda.css: -------------------------------------------------------------------------------- 1 | /* cosmicpanda */ 2 | html[layout^="cosmicpanda"] ytd-masthead { 3 | font-family: arial !important; 4 | } 5 | /* BTSection Topbar */ 6 | /* topbar color */ 7 | html[layout^="cosmicpanda"] ytd-masthead { 8 | background: transparent; 9 | } 10 | /* makes topbar have no bg */ 11 | html[layout^="cosmicpanda"] ytd-masthead[darker-dark-theme] #background.ytd-masthead { 12 | background: transparent !important; 13 | display: none !important; 14 | } 15 | /* topbar color */ 16 | html[layout^="cosmicpanda"] ytd-masthead { 17 | background-image: var(--bt-site-bg) !important; 18 | } 19 | html[layout^="cosmicpanda"] ytd-item-section-renderer { 20 | background-image: var(--bt-site-bg) !important; 21 | } -------------------------------------------------------------------------------- /firefox beta/css/emerald-watch4.css: -------------------------------------------------------------------------------- 1 | [ct][watch-version="watch4"] #emerald-watch-sidebar-channel-videos-toggle { 2 | order: 1; 3 | margin-bottom: 5px; 4 | } 5 | [ct][watch-version="watch4"] #emerald-watch-sidebar-channel-videos { 6 | order: 2; 7 | margin-bottom: 10px; 8 | } 9 | [ct][watch-version="watch4"] #emerald-watch-sidebar-related-toggle { 10 | order: 3; 11 | margin-bottom: 5px; 12 | } 13 | [ct][watch-version="watch4"] #emerald-watch-sidebar-related { 14 | order: 4; 15 | } 16 | html:not([use-related-tabs])[ct][watch-version="watch4"] #emerald-watch-sidebar-content:not([channel-videos-expanded]) #emerald-watch-sidebar-channel-videos, 17 | html:not([use-related-tabs])[ct][watch-version="watch4"] #emerald-watch-sidebar-content:not([related-expanded]) #emerald-watch-sidebar-related { 18 | display: none; 19 | } 20 | 21 | .emerald-watch-sidebar-toggle { 22 | font-size: 16px; 23 | font-weight: bold; 24 | color: var(--bt-gcp-000); 25 | cursor: pointer; 26 | } 27 | .emerald-watch-below-toggle:hover, 28 | .emerald-watch-sidebar-toggle:hover { 29 | color: var(--bt-gcp-666); 30 | } 31 | .emerald-watch-below-toggle { 32 | font-size: 12px; 33 | font-weight: bold; 34 | color: var(--bt-gcp-000); 35 | cursor: pointer; 36 | border-top: 1px solid #ccc; 37 | margin-top: 5px; 38 | padding-top: 5px; 39 | } 40 | .emerald-watch-below-toggle .emerald-toggle-icon, 41 | .emerald-watch-sidebar-toggle .emerald-toggle-icon { 42 | height: 16px; 43 | width: 12px; 44 | margin-right: 4px; 45 | background: url(https://i.imgur.com/2LCU6Hs.png) no-repeat 0 -344px; 46 | } 47 | [related-expanded] #emerald-watch-sidebar-related-toggle .emerald-toggle-icon, 48 | [channel-videos-expanded] #emerald-watch-sidebar-channel-videos-toggle .emerald-toggle-icon, 49 | [comments-expanded] #emerald-watch-comments-toggle .emerald-toggle-icon { 50 | background: url(https://i.imgur.com/2LCU6Hs.png) no-repeat 0 -322px; 51 | } 52 | 53 | 54 | 55 | 56 | #emerald-watch-sidebar:not([description-expanded]) #emerald-side-meta-description { 57 | max-height: 45px; 58 | overflow: hidden; 59 | } 60 | #emerald-side-meta { 61 | background: var(--bt-gcp-eee); 62 | border: 1px solid var(--bt-gcp-ccc); 63 | margin-bottom: 10px; 64 | font-size: 12px; 65 | padding: 6px; 66 | color: var(--bt-gcp-000); 67 | } 68 | #emerald-side-meta-pfp { 69 | width: 46px; 70 | height: 46px; 71 | border: 3px double var(--bt-gcp-999); 72 | background: var(--bt-gcp-fff); 73 | } 74 | #emerald-side-meta-pfp a { 75 | width: 46px; 76 | height: 46px; 77 | } 78 | .watch4-blue { 79 | color: var(--bt-blue); 80 | cursor: pointer; 81 | } 82 | .watch4-blue:hover { 83 | text-decoration: underline; 84 | } 85 | #emerald-side-meta-user-details { 86 | line-height: 18px; 87 | margin-left: 8px; 88 | color: var(--bt-gcp-333); 89 | margin-top: -2px; 90 | margin-bottom: 4px; 91 | } 92 | [ct] #side-meta-channel-name-container a { 93 | color: var(--bt-blue); 94 | font-weight: bold; 95 | cursor: pointer; 96 | } 97 | [ct] #side-meta-channel-name-container a:hover { 98 | text-decoration: underline; 99 | } 100 | [ct] .watch4-expand .expand-inner { 101 | font-size: 11px; 102 | display: flex; 103 | } 104 | #emerald-side-meta-subscribe { 105 | margin-left: auto; 106 | } 107 | [ct] #emerald-side-meta .emerald-link { 108 | color: var(--bt-blue); 109 | cursor: pointer; 110 | display: inline-block; 111 | } 112 | [ct] #emerald-side-meta .emerald-link:hover { 113 | text-decoration: underline; 114 | } 115 | #emerald-side-meta-actions { 116 | border-top: 1px solid var(--bt-gcp-ccc); 117 | padding: 5px 0 0 6px; 118 | margin: 5px 0 0; 119 | font-size: 11px; 120 | } 121 | .emerald-side-meta-text { 122 | color: var(--bt-gcp-666); 123 | line-height: 18px; 124 | font-size: 11px; 125 | font-weight: bold; 126 | float: left; 127 | margin-right: 5px; 128 | min-width: 40px; 129 | clear: left; 130 | text-align: right; 131 | } 132 | .emerald-side-meta-input input { 133 | width: 200px; 134 | overflow-x: hidden; 135 | font-size: 10px; 136 | border: 1px solid var(--bt-gcp-999); 137 | background: var(--bt-gcp-fff); 138 | border-radius: 2px; 139 | padding: 2px; 140 | white-space: nowrap; 141 | } 142 | 143 | [remove-rating-invisible="false"] #watch4-your-rating-text { 144 | display: none; 145 | } 146 | #watch4-rating-text { 147 | margin-left: 8px; 148 | font-size: 12px; 149 | color: var(--bt-gcp-666); 150 | } 151 | #watch4-ratings:not([rated]):not([temp-stars]) #watch4-rating-value { 152 | font-style: italic; 153 | color: var(--bt-gcp-888); 154 | } 155 | #watch4-ratings:not([rated])[temp-stars]:hover #watch4-rating-value { 156 | color: var(--bt-blue); 157 | } 158 | #watch4-ratings:not([rated])[temp-stars="1.0"]:hover #watch4-rating-value, 159 | #watch4-ratings:not([rated])[temp-stars="2.0"]:hover #watch4-rating-value { 160 | color: red; 161 | } 162 | #watch4-ratings:not([rated])[temp-stars="3.0"]:hover #watch4-rating-value, 163 | #watch4-ratings:not([rated])[temp-stars="4.0"]:hover #watch4-rating-value, 164 | #watch4-ratings:not([rated])[temp-stars="5.0"]:hover #watch4-rating-value { 165 | color: green; 166 | } 167 | #watch4-ratings-inner { 168 | background: url(https://i.imgur.com/2LCU6Hs.png) no-repeat; 169 | background-position: -75px -411px; 170 | height: 15px; 171 | } 172 | #watch4-ratings[temp-stars] #watch4-ratings-inner { 173 | outline: 2px solid var(--bt-blue); 174 | } 175 | #watch4-ratings-inner[rating="1.0"] { 176 | background-position: -60px -411px; 177 | } 178 | #watch4-ratings-inner[rating="1.5"] { 179 | background-position: -45px -426px; 180 | } 181 | #watch4-ratings-inner[rating="2.0"] { 182 | background-position: -45px -411px; 183 | } 184 | #watch4-ratings-inner[rating="2.5"] { 185 | background-position: -30px -426px; 186 | } 187 | #watch4-ratings-inner[rating="3.0"] { 188 | background-position: -30px -411px; 189 | } 190 | #watch4-ratings-inner[rating="3.5"] { 191 | background-position: -15px -426px; 192 | } 193 | #watch4-ratings-inner[rating="4.0"] { 194 | background-position: -15px -411px; 195 | } 196 | #watch4-ratings-inner[rating="4.5"] { 197 | background-position: 0px -426px; 198 | } 199 | #watch4-ratings-inner[rating="5.0"] { 200 | background-position: 0px -411px; 201 | } 202 | #watch4-ratings[temp-stars="1.0"] #watch4-ratings-inner { 203 | background-position: -60px -411px; 204 | } 205 | #watch4-ratings[temp-stars="2.0"] #watch4-ratings-inner { 206 | background-position: -45px -411px; 207 | } 208 | #watch4-ratings[temp-stars="3.0"] #watch4-ratings-inner { 209 | background-position: -30px -411px; 210 | } 211 | #watch4-ratings[temp-stars="4.0"] #watch4-ratings-inner { 212 | background-position: -15px -411px; 213 | } 214 | #watch4-ratings[temp-stars="5.0"] #watch4-ratings-inner { 215 | background-position: 0px -411px; 216 | } 217 | .watch4-star { 218 | width: 15px; 219 | height: 15px; 220 | } 221 | #watch4-ratings-info-row { 222 | padding: 9px 0 4px 0; 223 | } 224 | #watch4-views-info { 225 | font-size: 13px; 226 | color: var(--bt-gcp-000); 227 | font-weight: bold; 228 | margin-left: auto; 229 | } 230 | #watch4-views-info #views-text { 231 | font-weight: normal; 232 | } 233 | #watch4-actions-row { 234 | border: 1px solid var(--bt-gcp-ccc); 235 | width: 100%; 236 | } 237 | .watch4-action a { 238 | text-align: center; 239 | font-size: 13px; 240 | font-weight: bold; 241 | color: #03c; 242 | height: 32px; 243 | line-height: 28px; 244 | padding: 0 10px; 245 | display: block; 246 | float: left; 247 | cursor: pointer; 248 | } 249 | .watch4-action a::before { 250 | content: ""; 251 | background: url(https://i.imgur.com/2LCU6Hs.png) no-repeat; 252 | width: 10px; 253 | height: 9px; 254 | vertical-align: text-top; 255 | margin-bottom: 3px; 256 | margin-top: 3px; 257 | display: inline-block; 258 | } 259 | #watch4-like-button a::before { 260 | background-position: 0px -228px; 261 | } 262 | #watch4-like-button.active a::before, 263 | #watch4-like-button:hover a::before { 264 | background-position: 0px -238px; 265 | } 266 | #watch4-share-button a::before { 267 | background-position: -17px -228px; 268 | } 269 | #watch4-share-button.active a::before, 270 | #watch4-share-button:hover a::before { 271 | background-position: -17px -238px; 272 | } 273 | #watch4-addto-button a::before { 274 | background-position: -35px -228px; 275 | } 276 | #watch4-addto-button.active a::before, 277 | #watch4-addto-button:hover a::before { 278 | background-position: -35px -238px; 279 | } 280 | #watch4-report-button a::before { 281 | background-position: -53px -228px; 282 | } 283 | #watch4-report-button.active a::before, 284 | #watch4-report-button:hover a::before { 285 | background-position: -53px -238px; 286 | } 287 | #watch4-action-panels { 288 | border: 1px solid var(--bt-gcp-ccc); 289 | width: 100%; 290 | margin: 0 0 14px 0; 291 | background: #f3f3f3; 292 | border-top: none; 293 | } 294 | #watch4-action-panels-inner { 295 | border-top: 1px solid var(--bt-gcp-fff); 296 | } 297 | #watch4-action-panels[state="share"] #watch4-action-panel-close { 298 | display: none; 299 | } 300 | .watch4-action-panel { 301 | padding: 8px; 302 | font-size: 12px; 303 | } 304 | 305 | 306 | 307 | [ct] #watch4-sub-button { 308 | height: 23px; 309 | display: flex; 310 | align-items: center; 311 | padding: 0 10px; 312 | font-size: 12px; 313 | border-radius: 3px; 314 | border: 1px solid transparent; 315 | cursor: pointer; 316 | font-weight: bold; 317 | } 318 | [ct] #watch4-sub-button:hover { 319 | text-decoration: underline; 320 | } 321 | [ct] [state="subscribe"] #watch4-sub-button { 322 | background: #fed81c url(https://i.imgur.com/hcxA2dh.png) repeat-x center -2202px; 323 | color: #994800; 324 | border: 1px solid #ecc101; 325 | } 326 | [ct] [state="unsubscribe"] #watch4-sub-button, 327 | [ct] [state="creator-studio"] #watch4-sub-button{ 328 | background: #d8d8d8 url(https://i.imgur.com/hcxA2dh.png) repeat-x center -802px; 329 | color: #000; 330 | border-color: var(--bt-gcp-999); 331 | font-weight: normal; 332 | } 333 | [ct] [state="unsubscribe"] #watch4-sub-button:hover, 334 | [ct] [state="creator-studio"] #watch4-sub-button:hover { 335 | background: #d8d8d8 url(https://i.imgur.com/hcxA2dh.png) repeat-x center -1002px; 336 | } 337 | #emerald-watch-sidebar { 338 | position: relative; 339 | } 340 | 341 | #emerald-watch-below:not([comments-expanded]) #emerald-comments { 342 | display: none; 343 | } 344 | 345 | .emerald-side-meta-extra-header { 346 | color: var(--bt-gcp-666); 347 | margin-right: 4px; 348 | } 349 | #emerald-side-meta .emerald-extra { 350 | display: flex; 351 | margin-top: 5px; 352 | } 353 | .emerald-extra .emerald-link:not(:hover) { 354 | text-decoration: none; 355 | } 356 | 357 | 358 | #watch4-action-panels { 359 | position: relative; 360 | } 361 | #watch4-action-panel-close { 362 | color: var(--bt-blue); 363 | position: absolute; 364 | top: 8px; 365 | right: 8px; 366 | width: fit-content; 367 | cursor: pointer; 368 | font-weight: bold; 369 | } 370 | #watch4-action-panel-close:hover { 371 | text-decoration: underline; 372 | } -------------------------------------------------------------------------------- /firefox beta/css/emerald-watch9.css: -------------------------------------------------------------------------------- 1 | [ct] .watch9 { 2 | --yt-expand-color: rgba(17, 17, 17, 0.6); 3 | --bt-watch9-button-color: #606060; 4 | --bt-watch9-icon-color: rgba(144,144,144); 5 | --bt-watch9-like-bar-unliked: #909090; 6 | --bt-watch9-dislike-bar: #ccc; 7 | --bt-watch9-user-subtitle-color: rgba(17, 17, 17, 0.6); 8 | } 9 | [dark][ct] .watch9 { 10 | --yt-expand-color: rgba(255, 255, 255, 0.6); 11 | --bt-watch9-button-color: #aaa; 12 | --bt-watch9-icon-color: rgba(144,144,144); 13 | --bt-watch9-like-bar-unliked: #909090; 14 | --bt-watch9-dislike-bar: #606060; 15 | --bt-watch9-user-subtitle-color: rgba(255, 255, 255, 0.6); 16 | } 17 | [ct] #watch9-primary-info { 18 | display: block; 19 | border-bottom: 1px solid var(--yt-spec-10-percent-layer); 20 | padding: 20px 0 8px 0; 21 | } 22 | [ct] #watch9-secondary-info { 23 | margin-bottom: 0; 24 | padding-bottom: 16px; 25 | border-bottom: 1px solid var(--yt-spec-10-percent-layer); 26 | } 27 | html[layout^="polymer"] #watch9-secondary-info { 28 | margin-bottom: 24px; 29 | } 30 | html[layout^="hitchhiker-2015"] #watch9-secondary-info, 31 | html[layout^="hitchhiker-2016"] #watch9-secondary-info, 32 | html[layout^="hitchhiker-2017"] #watch9-secondary-info { 33 | margin-bottom: 10px; 34 | border-bottom: none; 35 | } 36 | [ct] .watch9 #watch9-title { 37 | font-size: 1.8rem; 38 | font-weight: 400; 39 | line-height: 2.4rem; 40 | color: var(--bt-gcp-111); 41 | } 42 | [ct] .watch9 #watch9-views-info { 43 | font-size: 1.6rem; 44 | font-weight: 400; 45 | line-height: 2rem; 46 | color: var(--bt-gcp-666); 47 | } 48 | [ct] .watch9b #watch9-views-info { 49 | font-size: 1.4rem; 50 | line-height: 2.1rem; 51 | } 52 | [ct] .watch9 #watch9b-upload-date { 53 | margin-left: 4px; 54 | } 55 | [ct] .watch9 #watch9-actions { 56 | margin-left: auto; 57 | } 58 | [ct] .watch9 .watch9-button-icon svg, 59 | [ct] .watch9 .watch9-button-icon g, 60 | [ct] .watch9 .watch9-button-icon path { 61 | width: 20px !important; 62 | height: 20px !important; 63 | min-width: 20px !Important; 64 | } 65 | html[layout^="polymer-202"] .watch9 .watch9-button-icon svg, 66 | html[layout^="polymer-202"] .watch9 .watch9-button-icon g, 67 | html[layout^="polymer-202"] .watch9 .watch9-button-icon path { 68 | width: 24px !important; 69 | height: 24px !important; 70 | min-width: 24px !Important; 71 | } 72 | html[layout^="polymer-2020"] .watch9 .watch9-button-icon svg, 73 | html[layout^="polymer-2020"] .watch9 .watch9-button-icon g, 74 | html[layout^="polymer-2020"] .watch9 .watch9-button-icon path { 75 | width: 24px !important; 76 | height: 24px !important; 77 | min-width: 24px !Important; 78 | } 79 | html[layout] .watch9 div paper-ripple { 80 | display: block !important; 81 | } 82 | [ct] .watch9 .watch9-button-icon { 83 | position: relative; 84 | border-radius: 50%; 85 | padding: 8px; 86 | } 87 | [ct] .watch9 #watch9-owner-row { 88 | margin-bottom: 12px; 89 | padding-top: 16px; 90 | } 91 | [ct] .watch9 #watch9-pfp a { 92 | margin-right: 16px; 93 | width: 48px; 94 | height: 48px; 95 | border-radius: 50%; 96 | background-color: transparent; 97 | overflow: hidden; 98 | } 99 | [ct] .watch9 #watch9-channel-name-container { 100 | --yt-endpoint-color: var(--yt-channel-owner); 101 | --yt-endpoint-hover-color: var(--yt-channel-owner); 102 | font-size: 1.4rem; 103 | font-weight: 500; 104 | line-height: 1.6rem; 105 | } 106 | [ct] .watch9-yt-user-separator { 107 | margin: 0 6px 0 8px; 108 | } 109 | [ct] .watch9 #watch9-user-subtitle { 110 | color: var(--bt-watch9-user-subtitle-color); 111 | font-size: 1.3rem; 112 | font-weight: 400; 113 | line-height: 1.8rem; 114 | text-transform: none; 115 | } 116 | [ct] .watch9 #watch9-upload-date { 117 | margin-right: 8px; 118 | } 119 | [ct] .watch9 #watch9-sub-button, 120 | [ct] .watch9 .watch9-button { 121 | white-space: nowrap; 122 | font-size: 1.4rem; 123 | font-weight: 500; 124 | letter-spacing: .007px; 125 | text-transform: uppercase; 126 | cursor: pointer; 127 | border-radius: 2px; 128 | color: var(--bt-watch9-button-color); 129 | } 130 | [ct] .watch9b .watch9-button { 131 | letter-spacing: 0.5px; 132 | } 133 | [ct] .watch9[state="outline"] .watch9-button { 134 | color: #030303; 135 | } 136 | html[dark] .watch9[state="outline"] .watch9-button { 137 | color: #fff; 138 | } 139 | [ct] .watch9 .watch9-button { 140 | padding-right: 8px; 141 | margin-left: 8px; 142 | font-size: 1.3rem; 143 | } 144 | [ct] .watch9 .watch9-button svg[state-id="filled"] { 145 | fill: var(--bt-watch9-icon-color); 146 | } 147 | [ct] .watch9 .watch9-button svg[state-id="outline"] { 148 | fill: var(--bt-gcp-000); 149 | } 150 | [ct] .watch9[state="filled"] #watch9-like-button.active { 151 | color: var(--bt-blue) !important; 152 | } 153 | [ct] .watch9[state="filled"] #watch9-like-button.active svg { 154 | fill: var(--bt-blue) !important; 155 | } 156 | [ct] .watch9[state="outline"] #watch9-like-button.active svg:not(.filled-outline), 157 | [ct] .watch9[state="outline"] #watch9-dislike-button.active svg:not(.filled-outline), 158 | [ct] .watch9[state="outline"] #watch9-like-button:not(.active) svg.filled-outline, 159 | [ct] .watch9[state="outline"] #watch9-dislike-button:not(.active) svg.filled-outline { 160 | display: none !important; 161 | } 162 | [ct] .watch9 .watch9-ltod-bar { 163 | display: flex; 164 | padding: 6px 0 28px; 165 | position: absolute; 166 | width: 100%; 167 | } 168 | [ct] .watch9 #watch9-ltod { 169 | position: relative; 170 | } 171 | [ct] .watch9 #watch9-like-button { 172 | margin-left: 0; 173 | } 174 | [ct] .watch9 #watch9-sentiment-bar #js-likes { 175 | background: var(--bt-watch9-like-bar-unliked); 176 | width: 100%; 177 | height: 2px; 178 | display: block; 179 | position: absolute; 180 | z-index: 2; 181 | } 182 | [ct] .watch9[state="outline"] #watch9-sentiment-bar #js-likes { 183 | background: var(--bt-gcp-333); 184 | } 185 | [ct] .watch9 #watch9-sentiment-bar #js-dislikes { 186 | background: var(--bt-watch9-dislike-bar); 187 | width: 100%; 188 | height: 2px; 189 | display: block; 190 | position: absolute; 191 | z-index: 1; 192 | } 193 | [ct] .watch9[state="filled"] [liked="true"] #watch9-sentiment-bar #js-likes { 194 | background: var(--bt-blue); 195 | } 196 | [ct] .watch9 #watch9-sub-button { 197 | background-color: var(--bt-emphasis, red); 198 | color: #FFFFFF; 199 | padding: 10px 16px; 200 | position: relative; 201 | } 202 | html[layout^="hitchhiker-2015"] .watch9 [state="subscribe"] #watch9-sub-button, 203 | html[layout^="hitchhiker-2016"] .watch9 [state="subscribe"] #watch9-sub-button { 204 | background-color: var(--bt-lesser-emphasis, red); 205 | } 206 | html[layout^="polymer-202"] .watch9 [state="subscribe"] #watch9-sub-button { 207 | background-color: #c00; 208 | } 209 | [ct] .watch9 [state="subscribed"] #watch9-sub-button { 210 | background-color: var(--bt-light-grey); 211 | color: var(--bt-gcp-555); 212 | } 213 | html[layout^="polymer-2019"] .watch9 [state="subscribed"] #watch9-sub-button { 214 | background-color: var(--bt-light-grey); 215 | box-shadow: 0px 2px 2px rgba(0,0,0,0.5); 216 | } 217 | [ct] .watch9 #watch9-sub-count { 218 | margin-left: 8px; 219 | opacity: 85%; 220 | } 221 | [ct] .watch9 #watch9-subscription-container { 222 | margin-left: auto; 223 | } 224 | [ct] .watch9 #watch9-info { 225 | margin-left: 64px; 226 | font-size: 1.4rem; 227 | font-weight: 400; 228 | line-height: 2.1rem; 229 | } 230 | [ct] .watch9 #watch9-info:not([expanded]) #watch9-description { 231 | max-height: 60px; 232 | overflow: hidden; 233 | } 234 | [ct] .watch9 .emerald-link { 235 | color: var(--yt-spec-call-to-action, var(--bt-blue)); 236 | } 237 | [ct] .watch9 .watch9-expand { 238 | color: var(--yt-expand-color); 239 | display: inline-block; 240 | margin-top: 8px; 241 | font-size: 1.3rem; 242 | font-weight: 500; 243 | letter-spacing: .007px; 244 | text-transform: uppercase; 245 | cursor: pointer; 246 | } 247 | [ct] .watch9 #watch9-info[expanded] #watch9-expand, 248 | [ct] .watch9 #watch9-info:not([expanded]) #watch9-collapse { 249 | display: none; 250 | } 251 | [ct] .watch9b .watch9a-elem, 252 | [ct] .watch9:not(.watch9b) .watch9b-elem { 253 | display: none !important; 254 | } -------------------------------------------------------------------------------- /firefox beta/css/menus.css: -------------------------------------------------------------------------------- 1 | /* multiple dropdowns probably */ 2 | html[menu-style="unrounded"] { 3 | --paper-menu-button-content-border-radius: 0 !important; 4 | } 5 | /* sort by */ 6 | html[menu-style="unrounded"] .dropdown-content.tp-yt-paper-menu-button, 7 | html[menu-style="unrounded"] yt-dropdown-menu[modern-dialogs] #menu.yt-dropdown-menu { 8 | border-radius: 0 !important; 9 | } 10 | 11 | /* Thanks to UnderscoreAngel for the code in this section */ 12 | /*Fix for the rounded stuff*/ 13 | 14 | /*More Popup in watch page*/ 15 | html[menu-style="unrounded"] ytd-menu-popup-renderer { 16 | border-radius: 0px; 17 | } 18 | 19 | /*Share Popup in watch page*/ 20 | html[menu-style="unrounded"] tp-yt-paper-dialog[modern] { 21 | border-radius: 0px; 22 | } 23 | 24 | /*buttons in comments*/ 25 | html[menu-style="unrounded"] ytd-comments .yt-spec-button-shape-next--size-m { 26 | height: 32px; 27 | border-radius: 2px; 28 | } 29 | 30 | /*Search Bar Results (this one is not full i can't find the other stuff that makes it rounded)*/ 31 | html[menu-style="unrounded"] .sbsb_a { 32 | border-radius: 3px; 33 | } 34 | 35 | /*this is a certified "Show Chat Replay" Moment*/ 36 | html[menu-style="unrounded"] ytd-watch-flexy #secondary .yt-spec-button-shape-next--size-m { 37 | border-radius: 1px; 38 | } 39 | 40 | /*Notification & Account Panel*/ 41 | html[menu-style="unrounded"] ytd-multi-page-menu-renderer { 42 | /* display: inline-block; */ 43 | border-radius: 0px; 44 | 45 | } 46 | 47 | /*Clips Panel*/ 48 | html[menu-style="unrounded"] ytd-engagement-panel-section-list-renderer[modern-panels] { 49 | border-radius: 0px; 50 | overflow: hidden; 51 | } 52 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbdd_a { 53 | margin-top: -4px; 54 | } 55 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbdd_b { 56 | border-radius: 0; 57 | } 58 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbsb_a { 59 | padding: 2px; 60 | border-radius: 0px; 61 | } 62 | html[menu-style="unrounded"]:not([layout^="polymer"]) .gsfs { 63 | font-size: 16px; 64 | padding: 0px 4px !important; 65 | } 66 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbsb_c { 67 | line-height: 22px; 68 | } 69 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbqs_c::before { 70 | display: none; 71 | } 72 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbfl_a { 73 | margin: -5px 0px -5px 0; 74 | } -------------------------------------------------------------------------------- /firefox beta/css/psuedo-static.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* page man */ 3 | html[pseudo-static] ytd-app:not([masthead-hidden]) #page-manager { 4 | max-width: 1000px; 5 | } 6 | /* WP */ 7 | html[pseudo-static] [ct-watch-elem] #columns { 8 | margin-left: calc(var(--bt-sidebar-width) + 40px); 9 | } 10 | /* Topbar. This code works perfectly and is all that's needed for all pages. */ 11 | /* inner */ 12 | html[pseudo-static] ytd-masthead { 13 | width: calc(100vw - 80px); 14 | margin: 0 auto; 15 | } 16 | html[pseudo-static] #container.ytd-masthead { 17 | padding: 0; 18 | } 19 | /* Section subs page */ 20 | html[pseudo-static] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) { 21 | max-width: calc(var(--tubek12-static-page-width) - var(--app-drawer-width)); 22 | } 23 | /* Section Watch Page */ 24 | /* This code makes the page itself static, as well as the OUTER video player, but not the controls or the video element itself. */ 25 | html[pseudo-static] [ct-watch-elem] { 26 | --ytd-watch-flexy-player-width: 640px !important; 27 | --ytd-watch-flexy-player-height: 360px !important; 28 | } 29 | /* This code is to make reduce margin with related. */ 30 | html[pseudo-static] [ct-watch-elem] #primary { 31 | padding-right: 0; 32 | } 33 | html[pseudo-static] [ct-watch-elem] #primary { 34 | width: 641px !important; 35 | min-width: 641px !important; 36 | max-width: 641px !important; 37 | width: var(--bt-player-width) !important; 38 | min-width: var(--bt-player-width) !important; 39 | max-width: var(--bt-player-width) !important; 40 | } 41 | /* SubSection Video */ 42 | /* This code seems to make videos work pretty much perfectly, except for non 16:9 videos. The min-height property is required for 4:3 videos to keep a consistent width. 43 | html[pseudo-static] ytd-watch-flexy #movie_player[aria-label="YouTube Video Player"] video { 44 | width: auto !important; 45 | width: 640px !important; 46 | display: flex; 47 | max-width: 640px !important; 48 | height: auto !important; 49 | max-height: 366px !important; 50 | align-self: center !important; 51 | min-height: 360px !important; 52 | } 53 | /* This code is necessary for non 16:9 videos to keep a consistent width. * 54 | html[pseudo-static] #movie_player[aria-label="YouTube Video Player"] .ytp-chrome-bottom { 55 | width: 620px !important; 56 | } 57 | /* These variables are required for non 16:9 non 1:1 videos to keep a consistent width. 58 | html[pseudo-static] ytd-watch-flexy[flexy] { 59 | --ytd-watch-flexy-width-ratio: 16 !important; 60 | --ytd-watch-flexy-height-ratio: 9 !important; 61 | --ytd-watch-flexy-space-below-player: 136px; 62 | --ytd-watch-flexy-non-player-height: 360px !important; 63 | --ytd-watch-flexy-non-player-width: 641px !important; 64 | --ytd-watch-flexy-min-player-height: 360px !important; 65 | --ytd-watch-flexy-min-player-width: 641px !important; 66 | --ytd-watch-flexy-max-player-height: 360px !important; 67 | --ytd-watch-flexy-max-player-width: 641px !important; 68 | } 69 | html[pseudo-static] { 70 | --bt-player-width: 640px; 71 | --bt-player-height: 360px; 72 | } 73 | /* primary */ 74 | html[pseudo-static] [ct-watch-elem] #primary { 75 | margin-left: 0; 76 | padding-right: 0; 77 | } 78 | html[pseudo-static] #secondary-inner { 79 | width: 330px !important; 80 | } 81 | html[pseudo-static] #secondary-inner { 82 | width: 360px !important; 83 | } 84 | html[pseudo-static] [ct-watch-elem] #secondary-inner { 85 | width: 380px !important; 86 | } 87 | /* This code makes sidebar attach itself to edge of page, instead of screen. Needs to be disabled on watch pages. */ 88 | html[pseudo-static] ytd-app:not([masthead-hidden]) tp-yt-app-drawer { 89 | left: 40px !important; 90 | } 91 | /* Section playlist page */ 92 | html[pseudo-static] ytd-playlist-header-renderer { 93 | left: initial !important; 94 | } 95 | html[pseudo-static] [ct-watch-elem] #primary { 96 | max-width: calc((100vh - (var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))) * (${window.screen.width} / ${window.screen.height})) !important; 97 | min-width: calc(var(--ytd-watch-flexy-min-player-height) * (${window.screen.width} / ${window.screen.height})) !important; 98 | } 99 | html[pseudo-static] #player-container-outer { 100 | max-width: 640px !important; 101 | min-width: 0 !important; 102 | position: relative !important; 103 | } 104 | html[pseudo-static] #player-container-inner { 105 | padding-top: calc(${window.screen.height} / ${window.screen.width} * 100%) !important; 106 | } 107 | html[pseudo-static] .html5-video-container { 108 | width:100% !important; 109 | height:100% !important; 110 | } 111 | html[pseudo-static] .html5-video-container video { 112 | width:100% !important; 113 | height:100% !important; 114 | left:0 !important; 115 | top: 0 !important; 116 | object-fit: contain !important; 117 | } 118 | 119 | html[pseudo-static] [ct-watch-elem] #player { 120 | width: 641px; 121 | width: var(--bt-player-width) !important; 122 | } 123 | 124 | html[pseudo-static] [ct-watch-elem] #primary { 125 | margin-left: 568px !important; 126 | } -------------------------------------------------------------------------------- /firefox beta/css/static-scrolling.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* This code makes everything static on most pages */ 3 | ytd-app[static-scrolling] #masthead-container.ytd-app { 4 | position: absolute; 5 | } 6 | ytd-app[static-scrolling] #guide { 7 | position: absolute; 8 | } 9 | /* Chips. */ 10 | ytd-app[static-scrolling][location="home"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 11 | position: absolute !important; 12 | } 13 | /* Section playlist page */ 14 | ytd-app[static-scrolling] ytd-playlist-header-renderer { 15 | left: initial !important; 16 | position: absolute !important; 17 | } 18 | ytd-app[static-scrolling] #footer { 19 | pointer-events: all; 20 | } 21 | /* fix scroll */ 22 | ytd-app[static-scrolling] #guide-inner-content.ytd-app { 23 | scrollbar-width: none !important; 24 | background: none; 25 | z-index: 0; 26 | overscroll-behavior: unset !important; 27 | pointer-events: none; 28 | } 29 | ytd-app[static-scrolling] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer { 30 | pointer-events: all; 31 | } 32 | ytd-app[static-scrolling] tp-yt-paper-item:focus::before.tp-yt-paper-item.tp-yt-paper-item:focus::before { 33 | pointer-events: all !important; 34 | } -------------------------------------------------------------------------------- /firefox beta/css/static.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* Topbar. This code works perfectly and is all that's needed for all pages. */ 3 | ytd-app[static] ytd-masthead { 4 | width: var(--tubek12-static-page-width) !important; 5 | } 6 | ytd-app[static] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled), 7 | html[layout="hitchhiker-2013-1"][location="channel"] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) { 8 | max-width: calc(var(--tubek12-static-page-width) - var(--app-drawer-width)) !important; 9 | } 10 | html[channel-style^="cosmicpanda"][location="channel"] ytd-app:not([masthead-hidden]) #page-manager { 11 | max-width: 1000px; 12 | margin: 0 auto; 13 | } 14 | html[layout="hitchhiker-2013-1"][location="channel"] tp-yt-app-drawer { 15 | display: none; 16 | } 17 | /* This code makes the page itself static, as well as the OUTER video player, but not the controls or the video element itself. */ 18 | html[static] [ct-watch-elem] { 19 | --ytd-watch-flexy-player-width: 586px !important; 20 | --ytd-watch-flexy-player-height: 330px !important; 21 | --ytd-watch-flexy-player-width: 640px !important; 22 | --ytd-watch-flexy-player-height: 360px !important; 23 | } 24 | /* This code is to make reduce margin with related. */ 25 | html[static] [ct-watch-elem] #primary { 26 | padding-right: 0; 27 | } 28 | html[static] [ct-watch-elem] #columns #primary { 29 | width: 586px !important; 30 | min-width: 586px !important; 31 | max-width: 586px !important; 32 | width: 640px !important; 33 | min-width: 640px !important; 34 | max-width: 640px !important; 35 | } 36 | /* SubSection Video */ 37 | /* This code seems to make videos work pretty much perfectly, except for non 16:9 videos. The min-height property is required for 4:3 videos to keep a consistent width. */ 38 | html[static] [ct-watch-elem] #movie_player[aria-label="YouTube Video Player"] video { 39 | width: auto !important; 40 | width: 586px !important; 41 | margin: 0 auto !important; 42 | display: flex; 43 | max-width: 586px !important; 44 | height: auto !important; 45 | max-height: 336px !important; 46 | align-self: center !important; 47 | min-height: 330px !important; 48 | 49 | width: auto !important; 50 | width: 640px !important; 51 | margin: 0 auto !important; 52 | display: flex; 53 | max-width: 640px !important; 54 | height: auto !important; 55 | max-height: 366px !important; 56 | align-self: center !important; 57 | min-height: 360px !important; 58 | } 59 | /* This code is necessary for non 16:9 videos to keep a consistent width. */ 60 | html[static] #movie_player[aria-label="YouTube Video Player"] .ytp-chrome-bottom { 61 | width: 566px !important; 62 | width: 620px !important; 63 | } 64 | /* These variables are required for non 16:9 non 1:1 videos to keep a consistent width. */ 65 | html[static] [ct-watch-elem][flexy] { 66 | --ytd-watch-flexy-width-ratio: 16 !important; 67 | --ytd-watch-flexy-height-ratio: 9 !important; 68 | --ytd-watch-flexy-space-below-player: 136px; 69 | --ytd-watch-flexy-non-player-height: 330px !important; 70 | --ytd-watch-flexy-non-player-width: 586px !important; 71 | --ytd-watch-flexy-min-player-height: 330px !important; 72 | --ytd-watch-flexy-min-player-width: 586px !important; 73 | --ytd-watch-flexy-max-player-height: 330px !important; 74 | --ytd-watch-flexy-max-player-width: 586px !important; 75 | 76 | --ytd-watch-flexy-width-ratio: 16 !important; 77 | --ytd-watch-flexy-height-ratio: 9 !important; 78 | --ytd-watch-flexy-space-below-player: 136px; 79 | --ytd-watch-flexy-non-player-height: 360px !important; 80 | --ytd-watch-flexy-non-player-width: 640px !important; 81 | --ytd-watch-flexy-min-player-height: 360px !important; 82 | --ytd-watch-flexy-min-player-width: 640px !important; 83 | --ytd-watch-flexy-max-player-height: 360px !important; 84 | --ytd-watch-flexy-max-player-width: 640px !important; 85 | 86 | } 87 | html[static] { 88 | --bt-player-width: 586px; 89 | --bt-player-height: 330px; 90 | 91 | --bt-player-width: 640px; 92 | --bt-player-height: 360px; 93 | } 94 | /* primary */ 95 | html[static] [ct-watch-elem] #primary { 96 | margin-left: 0 !important; 97 | padding-left: 0 !important; 98 | } 99 | html[static] [ct-watch-elem] #secondary { 100 | padding-right: 0 !important; 101 | } 102 | /* 103 | ytd-app[static] #secondary-inner { 104 | width: 330px !important; 105 | } 106 | ytd-app[static] #secondary-inner { 107 | width: 360px !important; 108 | } 109 | */ 110 | html[static] #secondary-inner { 111 | width: 380px !important; 112 | 113 | width: 330px !important; 114 | } 115 | /* Section pages that aren't watch */ 116 | /* This code makes the screen static on pages that aren't watch. Absolutely must be disabled on watch page. */ 117 | html[static] ytd-app:not([masthead-hidden]) { 118 | width: var(--tubek12-static-page-width) !important; 119 | margin: var(--tubek12-static-page-margin) !important; 120 | } 121 | /* This code makes sidebar attach itself to edge of page, instead of screen. Needs to be disabled on watch pages. */ 122 | html[static] ytd-app:not([masthead-hidden]) tp-yt-app-drawer { 123 | left: initial !important; 124 | } 125 | /* Section playlist page */ 126 | ytd-app[static] ytd-playlist-header-renderer { 127 | left: initial !important; 128 | } 129 | html[static] [ct-watch-elem] #primary { 130 | max-width: calc((100vh - (var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))) * (${window.screen.width} / ${window.screen.height})) !important; 131 | min-width: calc(var(--ytd-watch-flexy-min-player-height) * (${window.screen.width} / ${window.screen.height})) !important; 132 | } 133 | html[static] #player-container-outer { 134 | max-width: 586px !important; 135 | 136 | max-width: 640px !important; 137 | min-width: 0 !important; 138 | position: relative !important; 139 | } 140 | html[static] #player-container-inner { 141 | padding-top: calc(${window.screen.height} / ${window.screen.width} * 100%) !important; 142 | } 143 | html[static] .html5-video-container { 144 | width:100% !important; 145 | height:100% !important; 146 | } 147 | html[static] .html5-video-container video { 148 | width:100% !important; 149 | height:100% !important; 150 | left:0 !important; 151 | top: 0 !important; 152 | object-fit: contain !important; 153 | } -------------------------------------------------------------------------------- /firefox beta/images/128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox beta/images/128.png -------------------------------------------------------------------------------- /firefox beta/images/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox beta/images/16.png -------------------------------------------------------------------------------- /firefox beta/images/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox beta/images/32.png -------------------------------------------------------------------------------- /firefox beta/images/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox beta/images/48.png -------------------------------------------------------------------------------- /firefox beta/images/beamtubebg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox beta/images/beamtubebg.png -------------------------------------------------------------------------------- /firefox beta/images/ctlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox beta/images/ctlogo.png -------------------------------------------------------------------------------- /firefox beta/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox beta/images/logo.png -------------------------------------------------------------------------------- /firefox beta/images/open-in-new-window-button-2-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /firefox beta/initial-setup.js: -------------------------------------------------------------------------------- 1 | let minVersion = 53; 2 | let browserVersion; 3 | let storage = browser.storage.local; 4 | if (navigator.userAgent.match(/Firefox\/([^\s]+)/)) { 5 | browserVersion = parseInt(navigator.userAgent.match(/Firefox\/([^\s]+)/)[1]); 6 | if (browserVersion >= minVersion) { 7 | storage = browser.storage.sync; 8 | } 9 | } 10 | let BTConfig; 11 | let playerSize = {}; 12 | let aspectRatio = (window.screen.width / window.screen.height).toFixed(2); 13 | const defaultSettings = { 14 | // 2017 layout is default just so the user knows for sure the extension actually does something 15 | "layoutSelect": "hitchhiker-2017", 16 | "relatedSize": "auto", 17 | "searchbarStyle": "autoSearchBar", 18 | "channelVidsDropdown": "CVDDauto", 19 | "channelVidsPerRow": "CVPRauto", 20 | "homepageVidsPerRow": "HPVPRauto", 21 | "homepageType": "HPTypeAuto", 22 | "subsVidsPerRow": "SVPRauto", 23 | "videoRendererSize": "VRSizeAuto", 24 | "videoPlayerSize": "PS854x480", 25 | "videoPlayerStyle": "PSTauto", 26 | "relatedHeader": "RHauto", 27 | "watchMetadata": "WMauto", 28 | "hideShortsSubs": "HSSauto", 29 | "showVideosLink": "SVLauto", 30 | "useAppbar": "UABauto", 31 | "appbarMode": "ABMunpinned", 32 | "favicon": "faviAuto", 33 | "blockRGW": true, 34 | "FSNoScroll": true, 35 | "noCast": true, 36 | "squarePfp": false, 37 | "squareVid": false, 38 | "dontLoopPlaylists": false, 39 | /* sidebar */ 40 | "alwaysShowSidebar": false, 41 | "homeSidebarBtn": true, 42 | "wtwSidebarBtn": false, 43 | "NOTwtwSidebarBtn": false, 44 | "fytSidebarBtn": false, 45 | "myChannelSidebarBtn": true, 46 | "lowerCaseC": false, 47 | "shortsSidebarBtn": false, 48 | "trendingSidebarBtn": true, 49 | "subsSidebarBtn": true, 50 | /* topbar */ 51 | "logoEndpoint": "LEHome", 52 | "iUseRYD": true, 53 | "useRYDAPI": true, 54 | /* tweaks */ 55 | "loopByDefault": false, 56 | "noJoin": true, 57 | "noClip": true, 58 | "noThanks": true, 59 | "noDownload": true, 60 | "betterSearch": true, 61 | "thumbFadeIn": false, 62 | "noInfi": false, 63 | "noFlexy": true, 64 | "randomSubCount": false, 65 | "viewCountFogging": false, 66 | "showNew": true, 67 | "showChangelog": true 68 | }; 69 | storage.set({BTDefaultConfig: defaultSettings}); 70 | initiate(); 71 | function initiate() { 72 | storage.get(['BTConfig'], function(result) { 73 | if (Object.keys(result).length == 0) { 74 | storage.set({BTConfig: defaultSettings}); 75 | BTConfig = defaultSettings; 76 | } else { 77 | //check which default settings are missing (e.g. due to updates) and add them 78 | for (let i in defaultSettings) { //loop through default settings 79 | let settingFound = false; 80 | for (let j in result.BTConfig) { //loop through current settings 81 | if (i == j) { 82 | settingFound = true; 83 | break; 84 | } 85 | } 86 | if (!settingFound) { 87 | console.log('[BT Log] New setting ' + i + ' is now available!'); 88 | result.BTConfig[i] = defaultSettings[i]; 89 | storage.set({BTConfig: result.BTConfig}); 90 | } 91 | } 92 | BTConfig = result.BTConfig; //reassign in case missing settings were added 93 | playerSize.width = 555; 94 | playerSize.height = Math.ceil(playerSize.width / aspectRatio); 95 | } 96 | }); 97 | } -------------------------------------------------------------------------------- /firefox beta/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CustomTube Beta", 3 | "version": "1.3.0.2", 4 | "description": "Choose your own YouTube layout, and more!", 5 | "permissions": ["activeTab", "storage"], 6 | "browser_action": { 7 | "default_popup": "popup.html", 8 | "default_icon": { 9 | "16": "images/16.png", 10 | "32": "images/32.png", 11 | "48": "images/48.png", 12 | "128": "images/128.png" 13 | } 14 | }, 15 | "icons": { 16 | "16": "images/16.png", 17 | "32": "images/32.png", 18 | "48": "images/48.png", 19 | "128": "images/128.png" 20 | }, 21 | "background": { 22 | "scripts": ["background.js"] 23 | }, 24 | "content_scripts": [ 25 | { 26 | "matches": ["*://*.youtube.com/*"], 27 | "exclude_matches": ["*://*.youtube.com/embed/*"], 28 | "css": [ 29 | "general.css", 30 | "css/bt-universalized-elements.css", 31 | "css/static.css", 32 | "css/static-scrolling.css", 33 | "css/psuedo-static.css", 34 | "css/rich-grid.css", 35 | "css/topbar.css", 36 | "css/sidebar.css", 37 | "css/chips.css", 38 | "css/search.css", 39 | "css/watch-page.css", 40 | "css/watch-page-blobs.css", 41 | "css/ltod.css", 42 | "css/description.css", 43 | "css/comments.css", 44 | "css/playlist-panel.css", 45 | "css/channel-rework.css", 46 | "css/related-videos.css", 47 | "css/cosmicpanda.css", 48 | "css/polymer.css", 49 | "css/sub-btn.css", 50 | "css/menus.css", 51 | "css/player.css", 52 | "css/appbar.css", 53 | "css/global-color-palette.css", 54 | "css/emerald-general.css", 55 | "css/emerald-watch4.css", 56 | "css/emerald-watch5.css", 57 | "css/emerald-watch7.css", 58 | "css/emerald-watch8.css", 59 | "css/emerald-watch9.css" 60 | ], 61 | "run_at": "document_start" 62 | }, 63 | { 64 | "matches": ["*://*.youtube.com/*"], 65 | "exclude_matches": ["*://*.youtube.com/embed/*"], 66 | "js": [ 67 | "initial-setup.js" 68 | ], 69 | "run_at": "document_start" 70 | }, 71 | { 72 | "matches": ["*://*.youtube.com/*"], 73 | "exclude_matches": ["*://*.youtube.com/embed/*"], 74 | "js": ["main.js"] 75 | } 76 | 77 | ], 78 | "web_accessible_resources": [ 79 | "images/*" 80 | ], 81 | "browser_specific_settings": { 82 | "gecko": { 83 | "id": "{3317c4c9-c062-427a-9d29-15db676687eb}" 84 | } 85 | }, 86 | "manifest_version": 2 87 | } -------------------------------------------------------------------------------- /firefox beta/scripts/logo-endpoint.js: -------------------------------------------------------------------------------- 1 | cbFunction(); 2 | document.addEventListener("yt-page-data-updated", cbFunction); 3 | function cbFunction() { 4 | setTimeout(doNext, 50); 5 | setTimeout(doNext, 500); 6 | function doNext() { 7 | var ytdMasthead = document.querySelector("ytd-masthead"); 8 | ytdMasthead.data.logo.topbarLogoRenderer.endpoint.browseEndpoint.browseId = "FEsubscriptions"; 9 | ytdMasthead.data.logo.topbarLogoRenderer.endpoint.commandMetadata.webCommandMetadata.url = "/feed/subscriptions"; 10 | } 11 | } -------------------------------------------------------------------------------- /firefox beta/scripts/my-channel-btn.js: -------------------------------------------------------------------------------- 1 | var finished = false; 2 | var urlVar = "placeholder"; 3 | if (finished != true) { 4 | if (document.querySelector("html[my-channel-btn='true']") != null) { 5 | var YVData = document.querySelector("ytd-guide-section-renderer:nth-child(1) ytd-guide-collapsible-section-entry-renderer ytd-guide-entry-renderer:nth-child(2)").data; 6 | document.querySelector("#bt-my-channel-button").data = YVData; 7 | var urlVarTemp = document.querySelector("#bt-my-channel-button").data.navigationEndpoint.urlEndpoint; 8 | if (urlVar == "placeholder") { 9 | urlVar = urlVarTemp; 10 | } 11 | var cutString = JSON.stringify(urlVar).split('l/'); 12 | var theString = cutString[1]; 13 | var cutString1 = theString.split('/'); 14 | var theString1 = cutString1[0]; 15 | console.log(theString1); 16 | sessionStorage.setItem("nebula-channel-url", theString1); 17 | var chanUrl = sessionStorage.getItem("nebula-channel-url"); 18 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.browseEndpoint = { browseId: chanUrl }; 19 | //document.querySelector("#bt-my-channel-button").data.trackingParams = "BeamTubeButtonOne"; 20 | document.querySelector("ytd-guide-section-renderer ytd-guide-entry-renderer:not(#bt-my-channel-button)").data.navigationEndpoint.browseEndpoint.browseId = "FEwhat_to_watch"; 21 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.browseEndpoint.canonicalBaseUrl = undefined; 22 | document.querySelector("#bt-my-channel-button").data.formattedTitle.simpleText = "My Channel"; 23 | document.querySelector("#bt-my-channel-button").data.icon.iconType = "ACCOUNT_BOX"; 24 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.rootVe = 3611; 25 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.url = "/channel/" + theString1; 26 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.webPageType = "WEB_PAGE_TYPE_CHANNEL"; 27 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.urlEndpoint = undefined; 28 | setTimeout(redFunct, 10); 29 | function redFunct() { 30 | if (document.querySelector("html[my-channel-btn='true']") != null) { 31 | var cCase = sessionStorage.getItem("lowerCaseC"); 32 | document.querySelector("html").setAttribute("my-channel-btn", "true"); 33 | if (cCase == "false") { 34 | document.querySelector("#bt-my-channel-button yt-formatted-string").innerText = "My Channel"; 35 | document.querySelector("#bt-my-channel-button #endpoint").title = "My Channel"; 36 | } 37 | if (cCase == "true") { 38 | document.querySelector("#bt-my-channel-button yt-formatted-string").innerText = "My channel"; 39 | document.querySelector("#bt-my-channel-button #endpoint").title = "My channel"; 40 | } 41 | } 42 | //document.querySelector("#bt-your-vids-button").remove(); 43 | else { 44 | document.querySelector("#bt-my-channel-button").remove(); 45 | } 46 | sessionStorage.setItem("nebula-done-my-channel", "true"); 47 | } 48 | finished == true; 49 | } 50 | } -------------------------------------------------------------------------------- /firefox beta/scripts/resize.js: -------------------------------------------------------------------------------- 1 | //document.addEventListener("yt-page-data-updated", delayedResize); 2 | /*var loopThroughResize = setInterval(function() { 3 | if (document.querySelector("html[location='watch'] ytd-watch-flexy:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 4 | doResize(); 5 | } 6 | }, 100000);*/ 7 | var checkIfNeedResize = setInterval(function() { 8 | if (document.querySelector("html[location='watch'] [ct-watch-elem]:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 9 | var ctrls = document.querySelector('.ytp-chrome-bottom'); 10 | var offset = document.querySelector("html").getAttribute('player-offset'); 11 | var width = document.querySelector("html").getAttribute('player-width'); 12 | width = parseInt(width); 13 | offset = parseInt(offset); 14 | width = width + offset; 15 | var ctrlsWidth = ctrls.style.width; 16 | if (ctrlsWidth != width) { 17 | doResize(); 18 | } 19 | } 20 | }, 2000); 21 | setTimeout(checkIfNeedResize, 10); 22 | window.addEventListener('resize', () => { 23 | let repeatInsert = setInterval(() => { 24 | doResize(); 25 | }, 500); 26 | setTimeout(() => { 27 | clearInterval(repeatInsert); 28 | }, 2000); 29 | }); 30 | /* 31 | function delayedResize() { 32 | console.log("delayedResize"); 33 | setTimeout(doResize, 1000); 34 | setTimeout(doResize, 2500); 35 | } 36 | */ 37 | function doResize() { 38 | if (document.querySelector("html[location='watch'] [ct-watch-elem]:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 39 | var player = document.querySelector('#movie_player'); 40 | var offset = document.querySelector("html").getAttribute('player-offset'); 41 | var width = document.querySelector("html").getAttribute('player-width'); 42 | width = parseInt(width); 43 | offset = parseInt(offset); 44 | width = width + offset; 45 | var height = document.querySelector("html").getAttribute('player-height'); 46 | player.setInternalSize(width, height); 47 | } 48 | } -------------------------------------------------------------------------------- /firefox beta/scripts/trending-btn.js: -------------------------------------------------------------------------------- 1 | var finished = false; 2 | var urlVar = "placeholder"; 3 | if (finished != true) { 4 | if (document.querySelector("html[trending-btn='true']") != null) { 5 | var YVData = document.querySelector("#bt-trending-button").data; 6 | document.querySelector("#bt-trending-button-2").data = YVData; 7 | finished == true; 8 | } 9 | } -------------------------------------------------------------------------------- /firefox beta/updates.json: -------------------------------------------------------------------------------- 1 | { 2 | "addons": { 3 | "{3317c4c9-c062-427a-9d29-15db676687eb}": { 4 | "updates": [ 5 | { 6 | "version": "1.1.0.2", 7 | "update_link": "https://github.com/lightbeam24/CustomTube/releases/download/Beta/2734ecb554944a1bb95f-1.1.0.2.xpi" 8 | } 9 | { 10 | "version": "1.1.0.3", 11 | "update_link": "https://github.com/lightbeam24/CustomTube/releases/download/Beta/2734ecb554944a1bb95f-1.1.0.3.xpi" 12 | } 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /firefox/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) lightbeam24 4 | Copyright (c) the-omnipotent 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /firefox/background.js: -------------------------------------------------------------------------------- 1 | function handleInstalled(reason) { 2 | browser.storage.sync.get(['BTConfig'], function(result) { 3 | if (Object.keys(result).length > 0 && !result.BTConfig.showChangelog) { 4 | return; 5 | } 6 | else if (reason != "browser_update") { 7 | browser.tabs.create({ 8 | url: `./changelog.html#${reason}` 9 | }); 10 | } 11 | }); 12 | } 13 | 14 | browser.runtime.onInstalled.addListener(reason => { 15 | handleInstalled(reason.reason); 16 | }); -------------------------------------------------------------------------------- /firefox/changelog.js: -------------------------------------------------------------------------------- 1 | function handleChangelog() { 2 | let changelogHeader = document.querySelector('#header'); 3 | let changelogFirstInstallTip = document.querySelector('#fit'); 4 | let changelogVersion = document.querySelector('#version'); 5 | let version = browser.runtime.getManifest().version; 6 | if (!changelogHeader) return; 7 | if (window.location.href.includes('#install')) { 8 | changelogHeader.innerText = "CustomTube was successfully installed!"; 9 | } 10 | else if (window.location.href.includes('#check')) { 11 | changelogHeader.innerText = `CustomTube is currently on version ${version}.`; 12 | } else { 13 | changelogVersion.innerText = `CustomTube has updated to version ${version}!`; 14 | } 15 | } 16 | 17 | handleChangelog(); -------------------------------------------------------------------------------- /firefox/css/chips.css: -------------------------------------------------------------------------------- 1 | html[layout^="stargazer"] { 2 | --bt-chips-display: none; 3 | } 4 | html[layout^="aozora"] { 5 | --bt-chips-display: none; 6 | } 7 | html[layout^="cosmicpanda"] { 8 | --bt-chips-display: none; 9 | } 10 | html[chips-style^="hitchhiker"] { 11 | --bt-chips-display: block; 12 | --bt-outer-chips-position: fixed; 13 | --bt-outer-chips-height: 40px; 14 | --bt-outer-chips-top: var(--bt-topbar-height); 15 | --bt-outer-chips-bg: var(--yt-spec-brand-background-primary); 16 | --bt-outer-chips-border-top: none; 17 | --bt-outer-chips-border-bottom: 1px solid var(--bt-section-border-color); 18 | --bt-chip-margin-top: 6px; 19 | --bt-chip-padding-bottom: 3px; 20 | --bt-chip-radius: 0; 21 | --bt-chip-font-size: 13px; 22 | --bt-chip-text-transform: none; 23 | --bt-chip-border-bottom-hover: 3px solid var(--bt-spec-emphasis); 24 | --bt-active-chip-bg: none; 25 | --bt-active-chip-text-color: var(--yt-spec-text-primary); 26 | --bt-active-chip-border: none; 27 | --bt-active-chip-border-bottom: 3px solid var(--bt-spec-emphasis); 28 | --bt-inactive-chip-bg: none; 29 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 30 | --bt-inactive-chip-border: none; 31 | } 32 | html[chips-style^="hitchhiker-2013"] { 33 | --bt-chips-display: none; 34 | --bt-outer-chips-position: absolute; 35 | --bt-outer-chips-height: 40px; 36 | --bt-outer-chips-top: var(--bt-topbar-height); 37 | --bt-outer-chips-bg: var(--yt-spec-brand-background-primary); 38 | --bt-outer-chips-border-top: none; 39 | --bt-outer-chips-border-bottom: 1px solid var(--bt-section-border-color); 40 | --bt-chip-margin-top: 6px; 41 | --bt-chip-padding-bottom: 3px; 42 | --bt-chip-radius: 0; 43 | --bt-chip-font-size: 13px; 44 | --bt-chip-text-transform: none; 45 | --bt-chip-border-bottom-hover: 3px solid var(--bt-spec-emphasis); 46 | --bt-active-chip-bg: none; 47 | --bt-active-chip-text-color: var(--yt-spec-text-primary); 48 | --bt-active-chip-border: none; 49 | --bt-active-chip-border-bottom: 3px solid var(--bt-spec-emphasis); 50 | --bt-inactive-chip-bg: none; 51 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 52 | --bt-inactive-chip-border: none; 53 | } 54 | /*html[layout="polymer-2019"],*//* 55 | html[layout="polymer-2020"] { 56 | --bt-chips-display: none; 57 | }*/ 58 | html[chips-style^="polymer-2019"] { 59 | --bt-outer-chips-position: fixed; 60 | --bt-outer-chips-height: 56px; 61 | --bt-outer-chips-top: var(--bt-topbar-height); 62 | --bt-outer-chips-bg: var(--bt-masthead-bg); 63 | --bt-outer-chips-border-top: none; 64 | --bt-outer-chips-border-bottom: none; 65 | --bt-chip-margin-top: 12px; 66 | --bt-chip-padding-bottom: 0px; 67 | --bt-chip-radius: 2px; 68 | --bt-chip-font-size: 1.4rem; 69 | --bt-chip-font-weight: 500; 70 | --bt-chip-text-transform: uppercase; 71 | --bt-chip-border-bottom-hover: none; 72 | --bt-chip-bg-hover: var(--yt-spec-button-chip-background-hover); 73 | --bt-active-chip-bg: var(--yt-spec-icon-inactive); 74 | --bt-active-chip-text-color: var(--yt-spec-text-primary-inverse); 75 | --bt-active-chip-border: none; 76 | --bt-inactive-chip-bg: var(--yt-spec-badge-chip-background); 77 | --bt-inactive-chip-text-color: var(--bt-gcp-666); 78 | --bt-inactive-chip-border: none; 79 | } 80 | html[chips-style^="polymer-202"] { 81 | --bt-outer-chips-position: fixed; 82 | --bt-outer-chips-height: 56px; 83 | --bt-outer-chips-top: var(--bt-topbar-height); 84 | --bt-outer-chips-bg: var(--bt-masthead-bg); 85 | --bt-outer-chips-border-top: 1px solid var(--yt-spec-10-percent-layer); 86 | --bt-outer-chips-border-bottom: 1px solid var(--yt-spec-10-percent-layer); 87 | --bt-chip-margin-top: 12px; 88 | --bt-chip-padding-bottom: 0px; 89 | --bt-chip-radius: 16px; 90 | --bt-chip-font-size: 1.4rem; 91 | --bt-chip-text-transform: none; 92 | --bt-chip-border-bottom-hover: 1px solid var(--yt-spec-10-percent-layer); 93 | --bt-chip-bg-hover: var(--yt-spec-button-chip-background-hover); 94 | --bt-active-chip-bg: var(--yt-spec-icon-inactive); 95 | --bt-active-chip-text-color: var(--yt-spec-text-primary-inverse); 96 | --bt-active-chip-border: 1px solid var(--yt-spec-10-percent-layer); 97 | --bt-inactive-chip-bg: var(--yt-spec-badge-chip-background); 98 | --bt-inactive-chip-text-color: var(--yt-spec-text-primary); 99 | --bt-inactive-chip-border: 1px solid var(--yt-spec-10-percent-layer); 100 | } 101 | /* hide chips */ 102 | ytd-browse[page-subtype="home"] ytd-feed-filter-chip-bar-renderer, 103 | ytd-watch-flexy yt-related-chip-cloud-renderer { 104 | display: var(--bt-chips-display) !important; 105 | } 106 | /* BTSection Chips */ 107 | html[chips-style] ytd-feed-filter-chip-bar-renderer:not([not-sticky]) #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 108 | top: var(--bt-outer-chips-top); 109 | position: var(--bt-outer-chips-position); 110 | height: var(--bt-outer-chips-height); 111 | background-color: var(--bt-outer-chips-bg); 112 | border-top: var(--bt-outer-chips-border-top); 113 | border-bottom: var(--bt-outer-chips-border-bottom); 114 | } 115 | /* patch */ 116 | ytd-browse[page-subtype="home"] ytd-feed-filter-chip-bar-renderer { 117 | display: var(--bt-chips-display) !important; 118 | position: fixed !important; 119 | z-index: 1919; 120 | width: calc(100vw - var(--bt-sidebar-width)) !important; 121 | max-width: calc(100vw - var(--bt-sidebar-width)) !important; 122 | min-width: calc(100vw - var(--bt-sidebar-width)) !important; 123 | left: var(--bt-sidebar-width); 124 | } 125 | ytd-feed-filter-chip-bar-renderer #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 126 | width: calc(100vw - var(--bt-sidebar-width)) !important; 127 | } 128 | ytd-feed-filter-chip-bar-renderer #scroll-container.ytd-feed-filter-chip-bar-renderer { 129 | width: calc(98vw - var(--bt-sidebar-width)) !important; 130 | margin: 0 auto; 131 | } 132 | /* patch end */ 133 | /* all chips */ 134 | html[chips-style] yt-chip-cloud-chip-renderer { 135 | margin-top: var(--bt-chip-margin-top); 136 | padding-bottom: var(--bt-chip-padding-bottom); 137 | } 138 | /* selected chip */ 139 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected], 140 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected] { 141 | background-color: var(--bt-active-chip-bg); 142 | color: var(--bt-active-chip-text-color); 143 | font-size: var(--bt-chip-font-size); 144 | border: var(--bt-active-chip-border) !important; 145 | border-radius: var(--bt-chip-radius) !important; 146 | border-bottom: var(--bt-active-chip-border-bottom) !important; 147 | } 148 | /* not selected chip */ 149 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"], 150 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"], 151 | html[chips-style] yt-chip-cloud-chip-renderer[chip-style="STYLE_REFRESH_TO_NOVEL_CHIP"] { 152 | background-color: var(--bt-inactive-chip-bg); 153 | border: var(--bt-inactive-chip-border) !important; 154 | font-size: var(--bt-chip-font-size); 155 | font-weight: var(--bt-chip-font-weight); 156 | text-transform: var(--bt-chip-text-transform); 157 | color: var(--bt-inactive-chip-text-color); 158 | /*padding: 0 var(--ytd-margin-3x); 159 | transition: background-color 0.5s cubic-bezier(0.05,0,0,1);*/ 160 | border-radius: var(--bt-chip-radius); 161 | } 162 | html[chips-style] yt-chip-cloud-chip-renderer:not([selected]):hover { 163 | border: var(--bt-inactive-chip-border) !important; 164 | border-bottom: var(--bt-chip-border-bottom-hover, 0px solid currentcolor) !important; 165 | background-color: var(--bt-chip-bg-hover) !important; 166 | } -------------------------------------------------------------------------------- /firefox/css/cosmicpanda.css: -------------------------------------------------------------------------------- 1 | /* cosmicpanda */ 2 | html[layout^="cosmicpanda"] ytd-masthead { 3 | font-family: arial !important; 4 | } 5 | /* BTSection Topbar */ 6 | /* topbar color */ 7 | html[layout^="cosmicpanda"] ytd-masthead { 8 | background: transparent; 9 | } 10 | /* makes topbar have no bg */ 11 | html[layout^="cosmicpanda"] ytd-masthead[darker-dark-theme] #background.ytd-masthead { 12 | background: transparent !important; 13 | display: none !important; 14 | } 15 | /* topbar color */ 16 | html[layout^="cosmicpanda"] ytd-masthead { 17 | background-image: var(--bt-site-bg) !important; 18 | } 19 | html[layout^="cosmicpanda"] ytd-item-section-renderer { 20 | background-image: var(--bt-site-bg) !important; 21 | } -------------------------------------------------------------------------------- /firefox/css/menus.css: -------------------------------------------------------------------------------- 1 | /* multiple dropdowns probably */ 2 | html[menu-style="unrounded"] { 3 | --paper-menu-button-content-border-radius: 0 !important; 4 | } 5 | /* sort by */ 6 | html[menu-style="unrounded"] .dropdown-content.tp-yt-paper-menu-button, 7 | html[menu-style="unrounded"] yt-dropdown-menu[modern-dialogs] #menu.yt-dropdown-menu { 8 | border-radius: 0 !important; 9 | } 10 | 11 | /* Thanks to UnderscoreAngel for the code in this section */ 12 | /*Fix for the rounded stuff*/ 13 | 14 | /*More Popup in watch page*/ 15 | html[menu-style="unrounded"] ytd-menu-popup-renderer { 16 | border-radius: 0px; 17 | } 18 | 19 | /*Share Popup in watch page*/ 20 | html[menu-style="unrounded"] tp-yt-paper-dialog[modern] { 21 | border-radius: 0px; 22 | } 23 | 24 | /*buttons in comments*/ 25 | html[menu-style="unrounded"] ytd-comments .yt-spec-button-shape-next--size-m { 26 | height: 32px; 27 | border-radius: 2px; 28 | } 29 | 30 | /*Search Bar Results (this one is not full i can't find the other stuff that makes it rounded)*/ 31 | html[menu-style="unrounded"] .sbsb_a { 32 | border-radius: 3px; 33 | } 34 | 35 | /*this is a certified "Show Chat Replay" Moment*/ 36 | html[menu-style="unrounded"] ytd-watch-flexy #secondary .yt-spec-button-shape-next--size-m { 37 | border-radius: 1px; 38 | } 39 | 40 | /*Notification & Account Panel*/ 41 | html[menu-style="unrounded"] ytd-multi-page-menu-renderer { 42 | /* display: inline-block; */ 43 | border-radius: 0px; 44 | 45 | } 46 | 47 | /*Clips Panel*/ 48 | html[menu-style="unrounded"] ytd-engagement-panel-section-list-renderer[modern-panels] { 49 | border-radius: 0px; 50 | overflow: hidden; 51 | } 52 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbdd_a { 53 | margin-top: -4px; 54 | } 55 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbdd_b { 56 | border-radius: 0; 57 | } 58 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbsb_a { 59 | padding: 2px; 60 | border-radius: 0px; 61 | } 62 | html[menu-style="unrounded"]:not([layout^="polymer"]) .gsfs { 63 | font-size: 16px; 64 | padding: 0px 4px !important; 65 | } 66 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbsb_c { 67 | line-height: 22px; 68 | } 69 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbqs_c::before { 70 | display: none; 71 | } 72 | html[menu-style="unrounded"]:not([layout^="polymer"]) .sbfl_a { 73 | margin: -5px 0px -5px 0; 74 | } -------------------------------------------------------------------------------- /firefox/css/psuedo-static.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* page man */ 3 | html[pseudo-static] ytd-app:not([masthead-hidden]) #page-manager { 4 | max-width: 1000px; 5 | } 6 | /* WP */ 7 | html[pseudo-static] #columns.ytd-watch-flexy { 8 | margin-left: calc(var(--bt-sidebar-width) + 40px); 9 | } 10 | /* Topbar. This code works perfectly and is all that's needed for all pages. */ 11 | /* inner */ 12 | html[pseudo-static] ytd-masthead { 13 | width: calc(100vw - 80px); 14 | margin: 0 auto; 15 | } 16 | html[pseudo-static] #container.ytd-masthead { 17 | padding: 0; 18 | } 19 | /* Section subs page */ 20 | html[pseudo-static] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) { 21 | max-width: calc(var(--tubek12-static-page-width) - var(--app-drawer-width)); 22 | } 23 | /* Section Watch Page */ 24 | /* This code makes the page itself static, as well as the OUTER video player, but not the controls or the video element itself. */ 25 | html[pseudo-static] ytd-watch-flexy { 26 | --ytd-watch-flexy-player-width: 640px !important; 27 | --ytd-watch-flexy-player-height: 360px !important; 28 | } 29 | /* This code is to make reduce margin with related. */ 30 | html[pseudo-static] #primary.ytd-watch-flexy { 31 | padding-right: 0; 32 | } 33 | html[pseudo-static] ytd-watch-flexy #primary.ytd-watch-flexy { 34 | width: 641px !important; 35 | min-width: 641px !important; 36 | max-width: 641px !important; 37 | } 38 | /* SubSection Video */ 39 | /* This code seems to make videos work pretty much perfectly, except for non 16:9 videos. The min-height property is required for 4:3 videos to keep a consistent width. */ 40 | html[pseudo-static] ytd-watch-flexy #movie_player[aria-label="YouTube Video Player"] video { 41 | width: auto !important; 42 | width: 640px !important; 43 | display: flex; 44 | max-width: 640px !important; 45 | height: auto !important; 46 | max-height: 366px !important; 47 | align-self: center !important; 48 | min-height: 360px !important; 49 | } 50 | /* This code is necessary for non 16:9 videos to keep a consistent width. */ 51 | html[pseudo-static] #movie_player[aria-label="YouTube Video Player"] .ytp-chrome-bottom { 52 | width: 620px !important; 53 | } 54 | /* These variables are required for non 16:9 non 1:1 videos to keep a consistent width. */ 55 | html[pseudo-static] ytd-watch-flexy[flexy] { 56 | --ytd-watch-flexy-width-ratio: 16 !important; 57 | --ytd-watch-flexy-height-ratio: 9 !important; 58 | --ytd-watch-flexy-space-below-player: 136px; 59 | --ytd-watch-flexy-non-player-height: 360px !important; 60 | --ytd-watch-flexy-non-player-width: 641px !important; 61 | --ytd-watch-flexy-min-player-height: 360px !important; 62 | --ytd-watch-flexy-min-player-width: 641px !important; 63 | --ytd-watch-flexy-max-player-height: 360px !important; 64 | --ytd-watch-flexy-max-player-width: 641px !important; 65 | } 66 | html[pseudo-static] { 67 | --bt-player-width: 640px; 68 | --bt-player-height: 360px; 69 | } 70 | /* primary */ 71 | html[pseudo-static] #primary.ytd-watch-flexy { 72 | margin-left: 0; 73 | padding-right: 0; 74 | } 75 | html[pseudo-static] #secondary-inner { 76 | width: 330px !important; 77 | } 78 | html[pseudo-static] #secondary-inner { 79 | width: 360px !important; 80 | } 81 | html[pseudo-static] #secondary-inner { 82 | width: 380px !important; 83 | } 84 | /* This code makes sidebar attach itself to edge of page, instead of screen. Needs to be disabled on watch pages. */ 85 | html[pseudo-static] ytd-app:not([masthead-hidden]) tp-yt-app-drawer { 86 | left: 40px !important; 87 | } 88 | /* Section playlist page */ 89 | html[pseudo-static] ytd-playlist-header-renderer { 90 | left: initial !important; 91 | } 92 | html[pseudo-static] #primary.ytd-watch-flexy { 93 | max-width: calc((100vh - (var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))) * (${window.screen.width} / ${window.screen.height})) !important; 94 | min-width: calc(var(--ytd-watch-flexy-min-player-height) * (${window.screen.width} / ${window.screen.height})) !important; 95 | } 96 | html[pseudo-static] #player-container-outer { 97 | max-width: 640px !important; 98 | min-width: 0 !important; 99 | position: relative !important; 100 | } 101 | html[pseudo-static] #player-container-inner { 102 | padding-top: calc(${window.screen.height} / ${window.screen.width} * 100%) !important; 103 | } 104 | html[pseudo-static] .html5-video-container { 105 | width:100% !important; 106 | height:100% !important; 107 | } 108 | html[pseudo-static] .html5-video-container video { 109 | width:100% !important; 110 | height:100% !important; 111 | left:0 !important; 112 | top: 0 !important; 113 | object-fit: contain !important; 114 | } 115 | html[pseudo-static] ytd-watch-flexy #player { 116 | width: 641px; 117 | } -------------------------------------------------------------------------------- /firefox/css/static-scrolling.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* This code makes everything static on most pages */ 3 | ytd-app[static-scrolling] #masthead-container.ytd-app { 4 | position: absolute; 5 | } 6 | ytd-app[static-scrolling] #guide { 7 | position: absolute; 8 | } 9 | /* Chips. */ 10 | ytd-app[static-scrolling][location="home"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { 11 | position: absolute !important; 12 | } 13 | /* Section playlist page */ 14 | ytd-app[static-scrolling] ytd-playlist-header-renderer { 15 | left: initial !important; 16 | position: absolute !important; 17 | } 18 | ytd-app[static-scrolling] #footer { 19 | pointer-events: all; 20 | } 21 | /* fix scroll */ 22 | ytd-app[static-scrolling] #guide-inner-content.ytd-app { 23 | scrollbar-width: none !important; 24 | background: none; 25 | z-index: 0; 26 | overscroll-behavior: unset !important; 27 | pointer-events: none; 28 | } 29 | ytd-app[static-scrolling] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer { 30 | pointer-events: all; 31 | } 32 | ytd-app[static-scrolling] tp-yt-paper-item:focus::before.tp-yt-paper-item.tp-yt-paper-item:focus::before { 33 | pointer-events: all !important; 34 | } -------------------------------------------------------------------------------- /firefox/css/static.css: -------------------------------------------------------------------------------- 1 | /* Section regardless of page */ 2 | /* Topbar. This code works perfectly and is all that's needed for all pages. */ 3 | ytd-app[static] ytd-masthead { 4 | width: var(--tubek12-static-page-width) !important; 5 | } 6 | ytd-app[static] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled), 7 | html[layout="hitchhiker-2013-1"][location="channel"] ytd-two-column-browse-results-renderer.grid:not(.grid-disabled) { 8 | max-width: calc(var(--tubek12-static-page-width) - var(--app-drawer-width)) !important; 9 | } 10 | html[channel-style^="cosmicpanda"][location="channel"] ytd-app:not([masthead-hidden]) #page-manager { 11 | max-width: 1000px; 12 | margin: 0 auto; 13 | } 14 | html[layout="hitchhiker-2013-1"][location="channel"] tp-yt-app-drawer { 15 | display: none; 16 | } 17 | /* This code makes the page itself static, as well as the OUTER video player, but not the controls or the video element itself. */ 18 | html[static] ytd-watch-flexy { 19 | --ytd-watch-flexy-player-width: 586px !important; 20 | --ytd-watch-flexy-player-height: 330px !important; 21 | --ytd-watch-flexy-player-width: 640px !important; 22 | --ytd-watch-flexy-player-height: 360px !important; 23 | } 24 | /* This code is to make reduce margin with related. */ 25 | html[static] #primary.ytd-watch-flexy { 26 | padding-right: 0; 27 | } 28 | html[static] ytd-watch-flexy #primary.ytd-watch-flexy { 29 | width: 586px !important; 30 | min-width: 586px !important; 31 | max-width: 586px !important; 32 | width: 640px !important; 33 | min-width: 640px !important; 34 | max-width: 640px !important; 35 | } 36 | /* SubSection Video */ 37 | /* This code seems to make videos work pretty much perfectly, except for non 16:9 videos. The min-height property is required for 4:3 videos to keep a consistent width. */ 38 | html[static] ytd-watch-flexy #movie_player[aria-label="YouTube Video Player"] video { 39 | width: auto !important; 40 | width: 586px !important; 41 | margin: 0 auto !important; 42 | display: flex; 43 | max-width: 586px !important; 44 | height: auto !important; 45 | max-height: 336px !important; 46 | align-self: center !important; 47 | min-height: 330px !important; 48 | 49 | width: auto !important; 50 | width: 640px !important; 51 | margin: 0 auto !important; 52 | display: flex; 53 | max-width: 640px !important; 54 | height: auto !important; 55 | max-height: 366px !important; 56 | align-self: center !important; 57 | min-height: 360px !important; 58 | } 59 | /* This code is necessary for non 16:9 videos to keep a consistent width. */ 60 | html[static] #movie_player[aria-label="YouTube Video Player"] .ytp-chrome-bottom { 61 | width: 566px !important; 62 | width: 620px !important; 63 | } 64 | /* These variables are required for non 16:9 non 1:1 videos to keep a consistent width. */ 65 | html[static] ytd-watch-flexy[flexy] { 66 | --ytd-watch-flexy-width-ratio: 16 !important; 67 | --ytd-watch-flexy-height-ratio: 9 !important; 68 | --ytd-watch-flexy-space-below-player: 136px; 69 | --ytd-watch-flexy-non-player-height: 330px !important; 70 | --ytd-watch-flexy-non-player-width: 586px !important; 71 | --ytd-watch-flexy-min-player-height: 330px !important; 72 | --ytd-watch-flexy-min-player-width: 586px !important; 73 | --ytd-watch-flexy-max-player-height: 330px !important; 74 | --ytd-watch-flexy-max-player-width: 586px !important; 75 | 76 | --ytd-watch-flexy-width-ratio: 16 !important; 77 | --ytd-watch-flexy-height-ratio: 9 !important; 78 | --ytd-watch-flexy-space-below-player: 136px; 79 | --ytd-watch-flexy-non-player-height: 360px !important; 80 | --ytd-watch-flexy-non-player-width: 640px !important; 81 | --ytd-watch-flexy-min-player-height: 360px !important; 82 | --ytd-watch-flexy-min-player-width: 640px !important; 83 | --ytd-watch-flexy-max-player-height: 360px !important; 84 | --ytd-watch-flexy-max-player-width: 640px !important; 85 | 86 | } 87 | html[static] { 88 | --bt-player-width: 586px; 89 | --bt-player-height: 330px; 90 | 91 | --bt-player-width: 640px; 92 | --bt-player-height: 360px; 93 | } 94 | /* primary */ 95 | html[static] #primary.ytd-watch-flexy { 96 | margin-left: 0 !important; 97 | padding-left: 0 !important; 98 | } 99 | html[static] #secondary.ytd-watch-flexy { 100 | padding-right: 0 !important; 101 | } 102 | /* 103 | ytd-app[static] #secondary-inner { 104 | width: 330px !important; 105 | } 106 | ytd-app[static] #secondary-inner { 107 | width: 360px !important; 108 | } 109 | */ 110 | html[static] #secondary-inner { 111 | width: 380px !important; 112 | 113 | width: 330px !important; 114 | } 115 | /* Section pages that aren't watch */ 116 | /* This code makes the screen static on pages that aren't watch. Absolutely must be disabled on watch page. */ 117 | html[static] ytd-app:not([masthead-hidden]) { 118 | width: var(--tubek12-static-page-width) !important; 119 | margin: var(--tubek12-static-page-margin) !important; 120 | } 121 | /* This code makes sidebar attach itself to edge of page, instead of screen. Needs to be disabled on watch pages. */ 122 | html[static] ytd-app:not([masthead-hidden]) tp-yt-app-drawer { 123 | left: initial !important; 124 | } 125 | /* Section playlist page */ 126 | ytd-app[static] ytd-playlist-header-renderer { 127 | left: initial !important; 128 | } 129 | html[static] #primary.ytd-watch-flexy { 130 | max-width: calc((100vh - (var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player))) * (${window.screen.width} / ${window.screen.height})) !important; 131 | min-width: calc(var(--ytd-watch-flexy-min-player-height) * (${window.screen.width} / ${window.screen.height})) !important; 132 | } 133 | html[static] #player-container-outer { 134 | max-width: 586px !important; 135 | 136 | max-width: 640px !important; 137 | min-width: 0 !important; 138 | position: relative !important; 139 | } 140 | html[static] #player-container-inner { 141 | padding-top: calc(${window.screen.height} / ${window.screen.width} * 100%) !important; 142 | } 143 | html[static] .html5-video-container { 144 | width:100% !important; 145 | height:100% !important; 146 | } 147 | html[static] .html5-video-container video { 148 | width:100% !important; 149 | height:100% !important; 150 | left:0 !important; 151 | top: 0 !important; 152 | object-fit: contain !important; 153 | } -------------------------------------------------------------------------------- /firefox/images/128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox/images/128.png -------------------------------------------------------------------------------- /firefox/images/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox/images/16.png -------------------------------------------------------------------------------- /firefox/images/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox/images/32.png -------------------------------------------------------------------------------- /firefox/images/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox/images/48.png -------------------------------------------------------------------------------- /firefox/images/beamtubebg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox/images/beamtubebg.png -------------------------------------------------------------------------------- /firefox/images/ctlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox/images/ctlogo.png -------------------------------------------------------------------------------- /firefox/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightbeam24/CustomTube/fa0d5327c805fc0fcd8de93b1ab12b99b5450fba/firefox/images/logo.png -------------------------------------------------------------------------------- /firefox/images/open-in-new-window-button-2-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /firefox/initial-setup.js: -------------------------------------------------------------------------------- 1 | let minVersion = 53; 2 | let browserVersion; 3 | let storage = browser.storage.local; 4 | if (navigator.userAgent.match(/Firefox\/([^\s]+)/)) { 5 | browserVersion = parseInt(navigator.userAgent.match(/Firefox\/([^\s]+)/)[1]); 6 | if (browserVersion >= minVersion) { 7 | storage = browser.storage.sync; 8 | } 9 | } 10 | let BTConfig; 11 | let playerSize = {}; 12 | let aspectRatio = (window.screen.width / window.screen.height).toFixed(2); 13 | const defaultSettings = { 14 | // 2017 layout is default just so the user knows for sure the extension actually does something 15 | "layoutSelect": "hitchhiker-2017", 16 | "relatedSize": "auto", 17 | "searchbarStyle": "autoSearchBar", 18 | "channelVidsDropdown": "CVDDauto", 19 | "channelVidsPerRow": "CVPRauto", 20 | "homepageVidsPerRow": "HPVPRauto", 21 | "subsVidsPerRow": "SVPRauto", 22 | "videoRendererSize": "VRSizeAuto", 23 | "videoPlayerSize": "PS854x480", 24 | "videoPlayerStyle": "PSTauto", 25 | "hideShortsSubs": "HSSauto", 26 | "showVideosLink": "SVLauto", 27 | "useAppbar": "UABauto", 28 | "appbarMode": "ABMunpinned", 29 | "favicon": "faviAuto", 30 | "blockRGW": true, 31 | "FSNoScroll": true, 32 | "noCast": true, 33 | "squarePfp": false, 34 | "squareVid": false, 35 | "dontLoopPlaylists": false, 36 | /* sidebar */ 37 | "alwaysShowSidebar": false, 38 | "homeSidebarBtn": true, 39 | "wtwSidebarBtn": false, 40 | "NOTwtwSidebarBtn": false, 41 | "fytSidebarBtn": false, 42 | "myChannelSidebarBtn": true, 43 | "lowerCaseC": false, 44 | "shortsSidebarBtn": false, 45 | "trendingSidebarBtn": true, 46 | "subsSidebarBtn": true, 47 | /* topbar */ 48 | "logoEndpoint": "LEHome", 49 | "iUseRYD": false, 50 | /* tweaks */ 51 | "loopByDefault": false, 52 | "noJoin": true, 53 | "noClip": true, 54 | "noThanks": true, 55 | "noDownload": true, 56 | "betterSearch": true, 57 | "thumbFadeIn": false, 58 | "noInfi": false, 59 | "noFlexy": true, 60 | "randomSubCount": false, 61 | "viewCountFogging": false, 62 | "showNew": true, 63 | "showChangelog": true 64 | }; 65 | storage.set({BTDefaultConfig: defaultSettings}); 66 | initiate(); 67 | function initiate() { 68 | storage.get(['BTConfig'], function(result) { 69 | if (Object.keys(result).length == 0) { 70 | storage.set({BTConfig: defaultSettings}); 71 | BTConfig = defaultSettings; 72 | } else { 73 | //check which default settings are missing (e.g. due to updates) and add them 74 | for (let i in defaultSettings) { //loop through default settings 75 | let settingFound = false; 76 | for (let j in result.BTConfig) { //loop through current settings 77 | if (i == j) { 78 | settingFound = true; 79 | break; 80 | } 81 | } 82 | if (!settingFound) { 83 | console.log('[BT Log] New setting ' + i + ' is now available!'); 84 | result.BTConfig[i] = defaultSettings[i]; 85 | storage.set({BTConfig: result.BTConfig}); 86 | } 87 | } 88 | BTConfig = result.BTConfig; //reassign in case missing settings were added 89 | playerSize.width = 555; 90 | playerSize.height = Math.ceil(playerSize.width / aspectRatio); 91 | } 92 | }); 93 | } -------------------------------------------------------------------------------- /firefox/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CustomTube", 3 | "version": "1.2.7.2", 4 | "description": "Choose your own YouTube layout, and more!", 5 | "permissions": ["activeTab", "storage"], 6 | "browser_action": { 7 | "default_popup": "popup.html", 8 | "default_icon": { 9 | "16": "images/16.png", 10 | "32": "images/32.png", 11 | "48": "images/48.png", 12 | "128": "images/128.png" 13 | } 14 | }, 15 | "icons": { 16 | "16": "images/16.png", 17 | "32": "images/32.png", 18 | "48": "images/48.png", 19 | "128": "images/128.png" 20 | }, 21 | "background": { 22 | "scripts": ["background.js"] 23 | }, 24 | "content_scripts": [ 25 | { 26 | "matches": ["*://*.youtube.com/*"], 27 | "exclude_matches": ["*://*.youtube.com/embed/*"], 28 | "css": [ 29 | "general.css", 30 | "css/bt-universalized-elements.css", 31 | "css/static.css", 32 | "css/static-scrolling.css", 33 | "css/psuedo-static.css", 34 | "css/rich-grid.css", 35 | "css/topbar.css", 36 | "css/sidebar.css", 37 | "css/chips.css", 38 | "css/search.css", 39 | "css/watch-page.css", 40 | "css/watch-page-blobs.css", 41 | "css/ltod.css", 42 | "css/description.css", 43 | "css/comments.css", 44 | "css/playlist-panel.css", 45 | "css/channel-rework.css", 46 | "css/related-videos.css", 47 | "css/cosmicpanda.css", 48 | "css/polymer.css", 49 | "css/sub-btn.css", 50 | "css/menus.css", 51 | "css/player.css", 52 | "css/appbar.css", 53 | "css/global-color-palette.css" 54 | ], 55 | "run_at": "document_start" 56 | }, 57 | { 58 | "matches": ["*://*.youtube.com/*"], 59 | "exclude_matches": ["*://*.youtube.com/embed/*"], 60 | "js": [ 61 | "initial-setup.js" 62 | ], 63 | "run_at": "document_start" 64 | }, 65 | { 66 | "matches": ["*://*.youtube.com/*"], 67 | "exclude_matches": ["*://*.youtube.com/embed/*"], 68 | "js": ["main.js"] 69 | } 70 | 71 | ], 72 | "web_accessible_resources": [ 73 | "images/*" 74 | ], 75 | "browser_specific_settings": { 76 | "gecko": { 77 | "id": "{7917c4c9-c062-427a-9d29-15db676687eb}" 78 | } 79 | }, 80 | "manifest_version": 2 81 | } -------------------------------------------------------------------------------- /firefox/scripts/logo-endpoint.js: -------------------------------------------------------------------------------- 1 | cbFunction(); 2 | document.addEventListener("yt-page-data-updated", cbFunction); 3 | function cbFunction() { 4 | setTimeout(doNext, 50); 5 | setTimeout(doNext, 500); 6 | function doNext() { 7 | var ytdMasthead = document.querySelector("ytd-masthead"); 8 | ytdMasthead.data.logo.topbarLogoRenderer.endpoint.browseEndpoint.browseId = "FEsubscriptions"; 9 | ytdMasthead.data.logo.topbarLogoRenderer.endpoint.commandMetadata.webCommandMetadata.url = "/feed/subscriptions"; 10 | } 11 | } -------------------------------------------------------------------------------- /firefox/scripts/my-channel-btn.js: -------------------------------------------------------------------------------- 1 | var finished = false; 2 | var urlVar = "placeholder"; 3 | if (finished != true) { 4 | if (document.querySelector("html[my-channel-btn='true']") != null) { 5 | var YVData = document.querySelector("ytd-guide-section-renderer:nth-child(1) ytd-guide-collapsible-section-entry-renderer ytd-guide-entry-renderer:nth-child(2)").data; 6 | document.querySelector("#bt-my-channel-button").data = YVData; 7 | var urlVarTemp = document.querySelector("#bt-my-channel-button").data.navigationEndpoint.urlEndpoint; 8 | if (urlVar == "placeholder") { 9 | urlVar = urlVarTemp; 10 | } 11 | var cutString = JSON.stringify(urlVar).split('l/'); 12 | var theString = cutString[1]; 13 | var cutString1 = theString.split('/'); 14 | var theString1 = cutString1[0]; 15 | console.log(theString1); 16 | sessionStorage.setItem("nebula-channel-url", theString1); 17 | var chanUrl = sessionStorage.getItem("nebula-channel-url"); 18 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.browseEndpoint = { browseId: chanUrl }; 19 | //document.querySelector("#bt-my-channel-button").data.trackingParams = "BeamTubeButtonOne"; 20 | document.querySelector("ytd-guide-section-renderer ytd-guide-entry-renderer:not(#bt-my-channel-button)").data.navigationEndpoint.browseEndpoint.browseId = "FEwhat_to_watch"; 21 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.browseEndpoint.canonicalBaseUrl = undefined; 22 | document.querySelector("#bt-my-channel-button").data.formattedTitle.simpleText = "My Channel"; 23 | document.querySelector("#bt-my-channel-button").data.icon.iconType = "ACCOUNT_BOX"; 24 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.rootVe = 3611; 25 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.url = "/channel/" + theString1; 26 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.commandMetadata.webCommandMetadata.webPageType = "WEB_PAGE_TYPE_CHANNEL"; 27 | document.querySelector("#bt-my-channel-button").data.navigationEndpoint.urlEndpoint = undefined; 28 | setTimeout(redFunct, 10); 29 | function redFunct() { 30 | if (document.querySelector("html[my-channel-btn='true']") != null) { 31 | var cCase = sessionStorage.getItem("lowerCaseC"); 32 | document.querySelector("html").setAttribute("my-channel-btn", "true"); 33 | if (cCase == "false") { 34 | document.querySelector("#bt-my-channel-button yt-formatted-string").innerText = "My Channel"; 35 | document.querySelector("#bt-my-channel-button #endpoint").title = "My Channel"; 36 | } 37 | if (cCase == "true") { 38 | document.querySelector("#bt-my-channel-button yt-formatted-string").innerText = "My channel"; 39 | document.querySelector("#bt-my-channel-button #endpoint").title = "My channel"; 40 | } 41 | } 42 | //document.querySelector("#bt-your-vids-button").remove(); 43 | else { 44 | document.querySelector("#bt-my-channel-button").remove(); 45 | } 46 | sessionStorage.setItem("nebula-done-my-channel", "true"); 47 | } 48 | finished == true; 49 | } 50 | } -------------------------------------------------------------------------------- /firefox/scripts/resize.js: -------------------------------------------------------------------------------- 1 | //document.addEventListener("yt-page-data-updated", delayedResize); 2 | /*var loopThroughResize = setInterval(function() { 3 | if (document.querySelector("html[location='watch'] ytd-watch-flexy:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 4 | doResize(); 5 | } 6 | }, 100000);*/ 7 | var checkIfNeedResize = setInterval(function() { 8 | if (document.querySelector("html[location='watch'] ytd-watch-flexy:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 9 | var ctrls = document.querySelector('.ytp-chrome-bottom'); 10 | var offset = document.querySelector("html").getAttribute('player-offset'); 11 | var width = document.querySelector("html").getAttribute('player-width'); 12 | width = parseInt(width); 13 | offset = parseInt(offset); 14 | width = width + offset; 15 | var ctrlsWidth = ctrls.style.width; 16 | if (ctrlsWidth != width) { 17 | doResize(); 18 | } 19 | } 20 | }, 2000); 21 | setTimeout(checkIfNeedResize, 10); 22 | window.addEventListener('resize', () => { 23 | let repeatInsert = setInterval(() => { 24 | doResize(); 25 | }, 500); 26 | setTimeout(() => { 27 | clearInterval(repeatInsert); 28 | }, 2000); 29 | }); 30 | /* 31 | function delayedResize() { 32 | console.log("delayedResize"); 33 | setTimeout(doResize, 1000); 34 | setTimeout(doResize, 2500); 35 | } 36 | */ 37 | function doResize() { 38 | if (document.querySelector("html[location='watch'] ytd-watch-flexy:not([fullscreen]):not([theater]):not([cinema]) #movie_player") != null) { 39 | var player = document.querySelector('#movie_player'); 40 | var offset = document.querySelector("html").getAttribute('player-offset'); 41 | var width = document.querySelector("html").getAttribute('player-width'); 42 | width = parseInt(width); 43 | offset = parseInt(offset); 44 | width = width + offset; 45 | var height = document.querySelector("html").getAttribute('player-height'); 46 | player.setInternalSize(width, height); 47 | } 48 | } -------------------------------------------------------------------------------- /firefox/scripts/trending-btn.js: -------------------------------------------------------------------------------- 1 | var finished = false; 2 | var urlVar = "placeholder"; 3 | if (finished != true) { 4 | if (document.querySelector("html[trending-btn='true']") != null) { 5 | var YVData = document.querySelector("#bt-trending-button").data; 6 | document.querySelector("#bt-trending-button-2").data = YVData; 7 | finished == true; 8 | } 9 | } --------------------------------------------------------------------------------