FOSS/remove-youtube-suggestions
1
0
Fork 0
mirror of https://github.com/lawrencehook/remove-youtube-suggestions.git synced 2026-07-25 06:54:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode. Fix width issue. Change 'off' cue. Center player when 'entire' sidebar is removed

Browse Source
This commit is contained in:
Lawrence Hook
2022-02-18 22:11:41 -05:00
parent 5b680667ab
commit 03d430b1b0
6 changed files with 56 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.css
+6
View File
@@ -13,6 +13,7 @@ html[global_enable="true"][remove_shorts_link="true"] ytd-mini-guide-entry-rende
html[global_enable="true"][remove_explore_link="true"] a[href="/feed/explore"],
/* More Removal Options */
html[global_enable="true"][remove_entire_sidebar="true"] #secondary,
html[global_enable="true"][remove_infinite_scroll="true"] ytd-rich-grid-renderer > #contents > ytd-continuation-item-renderer,
html[global_enable="true"][remove_all_but_one="true"] ytd-rich-grid-renderer > #contents > ytd-rich-grid-row:nth-child(n+2),
html[global_enable="true"][remove_all_but_one="true"] ytd-rich-grid-renderer > #contents > ytd-continuation-item-renderer,
@@ -37,3 +38,8 @@ html[global_enable="true"][foo=bar]
html[global_enable="true"][remove_logo_link="true"] #logo[href="/"] {
pointer-events: none;
}
/* Center contents when the sidebar is entirely hidden */
html[global_enable="true"][remove_entire_sidebar="true"] ytd-watch-flexy[flexy]:not([fullscreen]):not([theater]) {
--ytd-watch-flexy-max-player-width: calc(var(--ytd-watch-flexy-chat-max-height)*var(--ytd-watch-flexy-width-ratio)/var(--ytd-watch-flexy-height-ratio)) !important
}
src/css/options.css
+32 -65
View File
@@ -1,35 +1,22 @@
/* Global enable/disable buttons */
html[global_enable="false"] input.global_enable.enabled,
html[global_enable="true"] input.global_enable.disabled,
html[foo=bar]
{
display: none !important;
background-color: gray;
}
/* Visual cues when the extension is enabled vs. disabled */
#header-toggle-circle { transition: cx 0.1s }
#header-toggle-circle {
-webkit-transition: cx 0.1s;
-moz-transition: cx 0.1s;
-o-transition: cx 0.1s;
transition: cx 0.1s;
}
html[global_enable="true"] #header-toggle-circle { cx: 11px }
html[global_enable="true"] #header-toggle-outer-path { fill: green }
#primary_options { transition: background-color 0.2s }
#primary_options * { transition: color 0.2s }
html[global_enable="false"] #primary_options { background-color: gray }
html[global_enable="false"] #primary_options * { pointer-events: none }
html[global_enable="false"] #primary_options * { color: white }
html[global_enable="false"] #primary_options { visibility: hidden; }
/* Dark mode styling */
html[dark_mode='true'] #header-light { display: none }
html[dark_mode='false'] #header-dark { display: none }
html[dark_mode='true'] { background-color: #393939 }
html[dark_mode='true'] * { color: #B9B9B9 }
html[dark_mode='true'] body { background-color: #393939 }
html[dark_mode='true'] body * { color: #B9B9B9 }
html[dark_mode='true'] .footer-path { fill: #B9B9B9 }
/* Dark mode styling -- on/off visual cues */
html[dark_mode='true'][global_enable="false"] #primary_options { background-color: #1d1d1d }
html[dark_mode='true'][global_enable="false"] #primary_options * { color: #B9B9B9 }
/* Begin Main styling */
html, body { height: 100% }
@@ -38,8 +25,8 @@ a {
}
body {
min-width: 300px;
max-width: 800px;
min-width: 349px;
max-width: 350px;
height: fit-content;
max-height: 600px;
@@ -60,7 +47,6 @@ body, body * {
/* Begin header */
#header {
overflow: auto;
/*height: 25px;*/
}
#header-contents {
position: relative;
@@ -86,24 +72,30 @@ body, body * {
margin-left: 30px;
font-size: 14px;
}
/*#dark_mode_container {*/
/*height: 100%;*/
/*}*/
/*#dark_mode_container svg {*/
/*position: absolute;*/
/*left: calc(100% - 60px);*/
/*height: 95%;*/
#header svg {
height: 95%;
}
#dark_mode {
position: absolute;
left: calc(100% - 75px);
height: 100%;
width: 30px;
/* center vertically */
/*top: 50%;*/
/*-ms-transform: translateY(-50%);*/
/*transform: translateY(-50%);*/
/*}*/
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#header-light, #header-dark {
cursor: pointer;
}
#header-toggle {
cursor: pointer;
position: absolute;
left: calc(100% - 30px);
left: calc(100% - 45px);
height: 95%;
/* center vertically */
@@ -117,6 +109,9 @@ body, body * {
min-height: 300px;
max-height: 500px;
overflow: scroll;
-webkit-transition: box-shadow 0.1s;
-moz-transition: box-shadow 0.1s;
-o-transition: box-shadow 0.1s;
transition: box-shadow 0.1s;
padding: 2px;
}
@@ -161,42 +156,14 @@ body, body * {
#footer {
position: relative;
text-align: center;
height: 20px;
margin-top: 4px;
border: 1px groove gray;
display: flex;
}
#footer a {
position: relative;
}
#footer svg {
height: 95%;
cursor: pointer;
}
svg > rect {
width: 100%;
height: 100%;
opacity: 0
}
#info_button {
grid-column: 1 / 2;
grid-row: 1;
}
#bug_button {
grid-column: 2 / 3;
grid-row: 1;
}
#reload_button {
grid-column: 3 / 4;
grid-row: 1;
}
src/js/content-script.js
+2
View File
@@ -6,6 +6,7 @@ if (typeof browser === 'undefined') {
// Some global constants.
const HTML = document.documentElement;
const SETTINGS_LIST = {
"dark_mode": { defaultValue: false, eventType: 'click' },
"global_enable": { defaultValue: true, eventType: 'click' },
"remove_homepage": { defaultValue: true, eventType: 'change' },
"remove_sidebar": { defaultValue: true, eventType: 'change' },
@@ -18,6 +19,7 @@ const SETTINGS_LIST = {
"remove_shorts_link": { defaultValue: false, eventType: 'change' },
"remove_explore_link": { defaultValue: false, eventType: 'change' },
"remove_extra_results": { defaultValue: false, eventType: 'change' },
"remove_entire_sidebar": { defaultValue: false, eventType: 'change' },
"remove_info_cards": { defaultValue: false, eventType: 'change' },
"remove_play_next_button": { defaultValue: false, eventType: 'change' },
"remove_comments": { defaultValue: false, eventType: 'change' },
src/js/options.js
+2 -1
View File
@@ -6,7 +6,7 @@ if (typeof browser === 'undefined') {
// Some global constants.
const HTML = document.documentElement;
const SETTINGS_LIST = {
// "dark_mode": { defaultValue: true, eventType: 'click' },
"dark_mode": { defaultValue: false, eventType: 'click' },
"global_enable": { defaultValue: true, eventType: 'click' },
"remove_homepage": { defaultValue: true, eventType: 'click' },
"remove_sidebar": { defaultValue: true, eventType: 'click' },
@@ -19,6 +19,7 @@ const SETTINGS_LIST = {
"remove_all_but_one": { defaultValue: false, eventType: 'click' },
"remove_shorts": { defaultValue: false, eventType: 'click' },
"remove_extra_results": { defaultValue: false, eventType: 'click' },
"remove_entire_sidebar": { defaultValue: false, eventType: 'click' },
"remove_info_cards": { defaultValue: false, eventType: 'click' },
"remove_play_next_button": { defaultValue: false, eventType: 'click' },
"remove_comments": { defaultValue: false, eventType: 'click' },
src/manifest.json
+1 -1
View File
@@ -3,7 +3,7 @@
"description": "Stop the YouTube rabbit hole. Customize YouTube's user interface to be less engaging.",
"homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions",
"manifest_version": 2,
"version": "4.2.4",
"version": "4.2.5",
"icons": {
"16": "images/16.png",
src/options.html
+13 -7
View File
@@ -16,9 +16,9 @@
<div id='header-text'>Remove Youtube Suggestions</div>
<!-- <div id='dark_mode'>
<a id='header-light' title='Dark Mode'>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<div id='dark_mode'>
<a title='Dark Mode'>
<svg id='header-light' class='dark_mode' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle fill="#464646" cx="12" cy="12" r="5"/>
<path fill="#464646" d="M21,13H20a1,1,0,0,1,0-2h1a1,1,0,0,1,0,2Z"/>
<path fill="#464646" d="M4,13H3a1,1,0,0,1,0-2H4a1,1,0,0,1,0,2Z"/>
@@ -30,12 +30,12 @@
<path fill="#464646" d="M18.36,19.36a1,1,0,0,1-.7-.29L17,18.36A1,1,0,0,1,18.36,17l.71.71a1,1,0,0,1,0,1.41A1,1,0,0,1,18.36,19.36Z"/>
</svg>
</a>
<a id='header-dark' title='Light Mode'>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="#464646" d="M20.21,15.32A8.56,8.56,0,1,1,11.29,3.5a.5.5,0,0,1,.51.28.49.49,0,0,1-.09.57A6.46,6.46,0,0,0,9.8,9a6.57,6.57,0,0,0,9.71,5.72.52.52,0,0,1,.58.07A.52.52,0,0,1,20.21,15.32Z"/>
<a title='Light Mode'>
<svg id='header-dark' class='dark_mode' viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="#f9f871" d="M20.21,15.32A8.56,8.56,0,1,1,11.29,3.5a.5.5,0,0,1,.51.28.49.49,0,0,1-.09.57A6.46,6.46,0,0,0,9.8,9a6.57,6.57,0,0,0,9.71,5.72.52.52,0,0,1,.58.07A.52.52,0,0,1,20.21,15.32Z"/>
</svg>
</a>
</div> -->
</div>
<a title='On/Off'>
<svg id="header-toggle" class='global_enable header-toggle' viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
@@ -129,6 +129,12 @@
<label for="remove_extra_results">Extra search results <a class='minor_text'>for you, also watched, etc.</a></label>
</div>
<div>
<input type="checkbox" id="remove_entire_sidebar" class="remove_entire_sidebar"
value="remove_entire_sidebar" checked />
<label for="remove_entire_sidebar">Entire Sidebar <a class='minor_text'>centers the video player</a></label>
</div>
<div>
<input type="checkbox" id="remove_info_cards" class="remove_info_cards"
value="remove_info_cards" unchecked />