☰

Reddit Old Mobile 📱

Mobile-friendly design for Reddit Old

安装此脚本?
作者推荐脚本

您可能也喜欢Reddit CSS。

安装此脚本 
  1. // ==UserScript==
  2. // @name          Reddit Old Mobile 📱
  3. // @description   Mobile-friendly design for Reddit Old
  4. // @author        Agreasyforkuser
  5. // @match         https://old.reddit.com/*
  6. // @match         https://www.reddit.com/*
  7. // @match         https://www.redditmedia.com/mediaembed/*
  8. // @exclude       https://new.reddit.com/*
  9. // @exclude-match https://old.reddit.com/chat/*
  10. // @version       6.0
  11. // @license       MIT
  12. // @icon          https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
  13. // @namespace     tampermonkey
  14. // ==/UserScript==
  15.  
  16. if(window.location.hostname === 'old.reddit.com'){
  17.     {
  18.         const metaViewportElement = document.createElement('meta');
  19.         metaViewportElement.setAttribute('name', 'viewport');
  20.         metaViewportElement.setAttribute('content', 'width=device-width, initial-scale=1');
  21.         document.head.appendChild(metaViewportElement);
  22.     }
  23.     {
  24.         const styles = new CSSStyleSheet();
  25.         // language=CSS
  26.         styles.replaceSync(`html,
  27.              
  28.                body                 {background: var(--theme-color-new) !important}
  29.                body > .content      {background: white !important}
  30.  
  31.                                      #search                    {margin-left: 5px; margin-right: 5px}
  32.                                      #search input[type="text"] {border-color: var(--theme-color-new) !important}
  33.                                      #search input[type="text"] {border-radius: 15px}
  34.                .combined-search-page #search input[type="text"] {border-color: black !important}
  35.  
  36.                /* Top Header */
  37.                #header                     {border: none}
  38.                #header-bottom-right        {border: none; position: initial !important}
  39.                #header-bottom-left         {padding-left: 0 !important}
  40.                /* hide scrollbar */
  41.                #sr-header-area .sr-list    {overflow: hidden !important}
  42.  
  43.  
  44.  
  45.                 /* Search and fixes for search page */
  46.                                       
  47.                 .combined-search-page .searchpane                {padding-left: 0px}
  48.                                       .search-result-group       {padding-left: 10px; padding-right: 10px}
  49.                 .combined-search-page .search-submit-button      {margin-left: 0px !important}
  50.                 .combined-search-page .subreddit-icon            {display: none}
  51.                 .combined-search-page #sr-header-area            {display: none}
  52.  
  53.                 /* Expanded Media UNDER the post */
  54.                .entry {overflow:visible;}
  55.  
  56.                /* Centering Expanded Video Posts */
  57.                .thing .media-preview-content, .thing .media-preview-content video {max-width: 100%; height: auto !important}
  58.  
  59.                /* Centered Action Buttons */
  60.                               .link .flat-list {text-align:center}
  61.                /* Centering this too for aesthetics */
  62.                               .link .tagline {text-align: center}
  63.                               .link .tagline {margin-bottom:  10px; margin-top:  10px}
  64.                .comments-page .link .tagline {margin-bottom: unset; margin-top: unset}
  65.  
  66.                /* Border between Posts */
  67.                               .link          {border-bottom:1px solid black}
  68.                               .link          {padding-left: 0}
  69.                  .linklisting .md            {margin-bottom: 0px}
  70.  
  71.  
  72.                /* Upvote Scores On Thumbnails */
  73.                                     .midcol {margin: 0}
  74.                               .link .midcol {background-color:rgba(0, 0, 0, 0.6); width:auto !important}
  75.                               .link .midcol {position: absolute; z-index:999; font-size: x-small}
  76.                .comments-page .link .midcol {background: none}
  77.                               .link .arrow  {filter: brightness(100)}
  78.                .comments-page .link .arrow  {filter: none !important}
  79.                .arrow.upmod, .arrow.downmod {filter: none !important}
  80.                               .link .score  {color: white}
  81.                .comments-page .link .score  {color: #c6c6c6}
  82.                .comments-page .link .title  {margin-left: 5px; margin-right: 0}
  83.  
  84.  
  85.  
  86.                /* No Overlapping with Text-Only-Posts */
  87.                .link .title                  {text-align: center;font-size:large; margin-bottom: 1px; margin-right: 0 !important}
  88.                .link .reddit-profile-picture {display:none !important}
  89.  
  90.  
  91.                /* Comment Page */
  92.                .comments-page #sr-header-area {display:none}
  93.                .panestack-title {text-align:center}
  94.                               #noresults                    {margin-right: 0px !important; text-align: center}
  95.                .comments-page .thumbnail                    {display:none !important}
  96.                               .commentarea .menuarea        {display: flow-root !important; text-align: center}
  97.                .comments-page .menuarea .spacer             {margin-right: 0}
  98.                .comments-page .dropdown.lightdrop .selected {padding-right: 0}
  99.                /* bigger posts, title gets the whole page width */
  100.                /* firefox */
  101.                .comments-page .entry                   {width: -moz-available !important}
  102.                /* chromium */
  103.                .comments-page .entry                   {width: -webkit-fill-available !important}
  104.                .comments-page .expando-button.expanded {opacity: 0}
  105.                .comments-page .expando-button          {margin: 0}
  106.  
  107.  
  108.                /* error messages */
  109.                .comments-page #noresults                    {display: none}
  110.                #noresults                    {margin-right: 0px !important; text-align: center}
  111.  
  112.  
  113.                 /* gallery navbar */
  114.                .media-gallery .gallery-nav-back {padding:0}
  115.  
  116.                /* Navbar */
  117.                .nav-buttons         {width:98%;border-top-right-radius: 50px !important; border-top-left-radius: 50px !important}
  118.                .nextprev a          {display:inline-block;width:49%; padding:0 !important}
  119.                .nextprev .separator {display:none}
  120.  
  121.  
  122.  
  123.                /* Give the page a "mobile"-feel */
  124.                .pagename                                             {border-radius: 5px}
  125.                .tabmenu li a                                         {border-radius: 5px; padding: 0}
  126.                #header img, .subreddit-icon, .reddit-profile-picture {border-radius: 5px}
  127.                .entry .buttons li                                    {border-radius: 5px !important}
  128.                .expando-button.selftext                              {border-radius: 5px !important}
  129.  
  130.  
  131.  
  132.                .subscription-box:not(:hover) {opacity: 1}
  133.  
  134.                 body {
  135.                     overflow-x: hidden;
  136.                 }
  137.                 .listing-chooser,
  138.                 #redesign-beta-optin-btn {
  139.                     display: none;
  140.                 }
  141.                 #sr-header-area {
  142.                     height: auto;
  143.                 }
  144.                 #sr-header-area .width-clip {
  145.                     display: flex;
  146.                 }
  147.                 #sr-header-area .width-clip,
  148.                 #sr-header-area .sr-list,
  149.                 #sr-more-link,
  150.                 #header-bottom-right {position: inherit;}
  151.                 #sr-header-area .sr-list {
  152.                     overflow: auto;
  153.                 }
  154.                 .tabmenu {
  155.                     max-width: 100%;
  156.                     overflow: auto;
  157.                 }
  158.                 .side {
  159.                     z-index: 1001;
  160.                     position: absolute;
  161.                     top: 0;
  162.                     left: 0;
  163.                     margin: var(--header-height) 0 0 0;
  164.                     width: 0;
  165.                     overflow-x: hidden;
  166.                 }
  167.  
  168.                 /* fix for custom subreddit styles */
  169.                 .side         {opacity:0}
  170.                 .side--active {opacity:1}
  171.  
  172.                 .side--active {
  173.                     width: 100%;
  174.                 }
  175.                 .side--active ~ .content {
  176.                     height: var(--sidebar-height);
  177.                 }
  178.                 .content {
  179.                     margin: 0 !important;
  180.                     width: 100% !important;
  181.                     overflow-x: auto;
  182.                     overflow-y: hidden;
  183.                 }
  184.                 .comments-page #siteTable .thing {
  185.                     display: grid;
  186.                     grid-template-columns: auto 1fr;
  187.                     grid-template-areas:
  188.                         'score thumbnail'
  189.                         'main  main';
  190.                     grid-gap: 5px;
  191.                 }
  192.                 .comments-page #siteTable .thing:not(:has(.thumbnail)) {
  193.                     grid-template-areas:
  194.                         'score main'
  195.                         '.     main';
  196.                 }
  197.                 .comments-page #siteTable .thing .midcol {
  198.                     grid-area: score;
  199.                 }
  200.                 .comments-page #siteTable .thing .thumbnail {
  201.                     grid-area: thumbnail;
  202.                 }
  203.                 .comments-page #siteTable .thing .entry {
  204.                     grid-area: main;
  205.                 }
  206.                 .comments-page #siteTable .thing .media-embed {
  207.                     width: 100%;
  208.                     height: auto;
  209.                 }
  210.                 .infobar,
  211.                 .searchpane,
  212.                 .wiki-page .wiki-page-content,
  213.                 .panestack-title,
  214.                 .commentarea .menuarea {
  215.                     margin: 5px;
  216.                 }
  217.                 /* comment this out because of centering */
  218.                 /*.commentarea .menuarea {display: flex}*/
  219.                 #search input[type=text],
  220.                 .roundfield,
  221.                 .formtabs-content {
  222.                     width: 100%;
  223.                 }
  224.                 .subreddit .midcol {
  225.                     width: auto !important;
  226.                 }
  227.                 .roundfield,
  228.                 .roundfield * {
  229.                     box-sizing: border-box;
  230.                 }
  231.                 .roundfield input,
  232.                 .roundfield textarea,
  233.                 .roundfield select {
  234.                     max-width: 100%;
  235.                 }
  236.                 .usertext,
  237.                 .menuarea {
  238.                     overflow: auto;
  239.                 }
  240.                 .combined-search-page #search {
  241.                     padding: 0;
  242.                     display: grid;
  243.                     grid-template-columns: 1fr auto;
  244.                     grid-template-areas:
  245.                         'query             submit'
  246.                         'advanced          advanced'
  247.                         'restrictSubreddit restrictSubreddit'
  248.                         'nsfw              nsfw';
  249.                 }
  250.                 .combined-search-page #search input[type=text] {
  251.                     grid-area: query;
  252.                     min-width: auto;
  253.                 }
  254.                 .combined-search-page #search .search-submit-button {
  255.                     grid-area: submit;
  256.                 }
  257.                 .combined-search-page #search label:has([name="restrict_sr"]) {
  258.                     grid-area: restrictSubreddit;
  259.                 }
  260.                 .combined-search-page #search label:has([name="include_over_18"]) {
  261.                     grid-area: nsfw;
  262.                 }
  263.                 .combined-search-page #search p:has(#search_showmore) {
  264.                     grid-area: advanced;
  265.                 }
  266.                 .search-result-group {
  267.                     width: 100% !important;
  268.                     min-width: auto !important;
  269.                     box-sizing: border-box;
  270.                 }
  271.                 .search-result-subreddit .search-result-meta {
  272.                     padding: 0.5rem 0;
  273.                     display: flex;
  274.                     flex-direction: column;
  275.                     row-gap: 0.5rem;
  276.                 }
  277.                 .search-result-subreddit .search-result-meta .stamp {
  278.                     align-self: flex-start;
  279.                 }
  280.                 .search-link,
  281.                 .search-result-body a {
  282.                     overflow-wrap: anywhere;
  283.                     white-space: normal;
  284.                 }
  285.             `);
  286.         document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];
  287.     }
  288.  
  289.     {
  290.         const sidebarElement = document.querySelector('.side');
  291.         if(sidebarElement){
  292.             const
  293.             menuElement = document.querySelector('.tabmenu'),
  294.                   sidebarButtonContainerElement = document.createElement('li'),
  295.                   sidebarButtonElement = document.createElement('a');
  296.             sidebarButtonElement.textContent = 'sidebar';
  297.             sidebarButtonElement.setAttribute('href', '#');
  298.             sidebarButtonElement.addEventListener(
  299.                 'click',
  300.                 event => {
  301.                     event.preventDefault();
  302.                     const extraHeaderHeight = document.querySelector('.submit-page')
  303.                     ? window.$('.content > h1').outerHeight(true) + window.$(menuElement).outerHeight(true) + 10
  304.                     : 0;
  305.                     document.documentElement.style.setProperty(
  306.                         '--header-height',
  307.                         `${$('#header').outerHeight(true) + extraHeaderHeight}px`
  308.                         // this doesn't work on Firefox browsers:
  309.                         //`${window.$('#header').outerHeight(true) + extraHeaderHeight}px`
  310.                     );
  311.                     sidebarButtonContainerElement.classList.toggle(
  312.                         'selected',
  313.                         sidebarElement.classList.toggle('side--active')
  314.                     );
  315.                     document.documentElement.style.setProperty(
  316.                         '--sidebar-height',
  317.                         `${sidebarElement.offsetHeight + extraHeaderHeight}px`
  318.                     );
  319.                 }
  320.             );
  321.             sidebarButtonContainerElement.appendChild(sidebarButtonElement);
  322.             menuElement.appendChild(sidebarButtonContainerElement);
  323.         }
  324.     }
  325. }
  326. else if(window.location.hostname === 'www.redditmedia.com'){
  327.     const styles = new CSSStyleSheet();
  328.     // language=CSS
  329.     styles.replaceSync(`
  330.             .embedly-embed {
  331.                 width: 100%;
  332.             }
  333.         `);
  334.     document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];
  335. }
  336.  
  337. ////////////////////////// Move Searchbar, make some space on the Comments Page//////////////////////////////////////////////////
  338. var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
  339. if (!excludedPattern.test(window.location.href) ) {
  340.     // Get the search form element
  341.  
  342.     var searchForm = document.getElementById('search');
  343.  
  344.     // Get the tab menu element
  345.     var tabMenu = document.querySelector('.tabmenu');
  346.  
  347.     // Move the search form to the right of the tab menu
  348.     if (searchForm && tabMenu) {
  349.         tabMenu.parentNode.insertBefore(searchForm, tabMenu.nextSibling);
  350.     }
  351. };
  352. ///////////////// remove "view more:" text from navbar //////////////////////////////////
  353. var nextPrevSpan = document.querySelector("span.nextprev");
  354. if (nextPrevSpan){nextPrevSpan.firstChild.nodeValue = ""}

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址