Mobile mobileread.com [WIP]

6.07.2024, 11:54:09

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

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        Mobile mobileread.com [WIP]
// @namespace   Violentmonkey Scripts
// @match       https://www.mobileread.com/*
// @grant       none
// @version     0.2.0
// @author      Julia
// @license     GPL3
// @description 6.07.2024, 11:54:09
// ==/UserScript==

(function() {
    'use strict';
    var headElement = document.head || document.getElementsByTagName('head')[0];
    var metaElement = document.createElement('meta');
    metaElement.name = 'viewport';
    metaElement.content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=yes';
    if (headElement) {
        headElement.appendChild(metaElement);
    } else {
        console.error('Cannot find element <head>.');
    }
    let css = `
    @media all and (max-width: 950px) and (orientation: portrait) {
        html {
            -webkit-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            text-size-adjust: none;
            margin: 0px !important;
            border: none !important
        }

        .page {
            width: 100% !important;
        }

        .page > div {
            padding: 0px 5px !important;
        }

        #container.tborder {
            width: 100% !important;
            margin: 0px !important;
        }
        #content {
            width: 100% !important;
        }

        #sidebar {
            width: 100% !important;
        }

        #container {
            padding: 0px !important;
            border: none !important
        }

        #container.tborder div.header_container table tbody tr {
            display: grid;
            width: 100% !important;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            grid-auto-rows: 20px;
            place-items: center;
        }

        .alt1Active table tbody tr td {
            display: table;
            table-layout: fixed;
            width: 100% !important;
        }

        .alt1Active table tbody tr td div > h3 {
            display: block;
            word-break: break-word;
            hyphens: auto;
        }

        .alt1Active table tbody tr td h3 + .smallfont {
            line-height: 2
        }

        .alt1Active table tbody tr td .smallfont:has(h4) {
            width: 100% !important;
        }

        .alt1Active table tbody tr td .smallfont h4 {
            width: 100% !important;
        }

        [id^="collapseobj_forumbit_"] tr td.alt2:has( .smallfont) table {
            text-wrap: wrap !important;
            width: auto !important;
            word-break: break-word;
        }

        [id^="collapseobj_forumbit_"] tr td.alt2:has( .smallfont) table div:not(:has(a[rel="nofollow"])) {
            display: grid;
            text-wrap: wrap !important;
            width: auto !important;
            word-break: break-word;
            hyphens: auto;
        }

        tbody tr td[id^="f"] + td.alt1 table {
            width: 120px !important;
            text-wrap: wrap !important;
            word-break: break-word;
        }

        .top_menu_right {
            top: 50px !important;
        }

        tr:has(.pagenav) {
            display: flex;
            flex-direction: column;
            grid-gap: 2px;
            align-items: center;
        }

        .pagenav tr {
            float: left;
        }

        .pagenav td.vbmenu_control:nth-child(1) {
            display: block;
        }

        .pagenav .alt1:has([rel="start"]) {
            float: left;
        }

        .pagenav .alt1:has([rel="prev"]) {
            float: left;
        }

        .pagenav .alt1:has([title^="Show results"]),
        .pagenav .alt2:has([title^="Showing results"]) {
            float: left;
        }

        .pagenav table {
            text-align: center;
            align-items: center;
        }

        #threadslist .alt2 div:has(.time) {
            table-layout: fixed;
            text-wrap: wrap !important;
            width: 100%;
            word-break: break-word;
        }

        [class="threadlink condensed"] {
            display: table;
            table-layout: fixed;
            text-wrap: wrap !important;
            width: 100%;
            word-break: break-word;
        }

        [id^="td_threadtitle_"].alt1 div > span.smallfont:has([alt="Multi-page thread"]) {
            padding: 5px 0px;
            display: block;
            text-wrap: wrap !important;
        }

        tr:has(.tcat + .vbmenu_control) {
            display: grid;
        }

        tr:has(.vbmenu_control) .tcat  {
            width: auto;
        }


        table[id^="post"].tborder tbody tr td.thead:has(a[id^="postcount"]) {
            position: absolute;
            right: 8px;
        }

        table[id^="post"].tborder tbody tr td.thead:has(a[id^="postcount"] + span[id^="reputationmenu"]) {
            position: revert;
        }

        .alt2:has(img[src^="https://www2.mobileread.com/i/mr/statusicon/user_"]) {
            background: none !important;
            border: none !important;
            margin: none !important;
            text-align: right !important;
        }

        tbody:has( > tr > td.alt2 > img[src*="user_offline.gif"]) tr[valign="top"] .alt2[width="175"] > div:nth-child(1)::after {
            content: "";
            position: relative;
            left: 2px;
            top: 5px;
            background-image: url('https://www2.mobileread.com/i/mr/statusicon/user_offline.gif');
            background-size: 24px 24px;
            display: inline-block;
            width: 24px;
            height: 24px !important;
            outline: 8px solid #6082ad;
            outline-offset: -5px;
            image-rendering: pixelated;
            clip-path: inset(0px round 1em);
            filter: brightness(0.5) saturate(0) contrast(100%);
            text-wrap: nowrap;
        }

        tbody:has( > tr > td.alt2 > img[src*="user_online.gif"]) tr[valign="top"] .alt2[width="175"] > div:nth-child(1)::after {
            content: "";
            position: relative;
            left: 2px;
            top: 5px;
            background-image: url('https://www2.mobileread.com/i/mr/statusicon/user_online.gif');
            background-size: 24px 24px;
            display: inline-block;
            width: 24px;
            height: 24px !important;
            outline: 8px solid #6082ad;
            outline-offset: -5px;
            image-rendering: pixelated;
            clip-path: inset(0px round 1em);
        }

        #posts .inlineimg[src^="https://www2.mobileread.com/i/mr/statusicon/user_"] {
            display: none;
        }

        tr[valign="top"]:not(:has(.pagenav)),
        tr[valign="top"]:not(:has(.pagenav)) + tr {
            display: grid;
            width: 100%;
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] {
            display: grid;
            width: auto !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: 100% !important;
            border: none !important;
            grid-template-columns: fit-content(100%) fit-content(100%) auto 150px;
            grid-template-rows: max-content;
            padding: 0px !important;
            margin: 0px !important;
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(1) {
            background: none;
            position: relative;
            left: 5px;
            bottom: 18px;
            grid-column: 2 / span 2;
            grid-row: 1;
            height: fit-content;
            align-self: center;
            border: none;
            text-align: left;
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(2) {
            background: none;
            position: relative;
            left: 5px;
            bottom: -3px;
            grid-column: 2 / span 2;
            grid-row: 1;
            align-self: center;
            border: none;
            text-align: left;
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(3) {
            background: none;
            position: relative;
            bottom: -28px;
            left: 14px;
            grid-column: 2 / span 2;
            grid-row: 1;
            align-self: center;
            zoom: 0.6;
            text-align: left;
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(4):not(:has([style="padding:5px 0px 5px"])) {
            background: none;
            grid-column: 1;
            grid-row: 1;
            border: none;
            text-align: left;
            align-self: center;
            margin-bottom: -12px;
            margin-right: -10px;
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(4):not(:has([style="padding:5px 0px 5px"])) > a img {
            zoom: 0.8
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(4):not(:has([style="padding:5px 0px 5px"])) > br {
            display: none
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(4):has([style="padding:5px 0px 5px"]) {
            background: none;
            border: none;
            grid-column: 4;
            grid-row: 1;
            align-self: center;
            padding: 0px;
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(4):has([style="padding:5px 0px 5px"]) > div {
            text-align: right;
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(5) {
            background: none;
            border: none;
            align-self: center;
            grid-column: 4;
            grid-row: 1;
        }

        tr[valign="top"]:not(:has(.pagenav)) .alt2[width="175"] > div:nth-child(5) > div {
            text-align: right;
        }

        td[id^=td_post_].alt1 {
            width: auto !important;
            max-width: 100% !important;
            border: none !important;
        }

    }`
    let style = document.createElement("style");
    style.innerText = css;
    document.head.appendChild(style);
})();