☰

wnacg 優化

電腦版頁面支持切換自動翻頁或手動按鍵翻頁，並可自定背景顏色及圖像大小。電腦開啟的手機頁面 (移動端不適用)，則可自定背景顏色及圖像大小。

  1. // ==UserScript==
  2. // @name            wnacg 優化
  3. // @name:zh-TW      wnacg 優化
  4. // @name:zh-CN      wnacg 优化
  5. // @name:ja         wnacg 最適化
  6. // @name:en         wnacg Optimization
  7. // @version         0.0.15
  8. // @author          Canaan HS
  9. // @description         電腦版頁面支持切換自動翻頁或手動按鍵翻頁，並可自定背景顏色及圖像大小。電腦開啟的手機頁面 (移動端不適用)，則可自定背景顏色及圖像大小。
  10. // @description:zh-TW   電腦版頁面支持切換自動翻頁或手動按鍵翻頁，並可自定背景顏色及圖像大小。電腦開啟的手機頁面 (移動端不適用)，則可自定背景顏色及圖像大小。
  11. // @description:zh-CN   电脑版页面支持切换自动翻页或手动按键翻页，并可自定背景颜色及图像大小。电脑开启的手机页面（移动端不适用），则可自定背景颜色及图像大小。
  12. // @description:ja      デスクトップ版ページでは、自動ページ送りと手動キー操作によるページ送りの切り替えができ、背景色と画像サイズをカスタマイズできます。デスクトップで開いたモバイルページ（モバイル端末では適用されません）では、背景色と画像サイズをカスタマイズできます。
  13. // @description:en      The desktop version supports switching between automatic page turning and manual key press page turning, with customizable background color and image size. The mobile version opened on a desktop (not applicable on mobile devices) allows for customizing the background color and image size.
  14.  
  15. // @match       *://*.wnacg.com/photos-view-id-*.html
  16. // @match       *://*.wnacg01.ru/photos-view-id-*.html
  17. // @match       *://*.wnacg02.ru/photos-view-id-*.html
  18. // @match       *://*.wnacg03.ru/photos-view-id-*.html
  19.  
  20. // @match       *://*.wnacg.com/photos-slist-aid-*.html
  21. // @match       *://*.wnacg01.ru/photos-slist-aid-*.html
  22. // @match       *://*.wnacg02.ru/photos-slist-aid-*.html
  23. // @match       *://*.wnacg03.ru/photos-slist-aid-*.html
  24.  
  25. // @icon        https://www.wnacg.com/favicon.ico
  26.  
  27. // @license     MIT
  28. // @namespace   https://greasyfork.org/users/989635
  29.  
  30. // @run-at      document-start
  31. // @grant       GM_setValue
  32. // @grant       GM_getValue
  33. // @grant       GM_deleteValue
  34. // @grant       GM_registerMenuCommand
  35.  
  36. // @require     https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js
  37. // @require     https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.0/jquery-ui.min.js
  38. // @require     https://update.greasyfork.org/scripts/495339/1456526/ObjectSyntax_min.js
  39. // @require     https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js
  40. // @require     https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js
  41. // ==/UserScript==
  42.  
  43. (async () => {
  44.   async function x(a, e) {
  45.       document.title = document.title.split(" - ")[1];
  46.       const f = Syn.$$("a", { root: a }).href,
  47.           r = Syn.$$("img", { root: a }).src;
  48.       if (h.SwitchStatus) {
  49.           let q = Syn.$$("select option", { all: !0 }).length - e;
  50.           const p = new IntersectionObserver(
  51.               (c) => {
  52.                   c.forEach((b) => {
  53.                       b.isIntersecting &&
  54.                           (history.pushState(null, null, b.target.alt),
  55.                               p.unobserve(b.target));
  56.                   });
  57.               },
  58.               { threshold: 0.3 }
  59.           );
  60.           function m({ OLink: c, src: b }) {
  61.               return React.createElement("img", {
  62.                   src: b,
  63.                   alt: c,
  64.                   loading: "lazy",
  65.                   className: "ImageOptimization",
  66.                   ref: function (g) {
  67.                       g && p.observe(g);
  68.                   },
  69.               });
  70.           }
  71.           async function n(c) {
  72.               0 < q &&
  73.                   fetch(c)
  74.                       .then((b) => b.text())
  75.                       .then((b) => {
  76.                           b = Syn.$$("#photo_body", { root: Syn.DomParse(b) });
  77.                           const g = Syn.$$("a", { root: b }).href;
  78.                           b = Syn.$$("img", { root: b }).src;
  79.                           ReactDOM.render(
  80.                               React.createElement(m, { OLink: c, src: b }),
  81.                               a.appendChild(document.createElement("div"))
  82.                           );
  83.                           setTimeout(() => {
  84.                               q--;
  85.                               n(g);
  86.                           }, 500);
  87.                       })
  88.                       .catch((b) => {
  89.                           n(c);
  90.                       });
  91.           }
  92.           ReactDOM.render(
  93.               React.createElement(m, { OLink: Syn.Device.Url, src: r }),
  94.               a
  95.           );
  96.           Syn.$$("#header").scrollIntoView();
  97.           n(f);
  98.       } else {
  99.           function q({ number: c, src: b }) {
  100.               return React.createElement("img", {
  101.                   src: b,
  102.                   "data-number": c,
  103.                   className: "ImageOptimization",
  104.               });
  105.           }
  106.           async function p(c) {
  107.               fetch(c)
  108.                   .then((b) => b.text())
  109.                   .then((b) => {
  110.                       b = Syn.DomParse(b);
  111.                       var g = Syn.$$("#photo_body", { root: b });
  112.                       g = Syn.$$("img", { root: g }).src;
  113.                       ReactDOM.render(React.createElement(q, { number: m, src: g }), a);
  114.                       b = Syn.$$(".newpage .btntuzao", { all: !0, root: b });
  115.                       n.set(m, { PrevLink: b[0].href, NextLink: b[1].href });
  116.                       history.pushState(null, null, c);
  117.                       window.scrollTo(0, 0);
  118.                   });
  119.           }
  120.           let m = e;
  121.           const n = new Map();
  122.           e = Syn.$$(".newpage .btntuzao", { all: !0 });
  123.           n.set(m, { PrevLink: e[0].href, NextLink: e[1].href });
  124.           ReactDOM.render(
  125.               React.createElement(q, { number: m, NLink: f, src: r }),
  126.               a
  127.           );
  128.           document.onkeydown = void 0;
  129.           u(window, "keydown", (c) => {
  130.               var b = c.key;
  131.               if ("ArrowLeft" == b || "4" == b)
  132.                   c.stopImmediatePropagation(),
  133.                       --m,
  134.                       (c = +Syn.$$("img", { root: a }).getAttribute("data-number")),
  135.                       (b = n.get(c - 1)) ? p(b.PrevLink) : p(n.get(c).PrevLink);
  136.               else if ("ArrowRight" == b || "6" == b)
  137.                   c.stopImmediatePropagation(),
  138.                       ++m,
  139.                       (c = +Syn.$$("img", { root: a }).getAttribute("data-number")),
  140.                       (c = n.get(c).NextLink),
  141.                       p(c);
  142.           });
  143.       }
  144.   }
  145.   async function u(a, e, f) {
  146.       $(a).on(e, f);
  147.   }
  148.   async function w(a = !1) {
  149.       if (Syn.$$(".modal-background")) a && Syn.$$(".modal-background").remove();
  150.       else {
  151.           var {
  152.               SwitchStatus: e,
  153.               ImageBasicWidth: f,
  154.               ImageMaxWidth: r,
  155.               ImageBasicHight: q,
  156.               ImageMaxHight: p,
  157.               ImageSpacing: m,
  158.               BackgroundColor: n,
  159.           } = h.LoadingConfig();
  160.           a = [];
  161.           for (var c of [m, f, r, q, p, n]) a.push(h.ConfigAnalyze(c));
  162.           c = h.IsMobile
  163.               ? ""
  164.               : `
  165.           <div class="DMS">
  166.               <input type="checkbox" class="DMS-checkbox" id="SwitchMode" ${e ? "checked" : ""
  167.               }>
  168.               <label class="DMS-label" for="SwitchMode">
  169.                   <span class="DMS-inner"></span>
  170.                   <span class="DMS-switch"></span>
  171.               </label>
  172.           </div>
  173.       `;
  174.           a = `
  175.           <div class="modal-background">
  176.               <div class="modal-interface">
  177.                   <div style="display: flex; justify-content: space-between;">
  178.                       <h1 style="margin-bottom: 1rem; font-size: 1.3rem;">${h.Transl(
  179.               "\u5716\u50cf\u8a2d\u7f6e"
  180.           )}</h1>${c}
  181.                   </div>
  182.                   <p>
  183.                       <Cins>${h.Transl(
  184.               "\u5716\u50cf\u9593\u8ddd"
  185.           )}</Cins><input type="range" id="ImageSpacing" class="slider" min="0" max="100" step="1" value="${a[0].RangeValue
  186.               }">
  187.                       <span class="Cshow">${a[0].DisplayText}</span>
  188.                   </p>
  189.                   <br>
  190.                   <p>
  191.                       <Cins>${h.Transl(
  192.                   "\u57fa\u672c\u5bec\u5ea6"
  193.               )}</Cins><input type="range" id="ImageBasicWidth" class="slider" min="9" max="100" step="1" value="${a[1].RangeValue
  194.               }">
  195.                       <span class="Cshow">${a[1].DisplayText}</span>
  196.                   </p>
  197.                   <br>
  198.                   <p>
  199.                       <Cins>${h.Transl(
  200.                   "\u6700\u5927\u5bec\u5ea6"
  201.               )}</Cins><input type="range" id="ImageMaxWidth" class="slider" min="9" max="100" step="1" value="${a[2].RangeValue
  202.               }">
  203.                       <span class="Cshow">${a[2].DisplayText}</span>
  204.                   </p>
  205.                   <br>
  206.                   <p>
  207.                       <Cins>${h.Transl(
  208.                   "\u57fa\u672c\u9ad8\u5ea6"
  209.               )}</Cins><input type="range" id="ImageBasicHight" class="slider" min="9" max="100" step="1" value="${a[3].RangeValue
  210.               }">
  211.                       <span class="Cshow">${a[3].DisplayText}</span>
  212.                   </p>
  213.                   <br>
  214.                   <p>
  215.                       <Cins>${h.Transl(
  216.                   "\u6700\u5927\u9ad8\u5ea6"
  217.               )}</Cins><input type="range" id="ImageMaxHight" class="slider" min="9" max="100" step="1" value="${a[4].RangeValue
  218.               }">
  219.                       <span class="Cshow">${a[4].DisplayText}</span>
  220.                   </p>
  221.                   <br>
  222.                   <p>
  223.                       <Cins>${h.Transl(
  224.                   "\u80cc\u666f\u984f\u8272"
  225.               )}</Cins><input type="color" id="BackgroundColor" class="color" value="${a[5].RangeValue
  226.               }">
  227.                       <span style="margin-right: 17.9rem;"></span><button id="SaveConfig" class="button-sty">${h.Transl(
  228.                   "\u4fdd\u5b58\u8a2d\u7f6e"
  229.               )}</button>
  230.                   </p>
  231.               </div>
  232.           </div>
  233.       `;
  234.           var b = document.body;
  235.           $(b).append(a);
  236.           $(".modal-interface").draggable({
  237.               scroll: !0,
  238.               opacity: 0.8,
  239.               cursor: "grabbing",
  240.           });
  241.           var g, k, t;
  242.           u("#BackgroundColor", "input", (l) => {
  243.               g = l.target.id;
  244.               k = $(l.target).val();
  245.               h.StylePointer[g](b, k);
  246.           });
  247.           u("#ImageSpacing", "input", (l) => {
  248.               t = $(l.target).next(".Cshow");
  249.               g = l.target.id;
  250.               k = $(l.target).val();
  251.               h.StylePointer[g](`${k}rem`);
  252.               t.text(`${k}rem`);
  253.           });
  254.           u("#ImageBasicWidth, #ImageMaxWidth", "input", (l) => {
  255.               t = $(l.target).next(".Cshow");
  256.               g = l.target.id;
  257.               k = $(l.target).val();
  258.               "9" === k
  259.                   ? (h.StylePointer[g]("auto"), t.text("auto"))
  260.                   : (h.StylePointer[g](`${k}%`), t.text(`${k}%`));
  261.           });
  262.           u("#ImageBasicHight, #ImageMaxHight", "input", (l) => {
  263.               t = $(l.target).next(".Cshow");
  264.               g = l.target.id;
  265.               k = $(l.target).val();
  266.               "9" === k
  267.                   ? (h.StylePointer[g]("auto"), t.text("auto"))
  268.                   : (h.StylePointer[g](`${k}rem`), t.text(`${k}rem`));
  269.           });
  270.           u("#SaveConfig", "click", function () {
  271.               const l = {};
  272.               l.SwitchStatus = $("#SwitchMode").prop("checked") ? !0 : !1;
  273.               var d = $(".modal-interface");
  274.               const v = d.css("top");
  275.               d = d.css("left");
  276.               l.MenuTop = v;
  277.               l.MenuLeft = d;
  278.               h.StylePointer.MenuTop(v);
  279.               h.StylePointer.MenuLeft(d);
  280.               $(".modal-interface")
  281.                   .find("input")
  282.                   .not("#SwitchMode")
  283.                   .each(function () {
  284.                       g = $(this).attr("id");
  285.                       k = $(this).val();
  286.                       l[g] =
  287.                           "ImageSpacing" === g
  288.                               ? `${k}rem`
  289.                               : "ImageBasicWidth" === g || "ImageMaxWidth" === g
  290.                                   ? "9" === k
  291.                                       ? "auto"
  292.                                       : `${k}%`
  293.                                   : "ImageBasicHight" === g || "ImageMaxHight" === g
  294.                                       ? "9" === k
  295.                                           ? "auto"
  296.                                           : `${k}rem`
  297.                                       : k;
  298.                   });
  299.               Syn.Store("s", "Config", l);
  300.               $(".modal-background").remove();
  301.           });
  302.       }
  303.   }
  304.   (async () => {
  305.       Syn.Store("g", "Mode_V2", !1) && Syn.Store("d", "Mode_V2");
  306.       const a = Syn.Store("g", "Settings");
  307.       if (a) {
  308.           Syn.Store("d", "Settings");
  309.           const { ULS: e, BW: f, MW: r, BH: q, MH: p, BC: m, MT: n, ML: c } = a[0];
  310.           Syn.Store("s", "Config", {
  311.               SwitchStatus: !0,
  312.               MenuTop: n,
  313.               MenuLeft: c,
  314.               ImageBasicWidth: f,
  315.               ImageMaxWidth: r,
  316.               ImageBasicHight: q,
  317.               ImageMaxHight: p,
  318.               ImageSpacing: e,
  319.               BackgroundColor: m,
  320.           });
  321.       }
  322.   })();
  323.   const h = (() => {
  324.       const a = () =>
  325.           Syn.Store("g", "Config", null) ?? {
  326.               SwitchStatus: !0,
  327.               MenuTop: "auto",
  328.               MenuLeft: "auto",
  329.               ImageSpacing: "0rem",
  330.               ImageBasicWidth: "100%",
  331.               ImageMaxWidth: "60%",
  332.               ImageBasicHight: "auto",
  333.               ImageMaxHight: "auto",
  334.               BackgroundColor: "#000",
  335.           };
  336.       let e;
  337.       var f = {},
  338.           r = {
  339.               "\u5716\u50cf\u8a2d\u7f6e": "\u56fe\u50cf\u8bbe\u7f6e",
  340.               "\u5716\u50cf\u9593\u8ddd": "\u56fe\u50cf\u95f4\u8ddd",
  341.               "\u57fa\u672c\u5bec\u5ea6": "\u57fa\u672c\u5bbd\u5ea6",
  342.               "\u6700\u5927\u5bec\u5ea6": "\u6700\u5927\u5bbd\u5ea6",
  343.               "\u57fa\u672c\u9ad8\u5ea6": "\u57fa\u672c\u9ad8\u5ea6",
  344.               "\u6700\u5927\u9ad8\u5ea6": "\u6700\u5927\u9ad8\u5ea6",
  345.               "\u80cc\u666f\u984f\u8272": "\u80cc\u666f\u989c\u8272",
  346.               "\u4fdd\u5b58\u8a2d\u7f6e": "\u4fdd\u5b58\u8bbe\u7f6e",
  347.               "\u6efe\u52d5\u95b1\u8b80": "\u6eda\u52a8\u9605\u8bfb",
  348.               "\u7ffb\u9801\u95b1\u8b80": "\u7ffb\u9875\u9605\u8bfb",
  349.               "\ud83d\udd32 \u958b\u95dc\u83dc\u55ae": "\u5f00\u5173\u83dc\u5355",
  350.           };
  351.       f = {
  352.           "zh-TW": f,
  353.           "zh-HK": f,
  354.           "zh-MO": f,
  355.           "zh-CN": r,
  356.           "zh-SG": r,
  357.           "en-US": {
  358.               "\u5716\u50cf\u8a2d\u7f6e": "Image Settings",
  359.               "\u5716\u50cf\u9593\u8ddd": "Image ImageSpacing",
  360.               "\u57fa\u672c\u5bec\u5ea6": "Base Width",
  361.               "\u6700\u5927\u5bec\u5ea6": "Max Width",
  362.               "\u57fa\u672c\u9ad8\u5ea6": "Base Height",
  363.               "\u6700\u5927\u9ad8\u5ea6": "Max Height",
  364.               "\u80cc\u666f\u984f\u8272": "BackgroundColor Color",
  365.               "\u4fdd\u5b58\u8a2d\u7f6e": "Save Settings",
  366.               "\u6efe\u52d5\u95b1\u8b80": "Scroll Read",
  367.               "\u7ffb\u9801\u95b1\u8b80": "TurnPage Read",
  368.               "\ud83d\udd32 \u958b\u95dc\u83dc\u55ae": "Toggle Menu",
  369.           },
  370.           ja: {
  371.               "\u5716\u50cf\u8a2d\u7f6e": "\u753b\u50cf\u8a2d\u5b9a",
  372.               "\u5716\u50cf\u9593\u8ddd": "\u753b\u50cf\u9593\u9694",
  373.               "\u57fa\u672c\u5bec\u5ea6": "\u57fa\u672c\u5e45",
  374.               "\u6700\u5927\u5bec\u5ea6": "\u6700\u5927\u5e45",
  375.               "\u57fa\u672c\u9ad8\u5ea6": "\u57fa\u672c\u9ad8\u3055",
  376.               "\u6700\u5927\u9ad8\u5ea6": "\u6700\u5927\u9ad8\u3055",
  377.               "\u80cc\u666f\u984f\u8272": "\u80cc\u666f\u8272",
  378.               "\u4fdd\u5b58\u8a2d\u7f6e": "\u8a2d\u5b9a\u306e\u4fdd\u5b58",
  379.               "\u6efe\u52d5\u95b1\u8b80":
  380.                   "\u30b9\u30af\u30ed\u30fc\u30eb\u8aad\u307f\u53d6\u308a",
  381.               "\u7ffb\u9801\u95b1\u8b80":
  382.                   "\u30da\u30fc\u30b8\u8aad\u307f\u53d6\u308a",
  383.               "\ud83d\udd32 \u958b\u95dc\u83dc\u55ae":
  384.                   "\u30e1\u30cb\u30e5\u30fc\u306e\u5207\u308a\u66ff\u3048",
  385.           },
  386.       };
  387.       const q = f[Syn.Device.Lang] ?? f["en-US"];
  388.       f = (d) => q[d] ?? d;
  389.       const {
  390.           SwitchStatus: p,
  391.           MenuTop: m,
  392.           MenuLeft: n,
  393.           ImageBasicWidth: c,
  394.           ImageMaxWidth: b,
  395.           ImageBasicHight: g,
  396.           ImageMaxHight: k,
  397.           ImageSpacing: t,
  398.           BackgroundColor: l,
  399.       } = a();
  400.       Syn.AddStyle(`
  401.           .ImageOptimization {
  402.               display: block;
  403.               margin: ${t} auto;
  404.               width: ${c};
  405.               height: ${g};
  406.               max-width: ${b};
  407.               max-height: ${k};
  408.           }
  409.           body {
  410.               overflow-x: visible !important;
  411.               background-color: ${l} !important;
  412.           }
  413.           a, em {
  414.               color: #fff !important;
  415.           }
  416.           .nav li a {
  417.               float: left;
  418.               line-height: 40px;
  419.               height: 40px;
  420.               width: 85px;
  421.               font-size: 14px;
  422.               color: #fff !important;
  423.               text-decoration: none;
  424.               text-align: center;
  425.               font-weight: bold;
  426.               text-align: center;
  427.               background: #5F5F5F !important;
  428.           }
  429.           .tocaowrap {
  430.               width: 100%;
  431.               margin: 0 auto;
  432.               padding: 0.1rem;
  433.               max-width: ${b};
  434.           }
  435.           .btntuzao {
  436.               margin: 0 5px;
  437.               background-color: #5F5F5F;
  438.           }
  439.           #header {
  440.               background: #5F5F5F;
  441.               border-bottom: 1px solid #dfe1e1;
  442.               transform: translateY(-1.6rem);
  443.               opacity: 0;
  444.               transition: 0.8s;
  445.           }
  446.           #header:hover {
  447.               opacity: 1;
  448.               transform: translateY(0rem);
  449.           }
  450.           .modal-background {
  451.               top: 0;
  452.               left: 0;
  453.               width: 100%;
  454.               height: 100%;
  455.               display: flex;
  456.               z-index: 9999;
  457.               position: fixed;
  458.               overflow: auto;
  459.               pointer-events: none;
  460.           }
  461.           .modal-interface {
  462.               top: ${m};
  463.               left: ${n};
  464.               margin: auto;
  465.               color: #3d8fe7;
  466.               padding: 1% 2%;
  467.               border-radius: 5px;
  468.               background-color: #f3f3f3;
  469.               border: 2px solid #c0d8fc;
  470.               pointer-events: auto;
  471.           }
  472.           .slider {
  473.               width: 21rem;
  474.               cursor: pointer;
  475.           }
  476.           .color {
  477.               width: 4rem;
  478.               cursor: pointer;
  479.           }
  480.           .Cshow {
  481.               font-size: 1.25rem;
  482.               margin: auto 1rem;
  483.               font-weight: bold;
  484.           }
  485.           .button-sty {
  486.               color: #ffffff;
  487.               font-size: 1rem;
  488.               padding: 0.3rem;
  489.               font-weight: bold;
  490.               border-radius: 5px;
  491.               background-color: #3d8fe7;
  492.               border: 2px solid #f3f3f3;
  493.           }
  494.           .button-sty:hover,
  495.           .button-sty:focus {
  496.               color: #c0d8fc;
  497.               cursor: pointer;
  498.               text-decoration: none;
  499.           }
  500.           p {
  501.               display: flex;
  502.               align-items: center;
  503.               white-space: nowrap;
  504.           }
  505.           Cins {
  506.               font-size: 1.2rem;
  507.               font-weight: bold;
  508.               padding: 1rem;
  509.               margin-right: 1rem;
  510.           }
  511.           /*--------------------*/
  512.           .DMS {
  513.               position: absolute;
  514.               width: 8.2rem;
  515.               margin-left: 27rem;
  516.           }
  517.           .DMS-checkbox {
  518.               display: none;
  519.           }
  520.           .DMS-label {
  521.               display: block;
  522.               overflow: hidden;
  523.               cursor: pointer;
  524.               border: 2px solid #c0d8fc;
  525.               border-radius: 20px;
  526.           }
  527.           .DMS-inner {
  528.               display: block;
  529.               width: 200%;
  530.               margin-left: -100%;
  531.               transition: margin 0.3s ease-in 0s;
  532.           }
  533.           .DMS-inner:before,
  534.           .DMS-inner:after {
  535.               display: block;
  536.               float: left;
  537.               width: 50%;
  538.               height: 30px;
  539.               padding: 0;
  540.               line-height: 30px;
  541.               font-size: 14px;
  542.               font-family: Trebuchet, Arial, sans-serif;
  543.               font-weight: bold;
  544.               box-sizing: border-box;
  545.           }
  546.           .DMS-inner:before {
  547.               content: "${f("\u6efe\u52d5\u95b1\u8b80")}";
  548.               padding-left: 1.7rem;
  549.               background-color: #3d8fe7;
  550.               color: #FFFFFF;
  551.           }
  552.           .DMS-inner:after {
  553.               content: "${f("\u7ffb\u9801\u95b1\u8b80")}";
  554.               padding-right: 1.5rem;
  555.               background-color: #FFFFFF;
  556.               color: #3d8fe7;
  557.               text-align: right;
  558.           }
  559.           .DMS-switch {
  560.               display: block;
  561.               width: 18px;
  562.               margin: 6px;
  563.               background: #FFFFFF;
  564.               position: absolute;
  565.               top: 0;
  566.               bottom: 0;
  567.               right: 96px;
  568.               border: 2px solid #999999;
  569.               border-radius: 20px;
  570.               transition: all 0.3s ease-in 0s;
  571.           }
  572.           .DMS-checkbox:checked+.DMS-label .DMS-inner {
  573.               margin-left: 0;
  574.           }
  575.           .DMS-checkbox:checked+.DMS-label .DMS-switch {
  576.               right: 0px;
  577.           }
  578.       `);
  579.       setTimeout(() => {
  580.           e = Syn.$$("#New-Style").sheet.cssRules;
  581.       }, 1300);
  582.       return {
  583.           IsMobile: Syn.Device.Url.includes("photos-slist-aid"),
  584.           LoadingConfig: a,
  585.           SwitchStatus: p,
  586.           ConfigAnalyze: (d) =>
  587.               "auto" === d
  588.                   ? { RangeValue: 9, DisplayText: "auto" }
  589.                   : d.endsWith("rem") || d.endsWith("%")
  590.                       ? { RangeValue: parseInt(d), DisplayText: d }
  591.                       : { RangeValue: d, DisplayText: "color" },
  592.           StylePointer: {
  593.               MenuTop: (d) => (e[9].style.top = d),
  594.               MenuLeft: (d) => (e[9].style.left = d),
  595.               ImageSpacing: (d) => (e[0].style.margin = `${d} auto`),
  596.               ImageBasicWidth: (d) => (e[0].style.width = d),
  597.               ImageMaxWidth: (d) => {
  598.                   e[0].style.maxWidth = d;
  599.                   e[2].style.maxWidth = d;
  600.               },
  601.               ImageBasicHight: (d) => (e[0].style.height = d),
  602.               ImageMaxHight: (d) => (e[0].style.maxHeight = d),
  603.               BackgroundColor: (d, v) => {
  604.                   d.style.setProperty("background-color", v, "important");
  605.               },
  606.           },
  607.           Transl: f,
  608.       };
  609.   })();
  610.   (async () => {
  611.       if ("Mobile" != Syn.Device.Type())
  612.           if (
  613.               (GM_registerMenuCommand(
  614.                   h.Transl("\ud83d\udd32 \u958b\u95dc\u83dc\u55ae"),
  615.                   () => w(!0)
  616.               ),
  617.                   Syn.AddListener(
  618.                       window,
  619.                       "keydown",
  620.                       (a) => {
  621.                           const e = a.key;
  622.                           "Shift" === e
  623.                               ? (a.preventDefault(), w())
  624.                               : "Escape" === e &&
  625.                               (a.preventDefault(), Syn.$$(".modal-background")?.remove());
  626.                       },
  627.                       { capture: !0 }
  628.                   ),
  629.                   h.IsMobile)
  630.           ) {
  631.               const a = new Map();
  632.               Syn.WaitElem(
  633.                   "#img_list",
  634.                   (e) => {
  635.                       Syn.Observer(
  636.                           e,
  637.                           () => {
  638.                               Syn.$$("div", { root: e, all: !0 }).forEach((f) => {
  639.                                   a.has(f) ||
  640.                                       (a.set(f, !0),
  641.                                           (f.style.cssText = "text-align: center"),
  642.                                           (f = Syn.$$("img", { root: f })),
  643.                                           f.removeAttribute("width"),
  644.                                           f.classList.add("ImageOptimization"));
  645.                               });
  646.                           },
  647.                           { throttle: 1500 }
  648.                       );
  649.                   },
  650.                   { raf: !0, timeout: 10 }
  651.               );
  652.           } else
  653.               Syn.WaitMap(
  654.                   ".png.bread;#bread;#photo_body;span.newpagelabel b;#bodywrap;.newpagewrap;.footer.wrap".split(
  655.                       ";"
  656.                   ),
  657.                   (a) => {
  658.                       const [e, f, r, q, p, m, n] = a;
  659.                       ReactDOM.render(
  660.                           React.createElement("div", {
  661.                               dangerouslySetInnerHTML: { __html: e.innerHTML },
  662.                           }),
  663.                           f
  664.                       );
  665.                       r.classList.remove("photo_body");
  666.                       [p, m, n].forEach((c) => {
  667.                           c.style.display = "none";
  668.                       });
  669.                       x(r, +q.textContent);
  670.                   },
  671.                   { raf: !0, timeout: 10 }
  672.               );
  673.   })();
  674. })();