A clean responsive mobile interface for old Reddit that neutralizes subreddit themes.
// ==UserScript==
// @name Old Reddit Mobile Layout
// @namespace https://old.reddit.com/
// @version 1.4.1
// @description A clean responsive mobile interface for old Reddit that neutralizes subreddit themes.
// @match https://old.reddit.com/*
// @match http://old.reddit.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @license MIT
// @grant none
// @run-at document-start
// @noframes
// ==/UserScript==
(function () {
'use strict';
const STYLE_ID = 'old-reddit-mobile-layout';
const BOOT_STYLE_ID = 'old-reddit-mobile-boot-guard';
const BOOT_CLASS = 'old-reddit-mobile-booting';
const VIEWPORT_CONTENT = 'width=device-width, initial-scale=1, viewport-fit=cover';
const SUBREDDIT_STYLESHEET_TITLE = 'applied_subreddit_stylesheet';
/* Cover Reddit before its body can paint. This intentionally runs before
* the large stylesheet string below is assigned or any DOM is inspected. */
document.documentElement.classList.add(BOOT_CLASS);
const bootStyle = document.createElement('style');
bootStyle.id = BOOT_STYLE_ID;
bootStyle.textContent = `
html.${BOOT_CLASS} {
background: #f4f5f7 !important;
}
html.${BOOT_CLASS} body {
visibility: hidden !important;
opacity: 0 !important;
}
html.${BOOT_CLASS}::before {
position: fixed !important;
z-index: 2147483647 !important;
inset: 0 !important;
display: block !important;
content: "" !important;
background: #f4f5f7 !important;
}
@media screen and (max-width: 700px) {
html.${BOOT_CLASS}::after {
position: fixed !important;
z-index: 2147483647 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
display: block !important;
height: 58px !important;
content: "" !important;
background: #16243b !important;
}
}
`;
document.documentElement.appendChild(bootStyle);
let bootReleaseScheduled = false;
function releaseBootGuard() {
if (bootReleaseScheduled) {
return;
}
bootReleaseScheduled = true;
const reveal = () => {
document.documentElement.classList.remove(BOOT_CLASS);
document.documentElement.classList.add('old-reddit-mobile-ready');
document.getElementById(BOOT_STYLE_ID)?.remove();
};
if (typeof requestAnimationFrame === 'function') {
requestAnimationFrame(() => requestAnimationFrame(reveal));
} else {
setTimeout(reveal, 0);
}
}
/* Never leave a changed or partially loaded Reddit page hidden. */
setTimeout(releaseBootGuard, 4000);
const mobileCss = `
/*
* old.reddit.com advertises a 1024px viewport. That is useful for the
* desktop layout, but makes a phone render the page as a tiny desktop
* screenshot. The header reset applies everywhere; the layout rules
* below it only change layout below 700px.
*/
/* Neutralize subreddit CSS that replaces the global header with a
* custom banner, dark theme, oversized logo, or positioned artwork. */
html.old-reddit-mobile-fix body #header {
position: relative !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #cee3f8 !important;
background-image: none !important;
border: 0 !important;
border-bottom: 1px solid #5f99cf !important;
outline: 0 !important;
box-shadow: none !important;
color: #222 !important;
}
html.old-reddit-mobile-fix body #header::before,
html.old-reddit-mobile-fix body #header::after,
html.old-reddit-mobile-fix body #header-bottom-left::before,
html.old-reddit-mobile-fix body #header-bottom-left::after,
html.old-reddit-mobile-fix body #header-bottom-right::before,
html.old-reddit-mobile-fix body #header-bottom-right::after {
display: none !important;
content: none !important;
background: none !important;
}
html.old-reddit-mobile-fix body #sr-header-area {
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 2px 5px !important;
overflow: hidden !important;
background: #f5f5f5 !important;
background-image: none !important;
border: 0 !important;
color: #222 !important;
}
html.old-reddit-mobile-fix body #sr-header-area a,
html.old-reddit-mobile-fix body #sr-header-area .choice {
color: #369 !important;
background: transparent !important;
background-image: none !important;
}
html.old-reddit-mobile-fix body #header-bottom-left,
html.old-reddit-mobile-fix body #header-bottom-right {
position: static !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
background: #cee3f8 !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
color: #222 !important;
}
html.old-reddit-mobile-fix body #header-img.default-header,
html.old-reddit-mobile-fix body #header-img {
display: inline-block !important;
position: static !important;
float: none !important;
width: 120px !important;
height: 40px !important;
margin: 0 5px 3px 0 !important;
padding: 0 !important;
overflow: hidden !important;
text-indent: -9999px !important;
background-color: transparent !important;
background-image: url("//www.redditstatic.com/sprite-reddit.13AvZYXRW_4.png") !important;
background-position: 0 -1323px !important;
background-repeat: no-repeat !important;
}
html.old-reddit-mobile-fix body #header .pagename {
display: inline-block !important;
position: static !important;
float: none !important;
width: auto !important;
height: auto !important;
margin: 0 8px 0 0 !important;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
color: #222 !important;
font: bold 16px Arial, sans-serif !important;
text-shadow: none !important;
}
html.old-reddit-mobile-fix body #header .tabmenu,
html.old-reddit-mobile-fix body #header .tabmenu li,
html.old-reddit-mobile-fix body #header .tabmenu li a {
background-image: none !important;
text-shadow: none !important;
}
html.old-reddit-mobile-fix body #header .tabmenu li a {
color: #369 !important;
}
html.old-reddit-mobile-fix body #header .tabmenu li.selected a,
html.old-reddit-mobile-fix body #header .tabmenu li.selected a:hover {
color: orangered !important;
background: #fff !important;
}
/* A controlled header shell keeps the real Reddit links/tabs but
* prevents subreddit CSS from changing their layout. */
html.old-reddit-mobile-fix body #old-reddit-custom-navbar {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #cee3f8 !important;
background-image: none !important;
color: #222 !important;
font: 10px Verdana, Arial, Helvetica, sans-serif !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-top {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #f5f5f5 !important;
background-image: none !important;
border-bottom: 1px solid #b8c9d8 !important;
font-size: 10px !important;
line-height: 20px !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-main {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #cee3f8 !important;
background-image: none !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-account {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 3px 8px 6px !important;
overflow: visible !important;
background: #eff7ff !important;
background-image: none !important;
color: #555 !important;
text-align: left !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left {
display: grid !important;
grid-template-columns: 96px minmax(0, 1fr) !important;
grid-template-rows: 36px auto !important;
grid-template-areas:
"brand title"
"brand tabs" !important;
align-items: center !important;
position: static !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 4px 8px 4px !important;
overflow: visible !important;
background: transparent !important;
background-image: none !important;
color: #222 !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left > *,
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-right > * {
position: static !important;
float: none !important;
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left #header-img,
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left .old-reddit-navbar-brand {
grid-area: brand !important;
display: flex !important;
align-items: center !important;
width: 96px !important;
height: 32px !important;
justify-content: center !important;
min-width: 0 !important;
margin: 0 8px 0 0 !important;
padding: 0 6px !important;
overflow: hidden !important;
background: #fff !important;
border: 1px solid #b6c8d8 !important;
border-radius: 3px !important;
color: #111 !important;
font: bold 23px/30px Arial, Helvetica, sans-serif !important;
letter-spacing: -1px !important;
text-indent: 0 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left .pagename {
grid-area: title !important;
display: block !important;
align-self: center !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
color: #315b85 !important;
font: 600 16px/22px Arial, Helvetica, sans-serif !important;
text-overflow: ellipsis !important;
text-shadow: none !important;
white-space: nowrap !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left .tabmenu {
display: flex !important;
align-items: center !important;
grid-area: tabs !important;
flex: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
min-height: 25px !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: visible !important;
overflow-y: hidden !important;
flex-wrap: wrap !important;
align-content: flex-start !important;
gap: 3px !important;
white-space: normal !important;
background: transparent !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left .tabmenu li {
display: block !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left .tabmenu li a {
display: block !important;
margin: 0 !important;
padding: 3px 7px !important;
border: 1px solid #b4cbe0 !important;
border-radius: 3px !important;
background: #e5f0fa !important;
color: #369 !important;
font-size: 11px !important;
font-weight: bold !important;
line-height: 18px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left .tabmenu li.selected a,
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left .tabmenu li.selected a:hover {
background: #fff !important;
color: orangered !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-left .tabmenu li a:hover {
background: #f7fbff !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-right {
display: block !important;
position: static !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 4px 8px 6px !important;
border-top: 1px solid rgba(95, 153, 207, .55) !important;
background: #eff7ff !important;
color: #555 !important;
text-align: left !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar #header-bottom-right .user {
display: inline !important;
font-size: 11px !important;
white-space: normal !important;
}
/* This is a real replacement header. It does not move Reddit's
* themed header nodes into a wrapper, so subreddit artwork and
* positioning rules have nothing left to target. */
html.old-reddit-mobile-fix body #header:has(#old-reddit-custom-navbar) {
position: sticky !important;
z-index: 1000 !important;
top: 0 !important;
overflow: visible !important;
background: #fff !important;
border-bottom: 1px solid #dfe3e8 !important;
box-shadow: 0 5px 20px rgba(18, 27, 42, .12) !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar,
html.old-reddit-mobile-fix body #old-reddit-custom-navbar *,
html.old-reddit-mobile-fix body #old-reddit-custom-navbar *::before,
html.old-reddit-mobile-fix body #old-reddit-custom-navbar *::after {
box-sizing: border-box !important;
background-image: none !important;
text-indent: 0 !important;
text-shadow: none !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
color: #fff !important;
background: #16243b !important;
border: 0 !important;
font: 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-main {
display: flex !important;
width: min(100%, 1180px) !important;
min-width: 0 !important;
height: 58px !important;
margin: 0 auto !important;
padding: 0 14px !important;
align-items: center !important;
gap: 12px !important;
overflow: hidden !important;
color: #fff !important;
background: #16243b !important;
border: 0 !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-brand {
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
gap: 8px !important;
overflow: visible !important;
color: #fff !important;
background: transparent !important;
border: 0 !important;
font: 800 17px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
letter-spacing: -.03em !important;
text-decoration: none !important;
white-space: nowrap !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-brand-mark {
display: grid !important;
width: 31px !important;
height: 31px !important;
place-items: center !important;
color: #fff !important;
background: #ff5c35 !important;
border: 1px solid rgba(255,255,255,.24) !important;
border-radius: 50% !important;
font: 900 17px/29px Arial, sans-serif !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-brand-mark svg {
display: block !important;
width: 22px !important;
height: 22px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.55 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-brand-text > span {
color: #aebbd0 !important;
font-weight: 500 !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-context {
display: block !important;
min-width: 0 !important;
max-width: 42vw !important;
padding-left: 12px !important;
overflow: hidden !important;
color: #c7d1e1 !important;
background: transparent !important;
border: 0 !important;
border-left: 1px solid rgba(255,255,255,.16) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-actions {
display: flex !important;
flex: 0 0 auto !important;
margin-left: auto !important;
align-items: center !important;
gap: 6px !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-icon-button,
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-account-link {
display: grid !important;
min-width: 36px !important;
height: 36px !important;
margin: 0 !important;
padding: 0 10px !important;
place-items: center !important;
color: #e7edf6 !important;
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: 9px !important;
font-size: 11px !important;
font-weight: 800 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-icon-button {
width: 36px !important;
padding: 0 !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-icon-button svg {
display: block !important;
width: 18px !important;
height: 18px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-account-link--logged-out {
width: 36px !important;
padding: 0 !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-account-link--logged-out svg {
display: block !important;
width: 18px !important;
height: 18px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-tabs {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 max(10px, calc((100% - 1180px) / 2 + 14px)) !important;
align-items: center !important;
gap: 3px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
color: #687386 !important;
background: #fff !important;
border: 0 !important;
scrollbar-width: none !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-tabs::-webkit-scrollbar {
display: none !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-tabs a {
display: inline-flex !important;
flex: 0 0 auto !important;
min-height: 30px !important;
margin: 0 !important;
padding: 0 11px !important;
align-items: center !important;
color: #687386 !important;
background: transparent !important;
border: 0 !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
text-transform: none !important;
}
html.old-reddit-mobile-fix body #old-reddit-custom-navbar .old-reddit-navbar-tabs a[aria-current="page"] {
color: #db3d1c !important;
background: #fff0ec !important;
}
/* Remove Reddit's logged-out front-page signup promotion. */
html.old-reddit-mobile-fix body .listingsignupbar {
display: none !important;
}
@media screen and (max-width: 700px) {
html.old-reddit-mobile-fix,
html.old-reddit-mobile-fix body {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
html.old-reddit-mobile-fix body {
background: #fff !important;
font-size: 12px !important;
line-height: 1.35;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* The source places .side before .content for desktop's floated
* right rail. On a phone, omit that desktop-only rail entirely;
* this keeps subreddit-specific sidebar CSS out of the main flow. */
html.old-reddit-mobile-fix body {
display: block !important;
}
html.old-reddit-mobile-fix *,
html.old-reddit-mobile-fix *::before,
html.old-reddit-mobile-fix *::after {
box-sizing: border-box;
}
html.old-reddit-mobile-fix a,
html.old-reddit-mobile-fix button,
html.old-reddit-mobile-fix input,
html.old-reddit-mobile-fix select,
html.old-reddit-mobile-fix textarea,
html.old-reddit-mobile-fix .arrow,
html.old-reddit-mobile-fix .expando-button {
touch-action: manipulation;
}
html.old-reddit-mobile-fix img,
html.old-reddit-mobile-fix video,
html.old-reddit-mobile-fix iframe,
html.old-reddit-mobile-fix object,
html.old-reddit-mobile-fix embed {
max-width: 100% !important;
}
/* The subreddit bar becomes a horizontally scrollable strip. */
html.old-reddit-mobile-fix #sr-header-area {
width: 100% !important;
min-width: 0 !important;
height: auto !important;
overflow: hidden !important;
}
html.old-reddit-mobile-fix #sr-header-area .width-clip {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch;
}
html.old-reddit-mobile-fix #sr-header-area .sr-list,
html.old-reddit-mobile-fix #sr-header-area .sr-bar {
display: inline-block !important;
white-space: nowrap !important;
}
/* Stack the logo, tabs, and account links instead of positioning
* them against the old fixed-height desktop header. */
html.old-reddit-mobile-fix #header {
position: relative !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
clear: both !important;
padding: 0 !important;
}
html.old-reddit-mobile-fix #header-bottom-left {
position: static !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 7px 8px 4px !important;
}
html.old-reddit-mobile-fix #header-img {
flex: 0 0 auto !important;
margin: 0 8px 0 0 !important;
}
html.old-reddit-mobile-fix #header-bottom-left .tabmenu {
display: flex !important;
flex: 1 1 calc(100% - 100px) !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch;
}
html.old-reddit-mobile-fix #header-bottom-left .tabmenu li {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
html.old-reddit-mobile-fix #header-bottom-right {
position: static !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
padding: 2px 8px 7px !important;
text-align: left !important;
}
html.old-reddit-mobile-fix #header-bottom-right .user {
font-size: 11px !important;
white-space: normal !important;
}
html.old-reddit-mobile-fix #jumpToContent {
display: none !important;
}
/* Search and submit controls move above the listing. */
html.old-reddit-mobile-fix .side {
position: static !important;
float: none !important;
clear: both !important;
display: none !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html.old-reddit-mobile-fix .side .spacer {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
html.old-reddit-mobile-fix .side .spacer:empty {
display: none !important;
}
html.old-reddit-mobile-fix #search {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
html.old-reddit-mobile-fix #search input[name="q"] {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
height: 36px !important;
font-size: 16px !important;
}
html.old-reddit-mobile-fix #search input[type="submit"] {
flex: 0 0 36px !important;
width: 36px !important;
height: 36px !important;
}
html.old-reddit-mobile-fix .sidebox,
html.old-reddit-mobile-fix .sidebox .morelink,
html.old-reddit-mobile-fix .sidebox .morelink a {
width: 100% !important;
min-width: 0 !important;
}
html.old-reddit-mobile-fix .sidebox .morelink a {
display: block !important;
min-height: 34px !important;
padding: 9px 8px !important;
text-align: center !important;
}
/* Remove the desktop margins and let the listing fill the phone. */
html.old-reddit-mobile-fix .content {
position: relative !important;
float: none !important;
clear: both !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html.old-reddit-mobile-fix .listingsignupbar {
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
background-size: cover !important;
}
html.old-reddit-mobile-fix .listingsignupbar__container {
display: block !important;
min-height: 0 !important;
padding: 10px !important;
}
html.old-reddit-mobile-fix .listingsignupbar__title {
font-size: 16px !important;
}
html.old-reddit-mobile-fix .listingsignupbar__cta-container {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 5px !important;
}
html.old-reddit-mobile-fix .listingsignupbar__cta-desc {
margin: 0 !important;
}
html.old-reddit-mobile-fix .menuarea {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 8px !important;
}
/* Comment pages have a separate commentarea wrapper. Reddit's
* desktop rules reserve 310px on its right for the sidebar,
* which leaves only a thin strip once the sidebar is hidden. */
html.old-reddit-mobile-fix .commentarea {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
clear: both !important;
overflow: visible !important;
}
html.old-reddit-mobile-fix .commentarea > .panestack-title {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 10px 8px 0 !important;
padding: 0 0 4px !important;
}
html.old-reddit-mobile-fix .commentarea > .menuarea {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 8px 10px !important;
padding: 0 !important;
overflow: visible !important;
}
html.old-reddit-mobile-fix .commentarea > .commentsignupbar {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 5px 8px 20px !important;
padding: 0 !important;
}
html.old-reddit-mobile-fix .commentarea .commentsignupbar__container {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
padding: 14px 9px !important;
}
html.old-reddit-mobile-fix .commentarea > .nestedlisting,
html.old-reddit-mobile-fix .commentarea .nestedlisting,
html.old-reddit-mobile-fix .commentarea .nestedlisting > .sitetable {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html.old-reddit-mobile-fix .commentarea .comment {
display: block !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #fff !important;
border: 0 !important;
border-bottom: 1px solid #e2e6eb !important;
border-radius: 0 !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .midcol {
position: absolute !important;
z-index: 2 !important;
top: 7px !important;
right: 7px !important;
display: flex !important;
width: 24px !important;
min-width: 24px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
flex-direction: column !important;
float: none !important;
background: #f7f8fa !important;
border-radius: 7px !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .entry {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 10px 9px 9px !important;
float: none !important;
overflow: visible !important;
overflow-wrap: anywhere !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .child {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .clearleft {
display: none !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .entry > .tagline {
min-height: 27px !important;
margin: 0 29px 5px 0 !important;
padding: 2px 0 0 !important;
line-height: 1.35 !important;
white-space: normal !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .entry .usertext,
html.old-reddit-mobile-fix .commentarea .comment > .entry .usertext-body,
html.old-reddit-mobile-fix .commentarea .comment > .entry .md {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow-wrap: anywhere !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .entry .md {
color: #283444 !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .entry .md p {
margin: 0 0 8px !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .entry .flat-list.buttons {
display: flex !important;
margin: 5px 0 0 !important;
padding: 0 !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 2px !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .entry .flat-list.buttons li {
margin: 0 !important;
padding: 0 !important;
}
html.old-reddit-mobile-fix .commentarea .comment > .entry .flat-list.buttons a {
display: inline-flex !important;
min-height: 30px !important;
padding: 6px 5px !important;
align-items: center !important;
color: #59677a !important;
border-radius: 6px !important;
font-size: 11px !important;
font-weight: 650 !important;
}
/* Nesting gets a colored rule, not an ever-growing horizontal
* indent. Every reply still receives the full phone width. */
html.old-reddit-mobile-fix .commentarea .comment .comment > .entry {
border-left: 3px solid #6196cf !important;
padding-left: 9px !important;
}
html.old-reddit-mobile-fix .commentarea .comment .comment .comment > .entry {
border-left-color: #9871c2 !important;
}
html.old-reddit-mobile-fix .commentarea .comment .comment .comment .comment > .entry {
border-left-color: #459675 !important;
}
/* On thread pages the link thumbnail duplicates the expanded
* media shown in the post. Keep the larger preview and remove
* only this small listing thumbnail. */
html.old-reddit-mobile-fix.old-reddit-thread .linklisting > .thing.link > .thumbnail,
html.old-reddit-mobile-fix.old-reddit-thread #siteTable > .thing.link > .thumbnail,
html.old-reddit-mobile-fix body:has(.commentarea) .linklisting > .thing.link > .thumbnail,
html.old-reddit-mobile-fix body:has(.commentarea) #siteTable > .thing.link > .thumbnail {
display: none !important;
}
html.old-reddit-mobile-fix #siteTable,
html.old-reddit-mobile-fix .sitetable {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* A post is a small, touch-friendly row: vote controls, thumbnail,
* then a title/metadata column that is allowed to shrink. */
html.old-reddit-mobile-fix #siteTable > .thing {
display: flex !important;
align-items: flex-start !important;
flex-wrap: wrap !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 10px 8px !important;
border-bottom: 1px solid #e5e5e5 !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .parent,
html.old-reddit-mobile-fix #siteTable > .thing > .rank,
html.old-reddit-mobile-fix #siteTable > .thing > .clearleft,
html.old-reddit-mobile-fix #siteTable > .thing > .child {
display: none !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .midcol {
display: flex !important;
flex: 0 0 34px !important;
flex-direction: column !important;
align-items: center !important;
overflow: visible !important;
align-self: center !important;
width: 34px !important;
min-width: 34px !important;
margin: 0 6px 0 0 !important;
padding: 0 !important;
float: none !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .midcol .arrow {
display: block !important;
position: relative !important;
flex: 0 0 14px !important;
width: 15px !important;
height: 14px !important;
margin: 2px auto 0 !important;
}
/* Keep Reddit's 15px sprite intact. The pseudo-element makes the
* control easier to tap without widening the sprite itself. */
html.old-reddit-mobile-fix #siteTable > .thing > .midcol .arrow::after {
position: absolute !important;
top: -8px !important;
right: -8px !important;
bottom: -8px !important;
left: -8px !important;
content: "" !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .midcol .score {
display: none !important;
min-height: 14px !important;
line-height: 14px !important;
font-size: 11px !important;
text-align: center !important;
}
/* Reddit keeps all three score nodes in the DOM and toggles the
* parent state. Only the active one should occupy the row. */
html.old-reddit-mobile-fix #siteTable > .thing > .midcol.unvoted .score.unvoted,
html.old-reddit-mobile-fix #siteTable > .thing > .midcol.likes .score.likes,
html.old-reddit-mobile-fix #siteTable > .thing > .midcol.dislikes .score.dislikes,
html.old-reddit-mobile-fix #siteTable > .thing > .midcol:not(.likes):not(.dislikes) .score.unvoted {
display: block !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .thumbnail {
display: block !important;
flex: 0 0 88px !important;
align-self: center !important;
width: 88px !important;
height: 88px !important;
min-height: 88px !important;
min-width: 0 !important;
margin: 0 8px 0 0 !important;
float: none !important;
overflow: hidden !important;
text-align: center !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .thumbnail img {
display: block !important;
width: 88px !important;
max-width: 88px !important;
height: 88px !important;
max-height: 88px !important;
margin: 0 auto !important;
object-fit: cover !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .entry {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
min-height: 88px !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
overflow: visible !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .entry .title {
display: block !important;
margin: 0 0 3px !important;
font-size: 14px !important;
line-height: 1.3 !important;
overflow-wrap: anywhere !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .entry .title > a.title {
overflow-wrap: anywhere !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .entry .domain {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .entry .tagline {
margin: 0 0 3px !important;
font-size: 11px !important;
line-height: 1.35 !important;
overflow-wrap: anywhere !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .entry .flat-list.buttons {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0 4px !important;
margin: 0 !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .entry .flat-list.buttons li {
margin: 0 !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .entry .flat-list.buttons a,
html.old-reddit-mobile-fix #siteTable > .thing > .entry .expando-button {
display: inline-block !important;
min-height: 28px !important;
padding: 6px 2px !important;
}
/* Expando media, self text, tables, and code must respect the
* narrower entry column. */
html.old-reddit-mobile-fix #siteTable .expando,
html.old-reddit-mobile-fix #siteTable .media-preview,
html.old-reddit-mobile-fix #siteTable .media-preview-content,
html.old-reddit-mobile-fix #siteTable .md-container {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
html.old-reddit-mobile-fix #siteTable .media-preview img,
html.old-reddit-mobile-fix #siteTable .expando video,
html.old-reddit-mobile-fix #siteTable .expando iframe,
html.old-reddit-mobile-fix #siteTable .expando object,
html.old-reddit-mobile-fix #siteTable .expando embed {
width: auto !important;
height: auto !important;
max-width: 100% !important;
}
html.old-reddit-mobile-fix #siteTable .md {
max-width: 100% !important;
overflow-wrap: anywhere !important;
}
html.old-reddit-mobile-fix #siteTable .md table,
html.old-reddit-mobile-fix #siteTable pre {
display: block !important;
max-width: 100% !important;
overflow-x: auto !important;
}
html.old-reddit-mobile-fix .nav-buttons {
padding: 12px 8px !important;
}
/* Final mobile listing treatment. Keep the real Reddit links and
* controls, but present them as a calm, predictable feed row. */
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing {
position: relative !important;
display: grid !important;
grid-template-columns: 32px minmax(0, 1fr) 82px !important;
grid-template-areas: "vote content thumb" !important;
align-items: center !important;
gap: 9px !important;
min-height: 116px !important;
margin: 0 !important;
padding: 12px 9px !important;
background: #fff !important;
border: 0 !important;
border-bottom: 7px solid #f1f3f6 !important;
box-shadow: inset 0 -1px #dfe3e8 !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing::before,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing::after,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .midcol::before,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry::before,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry::after,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .thumbnail::before,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .thumbnail::after {
display: none !important;
content: none !important;
background: none !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .midcol {
grid-area: vote !important;
display: flex !important;
width: 32px !important;
min-width: 32px !important;
height: auto !important;
margin: 0 !important;
padding: 5px 2px !important;
align-self: center !important;
align-items: center !important;
justify-content: center !important;
background: #f7f8fa !important;
border: 1px solid #edf0f3 !important;
border-radius: 9px !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry {
grid-area: content !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
min-height: 82px !important;
margin: 0 !important;
padding: 0 !important;
justify-content: center !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .thumbnail {
grid-area: thumb !important;
display: block !important;
width: 82px !important;
min-width: 82px !important;
height: 82px !important;
min-height: 82px !important;
margin: 0 !important;
overflow: hidden !important;
background: #eef1f4 !important;
border: 1px solid #e0e4e9 !important;
border-radius: 9px !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .thumbnail img {
width: 82px !important;
max-width: 82px !important;
height: 82px !important;
max-height: 82px !important;
object-fit: cover !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .thumbnail.self,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .thumbnail.default,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .thumbnail:empty {
display: none !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing:not(:has(> .thumbnail)),
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing:has(> .thumbnail.self),
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing:has(> .thumbnail.default),
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing:has(> .thumbnail:empty) {
grid-template-columns: 32px minmax(0, 1fr) !important;
grid-template-areas: "vote content" !important;
min-height: 96px !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry .title {
margin: 0 0 5px !important;
color: #1d2b3d !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.32 !important;
letter-spacing: -.01em !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry .title > a.title,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry .title > a.title:visited {
color: #1d2b3d !important;
text-decoration: none !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry .domain {
color: #8a94a3 !important;
font-size: 9px !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable .linkflairlabel,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable .flair {
display: inline-block !important;
width: auto !important;
max-width: min(100%, 180px) !important;
height: auto !important;
min-height: 18px !important;
margin: 0 4px 3px 0 !important;
padding: 2px 6px !important;
overflow: hidden !important;
color: #426178 !important;
background: #edf4f8 !important;
background-image: none !important;
border: 1px solid #d5e2ea !important;
border-radius: 5px !important;
font: 700 9px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
text-indent: 0 !important;
text-overflow: ellipsis !important;
text-shadow: none !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry .tagline {
margin: 0 0 5px !important;
color: #7b8696 !important;
font-size: 10px !important;
line-height: 1.4 !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry .flat-list.buttons {
display: flex !important;
min-height: 28px !important;
margin: 1px 0 0 !important;
align-items: center !important;
gap: 4px !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry .flat-list.buttons > li {
display: none !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry .flat-list.buttons > li.first,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry .flat-list.buttons > li.link-save-button {
display: block !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .entry .flat-list.buttons a {
display: inline-flex !important;
min-height: 27px !important;
margin: 0 !important;
padding: 4px 7px !important;
align-items: center !important;
color: #59677a !important;
background: #f5f7f9 !important;
border-radius: 7px !important;
font-size: 10.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-decoration: none !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) .content > .spacer,
html.old-reddit-mobile-fix:not(.old-reddit-thread) .content > .menuarea {
margin: 0 !important;
}
/* The footer is a two-column grid on phones. */
html.old-reddit-mobile-fix .footer-parent {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
html.old-reddit-mobile-fix .footer {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px 18px !important;
width: auto !important;
min-width: 0 !important;
margin: 16px 8px 8px !important;
padding: 12px !important;
}
html.old-reddit-mobile-fix .footer .col {
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
}
html.old-reddit-mobile-fix .footer .col a,
html.old-reddit-mobile-fix .bottommenu {
overflow-wrap: anywhere !important;
}
html.old-reddit-mobile-fix .bottommenu {
margin-left: 8px !important;
margin-right: 8px !important;
}
/* Keep the cookie notice and dialogs inside the viewport. */
html.old-reddit-mobile-fix .infobar-toaster-container {
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
html.old-reddit-mobile-fix .cookie-infobar {
display: flex !important;
flex-wrap: wrap !important;
width: auto !important;
max-width: none !important;
margin: 8px !important;
}
html.old-reddit-mobile-fix .cookie-infobar .md {
flex: 1 1 100% !important;
min-width: 0 !important;
}
html.old-reddit-mobile-fix .cookie-infobar .infobar-btn-container {
width: 100% !important;
text-align: right !important;
}
}
@media screen and (max-width: 380px) {
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing,
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing:has(> .thumbnail) {
grid-template-columns: 30px minmax(0, 1fr) !important;
grid-template-areas: "vote content" !important;
gap: 8px !important;
min-height: 94px !important;
padding: 11px 8px !important;
}
html.old-reddit-mobile-fix:not(.old-reddit-thread) #siteTable > .thing > .thumbnail {
display: none !important;
}
html.old-reddit-mobile-fix #siteTable > .thing {
padding-left: 6px !important;
padding-right: 6px !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .midcol {
flex-basis: 30px !important;
width: 30px !important;
min-width: 30px !important;
margin-right: 4px !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .thumbnail {
flex-basis: 72px !important;
width: 72px !important;
height: 72px !important;
min-height: 72px !important;
margin-right: 6px !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .thumbnail img {
width: 72px !important;
max-width: 72px !important;
height: 72px !important;
max-height: 72px !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .entry .title {
font-size: 13px !important;
}
html.old-reddit-mobile-fix #siteTable > .thing > .entry {
min-height: 72px !important;
}
}
`;
function isSubredditStylesheet(element) {
if (!(element instanceof Element) || element.id === STYLE_ID) {
return false;
}
const title = (element.getAttribute('title') || '').toLowerCase();
const id = (element.id || '').toLowerCase();
if (title === SUBREDDIT_STYLESHEET_TITLE || /subreddit.*stylesheet|stylesheet.*subreddit/.test(id)) {
return true;
}
if (element.tagName !== 'LINK' || !/\bstylesheet\b/i.test(element.rel || '')) {
return false;
}
const href = element.getAttribute('href') || '';
return /(?:^|\.)thumbs\.redditmedia\.com\//i.test(href)
|| /\/r\/[^/]+\/stylesheet(?:\.css)?(?:[?#]|$)/i.test(href)
|| /[?&]stylesheet=/.test(href);
}
function scrubSubredditStyles(root = document) {
const candidates = [];
if (root instanceof Element && /^(?:LINK|STYLE)$/.test(root.tagName)) {
candidates.push(root);
}
if (root.querySelectorAll) {
candidates.push(...root.querySelectorAll('link[rel~="stylesheet"], style'));
}
candidates.forEach((element) => {
if (!isSubredditStylesheet(element)) {
return;
}
element.disabled = true;
element.media = 'not all';
element.remove();
});
}
scrubSubredditStyles();
const subredditStyleObserver = new MutationObserver((records) => {
records.forEach((record) => {
record.addedNodes.forEach((node) => {
if (node.nodeType === Node.ELEMENT_NODE) {
scrubSubredditStyles(node);
}
});
});
});
subredditStyleObserver.observe(document.documentElement, { childList: true, subtree: true });
function setResponsiveViewport() {
let viewport = document.querySelector('meta[name="viewport"]');
if (!viewport) {
viewport = document.createElement('meta');
viewport.name = 'viewport';
(document.head || document.documentElement).appendChild(viewport);
}
viewport.content = VIEWPORT_CONTENT;
}
function installStyles() {
if (document.getElementById(STYLE_ID)) {
return;
}
document.documentElement.classList.add('old-reddit-mobile-fix');
const style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = mobileCss;
(document.head || document.documentElement).appendChild(style);
}
setResponsiveViewport();
installStyles();
function markThreadPage() {
if (/\/comments\//i.test(location.pathname) || document.querySelector('.commentarea')) {
document.documentElement.classList.add('old-reddit-thread');
}
}
function makeNavbarIcon(pathData) {
const namespace = 'http://www.w3.org/2000/svg';
const icon = document.createElementNS(namespace, 'svg');
const path = document.createElementNS(namespace, 'path');
icon.setAttribute('viewBox', '0 0 24 24');
icon.setAttribute('aria-hidden', 'true');
path.setAttribute('d', pathData);
icon.appendChild(path);
return icon;
}
function installUniversalNavbar() {
const header = document.getElementById('header');
if (document.getElementById('old-reddit-custom-navbar')) {
return true;
}
if (!header) {
return false;
}
const headerLeft = header.querySelector('#header-bottom-left');
const headerRight = header.querySelector('#header-bottom-right');
const jumpToContent = header.querySelector('#jumpToContent');
/* The parser adds the header a few nodes at a time. Waiting for both
* halves and the tab list prevents mounting from an incomplete tree. */
if (!headerLeft || !headerRight || !headerLeft.querySelector('.tabmenu')) {
return false;
}
const pageName = headerLeft && headerLeft.querySelector('.pagename');
const pageNameLink = pageName && pageName.querySelector('a');
const pathCommunity = location.pathname.match(/^\/r\/([^/]+)/i);
const contextName = pathCommunity
? `r/${decodeURIComponent(pathCommunity[1])}`
: (pageNameLink && pageNameLink.textContent.trim()) || 'Popular';
const contextHref = (pageNameLink && pageNameLink.href) || (pathCommunity ? `/r/${pathCommunity[1]}/` : '/');
const sourceTabs = headerLeft
? Array.from(headerLeft.querySelectorAll('.tabmenu li a')).slice(0, 7)
: [];
const loginLink = headerRight && Array.from(headerRight.querySelectorAll('a')).find((link) => /log\s*in/i.test(link.textContent));
const userLink = headerRight && headerRight.querySelector('.user a:not(.login-required)');
const navbar = document.createElement('nav');
navbar.id = 'old-reddit-custom-navbar';
navbar.setAttribute('aria-label', 'Reddit navigation');
const main = document.createElement('div');
main.className = 'old-reddit-navbar-main';
const brand = document.createElement('a');
brand.className = 'old-reddit-navbar-brand';
brand.href = '/';
brand.setAttribute('aria-label', 'Old Reddit home');
const brandMark = document.createElement('span');
brandMark.className = 'old-reddit-navbar-brand-mark';
brandMark.setAttribute('aria-hidden', 'true');
brandMark.appendChild(makeNavbarIcon('M7.2 10.2c-2.5.2-4.2 1-4.2 2.2 0 .8.8 1.5 2 1.9v.7c0 2.8 3.1 5 7 5s7-2.2 7-5v-.7c1.2-.4 2-1.1 2-1.9 0-1.2-1.7-2-4.2-2.2M9 15.3h.01M15 15.3h.01M9 17.5c1.7.8 4.3.8 6 0M12 10l1.4-4.8 3.6.8M18.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z'));
const brandText = document.createElement('span');
brandText.className = 'old-reddit-navbar-brand-text';
const oldWord = document.createElement('span');
oldWord.textContent = 'old.';
brandText.append(oldWord, 'reddit');
brand.append(brandMark, brandText);
const context = document.createElement('a');
context.className = 'old-reddit-navbar-context';
context.href = contextHref;
context.textContent = contextName;
const actions = document.createElement('div');
actions.className = 'old-reddit-navbar-actions';
const search = document.createElement('a');
search.className = 'old-reddit-navbar-icon-button';
search.href = '/search';
search.setAttribute('aria-label', 'Search Reddit');
search.appendChild(makeNavbarIcon('M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm5 12 4 4'));
const account = document.createElement('a');
account.className = 'old-reddit-navbar-account-link';
account.href = (userLink && userLink.href) || (loginLink && loginLink.href) || '/login';
if (userLink) {
account.textContent = userLink.textContent.trim().slice(0, 2).toUpperCase();
account.setAttribute('aria-label', `Open profile for ${userLink.textContent.trim()}`);
} else {
account.classList.add('old-reddit-navbar-account-link--logged-out');
account.setAttribute('aria-label', 'Log in');
account.title = 'Log in';
account.appendChild(makeNavbarIcon('M20 21a8 8 0 0 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'));
}
actions.append(search, account);
main.append(brand, context, actions);
const tabs = document.createElement('div');
tabs.className = 'old-reddit-navbar-tabs';
const tabData = sourceTabs.length
? sourceTabs.map((link) => ({
href: link.href,
label: link.textContent.trim(),
selected: Boolean(link.closest('li.selected')),
}))
: [
{ href: '/', label: 'Popular', selected: true },
{ href: '/new/', label: 'New', selected: false },
{ href: '/rising/', label: 'Rising', selected: false },
{ href: '/top/', label: 'Top', selected: false },
];
tabData.forEach(({ href, label, selected }) => {
if (!label) {
return;
}
const link = document.createElement('a');
link.href = href;
link.textContent = label;
if (selected) {
link.setAttribute('aria-current', 'page');
}
tabs.appendChild(link);
});
navbar.append(main, tabs);
if (jumpToContent) {
navbar.appendChild(jumpToContent);
}
header.replaceChildren(navbar);
return true;
}
markThreadPage();
if (installUniversalNavbar()) {
releaseBootGuard();
} else {
const shellObserver = new MutationObserver(() => {
markThreadPage();
if (installUniversalNavbar()) {
shellObserver.disconnect();
releaseBootGuard();
}
});
shellObserver.observe(document.documentElement, { childList: true, subtree: true });
document.addEventListener('DOMContentLoaded', () => {
markThreadPage();
installUniversalNavbar();
shellObserver.disconnect();
releaseBootGuard();
}, { once: true });
}
})();