☰

Greasy Fork is available in English.

Patreon responsive + customizations

Patreon website is more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name           Patreon responsive + customizations
  3. @version        1.1.7
  4. @description    Patreon website is more suitable for wide screens.
  5. @author         BreatFR (https://breat.fr)
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/patreon
  8. @supportURL     https://discord.gg/Q8KSHzdBxs
  9. @license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor   stylus
  11.  
  12. @var    checkbox    bigimages   "Big images"            1
  13. @var    text        fontsize    "Custom font size"      1.2rem
  14. @var    checkbox    nojump      "No Jump to level up"   1
  15. @var    checkbox    nocomments  "No comments"           0
  16. @var    checkbox    widemode    "Wide mode"             1
  17. ==/UserStyle== */
  18.  
  19. /* === Credits ===
  20. Website         https://breat.fr
  21. facebook        https://www.facebook.com/breatfroff
  22. mastodon        https://mastodon.social/@breat_fr
  23. telegram        https://t.me/breatfr
  24. vk              https://vk.com/breatfroff
  25. X (twitter)     https://x.com/breatfroff
  26. === Credits === */
  27. @-moz-document domain("patreon.com") {
  28.     :root {
  29.         --fontsize: fontsize;
  30.     }
  31.     
  32.     /* Loved */
  33.     [data-tag="like-button"][aria-checked="true"] > div > svg path {
  34.         fill: #c6374d;
  35.     }
  36.     
  37.     /* No double scrollbar */
  38.     #__next > .sc-uiqay7-0.cnwZin {
  39.         overflow: hidden;
  40.     }
  41.         
  42.     /* Custom font size */
  43.     :root,
  44.     button,
  45.     div,
  46.     input,
  47.     label,
  48.     [data-tag*="settings"],
  49.     li,
  50.     p,
  51.     p span,
  52.     [data-tag="chats-send-message-form"] textarea,
  53.     [data-tag="comment-field"],
  54.     .cuiKYE,
  55.     .cQjDCC,
  56.     .fxePXf,
  57.     .jYEggK {
  58.         font-size: fontsize !important;
  59.     }    
  60.     .vWGl {
  61.         font-size: calc(var(--fontsize) - .2rem)!important;
  62.     }
  63.     span > .vWGl {
  64.         font-size: inherit !important;
  65.     } 
  66.     .gxOVkK {
  67.         font-size: calc(var(--fontsize) - .4rem)!important;
  68.     }
  69.     
  70.     if nocomments {
  71.         [data-tag="content-card-comment-thread-container"],
  72.         .bmnjsr {
  73.             display: none !important;
  74.         }
  75.     }
  76.     
  77.     if nojump {
  78.         .sc-jrQzAO.bAzCwM,
  79.         .sc-o4u8m1-2 > div > div:nth-child(2),
  80.         [data-tag="upgrade-incentive-description"],
  81.         [data-tag="upgrade-free-membership-button"],
  82.         [data-tag="free-membership-upgrade-cta"] {
  83.             display: none !important;
  84.             height: 0 !important;
  85.             max-height: 0 !important;
  86.         }
  87.     }
  88.     
  89.     if widemode {
  90.         [data-tag="account-menu"] {
  91.             max-width: max-content;
  92.         }
  93.     }
  94. }
  95.  
  96. @-moz-document url("https://www.patreon.com/home") {
  97.     if bigimages {
  98.         * {
  99.             aspect-ratio: auto !important;
  100.         }
  101.         .dofSdt img {
  102.             min-width: 100% !important;
  103.             object-fit: cover !important;
  104.         }  
  105.         [data-tag="launcher-post-card"] > div > div > div > [elevation="subtle"] div:not([data-tag="post-details"] div,[data-tag="content-card-comment-thread-container"] div,div[width="fluid"] div,[data-tag="locked-badge-button"] div,[data-tag="chip-container"],.jhLQmG,.jhLQmG div,.dgQBHC) {
  106.             display: flex !important;
  107.             flex-basis: 100% !important;
  108.             flex-direction: column !important;
  109.             max-width: 100% !important;
  110.         }
  111.         img,
  112.         div[elevation="subtle"] > div,
  113.         .djipQD > .image-grid {
  114.             display: block !important;
  115.             height: auto !important;
  116.             max-height: 100% !important;
  117.             min-width: 100% !important;
  118.             object-fit: contain !important;
  119.         }
  120.         img[loading="eager"] {
  121.             width: auto !important;
  122.         }
  123.         .image-grid + .image-grid {
  124.             margin-top: 2px;
  125.         }
  126.         
  127.         .image-carousel {
  128.             height: 112px;
  129.             object-fit: contain;
  130.             width: auto !important;
  131.         }
  132.         /* Little unblur */
  133.         .dgyaSI {
  134.             background: transparent !important;
  135.             opacity: 0 !important;
  136.         }
  137.         .image-grid > img {
  138.             background: transparent !important;
  139.             object-fit: contain !important;
  140.             min-width: 100% !important;
  141.         }
  142.         [data-tag="locked-badge-button"] p {
  143.             padding-right: 3em;
  144.         }
  145.         [width="fluid"] a {
  146.             max-width: 96% !important;
  147.             overflow: hidden !important;
  148.         }
  149.         
  150.         header {
  151.             height: 0 !important;
  152.         }
  153.         
  154.         a,
  155.         img,
  156.         .jQZWvF {
  157.             overflow: hidden !important;
  158.         }
  159.     }
  160.     
  161.     if widemode {
  162.         main > div > section > div {
  163.             max-width: 100% !important;
  164.         }
  165.     }
  166. }
  167.  
  168. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/home"), regexp("https://www\\.patreon\\.com/[^/]+/home\\?[^/]*") {
  169.     if widemode {
  170.         [data-tag="about-patron-view"] {
  171.             max-width: 100% !important;
  172.         }
  173.     }
  174. }
  175.  
  176. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/posts") {
  177.     if bigimages {
  178.         * {
  179.             aspect-ratio: auto !important;
  180.         }
  181.         .dofSdt img {
  182.             min-width: 100% !important;
  183.             object-fit: cover !important;
  184.         }  
  185.         [data-tag="post-card"] > div > div > [elevation="subtle"] div:not([data-tag="post-details"] div,[data-tag="content-card-comment-thread-container"] div,div[width="fluid"] div,[data-tag="locked-badge-button"] div,[data-tag="chip-container"],.jhLQmG,.jhLQmG div,.dgQBHC) {
  186.             display: flex !important;
  187.             flex-basis: 100% !important;
  188.             flex-direction: column !important;
  189.             max-width: 100% !important;
  190.         }
  191.         img,
  192.         div[elevation="subtle"] > div,
  193.         .djipQD > .image-grid {
  194.             display: block !important;
  195.             height: auto !important;
  196.             max-height: 100% !important;
  197.             max-width: 100% !important;
  198.             min-width: 100% !important;
  199.             object-fit: contain !important;
  200.         }
  201.         
  202.         img[loading="eager"] {
  203.             aspect-ratio: 1 / 1 !important;
  204.             height: 100% !important;
  205.             object-fit: cover !important;
  206.         }
  207.         .image-grid + .image-grid {
  208.             margin-top: 2px;
  209.         }
  210.         
  211.         .image-carousel {
  212.             height: 112px;
  213.             object-fit: contain;
  214.             width: auto !important;
  215.         }
  216.         /* Little unblur */
  217.         .dgyaSI {
  218.             background: transparent !important;
  219.             opacity: 0 !important;
  220.         }
  221.         .image-grid > img {
  222.             background: transparent !important;
  223.             object-fit: contain !important;
  224.             min-width: 100% !important;
  225.         }
  226.         [data-tag="locked-badge-button"] p {
  227.             padding-right: 3em;
  228.         }
  229.         [width="fluid"] a {
  230.             max-width: 96% !important;
  231.             overflow: hidden !important;
  232.         }
  233.         
  234.         header {
  235.             height: 417px !important;
  236.         }
  237.         
  238.         a,
  239.         img,
  240.         .jQZWvF {
  241.             overflow: hidden !important;
  242.         }
  243.     }
  244.     
  245.     if widemode {
  246.         main > div > div > div > div > div:nth-of-type(4) > div:nth-of-type(2) {
  247.             max-width: 100% !important;
  248.         }
  249.             
  250.         main > div > div > div > div > div > div:nth-of-type(2) > div > div {
  251.             grid-template-columns: 1fr auto auto !important;
  252.         }
  253.     }
  254. }
  255.  
  256. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/collections") {
  257.     if widemode {
  258.         main > div > div > div > div > div:nth-of-type(4) > div {
  259.             max-width: 100% !important;
  260.         }
  261.     }
  262. }
  263.  
  264. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/membership") {
  265.     if widemode {
  266.         main > div > div > div > div > div:nth-of-type(4) > div {
  267.             max-width: 100% !important;
  268.         }
  269.     }
  270. }
  271.  
  272. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/about") {
  273.     div.sc-xac35p-1.jhLQmG {
  274.         display: flex !important;
  275.         flex-direction: row !important;
  276.         justify-content: space-between !important;
  277.         width: 100% !important;
  278.     }
  279.     header {
  280.         height: 417px !important;
  281.     }
  282.     .sc-gIBqdA.hVkHgO > div > div.sc-jrQzAO.bmnjsr {
  283.         padding-right: 2em;
  284.     }
  285.     
  286.     if widemode {
  287.         main > div > div > div > div > div:nth-of-type(4) > div {
  288.             max-width: 100% !important;
  289.         }
  290.     }
  291. }
  292.  
  293. @-moz-document regexp("https://www\\.patreon\\.com/messages/[^?]+\\?mode=user&tab=direct-messages") {
  294.     if widemode {
  295.         [data-tag="chat-message"] > div {
  296.             max-width: 100% !important;
  297.         }
  298.         [data-tag="chat-message"] > div > div {
  299.             max-width: 100% !important;
  300.         }
  301.     }
  302. }
  303.  
  304. @-moz-document url-prefix("https://www.patreon.com/notifications") {
  305.     if widemode {
  306.         #__next > div:nth-child(5) > div {
  307.             max-width: 100% !important;
  308.         }
  309.     }
  310. }
  311.  
  312. @-moz-document url-prefix("https://www.patreon.com/settings") {
  313.     if widemode {
  314.         #__next > div:nth-child(5) > div,
  315.         main > div > div > div {
  316.             max-width: 100% !important;
  317.         }
  318.     }
  319. }
  320.  
  321. @-moz-document url-prefix("https://www.patreon.com/posts") {
  322.     if bigimages {
  323.         * {
  324.             aspect-ratio: auto !important;
  325.         }
  326.         .dofSdt img {
  327.             min-width: 100% !important;
  328.             object-fit: cover !important;
  329.         }  
  330.         [data-tag="post-card"] > div > div > [elevation="subtle"] div:not([data-tag="post-details"] div,[data-tag="content-card-comment-thread-container"] div,div[width="fluid"] div,[data-tag="locked-badge-button"] div,[data-tag="chip-container"],.jhLQmG,.jhLQmG div,.dgQBHC) {
  331.             display: flex !important;
  332.             flex-basis: 100% !important;
  333.             flex-direction: column !important;
  334.             max-width: 100% !important;
  335.         }
  336.         img,
  337.         div[elevation="subtle"] > div,
  338.         .djipQD > .image-grid {
  339.             height: auto !important;
  340.             max-height: 100% !important;
  341.             max-width: 100% !important;
  342.             min-width: 100% !important;
  343.             object-fit: contain !important;
  344.         }
  345.         
  346.         img[loading="eager"] {
  347.             aspect-ratio: 1 / 1 !important;
  348.             height: 100% !important;
  349.             object-fit: cover !important;
  350.         }
  351.         .image-grid + .image-grid {
  352.             margin-top: 2px;
  353.         }
  354.         
  355.         .image-carousel {
  356.             height: 112px;
  357.             object-fit: contain;
  358.             width: auto !important;
  359.         }
  360.         
  361.         /* Little unblur */
  362.         .dgyaSI {
  363.             background: transparent !important;
  364.             opacity: 0 !important;
  365.         }
  366.         .image-grid > img {
  367.             background: transparent !important;
  368.             object-fit: contain !important;
  369.             min-width: 100% !important;
  370.         }
  371.         [data-tag="locked-badge-button"] p {
  372.             padding-right: 3em;
  373.         }
  374.         [width="fluid"] a {
  375.             max-width: 96% !important;
  376.             overflow: hidden !important;
  377.         }
  378.         
  379.         header {
  380.             height: 0 !important;
  381.         }
  382.         
  383.         a,
  384.         img,
  385.         .jQZWvF {
  386.             overflow: hidden !important;
  387.         }
  388.     
  389.         if widemode {
  390.             main > div > div > div > div > div {
  391.                 max-width: 100% !important;
  392.             }
  393.             
  394.             main > div > div > div > div > div > div:nth-of-type(2) > div:nth-of-type(3) {
  395.                 grid-template-columns: 1fr auto auto !important;
  396.                 min-width: 100% !important;
  397.             }
  398.             [data-tag="post-card"] p {
  399.                 padding-right: 20px !important;
  400.                 white-space: break-spaces !important;
  401.             }
  402.             [data-tag="content-card-comment-thread-container"] {
  403.                 padding-right: 50px !important;
  404.             }
  405.         }
  406.     }
  407.     if nojump {
  408.         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 {
  409.             display: none;
  410.             height: 0;
  411.             margin-top: 0;
  412.             z-index: -9999;
  413.         }
  414.     }
  415. }