☰

Patreon responsive + customizations

Patreon website is more suitable for wide screens.

当前为 2024-06-30 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           Patreon responsive + customizations
  3. @version        1.0.13
  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.     li,
  47.     p,
  48.     .cLOyGt,
  49.     .cuiKYE,
  50.     .cQjDCC,
  51.     .fxePXf,
  52.     .jYEggK {
  53.         font-size: fontsize !important;
  54.     }    
  55.     .vWGl {
  56.         font-size: calc(var(--fontsize) - .2rem)!important;
  57.     }
  58.     span > .vWGl {
  59.         font-size: inherit !important;
  60.     } 
  61.     .gxOVkK {
  62.         font-size: calc(var(--fontsize) - .4rem)!important;
  63.     }
  64.     
  65.     if nocomments {
  66.         [data-tag="content-card-comment-thread-container"],
  67.         .bmnjsr {
  68.             display: none !important;
  69.         }
  70.     }
  71.     
  72.     if nojump {
  73.         .sc-jrQzAO.bAzCwM,
  74.         .sc-o4u8m1-2 > div > div:nth-child(2),
  75.         [data-tag="upgrade-free-membership-button"],
  76.         [data-tag="free-membership-upgrade-cta"] {
  77.             display: none !important;
  78.             height: 0 !important;
  79.             max-height: 0 !important;
  80.         }
  81.     }
  82.     
  83.     if widemode {
  84.         section.fZbiny>div,
  85.         .bNdQpa,
  86.         .bnFcNI,
  87.         .cuHeCZ,
  88.         .gSEDWh,
  89.         .hGVSIy,
  90.         .idaEYe,
  91.         .kYRjdn,
  92.         .lghRlU,
  93.         .McnWk,
  94.         .PSylB,
  95.         .VqdYx {
  96.             max-width: 100% !important;
  97.         }
  98.         .gwGwhu {
  99.             padding: 0;
  100.         }
  101.  
  102.         .bcGqVn {
  103.             grid-template-columns: 80% 20%;
  104.         }
  105.  
  106.         .jwWBqC {
  107.             grid-column-end: span 1;
  108.         }
  109.         
  110.         .leSNuf:nth-child(odd)> .dGdDmr {
  111.             flex-direction: row-reverse !important;
  112.         }
  113.         
  114.         .sc-o4u8m1-4.hBubtn > div > div > h2 {
  115.             margin-top: 1rem;
  116.         }        
  117.         .dzWUmz,
  118.         .cgDWfu {
  119.             max-width: max-content !important;
  120.         }
  121.     }
  122. }
  123.  
  124. @-moz-document url("https://www.patreon.com/home") {
  125.     if bigimages {
  126.         * {
  127.             aspect-ratio: auto !important;
  128.         }
  129.         .dofSdt img {
  130.             min-width: 100% !important;
  131.             object-fit: cover !important;
  132.         }  
  133.         [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) {
  134.             display: flex !important;
  135.             flex-basis: 100% !important;
  136.             flex-direction: column !important;
  137.             max-width: 100% !important;
  138.         }
  139.         img,
  140.         div[elevation="subtle"] > div,
  141.         .djipQD > .image-grid {
  142.             display: block !important;
  143.             height: auto !important;
  144.             max-height: 100% !important;
  145.             min-width: 100% !important;
  146.             object-fit: contain !important;
  147.         }
  148.         img[loading="eager"] {
  149.             width: auto !important;
  150.         }
  151.         .image-grid + .image-grid {
  152.             margin-top: 2px;
  153.         }
  154.         
  155.         .image-carousel {
  156.             height: 112px;
  157.             object-fit: contain;
  158.             width: auto !important;
  159.         }
  160.         /* Little unblur */
  161.         .dgyaSI {
  162.             background: transparent !important;
  163.             opacity: 0 !important;
  164.         }
  165.         .image-grid > img {
  166.             background: transparent !important;
  167.             object-fit: contain !important;
  168.             min-width: 100% !important;
  169.         }
  170.         [data-tag="locked-badge-button"] p {
  171.             padding-right: 3em;
  172.         }
  173.         [width="fluid"] a {
  174.             max-width: 96% !important;
  175.             overflow: hidden !important;
  176.         }
  177.         
  178.         header {
  179.             height: 0 !important;
  180.         }
  181.         
  182.         a,
  183.         img,
  184.         .jQZWvF {
  185.             overflow: hidden !important;
  186.         }
  187.     }
  188. }
  189.  
  190. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/about") {
  191.     div.sc-xac35p-1.jhLQmG {
  192.         display: flex !important;
  193.         flex-direction: row !important;
  194.         justify-content: space-between !important;
  195.         width: 100% !important;
  196.     }
  197.     header {
  198.         height: 417px !important;
  199.     }
  200.     .sc-gIBqdA.hVkHgO > div > div.sc-jrQzAO.bmnjsr {
  201.         padding-right: 2em;
  202.     }
  203. }
  204.  
  205. @-moz-document regexp("https://www\\.patreon\\.com/[^/]+/posts") {
  206.     if bigimages {
  207.         * {
  208.             aspect-ratio: auto !important;
  209.         }
  210.         .dofSdt img {
  211.             min-width: 100% !important;
  212.             object-fit: cover !important;
  213.         }  
  214.         [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) {
  215.             display: flex !important;
  216.             flex-basis: 100% !important;
  217.             flex-direction: column !important;
  218.             max-width: 100% !important;
  219.         }
  220.         img,
  221.         div[elevation="subtle"] > div,
  222.         .djipQD > .image-grid {
  223.             display: block !important;
  224.             height: auto !important;
  225.             max-height: 100% !important;
  226.             max-width: 100% !important;
  227.             min-width: 100% !important;
  228.             object-fit: contain !important;
  229.         }
  230.         
  231.         img[loading="eager"] {
  232.             aspect-ratio: 1 / 1 !important;
  233.             height: 100% !important;
  234.             object-fit: cover !important;
  235.         }
  236.         .image-grid + .image-grid {
  237.             margin-top: 2px;
  238.         }
  239.         
  240.         .image-carousel {
  241.             height: 112px;
  242.             object-fit: contain;
  243.             width: auto !important;
  244.         }
  245.         /* Little unblur */
  246.         .dgyaSI {
  247.             background: transparent !important;
  248.             opacity: 0 !important;
  249.         }
  250.         .image-grid > img {
  251.             background: transparent !important;
  252.             object-fit: contain !important;
  253.             min-width: 100% !important;
  254.         }
  255.         [data-tag="locked-badge-button"] p {
  256.             padding-right: 3em;
  257.         }
  258.         [width="fluid"] a {
  259.             max-width: 96% !important;
  260.             overflow: hidden !important;
  261.         }
  262.         
  263.         header {
  264.             height: 417px !important;
  265.         }
  266.         
  267.         a,
  268.         img,
  269.         .jQZWvF {
  270.             overflow: hidden !important;
  271.         }
  272.     }
  273. }
  274.  
  275. @-moz-document url-prefix("https://www.patreon.com/posts") {
  276.     if bigimages {
  277.         * {
  278.             aspect-ratio: auto !important;
  279.         }
  280.         .dofSdt img {
  281.             min-width: 100% !important;
  282.             object-fit: cover !important;
  283.         }  
  284.         [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) {
  285.             display: flex !important;
  286.             flex-basis: 100% !important;
  287.             flex-direction: column !important;
  288.             max-width: 100% !important;
  289.         }
  290.         img,
  291.         div[elevation="subtle"] > div,
  292.         .djipQD > .image-grid {
  293.             height: auto !important;
  294.             max-height: 100% !important;
  295.             max-width: 100% !important;
  296.             min-width: 100% !important;
  297.             object-fit: contain !important;
  298.         }
  299.         
  300.         img[loading="eager"] {
  301.             aspect-ratio: 1 / 1 !important;
  302.             height: 100% !important;
  303.             object-fit: cover !important;
  304.         }
  305.         .image-grid + .image-grid {
  306.             margin-top: 2px;
  307.         }
  308.         
  309.         .image-carousel {
  310.             height: 112px;
  311.             object-fit: contain;
  312.             width: auto !important;
  313.         }
  314.         /* Little unblur */
  315.         .dgyaSI {
  316.             background: transparent !important;
  317.             opacity: 0 !important;
  318.         }
  319.         .image-grid > img {
  320.             background: transparent !important;
  321.             object-fit: contain !important;
  322.             min-width: 100% !important;
  323.         }
  324.         [data-tag="locked-badge-button"] p {
  325.             padding-right: 3em;
  326.         }
  327.         [width="fluid"] a {
  328.             max-width: 96% !important;
  329.             overflow: hidden !important;
  330.         }
  331.         
  332.         header {
  333.             height: 0 !important;
  334.         }
  335.         
  336.         a,
  337.         img,
  338.         .jQZWvF {
  339.             overflow: hidden !important;
  340.         }
  341.     }
  342. }