diff --git a/src/css/main.css b/src/css/main.css
index 807d668..5e56771 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -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
+}
diff --git a/src/css/options.css b/src/css/options.css
index 34cb0c9..83c7560 100644
--- a/src/css/options.css
+++ b/src/css/options.css
@@ -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;
-}
diff --git a/src/js/content-script.js b/src/js/content-script.js
index cd3cd40..c0836c4 100644
--- a/src/js/content-script.js
+++ b/src/js/content-script.js
@@ -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' },
diff --git a/src/js/options.js b/src/js/options.js
index f5fc361..6b3cf3e 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -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' },
diff --git a/src/manifest.json b/src/manifest.json
index 9cf8ab1..d106118 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -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",
diff --git a/src/options.html b/src/options.html
index 51b8dfc..65c5367 100644
--- a/src/options.html
+++ b/src/options.html
@@ -16,9 +16,9 @@
-
+