CSS style to optimize old.reddit.com on mobile devices
当前为
// ==UserScript==
// @match https://old.reddit.com/*
// @match https://www.redditmedia.com/mediaembed/*
// @exclude-match https://old.reddit.com/chat/*
// @name Reddit Old Mobile 📱
// @namespace old.reddit.com
// @description CSS style to optimize old.reddit.com on mobile devices
// @icon https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
// @license MIT
// @grant GM_addStyle
// @version 1.0
// ==/UserScript==
var CS = `
video::-webkit-media-controls-panel {background: none; opacity:.5}
video::-webkit-media-controls-overlay-play-button {opacity: 0;}
.expando-button {float:right}
a[href="#"] {display: none;}
#search {margin-left:20px;margin-right:20px}
`;
GM_addStyle(CS);
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,
/* Expanded Media UNDER the post */
.entry {overflow:visible;}
/* Centering Expanded 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}
/* Bigger Action Buttons */
.link .flat-list {font-size:large; opacity:1; text-align:center}
.subreddit {font-size: large;}
/* Border between Posts */
.link {border-bottom:2px solid black}
.link { padding-left: 0;}
/* Upvote Scores On Thumbnails */
.midcol {background-color:rgba(0, 0, 0, 0.5)}
.link .score {color:white}
.comments-page .link .score {color:black}
.comments-page .midcol {background:none}
.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;}
/* Centering this too for aesthetics */
.tagline {text-align: center; margin-bottom: 3px;}
/* Comment Page */
.panestack-title { text-align:center}
.commentarea .menuarea {text-align:center}
/* Subreddit Description */
.titlebox .usertext-body {display:none}
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: 101;
position: absolute;
top: 0;
left: 0;
margin: var(--header-height) 0 0 0;
width: 0;
overflow-x: hidden;
}
.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;
}
/* .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;
}
`);
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];
}
(function() {
'use strict';
////////////////////////// Move Searchbar //////////////////////////////////////////////////
// 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);
}
///////////////////////////////Subreddit Infos under Searchbar //////////////////////////////
// Check if the current URL matches the exclusion pattern
var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
if (!excludedPattern.test(window.location.href)) {
// Find the title box element
var titleBox = document.querySelector('.titlebox');
// Find the desired new location
var newLocation = document.querySelector('#sr-header-area');
// Remove the title box from its current location
titleBox.parentNode.removeChild(titleBox);
// Append the title box to the new location
newLocation.appendChild(titleBox);
}
})();