Youtube++

Very small CSS tweaks to youtube

2017-09-21 या दिनांकाला. सर्वात नवीन आवृत्ती पाहा.

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey, Greasemonkey किंवा Violentmonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

You will need to install an extension such as Tampermonkey to install this script.

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey किंवा Violentmonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल..

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला Tampermonkey यासारखे एक्स्टेंशन इंस्टॉल करावे लागेल..

ही स्क्रिप्ट इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्क्रिप्ट व्यवस्थापक एक्स्टेंशन इंस्टॉल करावे लागेल.

(माझ्याकडे आधीच युझर स्क्रिप्ट व्यवस्थापक आहे, मला इंस्टॉल करू द्या!)

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला Stylus सारखे एक्स्टेंशन इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

ही स्टाईल इंस्टॉल करण्यासाठी तुम्हाला एक युझर स्टाईल व्यवस्थापक इंस्टॉल करावे लागेल.

(माझ्याकडे आधीच युझर स्टाईल व्यवस्थापक आहे, मला इंस्टॉल करू द्या!)

// ==UserScript==
// @name         Youtube++
// @description  Very small CSS tweaks to youtube
// @include 	 *://*.youtube.com*
// @grant        GM_addStyle
// @grant       GM_getValue
// @grant       GM_setValue
// @run-at document-load
// @version 1.1
// @namespace https://greasyfork.org/users/3167
// ==/UserScript==

var defaultcolor = "hsla(3, 60%, 47%, 1)";

var customcolor = GM_getValue("yt-custom-color", defaultcolor);
GM_setValue('yt-custom-color', customcolor);

GM_addStyle ( "body {\
    /* --yt-custom-color: " + customcolor + "; */\
}");

GM_addStyle ( "#player-ads { display: none; }\
body, ytd-app {\
    --yt-brand-paper-button-color: var(--yt-custom-color) !important;\
    --yt-brand-color: var(--yt-custom-color) !important;\
}\
paper-button.ytd-subscribe-button-renderer {\
    background: var(--yt-custom-color);\
}\
a.yt-simple-endpoint.yt-formatted-string {\
    color: var(--yt-custom-color);\
}\
#progress.ytd-thumbnail-overlay-resume-playback-renderer, .ytp-red2 .ytp-swatch-background-color, .ytp-red2 .ytp-swatch-background-color-secondary, .ytp-play-progress.ytp-swatch-background-color, .ytp-swatch-background-color-secondary {\
    background-color: var(--yt-custom-color);\
}\
path#lozenge-path, #logo path.style-scope.yt-icon {\
    fill: var(--yt-custom-color);\
}\
div#top div#player {\
    max-height: calc(100vh - var(--ytd-masthead-height, 56px));\
}");


unsafeWindow.setcustomcolor = function (colorinput) {
  customcolor = colorinput;
  document.body.style = "--yt-custom-color: " + customcolor + ";";
  GM_setValue('yt-custom-color', customcolor);

  console.log("Changed color theme to : " + customcolor);
}

var customcolorpicker = document.createElement('input');
customcolorpicker.type = "color";
customcolorpicker.onchange = "setcustomcolor(this.value);";
customcolorpicker.style = "display: none;";
customcolorpicker.addEventListener("change", function() {
    unsafeWindow.setcustomcolor(this.value);
});

unsafeWindow.pickcustomcolor = function () {
    customcolorpicker.click();
}

unsafeWindow.resetcustomcolor = function () {
    unsafeWindow.setcustomcolor(defaultcolor);
}

unsafeWindow.setcustomcolor(customcolor);

console.log("Youtube++ loaded!");