Modern responsive CSS for old.reddit.com. Fixes issues with mobile and narrow window display, adds better comment visibility UI, and updates the default font.
Responsive Styles for old.reddit.com (Alpha) by asteconn
Details
Authorasteconn
LicenseCC Zero
Categoryold.reddit.com
Created
Updated
Size90 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Responsive Styles for old.reddit.com (Alpha)
@version 20230612.09.43
@namespace userstyles.world/user/asteconn
@description Modern responsive CSS for old.reddit.com. Fixes issues with mobile and narrow window display, adds better comment visibility UI, and updates the default font for maximum screen readability.
These styles can break subreddit themes and cause other visual bugs, depending on how the subreddit is styled. Adds lots of mitigations and resets to ensure that most custom subreddit themes will not cause breaking issues.
@author asteconn
@license CC Zero
==/UserStyle== */
@-moz-document domain("old.reddit.com") {
:root {
--color--core-background: #ffffff;
--color--core-text: #222222;
--color--brand-primary--base: #ff4500;
--color--brand-secondary--darker: #3368a0;
--color--brand-secondary--dark: #3368a0;
--color--brand-secondary--base: #3368a0;
--color--brand-secondary--light: #83a9d0;
--color--brand-secondary--lighter: #83a9d0;
--color--mono--light: #cccccc;
--color--link--base: #3368a0;
--color--link--hover: #3877b7;
--color--link-decoration--base: #83a9d001;
--color--link-decoration--hover: #83a9d0ff;
--color--header-background: #cee3f8;
--color--sidebar-background: #ffffff;
--previous-search--padding: 1rem;
--sidebar--item--margin-vertical: 0.5rem;
--sidebar--item--margin-horizontal: 0.5rem;
--post-entry--item--padding: 0.5rem;
--post-entry--item-preview--padding: 0.25rem;
--post-entry--item-preview--margin-horizontal: -0.25rem;
--post-entry--item-preview--margin-vertical: 0;
--post-entry--content--padding: 0.25rem;
--post-entry--tagline-author--padding: 0.5rem;
--post-entry--thumbnail--min-width: 10rem;
--post-entry--thumbnail--min-height: 7.5rem;
--comment--expand-link--width: 1.625rem;
--infobar--padding: 0.5rem;
}
/* region Reset */
* {
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
display: flex;
padding-top: 0;
margin: 0;
border: 1px solid var(--color--mono--light);
font-size: 12px;
}
p,
div,
input,
textarea,
video,
iframe {
max-width: 100%;
}
textarea, input {
background-color: var(--color--core-background);
}
a {
color: var(--color--link--base);
text-decoration: underline;
text-decoration-color: var(--color--link-decoration--base);
transition: all 0.1s ease-in;
}
a:focus, a:focus-visible, a:hover {
color: var(--color--link--hover);
text-decoration: underline;
text-decoration-color: var(--color--link-decoration--hover);
}
.md, .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
color: var(--color--core-text, #000000);
background: #ffffff87;
}
/* endregion */
/* region Page Layout */
body {
flex-direction: column;
flex-wrap: nowrap;
display: flex;
justify-content: flex-start;
align-items: stretch;
width: 100%;
margin: 0 auto;
}
@media (min-width: 0px) {
body {
max-width: 100%;
}
}
@media (min-width: 520px) {
body {
max-width: 100%;
}
}
@media (min-width: 780px) {
body {
max-width: 100%;
}
}
@media (min-width: 958px) {
body {
max-width: 1080px;
}
}
@media (min-width: 1280px) {
body {
max-width: 1358px;
}
}
@media (min-width: 1600px) {
body {
max-width: 1358px;
}
}
@media (min-width: 1280px) {
body {
flex-direction: row;
flex-wrap: wrap;
}
}
body > div {
display: block;
flex: 0 0 100%;
order: 100;
float: unset;
margin: 0;
padding: 1rem;
}
body .debuginfo {
flex: 0 0 100%;
order: -100;
}
body > div#header {
flex: 0 0 100%;
order: -10;
}
body > div.content, body[class] > .content {
order: 20;
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
@media (min-width: 1280px) {
body > div.content, body[class] > .content {
flex: 0 0 75%;
max-width: 75%;
}
}
@media (min-width: 1280px) {
body.with-listing-chooser > div.content, body.with-listing-chooser[class] > .content {
flex: 0 0 min(65%, calc(75% - 160px));
max-width: min(65%, calc(75% - 160px));
}
body.with-listing-chooser.listing-chooser-collapsed > div.content, body.with-listing-chooser.listing-chooser-collapsed[class] > .content {
flex: 0 0 calc(75% - 10px);
max-width: calc(75% - 10px);
}
}
body > .listing-chooser {
order: 40;
}
@media (min-width: 1280px) {
body > .listing-chooser {
order: 10;
flex: 0 0 max(160px, 10%);
max-width: max(160px, 10%);
}
}
body.listing-chooser-collapsed > .listing-chooser {
flex: 0 0 10px;
max-width: 10px;
}
.combined-search-page .side, .search-page .side, .comments-page .side, .loggedin .side, body > div.side {
order: 30;
}
@media (min-width: 1280px) {
.combined-search-page .side, .search-page .side, .comments-page .side, .loggedin .side, body > div.side {
flex: 0 0 25%;
max-width: 25%;
}
}
body > div#header {
padding: 0;
}
body > div.content, body[class] > .content {
position: static !important;
right: 0 !important;
bottom: 0 !important;
top: 0 !important;
left: 0 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100%;
background-color: var(--color--core-background);
}
.combined-search-page .side, .combined-search-page .side::before, .search-page .side, .search-page .side::before, .comments-page .side, .comments-page .side::before, .loggedin .side, .loggedin .side::before, body > div.side, body > div.side::before {
position: relative;
right: 0;
bottom: 0;
top: 0;
left: 0;
float: none;
background-color: var(--color--core-background);
margin: 0;
padding: 1rem;
width: 100%;
}
/* endregion */
/* region Header */
/* header layout */
body #header {
position: relative !important;
right: 0 !important;
bottom: 0 !important;
top: 0 !important;
left: 0 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: [start] 1fr [end];
grid-template-rows: [start] auto auto auto [end];
grid-template-areas: "subreddits" "account" "tabs";
position: sticky !important;
top: -4.25rem !important;
overflow: hidden;
border-bottom: 0;
z-index: 99;
height: unset;
line-height: 1;
box-shadow: 0 8px 6px -6px #0000004d;
}
body #header #sr-header-area {
position: relative !important;
right: 0 !important;
bottom: 0 !important;
top: 0 !important;
left: 0 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
grid-area: subreddits;
z-index: 10000;
height: 2rem;
}
body #header #sr-header-area::before {
position: relative;
right: 0;
bottom: 0;
top: 0;
left: 0;
float: none;
height: auto;
min-height: 0;
max-height: 100%;
width: auto;
max-width: 100vw;
min-width: 0;
line-height: 1;
text-indent: unset;
transform: scale(1) translateX(0) translateY(0);
-webkit-transform: scale(1) translateX(0) translateY(0);
-moz-transform: scale(1) translateX(0) translateY(0);
-o-transform: scale(1) translateX(0) translateY(0);
z-index: 0;
margin: 0;
}
body #header #sr-header-area::after {
position: relative;
right: 0;
bottom: 0;
top: 0;
left: 0;
float: none;
height: auto;
min-height: 0;
max-height: 100%;
width: auto;
max-width: 100vw;
min-width: 0;
line-height: 1;
text-indent: unset;
transform: scale(1) translateX(0) translateY(0);
-webkit-transform: scale(1) translateX(0) translateY(0);
-moz-transform: scale(1) translateX(0) translateY(0);
-o-transform: scale(1) translateX(0) translateY(0);
z-index: 0;
margin: 0;
}
body #header #header-bottom-right {
position: relative !important;
right: 0 !important;
bottom: 0 !important;
top: 0 !important;
left: 0 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
grid-area: account;
z-index: 10000;
padding: 0.5rem !important;
height: min-content;
min-height: 2rem;
border-radius: 0;
}
body #header #header-bottom-right::before {
position: relative;
right: 0;
bottom: 0;
top: 0;
left: 0;
float: none;
height: auto;
min-height: 0;
max-height: 100%;
width: auto;
max-width: 100vw;
min-width: 0;
line-height: 1;
text-indent: unset;
transform: scale(1) translateX(0) translateY(0);
-webkit-transform: scale(1) translateX(0) translateY(0);
-moz-transform: scale(1) translateX(0) translateY(0);
-o-transform: scale(1) translateX(0) translateY(0);
z-index: 0;
margin: 0;
}
body #header #header-bottom-right::after {
position: relative;
right: 0;
bottom: 0;
top: 0;
left: 0;
float: none;
height: auto;
min-height: 0;
max-height: 100%;
width: auto;
max-width: 100vw;
min-width: 0;
line-height: 1;
text-indent: unset;
transform: scale(1) translateX(0) translateY(0);
-webkit-transform: scale(1) translateX(0) translateY(0);
-moz-transform: scale(1) translateX(0) translateY(0);
-o-transform: scale(1) translateX(0) translateY(0);
z-index: 0;
margin: 0;
}
body #header #header-bottom-left {
position: relative !important;
right: 0 !important;
bottom: 0 !important;
top: 0 !important;
left: 0 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
justify-content: flex-start;
display: flex;
flex-wrap: wrap;
align-items: stretch;
grid-area: tabs;
z-index: 10000;
min-height: 3rem;
max-height: 6rem;
}
body #header #header-bottom-left::before {
position: relative;
right: 0;
bottom: 0;
top: 0;
left: 0;
float: none;
height: auto;
min-height: 0;
max-height: 100%;
width: auto;
max-width: 100vw;
min-width: 0;
line-height: 1;
text-indent: unset;
transform: scale(1) translateX(0) translateY(0);
-webkit-transform: scale(1) translateX(0) translateY(0);
-moz-transform: scale(1) translateX(0) translateY(0);
-o-transform: scale(1) translateX(0) translateY(0);
z-index: 0;
margin: 0;
}
body #header #header-bottom-left::after {
position: relative;
right: 0;
bottom: 0;
top: 0;
left: 0;
...