☰

MonkeyConfig Mod

Enhanced configuration dialog builder with column layout, custom styling, and additional input types

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

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

  1. // ==UserScript==
  2. // @name           MonkeyConfig Mod
  3. // @namespace      http://odyniec.net/
  4. // @description    Enhanced configuration dialog builder with column layout, custom styling, and additional input types
  5. // @version        1.0
  6. // ==/UserScript==
  7.  
  8. /*
  9.  * MonkeyConfig Modern Reloaded Enhanced
  10.  * Based on version 0.1.4 by Michal Wojciechowski (odyniec.net)
  11.  * v0.1.4 - January 2020 - David Hosier (https://github.com/david-hosier/MonkeyConfig)
  12.  * Enhanced by Bloggerpemula - March 2025
  13.  * Additions: Column layout, font size/color customization, new input types (textarea, range, radio, file, button, group)
  14.  */
  15.  
  16. function MonkeyConfig() {
  17.     var cfg = this,
  18.         data,
  19.         params,
  20.         values = {},
  21.         storageKey,
  22.         displayed,
  23.         openWin, openLayer,
  24.         container,
  25.         overlay;
  26.  
  27.     function init(newData) {
  28.         data = newData;
  29.  
  30.         if (data) {
  31.             params = data.parameters || data.params;
  32.             data.buttons = data.buttons === undefined ? ['save', 'defaults', 'cancel'] : data.buttons;
  33.             data.fontSize = data.fontSize || '11pt'; // Default font size
  34.             data.fontColor = data.fontColor || '#000000'; // Default font color
  35.  
  36.             if (data.title === undefined) {
  37.                 if (typeof GM_getMetadata == 'function') {
  38.                     var scriptName = GM_getMetadata('name');
  39.                     data.title = scriptName + ' Configuration';
  40.                 } else {
  41.                     data.title = 'Configuration';
  42.                 }
  43.             }
  44.         }
  45.  
  46.         var safeTitle = data && data.title ? data.title.replace(/[^a-zA-Z0-9]/g, '_') : '';
  47.         storageKey = '_MonkeyConfig_' + safeTitle + '_cfg';
  48.  
  49.         var storedValues = GM_getValue(storageKey) ? JSON.parse(GM_getValue(storageKey)) : {};
  50.  
  51.         for (var name in params) {
  52.             if (params[name]['value'] !== undefined) {
  53.                 set(name, params[name].value);
  54.             } else if (storedValues[name] !== undefined) {
  55.                 set(name, storedValues[name]);
  56.             } else if (params[name]['default'] !== undefined) {
  57.                 set(name, params[name]['default']);
  58.             } else {
  59.                 set(name, '');
  60.             }
  61.         }
  62.  
  63.         if (data.menuCommand) {
  64.             var caption = data.menuCommand !== true ? data.menuCommand : data.title;
  65.             GM_registerMenuCommand(caption, function () { cfg.open(); });
  66.         }
  67.  
  68.         cfg.open = open;
  69.         cfg.close = close;
  70.         cfg.get = get;
  71.         cfg.set = function (name, value) { set(name, value); update(); };
  72.     }
  73.  
  74.     function get(name) { return values[name]; }
  75.     function set(name, value) { values[name] = value; }
  76.     function setDefaults() {
  77.         for (var name in params) {
  78.             if (typeof params[name]['default'] !== 'undefined') {
  79.                 set(name, params[name]['default']);
  80.             }
  81.         }
  82.     }
  83.  
  84.     function render() {
  85.         var html = '<div class="__MonkeyConfig_container">' +
  86.             '<h1>' + data.title + '</h1>' +
  87.             '<div class="__MonkeyConfig_columns">' +
  88.             '<div class="__MonkeyConfig_left_column">';
  89.         
  90.         // Kolom kiri
  91.         for (var name in params) {
  92.             if (params[name].column === 'left') {
  93.                 html += MonkeyConfig.formatters['tr'](name, params[name]);
  94.             }
  95.         }
  96.         html += '</div><div class="__MonkeyConfig_right_column">';
  97.  
  98.         // Kolom kanan
  99.         for (var name in params) {
  100.             if (params[name].column === 'right') {
  101.                 html += MonkeyConfig.formatters['tr'](name, params[name]);
  102.             }
  103.         }
  104.         html += '</div></div><table class="__MonkeyConfig_default">';
  105.  
  106.         // Elemen tanpa kolom (default)
  107.         for (var name in params) {
  108.             if (!params[name].column) {
  109.                 html += MonkeyConfig.formatters['tr'](name, params[name]);
  110.             }
  111.         }
  112.  
  113.         html += '<tr><td colspan="2" class="__MonkeyConfig_buttons">' +
  114.                 '<table><tr>';
  115.  
  116.         for (var button in data.buttons) {
  117.             html += '<td>';
  118.             switch (data.buttons[button]) {
  119.                 case 'cancel':
  120.                     html += '<button type="button" id="__MonkeyConfig_button_cancel">' +
  121.                         '<img src="data:image/png;base64,' + MonkeyConfig.res.icons.cancel + '" />&nbsp;Cancel</button>';
  122.                     break;
  123.                 case 'defaults':
  124.                     html += '<button type="button" id="__MonkeyConfig_button_defaults">' +
  125.                         '<img src="data:image/png;base64,' + MonkeyConfig.res.icons.arrow_undo + '" />&nbsp;Set&nbsp;Defaults</button>';
  126.                     break;
  127.                 case 'save':
  128.                     html += '<button type="button" id="__MonkeyConfig_button_save">' +
  129.                         '<img src="data:image/png;base64,' + MonkeyConfig.res.icons.tick + '" />&nbsp;Save</button>';
  130.                     break;
  131.             }
  132.             html += '</td>';
  133.         }
  134.  
  135.         html += '</tr></table></td></tr></table></div>';
  136.         return html;
  137.     }
  138.  
  139.     function update() {
  140.         if (!displayed) return;
  141.  
  142.         for (var name in params) {
  143.             var value = values[name];
  144.             var elem = container.querySelector('[name="' + name + '"]');
  145.             switch (params[name].type) {
  146.                 case 'checkbox':
  147.                     elem.checked = !!value;
  148.                     break;
  149.                 case 'custom':
  150.                     params[name].set(value, container.querySelector('#__MonkeyConfig_parent_' + name));
  151.                     break;
  152.                 case 'number':
  153.                 case 'text':
  154.                 case 'color':
  155.                 case 'textarea':
  156.                 case 'range':
  157.                     elem.value = value;
  158.                     break;
  159.                 case 'radio':
  160.                     elem = container.querySelector('[name="' + name + '"][value="' + value + '"]');
  161.                     if (elem) elem.checked = true;
  162.                     break;
  163.                 case 'file':
  164.                     elem.value = ''; // File input tidak bisa di-set langsung
  165.                     break;
  166.                 case 'select':
  167.                     if (elem.tagName.toLowerCase() == 'input' && elem.type == 'checkbox') {
  168.                         var checkboxes = container.querySelectorAll('input[name="' + name + '"]');
  169.                         for (var i = 0; i < checkboxes.length; i++) {
  170.                             checkboxes[i].checked = value.indexOf(checkboxes[i].value) > -1;
  171.                         }
  172.                     } else if (elem.multiple) {
  173.                         var options = container.querySelectorAll('select[name="' + name + '"] option');
  174.                         for (var i = 0; i < options.length; i++) {
  175.                             options[i].selected = value.indexOf(options[i].value) > -1;
  176.                         }
  177.                     } else {
  178.                         elem.value = value;
  179.                     }
  180.                     break;
  181.             }
  182.         }
  183.     }
  184.  
  185.     function saveClick() {
  186.         for (var name in params) {
  187.             var elem = container.querySelector('[name="' + name + '"]');
  188.             switch (params[name].type) {
  189.                 case 'checkbox':
  190.                     values[name] = elem.checked;
  191.                     break;
  192.                 case 'custom':
  193.                     values[name] = params[name].get(container.querySelector('#__MonkeyConfig_parent_' + name));
  194.                     break;
  195.                 case 'number':
  196.                 case 'text':
  197.                 case 'color':
  198.                 case 'textarea':
  199.                 case 'range':
  200.                     values[name] = elem.value;
  201.                     break;
  202.                 case 'radio':
  203.                     values[name] = container.querySelector('[name="' + name + '"]:checked')?.value || '';
  204.                     break;
  205.                 case 'file':
  206.                     values[name] = elem.dataset.value || values[name]; // Simpan nilai dari file yang diunggah
  207.                     break;
  208.                 case 'select':
  209.                     if (elem.tagName.toLowerCase() == 'input' && elem.type == 'checkbox') {
  210.                         values[name] = [];
  211.                         var inputs = container.querySelectorAll('input[name="' + name + '"]');
  212.                         for (var i = 0; i < inputs.length; i++) {
  213.                             if (inputs[i].checked) values[name].push(inputs[i].value);
  214.                         }
  215.                     } else if (elem.multiple) {
  216.                         values[name] = [];
  217.                         var options = container.querySelectorAll('select[name="' + name + '"] option');
  218.                         for (var i = 0; i < options.length; i++) {
  219.                             if (options[i].selected) values[name].push(options[i].value);
  220.                         }
  221.                     } else {
  222.                         values[name] = elem.value;
  223.                     }
  224.                     break;
  225.             }
  226.         }
  227.  
  228.         GM_setValue(storageKey, JSON.stringify(values));
  229.         close();
  230.         if (data.onSave) data.onSave(values);
  231.         location.reload();
  232.     }
  233.  
  234.     function cancelClick() { close(); }
  235.     function defaultsClick() { setDefaults(); update(); }
  236.  
  237.     function open(mode, options) {
  238.         function openDone() {
  239.             var button;
  240.             if (button = container.querySelector('#__MonkeyConfig_button_save')) button.addEventListener('click', saveClick, true);
  241.             if (button = container.querySelector('#__MonkeyConfig_button_cancel')) button.addEventListener('click', cancelClick, true);
  242.             if (button = container.querySelector('#__MonkeyConfig_button_defaults')) button.addEventListener('click', defaultsClick, true);
  243.             displayed = true;
  244.             update();
  245.         }
  246.  
  247.         GM_addStyle(MonkeyConfig.res.stylesheets.main.replace(/__FONT_SIZE__/g, data.fontSize).replace(/__FONT_COLOR__/g, data.fontColor));
  248.         MonkeyConfig.styleAdded = true;
  249.  
  250.         switch (mode) {
  251.             case 'window':
  252.                 var win = window.open('', data.title, 'location=no,status=no');
  253.                 win.document.head.innerHTML = '<title>' + data.title + '</title><style>' + MonkeyConfig.res.stylesheets.main + '</style>';
  254.                 win.document.body.className = '__MonkeyConfig_window';
  255.                 win.document.body.innerHTML = render();
  256.                 container = win.document.querySelector('.__MonkeyConfig_container');
  257.                 win.innerWidth = container.clientWidth;
  258.                 win.resizeBy(0, -win.innerHeight + container.clientHeight);
  259.                 win.moveBy(Math.round((window.outerWidth - win.outerWidth) / 2), Math.round((window.outerHeight - win.outerHeight) / 2));
  260.                 openWin = win;
  261.                 openDone();
  262.                 break;
  263.             case 'layer':
  264.             case 'iframe':
  265.             default:
  266.                 var body = document.querySelector('body');
  267.                 openLayer = document.createElement('div');
  268.                 openLayer.className = '__MonkeyConfig_layer';
  269.                 overlay = document.createElement('div');
  270.                 overlay.className = '__MonkeyConfig_overlay';
  271.                 overlay.style.cssText = 'left:0;top:0;width:' + window.innerWidth + 'px;height:' + window.innerHeight + 'px;z-index:9999;';
  272.                 openLayer.innerHTML = render();
  273.                 openLayer.style.cssText = 'left:' + Math.round((window.innerWidth - openLayer.clientWidth) / 2) + 'px;top:' + Math.round((window.innerHeight - openLayer.clientHeight) / 2) + 'px;z-index:9999;';
  274.                 body.appendChild(overlay);
  275.                 body.appendChild(openLayer);
  276.                 container = document.querySelector('.__MonkeyConfig_container');
  277.                 openDone();
  278.                 break;
  279.         }
  280.     }
  281.  
  282.     function close() {
  283.         if (openWin) { openWin.close(); openWin = undefined; }
  284.         if (openLayer) { openLayer.parentNode.removeChild(openLayer); openLayer = undefined; }
  285.         if (overlay) { overlay.parentNode.removeChild(overlay); overlay = undefined; }
  286.         displayed = false;
  287.     }
  288.  
  289.     init(arguments[0]);
  290. }
  291.  
  292. MonkeyConfig.esc = function (string) { return string.replace(/"/g, '&quot;'); };
  293.  
  294. MonkeyConfig.HTML = {
  295.     '_field': function (name, options, data) {
  296.         return options.type && MonkeyConfig.HTML[options.type] ? options.html ? options.html.replace(/\[FIELD\]/, MonkeyConfig.HTML[options.type](name, options, data)) : MonkeyConfig.HTML[options.type](name, options, data) : '';
  297.     },
  298.     '_label': function (name, options, data) {
  299.         var label = options['label'] || name.substring(0, 1).toUpperCase() + name.substring(1).replace(/_/g, '&nbsp;');
  300.         return '<label for="__MonkeyConfig_field_' + name + '">' + label + '</label>';
  301.     },
  302.     'checkbox': function (name, options) { return '<input id="__MonkeyConfig_field_' + name + '" type="checkbox" name="' + name + '" />'; },
  303.     'custom': function (name, options) { return options.html || ''; },
  304.     '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') + '" />'; },
  305.     'text': function (name, options) { return '<input id="__MonkeyConfig_field_' + name + '" type="text" class="__MonkeyConfig_field_text" name="' + name + '" />'; },
  306.     'color': function (name, options) { return '<input id="__MonkeyConfig_field_' + name + '" type="color" class="__MonkeyConfig_field_text" name="' + name + '" />'; },
  307.     '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>'; },
  308.     '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) + '" />'; },
  309.     'radio': function (name, options) {
  310.         var html = '';
  311.         for (var value in options.choices) {
  312.             html += '<label><input type="radio" name="' + name + '" value="' + MonkeyConfig.esc(value) + '" /> ' + options.choices[value] + '</label><br/>';
  313.         }
  314.         return html;
  315.     },
  316.     'file': function (name, options) { return '<input id="__MonkeyConfig_field_' + name + '" type="file" name="' + name + '" accept="' + (options.accept || '*/*') + '" />'; },
  317.     'button': function (name, options) { return '<button type="button" id="__MonkeyConfig_field_' + name + '" name="' + name + '">' + (options.label || 'Click') + '</button>'; },
  318.     'group': function (name, options) {
  319.         var html = '<fieldset><legend>' + (options.label || name) + '</legend>';
  320.         for (var subName in options.params) {
  321.             html += MonkeyConfig.formatters['tr'](subName, options.params[subName]);
  322.         }
  323.         html += '</fieldset>';
  324.         return html;
  325.     },
  326.     'select': function (name, options) {
  327.         var choices = options.choices.constructor == Array ? options.choices.reduce((obj, val) => { obj[val] = val; return obj; }, {}) : options.choices;
  328.         var html = '<select id="__MonkeyConfig_field_' + name + '" class="__MonkeyConfig_field_select" name="' + name + '"' + (options.multiple ? ' multiple="multiple"' : '') + '>';
  329.         for (var value in choices) {
  330.             html += '<option value="' + MonkeyConfig.esc(value) + '">' + choices[value] + '</option>';
  331.         }
  332.         html += '</select>';
  333.         return html;
  334.     }
  335. };
  336.  
  337. MonkeyConfig.formatters = {
  338.     'tr': function (name, options, data) {
  339.         var html = '<tr>';
  340.         if (options.type === 'checkbox') {
  341.             html += '<td id="__MonkeyConfig_parent_' + name + '" colspan="2">' + MonkeyConfig.HTML['_field'](name, options, data) + ' ' + MonkeyConfig.HTML['_label'](name, options, data) + '</td>';
  342.         } else if (options.type === 'group') {
  343.             html += '<td colspan="2">' + MonkeyConfig.HTML['_field'](name, options, data) + '</td>';
  344.         } else {
  345.             html += '<td>' + MonkeyConfig.HTML['_label'](name, options, data) + '</td><td id="__MonkeyConfig_parent_' + name + '">' + MonkeyConfig.HTML['_field'](name, options, data) + '</td>';
  346.         }
  347.         html += '</tr>';
  348.         return html;
  349.     }
  350. };
  351.  
  352. MonkeyConfig.styleAdded = false;
  353.  
  354. MonkeyConfig.res = {
  355.     icons: {
  356.         '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==',
  357.         'cancel': 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHdSURBVDjLpZNraxpBFIb3a0ggISmmNISWXmOboKihxpgUNGWNSpvaS6RpKL3Ry//Mh1wgf6PElaCyzq67O09nVjdVlJbSDy8Lw77PmfecMwZg/I/GDw3DCo8HCkZl/RlgGA0e3Yfv7+DbAfLrW+SXOvLTG+SHV/gPbuMZRnsyIDL/OASziMxkkKkUQTJJsLaGn8/iHz6nd+8mQv87Ahg2H9Th/BxZqxEkEgSrq/iVCvLsDK9awtvfxb2zjD2ARID+lVVlabTgWYTv1rFL5fBUtHbbeTJCb3EQ3ovCnRC6xAgzJtOE+ztheYIEkqbFaS3vY2zuIj77AmtYYDusPy8/zuvunJkDKXM7tYWTiyGWFjAqeQnAD6+7ueNx/FLpRGAru7mcoj5ebqzszil7DggeF/DX1BN82rzPqrzbRayIsLhJqMPT2N83Sdy2GApwFqRN7jFPL0tF+10cDd3MTZ2AjNUkGCoyO6y9cRxfQowFUbpufr1ct4ZoHg+Dg067zduTmEbq4yi/UkYidDe+kaTcP4ObJIajksPd/eyx3c+N2rvPbMDPbUFPZSLKzcGjKPrbJaDsu+dQO3msfZzeGY2TCvKGYQhdSYeeJjUt21dIcjXQ7U7Kv599f4j/oF55W4g/2e3b8AAAAASUVORK5CYII=',
  358.         'tick': 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGrSURBVDjLvZPZLkNhFIV75zjvYm7VGFNCqoZUJ+roKUUpjRuqp61Wq0NKDMelGGqOxBSUIBKXWtWGZxAvobr8lWjChRgSF//dv9be+9trCwAI/vIE/26gXmviW5bqnb8yUK028qZjPfoPWEj4Ku5HBspgAz941IXZeze8N1bottSo8BTZviVWrEh546EO03EXpuJOdG63otJbjBKHkEp/Ml6yNYYzpuezWL4s5VMtT8acCMQcb5XL3eJE8VgBlR7BeMGW9Z4yT9y1CeyucuhdTGDxfftaBO7G4L+zg91UocxVmCiy51NpiP3n2treUPujL8xhOjYOzZYsQWANyRYlU4Y9Br6oHd5bDh0bCpSOixJiWx71YY09J5pM/WEbzFcDmHvwwBu2wnikg+lEj4mwBe5bC5h1OUqcwpdC60dxegRmR06TyjCF9G9z+qM2uCJmuMJmaNZaUrCSIi6X+jJIBBYtW5Cge7cd7sgoHDfDaAvKQGAlRZYc6ltJlMxX03UzlaRlBdQrzSCwksLRbOpHUSb7pcsnxCCwngvM2Rm/ugUCi84fycr4l2t8Bb6iqTxSCgNIAAAAAElFTkSuQmCC'
  359.     },
  360.     stylesheets: {
  361.         'main': '\
  362. body.__MonkeyConfig_window { appearance: window !important; -moz-appearance: window !important; background: auto; font-family: sans-serif !important; height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }\
  363. div.__MonkeyConfig_container { display: table !important; font-family: sans-serif !important; padding: 0.3em !important; font-size: __FONT_SIZE__ !important; color: __FONT_COLOR__ !important; }\
  364. body.__MonkeyConfig_window div.__MonkeyConfig_container { appearance: window !important; -moz-appearance: window !important; height: 100%; width: 100%; }\
  365. div.__MonkeyConfig_container h1 { border-bottom: solid 1px #999 !important; font-family: sans-serif !important; font-size: 120% !important; margin: 0 !important; padding: 0 0 0.3em 0 !important; }\
  366. div.__MonkeyConfig_columns { display: flex !important; justify-content: space-between !important; margin-bottom: 1em !important; }\
  367. div.__MonkeyConfig_left_column, div.__MonkeyConfig_right_column { width: 48% !important; }\
  368. div.__MonkeyConfig_container table { border-spacing: 0 !important; margin: 0 !important; width: 100% !important; }\
  369. div.__MonkeyConfig_container table td { border: none !important; line-height: 100% !important; padding: 0.3em !important; text-align: left !important; vertical-align: top !important; white-space: nowrap !important; }\
  370. div.__MonkeyConfig_container table td.__MonkeyConfig_buttons { padding: 0.2em 0 !important; }\
  371. .__MonkeyConfig_field_number { width: 5em !important; }\
  372. div.__MonkeyConfig_container td.__MonkeyConfig_buttons table { border-top: solid 1px #999 !important; width: 100% !important; }\
  373. div.__MonkeyConfig_container td.__MonkeyConfig_buttons td { padding: 0.6em 0.3em 0.1em 0.3em !important; text-align: center !important; vertical-align: top; }\
  374. div.__MonkeyConfig_container td.__MonkeyConfig_buttons button { appearance: button !important; -moz-appearance: button !important; background-position: 8px 50% !important; background-repeat: no-repeat !important; padding: 3px 8px 3px 24px !important; white-space: nowrap !important; }\
  375. div.__MonkeyConfig_container td.__MonkeyConfig_buttons button img { vertical-align: middle !important; }\
  376. div.__MonkeyConfig_layer { display: table !important; position: fixed !important; }\
  377. div.__MonkeyConfig_layer div.__MonkeyConfig_container, body.__MonkeyConfig_body > div.__MonkeyConfig_container { background: #eee linear-gradient(180deg, #f8f8f8 0, #ddd 100%) !important; border-radius: 0.5em !important; box-shadow: 2px 2px 16px #000 !important; color: __FONT_COLOR__ !important; font-family: sans-serif !important; font-size: __FONT_SIZE__ !important; padding: 1em 1em 0.4em 1em !important; }\
  378. div.__MonkeyConfig_layer div.__MonkeyConfig_container td, div.__MonkeyConfig_layer div.__MonkeyConfig_container label, div.__MonkeyConfig_layer div.__MonkeyConfig_container input, div.__MonkeyConfig_layer div.__MonkeyConfig_container select, div.__MonkeyConfig_layer div.__MonkeyConfig_container textarea, div.__MonkeyConfig_layer div.__MonkeyConfig_container button { color: __FONT_COLOR__ !important; font-family: sans-serif !important; font-size: __FONT_SIZE__ !important; line-height: 100% !important; margin: 0 !important; vertical-align: baseline !important; }\
  379. div.__MonkeyConfig_container label { line-height: 120% !important; vertical-align: baseline !important; }\
  380. div.__MonkeyConfig_container textarea { vertical-align: text-top !important; width: 100%; }\
  381. div.__MonkeyConfig_layer div.__MonkeyConfig_container input[type="text"] { appearance: textfield !important; -moz-appearance: textfield !important; background: #fff !important; }\
  382. div.__MonkeyConfig_layer div.__MonkeyConfig_container h1 { font-weight: bold !important; text-align: left !important; }\
  383. div.__MonkeyConfig_layer div.__MonkeyConfig_container td.__MonkeyConfig_buttons button, body > div.__MonkeyConfig_container td.__MonkeyConfig_buttons button { appearance: button !important; -moz-appearance: button !important; background: #ccc linear-gradient(180deg, #ddd 0, #ccc 45%, #bbb 50%, #aaa 100%) !important; border-style: solid !important; border-width: 1px !important; border-radius: 0.5em !important; box-shadow: 0 0 1px #000 !important; color: __FONT_COLOR__ !important; font-size: __FONT_SIZE__ !important; }\
  384. div.__MonkeyConfig_layer div.__MonkeyConfig_container td.__MonkeyConfig_buttons button:hover, body > div.__MonkeyConfig_container td.__MonkeyConfig_buttons button:hover { background: #d2d2d2 linear-gradient(180deg, #e2e2e2 0, #d2d2d2 45%, #c2c2c2 50%, #b2b2b2 100%) !important; }\
  385. div.__MonkeyConfig_overlay { background-color: #000 !important; opacity: 0.6 !important; position: fixed !important; }\
  386. iframe#__MonkeyConfig_frame { border: none !important; box-shadow: 2px 2px 16px #000 !important; }\
  387. body.__MonkeyConfig_body { margin: 0 !important; padding: 0 !important; }\
  388. '
  389.     }
  390. };