details : buttons #1597 #1411

code-charity · Apr 4, 2023 · 1da31a7 · 1da31a7
1 parent f9bf0a5
commit 1da31a7
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 75 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -822,7 +822,7 @@
         "message": "Red"
     },
     "redDislikeButton": {
-        "message": "Red DisLiked-button"
+        "message": "Red when disliked"
     },
     "relatedVideos": {
         "message": "Related videos"

diff --git a/background.js b/background.js
@@ -21,7 +21,7 @@ chrome.runtime.onInstalled.addListener(function (installed){
     if(installed.reason == 'update'){
 //	    var thisVersion = chrome.runtime.getManifest().version;
 //		console.log("Updated from " + installed.previousVersion + " to " + thisVersion + "!");
-
+        chrome.storage.local.get('hideSubscribe', function (result) {if (result.hideSubscribe === true){ chrome.storage.local.set({subscribe: 'hidden'});
 		chrome.storage.local.get('limit_page_width', function (result) {
                             if (result.limit_page_width === false){
 								chrome.storage.local.set({no_page_margin: true});
@@ -32,10 +32,10 @@ chrome.runtime.onInstalled.addListener(function (installed){
 								}});
 								}											
                             });	
-	 //if(navigator.userAgent.indexOf("Firefox") != -1){chrome.storage.local.set({below_player_pip: false})};						
+	  if(navigator.userAgent.indexOf("Firefox") != -1){chrome.storage.local.set({below_player_pip: false})};						
 	}
 else if(installed.reason == 'install'){if(navigator.userAgent.indexOf("Firefox") != -1){chrome.storage.local.set({below_player_pip: false})};};
-// else if(installed.reason == 'install'){ console.log('Thanks for installing!');
+// console.log('Thanks for installing!');
 }
 
 

diff --git a/js&css/extension/www.youtube.com/appearance/details/details.css b/js&css/extension/www.youtube.com/appearance/details/details.css
@@ -54,17 +54,25 @@ YouTube's detail buttons
 
 html[it-youtubeDetailButtons='remove_labels'] #menu ytd-button-renderer div:nth-child(2), 
 html[it-youtubeDetailButtons='remove_labels'] #menu ytd-button-renderer .cbox, 
+html[it-youtubeDetailButtons='remove_labels'] #subscribe-button .cbox,
 html[it-youtubeDetailButtons='remove'] #menu button,
+html[it-youtubeDetailButtons='remove'] #subscribe-button button,
 html[it-youtubeDetailButtons='remove_icons']  #menu button div:first-child {display:none;}
+html[it-youtubeDetailButtons='hide_labels'] #subscribe-button .cbox,
 html[it-youtubeDetailButtons='hide_labels']  #menu ytd-button-renderer div:nth-child(2) {visibility:hidden}
+html[it-youtubeDetailButtons='half_transparent'] #subscribe-button button,
 html[it-youtubeDetailButtons='half_transparent'] #menu button {opacity:0.5;}
-html[it-youtubeDetailButtons='transparent_background'] #menu button {background-color:rgba(0, 0, 0, 0) !important;}  
-
-
+html[it-youtubeDetailButtons='transparent_background'] #subscribe-button button,
+html[it-youtubeDetailButtons='transparent_background'] #menu button {background-color:rgba(0, 0, 0, 0.01) !important;}  
+html[it-youtubeDetailButtons='transparent_background'] #subscribe-button button {color:#111 !important;}
+
   /*--------------------------------------------------------------
 HIDE SUBSCRIBE
 --------------------------------------------------------------*/
-html[it-hideSubscribe='true'] #subscribe-button {display: none !important;}
+html[it-subscribe='hidden'] #subscribe-button {display: none !important;}
+html[it-subscribe='grey'] #subscribe-button button { background-color: #DDD !important; color:#111 !important; }
+html[it-subscribe='transparent'] #subscribe-button button {background-color:rgba(0, 0, 0, 0) !important; color:#111 !important; }
+
 
  /*--------------------------------------------------------------
 HIDE LIKE BUTTON
@@ -102,87 +110,81 @@ html[it-hide-dislike-button='icons_only'] #top-level-buttons-computed #segmented
 # HIDE SHARE BUTTON
 --------------------------------------------------------------*/
 
-html[it-hide-share-button='hidden'] #top-level-buttons-computed ytd-button-renderer,
-html[it-hide-share-button='icons_only'] #top-level-buttons-computed ytd-button-renderer div.cbox {
+html[it-hide-share-button='hidden'] #menu button:has(svg path[d^="M15,5.63L20.66,12L15,18.37V15v"]),
+html[it-hide-share-button='hidden'] #flexible-item-buttons button:has(svg path[d^="M15,5.63L20.66,12L15,18.37V15v"]) {
 	display: none;
 }
 
-html[it-hide-share-button='icons_only'] #top-level-buttons-computed ytd-button-renderer .yt-spec-button-shape-next__icon,
-html[it-hide-share-button='icons_only'] #top-level-buttons-computed ytd-button-renderer button{
-	margin: 0;
-	padding: 0 5px;
+html[it-hide-share-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M15,5.63L20.66,12L15,18.37V15v"]) div:nth-child(2),
+html[it-hide-share-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M15,5.63L20.66,12L15,18.37V15v"]) .cbox{ 
+	display: none;
 }
 
 
 /*--------------------------------------------------------------
 # HIDE DOWNLOAD BUTTON
 --------------------------------------------------------------*/
 
-html[it-hide-download-button='hidden'] #flexible-item-buttons ytd-download-button-renderer,
-html[it-hide-download-button='icons_only'] #flexible-item-buttons ytd-download-button-renderer div.cbox {
+html[it-hide-download-button='hidden'] #menu button:has(svg path[d^="M17 18V19H6V18H17ZM16.5 11.4"]),
+html[it-hide-download-button='hidden'] #flexible-item-buttons button:has(svg path[d^="M17 18V19H6V18H17ZM16.5 11.4"]) {
 	display: none;
 }
 
-html[it-hide-download-button='icons_only'] #flexible-item-buttons ytd-download-button-renderer .yt-spec-button-shape-next__icon,
-html[it-hide-download-button='icons_only'] #flexible-item-buttons ytd-download-button-renderer button{
-	margin: 0;
-	padding: 0 5px;
+html[it-hide-download-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M17 18V19H6V18H17ZM16.5 11.4"]) div:nth-child(2),
+html[it-hide-download-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M17 18V19H6V18H17ZM16.5 11.4"]) .cbox{
+	display: none;
 }
 
-
 /*--------------------------------------------------------------
 # HIDE THANKS BUTTON
 --------------------------------------------------------------*/
 
-html[it-hide-thanks-button='hidden'] #flexible-item-buttons ytd-button-renderer#Thanks-button,
-html[it-hide-thanks-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Thanks-button div.cbox {
+html[it-hide-thanks-button='hidden'] #menu button:has(svg path[d^="M16.5,3C19.02,3,21,5.19,21,7.99c"]),
+html[it-hide-thanks-button='hidden'] #flexible-item-buttons button:has(svg path[d^="M16.5,3C19.02,3,21,5.19,21,7.99c"]) {
 	display: none;
 }
 
-html[it-hide-thanks-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Thanks-button .yt-spec-button-shape-next__icon,
-html[it-hide-thanks-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Thanks-button button{
-	margin: 0;
-	padding: 0 5px;
+html[it-hide-thanks-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M16.5,3C19.02,3,21,5.19,21,7.99c"]) div:nth-child(2),
+html[it-hide-thanks-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M16.5,3C19.02,3,21,5.19,21,7.99c"]) .cbox{
+	display: none;
 }
 
-
 /*--------------------------------------------------------------
 # HIDE CLIP BUTTON
 --------------------------------------------------------------*/
 
-html[it-hide-clip-button='hidden'] #flexible-item-buttons ytd-button-renderer#Clip-button,
-html[it-hide-clip-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Clip-button div.cbox {
+html[it-hide-clip-button='hidden'] #menu button:has(svg path[d^="M8,7c0,0.55-0.45,1-1,1S6,7."]),
+html[it-hide-clip-button='hidden'] #flexible-item-buttons button:has(svg path[d^="M8,7c0,0.55-0.45,1-1,1S6,7."]) {
 	display: none;
 }
 
-html[it-hide-clip-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Clip-button .yt-spec-button-shape-next__icon,
-html[it-hide-clip-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Clip-button button{
-	margin: 0;
-	padding: 0 5px;
+html[it-hide-clip-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M8,7c0,0.55-0.45,1-1,1S6,7."]) div:nth-child(2),
+html[it-hide-clip-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M8,7c0,0.55-0.45,1-1,1S6,7."]) .cbox{
+	display: none;
 }
 
 
 /*--------------------------------------------------------------
 # HIDE SAVE BUTTON
 --------------------------------------------------------------*/
 
-html[it-hide-save-button='hidden'] #flexible-item-buttons ytd-button-renderer#Save-button,
-html[it-hide-save-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Save-button div.cbox {
+html[it-hide-save-button='hidden'] #menu button:has(svg path[d^="M22,13h-4v4h-2v-4h-4v-2h4V7h2v4h4V13z"]),
+html[it-hide-save-button='hidden'] #flexible-item-buttons button:has(svg path[d^="M22,13h-4v4h-2v-4h-4v-2h4V7h2v4h4V13z"]) {
 	display: none;
 }
 
-html[it-hide-save-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Save-button .yt-spec-button-shape-next__icon,
-html[it-hide-save-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Save-button button{
-	margin: 0;
-	padding: 0 5px;
+html[it-hide-save-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M22,13h-4v4h-2v-4h-4v-2h4V7h2v4h4V13z"]) div:nth-child(2),
+html[it-hide-save-button='icons_only'] #menu ytd-button-renderer:has(svg path[d^="M22,13h-4v4h-2v-4h-4v-2h4V7h2v4h4V13z"]) .cbox{
+	display: none;
 }
 
 
 /*--------------------------------------------------------------
 # HIDE REPORT BUTTON
 --------------------------------------------------------------*/
 
-html[it-hide-report-button='true'] #top-level-buttons-computed ytd-button-renderer#Report-button {
+html[it-hide-report-button='true'] #menu button:has(svg path[d^="M7.5,12c0,0.83-0.67,1.5-1.5"]),
+html[it-hide-report-button='true'] #flexible-item-buttons button:has(svg path[d^="M7.5,12c0,0.83-0.67,1.5-1.5"]) {
 	display: none;
 }
 
@@ -191,7 +193,35 @@ html[it-hide-report-button='true'] #top-level-buttons-computed ytd-button-render
 # HIDE MORE BUTTON
 --------------------------------------------------------------*/
 
-html[it-hide-more-button='true'] #menu yt-button-shape#button-shape {
+html[it-hide-more-button='true'] #menu button:has(svg path[d^="M22,13h-4v4h-2v-4h-4v-2h4V7h2v4h4V13z"]),
+html[it-hide-more-button='true'] #flexible-item-buttons button:has(svg path[d^="M22,13h-4v4h-2v-4h-4v-2h4V7h2v4h4V13z"]) {
+	display: none;
+}
+
+/*--------------------------------------------------------------
+# HIDE THANKS BUTTON
+--------------------------------------------------------------*/
+
+html[it-hide-thanks-button='hidden'] #flexible-item-buttons ytd-button-renderer#Thanks-button,
+html[it-hide-thanks-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Thanks-button div.cbox {
+	display: none;
+}
+
+/*--------------------------------------------------------------
+# HIDE CLIP BUTTON
+--------------------------------------------------------------*/
+
+html[it-hide-clip-button='hidden'] #flexible-item-buttons ytd-button-renderer#Clip-button,
+html[it-hide-clip-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Clip-button div.cbox {
+	display: none;
+}
+
+/*--------------------------------------------------------------
+# HIDE SAVE BUTTON
+--------------------------------------------------------------*/
+
+html[it-hide-save-button='hidden'] #flexible-item-buttons ytd-button-renderer#Save-button,
+html[it-hide-save-button='icons_only'] #flexible-item-buttons ytd-button-renderer#Save-button div.cbox {
 	display: none;
 }
 

diff --git a/menu/skeleton-parts/appearance.js b/menu/skeleton-parts/appearance.js
@@ -482,21 +482,37 @@ extension.skeleton.main.layers.section.appearance.on.click.details = {
                 ],
                 tags: "hide,remove",
             },
-			hideSubscribe: {
-                component: "switch",
-                text: "Hide Subscribe",
-                tags: "hide,remove,subscribe-button",
-            },
-			hide_details_button: {
-                component: "button",
+			hide_detail_button: {
+                component: "Buttons",
                 text: "hideDetailButton",
                 on: {
                     click: {
-                        component: "section",
-                        variant: "card",
+							extraButtons: {
+							component: 'section',
+							variant: 'card',
+							title: 'Extra buttons',
+
+								below_player_screenshot: {
+								component: 'switch',
+								text: 'screenshot',
+								value: true
+								},
+								below_player_pip: {
+								component: 'switch',
+								text: 'pictureInPicture',
+								value: true
+								},
+								below_player_loop: {
+								component: 'switch',
+								text: 'loop',
+								value: true
+								}
+							},
+						component: 'section',
+						variant: 'card',
 						youtubeDetailButtons: {
                             component: "select",
-                            text: "YouTube's detail buttons",
+                            text: "YouTube's buttons",
                             options: [
                                 {
                                     text: "normal",
@@ -528,7 +544,33 @@ extension.skeleton.main.layers.section.appearance.on.click.details = {
 								 },
                             ],
                             tags: "hide,remove",
-                        },    			
+                        },   
+						detailButtons: {
+						component: 'section',
+						variant: 'card',
+						subscribe: {
+							component: "select",
+							text: "'Subscribe'",
+							options: [
+                                {
+                                    text: "normal",
+                                    value: "normal",
+                                },
+                                {
+                                    text: "grey",
+                                    value: "grey",
+                                },
+							    {
+                                    text: "transparent",
+                                    value: "transparent",
+                                },
+                                {
+                                    text: "hidden",
+                                    value: "hidden",
+                                },
+                            ],
+							tags: "hide,remove,subscribe-button",
+						},						
 		                 likes: {
                             component: "select",
                             text: "'like'",
@@ -676,7 +718,8 @@ extension.skeleton.main.layers.section.appearance.on.click.details = {
                             text: "hide 'more'",
                             tags: "hide,remove",
                         },
-                    },
+					  },
+					},
                 },
             },  
 			hide_views_count: {

diff --git a/menu/skeleton-parts/player.js b/menu/skeleton-parts/player.js
@@ -1030,25 +1030,4 @@ extension.skeleton.main.layers.section.player.on.click = {
 			text: 'popupPlayer'
 		}
 	},
-	section_3: {
-		component: 'section',
-		variant: 'card',
-		title: 'Buttons below the player',
-
-		below_player_screenshot: {
-			component: 'switch',
-			text: 'screenshot',
-			value: true
-		},
-		below_player_pip: {
-			component: 'switch',
-			text: 'pictureInPicture',
-			value: true
-		},
-		below_player_loop: {
-			component: 'switch',
-			text: 'loop',
-			value: true
-		}
-	}
 };