Raw Source Toggle Dropdown

• Minified Source

bu3r / h5lobby skillwheel theme

// ==UserScript==
// @name         h5lobby skillwheel theme
// @namespace    https://h5lobby.ru/
// @version      0.5
// @license      MIT
// @description  Перекрашивает колесо умений лобби плюс возможности кастомизации
// @match        https://h5lobby.ru/skillwheel/
// @require      https://www.cssscript.com/demo/mobile-friendly-color-picker-jscolor/jscolor.js
// @grant        none
// ==/UserScript==

// ==OpenUserJS==
// @author       bu3r
// ==/OpenUserJS==

const elementCSS = document.createElement("style");
const Head = document.getElementsByTagName("head");
	Head[0].appendChild(elementCSS);
const defaults = {
    color_head: "#aa8b30",
    color_back: "#796426",
    color_hover: "#ffb800",
    color_text_hover: "#000",
    color_menu_hover: "#534004",
    color_shadow: "#ffc1077a",
    color_skill_shadow: "#FF9800"
};

(function() {
    'use strict';
    let ops = defaults;
    let ls = localStorage.getItem("settings");
    if (ls) {
        ops = JSON.parse(ls) || defaults;
    }

    setCss(ops)
    showColor();

    jscolor.presets.default = {
        backgroundColor:'#333',
        alpha:1
    };

    jscolor.init();
    jscolor.trigger('input change');
})();

function showColor(){
    const Colorize = document.createElement("div");
    Colorize.classList.add("div-tooltip");
    Colorize.classList.add("theme");
    var colorWindow = `<div class="tooltip_name">Смена цветовой схемы</div>`;
    colorWindow += `<div><button data-jscolor="{valueElement:'#color_head', format:'rgba'}">Цвет шапки</button><input id="color_head" value="aa8b30" type="hidden" ></div>`;
    colorWindow += `<div><button data-jscolor="{valueElement:'#color_back', format:'rgba'}">Цвет кнопки</button><input id="color_back" value="796426" type="hidden"></div>`;
    colorWindow += `<div><button data-jscolor="{valueElement:'#color_hover', format:'rgba'}">Цвет подсветки кнопки</button><input id="color_hover" value="ffb800" type="hidden""></div>`;
    colorWindow += `<div><button data-jscolor="{valueElement:'#color_text_hover', format:'rgba'}">Цвет текста</button><input id="color_text_hover" value="000" type="hidden""></div>`;
    colorWindow += `<div><button data-jscolor="{valueElement:'#color_menu_hover', format:'rgba'}">Цвет подсветки меню</button><input id="color_menu_hover" value="534004" type="hidden""></div>`;
    colorWindow += `<div><button data-jscolor="{valueElement:'#color_shadow', format:'rgba'}">Цвет тени колеса</button><input id="color_shadow" value="ffc1077a" type="hidden""></div>`;
    colorWindow += `<div><button data-jscolor="{valueElement:'#color_skill_shadow', format:'rgba'}">Цвет тени навыка</button><input id="color_skill_shadow" value="FF9800" type="hidden""></div>`;
    colorWindow += `<div></br></div>`;
    colorWindow += `<div><button class="save_theme">Сохранить</button><button class="reset_theme">Сбросить</button></div>`;

    Colorize.innerHTML = colorWindow;

    const Body = document.getElementsByTagName("body");
    Body[0].appendChild(Colorize);

    const textCss=`.div-tooltip.theme {position: absolute;display: inline-block;width: 280px;height: -moz-fit-content;height: fit-content;border: 8px double #1A0D26;color: #ede7f6;text-align: center;border-radius: 15px;padding: 0 10px 10px;z-index: 100;top: 35%;}.theme .tooltip_name{margin: 10px;font-size: 20px;display: inline-block;}.div-tooltip.theme button{width:200px;color:#fff;background:#333};`;
    const colorizeCSS = document.createElement("style");
    colorizeCSS.type = "text/css";
    colorizeCSS.innerHTML = textCss;
    Head[0].appendChild(colorizeCSS);

    document.addEventListener('mouseup', function(event){
        const el_class=event.target?.offsetParent?.className || '';
        if (el_class=="jscolor-picker"){
            setTimeout(function(){
                setCss(getSettings());
            }, 150)
        }
    });

    document.addEventListener('click', function(event){
        const el_class=event.target?.className || '';
        if (el_class=="save_theme"){
            let ops = JSON.stringify(getSettings());
            localStorage.setItem("settings", ops);
        }
        if (el_class=="reset_theme"){
            setCss(defaults)
        }
    });
}

function getSettings(){
    const ops = {};
    for (const key in defaults) {
        const col = document.getElementById(key).value || defaults[key];
        ops[key] = col;
    }
    return ops;
}

function setCss(settings){
    const textCss = `.central-c{z-index:5!important}.dropdown,.dropbtn,.dropdown-button,.dropdown-button .tooltiptext,.tooltip .tooltiptext,.div-tooltip,.info-div-tooltip,.share-button, .dropbtn{	background-color:${settings.color_back}!important;}.header_container, .information-block, .info-div-tooltip,.header_spell{    background-color: ${settings.color_head}!important;}div .header_spell:hover,.dropdown:hover .dropbtn,.share-button:hover {   background: ${settings.color_hover}!important;color: ${settings.color_text_hover};font-weight: 700;}.dropdown-button:hover {    background-color: ${settings.color_menu_hover}!important;}.dropdown-content{	box-shadow: 0 8px 16px ${settings.color_shadow}!important;}.color-c{box-shadow: 0 0 90px ${settings.color_shadow}!important;}.spell[style$="scale(1.1);"]{background: none!important; box-shadow: 0 0 20px ${settings.color_skill_shadow}, 0 0 40px ${settings.color_skill_shadow}, inset 0 0 40px ${settings.color_skill_shadow};}`;
	    elementCSS.type = "text/css";
        elementCSS.innerHTML = textCss;
}