☰

Mobile mobileread.com [WIP]

6.07.2024, 11:54:09

当前为 2024-12-14 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Mobile mobileread.com [WIP]
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://www.mobileread.com/*
  5. // @grant       none
  6. // @version     0.2.0
  7. // @author      Julia
  8. // @license     GPL3
  9. // @description 6.07.2024, 11:54:09
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.     var headElement = document.head || document.getElementsByTagName('head')[0];
  15.     var metaElement = document.createElement('meta');
  16.     metaElement.name = 'viewport';
  17.     metaElement.content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=yes';
  18.     if (headElement) {
  19.         headElement.appendChild(metaElement);
  20.     } else {
  21.         console.error('Cannot find element <head>.');
  22.     }
  23.     let css = `
  24.     @media all and (max-width: 950px) and (orientation: portrait) {
  25.         html {
  26.             -webkit-text-size-adjust: 100%;
  27.             -moz-text-size-adjust: 100%;
  28.             -ms-text-size-adjust: 100%;
  29.             text-size-adjust: 100%;
  30.         }
  31.  
  32.         body {
  33.             -webkit-text-size-adjust: none;
  34.             -moz-text-size-adjust: none;
  35.             -ms-text-size-adjust: none;
  36.             text-size-adjust: none;
  37.             margin: 0px !important;
  38.             border: none !important
  39.         }
  40.  
  41.         .page {
  42.             width: 100% !important;
  43.         }
  44.  
  45.         .page > div {
  46.             padding: 0px 5px !important;
  47.         }
  48.  
  49.         #container.tborder {
  50.             width: 100% !important;
  51.             margin: 0px !important;
  52.         }
  53.         #content {
  54.             width: 100% !important;
  55.         }
  56.  
  57.         #sidebar {
  58.             width: 100% !important;
  59.         }
  60.  
  61.         #container {
  62.             padding: 0px !important;
  63.             border: none !important
  64.         }
  65.  
  66.         #container.tborder div.header_container table tbody tr {
  67.             display: grid;
  68.             width: 100% !important;
  69.             grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  70.             grid-auto-rows: 20px;
  71.             place-items: center;
  72.         }
  73.  
  74.         .alt1Active table tbody tr td {
  75.             display: table;
  76.             table-layout: fixed;
  77.             width: 100% !important;
  78.         }
  79.  
  80.         .alt1Active table tbody tr td div > h3 {
  81.             display: block;
  82.             word-break: break-word;
  83.             hyphens: auto;
  84.         }
  85.  
  86.         .alt1Active table tbody tr td h3 + .smallfont {
  87.             line-height: 2
  88.         }
  89.  
  90.         .alt1Active table tbody tr td .smallfont:has(h4) {
  91.             width: 100% !important;
  92.         }
  93.  
  94.         .alt1Active table tbody tr td .smallfont h4 {
  95.             width: 100% !important;
  96.         }
  97.  
  98.         [id^="collapseobj_forumbit_"] tr td.alt2:has( .smallfont) table {
  99.             text-wrap: wrap !important;
  100.             width: auto !important;
  101.             word-break: break-word;
  102.         }
  103.  
  104.         [id^="collapseobj_forumbit_"] tr td.alt2:has( .smallfont) table div:not(:has(a[rel="nofollow"])) {
  105.             display: grid;
  106.             text-wrap: wrap !important;
  107.             width: auto !important;
  108.             word-break: break-word;
  109.             hyphens: auto;
  110.         }
  111.  
  112.         tbody tr td[id^="f"] + td.alt1 table {
  113.             width: 120px !important;
  114.             text-wrap: wrap !important;
  115.             word-break: break-word;
  116.         }
  117.  
  118.         .top_menu_right {
  119.             top: 50px !important;
  120.         }
  121.  
  122.         tr:has(.pagenav) {
  123.             display: flex;
  124.             flex-direction: column;
  125.             grid-gap: 2px;
  126.             align-items: center;
  127.         }
  128.  
  129.         .pagenav tr {
  130.             float: left;
  131.         }
  132.  
  133.         .pagenav td.vbmenu_control:nth-child(1) {
  134.             display: block;
  135.         }
  136.  
  137.         .pagenav .alt1:has([rel="start"]) {
  138.             float: left;
  139.         }
  140.  
  141.         .pagenav .alt1:has([rel="prev"]) {
  142.             float: left;
  143.         }
  144.  
  145.         .pagenav .alt1:has([title^="Show results"]),
  146.         .pagenav .alt2:has([title^="Showing results"]) {
  147.             float: left;
  148.         }
  149.  
  150.         .pagenav table {
  151.             text-align: center;
  152.             align-items: center;
  153.         }
  154.  
  155.         #threadslist .alt2 div:has(.time) {
  156.             table-layout: fixed;
  157.             text-wrap: wrap !important;
  158.             width: 100%;
  159.             word-break: break-word;
  160.         }
  161.  
  162.         [class="threadlink condensed"] {
  163.             display: table;
  164.             table-layout: fixed;
  165.             text-wrap: wrap !important;
  166.             width: 100%;
  167.             word-break: break-word;
  168.         }
  169.  
  170.         [id^="td_threadtitle_"].alt1 div > span.smallfont:has([alt="Multi-page thread"]) {
  171.             padding: 5px 0px;
  172.             display: block;
  173.             text-wrap: wrap !important;
  174.         }
  175.  
  176.         tr:has(.tcat + .vbmenu_control) {
  177.             display: grid;
  178.         }
  179.  
  180.         tr:has(.vbmenu_control) .tcat  {
  181.             width: auto;
  182.         }
  183.  
  184.  
  185.         table[id^="post"].tborder tbody tr td.thead:has(a[id^="postcount"]) {
  186.             position: absolute;
  187.             right: 8px;
  188.         }
  189.  
  190.         table[id^="post"].tborder tbody tr td.thead:has(a[id^="postcount"] + span[id^="reputationmenu"]) {
  191.             position: revert;
  192.         }
  193.  
  194.         .alt2:has(img[src^="https://www2.mobileread.com/i/mr/statusicon/user_"]) {
  195.             background: none !important;
  196.             border: none !important;
  197.             margin: none !important;
  198.             text-align: right !important;
  199.         }
  200.  
  201.         tbody:has( > tr > td.alt2 > img[src*="user_offline.gif"]) tr[valign="top"] .alt2[width="175"] > div:nth-child(1)::after {
  202.             content: "";
  203.             position: relative;
  204.             left: 2px;
  205.             top: 5px;
  206.             background-image: url('https://www2.mobileread.com/i/mr/statusicon/user_offline.gif');
  207.             background-size: 24px 24px;
  208.             display: inline-block;
  209.             width: 24px;
  210.             height: 24px !important;
  211.             outline: 8px solid #6082ad;
  212.             outline-offset: -5px;
  213.             image-rendering: pixelated;
  214.             clip-path: inset(0px round 1em);
  215.             filter: brightness(0.5) saturate(0) contrast(100%);
  216.             text-wrap: nowrap;
  217.         }
  218.  
  219.         tbody:has( > tr > td.alt2 > img[src*="user_online.gif"]) tr[valign="top"] .alt2[width="175"] > div:nth-child(1)::after {
  220.             content: "";
  221.             position: relative;
  222.             left: 2px;
  223.             top: 5px;
  224.             background-image: url('https://www2.mobileread.com/i/mr/statusicon/user_online.gif');
  225.             background-size: 24px 24px;
  226.             display: inline-block;
  227.             width: 24px;
  228.             height: 24px !important;
  229.             outline: 8px solid #6082ad;
  230.             outline-offset: -5px;
  231.             image-rendering: pixelated;
  232.             clip-path: inset(0px round 1em);
  233.         }
  234.  
  235.         #posts .inlineimg[src^="https://www2.mobileread.com/i/mr/statusicon/user_"] {
  236.             display: none;
  237.         }
  238.  
  239.         tr[valign="top"]:not(:has(.pagenav)),
  240.         tr[valign="top"]:not(:has(.pagenav)) + tr {
  241.             display: grid;
  242.             width: 100%;
  243.         }
  244.  
  245.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] {
  246.             display: grid;
  247.             width: auto !important;
  248.             max-width: 100% !important;
  249.             height: auto !important;
  250.             max-height: 100% !important;
  251.             border: none !important;
  252.             grid-template-columns: fit-content(100%) fit-content(100%) auto 150px;
  253.             grid-template-rows: max-content;
  254.             padding: 0px !important;
  255.             margin: 0px !important;
  256.         }
  257.  
  258.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(1) {
  259.             background: none;
  260.             position: relative;
  261.             left: 5px;
  262.             bottom: 18px;
  263.             grid-column: 2 / span 2;
  264.             grid-row: 1;
  265.             height: fit-content;
  266.             align-self: center;
  267.             border: none;
  268.             text-align: left;
  269.         }
  270.  
  271.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(2) {
  272.             background: none;
  273.             position: relative;
  274.             left: 5px;
  275.             bottom: -3px;
  276.             grid-column: 2 / span 2;
  277.             grid-row: 1;
  278.             align-self: center;
  279.             border: none;
  280.             text-align: left;
  281.         }
  282.  
  283.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(3) {
  284.             background: none;
  285.             position: relative;
  286.             bottom: -28px;
  287.             left: 14px;
  288.             grid-column: 2 / span 2;
  289.             grid-row: 1;
  290.             align-self: center;
  291.             zoom: 0.6;
  292.             text-align: left;
  293.         }
  294.  
  295.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(4):not(:has([style="padding:5px 0px 5px"])) {
  296.             background: none;
  297.             grid-column: 1;
  298.             grid-row: 1;
  299.             border: none;
  300.             text-align: left;
  301.             align-self: center;
  302.             margin-bottom: -12px;
  303.             margin-right: -10px;
  304.         }
  305.  
  306.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(4):not(:has([style="padding:5px 0px 5px"])) > a img {
  307.             zoom: 0.8
  308.         }
  309.  
  310.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(4):not(:has([style="padding:5px 0px 5px"])) > br {
  311.             display: none
  312.         }
  313.  
  314.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(4):has([style="padding:5px 0px 5px"]) {
  315.             background: none;
  316.             border: none;
  317.             grid-column: 4;
  318.             grid-row: 1;
  319.             align-self: center;
  320.             padding: 0px;
  321.         }
  322.  
  323.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(4):has([style="padding:5px 0px 5px"]) > div {
  324.             text-align: right;
  325.         }
  326.  
  327.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(5) {
  328.             background: none;
  329.             border: none;
  330.             align-self: center;
  331.             grid-column: 4;
  332.             grid-row: 1;
  333.         }
  334.  
  335.         tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(5) > div {
  336.             text-align: right;
  337.         }
  338.  
  339.         td[id^=td_post_].alt1 {
  340.             width: auto !important;
  341.             max-width: 100% !important;
  342.             border: none !important;
  343.         }
  344.  
  345.     }`
  346.     let style = document.createElement("style");
  347.     style.innerText = css;
  348.     document.head.appendChild(style);
  349. })();