Mobile-friendly design for Reddit Old
当前为
// ==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.3
// @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,
.subscription-box:not(:hover) {opacity: 1}
/* Fix for search page */
.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}
#search {border-bottom: 2px solid rgb(206, 227, 248) !important}
.combined-search-page .search-submit-button {margin-left: 0px !important}
.combined-search-page #header-bottom-right {display: none}
.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 */
/* .expando {display: flex;flex-direction: column; align-items :center;} */
.thing .media-preview-content, .thing .media-preview-content video {max-width:100%;height:auto !important}
/* add some black */
body {background: black !important}
body > .content {background: white !important}
.comments-page .thing.comment {background: white !important}
.comments-page .entry .title a.title {color: black !important}
.comments-page .comment .md {color: black !important}
#header {background-color: black !important}
.tabmenu li.selected a {color: black !important; background-color: white !important}
.tabmenu li a {color: white !important; background-color: black !important; opacity: 1 !important}
.tabmenu li a:hover {color: black !important; background-color: white !important}
.reddit-video-player-root {background: black !important}
#search {border-bottom: none !important}
#search input[type="submit"] {filter: brightness(0)}
.title {color:black !important}
/* Bigger Action Buttons, Spacing */
.link .flat-list {font-size:large; text-align:center; margin-top:10px}
.subreddit {font-size: large;}
/* Border between Posts */
.link {border-bottom:1px solid black;}
.link { padding-left: 0;}
.linklisting .md {margin-bottom: 0px}
/* Upvote Scores On Thumbnails */
.link .midcol {background-color:rgba(0, 0, 0, 0.6); width:auto !important; border-radius:5px}
.link .arrow {filter: brightness(100)}
.comments-page .link .arrow {filter: brightness(0)}
.link .score {color:white}
.comments-page .link .score {color:black}
.comments-page .midcol {background:none}
.comments-page .title {margin-left: 5px; margin-right: 0}
.midcol {margin: 0}
.link .midcol { position:absolute; z-index:999;font-size: x-small;}
/* No Overlapping with Text-Only-Posts */
.link .title {text-align: center;font-size:large; margin-bottom: 1px;}
.link .reddit-profile-picture {display:none !important}
/* Centering this too for aesthetics */
.tagline {text-align: center; margin-bottom: 3px;}
/* Comment Page */
.panestack-title { text-align:center}
.commentarea .menuarea {text-align:center}
#noresults {margin-right: 0px;text-align: center; opacity: 0.7}
.comments-page .thumbnail {display:none !important}
.comments-page #header-bottom-right:not(:hover) {display:none}
.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}
/* Top Header */
/* #header { border-bottom: 3px solid #cee3f8; border-bottom-right-radius: 15px; border-right: 1px solid #cee3f8; border-left: 1px solid #cee3f8; border-bottom-left-radius: 15px;} */
#header {border: none}
#header-bottom-right {position: initial !important}
#sr-header-area:not(:hover) {opacity:0 !important}
.pagename {border-radius: 5px}
.tabmenu li.selected a {border-radius: 5px}
.tabmenu li a:hover {border-radius: 5px}
#search input[type="text"] {border-radius: 15px}
#search {margin-left: 5px; margin-right: 5px}
#header img, .subreddit-icon, .reddit-profile-picture {border-radius: 5px}
.entry .buttons li {border-radius: 5px !important}
.tabmenu li a {padding: 0}
.expando-button.selftext {border-radius:5px !important}
.link.last-clicked {border-radius:5px !important}
body > .content {border-radius: 10px}
.mobile-web-redirect-bar {display:none !important}
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',
`${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);
}
}