☰

36rain-layout-plugin

改变36雨布局的脚本文件，持续更新中...

  1. // ==UserScript==
  2. // @name                36rain-layout-plugin
  3. // @name:zh-CN          36rain页面适配插件
  4. // @namespace           http://36rain.com
  5. // @version             2.6.5
  6. // @description         改变36雨布局的脚本文件，持续更新中...
  7. // @description:zh-CN   改变36雨布局的脚本文件，持续更新中...
  8. // @match               http://36rain.com/*
  9. // @match               http://www.36rain.com/*
  10. // @match               https://36rain.me/*
  11. // @match               https://www.36rain.me/*
  12. // @match               https://36rain.me/*
  13. // @match               https://www.36rain.me/*
  14. // @run-at              document-start
  15. // @license             MIT
  16. // @grant               GM_info
  17. // @grant               GM_getValue
  18. // @grant               GM_setValue
  19. // @grant               GM_deleteValue
  20. // @grant               GM_xmlhttpRequest
  21. // @grant               GM_registerMenuCommand
  22. // @grant               GM_openInTab
  23. // @grant               GM_notification
  24. // @grant               GM_addStyle
  25. // @grant               GM_log
  26. // @grant               GM_getResourceText
  27. // @grant               GM_getResourceURL
  28. // @grant               GM_listValues
  29. // @grant               GM_addValueChangeListener
  30. // @grant               GM_removeValueChangeListener
  31. // @grant               GM_setClipboard
  32. // @grant               GM_getTab
  33. // @grant               GM_saveTab
  34. // @grant               GM_getTabs
  35. // @grant               GM_download
  36. // ==/UserScript==
  37.  
  38.  
  39.  
  40. /*
  41.     Author: 无名布女 
  42.     Greasyfork: Put your Greasyfork profile page URL here.
  43. */
  44.  
  45.  
  46. (function() {
  47.     'use strict';
  48.  
  49.     const customCSS = `
  50.     	body, html {
  51.       	    font-size: 36px !important;
  52.       	    line-height: 150% !important;
  53.     	}
  54.         
  55.         // green wallpaper
  56.         // html {
  57.         //     background: url('https://p3.itc.cn/images01/20210429/56eba48f5cff49308fc61f3416d38307.jpeg') no-repeat center center fixed !important;
  58.         //     background-color: #E2EDCB !important;
  59.         //     background-size: cover !important;
  60.         // }
  61.         html {
  62.             background: radial-gradient(#fffaee 15%, transparent 16%), linear-gradient(45deg, transparent 49%, #fffaee 49% 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, #fffaee 49% 51%, transparent 51%);
  63.             background-size: 6em 6em;
  64.             background-color: #FCF5E3;
  65.             opacity: 1
  66.         }
  67.         #header {
  68.             width: 60%; /* By default (for laptop and larger), width is 60% */
  69.         }
  70.         #user-login {
  71.             width: 100% !important;
  72.             display: block !important;
  73.             font-size: 36px !important;
  74.         }
  75.         /* For mobile and tablets */
  76.         @media screen and (max-width: 1024px) {
  77.             #header {
  78.                 width: 96%; /* On screens smaller than 1024px wide, width becomes 100% */
  79.             }
  80.         }
  81.         body {
  82.             background: none !important;
  83.         }
  84.         #main {
  85.             width: 100% !important;
  86.         }
  87.         #header > div:nth-child(3) {
  88.             background: rgba(0,0,0,0.1) !important;
  89.         }
  90.         #guide {
  91.             padding-right: 0px !important;
  92.         }
  93.  
  94.         .guide li {
  95.             margin: 10px 0px 10px 30px !important;
  96.             float: right;
  97.         }
  98.         #wrapA {
  99.             background: none !important;
  100.         }
  101.         #infobox {
  102.             margin-top: 0px !important;
  103.             padding-top: 40px !important;
  104.             /* border-top: 1px dashed #ccc !important; */
  105.         }
  106.  
  107.         #mainNav {
  108.             margin-bottom: 0 !important;
  109.             padding-bottom: 40px !important;
  110.             /* border-bottom: 1px dashed #ccc !important; */
  111.         }
  112.         .input {
  113.             font-size: 36px !important;
  114.             height: 60px !important;
  115.             margin-bottom: 40px !important;
  116.         }
  117.         .user-infoWrap2, .user-infoWrap2 * {
  118.           line-height: 100% !important;
  119.           font-size: 24px !important;
  120.         }
  121.     	.tr3 * {
  122.             line-height: 150% !important;
  123.         }
  124.         .f10, .f10 * {
  125.             font-size: 30px !important;
  126.         }
  127.         .tiptop, .tiptop * {
  128.             font-size: 32px !important;
  129.             line-height: 100% !important;
  130.             margin-top: 20px !important;
  131.             margin-bottom: 30px !important;
  132.             border: 0px !important;
  133.         }
  134.         .listinline {
  135.             display: none !important;
  136.         }
  137.         .t3 {
  138.             margin-bottom: 20px !important;
  139.             font-size: 40px !important;
  140.         }
  141.         .h {
  142.             background: none !important;
  143.         }
  144.         #main > div.h2 {
  145.             display: none !important;
  146.         }
  147.         .user-pic {
  148.             margin-top: 10px !important;
  149.             margin-bottom: 10px !important;
  150.             margin-right: auto !important;
  151.             margin-left: auto !important;
  152.         }
  153.         .pages {
  154.             height: auto;
  155.             line-height: 150% !important;
  156.             width: 100% !important;
  157.             margin-bottom: 40px;
  158.             padding-top: 5px;
  159.             padding-bottom: 5px;
  160.             border: none !important;
  161.         }
  162.         .hthread {
  163.             height: 36px !important;
  164.         }
  165.         .fl .threadlist {
  166.             height: 100% !important;
  167.         }
  168.         .pages ul li {
  169.             margin-right: 30px !important;
  170.         }
  171.         .pages ul .pagesone {
  172.             background: none !important;
  173.             border: none !important;
  174.         }
  175.         .pages input {
  176.             font-size: 36px !important;
  177.             height: auto !important;
  178.         }
  179.         .tpc_content, tpc_content * {
  180.             border-top: 2px dashed #ccc !important;
  181.             padding: 1em 0.5em 0.5em 0.5em !important;
  182.             font-size: 40px !important;
  183.         }
  184.         .tr2, .tr2 * {
  185.             height: auto;
  186.             line-height: 150% !important;
  187.             margin-bottom: 20px;
  188.             background: rgba(252,250,242, 0.3) !important;
  189.         }
  190.         .f14 * {
  191.             font-size: 40px !important;
  192.             letter-spacing: normal !important;
  193.             line-height: 200% !important;
  194.         }
  195.         .f14 h6, .f14 h6 * {
  196.             font-size: inherit !important;
  197.         }
  198.         .f14 blockquote, .f14 blockquote3, .f14 blockquote2 {
  199.             font-size: inherent !important;
  200.             width: 100% !important;
  201.             letter-spacing: normal !important;
  202.             line-height: 200% !important;
  203.             background: rgba(255, 255, 255, 0.2) !important;
  204.         }
  205.         .f10, .f10 * {
  206.             font-size: 30px !important;
  207.         }
  208.         .h2, .h2 * {
  209.             height: 40px !important;
  210.             background: none !important;
  211.         }
  212. 	    .guide {
  213.             line-height: 150% !important;
  214.         }
  215.         .btn {
  216.             font-size: 30px !important;
  217.         }
  218.         #post-option span { 
  219.             width: 100% !important;
  220.         }
  221.         .tipad, .signature, .tipad *, .signature * {
  222.             font-size: 32px !important;
  223.         }     
  224.         // #breadcrumbs, #breadcrumbs * {
  225.         //     padding: 1em 3em 1em 7px !important;
  226.         //     margin-right: 0px !important;
  227.         //     background: none !important;
  228.         //     border: none !important;
  229.         // }
  230.         .f_one, .t_one, .r_one {
  231.             background: none !important;
  232.         }
  233.         tr > td.f_one:nth-child(1), tr > td.f_one:nth-child(3) {
  234.             display: none !important;
  235.         }
  236.         #footer {
  237.             background: none !important;
  238.         }
  239.         #smiliebox {
  240.             background: none !important;
  241.             border: none !important;
  242.         }
  243.         #one-key {
  244.             display: none !important;
  245.         }
  246.         #shortcutforum li {
  247.             float: right !important;
  248.         }
  249.         tr.tr1 th.r_two {
  250.             background: none !important;
  251.         }
  252.         #user_info {
  253.             width: 70% !important;
  254.         }
  255.         // remove user info
  256.         #user_info > div:nth-child(3) > div > div > div {
  257.             display: none !important;
  258.         }
  259.         .gonggao {
  260.             display: none !important;
  261.         }
  262.  
  263.         /// breadcrumbs
  264.         #main > div.bdbA {
  265.             height: auto !important;
  266.             display: flex !important;
  267.             align-items: center !important;
  268.             padding: 0px !important;
  269.         }
  270.         #breadcrumbs {
  271.             margin: 0px !important;
  272.             display: flex !important;
  273.             align-items: center !important;
  274.             height: auto !important;
  275.             overflow: visible !important;
  276.             opacity: 0.8 !important;
  277.         }
  278.         #breadcrumbs .crumbs-item, #breadcrumbs .crumbs-item * {
  279.             height: auto !important;
  280.             overflow: visible !important;
  281.             line-height: 150% !important;
  282.         } 
  283.         #breadcrumbs > span.fr.gray3 {
  284.             line-height: 150% !important;
  285.         }
  286.         #notice {
  287.             padding: 0px !important;
  288.             height: auto !important;
  289.             display: flex !important;
  290.             align-items: center !important;
  291.         }
  292.         #notice0, #notice0 * {
  293.             height: auto !important;
  294.             width: 100% !important;
  295.             overflow-y: visible !important;
  296.             line-height: 150% !important;
  297.         }
  298.         div.tiptop > div.fr {
  299.             visibility: hidden;
  300.         }
  301.         #td_tpc > div.tiptop > div.fr > input, #td_tpc > div.tiptop > div.fr > a[title="只看樓主的所有帖子"]  {
  302.             visibility: visible !important;
  303.         }
  304.         div.tiptop > div.fr > input, div.tiptop > div.fr > a[title="只看該作者的所有回復"]  {
  305.             visibility: visible !important;
  306.         }
  307.         // re-arrange fast0reply box
  308.         div .t5 {
  309.             width: 100% !important;
  310.             overflow: scroll !important;
  311.         }
  312.         #r_dig {
  313.             display: none !important;
  314.         }
  315.     `;
  316.  
  317.     // Function to replace img elements within specified anchors with text
  318.     function replaceImageWithText(selector, newText) {
  319.         var targetLinks = document.querySelectorAll(selector);
  320.         targetLinks.forEach(function(anchor) {
  321.             var img = anchor.querySelector('img');
  322.             if (img) {
  323.                 img.remove(); // Remove the img element
  324.                 anchor.appendChild(document.createTextNode(newText)); // Add the text node
  325.             }
  326.         });
  327.     }
  328.     // function to replace img elements with font awesome icons
  329.     function replaceImageWithIcon(selector, iconClass) {
  330.         var targetLinks = document.querySelectorAll(selector);
  331.         targetLinks.forEach(function(anchor) {
  332.             var img = anchor.querySelector('img');
  333.             if (img) {
  334.                 img.remove(); // Remove the img element
  335.                 var icon = document.createElement('i');
  336.                 icon.className = `${iconClass} fa-2x`; // Set the class name
  337.                 anchor.appendChild(icon); // Add the icon
  338.             }
  339.         });
  340.     }
  341.  
  342.     // function to load progress bar
  343.     function addProgressBar() {
  344.         // add progress bar
  345.         addScript('https://cdn.jsdelivr.net/npm/pace-js@1.2.4/pace.min.js');
  346.         addStylesheet('https://cdn.jsdelivr.net/npm/pace-js@1.2.4/themes/silver/pace-theme-barber-shop.css');
  347.     }
  348.     // create and append links
  349.     function createLink(div, url, text) {
  350.         var link = document.createElement('a');
  351.         link.href = url;
  352.         link.target = "_blank";
  353.         link.textContent = text;
  354.         div.appendChild(link);
  355.     }
  356.  
  357.     // function to add new script to <head>
  358.     function addScript(url) {
  359.         var head = document.head;
  360.         var script = document.createElement('script');
  361.         script.src = url;
  362.         head.appendChild(script);
  363.     }
  364.     
  365.     // function to add new stylesheet to <head>
  366.     function addStylesheet(url) {
  367.         var head = document.head;
  368.         var link = document.createElement('link');
  369.         link.rel = 'stylesheet';
  370.         link.href = url;
  371.         head.appendChild(link);
  372.     }
  373.  
  374.     // function to center content
  375.     function centerContent(element) {
  376.         element.style.display = 'flex';
  377.         element.style.justifyContent = 'center';
  378.         element.style.alignItems = 'center';
  379.         element.style.textAlign = 'center';
  380.     }
  381.  
  382.     function centerContentVertical(element) {
  383.         element.style.display = 'flex';
  384.         element.style.justifyContent = 'center';
  385.         element.style.alignItems = 'center';
  386.         element.style.flexDirection = 'column';
  387.         element.style.height = '100%';
  388.     }
  389.     
  390.  
  391.     // Function to apply styles to elements
  392.     function applyStyles() {
  393.         // replay reply and new post with f
  394.         var ReplaySelectors = [
  395.             '#main > div:nth-child(5) > span:nth-child(2) > a',
  396.             '#main > div:nth-child(13) > span:nth-child(2) > a'
  397.         ];
  398.         ReplaySelectors.forEach(function(selector) {
  399.             replaceImageWithIcon(selector, 'fas fa-reply');
  400.         });
  401.         var PostSelectors = [
  402.             '#main > div:nth-child(5) > span:nth-child(1) > a',
  403.             '#main > div:nth-child(13) > span:nth-child(1) > a',
  404.             '#main > div:nth-child(9) > span.fr > a',
  405.             '#main > div:nth-child(8) > span.fr > a',
  406.             '#main > div:nth-child(14) > span.fr > a',
  407.         ];
  408.         PostSelectors.forEach(function(selector) {
  409.             replaceImageWithIcon(selector, 'fas fa-file');
  410.         });  
  411.  
  412.         var f10elements = document.querySelectorAll('.f10 *');
  413.         f10elements.forEach(function(el) {
  414.             el.style.setProperty('font-size', '30px', 'important');
  415.         });
  416.  
  417.         // remove fast reply title
  418.         var h2elements = document.querySelectorAll('.h2, .h2 *');
  419.         h2elements.forEach(function(el) {
  420.         //     el.style.setProperty('height', '36px', 'important');
  421.              el.style.setProperty('background', 'none', 'important');
  422.         });
  423.  
  424.         var h1elements = document.querySelectorAll('.h1, .h1 *');
  425.         h1elements.forEach(function(el) {
  426.             el.style.setProperty('font-size', '42px', 'important');
  427.             el.style.setProperty('letter-spacing', 'normal', 'important');
  428.             el.style.setProperty('line-height', '150%', 'important');
  429.         });
  430.  
  431.         // Apply styles to user-infoWrap2 elements
  432.         var userInfoElements = document.querySelectorAll('.user-infoWrap2, .user-infoWrap2 *');
  433.         userInfoElements.forEach(function(el) {
  434.             el.style.setProperty('font-size', '24px', 'important');
  435.             el.style.setProperty('line-height', '150%', 'important');
  436.         });
  437.  
  438.         // rearrange user login element
  439.         var userLogin = document.querySelector('#mainNav > div:nth-child(2)');
  440.         if (userLogin) {
  441.             userLogin.style.setProperty('bottom', 'auto', 'important');
  442.         }
  443.  
  444.         // Change width of the specified <td> element
  445.         var tdToChangeWidth = document.querySelector('#main > form:nth-child(21) > div > table > tbody > tr:nth-child(3) > td:nth-child(2)');
  446.         if (tdToChangeWidth) {
  447.             tdToChangeWidth.style.setProperty('width', '100%', 'important'); // Change width to 70%
  448.         } else {
  449.             console.error("Target TD element to change width was not found.");
  450.         }
  451.  
  452.         // Remove all <img> elements inside <th> elements
  453.         var thElements = document.querySelectorAll('.tr3 th');
  454.         thElements.forEach(function(th) {
  455.             var imgElement = th.querySelector('img');
  456.             if (imgElement) {
  457.                 console.log("IMG element found and will be removed:", imgElement.outerHTML);
  458.                 imgElement.style.setProperty('display', 'none', 'important');
  459.                 console.log("IMG element removed.");
  460.             }
  461.         });
  462.  
  463.         // Change the margin of the specified element
  464.         var divToChangeMargin = document.querySelector('#main > form:nth-child(5) > div > div:nth-child(4) > div:nth-child(1)');
  465.         if (divToChangeMargin) {
  466.             divToChangeMargin.style.setProperty('margin', '20px', 'important'); // Change margin to desired value
  467.             console.log("Changed margin of the element.");
  468.         } else {
  469.             console.error("Target element to change margin was not found.");
  470.         }
  471.  
  472.         // Change the width of the specified element
  473.         var divToChangeWidth = document.querySelector('#main > form:nth-child(5) > div > div:nth-child(4) > div:nth-child(1) > div');
  474.         if (divToChangeWidth) {
  475.             divToChangeWidth.style.setProperty('width', '100%', 'important'); // Change margin to desired value
  476.             console.log("Changed margin of the element.");
  477.         } else {
  478.             console.error("Target element to change margin was not found.");
  479.         }
  480.  
  481.         // Change the width of the specified element
  482.         var divToChangeWidthInput = document.querySelector('#main > form:nth-child(5) > div > div:nth-child(4) > div:nth-child(1) > div > input');
  483.         if (divToChangeWidthInput) {
  484.             divToChangeWidthInput.style.setProperty('width', '75%', 'important'); // Change margin to desired value
  485.             divToChangeWidthInput.style.setProperty('float', 'right', 'important'); // Change margin to desired value
  486.             console.log("Changed margin of the element.");
  487.         } else {
  488.             console.error("Target element to change margin was not found.");
  489.         }
  490.  
  491.         var spanToChangeFloat = document.querySelector('#main > form:nth-child(5) > div > div:nth-child(4) > div:nth-child(1) > div > span.fr.gray');
  492.         if (spanToChangeFloat) {
  493.             spanToChangeFloat.style.setProperty('float', 'left', 'important'); // Change margin to desired value
  494.             console.log("Changed margin of the element.");
  495.         } else {
  496.             console.error("Target element to change margin was not found.");
  497.         }
  498.  
  499.         // Combine styles for #editor-tab and #editor-tool
  500.         var editorElements = ['#editor-tab', '#editor-tool', 
  501.             '#editor-button > div:nth-child(3) > div'];
  502.         editorElements.forEach(function(selector) {
  503.             var element = document.querySelector(selector);
  504.             if (element) {
  505.                 element.style.setProperty('font-size', '16px', 'important');
  506.                 // element.style.setProperty('height', '150%', 'important');
  507.             } else {
  508.                 console.error(`Element with selector ${selector} was not found.`);
  509.             }
  510.         });
  511.         var editorFooterElements = ['#main > form:nth-child(5) > div > table:nth-child(9) > tbody > tr:nth-child(2) > th > div > div', '#post-option > div > div'];
  512.         editorFooterElements.forEach(function(selector) {
  513.             var element = document.querySelector(selector);
  514.             if (element) {
  515.                 element.style.setProperty('margin-left', '0px', 'important');
  516.             } else {
  517.                 console.error(`Element with selector ${selector} was not found.`);
  518.             }
  519.         });
  520.  
  521.         var inputElements = document.querySelectorAll('textarea, input, select');
  522.         inputElements.forEach(function(input) {
  523.             if (input) {
  524.                 input.style.setProperty('font', '30px Arial', 'important');
  525.             }
  526.         });
  527.  
  528.         var ChangePtypeWidth = document.querySelector('#main > form:nth-child(5) > div > div:nth-child(4) > div:nth-child(1) > div > span.fr.gray > select');
  529.         if (ChangePtypeWidth) {
  530.             ChangePtypeWidth.style.setProperty('width', 'auto', 'important');
  531.         }
  532.  
  533.         // Change width of <td> elements with width 25% to 33%, under .tr3 class
  534.         var tdElements = document.querySelectorAll('.tr3 td[width="25%"]');
  535.         tdElements.forEach(function(td) {
  536.             td.style.setProperty('width', '33%', 'important'); // Change width to 33%
  537.             var col2 = td.querySelector('table > tbody > tr > td:nth-child(2)');
  538.             if (col2) {
  539.                 col2.style.setProperty('border', '0px', 'important');
  540.                 col2.style.setProperty('background', 'none', 'important');
  541.             }
  542.             var col1 = td.querySelector('table > tbody > tr > td:nth-child(1)');
  543.             if (col1) {
  544.                 col1.style.setProperty('display', 'none', 'important');
  545.             }
  546.         });
  547.         // remove the last column in headline
  548.         var headlineElements = ['#main > div.t > table > tbody > tr.tr3.tac.h > td[width="25%"]:nth-child(4)', 
  549.             '#main > div.t > table > tbody > tr:nth-child(2) > td[width="25%"]:nth-child(4)'
  550.         ];
  551.         headlineElements.forEach(function(selector) {
  552.             var element = document.querySelector(selector);
  553.             if (element) {
  554.                 element.style.setProperty('display', 'none', 'important');
  555.             } 
  556.         });  
  557.  
  558.         // var ItoRemove = document.querySelectorAll('#breadcrumbs .crumbs-item i');
  559.         // ItoRemove.forEach(function(i) {
  560.         //     i.style.setProperty('display', 'none', 'important');
  561.         // });
  562.  
  563.         // Tr to be removed
  564.         var trToRemove = ['#cate_info > tr:nth-child(1)', '#cate_info > tr:nth-child(2)', 
  565.             '#cate_info > tr:nth-child(3)', '#cate_info > tr:nth-child(4)'
  566.         ];
  567.         trToRemove.forEach(function(selector) {
  568.             var element = document.querySelector(selector);
  569.             if (element) {
  570.                 element.style.setProperty('display', 'none', 'important');
  571.             }
  572.         });
  573.  
  574.         // change height of #ajaxtable > tbody:nth-child(1) > tr > th
  575.         var thHeight = document.querySelectorAll('#ajaxtable > tbody > tr > th');
  576.         thHeight.forEach(function(th) {
  577.             th.style.setProperty('font-size', '24px', 'important');
  578.         });
  579.  
  580.     }
  581.  
  582.     // Create and append style element
  583.     var style = document.createElement('style');
  584.     style.textContent = customCSS;
  585.     document.head.appendChild(style);
  586.  
  587.     // add font awesome
  588.     addStylesheet('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
  589.     
  590.     // add progress bar
  591.     addProgressBar();
  592.  
  593.     // Apply styles immediately
  594.     applyStyles();
  595.  
  596.     // Apply styles to dynamically loaded content
  597.     var observer = new MutationObserver(function(mutations) {
  598.         applyStyles();
  599.     });
  600.     observer.observe(document.body, { childList: true, subtree: true });
  601.     observer.disconnect();
  602.  
  603.     // just in case some contents are not loaded
  604.     document.addEventListener('DOMContentLoaded', function() {
  605.         applyStyles();
  606.     });
  607.  
  608.     // Force a repaint
  609.     document.body.style.display='none';
  610.     document.body.offsetHeight;
  611.     document.body.style.display='';
  612.  
  613. })();