☰

MonkeyConfig Mod

Enhanced Configuration Dialog Builder with column layout , custom styling , and Additional input types

目前为 2025-03-19 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/528923/1556565/MonkeyConfig%20Mod.js 

  1. // ==UserScript==
  2. // @name            MonkeyConfig Mod
  3. // @noframes
  4. // @version         2.0
  5. // @namespace       http://odyniec.net/
  6. // @contributionURL https://saweria.co/Bloggerpemula
  7. // @description     Enhanced Configuration Dialog Builder with column layout , custom styling , and Additional input types
  8. // ==/UserScript==
  9. /*
  10.  * MonkeyConfig Modern Reloaded Enhanced
  11.  * Based on version 0.1.4 by Michal Wojciechowski (odyniec.net)
  12.  * v0.1.4 - January 2020 - David Hosier (https://github.com/david-hosier/MonkeyConfig)
  13.  * Enhanced by Bloggerpemula - March 2025
  14.  * Additions: Column layout, font size/color customization, new input types (textarea, range, radio, file, button, group)
  15.  * Modified: Checkbox, number, and text inputs aligned inline with labels - March 2025
  16.  * Modified: Added text-align option for labels, reduced width of number and text fields - March 2025
  17.  * Modified: Added per-parameter font-size and font-color customization - March 2025
  18.  * Fixed: Ensured per-parameter font-size and font-color apply correctly - March 2025
  19.  * Fixed: Improved Shadow DOM isolation for consistent styling across sites - March 2025
  20.  * Fixed: Overlay z-index to ensure dialog is clickable - March 2025
  21.  * Fixed: Adjusted overlay size to fit dialog content - March 2025
  22.  * Added: Optional adjustOverlaySize parameter for custom overlay margin - March 2025
  23.  */
  24. function MonkeyConfig(data) {
  25.     var cfg = this,
  26.         params,
  27.         values = {},
  28.         storageKey,
  29.         displayed,
  30.         openLayer,
  31.         shadowRoot,
  32.         container;
  33.     function init() {
  34.         params = data.parameters || data.params;
  35.         data.buttons = data.buttons === undefined ? ['save', 'defaults', 'cancel'] : data.buttons;
  36.         data.fontSize = data.fontSize || '11pt';
  37.         data.fontColor = data.fontColor || '#000000';
  38.         data.width = data.width || '600px';  // Default width
  39.         data.height = data.height || 'auto'; // Default height
  40.         data.adjustOverlaySize = data.adjustOverlaySize || null; // Parameter baru, null jika tidak ditentukan
  41.         if (!data.title) {
  42.             data.title = typeof GM_getMetadata === 'function' ? GM_getMetadata('name') + ' Configuration' : 'Configuration';}
  43.         var safeTitle = data.title.replace(/[^a-zA-Z0-9]/g, '_');
  44.         storageKey = '_MonkeyConfig_' + safeTitle + '_cfg';
  45.         var storedValues = GM_getValue(storageKey) ? JSON.parse(GM_getValue(storageKey)) : {};
  46.         for (var paramName in params) {
  47.             var param = params[paramName];
  48.             if (param.value !== undefined) {
  49.                 set(paramName, param.value);
  50.             } else if (storedValues[paramName] !== undefined) {
  51.                 set(paramName, storedValues[paramName]);
  52.             } else if (param.default !== undefined) {
  53.                 set(paramName, param.default);
  54.             } else {
  55.                 set(paramName, '');}}
  56.         if (data.menuCommand) {
  57.             var caption = data.menuCommand !== true ? data.menuCommand : data.title;
  58.             GM_registerMenuCommand(caption, function () { cfg.open(); });}
  59.         cfg.open = open;
  60.         cfg.close = close;
  61.         cfg.get = get;
  62.         cfg.set = function (name, value) { set(name, value); update(); };}
  63.     function get(name) { return values[name]; }
  64.     function set(name, value) { values[name] = value; }
  65.     function setDefaults() {
  66.         for (var paramName in params) {
  67.             if (params[paramName].default !== undefined) {
  68.                 set(paramName, params[paramName].default);}}
  69.         update();}
  70.     function render() {
  71.         var html = '<div class="__MonkeyConfig_container">' +
  72.             '<h1>' + data.title + '</h1>' +
  73.             '<div class="__MonkeyConfig_content">' +
  74.             '<div class="__MonkeyConfig_top">';
  75.         for (var paramName in params) {
  76.             if (params[paramName].column === 'top') {
  77.                 html += MonkeyConfig.formatters.tr(paramName, params[paramName]);}}
  78.         html += '</div>' +
  79.             '<div class="__MonkeyConfig_columns">' +
  80.             '<div class="__MonkeyConfig_left_column">';
  81.         for (var paramName in params) {
  82.             if (params[paramName].column === 'left') {
  83.                 html += MonkeyConfig.formatters.tr(paramName, params[paramName]);}}
  84.         html += '</div><div class="__MonkeyConfig_right_column">';
  85.         for (var paramName in params) {
  86.             if (params[paramName].column === 'right') {
  87.                 html += MonkeyConfig.formatters.tr(paramName, params[paramName]);}}
  88.         html += '</div></div>' +
  89.             '<table class="__MonkeyConfig_default">';
  90.         for (var paramName in params) {
  91.             if (!params[paramName].column) {
  92.                 html += MonkeyConfig.formatters.tr(paramName, params[paramName]);}}
  93.         html += '</table>' +
  94.             '<div class="__MonkeyConfig_bottom">';
  95.         for (var paramName in params) {
  96.             if (params[paramName].column === 'bottom') {
  97.                 html += MonkeyConfig.formatters.tr(paramName, params[paramName]);}}
  98.         html += '</div></div><div class="__MonkeyConfig_buttons_container"><table><tr>';
  99.         for (var i = 0; i < data.buttons.length; i++) {
  100.             html += '<td>';
  101.             switch (data.buttons[i]) {
  102.                 case 'cancel':
  103.                     html += '<button type="button" id="__MonkeyConfig_button_cancel"><img src="data:image/png;base64,' + MonkeyConfig.res.icons.cancel + '" alt="Cancel"/> Cancel</button>';
  104.                     break;
  105.                 case 'defaults':
  106.                     html += '<button type="button" id="__MonkeyConfig_button_defaults"><img src="data:image/png;base64,' + MonkeyConfig.res.icons.arrow_undo + '" alt="Defaults"/> Set Defaults</button>';
  107.                     break;
  108.                 case 'save':
  109.                     html += '<button type="button" id="__MonkeyConfig_button_save"><img src="data:image/png;base64,' + MonkeyConfig.res.icons.tick + '" alt="Save"/> Save</button>';
  110.                     break;}
  111.             html += '</td>';}
  112.         html += '</tr></table></div></div>';
  113.         return html;}
  114.     function update() {
  115.         if (!displayed) return;
  116.         for (var paramName in params) {
  117.             var value = values[paramName];
  118.             var elem = shadowRoot.querySelector('[name="' + paramName + '"]');
  119.             if (!elem) continue;
  120.             switch (params[paramName].type) {
  121.                 case 'checkbox':
  122.                     elem.checked = !!value;
  123.                     break;
  124.                 case 'custom':
  125.                     if (params[paramName].set) {
  126.                         params[paramName].set(value, shadowRoot.querySelector('#__MonkeyConfig_parent_' + paramName));}
  127.                     break;
  128.                 case 'number':
  129.                 case 'text':
  130.                 case 'color':
  131.                 case 'textarea':
  132.                 case 'range':
  133.                     elem.value = value;
  134.                     break;
  135.                 case 'radio':
  136.                     var radio = shadowRoot.querySelector('[name="' + paramName + '"][value="' + value + '"]');
  137.                     if (radio) radio.checked = true;
  138.                     break;
  139.                 case 'file':
  140.                     elem.value = '';
  141.                     break;
  142.                 case 'select':
  143.                     if (elem.tagName.toLowerCase() === 'input' && elem.type === 'checkbox') {
  144.                         var checkboxes = shadowRoot.querySelectorAll('input[name="' + paramName + '"]');
  145.                         for (var i = 0; i < checkboxes.length; i++) {
  146.                             checkboxes[i].checked = value.indexOf(checkboxes[i].value) > -1;}
  147.                     } else if (elem.multiple) {
  148.                         var options = shadowRoot.querySelectorAll('select[name="' + paramName + '"] option');
  149.                         for (var i = 0; i < options.length; i++) {
  150.                             options[i].selected = value.indexOf(options[i].value) > -1;}
  151.                     } else {
  152.                         elem.value = value;}
  153.                     break;}
  154.             elem.style.fontSize = params[paramName].fontSize || data.fontSize;
  155.             elem.style.color = params[paramName].fontColor || data.fontColor;
  156.             var label = shadowRoot.querySelector('label[for="__MonkeyConfig_field_' + paramName + '"]');
  157.             if (label) {
  158.                 label.style.fontSize = params[paramName].fontSize || data.fontSize;
  159.                 label.style.color = params[paramName].fontColor || data.fontColor;
  160.                 if (params[paramName].type === 'textarea') {
  161.                     label.style.textAlign = 'center';
  162.                     label.style.display = 'block';
  163.                     label.style.width = '100%';
  164.                 } else {
  165.                     label.style.textAlign = 'left';
  166.                     label.style.display = 'inline-block';
  167.                     label.style.width = 'auto';}}}}
  168.     function saveClick() {
  169.         for (var paramName in params) {
  170.             var elem = shadowRoot.querySelector('[name="' + paramName + '"]');
  171.             if (!elem) continue;
  172.             switch (params[paramName].type) {
  173.                 case 'checkbox':
  174.                     values[paramName] = elem.checked;
  175.                     break;
  176.                 case 'custom':
  177.                     if (params[paramName].get) {
  178.                         values[paramName] = params[paramName].get(shadowRoot.querySelector('#__MonkeyConfig_parent_' + paramName));}
  179.                     break;
  180.                 case 'number':
  181.                 case 'text':
  182.                 case 'color':
  183.                 case 'textarea':
  184.                 case 'range':
  185.                     values[paramName] = elem.value;
  186.                     break;
  187.                 case 'radio':
  188.                     var checkedRadio = shadowRoot.querySelector('[name="' + paramName + '"]:checked');
  189.                     values[paramName] = checkedRadio ? checkedRadio.value : '';
  190.                     break;
  191.                 case 'file':
  192.                     values[paramName] = elem.dataset.value || values[paramName];
  193.                     break;
  194.                 case 'select':
  195.                     if (elem.tagName.toLowerCase() === 'input' && elem.type === 'checkbox') {
  196.                         values[paramName] = [];
  197.                         var inputs = shadowRoot.querySelectorAll('input[name="' + paramName + '"]');
  198.                         for (var i = 0; i < inputs.length; i++) {
  199.                             if (inputs[i].checked) values[paramName].push(inputs[i].value);}
  200.                     } else if (elem.multiple) {
  201.                         values[paramName] = [];
  202.                         var options = shadowRoot.querySelectorAll('select[name="' + paramName + '"] option');
  203.                         for (var i = 0; i < options.length; i++) {
  204.                             if (options[i].selected) values[paramName].push(options[i].value);}
  205.                     } else {
  206.                         values[paramName] = elem.value;}
  207.                     break;}}
  208.         GM_setValue(storageKey, JSON.stringify(values));
  209.         close();
  210.         if (data.onSave) data.onSave(values);
  211.         location.reload();}
  212.     function cancelClick() { close(); }
  213.     function open() {
  214.         function openDone() {
  215.             if (window.self !== window.top) return;
  216.             var saveBtn = shadowRoot.querySelector('#__MonkeyConfig_button_save');
  217.             var defaultsBtn = shadowRoot.querySelector('#__MonkeyConfig_button_defaults');
  218.             var cancelBtn = shadowRoot.querySelector('#__MonkeyConfig_button_cancel');
  219.             if (saveBtn) saveBtn.addEventListener('click', saveClick, false);
  220.             if (defaultsBtn) defaultsBtn.addEventListener('click', function () { setDefaults(); }, false);
  221.             if (cancelBtn) cancelBtn.addEventListener('click', cancelClick, false);
  222.             displayed = true;
  223.             update();
  224.             if (data.adjustOverlaySize) {adjustOverlaySize();}}
  225.         function adjustOverlaySize() {
  226.             var overlay = shadowRoot.querySelector('.__MonkeyConfig_overlay');
  227.             var container = shadowRoot.querySelector('.__MonkeyConfig_container');
  228.             var containerRect = container.getBoundingClientRect();
  229.             var margin = parseInt(data.adjustOverlaySize, 10) || 40; // Gunakan nilai dari parameter atau default 40px
  230.             overlay.style.width = (containerRect.width + margin) + 'px';
  231.             overlay.style.height = (containerRect.height + margin) + 'px';
  232.             overlay.style.left = '50%';
  233.             overlay.style.top = '50%';
  234.             overlay.style.transform = 'translate(-50%, -50%)';}
  235.         var body = document.querySelector('body');
  236.         openLayer = document.createElement('div');
  237.         openLayer.className = '__MonkeyConfig_layer';
  238.         shadowRoot = openLayer.attachShadow({ mode: 'open' });
  239.         shadowRoot.innerHTML = `
  240.             <style>
  241.                 :host {
  242.                     all: initial; /* Reset semua properti CSS ke nilai awal */
  243.                     display: block;
  244.                     font-family: Arial, sans-serif; /* Tentukan font default */
  245.                 }
  246.                 ${MonkeyConfig.res.stylesheets.main.replace(/__FONT_SIZE__/g, data.fontSize).replace(/__FONT_COLOR__/g, data.fontColor)}
  247.                 .__MonkeyConfig_overlay {
  248.                     position: absolute; /* Posisi relatif terhadap openLayer */
  249.                     background-color: #000;
  250.                     opacity: 0.6;
  251.                     z-index: 1; /* Overlay di belakang container */
  252.                     border-radius: 0.5em; /* Sesuaikan dengan container */
  253.                 }
  254.                 .__MonkeyConfig_container {
  255.                     position: relative; /* Pastikan container di atas overlay */
  256.                     z-index: 2; /* Container di depan overlay */}
  257.             </style>
  258.             <div class="__MonkeyConfig_overlay"></div>
  259.             ${render()}
  260.         `;
  261.         container = shadowRoot.querySelector('.__MonkeyConfig_container');
  262.         openLayer.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-height:80vh;overflow-y:auto;z-index:10000;width:' + data.width + ';height:' + data.height + ';';
  263.         body.appendChild(openLayer);
  264.         openDone();
  265.  
  266.         // Tambahkan event listener resize hanya jika adjustOverlaySize ada
  267.         if (data.adjustOverlaySize) {
  268.             window.addEventListener('resize', adjustOverlaySize);}}
  269.     function close() {
  270.         if (openLayer) { openLayer.parentNode.removeChild(openLayer); openLayer = undefined; }
  271.         shadowRoot = undefined;
  272.         displayed = false;}
  273.     init();}
  274. MonkeyConfig.esc = function (string) { return string.replace(/"/g, '"'); };
  275. MonkeyConfig.HTML = {
  276.     '_field': function (name, options) {
  277.         return options.type && MonkeyConfig.HTML[options.type] ? options.html ? options.html.replace(/\[FIELD\]/, MonkeyConfig.HTML[options.type](name, options)) : MonkeyConfig.HTML[options.type](name, options) : '';
  278.     },
  279.     '_label': function (name, options) {
  280.         var label = options.label || name.substring(0, 1).toUpperCase() + name.substring(1).replace(/_/g, ' ');
  281.         var styles = [];
  282.         if (options.labelAlign) styles.push('text-align:' + options.labelAlign);
  283.         if (options.fontSize) styles.push('font-size:' + options.fontSize);
  284.         if (options.fontColor) styles.push('color:' + options.fontColor);
  285.         var styleAttr = styles.length > 0 ? ' style="' + styles.join(';') + ';"' : '';
  286.         return '<label for="__MonkeyConfig_field_' + name + '"' + styleAttr + '>' + label + '</label>';},
  287.     'checkbox': function (name) { return '<input id="__MonkeyConfig_field_' + name + '" type="checkbox" name="' + name + '" />'; },
  288.     'custom': function (name, options) { return options.html || ''; },
  289.     'number': function (name, options) { return '<input id="__MonkeyConfig_field_' + name + '" type="number" class="__MonkeyConfig_field_number" name="' + name + '" min="' + (options.min || '') + '" max="' + (options.max || '') + '" step="' + (options.step || '1') + '" />'; },
  290.     'text': function (name) { return '<input id="__MonkeyConfig_field_' + name + '" type="text" class="__MonkeyConfig_field_text" name="' + name + '" />'; },
  291.     'color': function (name) { return '<input id="__MonkeyConfig_field_' + name + '" type="color" class="__MonkeyConfig_field_text" name="' + name + '" />'; },
  292.     'textarea': function (name, options) { return '<textarea id="__MonkeyConfig_field_' + name + '" class="__MonkeyConfig_field_text" name="' + name + '" rows="' + (options.rows || 4) + '" cols="' + (options.cols || 20) + '"></textarea>'; },
  293.     'range': function (name, options) { return '<input id="__MonkeyConfig_field_' + name + '" type="range" name="' + name + '" min="' + (options.min || 0) + '" max="' + (options.max || 100) + '" step="' + (options.step || 1) + '" />'; },
  294.     'radio': function (name, options) {
  295.         var html = '';
  296.         for (var value in options.choices) {
  297.             html += '<label><input type="radio" name="' + name + '" value="' + MonkeyConfig.esc(value) + '" /> ' + options.choices[value] + '</label><br/>';}
  298.         return html;},
  299.     'file': function (name, options) { return '<input id="__MonkeyConfig_field_' + name + '" type="file" name="' + name + '" accept="' + (options.accept || '*/*') + '" />'; },
  300.     'button': function (name, options) { return '<button type="button" id="__MonkeyConfig_field_' + name + '" name="' + name + '">' + (options.label || 'Click') + '</button>'; },
  301.     'group': function (name, options) {
  302.         var html = '<fieldset><legend>' + (options.label || name) + '</legend>';
  303.         for (var subName in options.params) {
  304.             html += MonkeyConfig.formatters.tr(subName, options.params[subName]);}
  305.         html += '</fieldset>';
  306.         return html;},
  307.     'select': function (name, options) {
  308.         var choices = options.choices.constructor === Array ? options.choices.reduce(function (obj, val) { obj[val] = val; return obj; }, {}) : options.choices;
  309.         var html = '<select id="__MonkeyConfig_field_' + name + '" class="__MonkeyConfig_field_select" name="' + name + '"' + (options.multiple ? ' multiple="multiple"' : '') + '>';
  310.         for (var value in choices) {
  311.             html += '<option value="' + MonkeyConfig.esc(value) + '">' + choices[value] + '</option>';}
  312.         html += '</select>';
  313.         return html;}};
  314. MonkeyConfig.formatters = {
  315.     'tr': function (name, options) {
  316.         var html = '<tr>';
  317.         if (options.type === 'checkbox' || options.type === 'number' || options.type === 'text') {
  318.             html += '<td id="__MonkeyConfig_parent_' + name + '" colspan="2" class="__MonkeyConfig_inline">' +
  319.                 MonkeyConfig.HTML._label(name, options) + ' ' +
  320.                 MonkeyConfig.HTML._field(name, options) +
  321.                 '</td>';
  322.         } else if (options.type === 'group') {
  323.             html += '<td colspan="2">' + MonkeyConfig.HTML._field(name, options) + '</td>';
  324.         } else {
  325.             html += '<td>' + MonkeyConfig.HTML._label(name, options) + '</td><td id="__MonkeyConfig_parent_' + name + '">' + MonkeyConfig.HTML._field(name, options) + '</td>';
  326.         }
  327.         html += '</tr>';
  328.         return html;}};
  329. MonkeyConfig.res = {
  330.     icons: {
  331.         'arrow_undo': 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIJSURBVDjLpVM9aJNRFD35GsRSoUKKzQ/B0NJJF3EQlKrVgijSCBmC4NBFKihIcXBwEZdSHVoUwUInFUEkQ1DQ4CKiFsQsTrb5xNpgaZHw2Uog5t5zn0NJNFaw0guX97hwzuPcc17IOYfNlIdNVrhxufR6xJkZjAbSQGXjNAorqixSWFDV3KPhJ+UGLtSQMPryrDscPwLnAHOEOQc6gkbUpIagGmApWIb/pZRX4fjj889nWiSQtgYyBZ1BTUEj6AjPa0P71nb0Jfqwa+futIheHrzRn2yRQCUK/lOQhApBJVQJChHfnkCqOwWEQ+iORJHckUyX5ksvAEyGNuJC+s6xCRXNHNxzKMmQ4luwgjfvZp69uvr2+IZcyJ8rjIporrxURggetnV0QET3rrPxzMNM2+n7p678jUTrCiWhphAjVHR9DlR0WkSzf4IHxg5MSF0zXZEuVKWKSlCBCostS8zeG7oV64wPqxInbw86lbVXKEQ8mkAqmUJ4SxieeVhcnANFC02C7N2h69HO2IXeWC8MDj2JnqaFNAMd8f3HKjx6+LxQRmnOz1OZaxKIaF1VISYwB9ARZoQaYY6o1WpYCVYxt+zDn/XzVBv/MOWXW5J44ubRyVgkelFpmF/4BJVfOVDlVyqLVBZI5manPjajDOdcswfG9k/3X9v3/vfZv7rFBanriIo++J/f+BMT+YWS6hXl7QAAAABJRU5ErkJggg==',
  332.         'cancel': 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHdSURBVDjLpZNraxpBFIb3a0ggISmmNISWXmOboKihxpgUNGWNSpvaS6RpKL3Ry//Mh1wgf6PElaCyzq67O09nVjdVlJbSDy8Lw77PmfecMwZg/I/GDw3DCo8HCkZl/RlgGA0e3Yfv7+DbAfLrW+SXOvLTG+SHV/gPbuMZRnsyIDL/OASziMxkkKkUQTJJsLaGn8/iHz6nd+8mQv87Ahg2H9Th/BxZqxEkEgSrq/iVCvLsDK9awtvfxb2zjD2ARID+lVVlbabTgWYTv1rFL5fBUtHbbeTJCb3EQ3ovCnRC6xAgzJtOE+ztheYIEkqbFaS3vY2zuIj77AmtYYDusPy8/zuvunJkDKXM7tYWTiyGWFjAqeQnAD6+7ueNx/FLpRGAru7mcoj5ebqzszil7DggeF/DX1nBN82rzPqrzbRayIsLhJqMPT2N83Sdy2GApwFqRN7jFPL0tF+10cDd3MTZ2AjNUkGCoyO6y9cRxfQowFUbpufr1ct4ZoHg+Dg067zduTmEbq4yi/UkYidDe+kaTcP4ObJIajksPd/eyx3c+N2rvPbMDPbUFPZSLKzcGjKPrbJaDsu+dQO3msfZzeGY2TCvKGYQhdSYeeJjUt21dIcjXQ7U7Kv599f4j/oF55W4g/2e3b8AAAAASUVORK5CYII=',
  333.         'tick': 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGrSURBVDjLvZPZLkNhFIV75zjvYm7VGFNCqoZUJ+roKUUpjRuqp61Wq0NKDMelGGqOxBSUIBKXWtWGZxAvobr8lWjChRgSF//dv9be+9trCwAI/vIE/26gXmviW5bqnb8yUK028qZjPfoPWEj4Ku5HBspgAz941IXZeze8N1bottSo8BTZviVWrEh546EO03EXpuJOdG63otJbjBKHkEp/Ml6yNYYzpuezWL4s5VMtT8acCMQcb5XL3eJE8VgBlR7BeMGW9Z4yT9y1CeyucuhdTGDxfftaBO7G4L+zg91UocxVmCiy51NpiP3n2treUPujL8xhOjYOzZYsQWANyRYlU4Y9Br6oHd5bDh0bCpSOixJiWx71YY09J5pM/WEbzFcDmHvwwBu2wnikg+lEj4mwBe5bC5h1OUqcwpdC60dxegRmR06TyjCF9G9z+qM2uCJmuMJmaNZaUrCSIi6X+jJIBBYtW5Cge7cd7sgoHDfDaAvKQGAlRZYc6ltJlMxX03UzlaRlBdQrzSCwksLRbOpHUSb7pcsnxCCwngvM2Rm/ugUCi84fycr4l2t8Bb6iqTxSCgNIAAAAAElFTkSuQmCC'},
  334.     stylesheets: {
  335.         main: `
  336.             :host {
  337.                 all: initial; /* Reset semua properti CSS */
  338.                 font-family: Arial, sans-serif; /* Font default */
  339.                 display: block;}
  340.             .__MonkeyConfig_container {
  341.                 display: flex;
  342.                 flex-direction: column;
  343.                 padding: 1em;
  344.                 font-size: __FONT_SIZE__;
  345.                 color: __FONT_COLOR__;
  346.                 background: #eee linear-gradient(180deg, #f8f8f8 0, #ddd 100%);
  347.                 border-radius: 0.5em;
  348.                 box-shadow: 2px 2px 16px #000;
  349.                 max-width: 90vw;
  350.                 width: 100%;
  351.                 height: 100%;
  352.                 position: relative; /* Pastikan posisi relatif untuk z-index */
  353.                 box-sizing: border-box;}
  354.             .__MonkeyConfig_container h1 {
  355.                 border-bottom: solid 1px #999;
  356.                 font-size: 120%;
  357.                 margin: 0 0 0.5em 0;
  358.                 padding: 0 0 0.3em 0;
  359.                 text-align: center;}
  360.             .__MonkeyConfig_content {
  361.                 flex: 1;
  362.                 overflow-y: auto;
  363.                 max-height: 60vh;}
  364.             .__MonkeyConfig_top, .__MonkeyConfig_bottom {
  365.                 margin-bottom: 1em;}
  366.             .__MonkeyConfig_columns {
  367.                 display: flex;
  368.                 justify-content: space-between;
  369.                 margin-bottom: 1em;}
  370.             .__MonkeyConfig_left_column, .__MonkeyConfig_right_column {
  371.                 width: 48%;}
  372.             .__MonkeyConfig_container table {
  373.                 border-spacing: 0;
  374.                 margin: 0;
  375.                 width: 100%;}
  376.             .__MonkeyConfig_container td {
  377.                 border: none;
  378.                 line-height: 100%;
  379.                 padding: 0.3em;
  380.                 text-align: left;
  381.                 vertical-align: middle;
  382.                 white-space: normal;}
  383.             .__MonkeyConfig_container td.__MonkeyConfig_inline {
  384.                 display: flex;
  385.                 align-items: center;
  386.                 white-space: nowrap;}
  387.             .__MonkeyConfig_container td.__MonkeyConfig_inline label {
  388.                 margin-right: 0.5em;
  389.                 flex-shrink: 0;
  390.                 display: block;}
  391.             .__MonkeyConfig_container td.__MonkeyConfig_inline input[type="checkbox"] {
  392.                 flex-grow: 0;
  393.                 margin: 0 0.3em 0 0;
  394.                 display: inline-block;
  395.                 width: 16px;
  396.                 height: 16px;}
  397.             .__MonkeyConfig_container td.__MonkeyConfig_inline input[type="number"],
  398.             .__MonkeyConfig_container td.__MonkeyConfig_inline input[type="text"] {
  399.                 flex-grow: 0;
  400.                 width: 100px;
  401.                 min-width: 50px;}
  402.             .__MonkeyConfig_buttons_container {
  403.                 margin-top: 1em;
  404.                 border-top: solid 1px #999;
  405.                 padding-top: 0.6em;
  406.                 text-align: center;}
  407.             .__MonkeyConfig_buttons_container table {
  408.                 width: auto;
  409.                 margin: 0 auto;}
  410.             .__MonkeyConfig_buttons_container td {
  411.                 padding: 0.3em;}
  412.             .__MonkeyConfig_container button {
  413.                 background: #ccc linear-gradient(180deg, #ddd 0, #ccc 45%, #bbb 50%, #aaa 100%);
  414.                 border: solid 1px;
  415.                 border-radius: 0.0.5em;
  416.                 box-shadow: 0 0 1px #000;
  417.                 padding: 3px 8px 3px 24px;
  418.                 white-space: nowrap;}
  419.             .__MonkeyConfig_container button img {
  420.                 vertical-align: middle;}
  421.             .__MonkeyConfig_container label {
  422.                 line-height: 120%;
  423.                 vertical-align: middle;
  424.                 display: inline-block;}
  425.             .__MonkeyConfig_container textarea {
  426.                 vertical-align: text-top;
  427.                 width: 100%;
  428.                 white-space: pre-wrap;
  429.                 resize: vertical;
  430.                 text-align: left;}
  431.             .__MonkeyConfig_container input[type="text"],
  432.             .__MonkeyConfig_container input[type="number"],
  433.             .__MonkeyConfig_container input[type="color"] {
  434.                 background: #fff;}
  435.             .__MonkeyConfig_container button:hover {
  436.                 background: #d2d2d2 linear-gradient(180deg, #e2e2e2 0, #d2d2d2 45%, #c2c2c2 50%, #b2b2b2 100%);}`}};

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址