Reddit Old Mobile 📱

Greasy Fork is available in English.
Reddit Old Mobile 📱

Mobile-friendly design for Reddit Old
Script recomendado por el autor
Puede que también te guste Reddit CSS.
Pregunta tus dudas, ponle nota o notifica una posible infracción de las normas.
// ==UserScript==
// @name          Reddit Old Mobile 📱
// @description   Mobile-friendly design for Reddit Old
// @author        Agreasyforkuser
// @match         https://old.reddit.com/*
// @match         https://www.reddit.com/*
// @match         https://www.redditmedia.com/mediaembed/*
// @exclude       https://new.reddit.com/*
// @exclude-match https://old.reddit.com/chat/*
// @version       5.9
// @license       MIT
// @icon          https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
// @namespace     namespace example
// ==/UserScript==

if(window.location.hostname === 'old.reddit.com'){
    {
        const metaViewportElement = document.createElement('meta');
        metaViewportElement.setAttribute('name', 'viewport');
        metaViewportElement.setAttribute('content', 'width=device-width, initial-scale=1');
        document.head.appendChild(metaViewportElement);
    }
    {
        const styles = new CSSStyleSheet();
        // language=CSS
        styles.replaceSync(`html,
             
               :root {
                      --theme-color: #cee3f8;
                      --selected-tab-color:#ff4500;
                      --tab-color: #336699;
                      --content-background-color: white;
               }


               /* Color Preferences */
               body                                 {background: var(--theme-color) !important}
               body > .content                      {background: var(--content-background-color) !important}
               .comments-page .thing.comment        {background: var(--content-background-color) !important}
               .comments-page .entry .title a.title {color: black !important}
               .comments-page .entry .md p          {color: black !important}
               .comments-page .comment .md          {color: black !important}
               #header                              {background-color: var(--theme-color) !important}
               #sr-header-area                      {background-color: var(--theme-color) !important}
               #sr-more-link, #sr-header-area a     {background-color: var(--theme-color) !important}
               #sr-header-area                      {color: var(--tab-color) !important}
               #sr-more-link, #sr-header-area a     {color: var(--tab-color) !important}
               .dropdown.srdrop .selected           {color: var(--tab-color) !important}
               #header-bottom-right                 {background: var(--theme-color) !important}
               #header-bottom-right:hover           {background: var(--theme-color) !important}
               #header-bottom-right a:not(.message-count), .userkarma   {color: var(--tab-color) !important}
               #header-bottom-right .user           {color: var(--tab-color) !important}
               #search input[type="text"]           {border-color: var(--theme-color); background-color: var(--content-background-color) !important}
               #header .tabmenu li a                {color: var(--tab-color) !important; background-color: var(--theme-color) !important}
               #header .tabmenu li a:hover          {color: black !important; background-color: var(--content-background-color) !important}
               #header .tabmenu li.selected a       {color: var(--selected-tab-color) !important; background-color: var(--content-background-color) !important}
               .reddit-video-player-root            {background: black !important}
               .title                               {color:black !important}
               .media-gallery .gallery-nav-bar      {color:var(--tab-color) !important}
               .media-gallery .gallery-nav-prev,
               .media-gallery .gallery-nav-next,
               .media-gallery .gallery-nav-back     {background: var(--theme-color); border: 1px solid var(--tab-color)}
               .nav-buttons                         {border-color: var(--theme-color) !important; background-color: var(--theme-color) !important}
               .nextprev a                          {border-color: var(--theme-color) !important; color: var(--tab-color) !important}
               .nextprev .separator                 {border-left: 1px solid var(--tab-color) !important}



               /* Top Header */
               #header                     {border: none}
               #header-bottom-right        {border: none; position: initial !important}
               #header-bottom-left         {padding-left: 0 !important}
               /* hide scrollbar */
               #sr-header-area .sr-list    {overflow: hidden !important}




                /* Search and fixes for search page */
                                      #search input[type="text"] {border-radius: 15px}
                                      #search                    {margin-left: 5px; margin-right: 5px}
                .combined-search-page #search input[type="text"] {border: 1px solid black}
                .combined-search-page .searchpane                {padding-left: 0px}
                                      .search-result-group       {padding-left: 10px; padding-right: 10px}
                .combined-search-page .search-submit-button      {margin-left: 0px !important}
                .combined-search-page .subreddit-icon            {display: none}
                .combined-search-page #sr-header-area            {display: none}

                /* Expanded Media UNDER the post */
               .entry {overflow:visible;}

               /* Centering Expanded Video Posts */
               .thing .media-preview-content, .thing .media-preview-content video {max-width: 100%; height: auto !important}

               /* Centered Action Buttons */
                              .link .flat-list {text-align:center}
               /* Centering this too for aesthetics */
                              .link .tagline {text-align: center}
                              .link .tagline {margin-bottom:  10px; margin-top:  10px}
               .comments-page .link .tagline {margin-bottom: unset; margin-top: unset}

               /* Border between Posts */
                              .link          {border-bottom:1px solid black}
                              .link          {padding-left: 0}
                 .linklisting .md            {margin-bottom: 0px}


               /* Upvote Scores On Thumbnails */
                                    .midcol {margin: 0}
                              .link .midcol {background-color:rgba(0, 0, 0, 0.6); width:auto !important; border-radius:5px}
                              .link .midcol {position: absolute; z-index:999; font-size: x-small}
               .comments-page .link .midcol {background: none}
                              .link .arrow  {filter: brightness(100)}
               .comments-page .link .arrow  {filter: none !important}
               .arrow.upmod, .arrow.downmod {filter: none !important}
                              .link .score  {color: white}
               .comments-page .link .score  {color: #c6c6c6}
               .comments-page .link .title {margin-left: 5px; margin-right: 0}



               /* No Overlapping with Text-Only-Posts */
               .link .title                  {text-align: center;font-size:large; margin-bottom: 1px; margin-right: 0 !important}
               .link .reddit-profile-picture {display:none !important}


               /* Comment Page */
               .panestack-title {text-align:center}
               .comments-page #noresults                    {display: none}
               /* fix error messages globally */
                              #noresults                    {margin-right: 0px !important; text-align: center}
               .comments-page .thumbnail                    {display:none !important}
                              .commentarea .menuarea        {display: flow-root !important; text-align: center}
               .comments-page .menuarea .spacer             {margin-right: 0}
               .comments-page .dropdown.lightdrop .selected {padding-right: 0}
               /* bigger posts, title gets the whole page width */
               /* firefox */
               .comments-page .entry                   {width: -moz-available !important}
               /* chromium */
               .comments-page .entry                   {width: -webkit-fill-available !important}
               .comments-page .expando-button.expanded {opacity: 0}
               .comments-page .expando-button          {margin: 0}




                /* gallery navbar */
               .media-gallery .gallery-nav-back {padding:0}

               /* Navbar */
               .nav-buttons         {width:98%;border-top-right-radius: 50px !important; border-top-left-radius: 50px !important}
               .nextprev a          {display:inline-block;width:49%; padding:0 !important}
               .nextprev .separator {display:none}



               /* Give the page a "mobile"-feel */
               body > .content                                       {border-radius: 10px}
               .pagename                                             {border-radius: 5px}
               .tabmenu li a                                         {border-radius: 5px; padding: 0}
               #header img, .subreddit-icon, .reddit-profile-picture {border-radius: 5px}
               .entry .buttons li                                    {border-radius: 5px !important}
               .expando-button.selftext                              {border-radius: 5px !important}



               .subscription-box:not(:hover) {opacity: 1}

                body {
                    overflow-x: hidden;
                }
                .listing-chooser,
                #redesign-beta-optin-btn {
                    display: none;
                }
                #sr-header-area {
                    height: auto;
                }
                #sr-header-area .width-clip {
                    display: flex;
                }
                #sr-header-area .width-clip,
                #sr-header-area .sr-list,
                #sr-more-link,
                #header-bottom-right {position: inherit;}
                #sr-header-area .sr-list {
                    overflow: auto;
                }
                .tabmenu {
                    max-width: 100%;
                    overflow: auto;
                }
                .side {
                    z-index: 1001;
                    position: absolute;
                    top: 0;
                    left: 0;
                    margin: var(--header-height) 0 0 0;
                    width: 0;
                    overflow-x: hidden;
                }

                /* fix for custom subreddit styles */
                .side         {opacity:0}
                .side--active {opacity:1}

                .side--active {
                    width: 100%;
                }
                .side--active ~ .content {
                    height: var(--sidebar-height);
                }
                .content {
                    margin: 0 !important;
                    width: 100% !important;
                    overflow-x: auto;
                    overflow-y: hidden;
                }
                .comments-page #siteTable .thing {
                    display: grid;
                    grid-template-columns: auto 1fr;
                    grid-template-areas:
                        'score thumbnail'
                        'main  main';
                    grid-gap: 5px;
                }
                .comments-page #siteTable .thing:not(:has(.thumbnail)) {
                    grid-template-areas:
                        'score main'
                        '.     main';
                }
                .comments-page #siteTable .thing .midcol {
                    grid-area: score;
                }
                .comments-page #siteTable .thing .thumbnail {
                    grid-area: thumbnail;
                }
                .comments-page #siteTable .thing .entry {
                    grid-area: main;
                }
                .comments-page #siteTable .thing .media-embed {
                    width: 100%;
                    height: auto;
                }
                .infobar,
                .searchpane,
                .wiki-page .wiki-page-content,
                .panestack-title,
                .commentarea .menuarea {
                    margin: 5px;
                }
                /* comment this out because of centering */
                /*.commentarea .menuarea {display: flex}*/
                #search input[type=text],
                .roundfield,
                .formtabs-content {
                    width: 100%;
                }
                .subreddit .midcol {
                    width: auto !important;
                }
                .roundfield,
                .roundfield * {
                    box-sizing: border-box;
                }
                .roundfield input,
                .roundfield textarea,
                .roundfield select {
                    max-width: 100%;
                }
                .usertext,
                .menuarea {
                    overflow: auto;
                }
                .combined-search-page #search {
                    padding: 0;
                    display: grid;
                    grid-template-columns: 1fr auto;
                    grid-template-areas:
                        'query             submit'
                        'advanced          advanced'
                        'restrictSubreddit restrictSubreddit'
                        'nsfw              nsfw';
                }
                .combined-search-page #search input[type=text] {
                    grid-area: query;
                    min-width: auto;
                }
                .combined-search-page #search .search-submit-button {
                    grid-area: submit;
                }
                .combined-search-page #search label:has([name="restrict_sr"]) {
                    grid-area: restrictSubreddit;
                }
                .combined-search-page #search label:has([name="include_over_18"]) {
                    grid-area: nsfw;
                }
                .combined-search-page #search p:has(#search_showmore) {
                    grid-area: advanced;
                }
                .search-result-group {
                    width: 100% !important;
                    min-width: auto !important;
                    box-sizing: border-box;
                }
                .search-result-subreddit .search-result-meta {
                    padding: 0.5rem 0;
                    display: flex;
                    flex-direction: column;
                    row-gap: 0.5rem;
                }
                .search-result-subreddit .search-result-meta .stamp {
                    align-self: flex-start;
                }
                .search-link,
                .search-result-body a {
                    overflow-wrap: anywhere;
                    white-space: normal;
                }
            `);
        document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];
    }

    {
        const sidebarElement = document.querySelector('.side');
        if(sidebarElement){
            const
            menuElement = document.querySelector('.tabmenu'),
                  sidebarButtonContainerElement = document.createElement('li'),
                  sidebarButtonElement = document.createElement('a');
            sidebarButtonElement.textContent = 'sidebar';
            sidebarButtonElement.setAttribute('href', '#');
            sidebarButtonElement.addEventListener(
                'click',
                event => {
                    event.preventDefault();
                    const extraHeaderHeight = document.querySelector('.submit-page')
                    ? window.$('.content > h1').outerHeight(true) + window.$(menuElement).outerHeight(true) + 10
                    : 0;
                    document.documentElement.style.setProperty(
                        '--header-height',
                        `${$('#header').outerHeight(true) + extraHeaderHeight}px`
                        // this doesn't work on Firefox browsers:
                        //`${window.$('#header').outerHeight(true) + extraHeaderHeight}px`
                    );
                    sidebarButtonContainerElement.classList.toggle(
                        'selected',
                        sidebarElement.classList.toggle('side--active')
                    );
                    document.documentElement.style.setProperty(
                        '--sidebar-height',
                        `${sidebarElement.offsetHeight + extraHeaderHeight}px`
                    );
                }
            );
            sidebarButtonContainerElement.appendChild(sidebarButtonElement);
            menuElement.appendChild(sidebarButtonContainerElement);
        }
    }
}
else if(window.location.hostname === 'www.redditmedia.com'){
    const styles = new CSSStyleSheet();
    // language=CSS
    styles.replaceSync(`
            .embedly-embed {
                width: 100%;
            }
        `);
    document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];
}

////////////////////////// Move Searchbar, make some space on the Comments Page//////////////////////////////////////////////////
var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
if (!excludedPattern.test(window.location.href) ) {
    // Get the search form element

    var searchForm = document.getElementById('search');

    // Get the tab menu element
    var tabMenu = document.querySelector('.tabmenu');

    // Move the search form to the right of the tab menu
    if (searchForm && tabMenu) {
        tabMenu.parentNode.insertBefore(searchForm, tabMenu.nextSibling);
    }
};
///////////////// remove "view more:" text from navbar //////////////////////////////////
var nextPrevSpan = document.querySelector("span.nextprev");
if (nextPrevSpan){nextPrevSpan.firstChild.nodeValue = ""}