Patreon website is more suitable for wide screens.
Vous pourriez également aimer Patreon Post Images Downloader.
/* ==UserStyle==
@name Patreon responsive + customizations
@version 1.1.27
@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 hidescrollbars "Hide scrollbars" 1
@var checkbox noapp "No get app" 1
@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") {
/* Whole website */
:root {
--fontsize: fontsize;
}
if hidescrollbars {
*,
:root ::-webkit-scrollbar {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
}
::-webkit-scrollbar {
display: none;
width: 0;
}
}
/* 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 noapp {
button:has([data-tag="IconPhone"]) {
display: none;
}
}
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") {
/* 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;
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 > 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 */
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") {
/* Home profile */
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 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 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;
}
}
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 */
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 {
header > div:nth-of-type(1) > picture > img {
object-fit: cover !important;
}
main#renderPageContentWrapper > div:nth-of-type(1) > div > div:last-of-type > div:nth-of-type(2),
[class*="colorSystemContainer-"] > div > div > div:last-of-type > div:nth-of-type(2),
[data-tag="age-gate-blur"] > div {
max-width: 100% !important;
}
[data-tag="post-stream-container"] > div,
[data-tag="cw-post-stream-container"] > div {
grid-template-columns: 1fr auto 500px !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 */
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;
}
}
}