Patreon website interface is reworked to offer a cleaner and comfortable experience on desktop, with visual adjustments that adapt to your needs.
/* ==UserStyle==
@name Patreon optimized & customizable for wide screens
@description Patreon website interface is reworked to offer a cleaner and comfortable experience on desktop, with visual adjustments that adapt to your needs.
@version 1.1.28
@author BreatFR (https://breat.fr)
@namespace https://breat.fr
@homepageURL https://usercssjs.breat.fr/p/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 hidecomments "Hide comments" 0
@var checkbox hideapp "Hide get app" 1
@var checkbox hidejump "Hide jump to level up" 1
@var checkbox hidescrollbars "Hide scrollbars" 1
@var checkbox widemode "Wide mode" 1
==/UserStyle== */
/* ==Credits==
Website https://breat.fr
Bluesky https://bsky.app/profile/breatfroff.bsky.social
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== */
/* ==Support==
brave Creators https://publishers.basicattentiontoken.org/c/breatfr
Buy me a coffee https://buymeacoffee.com/breatfr
ko-fi https://ko-fi.com/breatfr
PayPal https://paypal.me/breat
==/Support== */
@-moz-document domain("patreon.com") {
/* Whole website */
/* Versions */
:root {
--themeversion: 'Theme v1.1.28 by BreatFR (https://breat.fr)';
--install: ' usercssjs.breat.fr/p/patreon';
--help: ' discord.gg/Q8KSHzdBxs';
--support1: ' ko-fi.com/breatfr ';
--support2: ' paypal.me/breat';
--fontsize: fontsize;
}
@media screen and (min-width: 900px) {
body::after,
body::before {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
color: transparent;
display: block;
font-family: inherit;
font-size: inherit;
line-height: calc(56px / 2);
pointer-events: none;
position: fixed;
text-align: center;
top: 0;
width: auto;
white-space: pre-line;
z-index: 9999;
}
body::after {
content: var(--themeversion) '\A Help: ' url("https://code.breat.fr/share/images/icons/discord.png") var(--help);
left: 25%;
}
body::before {
content: 'Install & Infos: ' url("https://code.breat.fr/share/images/icons/breat.fr.png") var(--install) '\A Support me: ' url("https://code.breat.fr/share/images/icons/ko-fi.png") var(--support1) ' · ' url("https://code.breat.fr/share/images/icons/paypal.png") var(--support2);
right: 15%;
}
}
if hideapp {
button:has([data-tag="IconPhone"]) {
display: none;
}
}
if hidecomments {
[data-tag="content-card-comment-thread-container"],
.bmnjsr {
display: none !important;
}
}
if hidejump {
[data-tag="home-patron-view"] > div:nth-of-type(1):has([href*="/join"]),
div:has(> [href*="/join"]),
div:has([href*="/join"])::after,
div:has(> div > h2):has(a[href*="/gift"]),
[data-tag="creator-header-see-membership-options"],
[data-tag="free-membership-upgrade-cta"],
[data-tag="upgrade-incentive-description"],
[data-tag="upgrade-free-membership-button"] {
display: none !important;
height: 0 !important;
max-height: 0 !important;
max-width: 0 !important;
width: 0 !important;
}
[style*="--creator-world-intro-md-width"] div + button {
order: -1;
}
}
if hidescrollbars {
*:not([data-tag="post-card"] *) {
scrollbar-width: none !important;
}
}
/* 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,
a:not(#kemono-search-button),
button,
div,
h3,
input,
label,
li,
p,
p span,
[data-tag="account-menu"] *,
[data-tag*="settings"],
[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 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"] > div > div {
width: auto;
}
}
}
@-moz-document url("https://www.patreon.com/home") {
/* Home */
/* Versions */
@media screen and (min-width: 900px) {
body::after {
left: 30%;
}
body::before {
right: 10%;
}
}
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;
flex: 1 0 100%;
height: auto;
min-width: 100%;
}
[data-cardlayout-edgeless="false"] > div > div > div:nth-of-type(1) > div {
flex-direction: column;
}
[data-cardlayout-edgeless="false"] > div > div > div:nth-of-type(1) > div > div {
height: auto;
min-width: 100%;
}
img:not([data-tag="lightboxImage"]),
[data-image-container="true"],
[data-cardlayout-edgeless="false"] > div > div,
.image-grid img {
aspect-ratio: auto !important;
display: block !important;
height: auto !important;
max-height: 100% !important;
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:nth-of-type(1) > div > div,
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 url-prefix("https://www.patreon.com/explore") {
/* Explore */
/* Versions */
@media screen and (min-width: 900px) {
body::after {
left: 15%;
}
body::before {
right: 10%;
}
}
if widemode {
main > div:nth-of-type(1) > div:nth-of-type(2) {
margin: 0 !important;
max-width: 100% !important;
}
main > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
main > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div {
width: 370px;
}
main > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) [href*="https://www.patreon.com/"] p {
-webkit-line-clamp: unset;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+"), regexp("https://www\\.patreon\\.com/[^/]+/[^/]+"), regexp("https://www\\.patreon\\.com/[^/]+/[^/]+/home"), regexp("https://www\\.patreon\\.com/[^/]+/[^/]+/home\\?vanity=.*") {
/* Home profile */
/* Versions */
@media screen and (min-width: 900px) {
body::after {
left: 25%;
}
body::before {
right: 10%;
}
}
if widemode {
[data-tag="age-gate-blur"] > div:nth-of-type(1) > div:nth-of-type(2) > div,
[data-tag="age-gate-blur"] > div:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2),
[data-tag="home-patron-view"],
[data-tag="post-card"] > div > div > div > div > div:nth-of-type(1) > div > div > div,
[data-tag="post-card"] > div > div > div > div > div:nth-of-type(3) > div > div,
main > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div {
max-width: 100% !important;
}
[data-tag="post-card"] > div > div > div > div > div:nth-of-type(1) > div > div > div,
[data-tag="post-card"] > div > div > div > div > div:nth-of-type(3) > div > div {
margin: 0 1em;
}
[data-tag="creator-world-home-header-cover-photo"] {
bottom: auto;
top: 0;
}
[data-tag="creator-world-home-header-cover-photo"] > div {
margin-left: 0;
max-width: unset;
}
[style*="--truncated-summary-md-width"] {
-webkit-line-clamp: 8 !important;
line-clamp: 8 !important;
}
}
}
@-moz-document url-prefix("https://www.patreon.com/posts/") {
/* Post */
if hidejump {
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;
}
}
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:nth-of-type(1) > div:nth-of-type(2) {
flex-direction: column;
height: auto;
overflow: hidden;
}
[data-tag="post-card"] > div > div > div > div > div:nth-of-type(1) > div > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div {
height: auto;
overflow: hidden;
}
[data-tag="post-card"] > div > div > div > div > div:nth-of-type(1) > div > div > div > div > div {
border-radius: .5em;
}
img:not([data-tag="lightboxImage"]),
[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 widemode {
[data-tag="home-patron-view"],
[data-tag="age-gate-blur"] > div:nth-of-type(1) > div:nth-of-type(1) > div > div:nth-of-type(3) > div,
[data-tag="age-gate-blur"] > div:nth-of-type(1) > div:nth-of-type(2) > div {
max-width: 100% !important;
}
[data-tag="post-card"] > div > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) {
display: flex;
flex-wrap: wrap;
height: auto;
}
[data-tag="age-gate-blur"] > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(1) > div {
flex-direction: column;
}
[data-tag="age-gate-blur"] > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(1) > div > div {
min-height: 100%;
height: auto;
min-width: 100%;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/[^/]+/posts(\\?.*)?") {
/* Posts */
/* Versions */
@media screen and (min-width: 900px) {
body::after {
left: 20%;
}
body::before {
right: 30%;
}
}
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) > div {
flex-direction: column;
}
[data-cardlayout-edgeless="false"] > div > div > div > div > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div > div {
min-height: 100%;
height: auto;
min-width: 100%;
}
[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:not([data-tag="lightboxImage"]),
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 {
border-radius: .5em;
height: 135px;
width: auto !important;
}
.hlTBMb > 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:nth-of-type(4) > div:nth-of-type(2) {
max-width: 100% !important;
}
[data-tag="post-stream-container"] > div,
[data-tag="cw-post-stream-container"] > div {
grid-template-columns: 1fr auto 500px;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/[^/]+/chats(\\?.*)?") {
/* Chats */
if widemode {
[data-tag="chats-view"] {
max-width: 100% !important;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/[^/]+/shop") {
/* Shop */
if widemode {
[class*="colorSystemContainer-"] > div {
max-width: 100% !important;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/[^/]+/collections(\\?.*)?") {
/* Collections */
if widemode {
[data-tag="collections-view"] {
max-width: 100% !important;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/[^/]+/membership(\\?.*)?") {
/* 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(4) > div:nth-of-type(2) > div:nth-of-type(2) > div > div > div,
[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 {
justify-content: space-evenly;
}
[data-tag="membership-patron-view"] > div:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div > div > div > div,
[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;
}
/* Membership card */
[data-tag="membership-patron-view"] > div:nth-of-type(3) > div > div:nth-of-type(3) > div {
height: auto;
}
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/[^/]+?newFreeMembership=true"), regexp("https://www\\.patreon\\.com/[^/]+/[^/]+/[^/]+?newFreeMembership=true") {
/* New Free Membership */
#free-membership-signup-success-takeover > div > div {
max-width: 100%;
}
#free-membership-signup-success-takeover > div > div > div:nth-of-type(4) > div:nth-of-type(2) > div > div:nth-of-type(1) > div:nth-of-type(2) {
flex-wrap: wrap;
justify-content: space-evenly;
max-width: 100%;
}
}
@-moz-document regexp("https://www\\.patreon\\.com/[^/]+/[^/]+"), regexp("https://www\\.patreon\\.com/[^/]+/[^/]+/about") {
/* About */
div.sc-xac35p-1.jhLQmG {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
width: 100% !important;
}
[data-tag="creator-public-page-cover"] {
height: 417px !important;
}
.sc-gIBqdA.hVkHgO > div > div.sc-jrQzAO.bmnjsr {
padding-right: 2em;
}
if widemode {
main {
overflow-x: hidden;
}
[data-tag="age-gate-blur"] > div > div:nth-of-type(3) > div,
[data-tag="about-patron-view"] {
margin-top: auto !important;
max-width: 100% !important;
}
}
}
@-moz-document url-prefix("https://www.patreon.com/messages") {
/* Messages */
/* Versions */
@media screen and (min-width: 900px) {
body::after {
left: 12.5%;
}
body::before {
right: 10%;
}
}
if widemode {
[data-tag="chat-message"] > div {
max-width: 100% !important;
}
[data-tag="chat-message"] > div > div {
max-width: 100% !important;
}
[data-tag="chat-message"] {
flex-wrap: wrap;
max-width: 100% !important;
width: auto !important;
}
body > div > div:nth-of-type(4) > div {
padding: 0 !important;
}
main > div {
box-sizing: border-box;
margin: 0 !important;
}
main > div:nth-of-type(1) > div:nth-of-type(1) {
max-width: 620px !important;
width: auto !important;
}
[data-tag*="chat-list-item-"] {
height: auto;
}
[data-tag*="unread-count-"] {
align-items: center !important;
display: inline-flex !important;
justify-content: center !important;
height: fontsize !important;
padding: 0 !important;
width: fontsize !important;
}
[data-tag*="unread-count-"] > div {
height: fontsize !important;
padding: 0 !important;
width: fontsize !important;
}
[data-tag*="unread-count-"] > div > div {
font-weight: normal !important;
height: fontsize !important;
width: fontsize !important;
}
header {
height: fit-content !important;
}
.chat-message-text-content {
min-width: 0 !important;
width: auto !important;
}
.fIrezf,
#send-message {
display: flex !important;
grid-area: unset !important;
height: auto !important;
max-height: unset !important;
max-width: 100% !important;
min-width:100% !important;
width:100% !important;
}
}
}
@-moz-document url-prefix("https://www.patreon.com/notifications") {
/* Notifications */
if widemode {
#__next > div:nth-child(5) > div {
max-width: 100% !important;
}
}
}
@-moz-document url-prefix("https://www.patreon.com/settings") {
/* Settings */
if widemode {
#__next > div:nth-child(5) > div,
main > div > div > div {
max-width: 100% !important;
}
}
}
@-moz-document url("https://www.patreon.com/posts/published"), url("https://www.patreon.com/posts/drafts") {
/* Published and 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") {
/* Our 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$") {
/* Edit posts */
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;
}
}
}