Patreon website is more suitable for wide screens.
Per
/* ==UserStyle==
@name Patreon responsive + customizations
@version 1.1.13
@description Patreon website is more suitable for wide screens.
@author BreatFR (https://breat.fr)
@namespace https://gitlab.com/breatfr
@homepageURL https://gitlab.com/breatfr/patreon
@supportURL https://discord.gg/Q8KSHzdBxs
@license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor stylus
@var checkbox bigimages "Big images" 1
@var text fontsize "Custom font size" 1.2rem
@var checkbox nojump "No Jump to level up" 1
@var checkbox nocomments "No comments" 0
@var checkbox widemode "Wide mode" 1
==/UserStyle== */
/* === Credits ===
Website https://breat.fr
facebook https://www.facebook.com/breatfroff
mastodon https://mastodon.social/@breat_fr
telegram https://t.me/breatfr
vk https://vk.com/breatfroff
X (twitter) https://x.com/breatfroff
=== Credits === */
@-moz-document domain("patreon.com") {
:root {
--fontsize: fontsize;
}
/* Loved */
[data-tag="like-button"][aria-checked="true"] > div > svg path {
fill: #c6374d;
}
/* No double scrollbar */
#__next > .sc-uiqay7-0.cnwZin {
overflow: hidden;
}
/* Custom font size */
:root,
button,
div,
input,
label,
[data-tag*="settings"],
li,
p,
p span,
[data-tag="chats-send-message-form"] textarea,
[data-tag="comment-field"],
.cuiKYE,
.cQjDCC,
.fxePXf,
.jYEggK {
font-size: fontsize !important;
}
.vWGl {
font-size: calc(var(--fontsize) - .2rem)!important;
}
span > .vWGl {
font-size: inherit !important;
}
.gxOVkK {
font-size: calc(var(--fontsize) - .4rem)!important;
}
if nocomments {
[data-tag="content-card-comment-thread-container"],
.bmnjsr {
display: none !important;
}
}
if nojump {
.sc-jrQzAO.bAzCwM,
.sc-o4u8m1-2 > div > div:nth-child(2),
[data-tag="upgrade-incentive-description"],
[data-tag="upgrade-free-membership-button"],
[data-tag="free-membership-upgrade-cta"] {
display: none !important;
height: 0 !important;
max-height: 0 !important;
}
}
if widemode {
main > section > div,
main > div:nth-of-type(2),
main > div:nth-of-type(2) > div > div,
main > div > div > section > div {
max-width: 100% !important;
}
[data-tag="account-menu"] {
max-width: max-content;
}
}
}
@-moz-document url("https://www.patreon.com/home") {
if bigimages {
* {
aspect-ratio: auto !important;
}
[data-cardlayout-edgeless="false"] > div > div > div > div > div:nth-of-type(1) {
height: auto;
width: 100%;
}
[data-cardlayout-edgeless="false"] > div > div > div > div > div:nth-of-type(2) {
max-width: 100%;
width: 100%;
}
[data-cardlayout-edgeless="false"] > div > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) {
max-width: 97%;
}
[data-cardlayout-edgeless="false"] > div > div > div:nth-of-type(1),
[data-cardlayout-edgeless="false"] > div > div > div:nth-of-type(1) > div,
[data-cardlayout-edgeless="false"] > div > div > div > div > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) {
display: flex;
flex-wrap: wrap;
height: auto;
min-width: 100%;
}
img,
[data-cardlayout-edgeless="false"] > div > div,
.image-grid img {
aspect-ratio: auto !important;
display: block !important;
height: auto !important;
max-height: 100%;
max-width: 100% !important;
min-width: 100% !important;
}
img[loading="eager"] {
aspect-ratio: 1 / 1 !important;
height: 100% !important;
object-fit: cover !important;
}
.image-grid + .image-grid {
margin-top: 2px;
}
.image-carousel {
border-radius: .5em;
height: 135px;
width: auto !important;
}
[data-cardlayout-edgeless="false"] > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) {
justify-content: space-evenly;
}
/* Little unblur */
.dgyaSI {
background: transparent !important;
opacity: 0 !important;
}
.image-grid > div {
opacity: 0 !important;
}
.image-grid > div,
.image-grid > img {
background: transparent !important;
filter: blur(0) !important;
height: auto !important;
min-width: 100% !important;
}
[data-tag="locked-badge-button"] p {
padding-right: 3em;
}
[width="fluid"] a {
max-width: 96% !important;
overflow: hidden !important;
}
a,
img,
.jQZWvF {
overflow: hidden !important;
}
}
if widemode {
main > div > section > div {
max-width: 100% !important;
}
main > section > div > div:nth-of-type(1) > div > div:has(img:nth-of-type(3)) {
height: 200px;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/home"), regexp("https://www\\.patreon\\.com/[^/]+/home\\?[^/]*") {
if widemode {
[data-tag="about-patron-view"] {
max-width: 100% !important;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/[^/]+/posts") {
if bigimages {
* {
aspect-ratio: auto !important;
}
[data-cardlayout-edgeless="false"] > div > div > div > div > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) {
display: flex;
flex-wrap: wrap;
height: auto;
}
[data-cardlayout-edgeless="false"] > div > div > div > div > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) {
border-radius: .5em;
}
img,
div[elevation="subtle"] > div,
.djipQD > .image-grid {
display: block !important;
height: auto !important;
max-height: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
object-fit: contain !important;
}
img[loading="eager"] {
aspect-ratio: 1 / 1 !important;
height: 100% !important;
object-fit: cover !important;
}
.image-grid + .image-grid {
margin-top: 2px;
}
.image-carousel {
height: 135px;
width: auto !important;
}
.hUghED > div > div:nth-of-type(1) > div:nth-of-type(2) {
justify-content: space-evenly;
}
/* Little unblur */
.dgyaSI {
background: transparent !important;
opacity: 0 !important;
}
.image-grid > div {
opacity: 0 !important;
}
.image-grid > div,
.image-grid > img {
background: transparent !important;
filter: blur(0) !important;
min-width: 100% !important;
object-fit: contain !important;
}
[data-tag="locked-badge-button"] p {
padding-right: 3em;
}
[width="fluid"] a {
max-width: 96% !important;
overflow: hidden !important;
}
header {
height: 417px !important;
}
a,
img,
.jQZWvF {
overflow: hidden !important;
}
}
if widemode {
main > div > div > div > div > div:nth-of-type(4) > div:nth-of-type(2) {
max-width: 100% !important;
}
main > div > div > div > div > div > div:nth-of-type(2) > div > div {
grid-template-columns: 1fr auto auto !important;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/collections") {
if widemode {
main > div > div > div > div > div:nth-of-type(4) > div {
max-width: 100% !important;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/c/[^/]+/membership") {
if widemode {
main > div:nth-of-type(1) > div > div {
margin-bottom: 0;
}
[data-tag="membership-patron-view"],
[data-tag="membership-patron-view"] > div:nth-of-type(5) > div:nth-of-type(2) > div:nth-of-type(2) > div > div > div {
max-width: 100% !important;
}
[data-tag="membership-patron-view"] > div:nth-of-type(5) > div:nth-of-type(2) > div:nth-of-type(2) > div > div > div > div {
max-width: calc(33% - 10px);
width: auto;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/about") {
div.sc-xac35p-1.jhLQmG {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
width: 100% !important;
}
header {
height: 417px !important;
}
.sc-gIBqdA.hVkHgO > div > div.sc-jrQzAO.bmnjsr {
padding-right: 2em;
}
if widemode {
main > div > div > div > div > div:nth-of-type(4) > div {
max-width: 100% !important;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/messages/[^?]+\\?mode=user&tab=direct-messages") {
if widemode {
[data-tag="chat-message"] > div {
max-width: 100% !important;
}
[data-tag="chat-message"] > div > div {
max-width: 100% !important;
}
}
}
@-moz-document url-prefix("https://www.patreon.com/notifications") {
if widemode {
#__next > div:nth-child(5) > div {
max-width: 100% !important;
}
}
}
@-moz-document url-prefix("https://www.patreon.com/settings") {
if widemode {
#__next > div:nth-child(5) > div,
main > div > div > div {
max-width: 100% !important;
}
}
}
@-moz-document url-prefix("https://www.patreon.com/posts") {
if bigimages {
* {
aspect-ratio: auto !important;
}
[data-tag="post-card"] > div > div > div > div > div:nth-of-type(1) > div > div > div {
max-width: 98% !important;
}
[data-tag="post-card"] > div > div > div > div > div:nth-of-type(1) > div > div > div > div > div:nth-of-type(1) {
display: flex;
flex-wrap: wrap;
height: auto;
}
[data-tag="post-card"] > div > div > div > div > div:nth-of-type(1) > div > div > div > div > div {
border-radius: .5em;
}
img,
[data-cardlayout-edgeless="false"] > div > div,
.image-grid img {
aspect-ratio: auto !important;
display: block !important;
height: auto !important;
max-height: 100%;
max-width: 100% !important;
min-width: 100% !important;
}
img[loading="eager"] {
aspect-ratio: 1 / 1 !important;
height: 100% !important;
object-fit: cover !important;
}
.image-grid + .image-grid {
margin-top: 2px;
}
.image-carousel {
height: 112px;
object-fit: contain;
width: auto !important;
}
/* Little unblur */
.dgyaSI {
background: transparent !important;
opacity: 0 !important;
}
.image-grid > img {
background: transparent !important;
object-fit: contain !important;
min-width: 100% !important;
}
[data-tag="locked-badge-button"] p {
padding-right: 3em;
}
[width="fluid"] a {
max-width: 96% !important;
overflow: hidden !important;
}
header {
height: 0 !important;
}
a,
img,
.jQZWvF {
overflow: hidden !important;
}
if widemode {
main > div > div > div > div > div {
max-width: 100% !important;
}
main > div > div > div > div > div > div:nth-of-type(2) > div:nth-of-type(3) {
grid-template-columns: 1fr auto auto !important;
min-width: 100% !important;
}
[data-tag="post-card"] p {
padding-right: 20px !important;
white-space: break-spaces !important;
}
.cm-bkfFMV.cm-bkfFMV {
padding: 0 1em;
max-width: 100%;
}
[data-tag="content-card-comment-thread-container"] {
padding-right: 50px !important;
}
}
}
if nojump {
main > div > div > div > div > div > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > div > div:first-child {
display: none;
height: 0;
margin-top: 0;
z-index: -9999;
}
}
}
@-moz-document url("https://www.patreon.com/posts/published"), url("https://www.patreon.com/posts/drafts") {
if widemode {
body > div > div > div:last-child > div:first-child,
main > div,
main > div > div,
main > div > div > div {
max-width: 100% !important;
}
main > div > div {
padding-left: 0 !important;
margin-left: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
main > div > div > div {
margin-top: 100px !important;
}
[data-cardlayout-edgeless="true"] > div > div > div:last-child {
padding-right: 40px !important;
}
}
}
@-moz-document url("https://www.patreon.com/collections") {
if widemode {
body > div > div > div:last-child > div:first-child,
main > div,
main > div > div,
main > div > div > div {
max-width: 100% !important;
}
main > div > div {
padding-left: 0 !important;
margin-left: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
[data-cardlayout-edgeless="true"] > div > div > div:last-child {
padding-right: 40px !important;
}
}
}
@-moz-document regexp("^https://www\\.patreon\\.com/posts/[^/]+/edit$") {
if widemode {
body > div:first-child > div:first-child > div:nth-of-type(4),
body > div:first-child > div:first-child > div:nth-of-type(4) > div:first-child {
max-width: 100% !important;
}
main > div > div > div > div > div,
main > div > div > div > div > div > div {
margin-left: -150px !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
[data-cardlayout-edgeless="true"] > div > div > div:last-child {
padding-right: 40px !important;
}
}
}